/* jellee.chat cabinet theme (keks, 2026-11-06: «в кабинете используй shadcncraft»). The shadcncraft kit is built
 * on shadcn/ui's neutral theme: plain Inter, neutral grey scale, hairline borders, no accent colour. The cabinet is
 * already shadcn/ui, so here only its tokens are switched to that theme; the build links this file after the
 * cabinet's own CSS on the freepay copy only (scripts/build-worker.mjs). Jellee never loads it. */
:root, .kc-light {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --subtle: oklch(0.985 0 0);
  --sidebar: oklch(0.985 0 0);
  --bubble: oklch(0.97 0 0);
  --border: oklch(0.922 0 0);
  --border-strong: oklch(0.87 0 0);
  --accent: oklch(0.97 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --brand: oklch(0.205 0 0);
  --brand-soft: oklch(0.97 0 0);
  --ring: oklch(0.708 0 0);
  --danger: oklch(0.577 0.245 27.325);
  --code-bg: oklch(0.985 0 0);
  --canvas: oklch(0.985 0 0);
  --dot: transparent;
  --composer-shadow: 0 0 0 1px var(--border), 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
/* Dark: keks's reference (2026-11-06, Pinterest pin 737183032789836385): a deep blue-black, a soft light falling
 * from the top centre, a faint teal glow in the lower right; floating panels a shade lighter, hairlines of white at
 * a few percent, silver text. White stays the main button colour. */
.dark {
  --background: #0e111a;
  --foreground: #f2f3f7;
  --card: #161a25;
  --muted: #1a1e2a;
  --muted-foreground: #8b90a1;
  --subtle: #121520;
  --sidebar: #131722;
  --bubble: #1c2030;
  --border: rgb(255 255 255 / 0.07);
  --border-strong: rgb(255 255 255 / 0.11);
  --accent: #1a1e2a;
  --primary: #fff;
  --primary-foreground: #0e111a;
  --brand: #fff;
  --brand-soft: #1a1e2a;
  --ring: #4b5266;
  --danger: #ff6b6b;
  --code-bg: #10131c;
  --canvas: #0e111a;
  --dot: transparent;
  --composer-shadow: 0 0 0 1px var(--border);
}
body { font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: normal }

/* The dot-matrix wordmark becomes the JELLEE logo (brand/freepay/art/logo.png), in the text colour. */
svg.dm[aria-label="JELLEE"] > * { display: none }
svg.dm[aria-label="JELLEE"] {
  background-color: currentColor;
  -webkit-mask: url(/freepay/logo.png) left center / contain no-repeat;
  mask: url(/freepay/logo.png) left center / contain no-repeat;
}

/* The onboarding picture is a red sunset on Jellee: black and white here, as the rest of the copy. */
.kc-ob-hero { filter: grayscale(1) !important }

/* The agent's eyes glow red on Jellee: white light only on the copy. */
.kl-face, .kl-dorb { filter: grayscale(1) }

/* Headings as on jellee.chat: regular weight, slightly tight. */
h1, h2 { font-weight: 400 !important; letter-spacing: -0.01em }

/* ── keks's reference (Pinterest pin 737183032789836385, a screen recording; markup gated by code/src/lib/brand.ts) ──
 * Everything small and quiet: near-black blue page with a soft light from the top centre and a teal haze lower right,
 * a barely-there rail, small type, dark chips and one white button in the top right, a narrow glass composer low on
 * the screen with the model as a pill above it, and the conversation centred under the prompt as a title. */
.dark { --background: #0c0f17; --sidebar: #10131c; --muted-foreground: #8a8fa0; --bubble: transparent }
.dark .fp-main {
  background:
    radial-gradient(46% 42% at 52% 0%, rgb(70 76 120 / 0.34), transparent 75%),
    radial-gradient(30% 34% at 92% 100%, rgb(52 104 116 / 0.16), transparent 75%),
    var(--background);
}
.fp-main { background: var(--background) }
.dark body, .dark #root { background: #090b11 }
.fp-float { background: var(--sidebar); border-radius: 14px; overflow: hidden }
.dark .fp-float { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.025) }
.fp-rail-btn { color: rgb(255 255 255 / 0.28); transition: color var(--fp-t-hover) var(--fp-ease), background-color var(--fp-t-hover) var(--fp-ease)}
.fp-rail-btn svg { width: 17px !important; height: 17px !important }
:root:not(.dark) .fp-rail-btn { color: rgb(0 0 0 / 0.4) }
.fp-rail-btn:hover { color: rgb(255 255 255 / 0.85); background: rgb(127 127 127 / 0.08) }
.fp-rail-btn.is-on { color: #fff }
.fp-main .kc-topbar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none }

/* Top right: dark chips («0/10 Credits Used») and the white account button. */
.fp-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 9px;
  font-size: 12px; font-weight: 500; color: #d9dce5; background: rgb(255 255 255 / 0.035);
  border: 1px solid rgb(255 255 255 / 0.06); transition: background-color var(--fp-t-hover) var(--fp-ease);
}
.fp-chip:hover, .fp-chip[data-state="open"] { background: rgb(255 255 255 / 0.07) }
.fp-chip-dot { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c9f1ff, #3aa0c8); box-shadow: 0 0 6px rgb(80 190 230 / 0.6) }
.fp-account {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 4px; border-radius: 9px;
  background: #fff; color: #0c0f17; font-size: 12px; font-weight: 600; transition: opacity var(--fp-t-hover) var(--fp-ease);
}
.fp-account:hover { opacity: 0.92 }
.fp-account-av > span { border-radius: 6px !important; box-shadow: none !important }
.fp-account-sep { width: 1px; height: 16px; background: rgb(0 0 0 / 0.12) }
:root:not(.dark) .fp-chip { color: #222; background: rgb(0 0 0 / 0.03); border-color: rgb(0 0 0 / 0.08) }
:root:not(.dark) .fp-account { background: #0c0f17; color: #fff }

/* New chat. */
.fp-star { filter: drop-shadow(0 0 6px rgb(90 165 255 / 0.95)) drop-shadow(0 0 18px rgb(60 130 255 / 0.55)) }
.fp-help {
  background: linear-gradient(180deg, #f3f4f8 20%, #9aa0b0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root:not(.dark) .fp-help { background: linear-gradient(180deg, #23262e, #6b7080); -webkit-background-clip: text; background-clip: text }
.fp-card {
  position: relative; display: block; aspect-ratio: 172 / 100; border-radius: 12px; overflow: hidden; text-align: left; color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 14px 30px -16px rgb(0 0 0 / 0.9);
  animation: fp-card-in 900ms cubic-bezier(.16,.84,.24,1) both; animation-delay: calc(var(--i, 0) * 140ms + 150ms);
  transition: transform 220ms var(--fp-ease), box-shadow 220ms var(--fp-ease);
}
.fp-card:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), inset 0 0 0 1px rgb(255 255 255 / 0.2), 0 18px 34px -16px rgb(0 0 0 / 0.9) }
@keyframes fp-card-in {
  from { opacity: 0; transform: translateX(calc(140px + var(--i, 0) * 60px)) scale(0.25) }
  60% { opacity: 1 }
  to { opacity: 1; transform: none }
}
@media (prefers-reduced-motion: reduce) { .fp-card { animation: none } }
.fp-card[data-tone="code"] { background: linear-gradient(160deg, #8f86ff 0%, #6f5ff0 55%, #a99bff 100%) }
.fp-card[data-tone="image"] { background: linear-gradient(170deg, #6fb4ef 0%, #a9c6ec 55%, #f1c69c 100%) }
.fp-card[data-tone="video"] { background: linear-gradient(160deg, #f7a6c8 0%, #f6b98d 55%, #f9e08a 100%) }
.fp-card-t { position: absolute; left: 11px; top: 9px; right: 30%; font-size: 12.5px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; text-shadow: 0 1px 2px rgb(0 0 0 / 0.12) }
.fp-card-art { position: absolute; right: -4px; bottom: -6px; width: 64%; height: auto; filter: drop-shadow(0 8px 12px rgb(30 20 80 / 0.35)) }

/* Composer: a narrow dark glass box, the model as a pill above its right corner, the repository chip on the left. */
.fp-pill { display: inline-flex; align-items: center; border-radius: 10px; background: rgb(255 255 255 / 0.035); border: 1px solid rgb(255 255 255 / 0.07) }
.fp-pill > button { height: 30px !important; font-size: 12px !important; color: #e3e5ec !important; border-radius: 9px !important }
:root:not(.dark) .fp-pill { background: rgb(0 0 0 / 0.03); border-color: rgb(0 0 0 / 0.08) }
:root:not(.dark) .fp-pill > button { color: #222 !important }
.fp-above-left > * { font-size: 12px !important; height: 30px !important; color: #a3a8b8; border-radius: 9px; background: rgb(255 255 255 / 0.03); border: 1px solid rgb(255 255 255 / 0.06); padding: 0 10px }
.dark .fp-composer .nc-prism {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.025));
  border-color: rgb(255 255 255 / 0.07); border-radius: 16px; padding: 4px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 24px 60px -30px rgb(0 0 0 / 0.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.dark .fp-composer .nc-prism:focus-within { border-color: rgb(255 255 255 / 0.13) }
.dark .fp-composer .kl-glow:focus-within { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 24px 60px -30px rgb(0 0 0 / 0.9) !important }
.fp-composer textarea { font-size: 13.5px !important }
.fp-composer textarea::placeholder { color: #6f7486 }
.fp-composer .kl-mic, .fp-composer .kl-send { width: 28px !important; height: 28px !important }
.fp-composer .kl-mic svg { width: 15px; height: 15px }
.fp-composer .kl-send svg { width: 15px; height: 15px }
.kl-send { background: rgb(255 255 255 / 0.18); color: #0c0f17 }
.kl-send:disabled { background: rgb(255 255 255 / 0.16) !important; color: rgb(12 15 23 / 0.75) !important }
.kl-send:not(:disabled) { background: #fff; color: #0c0f17; box-shadow: none }
:root:not(.dark) .kl-send:not(:disabled) { background: #0c0f17; color: #fff }
.dark .fp-main .bg-background { background: transparent }
.dark .fp-main .before\:from-background::before { --tw-gradient-from: transparent }

/* The conversation: the prompt is a centred title, the answer sits in a narrow column under it. */
.fp-thread .kc-user-bubble { align-self: center; margin: 0 auto; max-width: 100%; border: 0; background: none; padding: 0; text-align: center }
.fp-thread .kc-user-bubble .whitespace-pre-wrap { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.35 }
.fp-thread .kc-user-bubble ~ * { align-self: center }
.fp-thread { font-size: 14px }
.fp-thread .text-\[16px\] { font-size: 14.5px }

@media (max-width: 640px) {
  .fp-card-t { font-size: 11px; right: 8px }
  .fp-chip { padding: 0 9px }
}
.fp-thread .prose-nc { font-size: 14px; line-height: 1.7; color: #d5d8e1 }
.fp-thread .prose-nc pre, .fp-thread .prose-nc code { font-size: 12.5px }
.fp-thread { max-width: 620px !important }
@media (max-width: 640px) { .fp-card-art { width: 52% } }

/* ── keks, 2026-11-07: «ДА ЭТО НЕЙРОСЛОП». The reference's layout stays; its look goes: no gradients, no glow, no
 * coloured cards, no glass. Back to the JELLEE palette: pure black, white text, #999 secondary, #0d0d0d tiles,
 * #1f1f1f hairlines, one white button. These rules come last and override the ones above. */
.dark { --background: #000; --foreground: #fff; --sidebar: #0a0a0a; --card: #0d0d0d; --muted: #141414; --muted-foreground: #999;
  --border: #1f1f1f; --border-strong: #2a2a2a; --bubble: transparent; --code-bg: #0d0d0d; --canvas: #000; --accent: #141414 }
.dark .fp-main, .fp-main { background: var(--background) }
.dark body, .dark #root { background: #000 }
.dark .fp-float { box-shadow: inset 0 0 0 1px #1a1a1a }
.fp-rail-btn { color: #666 }
.fp-rail-btn:hover { color: #fff; background: #141414 }
.fp-star { filter: none; width: 28px; height: 28px }
.fp-star path { fill: #fff }
.fp-help, :root:not(.dark) .fp-help { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--foreground) }
.fp-help { font-weight: 400 !important; letter-spacing: -0.03em }
.fp-chip, .fp-pill, .fp-above-left > * { background: #0d0d0d; border: 1px solid #1f1f1f; color: #fff }
.fp-chip:hover, .fp-chip[data-state="open"], .fp-pill:hover { background: #141414 }
.fp-chip-dot { display: none }
.fp-account { border-radius: 9px; box-shadow: none }
/* Task cards: flat dark tiles like the model tiles, a mono number, white title; no pictures. */
.fp-hero [role="list"] { counter-reset: fpcard }
.fp-card, .fp-card[data-tone] {
  background: #0d0d0d !important; border: 1px solid #1f1f1f; box-shadow: none !important; color: #fff;
  aspect-ratio: auto; height: 96px; animation: fp-card-fade 500ms ease both; animation-delay: calc(var(--i, 0) * 80ms);
  transition: border-color var(--fp-t-hover) var(--fp-ease), background-color var(--fp-t-hover) var(--fp-ease);
}
.fp-card:hover { transform: none; background: #141414 !important; border-color: #333 }
.fp-card::before { counter-increment: fpcard; content: counter(fpcard, decimal-leading-zero); position: absolute; left: 12px; bottom: 10px;
  font: 11px "Geist Mono", ui-monospace, monospace; color: #666 }
.fp-card-t { text-shadow: none; font-weight: 400; font-size: 13px; right: 12px; left: 12px; top: 11px }
.fp-card-art { display: none }
@keyframes fp-card-fade { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
:root:not(.dark) .fp-card, :root:not(.dark) .fp-card[data-tone] { background: #fafafa !important; border-color: #e5e5e5; color: #000 }
/* Composer: a flat dark box with a hairline, white send. */
.dark .fp-composer .nc-prism { background: #0d0d0d; border-color: #1f1f1f; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none }
.dark .fp-composer .nc-prism:focus-within { border-color: #333 }
.dark .fp-composer .kl-glow:focus-within { box-shadow: none !important }
.kl-send:disabled { background: #1f1f1f !important; color: #666 !important }
.fp-thread .prose-nc { color: #e5e5e5 }
.fp-account-av img { filter: grayscale(1) }

/* keks, 2026-11-07: «сделай фон градиент + шум», then «Давай такой дизайн крч» (a light AI moodboard app: a warm page,
 * a white-framed grey grid canvas, a small white menu card, a big dark two-line heading, fanned photo cards, a white
 * composer). The warm page around the frame is a soft gradient with grain. The whole cabinet uses light tokens here,
 * whatever the theme, so menus and dialogs match. */
html:has(.fp-app), html:has(.fp-app) body, .dark body:has(.fp-app) {
  --background: #f1f1f0; --foreground: #1b2a21; --card: #fff; --card-foreground: #1b2a21; --popover: #fff; --popover-foreground: #1b2a21;
  --muted: #f3f3f2; --muted-foreground: #7b7d7a; --accent: #f1f1f0; --accent-foreground: #1b2a21; --border: #e4e4e2; --border-strong: #d6d6d3;
  --input: #e4e4e2; --sidebar: #fff; --bubble: #fff; --code-bg: #111; --canvas: #f1f1f0; --primary: #111; --primary-foreground: #fff; --ring: #c8c8c4;
  color-scheme: light;
  background:
    radial-gradient(60% 60% at 0% 0%, #ffe7c2 0%, rgb(255 231 194 / 0) 70%),
    radial-gradient(55% 55% at 100% 100%, #ffd9cf 0%, rgb(255 217 207 / 0) 70%),
    radial-gradient(50% 50% at 100% 0%, #e9f1ff 0%, rgb(233 241 255 / 0) 70%),
    #fdf2e2;
}
body:has(.fp-app)::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.4; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.55'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fp-app {
  position: relative; z-index: 1; height: calc(100dvh - 40px) !important; margin: 20px; border-radius: 34px; overflow: hidden;
  border: 12px solid #fff; box-shadow: 0 30px 80px -40px rgb(120 80 30 / 0.35);
  background-color: #f1f1f0;
  background-image: linear-gradient(#e6e6e4 1px, transparent 1px), linear-gradient(90deg, #e6e6e4 1px, transparent 1px);
  background-size: 26px 26px; background-position: -1px -1px;
}
@media (max-width: 767px) { .fp-app { margin: 0; height: 100dvh !important; border-width: 0; border-radius: 0 } }
.fp-app .fp-main, .fp-app .kc-main { background: transparent !important }
.fp-app .fp-main .bg-background { background: transparent }

/* The menu card. */
.fp-app .fp-navcard { background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 10px 30px -18px rgb(0 0 0 / 0.25); -webkit-backdrop-filter: none; backdrop-filter: none }
.fp-rail-logo { font-family: var(--fp-notion); font-weight: 600; font-size: 15px; letter-spacing: 0.02em; color: #111 }
.fp-app .fp-rail-btn { color: #4a4d4a; font-weight: 400 }
.fp-app .fp-rail-btn svg { width: 17px !important; height: 17px !important; color: #6b6e6b }
.fp-app .fp-rail-btn:hover { background: #f4f4f3; color: #111 }
.fp-app .fp-rail-btn.is-on { background: #f1f1f0; color: #111; font-weight: 500 }
.fp-app .fp-rail-btn.is-on svg { color: #111 }
.fp-app .kc-sidepanel.fp-float { background: #fff; border-radius: 16px; box-shadow: 0 10px 30px -18px rgb(0 0 0 / 0.25) }

/* Top bar: a white «credits» pill with a gold coin, a black round «+», white round icon buttons. */
.fp-app .kc-topbar { background: transparent !important; border: 0 }
.fp-app .fp-chip { height: 36px; background: #fff; color: #1b2a21; border: 0; border-radius: 999px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); font-size: 13px; padding: 0 14px 0 8px; gap: 8px }
.fp-app .fp-chip:hover, .fp-app .fp-chip[data-state="open"] { background: #fafafa }
.fp-app .fp-chip .text-\[\#8b90a1\] { color: #1b2a21 }
.fp-app .fp-chip-dot { display: block; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe08a, #f2b01e 60%, #c98a0a); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.5) }
.fp-app .fp-chip-solid { width: 36px; padding: 0; justify-content: center; background: #111; color: #fff }
.fp-app .fp-chip-solid:hover { background: #2a2a2a }
.fp-app .fp-chip-solid > span { display: none }
.fp-app .fp-chip-solid svg { width: 16px; height: 16px }
.fp-app .kc-topbar .ml-auto > span > button, .fp-app .kc-topbar .ml-auto > button { border-radius: 999px }
.fp-account-av img { filter: none }

/* New chat. */
.fp-title { font-family: var(--fp-notion); font-weight: 500; color: #1b2a21; text-align: center; font-size: 50px; line-height: 1.08; letter-spacing: -0.025em }
.fp-emoji { font-size: 0.85em }
.fp-sub { margin-top: 12px; font-family: var(--fp-notion); font-size: 19px; color: #8a8c89; text-align: center }
@media (max-width: 640px) { .fp-title { font-size: 32px } .fp-sub { font-size: 15px } }
.fp-fan { display: flex; justify-content: center; margin-top: 40px; padding: 0 8px }
.fp-photo {
  position: relative; width: 196px; flex: none; display: flex; flex-direction: column; text-align: left; padding: 10px 10px 14px;
  background: #fff; border-radius: 22px; box-shadow: 0 2px 4px rgb(0 0 0 / 0.04), 0 18px 34px -20px rgb(0 0 0 / 0.35);
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px)); margin-left: -14px; transition: transform 220ms var(--fp-ease), box-shadow 220ms var(--fp-ease);
  animation: fp-photo-in 650ms cubic-bezier(.16,.84,.24,1) both; animation-delay: calc(var(--i, 0) * 90ms + 80ms);
}
.fp-photo:first-child { margin-left: 0 }
.fp-photo[data-tone="code"] { --r: -5deg; --y: 6px; z-index: 1 }
.fp-photo[data-tone="image"] { --r: 2deg; --y: -4px; z-index: 2 }
.fp-photo[data-tone="video"] { --r: -2deg; --y: 4px; z-index: 3 }
.fp-photo:hover { --r: 0deg; --y: -10px; z-index: 5; box-shadow: 0 2px 4px rgb(0 0 0 / 0.05), 0 26px 40px -20px rgb(0 0 0 / 0.4) }
@keyframes fp-photo-in { from { opacity: 0; transform: translateY(24px) rotate(0deg) } }
@media (prefers-reduced-motion: reduce) { .fp-photo { animation: none } }
.fp-photo-pic { display: block; position: relative; height: 112px; border-radius: 15px; overflow: hidden }
.fp-photo[data-tone="code"] .fp-photo-pic { background: linear-gradient(150deg, #9b8cff, #6c5ce7 60%, #b3a6ff) }
.fp-photo[data-tone="image"] .fp-photo-pic { background: linear-gradient(160deg, #7fbcf2, #b9d3f0 55%, #f6cfa5) }
.fp-photo[data-tone="video"] .fp-photo-pic { background: linear-gradient(160deg, #f9a8c9, #f8bf93 55%, #fae38f) }
.fp-photo .fp-card-art { position: absolute; right: -4px; bottom: -6px; width: 86%; height: auto }
.fp-photo-dots { display: flex; gap: 5px; margin: 10px 2px 8px }
.fp-photo-dots i { width: 13px; height: 13px; border-radius: 50% }
.fp-photo-t { font-family: var(--fp-notion); font-size: 16px; font-weight: 500; color: #111; padding: 0 2px; letter-spacing: -0.01em }
.fp-photo-t em { font-family: var(--fp-notion); font-style: italic; font-weight: 400; font-size: 1.12em }
.fp-photo-d { margin-top: 3px; padding: 0 2px; font-size: 11.5px; line-height: 1.35; color: #8a8c89 }
@media (max-width: 640px) {
  .fp-fan { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 10px 4px 14px; margin-top: 26px; width: 100% }
  .fp-photo { width: 168px; margin-left: -8px }
  .fp-photo-pic { height: 92px }
}
.fp-under { color: #7b7d7a } .fp-under:hover { color: #111 }

/* Composer: white, soft border, round grey tool buttons. */
.fp-composer .nc-prism, .dark .fp-composer .nc-prism {
  background: #fff !important; border: 1px solid #ececea !important; border-radius: 20px; padding: 10px 12px 8px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 16px 40px -26px rgb(0 0 0 / 0.3) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.fp-composer textarea { color: #111; font-size: 14.5px !important }
.fp-composer textarea::placeholder { color: #a9aaa7; font-style: italic }
.fp-composer .nc-prism button:not(.kl-send) { border-radius: 999px }
.fp-composer .kl-send { width: 32px !important; height: 32px !important; border-radius: 999px !important; background: #111 !important; color: #fff !important }
.fp-composer .kl-send:disabled { background: #d9d9d6 !important; color: #fff !important }
.fp-repo > * { font-size: 12.5px !important }

/* The thread on the canvas: the user's message as a white pill on the right, the answer as a white card. */
.fp-thread { max-width: 680px !important }
.fp-thread .kc-user-bubble {
  align-self: flex-end; margin: 0 0 0 auto; width: fit-content; max-width: 78%; text-align: left; background: #fff; color: #111; border: 0;
  border-radius: 20px; padding: 12px 18px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 12px 28px -20px rgb(0 0 0 / 0.3);
}
.fp-thread .kc-user-bubble .whitespace-pre-wrap { font-size: 14.5px; font-weight: 400; letter-spacing: normal; line-height: 1.5 }
.fp-thread .kc-user-bubble ~ * { align-self: flex-end }
.fp-thread .kc-ai-msg { background: #fff; border-radius: 22px; padding: 16px 20px 12px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 14px 32px -22px rgb(0 0 0 / 0.3) }
.fp-thread .prose-nc { color: #1f2a23 }
.fp-thread .kc-ai-msg .bg-code-bg { --foreground: #ededed; --muted-foreground: #9a9a9a; --border: #222; --muted: #1a1a1a; color: #ededed; background: #111 }
.fp-thread .kc-ai-msg .prose-nc :not(pre) > code { background: #f3f3f2; color: #111 }

/* The agent's orb: a small glowing sphere that breathes while it thinks. */
.fp-orb { width: 18px; height: 18px; border-radius: 50%; flex: none; background: radial-gradient(circle at 34% 30%, #fff 0%, #9fd2ff 38%, #3a7bff 72%, #1b3fb0 100%); box-shadow: 0 0 10px rgb(80 140 255 / 0.5) }
.fp-orb[data-mood="thinking"], .fp-orb[data-mood="waiting"] { animation: fp-orb 1.6s ease-in-out infinite }
.fp-orb[data-mood="speaking"] { animation: fp-orb 0.9s ease-in-out infinite }
.fp-orb[data-mood="failed"] { background: radial-gradient(circle at 34% 30%, #fff, #bbb 60%, #777); box-shadow: none }
@keyframes fp-orb { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.18) } }
@media (prefers-reduced-motion: reduce) { .fp-orb { animation: none !important } }
.fp-photo .fp-card-art { display: block }
html:has(.fp-app) #root, html:has(.fp-app) body > div:first-of-type { background: transparent }
@media (max-width: 640px) { .fp-photo { width: 140px; padding: 8px 8px 12px } .fp-photo-pic { height: 78px } .fp-photo-d { display: none } .fp-photo-t { font-size: 14px } }

/* keks, 2026-11-07: «шрифт сделай как у Notion» — Notion's own stack: the system UI font, bold page-style headings. */
html:has(.fp-app) { --fp-notion: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol" }
html:has(.fp-app) body, html:has(.fp-app) button, html:has(.fp-app) input, html:has(.fp-app) textarea { font-family: var(--fp-notion); letter-spacing: normal }
.fp-title { font-weight: 700; letter-spacing: -0.02em; color: #37352f }
.fp-sub { color: #787774 }
.fp-photo-t { font-weight: 600; color: #37352f }
.fp-photo-t em { font-style: normal; font-weight: 600; font-size: 1em }
.fp-rail-logo { font-weight: 700; letter-spacing: 0 }
html:has(.fp-app), html:has(.fp-app) body { --foreground: #37352f; --card-foreground: #37352f; --popover-foreground: #37352f; --accent-foreground: #37352f }

/* keks, 2026-11-07 02:28: «Убери скругление и обводку. Фон сделай блюр+шум+размытие» — no frame: the cabinet fills the
 * window; the background is large soft colour blobs, blurred, with grain on top; the menu, cards and composer are
 * frosted glass over it. */
.fp-app, .dark .fp-app {
  margin: 0 !important; height: 100dvh !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: transparent !important; background-image: none !important;
}
html:has(.fp-app), html:has(.fp-app) body { background: #f6efe6 !important }
html:has(.fp-app) body::after {
  content: ""; position: fixed; inset: -10%; z-index: 0; pointer-events: none; filter: blur(70px); opacity: 0.9;
  background:
    radial-gradient(32% 38% at 12% 18%, #ffcf9e 0%, rgb(255 207 158 / 0) 100%),
    radial-gradient(30% 34% at 82% 14%, #c9dcff 0%, rgb(201 220 255 / 0) 100%),
    radial-gradient(34% 40% at 70% 78%, #ffc2d1 0%, rgb(255 194 209 / 0) 100%),
    radial-gradient(30% 36% at 22% 82%, #cdeedd 0%, rgb(205 238 221 / 0) 100%),
    radial-gradient(26% 30% at 48% 46%, #fff3d6 0%, rgb(255 243 214 / 0) 100%);
}
html:has(.fp-app) body::before { z-index: 1; opacity: 0.45 }
.fp-app { z-index: 2 }
.fp-app .fp-navcard, .fp-app .kc-sidepanel.fp-float, .fp-photo, .fp-composer .nc-prism, .dark .fp-composer .nc-prism,
.fp-thread .kc-user-bubble, .fp-thread .kc-ai-msg, .fp-app .fp-chip:not(.fp-chip-solid) {
  background: rgb(255 255 255 / 0.62) !important; -webkit-backdrop-filter: blur(24px) saturate(1.4) !important; backdrop-filter: blur(24px) saturate(1.4) !important;
  border: 0 !important; box-shadow: 0 1px 0 rgb(255 255 255 / 0.7) inset, 0 12px 32px -22px rgb(80 50 20 / 0.35) !important;
}
.fp-photo:hover { background: rgb(255 255 255 / 0.8) !important }

/* keks, 2026-11-07: «весь дизайн уже все элементы в этом стиле делай а то дохуя от клинча осталось». Every page of
 * the cabinet in the same style: pages sit on one frosted sheet like a Notion page, titles are Notion page titles,
 * Jellee's red becomes the JELLEE teal of the logo, mono caps labels become quiet sans labels, tiles and inputs are
 * light glass, menus/tooltips/dialogs are white glass. */
html:has(.fp-app), html:has(.fp-app) body {
  --brand: #0f7b6c; --brand-soft: #ddedea; --primary: #37352f; --ring: rgb(15 123 108 / 0.35);
  --aurora: linear-gradient(135deg, #2a9d8f 0%, #0f7b6c 55%, #045f55 100%);
}
.fp-app [class*="ff2d36"] { --tw-ring-color: #0f7b6c }
.fp-app .bg-\[\#71717a\], body:has(.fp-app) .bg-\[\#71717a\] { background-color: #0f7b6c !important }
.fp-app .text-\[\#71717a\], body:has(.fp-app) .text-\[\#71717a\] { color: #0f7b6c !important }
.fp-app .text-red-500 { color: #c4554d }

/* Page sheet + title. */
.fp-app .kl-page {
  margin: 0 16px 16px; width: auto; min-height: calc(100% - 16px); border-radius: 24px;
  background: rgb(255 255 255 / 0.55); -webkit-backdrop-filter: blur(28px) saturate(1.3); backdrop-filter: blur(28px) saturate(1.3);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.7) inset, 0 20px 50px -34px rgb(80 50 20 / 0.35);
}
@media (min-width: 768px) { .fp-app .kl-page { padding: 32px 40px 56px !important } }
@media (max-width: 767px) { .fp-app .kl-page { margin: 0 8px 8px; border-radius: 18px } }
.fp-app .kc-topbar h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: #37352f }
.fp-app .kc-topbar h1 ~ *, .fp-app .kc-topbar > span.grid { }
.fp-app .kc-topbar > span.grid { background: transparent; box-shadow: none; --tw-ring-shadow: 0 0 #0000; color: #37352f }

/* Quiet labels instead of Jellee's mono caps (code stays mono). */
.fp-app .font-mono.uppercase, body:has(.fp-app) [role="dialog"] .font-mono.uppercase {
  font-family: var(--fp-notion); text-transform: none; letter-spacing: 0; font-weight: 500; color: #787774;
}

/* Tiles, cards and inputs inside pages: light glass with a hairline. */
.fp-app .kl-page .bg-card, .fp-app .kl-page .bg-muted, .fp-app .kl-page [class*="bg-foreground/[0.0"], .fp-app .kc-sidepanel [class*="bg-foreground/[0.0"] {
  background-color: rgb(255 255 255 / 0.6) !important;
}
.fp-app .kl-page .border, .fp-app .kl-page .border-border { border-color: rgb(55 53 47 / 0.09) !important }
.fp-app .kl-page [class*="ring-border"] { --tw-ring-color: rgb(55 53 47 / 0.09) }
.fp-app input, .fp-app select, .fp-app textarea:not(.fp-composer textarea), body:has(.fp-app) [role="dialog"] input {
  background-color: rgb(255 255 255 / 0.75); border-color: rgb(55 53 47 / 0.12); color: #37352f; border-radius: 10px;
}
.fp-app .kl-page .rounded-xl, .fp-app .kl-page .rounded-2xl { border-radius: 16px }

/* Menus, tooltips, dialogs: white glass. */
body:has(.fp-app) .nc-popover, body:has(.fp-app) .nc-material, body:has(.fp-app) [role="dialog"], body:has(.fp-app) [role="menu"], body:has(.fp-app) [data-radix-popper-content-wrapper] > [role="dialog"] {
  background: rgb(255 255 255 / 0.82) !important; color: #37352f; border: 1px solid rgb(55 53 47 / 0.08) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 24px 60px -28px rgb(60 40 20 / 0.4) !important;
}
body:has(.fp-app) [data-radix-popper-content-wrapper] .nc-popover.bg-foreground { background: rgb(55 53 47 / 0.92) !important; color: #fff; border: 0 !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px) }

/* Buttons: Notion-dark primary, teal accents. */
.fp-app .bg-foreground.text-background, body:has(.fp-app) [role="dialog"] .bg-foreground.text-background { background-color: #37352f }
.fp-app .bg-brand, body:has(.fp-app) .bg-brand { color: #fff }

/* Chat list panel and MagicStudio canvas on the background. */
.fp-app .kc-sidepanel .border-b, .fp-app .kc-sidepanel .border-border { border-color: rgb(55 53 47 / 0.08) }
.fp-app .kc-sidepanel.fp-float { margin: 12px 0 12px 12px !important; border-radius: 18px !important }
.fp-app [data-page="photo"] .bg-canvas, .fp-app [data-page="photo"] [class*="bg-canvas"] { background: transparent !important }

/* keks, 2026-11-07: «давай сделаем окна переписки как в телеграм». Telegram bubbles: the user's on the right in
 * Telegram's light green with a tail at the bottom right, Jellee AI's on the left in white with a tail at the bottom
 * left and its name in colour, the time (and two ticks on the user's) small in the bubble's corner. */
.fp-thread { gap: 6px }
.fp-thread .kc-user-bubble, .fp-thread .kc-ai-msg {
  position: relative; overflow: visible; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: 0 1px 2px rgb(16 35 47 / 0.15) !important; border: 0 !important;
}
.fp-thread .kc-user-bubble {
  background: #effdde !important; color: #000; max-width: 72%; border-radius: 16px 16px 4px 16px; padding: 7px 12px 7px 12px;
}
.fp-thread .kc-user-bubble .whitespace-pre-wrap { font-size: 15px; line-height: 1.4; color: #000; display: inline }
.fp-thread .kc-ai-msg {
  background: #fff !important; max-width: 86%; align-self: flex-start; border-radius: 16px 16px 16px 4px; padding: 8px 14px 8px; gap: 6px;
}
.fp-thread .kc-ai-msg > :first-child { color: #3390ec; font-size: 13.5px; font-weight: 600 }
.fp-thread .kc-ai-msg .prose-nc { font-size: 15px; line-height: 1.45; color: #000 }
.fp-thread .kc-user-bubble::after, .fp-thread .kc-ai-msg::after {
  content: ""; position: absolute; bottom: 0; width: 11px; height: 17px; background-repeat: no-repeat; background-size: 11px 17px;
}
.fp-thread .kc-user-bubble::after { right: -8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 17'%3E%3Cpath d='M0 0v17h9c1.7 0 2.4-1.3 1.3-2.4C5.5 10.6 2 6 2 0Z' fill='%23effdde'/%3E%3C/svg%3E") }
.fp-thread .kc-ai-msg::after { left: -8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 17'%3E%3Cpath d='M11 0v17H2C.3 17-.4 15.7.7 14.6 5.5 10.6 9 6 9 0Z' fill='%23fff'/%3E%3C/svg%3E") }
.fp-time { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px -4px -3px 10px; font-size: 11.5px; line-height: 1; color: #a0acb6; font-variant-numeric: tabular-nums; user-select: none }
.fp-thread .kc-user-bubble .fp-time { color: #4fae4e }
.fp-ticks { width: 16px; height: 10px }
.fp-thread .kc-ai-msg .fp-time { position: absolute; right: 12px; bottom: 7px; margin: 0; float: none }

/* keks, 2026-11-07 ~00:45, three references: (1) «меню афигенно сделано» — a black frame hugging the content, a narrow
 * black icon rail on the left (logo on top, thin white icons, the active one in a dark circle; docs, wallet and the
 * avatar at the bottom), the content in a rounded card; (2) «Вот такой стиль круто» — warm paper background, small-caps
 * labels, grey pill chips, black dots, a blurred glowing blue line and one peach highlight; (3) «а это справа круто
 * выглядело бы» — a black tab growing out of the frame's right edge with ring gauges. This replaces the blurred-blob
 * glass of #662/#664; the Telegram bubbles stay. */
html:has(.fp-app), html:has(.fp-app) body, .dark body:has(.fp-app) {
  --background: #f4f1eb; --card: #fbfaf7; --popover: #fbfaf7; --muted: #ebe7df; --accent: #ebe7df; --border: #dcd7cd; --border-strong: #cfc9bd;
  --foreground: #1d1d1b; --card-foreground: #1d1d1b; --popover-foreground: #1d1d1b; --accent-foreground: #1d1d1b; --muted-foreground: #77736b;
  --brand: #2f9bff; --brand-soft: #dcefff; --primary: #1d1d1b; --ring: rgb(47 155 255 / 0.45); --sidebar: #f4f1eb;
  --aurora: linear-gradient(135deg, #7cc6ff 0%, #2f9bff 60%, #1677e6 100%);
  background: #e9e5dc !important;
  background-image: radial-gradient(rgb(29 29 27 / 0.075) 1.1px, transparent 1.3px) !important; background-size: 7px 7px !important;
}
html:has(.fp-app) body::after { display: none }
html:has(.fp-app) body::before { opacity: 0.25 }
.fp-app .bg-\[\#71717a\], body:has(.fp-app) .bg-\[\#71717a\] { background-color: #2f9bff !important }
.fp-app .text-\[\#71717a\], body:has(.fp-app) .text-\[\#71717a\] { color: #2f9bff !important }

/* The black frame and the content card. */
.fp-app, .dark .fp-app {
  margin: 12px !important; height: calc(100dvh - 24px) !important; border-radius: 30px !important; overflow: hidden;
  background: #000 !important; padding: 8px 8px 8px 0; box-shadow: 0 30px 70px -40px rgb(0 0 0 / 0.6) !important;
}
@media (max-width: 767px) { .fp-app, .dark .fp-app { margin: 0 !important; height: 100dvh !important; border-radius: 0 !important; padding: 0 } }
.fp-app .kc-main { background: #f4f1eb !important; border-radius: 24px; overflow: hidden }
@media (max-width: 767px) { .fp-app .kc-main { border-radius: 0 } }
.fp-app .kl-page, .fp-app .kl-page:hover { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; margin: 0; border-radius: 0 }

/* The rail. */
.fp-app .fp-navcard, .fp-app .kc-rail.fp-float {
  width: 64px !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.fp-app .fp-rail-btn { color: rgb(255 255 255 / 0.82) !important; background: transparent }
.fp-app .fp-rail-btn svg { color: currentColor !important; width: 20px !important; height: 20px !important }
.fp-app .fp-rail-btn:hover { background: rgb(255 255 255 / 0.08) !important; color: #fff !important }
.fp-app .fp-rail-btn.is-on { background: #2a2a2a !important; color: #fff !important }
.fp-rail-av button { border-radius: 999px }
.fp-rail-av img, .fp-rail-av [class*="rounded"] { border-radius: 999px !important }

/* The chat list opens as a card inside the frame. */
.fp-app .kc-sidepanel.fp-float, .fp-app .kc-sidepanel {
  background: #f4f1eb !important; margin: 0 8px 0 0 !important; border-radius: 24px !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* Small caps labels, grey pills, black dots. */
.fp-app .font-mono.uppercase, body:has(.fp-app) [role="dialog"] .font-mono.uppercase,
.fp-app .kl-page h2, .fp-app .kl-page h3.text-\[11px\], .fp-app label.text-\[11px\] {
  font-family: var(--fp-notion); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; font-weight: 700; color: #1d1d1b;
}
.fp-app .fp-chip, .fp-app .fp-chip:not(.fp-chip-solid) {
  background: #e3dfd7 !important; color: #1d1d1b !important; box-shadow: none !important; border: 0 !important; height: 34px;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
}
.fp-app .fp-chip:hover { background: #dad5cb !important }
.fp-app .fp-chip-dot { width: 14px; height: 14px; background: #1d1d1b; box-shadow: 0 0 0 4px #f6a58a, 0 0 14px 4px rgb(246 165 138 / 0.7) }
.fp-app .fp-chip-solid { background: #1d1d1b !important; color: #fff !important; text-transform: none }

/* Cards and inputs: paper, hairlines, no glass. */
.fp-app .fp-photo, .fp-composer .nc-prism, .dark .fp-composer .nc-prism, body:has(.fp-app) .nc-popover, body:has(.fp-app) .nc-material, body:has(.fp-app) [role="dialog"], body:has(.fp-app) [role="menu"] {
  background: #fbfaf7 !important; border: 1px solid #e2ddd3 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: 0 1px 2px rgb(29 29 27 / 0.04), 0 14px 30px -22px rgb(29 29 27 / 0.3) !important;
}
body:has(.fp-app) [data-radix-popper-content-wrapper] .nc-popover.bg-foreground { background: #1d1d1b !important; color: #fff; border: 0 !important }
.fp-app .kl-page .bg-card, .fp-app .kl-page .bg-muted, .fp-app .kl-page [class*="bg-foreground/[0.0"] { background-color: #fbfaf7 !important }
.fp-app .kl-page .border, .fp-app .kl-page .border-border { border-color: #e2ddd3 !important }
.fp-app input, .fp-app select { background-color: #fbfaf7; border-color: #dcd7cd }
.fp-composer .kl-send { background: #1d1d1b !important }
.fp-composer .kl-send:not(:disabled) { box-shadow: 0 0 16px 2px rgb(47 155 255 / 0.55) !important }

/* New chat: the glowing blue line behind the cards, paper cards. */
.fp-title { color: #1d1d1b }
.fp-sub { color: #77736b; text-transform: uppercase; font-size: 12px; letter-spacing: 0.08em; font-weight: 700; margin-top: 16px }
.fp-fan { position: relative; isolation: isolate }
.fp-fan::before {
  content: ""; position: absolute; z-index: -1; left: -12%; right: -12%; top: -18%; bottom: -10%; pointer-events: none; filter: blur(16px); opacity: 0.85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 220' preserveAspectRatio='none'%3E%3Cpath d='M20 170 C120 170 150 40 240 60 S360 190 430 120 S520 30 580 50' fill='none' stroke='%2363bbff' stroke-width='26' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.fp-photo:hover { background: #fff !important }

/* The gauge tab on the right edge of the frame. */
.fp-gauges {
  position: absolute; z-index: 30; right: 0; top: 50%; transform: translateY(-50%); width: 76px; padding: 18px 0 14px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; background: #000; border-radius: 30px 0 0 30px;
}
.fp-gauges::before, .fp-gauges::after {
  content: ""; position: absolute; right: 0; width: 30px; height: 30px; pointer-events: none;
  background: radial-gradient(circle at 0 0, transparent 29.5px, #000 30px);
}
.fp-gauges::before { top: -30px }
.fp-gauges::after { bottom: -30px; background: radial-gradient(circle at 0 100%, transparent 29.5px, #000 30px) }
.fp-gauge { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; color: #fff; text-decoration: none }
.fp-gauge-ring { width: 46px; height: 46px }
.fp-gauge-ic { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 46px; height: 46px; display: grid; place-items: center }
.fp-gauge-ic svg { width: 19px; height: 19px }
.fp-gauge-pct { font-size: 12px; font-variant-numeric: tabular-nums; color: rgb(255 255 255 / 0.9) }
.fp-gauge:hover .fp-gauge-ring { filter: brightness(1.25) }
.fp-gauge-gear { margin-top: 4px; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: #fff; background: #1c1c1c }
.fp-gauge-gear:hover { background: #2a2a2a }
.fp-gauge-gear svg { width: 20px; height: 20px }
@media (max-width: 1023px) { .fp-gauges { display: none } }
/* Keep content clear of the tab. */
@media (min-width: 1024px) { .fp-app .kc-main { margin-right: 0 } .fp-app .kc-topbar, .fp-app .fp-hero > div, .fp-app .kl-page { padding-right: 84px } }

/* keks, 2026-11-07 ~00:52: an Ace Studio screenshot, «Сделаешь точь в точь? … левое меню кайфово скруглено. Я не хочу
 * еще пространство и обводку черную». No black frame and no space around: a light grey window, the left menu in
 * #f9f9f9 with a big rounded corner and a hairline, the content white with a hairline under the top bar, grey pill for
 * the user's message, plain answer under the agent's name. Overrides the black frame / paper look of #668. */
html:has(.fp-app), html:has(.fp-app) body, .dark body:has(.fp-app) {
  --background: #ffffff; --card: #ffffff; --popover: #ffffff; --muted: #f3f3f3; --accent: #f0f0f0; --border: #e8e8e8; --border-strong: #dcdcdc;
  --foreground: #1f1f1f; --card-foreground: #1f1f1f; --popover-foreground: #1f1f1f; --accent-foreground: #1f1f1f; --muted-foreground: #8a8a8a;
  --brand: #1f1f1f; --brand-soft: #f0f0f0; --primary: #1f1f1f; --ring: rgb(0 0 0 / 0.15); --sidebar: #f9f9f9;
  background: #f2f2f2 !important; background-image: none !important;
}
html:has(.fp-app) body::before, html:has(.fp-app) body::after { display: none !important }
.fp-app, .dark .fp-app {
  margin: 0 !important; height: 100dvh !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important;
  background: #f2f2f2 !important; border: 0 !important;
}
.fp-app .kc-main { background: #fff !important; border-radius: 0 !important; margin: 0 !important; border-top: 1px solid #e8e8e8 }
.fp-app .kc-topbar { border-bottom: 1px solid #ececec !important; height: 64px }
.fp-app .kc-topbar, .fp-app .fp-hero > div, .fp-app .kl-page { padding-right: revert-layer }
@media (min-width: 768px) { .fp-app .kc-topbar { padding-left: 32px; padding-right: 24px } }
.fp-crumbs { font-size: 16px; color: #8a8a8a }
.fp-app .kc-topbar h1 { font-size: 16px; font-weight: 500; color: #1f1f1f; letter-spacing: 0 }

/* The menu. */
.fp-app .fp-side {
  background: #f9f9f9 !important; border: 1px solid #e8e8e8; border-right-color: #e5e5e5; border-bottom: 0; border-left: 0;
  border-top-left-radius: 34px; margin: 0 !important; box-shadow: none !important;
}
.fp-side-head { display: flex; align-items: center; gap: 4px; height: 76px; padding: 0 16px 0 26px; flex-shrink: 0 }
.fp-side-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #6b6b6b }
.fp-side-btn:hover { background: #ededed; color: #1f1f1f }
.fp-side-btn svg { width: 21px; height: 21px }
.fp-side-item {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 12px; border-radius: 12px; color: #3a3a3a;
  font-size: 16px; text-align: left; transition: background-color var(--fp-t-hover) var(--fp-ease);
}
.fp-side-item:hover { background: #f0f0f0 }
.fp-side-item.is-on { background: #ebebeb; color: #1f1f1f }
.fp-side-ic { display: grid; place-items: center; width: 24px; flex-shrink: 0; color: #5a5a5a }
.fp-side-item.is-on .fp-side-ic { color: #1f1f1f }
.fp-side-ic svg { width: 20px; height: 20px }
.fp-side-tile { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #fff; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25) }
.fp-side-tile svg { width: 14px; height: 14px }
.fp-side-sec { margin: 22px 0 6px; padding: 0 12px; font-size: 14px; color: #8a8a8a }
.fp-side-chats { margin: 0 -4px; font-size: 15px }
.fp-side-chats { color: #3a3a3a }
.fp-side-foot { flex-shrink: 0; padding: 8px 12px 12px; border-top: 1px solid #ededed }
.fp-side.is-folded .fp-side-sec { display: none }
.fp-side.is-folded { border-top-left-radius: 26px }
.fp-app .fp-rail-av, .fp-app .fp-navcard { display: none }

/* Content. */
.fp-app .kl-page { background: #fff !important; padding-left: 32px; padding-right: 32px }
.fp-title { font-weight: 600; color: #1f1f1f }
.fp-sub { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 17px; color: #8a8a8a }
.fp-fan::before { display: none }
.fp-photo { background: #fff !important; border: 1px solid #ececec !important; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 16px 30px -24px rgb(0 0 0 / 0.3) !important }
.fp-app .fp-chip, .fp-app .fp-chip:not(.fp-chip-solid) { background: #f3f3f3 !important; text-transform: none; font-size: 13px; font-weight: 500; letter-spacing: 0 }
.fp-app .fp-chip-dot { width: 18px; height: 18px; box-shadow: none; background: radial-gradient(circle at 35% 35%, #ffe08a, #f2b01e 60%, #c98a0a) }
.fp-app .fp-chip-solid { background: #1f1f1f !important }
.fp-app .font-mono.uppercase, body:has(.fp-app) [role="dialog"] .font-mono.uppercase, .fp-app .kl-page h2, .fp-app .kl-page h3.text-\[11px\], .fp-app label.text-\[11px\] {
  text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: #8a8a8a;
}
.fp-app .kl-page .bg-card, .fp-app .kl-page .bg-muted, .fp-app .kl-page [class*="bg-foreground/[0.0"] { background-color: #fafafa !important }
.fp-app .kl-page .border, .fp-app .kl-page .border-border { border-color: #ececec !important }
.fp-app input, .fp-app select { background-color: #fff; border-color: #e5e5e5 }
.fp-composer .nc-prism, .dark .fp-composer .nc-prism { background: #fff !important; border: 1px solid #e5e5e5 !important; border-radius: 24px !important; box-shadow: 0 2px 6px rgb(0 0 0 / 0.04) !important }
.fp-composer .kl-send:not(:disabled) { box-shadow: none !important }
body:has(.fp-app) .nc-popover, body:has(.fp-app) .nc-material, body:has(.fp-app) [role="dialog"], body:has(.fp-app) [role="menu"] { background: #fff !important; border: 1px solid #e8e8e8 !important }

/* The thread: grey pill for the user, a plain answer under «Jellee AI» (Telegram bubbles of #667 replaced). */
.fp-thread { gap: 18px; max-width: 760px !important }
.fp-thread .kc-user-bubble {
  background: #f0f0f0 !important; color: #1f1f1f; border-radius: 26px !important; padding: 13px 22px !important; box-shadow: none !important; max-width: 78%;
}
.fp-thread .kc-user-bubble .whitespace-pre-wrap { font-size: 16px; color: #1f1f1f }
.fp-thread .kc-user-bubble::after, .fp-thread .kc-ai-msg::after { display: none }
.fp-thread .kc-ai-msg { background: transparent !important; box-shadow: none !important; padding: 0 !important; max-width: 100%; border-radius: 0; gap: 12px }
.fp-thread .kc-ai-msg > :first-child { color: #1f1f1f; font-size: 16px; font-weight: 500; gap: 12px }
.fp-thread .kc-ai-msg .prose-nc { font-size: 16px; line-height: 1.6; color: #1f1f1f }
.fp-thread .kc-ai-msg .fp-time { display: none }
.fp-thread .kc-user-bubble .fp-time { display: none }

/* The limits tab: light, on the right edge. */
.fp-gauges { background: #f9f9f9; border: 1px solid #e8e8e8; border-right: 0; border-radius: 22px 0 0 22px; width: 68px; padding: 14px 0 12px; gap: 12px }
.fp-gauges::before, .fp-gauges::after { display: none }
.fp-gauge, .fp-gauge-pct { color: #1f1f1f }
.fp-gauge-ring circle:first-child { stroke: #e6e6e6 }
.fp-gauge-ic { color: #3a3a3a }
.fp-gauge-ring { width: 40px; height: 40px } .fp-gauge-ic { width: 40px; height: 40px }
.fp-gauge-gear { background: #efefef; color: #3a3a3a }
.fp-gauge-gear:hover { background: #e6e6e6 }

/* keks, 2026-11-07 01:01: «докрути … сделай как тут», «огромный шрифт текст», «по дефолту развернутое меню».
 * The reference's proportions: a compact 14px menu with 34px rows, muted grey text, the chats listed right under
 * the tools (so they are on screen without scrolling), 15px text in the thread. */
.fp-app .fp-side.w-\[272px\] { width: 256px }
.fp-side-head { height: 60px; padding: 0 12px 0 20px }
.fp-side-head img { width: 22px; height: 22px }
.fp-side-head span, .fp-side-head b, .fp-side-head strong { font-size: 15px }
.fp-side-btn { width: 30px; height: 30px; border-radius: 8px }
.fp-side-btn svg { width: 18px; height: 18px }
.fp-side-item { height: 34px; gap: 10px; padding: 0 10px; border-radius: 10px; font-size: 14px; color: #4a4a4a }
.fp-side-item.is-on { background: #ececec; color: #1a1a1a; font-weight: 500 }
.fp-side-ic { width: 20px; color: #6b6b6b }
.fp-side-ic svg { width: 17px; height: 17px }
.fp-side-tile { width: 20px; height: 20px; border-radius: 6px }
.fp-side-tile svg { width: 12px; height: 12px }
.fp-side-sec { margin: 18px 0 4px; padding: 0 10px; font-size: 12.5px; color: #8f8f8f }
.fp-side-chats { margin: 0; font-size: 14px }
.fp-side-chats .group > button.h-7 { height: 24px; padding: 0 10px; font-size: 12.5px; font-weight: 400; color: #8f8f8f; margin-top: 10px }
.fp-side-chats .group.h-9 { height: 34px; border-radius: 10px; padding-left: 10px; font-size: 14px; color: #555 }
.fp-side-chats .group.h-9.ring-1 { box-shadow: none; --tw-ring-shadow: 0 0 #0000; background: #ececec; color: #1a1a1a }
.fp-side-foot { padding: 6px 10px 10px }
.fp-side-foot .fp-side-item { height: 34px }

.fp-app .kc-topbar { height: 56px }
.fp-crumbs { font-size: 14.5px }
.fp-app .kc-topbar h1 { font-size: 14.5px }
.fp-thread .kc-user-bubble { border-radius: 22px }
.fp-thread .kc-user-bubble .whitespace-pre-wrap { font-size: 15px }
.fp-thread .kc-ai-msg > :first-child { font-size: 15px }
.fp-thread .kc-ai-msg .prose-nc { font-size: 15px; line-height: 1.65 }
.fp-title { font-size: clamp(34px, 4.2vw, 52px) }
.fp-sub { font-size: 15px }
.fp-side-chats > *, .fp-side-chats nav { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important }
.fp-side-chats .group > button.h-7 svg { display: none }

/* keks, 2026-11-07 01:04: «левое меню не делай скругленным» — square corners, no outer outline on the menu. */
.fp-app .fp-side, .fp-side.is-folded { border-radius: 0 !important; border-top: 0 !important }
.fp-top-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #6b6b6b; transition: background-color var(--fp-t-hover) var(--fp-ease)}
.fp-top-btn:hover, .fp-top-btn[aria-current="page"] { background: #f0f0f0; color: #1a1a1a }
.fp-top-btn svg { width: 18px; height: 18px }

/* Phone (2026-11-07): grid cells may shrink below their content's width, so the Dashboard cards fit the screen
 * instead of running off its right edge. */
.fp-main .kl-page .grid > * { min-width: 0 }

/* ── One UI pass (keks, 2026-11-07: «фул дизайн улучшить ... OneDesignKit»; the Figma kit is One UI) ───────────
 * Section pages: a light grey page with white rounded blocks on it (no borders, no shadows), large plain titles,
 * Inter everywhere, grouped lists with hairlines between rows. The chat page stays white for reading. */
html:has(.fp-app) {
  --fp-notion: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --fp-ou-bg: #f4f4f6; --fp-ou-card: #fff; --fp-ou-line: #ececf0; --fp-ou-text: #19191b; --fp-ou-sub: #7d7d85;
}
.fp-app .fp-main:not([data-page="code"]), .fp-app .fp-main:not([data-page="code"]) .kl-page { background: var(--fp-ou-bg) !important }
.fp-app .fp-main:not([data-page="code"]) .kc-topbar { background: var(--fp-ou-bg) }
.fp-app .fp-main:not([data-page="code"]) .kc-topbar h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--fp-ou-text) }
.fp-app .fp-main:not([data-page="code"]) .kc-box,
.fp-app .fp-main:not([data-page="code"]) .kc-card {
  background: var(--fp-ou-card) !important; border-color: transparent !important; border-radius: 24px !important; box-shadow: none !important;
}

/* Tools in the menu: flat colour circles, as One UI's app icons (no gradients). */
.fp-side-tile { border-radius: 50%; box-shadow: none }
.fp-side-item[href$="/routing"] .fp-side-tile { background: #f26b4f !important }
.fp-side-item[href$="/awards"] .fp-side-tile { background: #f0a92e !important }
.fp-side-item[href$="/photo"] .fp-side-tile { background: #5b7cfa !important }
.fp-side-item[href$="/library"] .fp-side-tile { background: #22b07d !important }
.fp-side-item[href$="/extensions"] .fp-side-tile { background: #8b5cf6 !important }

/* New chat: a large plain title on the left, the composer, three suggestions as one grouped list. */
.fp-ou-title { font-size: 34px; line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; color: var(--fp-ou-text) }
.fp-ou-sub { margin-top: 8px; font-size: 15px; color: var(--fp-ou-sub) }
@media (max-width: 640px) { .fp-ou-title { font-size: 28px } }
.fp-ou-list { border-radius: 22px; background: var(--fp-ou-bg); padding: 4px }
.fp-ou-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border-radius: 18px; transition: background-color var(--fp-t-hover) var(--fp-ease)}
.fp-ou-row:hover { background: #fff }
.fp-ou-ic { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: #fff; color: var(--fp-ou-text) }
.fp-ou-row:hover .fp-ou-ic { background: var(--fp-ou-bg) }
.fp-ou-ic svg { width: 19px; height: 19px }
.fp-ou-row-t { display: block; font-size: 15px; font-weight: 500; color: var(--fp-ou-text) }
.fp-ou-row-d { display: block; margin-top: 1px; font-size: 13px; color: var(--fp-ou-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.fp-ou-chev { width: 16px; height: 16px; color: #b4b4bb; flex-shrink: 0 }

/* Extensions: each group is one white rounded block, rows with hairlines between them. */
.fp-ext-list { max-width: 880px; background: var(--fp-ou-card); border-radius: 24px; overflow: hidden }
.fp-ext-row + .fp-ext-row { box-shadow: inset 0 1px 0 var(--fp-ou-line) }
.fp-ext-row:hover { background: #fafafb }
.fp-app .fp-main[data-page="extensions"] section > div:first-child { margin-left: 8px }

/* Routing canvas: the cabinet is light here even under the .dark class, so the light line colours apply. */
html:has(.fp-app) .kc-flow { --kc-flow-line: #b4b4bd; --kc-flow-live: #16a34a; --kc-flow-pulse: #bbf7d0; --kc-flow-dot: rgb(0 0 0 / 0.08); background-color: #fff }
html:has(.fp-app) .kc-flow-node { box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 4px 14px -8px rgb(0 0 0 / 0.12) }
html:has(.fp-app) .fp-main[data-page="routing"] .kc-flow { border-color: transparent; border-radius: 24px }

/* An opened award is a full-screen layer, not a dialog box: no box styling from the dialog rules above. */
body:has(.fp-app) .aw-view[role="dialog"] { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0 !important }

/* ── Denser and with colour (keks, 2026-11-07 16:07: «много пространства и всё белое без картинок и иконок») ───── */
/* New chat: the Jellee AI orb next to the title, three straight picture tiles under the composer. */
.fp-ou-orb { display: grid; place-items: center; width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; background: var(--fp-ou-bg) }
.fp-ou-title { font-size: 28px; line-height: 1.15 }
.fp-ou-sub { margin-top: 4px; font-size: 14.5px }
@media (max-width: 640px) { .fp-ou-title { font-size: 24px } .fp-ou-orb { width: 48px; height: 48px } }
.fp-ou-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.fp-ou-tile { display: flex; flex-direction: column; text-align: left; padding: 8px 8px 12px; border-radius: 22px; background: var(--fp-ou-bg); transition: transform 220ms var(--fp-ease), background-color var(--fp-t-hover) var(--fp-ease)}
.fp-ou-tile:hover { transform: translateY(-2px); background: #ececf0 }
.fp-ou-pic { position: relative; display: block; height: 104px; border-radius: 16px; overflow: hidden }
.fp-ou-tile[data-tone="code"] .fp-ou-pic { background: #7c6cf2 }
.fp-ou-tile[data-tone="image"] .fp-ou-pic { background: #6fb0ee }
.fp-ou-tile[data-tone="video"] .fp-ou-pic { background: #f4a07e }
.fp-ou-pic .fp-card-art { display: block; position: absolute; right: -4px; bottom: -6px; width: 84%; height: auto }
.fp-ou-tile-t { margin: 10px 6px 0; font-size: 14.5px; font-weight: 600; color: var(--fp-ou-text) }
.fp-ou-tile-d { margin: 2px 6px 0; font-size: 12.5px; line-height: 1.35; color: var(--fp-ou-sub) }
@media (max-width: 640px) {
  .fp-ou-tiles { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px }
  .fp-ou-tile { flex: 0 0 150px } .fp-ou-pic { height: 84px } .fp-ou-tile-d { display: none }
}

/* Section pages: less air around the content. */
@media (min-width: 768px) {
  .fp-app .fp-main:not([data-page="code"]) .kl-page { padding-top: 12px !important; padding-left: 24px; padding-right: 24px }
}
.fp-app .fp-main:not([data-page="code"]) .kc-topbar { height: 56px }

/* Extensions: two columns of rows on a wide screen, so a group is not a narrow strip with empty space beside it. */
.fp-ext-list { max-width: none }
@media (min-width: 1100px) {
  .fp-ext-list { display: grid; grid-template-columns: 1fr 1fr }
  .fp-ext-row:nth-child(2) { box-shadow: none }
  .fp-ext-row:nth-child(even) { border-left: 1px solid var(--fp-ou-line) }
}

/* Dashboard: the tiles' icons in colour circles. */
.fp-main[data-page="overview"] .kc-viz-tile .rounded-full.size-8 { color: #fff; box-shadow: none; --tw-ring-shadow: 0 0 #0000 }
.fp-main[data-page="overview"] .kc-viz-tile:nth-child(4n+1) .rounded-full.size-8 { background-color: #3e7bfa !important }
.fp-main[data-page="overview"] .kc-viz-tile:nth-child(4n+2) .rounded-full.size-8 { background-color: #8b5cf6 !important }
.fp-main[data-page="overview"] .kc-viz-tile:nth-child(4n+3) .rounded-full.size-8 { background-color: #f0a92e !important }
.fp-main[data-page="overview"] .kc-viz-tile:nth-child(4n+4) .rounded-full.size-8 { background-color: #22b07d !important }

/* ── Chat as one piece (keks, 2026-11-07 17:24: «всё неорганично») ─────────────────────────────────────────────
 * The conversation and the composer share one column and one axis; a short chat sits right above the composer
 * (it grows upwards like a messenger) instead of leaving a hole in the middle; the top bar's controls are one set. */
.fp-scroller { display: flex; flex-direction: column }
.fp-scroller > .fp-thread { width: 100%; margin-top: auto }
.fp-app .fp-thread, .fp-app .fp-composer { max-width: 720px !important }
.fp-app .fp-thread { padding-left: 16px !important; padding-right: 16px !important; padding-bottom: 20px !important; gap: 22px }
.fp-app .fp-thread .kc-user-bubble { border-radius: 20px !important }
.fp-app .fp-thread .kc-ai-msg { background: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important }
.fp-app .fp-thread .kc-ai-msg::after, .fp-app .fp-thread .kc-user-bubble::after { display: none !important }

/* Top bar, right side: one height, one shape, one grey. */
.fp-app .kc-topbar .ml-auto { gap: 6px }
.fp-app .kc-topbar .ml-auto > button,
.fp-app .kc-topbar .ml-auto .fp-top-btn,
.fp-app .kc-topbar .ml-auto [data-slot="popover-trigger"],
.fp-app .kc-topbar .ml-auto > span > button { height: 36px; min-width: 36px; border-radius: 999px !important; color: #5f5f66 }
.fp-app .kc-topbar .ml-auto > button:hover, .fp-app .kc-topbar .ml-auto .fp-top-btn:hover { background: #f0f0f2 }
.fp-app .kc-topbar .fp-chip:not(.fp-chip-solid) { height: 36px; background: #f2f2f4 !important; box-shadow: none !important; border: 0 !important; color: #19191b }
.fp-app .kc-topbar .fp-chip-solid { height: 36px; width: 36px; padding: 0; justify-content: center; border-radius: 999px }
.fp-app .kc-topbar .fp-top-btn svg { width: 18px; height: 18px }
.fp-app .kc-topbar .ml-auto > button[aria-label*="%"] { background: #f2f2f4; padding: 0 12px 0 10px; color: #19191b; font-size: 13px }
.fp-app .kc-topbar .ml-auto > button[aria-label*="%"]:hover { background: #ebebee }

/* ── Polish (keks, 2026-11-07 17:51, «Делай»): settings with inner padding and no cards inside cards, one type
 * scale and two greys, illustrated empty states, quiet motion and skeletons, and a One UI dark theme (html.fp-dark,
 * set by the theme switch in the avatar menu; the .dark class stays on as before). ────────────────────────────── */
html:has(.fp-app) {
  --fp-ou-hover: #f0f0f3; --fp-ou-active: #e8e8ed; --fp-ou-skel: #ececf0; --fp-ou-skel2: #f6f6f8;
  --fp-ou-mid: #4a4a50;
  --muted-foreground: var(--fp-ou-sub); --foreground: var(--fp-ou-text);
}

/* One type scale on section pages: 13 / 14.5 / 17, titles 24; two greys (text, sub). No monospace outside code. */
.fp-app .fp-main:not([data-page="code"]) .kl-page :is([class*="text-[11"], [class*="text-[12"], [class*="text-[13px]"], .text-xs) { font-size: 13px }
.fp-app .fp-main:not([data-page="code"]) .kl-page :is([class*="text-[13.5"], [class*="text-[14"], [class*="text-[15"], .text-sm) { font-size: 14.5px }
.fp-app .fp-main:not([data-page="code"]) .kl-page :is([class*="text-[16"], [class*="text-[17"], [class*="text-[18"]) { font-size: 17px }
.fp-app .kl-page :is(.text-muted-foreground, [class*="text-foreground/"]) { color: var(--fp-ou-sub) }
.fp-app .kl-page .font-mono:not(pre):not(pre *):not(code):not(code *), .fp-app .kl-page td.font-mono, .fp-app .kl-page td .font-mono {
  font-family: var(--fp-notion); font-variant-numeric: tabular-nums; letter-spacing: 0;
}

/* Section blocks: real inner padding (the base .kc-card had none), a clear dark title. */
.fp-app .fp-main:not([data-page="code"]) .kc-card { padding: 20px 24px !important; margin-bottom: 12px }
@media (max-width: 640px) { .fp-app .fp-main:not([data-page="code"]) .kc-card { padding: 16px 18px !important } }
.fp-app .fp-main .kl-page .kc-card h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--fp-ou-text) }
.fp-app .fp-main .kl-page .kc-card h2 + * { margin-top: 2px }
.fp-app .fp-main .kl-page .kc-settings-h { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--fp-ou-text); margin: 4px 0 14px 4px }

/* Options inside a block are rows with a hairline, not cards in a card; the chosen one has a tick. */
.fp-app .kl-page div:has(> .kc-opt) { gap: 0 !important }
.fp-app .kl-page .kc-opt { border: 0 !important; background: transparent !important; border-radius: 0 !important; padding: 12px 0 !important; color: var(--fp-ou-sub) }
.fp-app .kl-page .kc-opt + .kc-opt { box-shadow: inset 0 1px 0 var(--fp-ou-line) }
.fp-app .kl-page .kc-opt b { color: var(--fp-ou-text); font-weight: 600 }
.fp-app .kl-page .kc-opt.is-on b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: #3e7bfa; vertical-align: 2px }

/* Settings menu: one white block, darker text, the open tab clearly marked. */
.fp-app .kl-page .kc-settings-nav a { height: 40px; padding: 0 14px; border-radius: 14px; font-size: 14.5px; color: var(--fp-ou-mid) !important; background: transparent !important }
.fp-app .kl-page .kc-settings-nav a:hover { background: var(--fp-ou-hover) !important; color: var(--fp-ou-text) !important }
.fp-app .kl-page .kc-settings-nav a[aria-current="page"] { background: var(--fp-ou-active) !important; color: var(--fp-ou-text) !important; font-weight: 600 }
@media (min-width: 1024px) { .fp-app .kl-page .kc-settings-nav { background: var(--fp-ou-card); border-radius: 22px; padding: 6px; gap: 2px } }
@media (max-width: 1023px) { .fp-app .kl-page .kc-settings-nav a { background: var(--fp-ou-card) !important; border-radius: 999px } }

/* Empty states: a small flat picture, one line, one button. */
.fp-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 16px; text-align: center }
.fp-empty-t { max-width: 420px; font-size: 14.5px; line-height: 1.5; color: var(--fp-ou-sub) }
.fp-empty-art { --fp-ea-c: #3e7bfa; --fp-ea-tint: #e7eeff; position: relative; display: block; width: 120px; height: 88px; flex-shrink: 0 }
.fp-empty-art[data-tone="violet"] { --fp-ea-c: #8b5cf6; --fp-ea-tint: #efe9ff }
.fp-empty-art[data-tone="green"] { --fp-ea-c: #22b07d; --fp-ea-tint: #e1f5ec }
.fp-empty-art[data-tone="orange"] { --fp-ea-c: #f0a92e; --fp-ea-tint: #fdf0da }
.fp-empty-svg { display: block; width: 100%; height: 100% }
.fp-ea-card { fill: var(--fp-ea-tint) }
.fp-ea-line { fill: #fff; opacity: 0.95 } .fp-ea-line.is-2 { opacity: 0.6 }
.fp-ea-dot { fill: var(--fp-ea-c); opacity: 0.35 } .fp-ea-dot.is-2 { opacity: 0.2 }
.fp-empty-ic { position: absolute; right: 16px; top: 2px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fp-ea-c); color: #fff }
.fp-empty-ic svg { width: 22px; height: 22px }
.fp-empty-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--fp-ou-text); color: var(--fp-ou-card); font-size: 14px; font-weight: 500; transition: opacity var(--fp-t-hover) var(--fp-ease)}
.fp-empty-btn:hover { opacity: 0.88 }
.fp-app .kl-page .fp-lib-empty { border: 0 !important; background: var(--fp-ou-card); border-radius: 24px !important; padding-top: 48px; padding-bottom: 48px }

/* Skeletons instead of a spinner on an empty block. */
.fp-skel { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 6px 0 }
.fp-skel-line { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--fp-ou-skel) 0%, var(--fp-ou-skel2) 50%, var(--fp-ou-skel) 100%); background-size: 200% 100%; animation: fp-shimmer 1.3s linear infinite }
@keyframes fp-shimmer { from { background-position: 100% 0 } to { background-position: -100% 0 } }

/* Motion: a page fades up when opened, rows and buttons answer the pointer. */
@keyframes fp-page-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.fp-app .kl-page { animation: fp-page-in 260ms cubic-bezier(0.2, 0.7, 0.2, 1) both }
.fp-app .kl-page tbody tr td { transition: background-color var(--fp-t-hover) var(--fp-ease)}
.fp-app .kl-page tbody tr:hover td { background: var(--fp-ou-hover) }
.fp-app :is(.fp-side-item, .fp-top-btn, .fp-ext-row, .fp-ou-row, .kc-settings-nav a) { transition: background-color var(--fp-t-hover) var(--fp-ease), color var(--fp-t-hover) var(--fp-ease)}
.fp-app .kl-page button:not(:disabled):active, .fp-empty-btn:active { transform: scale(0.97) }
.fp-app .kl-page button { transition: background-color var(--fp-t-hover) var(--fp-ease), color var(--fp-t-hover) var(--fp-ease), opacity var(--fp-t-hover) var(--fp-ease), transform var(--fp-t-press) var(--fp-ease) }
@media (prefers-reduced-motion: reduce) {
  .fp-app .kl-page, .fp-skel-line { animation: none }
  .fp-app .kl-page button:not(:disabled):active { transform: none }
}

/* ── Dark theme, One UI style: black page, dark grey blocks, the same shapes. ───────────────────────────────── */
html.fp-dark:has(.fp-app), html.fp-dark:has(.fp-app) body, html.fp-dark body:has(.fp-app) {
  --background: #000; --card: #17171a; --popover: #1c1c1f; --muted: #1f1f23; --accent: #232327; --border: #2a2a2f; --border-strong: #38383e;
  --foreground: #f2f2f4; --card-foreground: #f2f2f4; --popover-foreground: #f2f2f4; --accent-foreground: #f2f2f4; --muted-foreground: #8e8e96;
  --brand: #f2f2f4; --brand-soft: #232327; --primary: #f2f2f4; --primary-foreground: #000; --ring: rgb(255 255 255 / 0.2); --sidebar: #0e0e10;
  --fp-ou-bg: #000; --fp-ou-card: #17171a; --fp-ou-line: #26262b; --fp-ou-text: #f2f2f4; --fp-ou-sub: #8e8e96; --fp-ou-mid: #c4c4ca;
  --fp-ou-hover: #202024; --fp-ou-active: #2a2a2f; --fp-ou-skel: #1f1f23; --fp-ou-skel2: #2a2a2f;
  background: #000 !important; color-scheme: dark;
}
html.fp-dark .fp-app, html.fp-dark .dark .fp-app { background: #000 !important }
html.fp-dark .fp-app .kc-main { background: #000 !important; border-top-color: #1c1c20 }
html.fp-dark .fp-app .kc-topbar { border-bottom-color: #1c1c20 !important }
html.fp-dark .fp-crumbs { color: #8e8e96 }
html.fp-dark .fp-app .kc-topbar h1, html.fp-dark .fp-app .fp-main:not([data-page="code"]) .kc-topbar h1 { color: #f2f2f4 }
html.fp-dark .fp-app .fp-main:not([data-page="code"]) .kc-topbar { background: #000 }

html.fp-dark .fp-app .fp-side { background: #0e0e10 !important; border-color: #1c1c20; border-right-color: #1c1c20 }
html.fp-dark .fp-side-btn { color: #9a9aa2 }
html.fp-dark .fp-side-btn:hover { background: #1f1f23; color: #f2f2f4 }
html.fp-dark .fp-side-item { color: #c4c4ca }
html.fp-dark .fp-side-item:hover { background: #1a1a1d }
html.fp-dark .fp-side-item.is-on { background: #232327; color: #fff }
html.fp-dark .fp-side-ic { color: #9a9aa2 }
html.fp-dark .fp-side-item.is-on .fp-side-ic { color: #fff }
html.fp-dark .fp-side-sec { color: #75757d }
html.fp-dark .fp-side-chats, html.fp-dark .fp-side-chats .group.h-9 { color: #b4b4bb }
html.fp-dark .fp-side-chats .group.h-9:hover { background: #1a1a1d }
html.fp-dark .fp-side-chats .group.h-9.ring-1 { background: #232327; color: #fff }
html.fp-dark .fp-side-foot { border-top-color: #1c1c20 }

html.fp-dark .fp-app .kl-page, html.fp-dark .fp-app .fp-main:not([data-page="code"]), html.fp-dark .fp-app .fp-main:not([data-page="code"]) .kl-page { background: #000 !important }
html.fp-dark .fp-title, html.fp-dark .fp-ou-title { color: #f2f2f4 }
html.fp-dark .fp-app .kl-page .bg-card, html.fp-dark .fp-app .kl-page .bg-muted, html.fp-dark .fp-app .kl-page [class*="bg-foreground/[0.0"] { background-color: #1f1f23 !important }
html.fp-dark .fp-app .kl-page .border, html.fp-dark .fp-app .kl-page .border-border { border-color: #2a2a2f !important }
html.fp-dark .fp-app .kl-page input, html.fp-dark .fp-app .kl-page select, html.fp-dark .fp-app .kl-page textarea { background-color: #1f1f23; border-color: #2a2a2f; color: #f2f2f4 }
html.fp-dark .fp-app .font-mono.uppercase, html.fp-dark .fp-app .kl-page h2, html.fp-dark .fp-app .kl-page h3.text-\[11px\], html.fp-dark .fp-app label.text-\[11px\] { color: #8e8e96 }
html.fp-dark .fp-app .fp-main .kl-page .kc-card h2, html.fp-dark .fp-app .fp-main .kl-page .kc-settings-h { color: #f2f2f4 }
html.fp-dark .fp-app .fp-chip, html.fp-dark .fp-app .fp-chip:not(.fp-chip-solid), html.fp-dark .fp-app .kc-topbar .fp-chip:not(.fp-chip-solid) { background: #1c1c20 !important; color: #f2f2f4 }
html.fp-dark .fp-app .fp-chip-solid, html.fp-dark .fp-app .kc-topbar .fp-chip-solid { background: #f2f2f4 !important; color: #000 !important }
html.fp-dark .fp-app .fp-chip:not(.fp-chip-solid) .tabular-nums { color: #f2f2f4 }
html.fp-dark .fp-app .fp-chip .text-\[\#8b90a1\] { color: #8e8e96 }
html.fp-dark .fp-app .bg-foreground.text-background, html.fp-dark body:has(.fp-app) [role="dialog"] .bg-foreground.text-background { background-color: #f2f2f4 !important; color: #000 !important }
html.fp-dark .fp-top-btn, html.fp-dark .fp-app .kc-topbar .ml-auto > button, html.fp-dark .fp-app .kc-topbar .ml-auto .fp-top-btn { color: #b4b4bb }
html.fp-dark .fp-top-btn:hover, html.fp-dark .fp-top-btn[aria-current="page"], html.fp-dark .fp-app .kc-topbar .ml-auto > button:hover, html.fp-dark .fp-app .kc-topbar .ml-auto .fp-top-btn:hover { background: #1c1c20; color: #fff }
html.fp-dark .fp-app .kc-topbar .ml-auto > button[aria-label*="%"] { background: #1c1c20; color: #f2f2f4 }

html.fp-dark .fp-composer .nc-prism, html.fp-dark .dark .fp-composer .nc-prism { background: #17171a !important; border-color: #2a2a2f !important; box-shadow: none !important }
html.fp-dark .fp-composer .kl-send:not(:disabled) { background: #f2f2f4 !important; color: #000 !important }
html.fp-dark body:has(.fp-app) :is(.nc-popover, .nc-material, [role="dialog"], [role="menu"]) { background: #1c1c1f !important; border-color: #2a2a2f !important; color: #f2f2f4 }
html.fp-dark .fp-photo { background: #17171a !important; border-color: #2a2a2f !important; box-shadow: none !important }

html.fp-dark .fp-thread .kc-user-bubble { background: #1f1f23 !important; color: #f2f2f4 }
html.fp-dark .fp-thread .kc-user-bubble .whitespace-pre-wrap, html.fp-dark .fp-thread .kc-ai-msg > :first-child, html.fp-dark .fp-thread .kc-ai-msg .prose-nc { color: #f2f2f4 }

html.fp-dark .fp-gauges { background: #0e0e10; border-color: #1c1c20 }
html.fp-dark .fp-gauge, html.fp-dark .fp-gauge-pct, html.fp-dark .fp-gauge-ic { color: #f2f2f4 }
html.fp-dark .fp-gauge-ring circle:first-child { stroke: #2a2a2f }
html.fp-dark .fp-gauge-gear { background: #1c1c20; color: #c4c4ca }
html.fp-dark .fp-gauge-gear:hover { background: #26262b }

html.fp-dark .fp-ou-orb { background: #17171a }
html.fp-dark .fp-ou-tile { background: #17171a }
html.fp-dark .fp-ou-tile:hover { background: #1f1f23 }
html.fp-dark .fp-ou-list { background: #17171a }
html.fp-dark .fp-ou-row:hover { background: #1f1f23 }
html.fp-dark .fp-ou-ic { background: #1f1f23 }
html.fp-dark .fp-ext-row:hover { background: #1c1c20 }
html.fp-dark .fp-empty-art { --fp-ea-tint: #1d2333 }
html.fp-dark .fp-empty-art[data-tone="violet"] { --fp-ea-tint: #241f33 }
html.fp-dark .fp-empty-art[data-tone="green"] { --fp-ea-tint: #172821 }
html.fp-dark .fp-empty-art[data-tone="orange"] { --fp-ea-tint: #2d2416 }
html.fp-dark .fp-ea-line { fill: #3a3a40 }

html.fp-dark:has(.fp-app) .kc-flow { --kc-flow-line: #4a4a52; --kc-flow-live: #22c55e; --kc-flow-pulse: #14532d; --kc-flow-dot: rgb(255 255 255 / 0.08); background-color: #0e0e10 }
html.fp-dark:has(.fp-app) .kc-flow-node { box-shadow: 0 1px 2px rgb(0 0 0 / 0.4) }
/* Grey controls inside a white block are grey, not near-white. */
.fp-app .kl-page .kc-card [class*="bg-foreground/[0.0"]:not([aria-current]) { background-color: var(--fp-ou-bg) !important }
html.fp-dark .fp-app .kl-page .kc-card [class*="bg-foreground/[0.0"]:not([aria-current]) { background-color: #232327 !important }

/* ── Showcase pass (keks, 2026-11-07 18:34: «как в лучших design interface pinterest»). Same light One UI, more
 * hierarchy and colour: bigger page titles, one blue accent through the charts, a solid blue balance card, light
 * locked awards so the earned ones stand out, a soft lift on everything clickable. ─────────────────────────────── */
html:has(.fp-app) {
  --fp-accent: #3e7bfa; --fp-accent-soft: #e8efff;
  --fp-lift: 0 1px 2px rgb(16 24 40 / 0.04), 0 12px 28px -16px rgb(16 24 40 / 0.18);
  --viz-1: #3e7bfa; --viz-2: #8b5cf6; --viz-3: #22b07d; --viz-4: #f0a92e; --viz-5: #f26b4f; --viz-6: #6fb0ee; --viz-7: #b4b4bd;
  --viz-other: #b4b4bd; --viz-accent: #3e7bfa; --viz-accent-soft: #e8efff;
}
html.fp-dark:has(.fp-app) { --fp-accent-soft: #1d2640; --fp-lift: 0 1px 2px rgb(0 0 0 / 0.5), 0 12px 28px -16px rgb(0 0 0 / 0.8); --viz-accent-soft: #1d2640 }

/* Page titles: one strong size, the icon in the top bar quiet. */
.fp-app .fp-main:not([data-page="code"]) .kc-topbar h1 { font-size: 22px; font-weight: 650; letter-spacing: -0.025em }
.fp-app .fp-main:not([data-page="code"]) .kc-topbar h1 ~ *, .fp-app .fp-main:not([data-page="code"]) .kc-topbar > span.grid { opacity: 1 }

/* Home: centred a little above the middle, a larger title, bigger picture tiles that lift. */
.fp-ou-head .fp-ou-title { font-size: 38px; font-weight: 650; letter-spacing: -0.035em; line-height: 1.08 }
.fp-ou-head .fp-ou-sub { font-size: 15.5px; margin-top: 6px }
.fp-ou-head .fp-ou-orb { width: 64px; height: 64px; background: var(--fp-ou-card); box-shadow: var(--fp-lift) }
@media (max-width: 640px) { .fp-ou-head .fp-ou-title { font-size: 28px } .fp-ou-head .fp-ou-orb { width: 52px; height: 52px } }
.fp-ou-tiles { gap: 14px; margin-top: 18px }
.fp-ou-tile { padding: 8px 8px 14px; border-radius: 26px; background: var(--fp-ou-card); box-shadow: inset 0 0 0 1px var(--fp-ou-line); transition: transform 220ms var(--fp-ease), box-shadow 220ms var(--fp-ease)}
.fp-ou-tile:hover { transform: translateY(-3px); background: var(--fp-ou-card); box-shadow: inset 0 0 0 1px transparent, var(--fp-lift) }
.fp-ou-pic { height: 128px; border-radius: 19px }
.fp-ou-pic .fp-card-art { transition: transform 220ms var(--fp-ease)}
.fp-ou-tile:hover .fp-card-art { transform: translate(-4px, -4px) scale(1.04) }
.fp-ou-tile-t { font-size: 15px; margin-top: 12px }
@media (max-width: 640px) { .fp-ou-pic { height: 92px } }
.fp-composer .nc-prism { transition: box-shadow var(--fp-t-hover) var(--fp-ease), border-color var(--fp-t-hover) var(--fp-ease)}
.fp-hero .fp-composer .nc-prism:focus-within { border-color: #cfd8ee !important; box-shadow: 0 0 0 4px var(--fp-accent-soft) !important }

/* Blocks: a hairline-soft lift, so white on grey reads as layers. Clickable rows highlight in the accent tint. */
.fp-app .fp-main:not([data-page="code"]) :is(.kc-card, .kc-box, .fp-ext-list) { box-shadow: 0 1px 2px rgb(16 24 40 / 0.035) !important }
html.fp-dark .fp-app .fp-main:not([data-page="code"]) :is(.kc-card, .kc-box, .fp-ext-list) { box-shadow: none !important }
.fp-app .fp-side-item.is-on .fp-side-ic { color: var(--fp-accent) }
.fp-app .kl-page a:not([class*="bg-"]):not(.fp-empty-btn):hover { color: var(--fp-accent) }

/* Dashboard: the balance is the hero, a solid blue card with white type; charts in one accent. */
.fp-app .fp-main[data-page="overview"] .kc-viz-hero { background: var(--fp-accent) !important; color: #fff }
.fp-app .fp-main[data-page="overview"] .kc-viz-hero :is(span, div) { color: #fff }
.fp-app .fp-main[data-page="overview"] .kc-viz-hero .text-muted-foreground { color: rgb(255 255 255 / 0.72) !important }
.fp-app .fp-main[data-page="overview"] .kc-viz-hero .text-\[40px\] { font-size: 56px; font-weight: 650; letter-spacing: -0.045em }
.fp-app .fp-main[data-page="overview"] .kc-viz-hero .kc-spark { background: rgb(255 255 255 / 0.45) }
.fp-app .fp-main[data-page="overview"] .kc-viz-hero .kc-spark[data-empty] { background: rgb(255 255 255 / 0.22) }
.fp-app .fp-main[data-page="overview"] .kc-viz-hero .kc-spark-hot { background: #fff }
.fp-app .fp-main[data-page="overview"] .kc-viz-hero a.bg-foreground, .fp-app .fp-main[data-page="overview"] .kc-viz-hero .bg-foreground.text-background { background-color: #fff !important; color: var(--fp-accent) !important }
.fp-app .fp-main[data-page="overview"] .kc-viz-hero a.bg-foreground *, .fp-app .fp-main[data-page="overview"] .kc-viz-hero button * { color: inherit }
.fp-app .fp-main[data-page="overview"] .kc-viz-hero button[class*="bg-foreground/"] { background-color: rgb(255 255 255 / 0.18) !important; color: #fff }
.fp-app .kc-heat[data-l="4"] { box-shadow: none }
.fp-app .kc-heat[data-l="0"] { background-image: none; background-color: var(--fp-ou-bg) }
html.fp-dark .fp-app .kc-heat[data-l="0"] { background-color: #222226 }

/* Awards: locked cards are light, so the earned black ones read as the prize. */
.fp-app .kl-page .aw-card.aw-locked { background: var(--fp-ou-card); border-color: transparent; color: var(--fp-ou-text) }
.fp-app .kl-page .aw-card.aw-locked:hover { border-color: transparent; box-shadow: var(--fp-lift) }
.fp-app .kl-page .aw-card.aw-locked > span:first-child { background: #ececf1; border-color: #e2e2e8 }
.fp-app .kl-page .aw-card.aw-locked .text-white { color: var(--fp-ou-text) }
.fp-app .kl-page .aw-card.aw-locked :is(.text-\[\#8a8a8a\], .text-\[\#7a7a7a\]) { color: var(--fp-ou-sub) }
.fp-app .kl-page .aw-card.aw-locked .aw-shape :is(path, circle, rect, polygon, ellipse) { fill: #ececf1 !important }
.fp-app .kl-page .aw-card.aw-locked .bg-\[\#1d1d1d\] { background: #ececf1 }
.fp-app .kl-page .aw-card.aw-locked .bg-\[\#999\] { background: var(--fp-accent) }
.fp-app .kl-page .aw-card:not(.aw-locked):hover { box-shadow: 0 18px 36px -18px rgb(0 0 0 / 0.55) }
html.fp-dark .fp-app .kl-page .aw-card.aw-locked { background: #17171a; color: #f2f2f4 }
html.fp-dark .fp-app .kl-page .aw-card.aw-locked > span:first-child { background: #232327; border-color: #2a2a2f }
html.fp-dark .fp-app .kl-page .aw-card.aw-locked .aw-shape :is(path, circle, rect, polygon, ellipse) { fill: #26262b !important }
html.fp-dark .fp-app .kl-page .aw-card.aw-locked .bg-\[\#1d1d1d\] { background: #2a2a2f }
.fp-app .aw-page .h-\[2px\] > .bg-foreground { background: var(--fp-accent) }
.fp-app .aw-page .text-3xl { font-size: 40px; font-weight: 650; letter-spacing: -0.035em }

/* Routing: role nodes lift on hover. */
.fp-app .kc-flow-node { transition: box-shadow 220ms var(--fp-ease), transform 220ms var(--fp-ease)}
.fp-app .kc-flow-node:hover { box-shadow: var(--fp-lift) }

/* Chat: the user's message in a soft accent tint, the composer focus in the accent. */
.fp-app .fp-thread .kc-user-bubble { background: var(--fp-accent-soft) !important; color: var(--fp-ou-text) }
.fp-app .fp-composer .nc-prism:focus-within { border-color: #cfd8ee !important }
html.fp-dark .fp-app .fp-thread .kc-user-bubble { background: #1d2640 !important; color: #f2f2f4 }
html.fp-dark .fp-app .fp-composer .nc-prism:focus-within { border-color: #2f3b5c !important }
/* One ink for solid controls (an old Notion-brown #37352f layer still painted them). */
.fp-app .bg-foreground.text-background, body:has(.fp-app) [role="dialog"] .bg-foreground.text-background { background-color: var(--fp-ou-text) }

/* ── Second showcase pass (keks, 2026-11-07 18:44: «супер продолжай улучшать»): History, Connection, Extensions. */
/* Code blocks: a light panel with dark monospace (the text was dark on the dark code background). */
.fp-app .kl-page .bg-code-bg {
  background: var(--fp-ou-bg) !important; color: var(--fp-ou-text) !important; border-color: transparent !important;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 13px !important; line-height: 1.7;
}
.fp-app .kl-page .bg-code-bg > button { background: var(--fp-ou-card) !important; border-color: var(--fp-ou-line) !important; color: var(--fp-ou-text) !important; font-size: 12.5px !important }
html.fp-dark .fp-app .kl-page .bg-code-bg { background: #0e0e10 !important; color: #e6e6ea !important }

/* Wizard «next» button: the cabinet's black pill, no pixel tile. */
.fp-app .px-btn { height: 44px !important; padding: 0 22px !important; border-radius: 999px !important; border: 0 !important; background: var(--fp-ou-text) !important; color: var(--fp-ou-card) !important; box-shadow: none !important; gap: 0 !important; transition: opacity var(--fp-t-hover) var(--fp-ease), transform 220ms var(--fp-ease)}
.fp-app .px-btn:hover { opacity: 0.88 }
.fp-app .px-btn .px-tile { display: none !important }
.fp-app .px-btn .px-label { color: inherit !important; font-size: 14.5px; font-weight: 600; padding: 0 !important }
.fp-app .px-btn.secondary { background: var(--fp-ou-bg) !important; color: var(--fp-ou-text) !important }

/* Connection: the tool list as soft tiles that lift, the step bar with the accent. */
.fp-app .fp-main[data-page="connect"] .kl-page button.rounded-2xl.border, .fp-app .fp-main[data-page="connect"] .kl-page a.rounded-2xl.border { border-color: transparent !important; background: var(--fp-ou-bg) !important; box-shadow: none !important; transition: background-color var(--fp-t-hover) var(--fp-ease), box-shadow 220ms var(--fp-ease), transform 220ms var(--fp-ease)}
.fp-app .fp-main[data-page="connect"] .kl-page button.rounded-2xl.border:hover { background: var(--fp-ou-card) !important; box-shadow: var(--fp-lift) !important; transform: translateY(-1px) }

/* Extensions: a lone row fills the block; «Connect» is a small pill. */
.fp-ext-list > .fp-ext-row:only-child { grid-column: 1 / -1 }
.fp-ext-row > span.shrink-0.font-medium { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--fp-ou-bg); color: var(--fp-ou-text) !important; font-size: 13px !important; transition: background-color var(--fp-t-hover) var(--fp-ease), color var(--fp-t-hover) var(--fp-ease)}
.fp-ext-row:hover > span.shrink-0.font-medium { background: var(--fp-accent); color: #fff !important }

/* History: controls at the body size, numbers aligned, the model as a quiet tag. */
.fp-app .kl-page select { font-size: 14.5px !important; height: 36px; border-radius: 12px }
.fp-app .fp-main[data-page="history"] .kl-page th { font-size: 12.5px !important; font-weight: 500; color: var(--fp-ou-sub); border-bottom-color: var(--fp-ou-line) }
.fp-app .fp-main[data-page="history"] .kl-page td { border-bottom-color: var(--fp-ou-line); font-variant-numeric: tabular-nums }
.fp-app .fp-main[data-page="history"] .kl-page td:nth-child(2) > * , .fp-app .fp-main[data-page="history"] .kl-page td:nth-child(2):not(:has(*)) { letter-spacing: 0 }
.fp-app .fp-main[data-page="history"] .kl-page tbody tr td:first-child { color: var(--fp-ou-sub) }
.fp-app .fp-main[data-page="history"] .kl-page tbody tr td:nth-last-child(2) { font-weight: 600 }

/* ── Third pass (keks, 2026-11-07 18:56: «давай делай дальше»): MagicStudio's first visit, the phone. ─────────── */
/* MagicStudio, nothing made yet: a welcome card with three overlapping colour frames and three ideas to start from. */
.ms .cv-empty-card.fp-ms-welcome { top: 42%; width: min(460px, calc(100% - 32px)); padding: 28px 24px 22px; gap: 8px; border-radius: 28px; background: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 24px 48px -28px rgb(16 24 40 / 0.25); color: #7d7d85; font-size: 14px }
.fp-ms-welcome > b { margin-top: 10px !important; color: #19191b !important; font-size: 20px !important; font-weight: 650 !important; letter-spacing: -0.02em }
.fp-ms-art { position: relative; display: block; width: 168px; height: 92px }
.fp-ms-art i { position: absolute; top: 10px; width: 76px; height: 76px; border-radius: 20px; box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.35), inset 0 0 0 3px #fff }
.fp-ms-art i[data-t="1"] { left: 0; background: #6fb0ee; transform: rotate(-8deg) }
.fp-ms-art i[data-t="2"] { left: 46px; top: 0; z-index: 1; background: #7c6cf2 }
.fp-ms-art i[data-t="3"] { left: 92px; background: #f4a07e; transform: rotate(8deg) }
.fp-ms-art i[data-t="2"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 14px; height: 22px; border-radius: 10px 10px 6px 6px; background: rgb(255 255 255 / 0.85); clip-path: polygon(0 100%, 30% 20%, 52% 70%, 72% 35%, 100% 100%) }
.fp-ms-art i[data-t="2"]::before { content: ""; position: absolute; right: 16px; top: 14px; width: 14px; height: 14px; border-radius: 50%; background: #fff }
.fp-ms-ideas { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 10px }
.fp-ms-ideas button { width: 100%; padding: 11px 14px; border-radius: 14px; background: #f4f4f6; color: #19191b; font-size: 14px; text-align: left; transition: background-color var(--fp-t-hover) var(--fp-ease), color var(--fp-t-hover) var(--fp-ease)}
.fp-ms-ideas button:hover { background: #e8efff; color: #2f5fd0 }
html.fp-dark .ms .cv-empty-card.fp-ms-welcome { background: #17171a; box-shadow: none }
html.fp-dark .fp-ms-welcome > b { color: #f2f2f4 !important }
html.fp-dark .fp-ms-ideas button { background: #232327; color: #f2f2f4 }
html.fp-dark .fp-ms-art i { box-shadow: inset 0 0 0 3px #17171a }

/* Phone: the home fits one screen; the three ideas are a compact row of picture tiles instead of a cut-off strip. */
@media (max-width: 640px) {
  .fp-ou-head .fp-ou-title { font-size: 26px; letter-spacing: -0.03em }
  .fp-ou-head .fp-ou-sub { font-size: 14px }
  .fp-ou-head .fp-ou-orb { width: 48px; height: 48px }
  .fp-ou-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; overflow: visible }
  .fp-ou-tile { flex: none; padding: 5px 5px 10px; border-radius: 20px }
  .fp-ou-pic { height: 74px; border-radius: 15px }
  .fp-ou-tile-t { margin: 8px 4px 0; font-size: 13px; line-height: 1.25 }
  .fp-ou-tile-d { display: none }
  .fp-app .fp-main[data-page="overview"] .kc-viz-hero .text-\[40px\] { font-size: 44px }
  .fp-app .kl-page .aw-card { padding: 12px !important; border-radius: 18px }
  .fp-app .kc-topbar h1 { font-size: 19px !important }
}

/* keks, 2026-11-07 19:01: «убрать иконку» — the balance pill in the top bar is text only, no coin. */
.fp-app .fp-chip-dot { display: none !important }
.fp-app .fp-chip:not(.fp-chip-solid) { padding: 0 14px !important; gap: 0 !important }
/* keks, 2026-11-07 19:03: a folded menu lists no chats as cut-off text. */

/* The agent's avatar is the brand mark (keks, 2026-11-07 19:08): it bobs while thinking, nods while speaking. */
.fp-bot { position: relative; display: inline-block; flex: none; vertical-align: middle }
.fp-bot > img { display: block; width: 100%; height: 100%; user-select: none; pointer-events: none; transform-origin: 50% 70% }
.fp-bot:is([data-state="thinking"], [data-state="waiting"], [data-state="attentive"], [data-state="listening"]) > img { animation: fp-bot-think 1.4s ease-in-out infinite }
.fp-bot[data-state="speaking"] > img { animation: fp-bot-talk 0.7s ease-in-out infinite }
.fp-bot[data-state="happy"] > img { animation: fp-bot-hop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 1 }
.fp-bot[data-state="error"] > img { filter: grayscale(1); opacity: 0.7 }
@keyframes fp-bot-think { 0%, 100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-8%) rotate(-6deg) } }
@keyframes fp-bot-talk { 0%, 100% { transform: rotate(0) scale(1) } 50% { transform: rotate(4deg) scale(1.05) } }
@keyframes fp-bot-hop { 0% { transform: scale(0.85) } 60% { transform: scale(1.1) } 100% { transform: scale(1) } }
@media (prefers-reduced-motion: reduce) { .fp-bot > img { animation: none !important } }
.fp-ou-orb .fp-bot { width: 70% !important; height: 70% !important }

/* keks, 2026-11-07 19:18: «обводки нейрослопные убери, нормальное размытие должно быть». The composer has no
 * lavender ring or tinted border; it sits on a soft diffuse shadow with a backdrop blur. The tiles lose their outline. */
.fp-composer .nc-prism, .dark .fp-composer .nc-prism {
  border-color: transparent !important;
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 10px 40px -12px rgb(16 24 40 / 0.16) !important;
  background: rgb(255 255 255 / 0.82) !important; -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
}
.fp-composer .nc-prism:focus-within, .fp-app .fp-composer .nc-prism:focus-within, .fp-hero .fp-composer .nc-prism:focus-within {
  border-color: transparent !important;
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 16px 48px -14px rgb(16 24 40 / 0.22) !important;
}
.fp-composer .kl-glow:focus-within { box-shadow: none !important }
.fp-ou-tile { box-shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 8px 24px -16px rgb(16 24 40 / 0.14) }
.fp-ou-tile:hover { box-shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 18px 36px -16px rgb(16 24 40 / 0.22) }
html.fp-dark .fp-composer .nc-prism, html.fp-dark .dark .fp-composer .nc-prism { background: rgb(23 23 26 / 0.82) !important; box-shadow: 0 16px 48px -16px rgb(0 0 0 / 0.8) !important }
html.fp-dark .fp-ou-tile { box-shadow: none }


/* Empty-chat header (keks, 2026-11-07 19:23, variant 1 of 5): the brand mark without a tile, centred above the title. */
.fp-ou-head.fp-ou-head-c { gap: 14px }
.fp-ou-head.fp-ou-head-c .fp-ou-orb, html.fp-dark .fp-ou-head.fp-ou-head-c .fp-ou-orb { width: 56px; height: 56px; background: none; box-shadow: none }
.fp-ou-head.fp-ou-head-c .fp-ou-orb .fp-bot { width: 100% !important; height: 100% !important }
@media (max-width: 640px) { .fp-ou-head.fp-ou-head-c .fp-ou-orb { width: 48px; height: 48px } }

/* Anti-slop pass (2026-11-07). Connection's address plate: Jellee's four red pixels mean nothing here, and three ink
 * «Копировать» pills in one row outshouted the addresses they copy. The pill is quiet grey until the tile is
 * hovered or focused; «Скопировано» turns green, so the result is visible. */
.fp-app .kc-px { display: none }
.fp-app .kc-copy-pill { background: #f0f0f3 !important; color: #4a4a50 !important; box-shadow: none !important }
.fp-app .kc-tile:hover .kc-copy-pill, .fp-app .kc-tile:focus-visible .kc-copy-pill { background: #3e7bfa !important; color: #fff !important }
.fp-app .kc-copy-pill.is-done { background: #22b07d !important; color: #fff !important }
html.fp-dark .fp-app .kc-copy-pill:not(.is-done) { background: rgb(255 255 255 / 0.08) !important; color: #d4d4d8 !important }

/* ── Бабл, the Jellee AI mascot (keks, 2026-11-08; code/src/console/BubbleBot.tsx). It sways and lights its beacon
 * while thinking, nods while answering, hops when happy, shakes once on an error and blinks when idle. */
.fp-bubble { position: relative; display: inline-block; flex: none; vertical-align: middle }
.fp-bubble svg { display: block; width: 100%; height: 100%; overflow: visible }
.fp-ou-orb .fp-bubble { width: 100% !important; height: 100% !important }
.fp-bubble .fpb-body { transform-box: view-box; transform-origin: 100px 170px }
.fp-bubble .fpb-eyes { transform-box: fill-box; transform-origin: center }
.fp-bubble .fpb-mouth { transform-box: fill-box; transform-origin: center; animation: fpb-talk .28s ease-in-out infinite alternate }
.fp-bubble .fpb-glow { filter: drop-shadow(0 0 calc(var(--s) * 0.03) rgb(124 196 255 / .85)) }
.fp-bubble[data-mood="think"] .fpb-beacon { filter: drop-shadow(0 0 calc(var(--s) * 0.05) #8fe3ff) }
.fp-bubble[data-mood="idle"] .fpb-body { animation: fpb-bob 3.2s ease-in-out infinite }
.fp-bubble[data-mood="idle"] .fpb-eyes { animation: fpb-blink 4.8s infinite }
.fp-bubble[data-mood="think"] .fpb-body { animation: fpb-sway 1.6s ease-in-out infinite }
.fp-bubble[data-mood="talk"] .fpb-body { animation: fpb-nod .7s ease-in-out infinite }
.fp-bubble[data-mood="happy"] .fpb-body { animation: fpb-hop .9s cubic-bezier(.3,1.6,.5,1) 2 }
.fp-bubble[data-mood="error"] .fpb-body { animation: fpb-shake .5s ease-in-out 2 }
.fp-bubble .fpb-dot { animation: fpb-dot 1.2s infinite }
@keyframes fpb-bob { 50% { transform: translateY(-3%) } }
@keyframes fpb-blink { 0%, 93%, 100% { transform: scaleY(1) } 96% { transform: scaleY(.1) } }
@keyframes fpb-sway { 0%, 100% { transform: rotate(-4deg) } 50% { transform: rotate(4deg) } }
@keyframes fpb-nod { 50% { transform: translateY(-2%) rotate(1.5deg) } }
@keyframes fpb-talk { from { transform: scaleY(.35) } to { transform: scaleY(1.15) } }
@keyframes fpb-hop { 0%, 100% { transform: translateY(0) scale(1) } 30% { transform: translateY(-9%) scale(1.03, .97) } 60% { transform: translateY(0) scale(1.06, .94) } }
@keyframes fpb-shake { 20%, 60% { transform: translateX(-3%) } 40%, 80% { transform: translateX(3%) } }
@keyframes fpb-dot { 0%, 60%, 100% { opacity: .25 } 30% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .fp-bubble * { animation: none !important } }
/* The home hero shows Бабл larger than the old mark. */
.fp-ou-head.fp-ou-head-c .fp-ou-orb, html.fp-dark .fp-ou-head.fp-ou-head-c .fp-ou-orb { width: 84px; height: 84px }
@media (max-width: 640px) { .fp-ou-head.fp-ou-head-c .fp-ou-orb { width: 64px; height: 64px } }

/* ── MagicStudio fixes (keks, 2026-11-08: «криво, не видно табы»). ─────────────────────────────────────────────── */
/* The welcome card sits in the free band between the zoom bar and the «Новая картинка» panel, never under it.
   On short windows the picture goes first, then the subtitle, so the three ideas always stay whole. */
.ms .cv-empty-card.fp-ms-welcome { top: 76px; bottom: 236px; height: fit-content; max-height: calc(100% - 312px); margin: auto 0; overflow: auto; transform: translateX(-50%) }
@media (max-height: 820px) { .ms .cv-empty-card.fp-ms-welcome { padding-top: 22px; gap: 6px } .fp-ms-art { display: none !important } .fp-ms-welcome > b { margin-top: 0 !important } }
@media (max-height: 640px) { .fp-ms-welcome > span:not(.fp-ms-art):not(.fp-ms-ideas) { display: none } .fp-ms-ideas button { padding: 8px 12px } }
/* The Layers / Plugins tabs: full-size, readable, with the active one clearly marked. */
.fp-app .ms .ms-side-head .ms-tabs { flex: 1 1 auto !important; margin: 0 10px 8px; padding: 3px; border-radius: 12px; background: #ececef }
.fp-app .ms .ms-tabs button { height: 32px; border-radius: 9px; color: #55555c; font-size: 14px; font-weight: 500 }
.fp-app .ms .ms-tabs button:hover:not(.on) { color: #19191b }
.fp-app .ms .ms-tabs button.on { background: #fff; color: #19191b; font-weight: 600; box-shadow: 0 1px 3px rgb(16 24 40 / 0.12) }
html.fp-dark .fp-app .ms .ms-tabs { background: #26262a }
html.fp-dark .fp-app .ms .ms-tabs button { color: #a1a1aa }
html.fp-dark .fp-app .ms .ms-tabs button.on { background: #3a3a40; color: #f2f2f4 }
/* ═══ ChatGPT layout (keks, 2026-11-08: «сделай как у чат гпт», Бабл stays the mascot). A light grey menu on the
 * left with plain rows (new chat, search, sections, tools, chats) and the account at the bottom; a white page; the
 * home is a title over a pill composer with suggestion chips; the user's message is a grey bubble, the answer has no
 * bubble. ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */
html:has(.fp-app) { --fp-gpt-side: #f9f9f9; --fp-gpt-hover: #ececec; --fp-gpt-on: #e3e3e3; --fp-gpt-ink: #0d0d0d; --fp-gpt-sub: #8f8f8f; --fp-gpt-line: #e5e5e5; --fp-gpt-bubble: #f4f4f4 }
html.fp-dark:has(.fp-app) { --fp-gpt-side: #171717; --fp-gpt-hover: #212121; --fp-gpt-on: #2a2a2a; --fp-gpt-ink: #ececec; --fp-gpt-sub: #8f8f8f; --fp-gpt-line: #2f2f2f; --fp-gpt-bubble: #2f2f2f }
.fp-app .fp-side { background: var(--fp-gpt-side) !important; border: 0 !important; border-radius: 0 !important }
.fp-app .fp-side:not(.is-folded) { width: 260px !important }
.fp-side-head { height: 56px; padding: 0 8px 0 14px; gap: 8px }
.fp-side-head a { gap: 8px !important }
.fp-side-btn { width: 36px; height: 36px; border-radius: 8px; color: #5d5d5d }
.fp-side-btn:hover { background: var(--fp-gpt-hover); color: var(--fp-gpt-ink) }
.fp-side-btn svg { width: 20px; height: 20px }
.fp-app .fp-side-item { height: 36px; gap: 10px; padding: 0 10px; border-radius: 10px; font-size: 14px; font-weight: 400; color: var(--fp-gpt-ink); box-shadow: none !important }
.fp-app .fp-side-item:hover { background: var(--fp-gpt-hover) }
.fp-app .fp-side-item.is-on { background: var(--fp-gpt-on); color: var(--fp-gpt-ink); font-weight: 400 }
.fp-app .fp-side-ic, .fp-app .fp-side-item.is-on .fp-side-ic { width: 20px; color: var(--fp-gpt-ink) }
.fp-app .fp-side-ic svg { width: 18px; height: 18px }
/* Tools: plain monochrome icons like every other row (no colour discs). */
.fp-app .fp-side-item .fp-side-tile { width: 20px; height: 20px; background: none !important; box-shadow: none !important; color: var(--fp-gpt-ink); border-radius: 0 }
.fp-app .fp-side-item .fp-side-tile svg { width: 18px; height: 18px }
.fp-app .fp-side-kbd { font-size: 12px; color: var(--fp-gpt-sub); opacity: 0; transition: opacity var(--fp-t-hover) var(--fp-ease)}
.fp-app .fp-side-item:hover .fp-side-kbd { opacity: 1 }
.fp-app .fp-side-sec { margin: 18px 0 4px; padding: 0 10px; font-size: 13px; color: var(--fp-gpt-sub) }
.fp-app .fp-side-chats { margin: 0; font-size: 14px; color: var(--fp-gpt-ink) }
.fp-app .fp-side-chats .group.h-9 { height: 36px; border-radius: 10px }
.fp-app .fp-side-chats .group.h-9:hover { background: var(--fp-gpt-hover) }
.fp-app .fp-side-chats .group.h-9.ring-1 { background: var(--fp-gpt-on); box-shadow: none }
.fp-app .fp-side-foot { padding: 8px; border-top: 0 }
.fp-app .fp-side-foot > button, .fp-app .fp-side-foot button[aria-label] { border-radius: 10px }
.fp-app .fp-side-foot button:hover { background: var(--fp-gpt-hover) }
.fp-side.is-folded .fp-side-kbd { display: none }

/* The page: white, no bar line; the top bar keeps the crumbs, tokens and top-up. */
.fp-app .kc-main, .fp-app .fp-main { background: var(--background) !important }
html:has(.fp-app) { --background: #fff }
html.fp-dark:has(.fp-app) { --background: #212121 }
.fp-app .fp-main[data-page="code"] .kc-topbar { border-bottom: 0 !important; background: transparent !important }
.fp-crumbs { font-size: 17px; color: var(--fp-gpt-ink) }
.fp-crumbs > svg { display: none }

/* Home: Бабл and the title in the middle, the pill composer under it, suggestions as chips. */
.fp-ou-pre { flex: 1 !important }
.fp-ou-head.fp-ou-head-c { gap: 10px }
.fp-ou-head.fp-ou-head-c .fp-ou-orb, html.fp-dark .fp-ou-head.fp-ou-head-c .fp-ou-orb { width: 64px; height: 64px }
.fp-ou-head .fp-ou-title { font-size: 28px; font-weight: 500; letter-spacing: -0.01em; color: var(--fp-gpt-ink) }
.fp-ou-tiles { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px !important; margin-top: 16px !important; padding: 0 !important; overflow: visible !important }
.fp-ou-tile, .fp-ou-tile:hover { flex: none !important; flex-direction: row !important; align-items: center; gap: 8px; width: auto !important; height: 40px; padding: 0 16px 0 12px !important; border-radius: 999px !important; background: var(--background) !important; box-shadow: inset 0 0 0 1px var(--fp-gpt-line) !important; transform: none !important }
.fp-ou-tile:hover { background: var(--fp-gpt-bubble) !important }
.fp-ou-tile .fp-ou-pic { width: 22px !important; height: 22px !important; border-radius: 6px !important; flex: none; overflow: hidden; margin: 0 }
.fp-ou-tile .fp-ou-pic .fp-card-art { width: 100%; height: 100%; transform: scale(1.6) !important }
.fp-ou-tile-t { margin: 0 !important; font-size: 14px !important; font-weight: 400 !important; color: var(--fp-gpt-ink) }
.fp-ou-tile-d { display: none !important }
@media (max-width: 640px) { .fp-ou-tiles { display: flex !important } .fp-ou-tile { height: 36px; padding: 0 12px 0 8px !important } .fp-ou-tile-t { font-size: 13px !important } }

/* Composer: a white pill with a hairline and a soft shadow; the send button is a black circle. */
.fp-composer .nc-prism, .dark .fp-composer .nc-prism, .fp-app .fp-composer .nc-prism {
  background: var(--background) !important; border: 1px solid var(--fp-gpt-line) !important; border-radius: 28px !important;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.05) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.fp-composer .nc-prism:focus-within, .fp-app .fp-composer .nc-prism:focus-within, .fp-hero .fp-composer .nc-prism:focus-within { border-color: #d0d0d0 !important; box-shadow: 0 4px 16px rgb(0 0 0 / 0.07) !important }
.fp-composer textarea { font-size: 16px !important; color: var(--fp-gpt-ink) }
.fp-composer textarea::placeholder { color: #8f8f8f; font-style: normal }
.fp-composer .kl-send { width: 36px !important; height: 36px !important; background: var(--fp-gpt-ink) !important; color: var(--background) !important }
.fp-composer .kl-send:disabled { background: #d7d7d7 !important; color: #fff !important }

/* Chat: grey bubble for the user, the answer on the page itself. */
.fp-app .fp-thread .kc-user-bubble, html.fp-dark .fp-app .fp-thread .kc-user-bubble { background: var(--fp-gpt-bubble) !important; color: var(--fp-gpt-ink); border-radius: 22px !important; box-shadow: none !important }
.fp-app .fp-thread { max-width: 768px !important }
.fp-app .fp-thread .kc-ai-msg { font-size: 16px; line-height: 1.7 }

/* ═══ macOS layout (keks, 2026-11-08: «как на макбуке — левое меню блоком, по центру контент, сверху ликвид гласс
 * иконки, стиль Apple»). Builds on the ChatGPT layout: the menu becomes a floating glass panel inset from the window
 * edge, as in Finder; the top bar's controls are separate glass capsules; the type is Apple's system font. ═══════════ */
html:has(.fp-app) { --fp-mac-blue: #007aff; --fp-mac-side: rgb(240 240 243 / 0.78); --fp-mac-edge: rgb(0 0 0 / 0.08); --fp-mac-glass: rgb(255 255 255 / 0.66); --fp-mac-sub: #8e8e93; --fp-mac-sel: rgb(0 0 0 / 0.06) }
html.fp-dark:has(.fp-app) { --fp-mac-blue: #0a84ff; --fp-mac-side: rgb(44 44 48 / 0.72); --fp-mac-edge: rgb(255 255 255 / 0.09); --fp-mac-glass: rgb(58 58 62 / 0.6); --fp-mac-sub: #98989f; --fp-mac-sel: rgb(255 255 255 / 0.08) }
.fp-app, .fp-app button, .fp-app input, .fp-app textarea { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", Inter, system-ui, sans-serif }

/* The menu: a rounded glass panel floating 8px inside the window. */
.fp-app.fp-app { background: var(--background) !important }
.fp-app .fp-side { margin: 8px 0 8px 8px !important; height: calc(100% - 16px) !important; align-self: stretch; border-radius: 20px !important;
  background: var(--fp-mac-side) !important; -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border: 0.5px solid var(--fp-mac-edge) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 10px 30px -12px rgb(0 0 0 / 0.18) !important; overflow: hidden }
html.fp-dark .fp-app .fp-side { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 10px 30px -12px rgb(0 0 0 / 0.6) !important }
.fp-app .fp-side:not(.is-folded) { width: 248px !important }
.fp-app .fp-side-item { height: 34px; border-radius: 9px; font-size: 14px; color: var(--fp-gpt-ink) }
.fp-app .fp-side-item:hover { background: var(--fp-mac-sel) }
.fp-app .fp-side-item.is-on { background: var(--fp-mac-sel); color: var(--fp-mac-blue); font-weight: 500 }
.fp-app .fp-side-item.is-on .fp-side-ic, .fp-app .fp-side-item.is-on .fp-side-tile { color: var(--fp-mac-blue) }
.fp-app .fp-side-ic svg, .fp-app .fp-side-item .fp-side-tile svg { width: 19px; height: 19px }
.fp-app .fp-side-sec { margin: 16px 0 4px; font-size: 12px; font-weight: 600; color: var(--fp-mac-sub) }
.fp-app .fp-side-chats .group.h-9 { height: 32px; border-radius: 9px }
.fp-app .fp-side-chats .group.h-9:hover, .fp-app .fp-side-chats .group.h-9.ring-1 { background: var(--fp-mac-sel) }
.fp-side-btn:hover { background: var(--fp-mac-sel) }

/* The top bar: a big bold title on the left; every control a glass capsule. */
.fp-app .kc-topbar { height: 64px !important; padding: 0 16px 0 20px !important; background: transparent !important; border: 0 !important }
.fp-app .kc-topbar h1, .fp-crumbs { font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: var(--fp-gpt-ink) }
.fp-app .kc-topbar h1 ~ *:not(.ml-auto) { color: var(--fp-gpt-ink) }
.fp-app .kc-topbar > span.grid { display: none }
.fp-app .kc-topbar .ml-auto { gap: 10px !important }
.fp-app .kc-topbar .ml-auto button, .fp-app .kc-topbar .ml-auto a, html .fp-app .kc-topbar .fp-chip:not(.fp-chip-solid), html.fp-dark .fp-app .kc-topbar .fp-chip:not(.fp-chip-solid), html .fp-app .kc-topbar .fp-chip {
  height: 40px !important; min-width: 40px; padding: 0 14px !important; border-radius: 999px !important; border: 0.5px solid var(--fp-mac-edge) !important;
  background: var(--fp-mac-glass) !important; color: var(--fp-gpt-ink) !important; font-size: 14px !important; font-weight: 500 !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.85), inset 0 -1px 0 rgb(0 0 0 / 0.03), 0 1px 2px rgb(0 0 0 / 0.05), 0 6px 16px -8px rgb(0 0 0 / 0.16) !important;
  transition: transform 220ms var(--fp-ease), background-color var(--fp-t-hover) var(--fp-ease)}
html.fp-dark .fp-app .kc-topbar .ml-auto button, html.fp-dark .fp-app .kc-topbar .ml-auto a, html.fp-dark .fp-app .kc-topbar .fp-chip { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 6px 16px -8px rgb(0 0 0 / 0.6) !important }
.fp-app .kc-topbar .ml-auto button:hover, .fp-app .kc-topbar .ml-auto a:hover { background: rgb(255 255 255 / 0.9) !important; transform: translateY(-0.5px) }
html.fp-dark .fp-app .kc-topbar .ml-auto button:hover, html.fp-dark .fp-app .kc-topbar .ml-auto a:hover { background: rgb(80 80 86 / 0.75) !important }
.fp-app .kc-topbar .ml-auto button:active, .fp-app .kc-topbar .ml-auto a:active { transform: scale(0.96) }
.fp-app .kc-topbar .ml-auto button:has(> svg:only-child), .fp-app .kc-topbar .ml-auto a:has(> svg:only-child) { width: 40px; padding: 0 !important }
.fp-app .kc-topbar .ml-auto svg { width: 19px; height: 19px }
/* Top-up keeps one accent: an Apple-blue capsule. */
.fp-app .kc-topbar .fp-chip.fp-chip-solid svg { width: 20px !important; height: 20px !important; stroke: currentColor; stroke-width: 10 }
html .fp-app .kc-topbar .fp-chip.fp-chip-solid, html.fp-dark .fp-app .kc-topbar .fp-chip.fp-chip-solid { background: var(--fp-mac-blue) !important; color: #fff !important; border-color: transparent !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 6px 16px -6px rgb(0 122 255 / 0.55) !important }
.fp-app .kc-topbar .fp-chip.fp-chip-solid:hover { background: #1a86ff !important }
.fp-app .kc-topbar .fp-chip-dot { display: none }

/* Accents across the page follow the same blue. */
.fp-app .fp-composer .kl-send:not(:disabled) { background: var(--fp-mac-blue) !important; color: #fff !important }

/* ═══ Panels in a frame (keks, 2026-11-08, a NeoDB-style reference; «фон обои не надо»). The window is a soft grey
 * frame; the menu and the page are two rounded panels inside it with an 8px gap. No wallpaper. ═══════════════════ */
@media (min-width: 768px) {
  html:has(.fp-app) { --fp-frame: #e9eaee; --fp-panel-side: #f3f4f6; --fp-panel-edge: rgb(255 255 255 / 0.9); --fp-row-on: rgb(0 0 0 / 0.07) }
  html.fp-dark:has(.fp-app) { --fp-frame: #0e0e10; --fp-panel-side: #1b1b1e; --fp-panel-edge: rgb(255 255 255 / 0.06); --fp-row-on: rgb(255 255 255 / 0.08) }
  html:has(.fp-app) body, .fp-app.fp-app { background: var(--fp-frame) !important }
  .fp-app.fp-app { padding: 8px !important; gap: 8px !important; height: 100dvh !important; box-sizing: border-box }
  .fp-app .fp-side { margin: 0 !important; height: auto !important; border-radius: 20px !important; background: var(--fp-panel-side) !important;
    -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--fp-panel-edge) !important; box-shadow: 0 1px 2px rgb(16 24 40 / 0.04) !important }
  .fp-app .fp-main, .fp-app .fp-main.fp-aura { border-radius: 20px !important; overflow: hidden; background: var(--background) !important; border: 1px solid var(--fp-panel-edge) !important; box-shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 12px 32px -20px rgb(16 24 40 / 0.18) }
  html.fp-dark .fp-app .fp-main { box-shadow: none }
  /* Menu rows as in the reference: grey icons, medium-weight labels, a soft grey pill for the open page. */
  .fp-app .fp-side-item { height: 34px; font-size: 14.5px; font-weight: 500; color: #3a3a3f }
  .fp-app .fp-side-ic, .fp-app .fp-side-item .fp-side-tile { color: #6e6e76 }
  .fp-app .fp-side-item:hover { background: rgb(0 0 0 / 0.04) }
  .fp-app .fp-side-item.is-on { background: var(--fp-row-on); color: #111114; font-weight: 600 }
  .fp-app .fp-side-item.is-on .fp-side-ic, .fp-app .fp-side-item.is-on .fp-side-tile { color: #111114 }
  html.fp-dark .fp-app .fp-side-item { color: #d4d4d8 } html.fp-dark .fp-app .fp-side-ic, html.fp-dark .fp-app .fp-side-item .fp-side-tile { color: #9a9aa2 }
  html.fp-dark .fp-app .fp-side-item.is-on, html.fp-dark .fp-app .fp-side-item.is-on .fp-side-ic, html.fp-dark .fp-app .fp-side-item.is-on .fp-side-tile { color: #fff }
  .fp-app .fp-side-sec { margin: 14px 0 4px; font-size: 12.5px; font-weight: 600; color: #4a4a50 }
  html.fp-dark .fp-app .fp-side-sec { color: #a1a1aa }
  /* «Search chats» reads as a search field with its shortcut, like the reference's Search… /. */
  .fp-app .fp-side-item:has(.fp-side-kbd) { margin: 2px 0 6px; background: rgb(0 0 0 / 0.045); color: #6e6e76; font-weight: 400 }
  html.fp-dark .fp-app .fp-side-item:has(.fp-side-kbd) { background: rgb(255 255 255 / 0.06); color: #9a9aa2 }
  .fp-app .fp-side-kbd { opacity: 1 !important; padding: 1px 6px; border-radius: 6px; background: rgb(0 0 0 / 0.06); font-size: 11.5px }
  /* Top bar capsules: white with a hairline, no heavy glass now that panels carry the depth. */
  .fp-app .kc-topbar .ml-auto button, .fp-app .kc-topbar .ml-auto a, html .fp-app .kc-topbar .fp-chip:not(.fp-chip-solid), html .fp-app .kc-topbar .fp-chip {
    background: #fff !important; border: 1px solid rgb(0 0 0 / 0.07) !important; box-shadow: 0 1px 2px rgb(16 24 40 / 0.06) !important; -webkit-backdrop-filter: none; backdrop-filter: none }
  html.fp-dark .fp-app .kc-topbar .ml-auto button, html.fp-dark .fp-app .kc-topbar .ml-auto a, html.fp-dark .fp-app .kc-topbar .fp-chip:not(.fp-chip-solid) { background: #232327 !important; border-color: rgb(255 255 255 / 0.07) !important }
  html .fp-app .kc-topbar .fp-chip.fp-chip-solid, html.fp-dark .fp-app .kc-topbar .fp-chip.fp-chip-solid { background: #111114 !important; box-shadow: 0 1px 2px rgb(0 0 0 / 0.2) !important; border: 0 !important }
  html.fp-dark .fp-app .kc-topbar .fp-chip.fp-chip-solid { background: #f2f2f4 !important; color: #111 !important }
}

/* ═══ Type and colour pass (keks, 2026-11-08: «шрифты и цвета хуевые»). One font (Inter, with its rounded
 * alternates), one neutral zinc grey scale, ink for emphasis, no leftover Apple blue. ════════════════════════════ */
html:has(.fp-app) { --fp-ink: #18181b; --fp-body: #3f3f46; --fp-sub: #71717a; --fp-mute: #a1a1aa; --fp-hair: #e4e4e7;
  --fp-gpt-ink: var(--fp-ink); --fp-gpt-sub: var(--fp-sub); --fp-gpt-line: var(--fp-hair); --fp-gpt-bubble: #f4f4f5; --fp-mac-blue: var(--fp-ink); --fp-row-on: #e4e4e7; --fp-frame: #ebebee; --fp-panel-side: #f4f4f5 }
html.fp-dark:has(.fp-app) { --fp-ink: #fafafa; --fp-body: #d4d4d8; --fp-sub: #a1a1aa; --fp-mute: #71717a; --fp-hair: #27272a;
  --fp-gpt-bubble: #27272a; --fp-mac-blue: var(--fp-ink); --fp-row-on: #27272a; --fp-frame: #09090b; --fp-panel-side: #18181b }
.fp-app, .fp-app button, .fp-app input, .fp-app textarea, .fp-app select {
  font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif !important; font-feature-settings: "cv11", "ss01", "ss03"; -webkit-font-smoothing: antialiased; letter-spacing: -0.006em }
.fp-app code, .fp-app pre, .fp-app kbd { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace !important; font-feature-settings: normal; letter-spacing: 0 }

/* Menu. */
.fp-app .fp-side-head a span, .fp-app .fp-side-head a b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--fp-ink) }
.fp-app .fp-side-item { font-size: 14px !important; font-weight: 500 !important; color: var(--fp-body) !important }
.fp-app .fp-side-ic, .fp-app .fp-side-item .fp-side-tile { color: var(--fp-sub) !important }
.fp-app .fp-side-item.is-on { background: var(--fp-row-on) !important; color: var(--fp-ink) !important; font-weight: 600 !important }
.fp-app .fp-side-item.is-on .fp-side-ic, .fp-app .fp-side-item.is-on .fp-side-tile { color: var(--fp-ink) !important }
.fp-app .fp-side-item:has(.fp-side-kbd) { color: var(--fp-mute) !important; font-weight: 400 !important }
.fp-app .fp-side-sec { font-size: 12px !important; font-weight: 500 !important; color: var(--fp-sub) !important; letter-spacing: 0 }
.fp-app .fp-side-chats, .fp-app .fp-side-chats .group.h-9 { font-size: 13.5px; color: var(--fp-body) }

/* Page type: titles 600 weight, body in the zinc greys. */
.fp-app .kc-topbar h1, .fp-crumbs { font-size: 17px !important; font-weight: 600 !important; letter-spacing: -0.015em !important; color: var(--fp-ink) !important }
.fp-app .kc-topbar .ml-auto button, .fp-app .kc-topbar .ml-auto a, html .fp-app .kc-topbar .fp-chip { font-size: 13.5px !important; font-weight: 500 !important; color: var(--fp-ink) !important }
.fp-app .kc-topbar .fp-chip .text-\[\#8b90a1\] { color: var(--fp-sub) !important }
.fp-app .kl-page h1, .fp-app .kl-page h2 { color: var(--fp-ink); letter-spacing: -0.02em; font-weight: 600 }
.fp-app .kl-page { color: var(--fp-body) }
.fp-ou-head .fp-ou-title { font-size: 30px !important; font-weight: 600 !important; letter-spacing: -0.025em !important; color: var(--fp-ink) !important }
.fp-ou-tile-t { font-size: 13.5px !important; font-weight: 500 !important; color: var(--fp-body) !important }
.fp-ou-tile, .fp-ou-tile:hover { border-color: var(--fp-hair) !important }

/* Composer and chat. */
.fp-composer textarea { font-size: 15.5px !important; color: var(--fp-ink) !important }
.fp-composer textarea::placeholder { color: var(--fp-mute) !important }
.fp-composer .nc-prism, .fp-app .fp-composer .nc-prism { border-color: var(--fp-hair) !important }
.fp-app .fp-composer .kl-send:not(:disabled) { background: var(--fp-ink) !important; color: var(--background) !important }
.fp-app .fp-composer .kl-send:disabled { background: var(--fp-hair) !important; color: var(--fp-mute) !important }
.fp-app .fp-thread .kc-ai-msg { font-size: 15.5px !important; line-height: 1.7; color: var(--fp-body) }
.fp-app .fp-thread .kc-ai-msg strong, .fp-app .fp-thread .kc-ai-msg b, .fp-app .fp-thread .kc-ai-msg h1, .fp-app .fp-thread .kc-ai-msg h2, .fp-app .fp-thread .kc-ai-msg h3 { color: var(--fp-ink); font-weight: 600 }
.fp-app .fp-thread .kc-user-bubble { font-size: 15.5px; color: var(--fp-ink) !important }
.fp-app .fp-thread .kc-ai-msg :not(pre) > code { padding: 1px 5px; border-radius: 6px; background: #f4f4f5; border: 1px solid var(--fp-hair); color: var(--fp-ink); font-size: 0.86em }
html.fp-dark .fp-app .fp-thread .kc-ai-msg :not(pre) > code { background: #27272a }

/* ═══ Contrast and overflow (keks, 2026-11-08: «тексты вылазят, плашки не видно на белом, нихуя не видно в
 * подключении»). The page panel is white; everything that sits on it (tabs, chips, cards) gets a visible grey fill
 * and a hairline; secondary text is a readable grey; long rows end in an ellipsis instead of running out. ═══════════ */
html:has(.fp-app):not(.fp-dark) { --fp-ou-bg: #fff; --fp-ou-card: #fff }
html:not(.fp-dark) body .fp-app.fp-app .fp-main:not([data-page="code"]), html:not(.fp-dark) body .fp-app.fp-app .fp-main:not([data-page="code"]) .kl-page { background: #fff !important }
/* Cards on the page: white with a hairline, as in the reference. */
html:not(.fp-dark) body .fp-app.fp-app .kl-page [class*="fp-ou-card"], html:not(.fp-dark) body .fp-app.fp-app .fp-ext-list { border: 1px solid #e7e7ea }
html:not(.fp-dark) body .fp-app.fp-app .text-muted-foreground { color: #63636b !important }
/* Anything drawn with a faint foreground tint (segmented tabs, filter chips, OS switch) gets a real grey. */
html:not(.fp-dark) body .fp-app.fp-app .fp-main:not([data-page="code"]) [class*="bg-foreground/["]:not([class*="hover:bg-foreground/["]):not(.fp-side-item) { background-color: #ececef !important }
html:not(.fp-dark) body .fp-app.fp-app .fp-main:not([data-page="code"]) button[class*="bg-foreground/["], html:not(.fp-dark) body .fp-app.fp-app .fp-main nav[class*="bg-foreground/["] { box-shadow: inset 0 0 0 1px #e4e4e7 !important; color: #3f3f46 !important }
html:not(.fp-dark) body .fp-app.fp-app .fp-main nav[class*="bg-foreground/["] > a[aria-current], html:not(.fp-dark) body .fp-app.fp-app .fp-main nav[class*="bg-foreground/["] > a[data-state="active"], html:not(.fp-dark) body .fp-app.fp-app .fp-main nav[class*="bg-foreground/["] > a[aria-selected="true"] { background: #fff !important; color: #18181b !important; box-shadow: 0 1px 2px rgb(16 24 40 / 0.1), 0 0 0 1px #e4e4e7 !important }
html:not(.fp-dark) body .fp-app.fp-app .fp-main nav[class*="bg-foreground/["] > a { color: #52525b !important }
/* Inputs and selects on white. */
html:not(.fp-dark) body .fp-app.fp-app .kl-page input:not([type="checkbox"]):not([type="radio"]), html:not(.fp-dark) body .fp-app.fp-app .kl-page select { background: #fff !important; border: 1px solid #d4d4d8 !important; color: #18181b !important }
html:not(.fp-dark) body .fp-app.fp-app .kl-page input::placeholder { color: #8b8b93 !important }

/* Connect: program cards are white with a hairline; the chosen one has an ink outline; tags are readable. */
html:not(.fp-dark) body .fp-app.fp-app .fp-main .kl-page button.kc-pick.kc-pick.kc-pick { background: #fff !important; border: 1px solid #e4e4e7 !important; box-shadow: none !important; transform: none !important }
html:not(.fp-dark) body .fp-app.fp-app .fp-main .kl-page button.kc-pick.kc-pick.kc-pick:hover { border-color: #c4c4cb !important; background: #fafafa !important }
html:not(.fp-dark) body .fp-app.fp-app .fp-main .kl-page button.kc-pick.kc-pick.kc-pick[aria-pressed="true"], html:not(.fp-dark) body .fp-app.fp-app .fp-main .kl-page button.kc-pick.kc-pick.kc-pick[aria-current], html:not(.fp-dark) body .fp-app.fp-app .fp-main .kl-page button.kc-pick.kc-pick.kc-pick[data-on], html:not(.fp-dark) body .fp-app.fp-app .fp-main .kl-page button.kc-pick.kc-pick.kc-pick.is-on { border-color: #18181b !important; box-shadow: 0 0 0 1px #18181b !important }
html:not(.fp-dark) body .fp-app.fp-app .fp-main .kl-page button.kc-pick.kc-pick.kc-pick > span > span:last-child > span, html:not(.fp-dark) body .fp-app.fp-app .fp-main .kl-page button.kc-pick.kc-pick.kc-pick .mt-2\.5 > span { background: #f1f1f3 !important; color: #52525b !important; border: 1px solid #e4e4e7 }
html:not(.fp-dark) body .fp-app.fp-app .kl-page h1 + h1, html:not(.fp-dark) body .fp-app.fp-app .kl-page a.text-muted-foreground, html:not(.fp-dark) body .fp-app.fp-app .kl-page button.text-muted-foreground { color: #8b8b93 !important }
html:not(.fp-dark) body .fp-app.fp-app .kl-page pre, html:not(.fp-dark) body .fp-app.fp-app .kl-page code { color: #18181b }
html:not(.fp-dark) body .fp-app.fp-app .kl-page pre { background: #f6f6f7 !important; border: 1px solid #e4e4e7 !important; border-radius: 14px !important }

/* Long rows: the extension list and any grid list keep their rows inside, ending in an ellipsis. */
.fp-app .fp-ext-list { min-width: 0 }
@media (min-width: 1100px) { .fp-app .fp-ext-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } }
.fp-app .fp-ext-list > *, .fp-app .fp-ext-row { min-width: 0; max-width: 100% }
.fp-app .kl-page .truncate { min-width: 0 }
.fp-app .kl-page { overflow-wrap: anywhere }
.fp-app .kl-page pre, .fp-app .kl-page code { overflow-wrap: anywhere; white-space: pre-wrap }

/* ═══ The window (keks, 2026-11-08: «окно дизайн поменяй красиво»). A cool grey frame with a faint top light; the
 * menu is a pale translucent panel sitting on it, the page a crisp panel with a double edge (hairline outside, white
 * light inside) and a long soft shadow, as in the NeoDB reference. ══════════════════════════════════════════════ */
@media (min-width: 768px) {
  html:not(.fp-dark) body:has(.fp-app), html:not(.fp-dark) body .fp-app.fp-app { background: linear-gradient(180deg, #f1f1f4 0%, #e7e8ec 100%) !important }
  html.fp-dark body .fp-app.fp-app { background: linear-gradient(180deg, #121214 0%, #09090b 100%) !important }
  .fp-app.fp-app { padding: 10px !important; gap: 10px !important }
  html:not(.fp-dark) body .fp-app.fp-app .fp-side { background: rgb(255 255 255 / 0.55) !important; border: 1px solid rgb(255 255 255 / 0.95) !important;
    box-shadow: 0 0 0 1px rgb(16 24 40 / 0.05), 0 1px 2px rgb(16 24 40 / 0.04) !important; border-radius: 22px !important }
  html:not(.fp-dark) body .fp-app.fp-app .fp-main { border-radius: 22px !important; border: 0 !important;
    box-shadow: 0 0 0 1px rgb(16 24 40 / 0.07), inset 0 1px 0 #fff, 0 2px 4px rgb(16 24 40 / 0.03), 0 24px 48px -24px rgb(16 24 40 / 0.16) !important }
  html.fp-dark body .fp-app.fp-app .fp-side { background: rgb(255 255 255 / 0.03) !important; border: 1px solid rgb(255 255 255 / 0.06) !important; border-radius: 22px !important }
  html.fp-dark body .fp-app.fp-app .fp-main { border-radius: 22px !important; border: 1px solid rgb(255 255 255 / 0.07) !important }
  /* The top bar of the page is separated from the content by a hairline, like the reference's header row. */
  html:not(.fp-dark) body .fp-app.fp-app .fp-main:not([data-page="code"]) .kc-topbar { border-bottom: 1px solid #ececef !important; background: #fff !important }
  html.fp-dark body .fp-app.fp-app .fp-main:not([data-page="code"]) .kc-topbar { border-bottom: 1px solid #222226 !important }
  /* The brand in the menu: the mascot and the name a touch larger. */
  .fp-app .fp-side-head img { width: 32px !important; height: 32px !important }
  .fp-app .fp-side-head .fp-side-label { font-size: 16px !important; font-weight: 650 !important; letter-spacing: -0.01em !important }
  html:not(.fp-dark) body .fp-app.fp-app .fp-side-item.is-on { background: #fff !important; box-shadow: 0 0 0 1px rgb(16 24 40 / 0.06), 0 1px 2px rgb(16 24 40 / 0.06) !important }
  html:not(.fp-dark) body .fp-app.fp-app .fp-side-item:has(.fp-side-kbd) { background: rgb(255 255 255 / 0.8) !important; box-shadow: 0 0 0 1px rgb(16 24 40 / 0.06) !important }
}

/* ═══ Final layout (keks, 2026-11-08 17:42, «сделай фул как тут дизайн», a SaaS dashboard reference): the menu sits
 * straight on a light grey window (no panel of its own); the page is one white sheet with a rounded top-left corner
 * and a hairline edge; a header row with a hairline under it; neutral greys, one ink accent, no decorative art. ═════ */
@media (min-width: 768px) {
  html:not(.fp-dark) body:has(.fp-app), html:not(.fp-dark) body .fp-app.fp-app { background: #f3f3f5 !important }
  html.fp-dark body:has(.fp-app), html.fp-dark body .fp-app.fp-app { background: #0f0f11 !important }
  body .fp-app.fp-app { padding: 0 !important; gap: 0 !important }
  /* Menu: no panel, rows on the window grey. */
  html body .fp-app.fp-app .fp-side.fp-side { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; height: 100% !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important }
  body .fp-app.fp-app .fp-side:not(.is-folded) { width: 264px !important }
  .fp-app .fp-side-head { height: 64px; padding: 0 12px 0 20px }
  .fp-app .fp-side-item { height: 36px !important; padding: 0 10px !important; border-radius: 10px !important; font-size: 14.5px !important; font-weight: 450 !important; color: #3f3f46 !important; background: transparent !important; box-shadow: none !important }
  .fp-app .fp-side-item:hover { background: rgb(0 0 0 / 0.045) !important }
  .fp-app .fp-side-ic svg, .fp-app .fp-side-item .fp-side-tile svg { width: 18px !important; height: 18px !important }
  .fp-app .fp-side-ic { color: #71717a !important }
  html:not(.fp-dark) body .fp-app.fp-app .fp-side-item.is-on { background: #fff !important; color: #18181b !important; font-weight: 550 !important; box-shadow: 0 1px 2px rgb(16 24 40 / 0.08), 0 0 0 1px rgb(16 24 40 / 0.04) !important }
  html:not(.fp-dark) body .fp-app.fp-app .fp-side-item.is-on .fp-side-ic { color: #18181b !important }
  /* Search: a grey field with a white key chip, like the reference's «Search /». */
  html:not(.fp-dark) body .fp-app.fp-app .fp-side-item:has(.fp-side-kbd) { margin: 6px 0 10px !important; height: 40px !important; background: #e8e8eb !important; box-shadow: none !important; color: #71717a !important; font-weight: 400 !important }
  html:not(.fp-dark) body .fp-app.fp-app .fp-side-item:has(.fp-side-kbd):hover { background: #e2e2e6 !important }
  html:not(.fp-dark) body .fp-app.fp-app .fp-side-kbd { opacity: 1 !important; min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: 6px; background: #fff; color: #3f3f46; font-size: 11.5px; font-weight: 500; box-shadow: 0 1px 1px rgb(16 24 40 / 0.08) }
  html.fp-dark body .fp-app.fp-app .fp-side-item:has(.fp-side-kbd) { background: #1c1c20 !important }
  html.fp-dark body .fp-app.fp-app .fp-side-kbd { background: #2a2a2f; color: #d4d4d8 }
  .fp-app .fp-side-chats { margin-top: 14px !important; padding-top: 14px; border-top: 1px solid #e4e4e7 }
  html.fp-dark .fp-app .fp-side-chats { border-top-color: #232327 }
  .fp-app .fp-side-foot { padding: 10px 12px !important; border-top: 1px solid #e4e4e7 !important }
  html.fp-dark .fp-app .fp-side-foot { border-top-color: #232327 !important }

  /* Page: one white sheet, rounded top-left, flush with the right and bottom edges. */
  html body .fp-app.fp-app .fp-main.fp-main, html body .fp-app.fp-app .fp-main.fp-aura { margin: 10px 0 0 0 !important; border-radius: 18px 0 0 0 !important; border: 0 !important;
    box-shadow: -1px -1px 0 #e4e4e7, 0 0 0 1px #e4e4e7 !important; background: #fff !important }
  html.fp-dark body .fp-app.fp-app .fp-main { background: #161618 !important; box-shadow: 0 0 0 1px #232327 !important }
  html:not(.fp-dark) body .fp-app.fp-app .fp-main:not([data-page="code"]), html:not(.fp-dark) body .fp-app.fp-app .fp-main .kl-page { background: #fff !important }
  html.fp-dark body .fp-app.fp-app .fp-main .kl-page { background: transparent !important }
  /* Header row: the title as a breadcrumb chip, a hairline under it on every page. */
  body .fp-app.fp-app .fp-main .kc-topbar { height: 60px !important; padding: 0 20px 0 28px !important; background: transparent !important; border-bottom: 1px solid #ececef !important }
  html.fp-dark body .fp-app.fp-app .fp-main .kc-topbar { border-bottom-color: #232327 !important }
  .fp-app .kc-topbar h1, .fp-crumbs { font-size: 14.5px !important; font-weight: 550 !important; letter-spacing: -0.005em !important }
  html:not(.fp-dark) .fp-app .kc-topbar h1 { padding: 5px 10px; margin-left: -10px; border-radius: 8px; background: #f4f4f5 }
  .fp-app .kc-topbar .ml-auto button, .fp-app .kc-topbar .ml-auto a, html .fp-app .kc-topbar .fp-chip { height: 36px !important; box-shadow: none !important }
  html:not(.fp-dark) .fp-app .kc-topbar .ml-auto button, html:not(.fp-dark) .fp-app .kc-topbar .ml-auto a:not(.fp-chip-solid), html:not(.fp-dark) .fp-app .kc-topbar .fp-chip:not(.fp-chip-solid) { background: #fff !important; border: 1px solid #e4e4e7 !important }
  /* The page's own big headings: the reference's 26px title. */
  .fp-app .kl-page h1, .fp-app .kl-page > div > h1, .fp-app .kl-page .text-\[40px\]:not(.kc-viz-hero *) { font-size: 26px !important; line-height: 1.25 !important; font-weight: 600 !important; letter-spacing: -0.02em !important }
  .fp-app .kl-page { padding: 28px 40px 56px !important }
  /* The right Files / Changes column: white like the page, a hairline edge, the tabs as a segmented control. */
  .fp-app .fp-main aside.bg-sidebar { background: #fff !important; border-left: 1px solid #ececef !important }
  html.fp-dark .fp-app .fp-main aside.bg-sidebar { background: transparent !important; border-left-color: #232327 !important }
  .fp-app .fp-main aside.bg-sidebar > div > div.h-11 { height: 60px; padding: 0 12px; border-bottom-color: #ececef }
}

/* ═══ Cleanup (keks: «это премиум? нет нейрослопа?» → «делай») ════════════════════════════════════════════════════ */
/* Empty states are text only: no stock illustration. */
.fp-app .fp-empty-art { display: none !important }
.fp-app .fp-empty { padding: 40px 0 !important; gap: 6px }
.fp-app .fp-empty-t { color: #71717a; font-size: 14px }
/* Dashboard balance: a quiet white card with a big ink figure, not a blue gradient slab. */
html:not(.fp-dark) .fp-app .fp-main[data-page="overview"] .kc-viz-hero { background: #fff !important; color: #18181b !important; box-shadow: 0 0 0 1px #e4e4e7 !important }
html:not(.fp-dark) .fp-app .fp-main[data-page="overview"] .kc-viz-hero :is(span, div) { color: #18181b }
html:not(.fp-dark) .fp-app .fp-main[data-page="overview"] .kc-viz-hero .text-muted-foreground { color: #71717a !important }
html:not(.fp-dark) .fp-app .fp-main[data-page="overview"] .kc-viz-hero .kc-spark, html:not(.fp-dark) .fp-app .fp-main[data-page="overview"] .kc-viz-hero .kc-spark[data-empty] { background: #e4e4e7 }
html:not(.fp-dark) .fp-app .fp-main[data-page="overview"] .kc-viz-hero .kc-spark-hot { background: #18181b }
html:not(.fp-dark) .fp-app .fp-main[data-page="overview"] .kc-viz-hero a.bg-foreground, html:not(.fp-dark) .fp-app .fp-main[data-page="overview"] .kc-viz-hero .bg-foreground.text-background { background-color: #18181b !important; color: #fff !important }
html.fp-dark .fp-app .fp-main[data-page="overview"] .kc-viz-hero { background: #1c1c20 !important }
/* Chat suggestions: plain text chips. */
.fp-app .fp-ou-tile .fp-ou-pic { display: none !important }
.fp-ou-tile, .fp-ou-tile:hover { padding: 0 16px !important; height: 38px }
/* Connect: no 01 / 02 / 03 step numbers. */
.fp-app .fp-main[data-page="connect"] section > .mb-4 > span.font-mono:first-child { display: none }
/* Every card on a page: one radius, one hairline, no shadow. */
html:not(.fp-dark) .fp-app .kl-page .kc-card, html:not(.fp-dark) .fp-app .kl-page .kc-box, html:not(.fp-dark) .fp-app .fp-ext-list { border-radius: 16px !important; box-shadow: 0 0 0 1px #e7e7ea !important; border: 0 !important; background: #fff !important }
/* Fix: text on solid ink buttons stays white (an earlier grey-fill rule painted it dark). */
html:not(.fp-dark) body .fp-app.fp-app .fp-main :is(.bg-primary, .bg-foreground.text-background, [class*="text-primary-foreground"], [class*="text-background"]) { color: #fff !important }
html:not(.fp-dark) body .fp-app.fp-app .fp-main :is(.bg-primary, .bg-foreground.text-background) * { color: inherit }
/* Extension and skill icons: one quiet style (grey disc, ink glyph) instead of a wall of identical teal circles. */
html:not(.fp-dark) .fp-app .fp-ext-row > span.rounded-full:first-child { background: #f4f4f5 !important; color: #3f3f46 !important; box-shadow: inset 0 0 0 1px #e7e7ea }
html.fp-dark .fp-app .fp-ext-row > span.rounded-full:first-child { background: #232327 !important; color: #e4e4e7 !important }

/* keks, 2026-11-08: «Сделать кнопку более заметной» — the send button is a solid ink disc with a white arrow; empty
   input keeps it solid (dark zinc) instead of a near-invisible grey, so it always reads as the send control. */
html:not(.fp-dark) body .fp-app.fp-app button.kl-send.kl-send { width: 36px !important; height: 36px !important; background: #18181b !important; color: #fff !important; box-shadow: 0 2px 6px rgb(24 24 27 / 0.25) !important; opacity: 1 !important }
html:not(.fp-dark) body .fp-app.fp-app button.kl-send.kl-send:hover:not(:disabled) { background: #000 !important }
html:not(.fp-dark) body .fp-app.fp-app button.kl-send.kl-send:disabled { background: #3f3f46 !important; color: #fff !important; box-shadow: none !important }
html.fp-dark body .fp-app.fp-app button.kl-send.kl-send { width: 36px !important; height: 36px !important; background: #fafafa !important; color: #18181b !important }
html.fp-dark body .fp-app.fp-app button.kl-send.kl-send:disabled { background: #52525b !important; color: #e4e4e7 !important }
body .fp-app.fp-app button.kl-send.kl-send svg { width: 18px !important; height: 18px !important }
/* «Поправить баг»: the ⌘K chip spilled out of the folded rail's search icon and wrapped onto two lines. */
html body .fp-app.fp-app .fp-side.is-folded .fp-side-kbd.fp-side-kbd { display: none !important }
html body .fp-app.fp-app .fp-side-kbd { white-space: nowrap }

/* ═══ ChatGPT layout (keks, 2026-11-08 19:27, «Хочу дизайн чата гпт», a chatgpt.com screenshot) ═══════════════════
 * No window: the menu is a light grey column flush with the left edge, the page is plain white right next to it, the
 * header has no hairline and no chip. The new chat is one greeting line, a pill composer on one row and the
 * suggestions as quiet rows with an icon. Profile at the bottom of the menu. ════════════════════════════════════════ */
@media (min-width: 768px) {
  html:not(.fp-dark) body:has(.fp-app), html:not(.fp-dark) body .fp-app.fp-app { background: #f9f9f9 !important }
  html.fp-dark body:has(.fp-app), html.fp-dark body .fp-app.fp-app { background: #181818 !important }
  html body .fp-app.fp-app .fp-side.fp-side { background: #f9f9f9 !important; border-right: 1px solid #ededed !important }
  html.fp-dark body .fp-app.fp-app .fp-side.fp-side { background: #181818 !important; border-right-color: #262626 !important }
  body .fp-app.fp-app .fp-side:not(.is-folded) { width: 260px !important }
  .fp-app .fp-side-head { height: 56px; padding: 0 10px 0 16px }
  .fp-app .fp-side-item { height: 38px !important; padding: 0 10px !important; border-radius: 10px !important; font-size: 14.5px !important; font-weight: 400 !important; color: #0d0d0d !important }
  html.fp-dark .fp-app .fp-side-item { color: #ececec !important }
  .fp-app .fp-side-item:hover { background: #ececec !important }
  html.fp-dark .fp-app .fp-side-item:hover { background: #262626 !important }
  .fp-app .fp-side-ic { color: #0d0d0d !important }
  html.fp-dark .fp-app .fp-side-ic { color: #ececec !important }
  html:not(.fp-dark) body .fp-app.fp-app .fp-side-item.is-on { background: #ececec !important; color: #0d0d0d !important; font-weight: 400 !important; box-shadow: none !important }
  html.fp-dark body .fp-app.fp-app .fp-side-item.is-on { background: #262626 !important }
  /* Search, first row: a plain row like the others, the shortcut shown quietly on the right. */
  html:not(.fp-dark) body .fp-app.fp-app .fp-side-item:has(.fp-side-kbd) { margin: 2px 0 2px !important; height: 38px !important; background: transparent !important; color: #0d0d0d !important }
  html:not(.fp-dark) body .fp-app.fp-app .fp-side-item:has(.fp-side-kbd):hover { background: #ececec !important }
  html.fp-dark body .fp-app.fp-app .fp-side-item:has(.fp-side-kbd) { background: transparent !important }
  html:is(.dark, :not(.dark)) body .fp-app.fp-app .fp-side-kbd.fp-side-kbd { opacity: 0 !important; background: transparent !important; box-shadow: none !important; color: #8f8f8f !important; font-size: 12px !important; padding: 0 !important; transition: opacity var(--fp-t-hover) var(--fp-ease)}
  html:is(.dark, :not(.dark)) body .fp-app.fp-app .fp-side-item:hover .fp-side-kbd.fp-side-kbd { opacity: 1 !important }
  .fp-app .fp-side-chats { margin-top: 18px !important; padding-top: 0; border-top: 0 !important }
  .fp-app .fp-side-foot { border-top: 1px solid #ededed !important }
  html.fp-dark .fp-app .fp-side-foot { border-top-color: #262626 !important }

  /* Page: white, flush, no frame. */
  html body .fp-app.fp-app .fp-main.fp-main, html body .fp-app.fp-app .fp-main.fp-aura { margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important }
  html.fp-dark body .fp-app.fp-app .fp-main.fp-main { background: #212121 !important }
  body .fp-app.fp-app .fp-main .kc-topbar { height: 56px !important; padding: 0 16px 0 20px !important; border-bottom: 0 !important }
  html:not(.fp-dark) .fp-app .kc-topbar h1 { padding: 0; margin-left: 0; background: transparent }
  .fp-app .kc-topbar h1, .fp-crumbs { font-size: 17px !important; font-weight: 500 !important }
  /* Pages other than the chat keep a hairline under the header, so their tables have a top edge. */
  body .fp-app.fp-app .fp-main:not([data-page="code"]) .kc-topbar { border-bottom: 1px solid #ededed !important }
  html.fp-dark body .fp-app.fp-app .fp-main:not([data-page="code"]) .kc-topbar { border-bottom-color: #2f2f2f !important }
}

/* New chat: the greeting, the list of suggestions. */
.fp-app .fp-gpt-hello { margin: 0; text-align: center; font-size: 28px; line-height: 1.25; font-weight: 400; letter-spacing: -0.01em; color: #0d0d0d }
html.fp-dark .fp-app .fp-gpt-hello { color: #ececec }
.fp-app .fp-gpt-hints { display: flex; flex-direction: column; gap: 2px; margin: 18px auto 0; width: 100%; max-width: 760px }
.fp-app .fp-gpt-hint { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 16px; border-radius: 14px; font-size: 15.5px; color: #5d5d5d; text-align: left; transition: background-color var(--fp-t-hover) var(--fp-ease), color var(--fp-t-hover) var(--fp-ease)}
.fp-app .fp-gpt-hint svg { width: 20px; height: 20px; flex: none; color: #5d5d5d }
.fp-app .fp-gpt-hint:hover { background: #f4f4f4; color: #0d0d0d }
html.fp-dark .fp-app .fp-gpt-hint { color: #b4b4b4 }
html.fp-dark .fp-app .fp-gpt-hint svg { color: #b4b4b4 }
html.fp-dark .fp-app .fp-gpt-hint:hover { background: #2f2f2f; color: #ececec }
.fp-app .fp-hero .max-w-\[760px\] { max-width: 800px !important }
html body .fp-app.fp-app .fp-hero .fp-composer { max-width: 760px !important }

/* Composer: one pill row — «+», the text, GitHub, the model, mic, voice, send — that grows upward with long text.
   Attachments, when present, sit on their own row above. */
html body .fp-app.fp-app .fp-composer .nc-prism.nc-prism { display: flex !important; flex-wrap: wrap; align-items: flex-end; gap: 0 4px; padding: 8px 8px 8px 10px !important; border-radius: 28px !important; border: 1px solid #e3e3e3 !important; background: #fff !important; box-shadow: 0 4px 16px rgb(0 0 0 / 0.05), 0 0 1px rgb(0 0 0 / 0.08) !important }
html.fp-dark body .fp-app.fp-app .fp-composer .nc-prism.nc-prism { background: #303030 !important; border-color: #3a3a3a !important }
.fp-app .fp-composer .kl-c-tiles { order: 0; width: 100%; padding: 4px 4px 8px !important }
.fp-app .fp-composer .kl-c-bar { display: contents !important }
.fp-app .fp-composer .kl-c-bar > * { order: 3 }
.fp-app .fp-composer .kl-c-bar > button:first-of-type { order: 1 }
html body .fp-app.fp-app .fp-composer .kl-c-input.kl-c-input { order: 2; flex: 1 1 200px; min-width: 0; min-height: 0 !important; padding: 8px 6px !important; align-self: center }
html body .fp-app.fp-app .fp-composer .kl-c-input textarea { font-size: 16px !important; line-height: 24px !important; padding: 0 !important }
.fp-app .fp-composer .kl-c-bar > .ml-auto { margin-left: auto !important }
/* «скругление куда-то съебалось»: the «+» kept only the lower arc of its liquid shadow; now a clean round icon button. */
html body .fp-app.fp-app .fp-composer .kl-c-bar > button.nc-liquid { width: 36px !important; height: 36px !important; border-radius: 999px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #0d0d0d !important }
html body .fp-app.fp-app .fp-composer .kl-c-bar > button.nc-liquid::before, html body .fp-app.fp-app .fp-composer .kl-c-bar > button.nc-liquid::after { display: none !important }
html body .fp-app.fp-app .fp-composer .kl-c-bar > button.nc-liquid:hover { background: #f0f0f0 !important }
html.fp-dark body .fp-app.fp-app .fp-composer .kl-c-bar > button.nc-liquid { color: #ececec !important }
html.fp-dark body .fp-app.fp-app .fp-composer .kl-c-bar > button.nc-liquid:hover { background: #3a3a3a !important }
.fp-app .fp-composer .kl-c-bar > .ml-auto > button, .fp-app .fp-composer .fp-repo > button { border-radius: 999px !important }

/* ═══ Rounded page panel (keks, 2026-11-08 19:43, «Скругления почему они не везде?», the ChatGPT desktop app): the
 * white page is a separate panel rounded on all four corners, with an even grey gap above, right and below it; the
 * menu sits on the same grey. Every cabinet page, light and dark. ══════════════════════════════════════════════════ */
@media (min-width: 768px) {
  html:not(.fp-dark) body:has(.fp-app), html:not(.fp-dark) body .fp-app.fp-app, html:not(.fp-dark) body .fp-app.fp-app .fp-side.fp-side { background: #f3f3f4 !important }
  html.fp-dark body:has(.fp-app), html.fp-dark body .fp-app.fp-app, html.fp-dark body .fp-app.fp-app .fp-side.fp-side { background: #171717 !important }
  html body .fp-app.fp-app .fp-side.fp-side { border-right: 0 !important }
  html body .fp-app.fp-app .fp-main.fp-main, html body .fp-app.fp-app .fp-main.fp-aura { margin: 8px 8px 8px 0 !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.04) !important }
  html.fp-dark body .fp-app.fp-app .fp-main.fp-main { box-shadow: 0 0 0 1px #2a2a2a !important }
  html body .fp-app.fp-app .fp-main .kc-topbar { border-top-left-radius: 16px; border-top-right-radius: 16px }
}

/* «боже что это?» (keks, 2026-11-08): the open sidebar search showed a white input box inside the grey field (the
   cabinet's form-input style reached it). One flat field the size of a menu row, nothing inside it but the text. */
html body .fp-app.fp-app .fp-side-search > label { height: 38px !important; padding: 0 10px !important; border-radius: 10px !important; background: #e8e8ea !important; box-shadow: none !important; border: 0 !important }
html.fp-dark body .fp-app.fp-app .fp-side-search > label { background: #262626 !important }
html body .fp-app.fp-app .fp-side-search > label svg { width: 18px !important; height: 18px !important; color: #0d0d0d !important }
html.fp-dark body .fp-app.fp-app .fp-side-search > label svg { color: #ececec !important }
html body .fp-app.fp-app .fp-side-search input.fp-side-search, html body .fp-app.fp-app .fp-side-search input { -webkit-appearance: none !important; appearance: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; height: 100% !important; font-size: 14.5px !important; color: #0d0d0d !important; outline: none !important }
html.fp-dark body .fp-app.fp-app .fp-side-search input { color: #ececec !important }
html body .fp-app.fp-app .fp-side-search input::placeholder { color: #8f8f8f !important }
html body .fp-app.fp-app .fp-side-search kbd { font-family: inherit !important; font-size: 12px !important; color: #8f8f8f !important; background: transparent !important; border: 0 !important; box-shadow: none !important }

/* The flower lockup as the cabinet's logo (keks, 2026-11-08): /lockup.svg is a mask over the text colour, so the
 * same file serves the light and the dark theme. 541×127 is the SVG's viewBox. */
.fp-lockup { display: block; height: 26px; aspect-ratio: 541 / 127; background: currentColor; -webkit-mask: url(/lockup.svg?v=6b96af8d) center / contain no-repeat; mask: url(/lockup.svg?v=6b96af8d) center / contain no-repeat }

/* ═══ New chat polish (keks, 2026-11-08 23:17, «поправь тут дизайн», a screenshot of the empty chat) ═══════════════
 * The three suggestions were full-width, left-aligned rows hanging under a centred greeting and composer, and the
 * hovered one lit up as a 760px grey slab. Now they are centred pill chips with an icon, as on chatgpt.com, and the
 * greeting gets a touch more air above the composer. Light and dark. ═══════════════════════════════════════════════ */
.fp-app .fp-gpt-hello { font-size: 30px; letter-spacing: -0.02em }
.fp-app .fp-gpt-hints { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; padding: 0 8px }
.fp-app .fp-gpt-hint { height: 36px; gap: 8px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid #e3e3e3; background: #fff; font-size: 13.5px; color: #5d5d5d; white-space: nowrap; transition: background-color var(--fp-t-hover) var(--fp-ease), color var(--fp-t-hover) var(--fp-ease), border-color var(--fp-t-hover) var(--fp-ease)}
.fp-app .fp-gpt-hint svg { width: 17px; height: 17px }
.fp-app .fp-gpt-hint:hover { background: #f4f4f4; border-color: #d4d4d4; color: #0d0d0d }
html.fp-dark .fp-app .fp-gpt-hint { background: transparent; border-color: #3a3a3a; color: #b4b4b4 }
html.fp-dark .fp-app .fp-gpt-hint:hover { background: #2f2f2f; border-color: #4a4a4a; color: #ececec }
@media (max-width: 639px) { .fp-app .fp-gpt-hello { font-size: 26px } }
/* On a narrow page the one-row pill broke unevenly (the GitHub chip alone at the top right, the rest below). When the
   row has to wrap, the text takes the whole first row and every control sits on the second, as in ChatGPT's two-row
   composer. Phones keep their own wrap (the text next to «+», the controls below), which already fit on two rows. */
@media (min-width: 640px) and (max-width: 1180px) {
  html body .fp-app.fp-app .fp-composer .kl-c-input.kl-c-input { order: 0; flex: 1 1 100%; padding: 6px 8px 2px !important }
  .fp-app .fp-composer .kl-c-bar > button:first-of-type { order: 1 }
  .fp-app .fp-composer .kl-c-bar > .ml-auto { order: 3 }
}

/* «Поправь тут кривовато» (keks, 2026-11-08): everything in the pill composer on one vertical axis. The text box
   lost its extra top padding (the placeholder sat 4px above the buttons) and every item is centred in the row,
   including the GitHub chip, which sat 2px low. Even 10px padding left and right. */
html body .fp-app.fp-app .fp-composer .nc-prism.nc-prism { align-items: center !important; padding: 8px 10px !important; min-height: 56px }
html body .fp-app.fp-app .fp-composer .nc-prism.nc-prism > *, html body .fp-app.fp-app .fp-composer .kl-c-bar > *, html body .fp-app.fp-app .fp-composer .kl-c-bar > .ml-auto > * { align-self: center !important; margin-top: 0 !important; margin-bottom: 0 !important }
html body .fp-app.fp-app .fp-composer .kl-c-input.kl-c-input { display: flex !important; align-items: center !important; padding: 0 6px !important; min-height: 40px !important; gap: 0 !important }
html body .fp-app.fp-app .fp-composer .kl-c-input textarea { padding: 8px 0 !important; margin: 0 !important; line-height: 24px !important; min-height: 40px }
html body .fp-app.fp-app .fp-composer .fp-repo { display: flex !important; align-items: center !important; height: 36px }
html body .fp-app.fp-app .fp-composer .fp-repo > button, html body .fp-app.fp-app .fp-composer .kl-c-bar > .ml-auto > button.group { height: 36px !important }
html body .fp-app.fp-app .fp-composer .kl-c-bar > .ml-auto > button.kl-mic { width: 36px !important; height: 36px !important }
html body .fp-app.fp-app .fp-composer .kl-c-tiles { align-self: stretch !important }

/* «Прозрачное окно тоже плохо, текст сливается» (keks, 2026-11-08): every popover, menu and dialog is solid. */
html:not(.fp-dark) body:has(.fp-app) :is(.nc-popover, .nc-material, [role="menu"], [data-radix-popper-content-wrapper] > [role="dialog"]):not(.bg-foreground) { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid #e5e5e5 !important; box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.06) !important }
html.fp-dark body:has(.fp-app) :is(.nc-popover, .nc-material, [role="menu"], [data-radix-popper-content-wrapper] > [role="dialog"]):not(.bg-foreground) { background: #1f1f1f !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid #2f2f2f !important }

/* «иконки белый на сером — это плохо»: the dashboard stat cards' round icon badges are ink on light grey. */
html:not(.fp-dark) body .fp-app.fp-app .kc-tile-ic.kc-tile-ic { background: #f4f4f5 !important; color: #18181b !important; box-shadow: inset 0 0 0 1px #e4e4e7 !important }
html:not(.fp-dark) body .fp-app.fp-app .kc-tile-ic.kc-tile-ic svg { color: #18181b !important; opacity: 1 !important }
html.fp-dark body .fp-app.fp-app .kc-tile-ic.kc-tile-ic { background: #2a2a2a !important; color: #f4f4f5 !important; box-shadow: inset 0 0 0 1px #3a3a3a !important }
html.fp-dark body .fp-app.fp-app .kc-tile-ic.kc-tile-ic svg { color: #f4f4f5 !important }
html:not(.fp-dark) body .fp-app.fp-app a.kc-viewall.kc-viewall { background: #fff !important; border: 1px solid #e4e4e7 !important; color: #3f3f46 !important }
html:not(.fp-dark) body .fp-app.fp-app a.kc-viewall.kc-viewall:hover { background: #f4f4f5 !important; color: #18181b !important }

/* Jellee AI avatar: the logo's flower, moving by state (code/src/console/FlowerBot.tsx). */
.fp-flowerbot { color: #0d0d0d; display: inline-block; flex: none; vertical-align: middle }
html.fp-dark .fp-flowerbot { color: #ececec }
.fp-flowerbot svg { display: block; width: 100%; height: 100%; overflow: visible }
.fp-flowerbot .fpf-f, .fp-flowerbot .fpf-p { transform-origin: 50px 50px }
.fp-flowerbot[data-mood="idle"] .fpf-f { animation: fpf-breathe 5s cubic-bezier(.45,0,.55,1) infinite }
.fp-flowerbot[data-mood="think"] .fpf-f { animation: fpf-spin 1.8s cubic-bezier(.5,.05,.5,.95) infinite }
.fp-flowerbot[data-mood="think"] .fpf-p { animation: fpf-push 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.36s) }
.fp-flowerbot[data-mood="talk"] .fpf-p { transform-box: fill-box; transform-origin: center; animation: fpf-swell 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.24s) }
.fp-flowerbot[data-mood="happy"] .fpf-f { animation: fpf-pop .7s cubic-bezier(.3,1.4,.5,1) 1 }
.fp-flowerbot[data-mood="error"] { color: #a1a1aa }
@keyframes fpf-breathe { 0%, 100% { transform: none } 50% { transform: scale(1.04) rotate(4deg) } }
@keyframes fpf-spin { to { transform: rotate(360deg) } }
@keyframes fpf-push { 0%, 100% { transform: none } 50% { transform: translateX(5px) } }
@keyframes fpf-swell { 0%, 100% { transform: none } 50% { transform: scale(1.16) } }
@keyframes fpf-pop { 0% { transform: none } 30% { transform: scale(1.14, .86) } 55% { transform: scale(.92, 1.08) } 75% { transform: scale(1.04, .97) } 100% { transform: none } }
@media (prefers-reduced-motion: reduce) { .fp-flowerbot * { animation: none !important } }

/* «Чет слишком он по отступам много» (keks, 2026-11-08): a tighter chat. Less air between turns; the user's copy/edit
   row overlays the space under the bubble instead of reserving a full line. On wide pages the composer stays one row
   (the GitHub chip had wrapped alone to the top right). */
html body .fp-app.fp-app .fp-thread.fp-thread { gap: 14px !important; padding-top: 12px !important }
html body .fp-app.fp-app .fp-thread .kc-ai-msg { gap: 8px !important }
html body .fp-app.fp-app .fp-thread > .group\/user { position: relative; padding-bottom: 0 !important }
html body .fp-app.fp-app .fp-thread > .group\/user > :last-child:not(:first-child):not(.kc-user-bubble) { position: absolute; right: 0; top: 100%; margin-top: 2px; z-index: 1 }
html body .fp-app.fp-app .fp-thread > .group\/user + .kc-ai-msg { margin-top: 26px }
@media (min-width: 1181px) {
  html body .fp-app.fp-app .fp-composer .nc-prism.nc-prism { flex-wrap: nowrap !important }
  html body .fp-app.fp-app .fp-composer .kl-c-input.kl-c-input { flex: 1 1 0 !important; min-width: 120px !important }
  html body .fp-app.fp-app .fp-composer .fp-repo > button { max-width: 170px !important }
  html body .fp-app.fp-app .fp-composer .nc-prism.nc-prism:has(.kl-c-tiles) { flex-wrap: wrap !important }
}

/* keks, 2026-11-08: «Отступ сделай больше между чатом и окном юзера» — air between the last message and the composer. */
html body .fp-app.fp-app .fp-thread.fp-thread { padding-bottom: 48px !important }

/* keks, 2026-11-08 (photo 4): segmented switches everywhere — a light grey capsule, the picked tab white with a soft shadow. */
html body .fp-app .fp-seg { background: #f1f1f2; box-shadow: inset 0 0 0 1px rgba(0,0,0,.03) }
html body .fp-app .fp-seg-tab { color: #71717a; background: transparent; box-shadow: none }
html body .fp-app .fp-seg-tab:hover { color: #18181b }
html body .fp-app .fp-seg-tab.is-on { background: #fff; color: #0d0d0d; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06) }
html.fp-dark body .fp-app .fp-seg { background: #232325; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) }
html.fp-dark body .fp-app .fp-seg-tab { color: #a1a1aa }
html.fp-dark body .fp-app .fp-seg-tab:hover { color: #f4f4f5 }
html.fp-dark body .fp-app .fp-seg-tab.is-on { background: #3a3a3d; color: #f4f4f5; box-shadow: 0 1px 2px rgba(0,0,0,.4) }

/* keks, 2026-11-08: «поменяй дизайн отображения токенов» — the balance in the top bar as a flat grey capsule. */
html body .fp-app .kc-topbar .fp-balance.fp-balance { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 12px !important; border-radius: 12px !important; background: #f1f1f2 !important; color: #0d0d0d !important; font-size: 13.5px; border: 0 !important; box-shadow: none !important; transition: background-color var(--fp-t-hover) var(--fp-ease)}
html body .fp-app .kc-topbar .fp-balance.fp-balance:hover, html body .fp-app .kc-topbar .fp-balance.fp-balance[data-state=open] { background: #e8e8ea !important }
html body .fp-app .fp-balance .fp-balance-ic { width: 15px; height: 15px; color: #52525b }
html body .fp-app .fp-balance .fp-balance-n { font-weight: 600; letter-spacing: -.01em }
html body .fp-app .fp-balance .fp-balance-l { color: #71717a }
html.fp-dark body .fp-app .kc-topbar .fp-balance.fp-balance { background: #232325 !important; color: #f4f4f5 !important }
html.fp-dark body .fp-app .kc-topbar .fp-balance.fp-balance:hover, html.fp-dark body .fp-app .kc-topbar .fp-balance.fp-balance[data-state=open] { background: #2c2c2f !important }
html.fp-dark body .fp-app .fp-balance .fp-balance-ic { color: #a1a1aa }

/* keks, 2026-11-08: «правый блок печально выглядит скругли его» — Files/Changes as a rounded card inside the page. */
html body .fp-app .fp-rpanel { margin: 8px 8px 8px 0; border: 1px solid #ececee; border-radius: 16px; background: #fafafa; overflow: hidden }
html.fp-dark body .fp-app .fp-rpanel { border-color: #2a2a2d; background: #18181a }

/* keks, 2026-11-08: «ховер на кнопку навожу - текст пропадает» — the pixel tile is hidden on freepay, so the label stays on hover. */
html body .fp-app .px-btn:hover .px-label { opacity: 1 !important }

/* keks, 2026-11-09: «когда крутишь линии кривые» — Firefox aliased the badge's edge while it turned. A transparent
   outline moves the hard edge inside the layer and will-change makes it rasterise once and filter smoothly. */
html body .aw-tilt { will-change: transform; outline: 1px solid transparent }
html body .aw-tilt .aw-card { outline: 1px solid transparent; backface-visibility: hidden; -webkit-font-smoothing: antialiased }

/* keks, 2026-11-09: «FAQ ваще переделай фулл» — the help page's answers open smoothly, the plus turns into a cross. */
html body .fp-app .fp-faq-search { transition: border-color var(--fp-t-hover) var(--fp-ease), box-shadow var(--fp-t-hover) var(--fp-ease)}
html body .fp-app .fp-faq-search:focus { border-color: #d4d4d8; box-shadow: 0 0 0 4px rgba(0,0,0,.04) }
html body .fp-app .fp-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms var(--fp-ease)}
html body .fp-app .fp-faq-a > div { overflow: hidden; opacity: 0; transition: opacity var(--fp-t-hover) var(--fp-ease)}
html body .fp-app .fp-faq-row[data-open] .fp-faq-a { grid-template-rows: 1fr }
html body .fp-app .fp-faq-row[data-open] .fp-faq-a > div { opacity: 1 }
html body .fp-app .fp-faq-ic { transition: transform 220ms var(--fp-ease), color var(--fp-t-hover) var(--fp-ease)}
html body .fp-app .fp-faq-row[data-open] .fp-faq-ic { transform: rotate(45deg); color: #0d0d0d }
html body .fp-app .fp-faq-row > button:hover .fp-faq-ic { color: #0d0d0d }

/* keks, 2026-11-09: «тут линии некрасивые» — connectors, plugins and skills as separate rounded cards in a grid,
   no hairlines between them. */
html body .fp-app .fp-ext-list.fp-ext-list { display: grid; grid-template-columns: 1fr; gap: 10px; background: none !important; border-radius: 0; overflow: visible; box-shadow: none !important; max-width: none }
@media (min-width: 768px) { html body .fp-app .fp-ext-list.fp-ext-list { grid-template-columns: 1fr 1fr } }
@media (min-width: 1400px) { html body .fp-app .fp-ext-list.fp-ext-list { grid-template-columns: 1fr 1fr 1fr } }
html body .fp-app .fp-ext-list .fp-ext-row.fp-ext-row { border: 1px solid #ececee !important; border-left: 1px solid #ececee !important; border-radius: 16px; background: #fff; box-shadow: none !important; padding: 14px 16px }
html body .fp-app .fp-ext-list .fp-ext-row.fp-ext-row:hover { background: #fff; border-color: #dcdce0 !important; transform: translateY(-2px); box-shadow: 0 10px 28px -16px rgba(0,0,0,.22) !important }
html.fp-dark body .fp-app .fp-ext-list .fp-ext-row.fp-ext-row { background: #1a1a1c; border-color: #2a2a2d !important }

/* keks, 2026-11-09: «Неприятная анимация при нажатии» on the balance — no colour flash, a short press and a soft popover. */
html body .fp-app .kc-topbar .fp-balance.fp-balance { transition: background-color var(--fp-t-hover) var(--fp-ease), transform var(--fp-t-press) var(--fp-ease)}

/* keks, 2026-11-09: «моб версия… табы всегда в 1 ряд без переносов» — every switch scrolls sideways instead of wrapping. */
html body .fp-app .fp-seg { flex-wrap: nowrap !important; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch }
html body .fp-app .fp-seg::-webkit-scrollbar { display: none }
html body .fp-app .fp-seg > * { flex-shrink: 0 }
@media (max-width: 767px) {
  html body .fp-app [role="tablist"], html body .fp-app .kc-settings-nav { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none }
  html body .fp-app [role="tablist"]::-webkit-scrollbar { display: none }
  html body .fp-app [role="tablist"] > * { flex-shrink: 0 }
}

/* keks, 2026-11-09: «Объединение… слишком серое» — a white field with a hairline and a black button. */
html body .fp-app.fp-app.fp-app .fp-main.fp-main.fp-main .fp-merge .fp-merge-input.fp-merge-input { background: #fff !important; box-shadow: none !important; border: 1px solid #e4e4e7; --tw-ring-shadow: 0 0 #0000 !important }
html body .fp-app .fp-merge .fp-merge-input:focus { border-color: #a1a1aa; box-shadow: 0 0 0 4px rgba(0,0,0,.04) !important }
html body .fp-app .fp-merge button[type="submit"] { background: #0d0d0d !important; color: #fff !important }
html body .fp-app .fp-merge button[type="submit"]:disabled { opacity: .35 }
html.fp-dark body .fp-app.fp-app.fp-app .fp-main.fp-main.fp-main .fp-merge .fp-merge-input.fp-merge-input { background: #18181a !important; border-color: #2a2a2d }

/* keks, 2026-11-09: «История… выровняй» — one toolbar row, plain model names, figures in tabular digits, the time grey. */
html body .fp-app .fp-history table td, html body .fp-app .fp-history table th { padding-left: 12px; padding-right: 12px; vertical-align: middle }
html body .fp-app .fp-history table td:first-child, html body .fp-app .fp-history table th:first-child { padding-left: 0 }
html body .fp-app .fp-history table td:last-child, html body .fp-app .fp-history table th:last-child { padding-right: 0 }
html body .fp-app .fp-history table td { font-variant-numeric: tabular-nums; font-size: 14px }
html body .fp-app.fp-app .fp-main .fp-history table td.font-mono.font-mono { font-family: var(--font-sans, Inter, system-ui, sans-serif) !important; letter-spacing: 0 !important; font-feature-settings: normal }
html body .fp-app .fp-history table td:first-child { color: #71717a }
html body .fp-app .fp-history table th { font-size: 12.5px; font-weight: 500; color: #71717a }

/* keks, 2026-11-09: «оно ж должно тоже скругленно быть» — the site preview beside the chat is a rounded card too. */
@media (min-width: 1024px) {
  html body .fp-app .kl-artifact-panel.lg\:relative { margin: 8px 8px 8px 0; border: 1px solid #ececee !important; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.03) }
  html.fp-dark body .fp-app .kl-artifact-panel.lg\:relative { border-color: #2a2a2d !important }
}

/* keks, 2026-11-09: «Сделай более красиво страницу Дашборд». Ink greys instead of blue, an even grid behind the
   heatmap, white stat tiles, the balance's 30-day bars quiet when empty. */
html body .fp-app .fp-main[data-page="overview"] .kc-heat[data-l="0"] { background: #f4f4f5 !important; background-image: none !important }
html body .fp-app .fp-main[data-page="overview"] .kc-heat[data-l="1"] { background: #d4d4d8 !important }
html body .fp-app .fp-main[data-page="overview"] .kc-heat[data-l="2"] { background: #a1a1aa !important }
html body .fp-app .fp-main[data-page="overview"] .kc-heat[data-l="3"] { background: #52525b !important }
html body .fp-app .fp-main[data-page="overview"] .kc-heat[data-l="4"] { background: #0d0d0d !important; box-shadow: none !important }
html body .fp-app.fp-app.fp-app .fp-main.fp-main.fp-main[data-page="overview"] .kc-heat-stat.kc-heat-stat { background: #fff !important; border-color: #ececee !important; border-radius: 14px }
html body .fp-app .fp-main[data-page="overview"] .kc-viz-hero .kc-spark { background: #0d0d0d !important; opacity: .85 }
html body .fp-app .fp-main[data-page="overview"] .kc-viz-hero .kc-spark[data-empty] { background: #ececee !important; opacity: 1; height: 4px !important }
html body .fp-app .fp-main[data-page="overview"] .kc-viz-hero .kc-spark-hot { opacity: 1 }
html body .fp-app .fp-main[data-page="overview"] .kc-box { border-color: #ececee !important; border-radius: 20px !important }
html body .fp-app .fp-main[data-page="overview"] .kc-box:hover { border-color: #e0e0e3 !important }
html.fp-dark body .fp-app .fp-main[data-page="overview"] .kc-heat[data-l="0"] { background: #222225 !important }
html.fp-dark body .fp-app .fp-main[data-page="overview"] .kc-heat[data-l="4"] { background: #f4f4f5 !important }
html.fp-dark body .fp-app .fp-main[data-page="overview"] .kc-heat-stat { background: #1a1a1c !important; border-color: #2a2a2d !important }
html body .fp-app .fp-ext-list > .fp-ext-row:only-child { grid-column: auto }
html body .fp-app .fp-ext-row > span.shrink-0.font-medium { background: #f1f1f2 !important; color: #0d0d0d !important }
html body .fp-app .fp-ext-row:hover > span.shrink-0.font-medium { background: #0d0d0d !important; color: #fff !important }
html body .fp-app.fp-app.fp-app .fp-main.fp-main.fp-main .fp-merge-steps li { background: #f7f7f8 !important }
html body .fp-app .fp-main[data-page="overview"] .kc-viz-hero .kc-spark:not([data-empty]) { max-height: 70% }

/* keks, 2026-11-09 (Library): the full-screen photo/video viewer keeps its dark scrim; the white dialog rule above hid
 * its top bar (Open chat, Download, Close: white on white). */
body:has(.fp-app) .kl-lightbox[role="dialog"] { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important }

/* ── Подключение without shadows (keks, 2026-11-09: «Убрать тени»). Scoped to the page by its key strip. ── */
html body .fp-app .kl-page:has(.fp-keylist) .kc-logo { background: #f4f4f5 !important; box-shadow: none !important }
html.fp-dark body .fp-app .kl-page:has(.fp-keylist) .kc-logo { background: #27272a !important }
html body .fp-app .kl-page:has(.fp-keylist) .fp-seg { box-shadow: none }
html body .fp-app .kl-page:has(.fp-keylist) .fp-seg-tab.is-on { box-shadow: inset 0 0 0 1px #e4e4e7 }
html.fp-dark body .fp-app .kl-page:has(.fp-keylist) .fp-seg-tab.is-on { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) }
html body .fp-app .kl-page:has(.fp-keylist) .kc-pick, html body .fp-app .kl-page:has(.fp-keylist) .kc-pick:hover { box-shadow: none !important; transform: none !important }
html body .fp-app.fp-app .fp-main .kl-page:has(.fp-keylist) button.kc-pick.kc-pick.kc-pick[aria-pressed="true"] { border-color: #18181b !important; box-shadow: none !important }
html.fp-dark body .fp-app.fp-app .fp-main .kl-page:has(.fp-keylist) button.kc-pick.kc-pick.kc-pick[aria-pressed="true"] { border-color: #f4f4f5 !important }
html body .fp-app .kl-page:has(.fp-keylist) :is(.shadow-sm, .shadow, .shadow-md) { box-shadow: none !important }

/* ── Settings in a large window over the blurred cabinet (keks, 2026-11-09: «Сделай чтобы настройки вот так
 * открывались в таком окне»). Grey frame, search and grouped sections on the left, a white sheet on the right with
 * label/control rows in quiet grey blocks. Portalled to <body>, so every rule here is scoped by .fp-set. ── */
body:has(.fp-app) .fp-set-scrim { position: fixed; inset: 0; z-index: 50; background: rgb(20 20 24 / 0.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fp-set-fade 180ms ease both }
body:has(.fp-app) .fp-set[role="dialog"] {
  position: fixed; z-index: 50; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1180px, calc(100vw - 48px)); height: min(880px, calc(100dvh - 48px));
  display: flex; padding: 8px; outline: none; overflow: hidden;
  background: #f1f1f3 !important; border: 0 !important; border-radius: 22px !important; box-shadow: none !important;
  font-family: var(--fp-notion); color: #19191b; animation: fp-set-in 220ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes fp-set-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes fp-set-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(0.99) } to { opacity: 1; transform: translate(-50%, -50%) } }
@media (prefers-reduced-motion: reduce) { body:has(.fp-app) :is(.fp-set-scrim, .fp-set[role="dialog"]) { animation: none } }
.fp-set .fp-set-shell { position: relative; display: flex; width: 100%; height: 100%; min-height: 0 }
.fp-set .fp-set-side { display: flex; flex-direction: column; width: 272px; flex-shrink: 0; padding: 4px 10px 8px 4px; min-height: 0 }
.fp-set .fp-set-search { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 12px; background: #fff; color: #8a8a91; cursor: text }
.fp-set .fp-set-search svg { width: 17px; height: 17px; flex-shrink: 0 }
body:has(.fp-app) .fp-set .fp-set-search input { flex: 1; min-width: 0; height: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; padding: 0; font-size: 14.5px; color: #19191b }
.fp-set .fp-set-search input::placeholder { color: #8a8a91 }
.fp-set .fp-set-search input::-webkit-search-cancel-button { display: none }
.fp-set .fp-set-nav { flex: 1; min-height: 0; overflow-y: auto; margin-top: 6px; scrollbar-width: thin }
.fp-set .fp-set-group-t { padding: 18px 12px 6px; font-size: 13px; color: #8a8a91 }
.fp-set .fp-set-item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 12px; font-size: 14.5px; color: #2a2a2e; transition: background-color var(--fp-t-hover) var(--fp-ease)}
.fp-set .fp-set-item svg { width: 19px; height: 19px; flex-shrink: 0; color: #3a3a3f }
.fp-set .fp-set-item:hover { background: rgb(0 0 0 / 0.04) }
.fp-set .fp-set-item[aria-current="page"] { background: #fff; color: #19191b; font-weight: 500 }
.fp-set .fp-set-none { padding: 18px 12px; font-size: 14px; color: #8a8a91 }
.fp-set .fp-set-panel { flex: 1; min-width: 0; overflow-y: auto; background: #fff; border-radius: 16px }
.fp-set .fp-set-body { max-width: 760px; margin: 0 auto; padding: 52px 48px 56px }
.fp-set .fp-set-h { margin: 0 0 22px; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: #19191b }
.fp-set .fp-set-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #55555c; transition: background-color var(--fp-t-hover) var(--fp-ease), color var(--fp-t-hover) var(--fp-ease)}
.fp-set .fp-set-x:hover { background: #f1f1f3; color: #19191b }
.fp-set .fp-set-x svg { width: 18px; height: 18px }
/* Blocks: soft grey, rows with hairlines between them, no shadows. */
.fp-set .kc-card, .fp-set .kc-card.kc-box { background: #f7f7f8 !important; border: 0 !important; border-radius: 16px !important; box-shadow: none !important; padding: 16px 20px 14px !important; margin: 0 0 16px }
.fp-set .kc-card > div:first-child > h2:first-child { font-size: 15px; font-weight: 600 !important; color: #19191b }
.fp-set .fp-set-h { font-weight: 600 !important }
.fp-set .kc-card :is(h2, h3) { font-weight: 600 !important; color: #19191b }
html.fp-dark .fp-set .kc-card :is(h2, h3) { color: #f2f2f4 }
.fp-set .kc-card h3 { color: #19191b }
.fp-set .kc-card .border-b, .fp-set .kc-card .border-t, .fp-set .kc-card .border-border { border-color: #ebebee !important }
.fp-set .kc-cell { background: #fff; box-shadow: none; border-radius: 12px }
.fp-set .kc-set { display: block }
.fp-set .text-muted-foreground { color: #7d7d85 }
.fp-set div:has(> .kc-opt) { gap: 0 !important }
.fp-set .kc-opt { border: 0 !important; background: transparent !important; border-radius: 0 !important; padding: 12px 0 !important; color: #7d7d85 }
.fp-set .kc-opt + .kc-opt { box-shadow: inset 0 1px 0 #ebebee }
.fp-set .kc-opt b { color: #19191b; font-weight: 600 }
.fp-set .kc-opt.is-on b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: #19191b; vertical-align: 2px }
body:has(.fp-app) .fp-set .kc-card input:not([type="checkbox"]):not([type="radio"]), body:has(.fp-app) .fp-set .kc-card textarea { background: #fff !important; border-color: #e6e6ea !important; border-radius: 10px }
.fp-set .kc-card button.border-border-strong.bg-transparent { background: #fff; border-color: #e6e6ea; border-radius: 10px; box-shadow: none }
.fp-set .kc-card button.border-border-strong.bg-transparent:hover { border-color: #c9c9cf }
/* Segmented choices (Seg in console/ui.tsx): the same grey capsule as in the cabinet, the chosen one white. */
.fp-set .fp-seg { background: #ececef; box-shadow: none }
.fp-set .fp-seg-tab { color: #71717a; background: transparent; box-shadow: none }
.fp-set .fp-seg-tab:hover { color: #18181b }
.fp-set .fp-seg-tab.is-on { background: #fff; color: #0d0d0d; box-shadow: 0 1px 2px rgba(0,0,0,.06) }

/* Focus: a quiet grey ring drawn inside the control, so the edge of the menu or of a block never cuts it
 * (keks, 2026-11-09: «кнопки обрезаются»), instead of the browser's blue outline. */
.fp-set :is(a, button, [role="button"], [tabindex]):focus-visible { outline: none; box-shadow: inset 0 0 0 2px #b4b4bb }
body:has(.fp-app) .fp-set .kc-card :is(input, textarea):focus-visible { outline: none; border-color: #8a8a91 !important }
html.fp-dark .fp-set :is(a, button, [role="button"], [tabindex]):focus-visible { box-shadow: inset 0 0 0 2px #6b6b72 }
/* Menu items take no ring at all: the window focuses one on open, and a ring there reads as a stray frame. */
.fp-set .fp-set-item:focus-visible, html.fp-dark .fp-set .fp-set-item:focus-visible { box-shadow: none }
.fp-set .fp-set-item:not([aria-current="page"]):focus-visible { background: rgb(0 0 0 / 0.04) }
html.fp-dark .fp-set .fp-set-item:not([aria-current="page"]):focus-visible { background: rgb(255 255 255 / 0.05) }
.fp-set .fp-set-bar, .fp-set .fp-set-go { display: none }
/* Phone (keks, 2026-11-09: «на телефоне ужасно криво реализовано»): the whole screen and two screens instead of a
 * squeezed copy of the desktop. First the list of sections (white blocks of rows with a chevron), then one section
 * with a way back in the bar. The page is grey and the blocks white, so nothing is boxed twice. */
@media (max-width: 767px) {
  body:has(.fp-app) .fp-set[role="dialog"] { left: 0; top: 0; transform: none; width: 100vw; height: 100dvh; padding: 0; border-radius: 0 !important; animation: fp-set-fade 160ms ease both }
  .fp-set .fp-set-shell { flex-direction: column }
  .fp-set .fp-set-bar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; height: 52px; padding: 0 56px; padding-top: env(safe-area-inset-top); box-sizing: content-box; font-size: 16px; font-weight: 600; color: #19191b }
  .fp-set .fp-set-bar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .fp-set .fp-set-back, .fp-set .fp-set-x { position: absolute; top: calc(env(safe-area-inset-top) + 4px); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #19191b }
  .fp-set .fp-set-back { left: 6px }
  .fp-set .fp-set-x { right: 6px }
  .fp-set :is(.fp-set-back, .fp-set-x) svg { width: 20px; height: 20px }
  .fp-set .fp-set-shell[data-view="list"] .fp-set-panel, .fp-set .fp-set-shell[data-view="page"] .fp-set-side { display: none }
  /* The list. */
  .fp-set .fp-set-side { flex: 1; width: 100%; padding: 4px 16px 0; min-height: 0 }
  .fp-set .fp-set-search { height: 44px; flex-shrink: 0 }
  body:has(.fp-app) .fp-set .fp-set-search input { font-size: 16px }
  .fp-set .fp-set-nav { margin-top: 0; padding-bottom: calc(env(safe-area-inset-bottom) + 24px); scrollbar-width: none }
  .fp-set .fp-set-nav::-webkit-scrollbar { display: none }
  .fp-set .fp-set-group-t { padding: 22px 4px 8px }
  .fp-set .fp-set-item { height: 54px; padding: 0 14px 0 16px; gap: 14px; border-radius: 0; background: #fff; font-size: 16px; font-weight: 400 }
  .fp-set .fp-set-item:hover, .fp-set .fp-set-item[aria-current="page"] { background: #fff; font-weight: 400 }
  .fp-set .fp-set-item:active { background: #f7f7f8 }
  .fp-set .fp-set-item svg { width: 21px; height: 21px }
  .fp-set .fp-set-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .fp-set .fp-set-item .fp-set-go { display: block; width: 15px; height: 15px; color: #b9b9c0 }
  .fp-set .fp-set-group .fp-set-item:first-of-type { border-radius: 16px 16px 0 0 }
  .fp-set .fp-set-group .fp-set-item:last-of-type { border-radius: 0 0 16px 16px }
  .fp-set .fp-set-group .fp-set-item:first-of-type:last-of-type { border-radius: 16px }
  .fp-set .fp-set-group .fp-set-item + .fp-set-item { box-shadow: inset 0 1px 0 #ececef }
  .fp-set .fp-set-item:not([aria-current="page"]):focus-visible { background: #fff }
  .fp-set .fp-set-group .fp-set-item + .fp-set-item:focus-visible { box-shadow: inset 0 1px 0 #ececef }
  /* One section. */
  .fp-set .fp-set-panel { background: transparent; border-radius: 0 }
  .fp-set .fp-set-body { padding: 4px 16px calc(env(safe-area-inset-bottom) + 32px) }
  .fp-set .fp-set-h { display: none }
  .fp-set .kc-card, .fp-set .kc-card.kc-box { background: #fff !important; padding: 14px 16px 12px !important; margin-bottom: 12px }
  .fp-set .kc-cell { background: #f7f7f8 }
  body:has(.fp-app) .fp-set .kc-card input:not([type="checkbox"]):not([type="radio"]), body:has(.fp-app) .fp-set .kc-card textarea { font-size: 16px }
}

/* Dark theme (html.fp-dark). */
html.fp-dark body:has(.fp-app) .fp-set-scrim { background: rgb(0 0 0 / 0.45) }
html.fp-dark body:has(.fp-app) .fp-set[role="dialog"] { background: #18181a !important; color: #f2f2f4 }
html.fp-dark .fp-set :is(.fp-set-search, .fp-set-item[aria-current="page"]) { background: #262629 }
html.fp-dark body:has(.fp-app) .fp-set .fp-set-search input, html.fp-dark .fp-set :is(.fp-set-item, .fp-set-item[aria-current="page"], .fp-set-h, .kc-card h3, .kc-opt b) { color: #f2f2f4 }
html.fp-dark .fp-set .fp-set-item svg { color: #d4d4d8 }
html.fp-dark .fp-set .fp-set-item:hover { background: rgb(255 255 255 / 0.05) }
html.fp-dark .fp-set .fp-set-panel { background: #212123 }
html.fp-dark .fp-set .fp-set-x { color: #b4b4ba }
html.fp-dark .fp-set .fp-set-x:hover { background: #2c2c2f; color: #fff }
html.fp-dark .fp-set .kc-card, html.fp-dark .fp-set .kc-card.kc-box { background: #2a2a2d !important }
html.fp-dark .fp-set .kc-card > div:first-child > h2 { color: #f2f2f4 }
html.fp-dark .fp-set .kc-card :is(.border-b, .border-t, .border-border) { border-color: #353539 !important }
html.fp-dark .fp-set .kc-opt + .kc-opt { box-shadow: inset 0 1px 0 #353539 }
html.fp-dark .fp-set .kc-opt.is-on b::after { background: #f2f2f4 }
html.fp-dark .fp-set .kc-cell { background: #212123 }
html.fp-dark body:has(.fp-app) .fp-set .kc-card :is(input:not([type="checkbox"]):not([type="radio"]), textarea) { background: #212123 !important; border-color: #3a3a3e !important }
html.fp-dark .fp-set .kc-card button.border-border-strong.bg-transparent { background: #212123; border-color: #3a3a3e }
html.fp-dark .fp-set .fp-seg { background: #212123 }
html.fp-dark .fp-set .fp-seg-tab { color: #a1a1aa }
html.fp-dark .fp-set .fp-seg-tab.is-on { background: #3a3a3d; color: #f4f4f5 }
@media (max-width: 767px) {
  html.fp-dark .fp-set .fp-set-bar, html.fp-dark .fp-set :is(.fp-set-back, .fp-set-x) { color: #f2f2f4 }
  html.fp-dark .fp-set .fp-set-item, html.fp-dark .fp-set .fp-set-item:hover, html.fp-dark .fp-set .fp-set-item[aria-current="page"] { background: #262629 }
  html.fp-dark .fp-set .fp-set-item:active { background: #2c2c2f }
  html.fp-dark .fp-set .fp-set-group .fp-set-item + .fp-set-item { box-shadow: inset 0 1px 0 #353539 }
  html.fp-dark .fp-set .fp-set-item:not([aria-current="page"]):focus-visible { background: #262629 }
  html.fp-dark .fp-set .fp-set-group .fp-set-item + .fp-set-item:focus-visible { box-shadow: inset 0 1px 0 #353539 }
  html.fp-dark .fp-set .fp-set-item .fp-set-go { color: #6b6b72 }
  html.fp-dark .fp-set .fp-set-panel { background: transparent }
  html.fp-dark .fp-set .kc-card, html.fp-dark .fp-set .kc-card.kc-box { background: #262629 !important }
  html.fp-dark .fp-set .kc-cell { background: #18181a }
}
/* ── Anti-slop pass over the whole cabinet (keks, 2026-11-09: «нейрослоп дизайн убери»). ──
 * The flat look of «Подключение» (#949) on every page: no drop shadows on cards, tiles and tabs, a hairline instead.
 * The last blue (--fp-accent: link hover, active menu icon, award progress) becomes ink, as the rest of the palette;
 * the user's light-blue message (--fp-accent-soft) stays. Awards lose the decorative strap slot, the «JELLEE Награда»
 * line repeated on every card and the 001…013 serial numbers; a fresh award still shows «Новая». */
html:has(.fp-app) { --fp-accent: #18181b; --fp-lift: 0 0 0 1px #e4e4e7 }
html.fp-dark:has(.fp-app) { --fp-accent: #f4f4f5; --fp-lift: 0 0 0 1px #2a2a2d }
html body .fp-app .fp-main .kl-page :is(.shadow-sm, .shadow, .shadow-md, .shadow-lg) { box-shadow: none !important }
html body .fp-app .fp-main .fp-seg { box-shadow: none }
html body .fp-app .fp-main .fp-seg-tab.is-on { box-shadow: inset 0 0 0 1px #e4e4e7 }
html.fp-dark body .fp-app .fp-main .fp-seg-tab.is-on { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) }
html body .fp-app .fp-main .kl-page :is(.kc-pick, .kc-pick:hover) { box-shadow: none !important; transform: none !important }
html body .fp-app .kl-page .aw-card .aw-slot, html body .fp-app .kl-page .aw-card .aw-no { display: none }
html body .fp-app .kl-page .aw-card .aw-head:not(.aw-new) { visibility: hidden }
html body .fp-app .kl-page .aw-card .aw-head.aw-new > span:first-child { visibility: hidden }
html body .fp-app .kl-page .aw-card:not(.aw-locked):hover { box-shadow: none }

/* keks, 2026-11-09: «не ровно» (История) — the filter row's selects and «Скачать CSV» are one height and one shape. */
html body .fp-app.fp-app .fp-main .fp-history .mb-3\.5 select { height: 36px !important; min-height: 36px; border-radius: 10px !important; font-size: 14px; padding-top: 0; padding-bottom: 0 }
html body .fp-app.fp-app .fp-main .fp-history .mb-3\.5 > button { height: 36px !important; border-radius: 10px !important; padding: 0 14px; border: 1px solid #e4e4e7 !important; box-shadow: none !important; font-size: 14px }
html.fp-dark body .fp-app.fp-app .fp-main .fp-history .mb-3\.5 > button { border-color: #2a2a2d !important }
/* keks, 2026-11-09: «стрелки поплыли» (Роутинг) — a model node is as tall as the kind node beside it, so the dashed link is straight. */
html body .fp-app .kc-flow-node:has(> select) { min-height: 63px !important; display: flex; align-items: center }
/* keks, 2026-11-09 (header variant 1, «Одна капсула»): context, tokens and «Файлы» share one grey capsule like the switches; the open one is a white tab. */
html body .fp-app .kc-topbar .fp-hcap { display: inline-flex; align-items: center; height: 36px; padding: 2px; gap: 0; border-radius: 12px; background: #f1f1f2; flex-shrink: 0 }
html body .fp-app .kc-topbar .fp-hcap.fp-hcap.fp-hcap > button { position: relative; align-items: center; gap: 7px; height: 32px !important; width: auto !important; min-width: 32px; margin: 0 0 0 1px; padding: 0 11px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important; color: #3f3f46 !important; font-size: 13px !important; justify-content: center; transition: background-color var(--fp-t-hover) var(--fp-ease), color var(--fp-t-hover) var(--fp-ease)}
html body .fp-app .kc-topbar .fp-hcap.fp-hcap.fp-hcap > button:first-child { margin-left: 0 }
html body .fp-app .kc-topbar .fp-hcap.fp-hcap.fp-hcap > button + button::before { content: ""; position: absolute; left: -1px; top: 9px; bottom: 9px; width: 1px; background: #d4d4d8; pointer-events: none; transition: opacity var(--fp-t-hover) var(--fp-ease)}
html body .fp-app .kc-topbar .fp-hcap.fp-hcap.fp-hcap > button:hover { background: rgba(0,0,0,.04) !important; color: #0d0d0d !important }
html body .fp-app .kc-topbar .fp-hcap.fp-hcap.fp-hcap > button:is([data-state=open], [data-on]) { background: #fff !important; color: #0d0d0d !important; box-shadow: inset 0 0 0 1px #e4e4e7 !important }
html body .fp-app .kc-topbar .fp-hcap.fp-hcap.fp-hcap > button:is(:hover, [data-state=open], [data-on])::before,
html body .fp-app .kc-topbar .fp-hcap.fp-hcap.fp-hcap > button:is(:hover, [data-state=open], [data-on]) + button::before { opacity: 0 }
html body .fp-app .kc-topbar .fp-hcap.fp-hcap.fp-hcap > button svg { color: #52525b }
html body .fp-app .kc-topbar .fp-hcap .fp-balance-ic { width: 15px; height: 15px }
html body .fp-app .kc-topbar .fp-hcap.fp-hcap.fp-hcap > button:has(> svg:only-child) { padding: 0 9px !important }
html.fp-dark body .fp-app .kc-topbar .fp-hcap { background: #232325 }
html.fp-dark body .fp-app .kc-topbar .fp-hcap.fp-hcap.fp-hcap > button { color: #d4d4d8 !important }
html.fp-dark body .fp-app .kc-topbar .fp-hcap.fp-hcap.fp-hcap > button svg { color: #a1a1aa }
html.fp-dark body .fp-app .kc-topbar .fp-hcap.fp-hcap.fp-hcap > button::before { background: #3f3f46 }
html.fp-dark body .fp-app .kc-topbar .fp-hcap.fp-hcap.fp-hcap > button:hover { background: rgba(255,255,255,.05) !important; color: #f4f4f5 !important }
html.fp-dark body .fp-app .kc-topbar .fp-hcap.fp-hcap.fp-hcap > button:is([data-state=open], [data-on]) { background: #3a3a3d !important; color: #f4f4f5 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important }
@media (max-width: 640px) { html body .fp-app .kc-topbar .fp-hcap.fp-hcap.fp-hcap > button { padding: 0 9px !important } }

/* «Треды» (keks, 2026-11-09, app.hoplite.sh/threads as the reference; console/pages/Threads.tsx): grey group headers,
   plain rows that grey on hover, a grey search pill. Own classes: the generic bg-foreground/[0.0x] rule above would
   paint every row. */
body:has(.fp-app) .fp-th-group { background: #f4f4f5 }
body:has(.fp-app) .fp-th-row { background: transparent }
body:has(.fp-app) .fp-th-row:hover { background: #f4f4f5 }
body:has(.fp-app) .fp-th-pr { background: #f4f4f5 }
body:has(.fp-app) .fp-th-row:hover .fp-th-pr { background: #e9e9ec }
body:has(.fp-app) .fp-th-search { background: #f4f4f5 }
html:not(.fp-dark) body .fp-app.fp-app .kl-page .fp-th-search input:not([type="checkbox"]):not([type="radio"]), html body .fp-app.fp-app .fp-th-search input { -webkit-appearance: none !important; appearance: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; height: 100% !important; outline: none !important }
html.fp-dark body:has(.fp-app) :is(.fp-th-group, .fp-th-row:hover, .fp-th-pr, .fp-th-search) { background: #212123 }
html.fp-dark body .fp-app.fp-app .kl-page .fp-th-search input { color: #f2f2f4 !important }

/* ═══ Threads in the reference's look (keks, 2026-11-09, «хочу дизайн как у них»: four screenshots of an agent app) ═══
 * Layout, density and patterns follow the reference; the brand, the colours and the dotted pictures are JELLEE's own
 * (scripts/make-freepay-dither.mjs). Light and dark. ══════════════════════════════════════════════════════════════════ */

/* State glyphs drawn in dots (features/projects/fpThreads.tsx FpStateIcon). */
.fp-dot-state { display: block; overflow: visible }
.fp-dot-state.is-working circle { fill: #3b7bf6; animation: fp-dot-run .8s linear infinite }
.fp-dot-state.is-waiting circle { fill: #e2920c }
.fp-dot-state.is-waiting { animation: fp-dot-breathe 2.4s ease-in-out infinite }
.fp-dot-state.is-done circle { fill: #2fa457 }
html.fp-dark .fp-dot-state.is-working circle { fill: #7ea6ff }
html.fp-dark .fp-dot-state.is-waiting circle { fill: #f2b13f }
html.fp-dark .fp-dot-state.is-done circle { fill: #5cc97f }
@keyframes fp-dot-run { 0% { opacity: 1 } 100% { opacity: .22 } }
@keyframes fp-dot-breathe { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
@media (prefers-reduced-motion: reduce) { .fp-dot-state circle, .fp-dot-state { animation: none !important } }

/* Left menu: «Новый тред», the sections, a rule, then the threads as roomy rows with their glyph and time; the open one
   is a white card. */
html body .fp-app.fp-app .fp-side-chats.fp-side-chats { margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid #e4e4e7 !important }
html.fp-dark body .fp-app.fp-app .fp-side-chats.fp-side-chats { border-top-color: #2a2a2d !important }
html body .fp-app.fp-app .fp-side-chats .fp-chat-row:not(.pl-8) { padding-left: 10px !important }
html body .fp-app.fp-app .fp-side-chats .fp-chat-row { height: 40px !important; border-radius: 10px !important; font-size: 14.5px !important; color: #18181b !important; background: transparent !important; box-shadow: none !important }
html body .fp-app.fp-app .fp-side-chats .fp-chat-row > button { gap: 12px !important }
html body .fp-app.fp-app .fp-side-chats .fp-chat-row:hover { background: rgb(0 0 0 / 0.045) !important }
html:not(.fp-dark) body .fp-app.fp-app .fp-side-chats .fp-chat-row.is-active { background: #fff !important; box-shadow: 0 1px 2px rgb(16 24 40 / 0.07), 0 0 0 1px rgb(16 24 40 / 0.04) !important }
html.fp-dark body .fp-app.fp-app .fp-side-chats .fp-chat-row { color: #ececec !important }
html.fp-dark body .fp-app.fp-app .fp-side-chats .fp-chat-row:hover, html.fp-dark body .fp-app.fp-app .fp-side-chats .fp-chat-row.is-active { background: #262628 !important; box-shadow: none !important }
html body .fp-app.fp-app .fp-side-chats .fp-chat-row > span.tabular-nums { font-size: 12.5px !important; color: #8a8a93 !important; padding-right: 6px }

/* Top bar: «Треды / ⁘ title» in the reference's quiet size (an older rule hid every icon in the crumbs). */
html body .fp-app.fp-app .fp-crumbs > svg.fp-dot-state { display: block !important }
html body .fp-app.fp-app .fp-crumbs.fp-crumbs { font-size: 15px !important; font-weight: 450 !important; letter-spacing: -0.005em !important }
html body .fp-app.fp-app .fp-crumbs .fp-crumb-link { color: #71717a !important; font-weight: 400 }
html body .fp-app.fp-app .fp-crumbs .fp-crumb-link:hover { color: #18181b !important }
html.fp-dark body .fp-app.fp-app .fp-crumbs .fp-crumb-link { color: #a1a1aa !important }
html.fp-dark body .fp-app.fp-app .fp-crumbs .fp-crumb-link:hover { color: #f4f4f5 !important }

/* An answer: «Работал 12 с» above it instead of an avatar, and a step line while it works. */
html body .fp-app.fp-app .fp-thread .kc-ai-msg > .fp-worked, html body .fp-app.fp-app .fp-thread .kc-ai-msg > .fp-step { font-size: 13.5px !important; font-weight: 400 !important; color: #71717a !important; gap: 10px }
html body .fp-app.fp-app .fp-thread .kc-ai-msg > .fp-step .nc-shimmer { font-size: 14.5px !important; color: #3f3f46 }
html.fp-dark body .fp-app.fp-app .fp-thread .kc-ai-msg > :is(.fp-worked, .fp-step) { color: #a1a1aa !important }
html body .fp-app.fp-app .fp-thread .kc-ai-msg .fp-time { display: none !important }

/* Composer: two rows everywhere, as in the reference — the text on top, «+» and the model below, send on the right —
   in a softly rounded card; send and stop are rounded squares. */
html body .fp-app.fp-app .fp-composer .nc-prism.nc-prism { flex-wrap: wrap !important; border-radius: 18px !important; padding: 10px 10px 8px !important; min-height: 0 }
html body .fp-app.fp-app .fp-composer .kl-c-input.kl-c-input { order: 0 !important; flex: 1 1 100% !important; padding: 2px 8px 4px !important }
html body .fp-app.fp-app .fp-composer .kl-c-bar > button:first-of-type { order: 1 }
html body .fp-app.fp-app .fp-composer .kl-c-bar > .ml-auto { order: 3 }
html body .fp-app.fp-app .fp-composer .kl-send, html body .fp-app.fp-app .fp-composer .ml-auto > button.bg-primary { border-radius: 10px !important }

/* «Треды»: the whole width, a tinted band per state (blue in progress, amber waiting for you, green done), one line per
   thread, the PR as a small square chip, a grey dotted landscape at the bottom of the page. */
.fp-app .fp-th-page::before { content: ""; position: fixed; right: 8px; bottom: 8px; z-index: 0; width: min(1240px, calc(100vw - 290px)); aspect-ratio: 1800 / 1000; pointer-events: none; border-bottom-right-radius: 16px; opacity: .5; background: url(dither-threads.webp) right bottom / contain no-repeat }
html.fp-dark .fp-app .fp-th-page::before { opacity: .2 }
@media (max-width: 767px) { .fp-app .fp-th-page::before { right: 0; bottom: 0; width: 100vw; border-radius: 0 } }
html body .fp-app.fp-app .fp-th-group { color: #3f3f46; background: #f4f4f5 }
html body .fp-app.fp-app .fp-th-group.is-working { background: #ebf1fe; color: #2c5fd6 }
html body .fp-app.fp-app .fp-th-group.is-waiting { background: #fdf3e1; color: #9a6206 }
html body .fp-app.fp-app .fp-th-group.is-done { background: #eaf5ec; color: #2c7a43 }
html body .fp-app.fp-app .fp-th-group .fp-th-count { opacity: .7; font-weight: 400 }
html.fp-dark body .fp-app.fp-app .fp-th-group.is-working { background: rgb(62 123 250 / 0.16); color: #9bb9ff }
html.fp-dark body .fp-app.fp-app .fp-th-group.is-waiting { background: rgb(226 146 12 / 0.16); color: #f2bd5c }
html.fp-dark body .fp-app.fp-app .fp-th-group.is-done { background: rgb(47 164 87 / 0.16); color: #79d596 }
/* Hover (keks, 2026-11-09 «поменять дебильную анимацию когда навожу»): no grey slab fading in over the dots; the
   title turns blue at once and the time darkens. */
html body .fp-app.fp-app .fp-th-row, html body .fp-app.fp-app .fp-th-row:hover, html.fp-dark body .fp-app.fp-app .fp-th-row:hover { background: transparent !important; transition: none !important }
html body .fp-app.fp-app .fp-th-row > span > span:first-child { transition: none !important }
html body .fp-app.fp-app .fp-th-row:hover > span > span:first-child { color: #2c5fd6 !important }
html.fp-dark body .fp-app.fp-app .fp-th-row:hover > span > span:first-child { color: #9bb9ff !important }
html body .fp-app.fp-app .fp-th-row:hover .fp-th-time { color: #3f3f46 }
html.fp-dark body .fp-app.fp-app .fp-th-row:hover .fp-th-time { color: #d4d4d8 }
html body .fp-app.fp-app .fp-th-row:focus-visible { outline: 2px solid #3b7bf6; outline-offset: -2px }
html body .fp-app.fp-app .fp-th-group, html body .fp-app.fp-app .fp-th-group:hover { transition: none !important }
html body .fp-app.fp-app .fp-th-pr { background: rgb(0 0 0 / 0.05); color: #3f3f46 }
html body .fp-app.fp-app .fp-th-row:hover .fp-th-pr { background: rgb(0 0 0 / 0.08) }
html body .fp-app.fp-app .fp-th-pr:hover { color: #18181b; background: rgb(0 0 0 / 0.11) !important }
html.fp-dark body .fp-app.fp-app .fp-th-pr { background: rgb(255 255 255 / 0.08); color: #d4d4d8 }
html body .fp-app.fp-app .fp-th-search { background: #f4f4f5; border-radius: 10px }
html.fp-dark body .fp-app.fp-app .fp-th-search { background: #2a2a2d }

/* New thread: the composer alone in the middle of a dotted landscape, a grey tray under it with the quick starts. */
/* The dots dissolve towards every edge of the panel (keks, 2026-11-09 «сделай тут размытие»: they ran hard into the
   panel's left edge and bottom corner): a vertical and a horizontal fade, intersected. The canvas (FpDitherField.tsx)
   draws the same picture alive under the mouse; until it is ready the image stands in. */
.fp-app .fp-home-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; background: url(dither-home.webp) center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 74%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 74%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%, #000 88%, transparent 100%);
  mask-composite: intersect }
.fp-app .fp-home-art[data-ready] { background: none }
html.fp-dark .fp-app .fp-home-art { opacity: .4 }
.fp-app .fp-home > div:not(.fp-home-art) { position: relative; z-index: 1 }
html body .fp-app.fp-app .fp-home-card { border-radius: 20px; background: #f4f4f5; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 18px 40px -22px rgb(16 24 40 / 0.35) }
html.fp-dark body .fp-app.fp-app .fp-home-card { background: #232325; box-shadow: 0 0 0 1px #333336, 0 18px 40px -22px rgb(0 0 0 / 0.8) }
html body .fp-app.fp-app .fp-home-card .fp-composer { max-width: none !important }
html body .fp-app.fp-app .fp-home-card .fp-composer .nc-prism.nc-prism { border-radius: 20px !important; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.07) !important; border: 0 !important }
.fp-app .fp-home-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px }
.fp-app .fp-home-tray > div { margin-top: 0 !important }
.fp-app .fp-home-chip, html body .fp-app.fp-app .fp-home-tray > div > button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border-radius: 9px !important; font-size: 13.5px !important; color: #3f3f46; white-space: nowrap; transition: background-color var(--fp-t-hover) var(--fp-ease), color var(--fp-t-hover) var(--fp-ease)}
.fp-app .fp-home-chip svg { width: 16px; height: 16px; flex: none }
.fp-app .fp-home-chip:hover, html body .fp-app.fp-app .fp-home-tray > div > button:not([aria-pressed="true"]):hover { background: rgb(0 0 0 / 0.06) !important; color: #18181b }
html.fp-dark .fp-app .fp-home-chip { color: #d4d4d8 }
html.fp-dark .fp-app .fp-home-chip:hover { background: rgb(255 255 255 / 0.07) !important; color: #fafafa }
@media (max-width: 639px) { .fp-app .fp-home-chip > span { display: none } .fp-app .fp-home-chip { padding: 0 9px } }

/* «Треды»: the projects row (features/projects/FpProjects.tsx ThreadsProjects). */
html body .fp-app.fp-app .fp-th-chip { background: #f4f4f5; color: #3f3f46; white-space: nowrap }
html body .fp-app.fp-app .fp-th-chip:hover { background: #ebebed; color: #18181b }
html body .fp-app.fp-app .fp-th-chip.is-on { background: #18181b; color: #fff }
html body .fp-app.fp-app .fp-th-chip.is-add { background: transparent; color: #71717a; box-shadow: inset 0 0 0 1px #e4e4e7 }
html body .fp-app.fp-app .fp-th-chip.is-add:hover { color: #18181b; box-shadow: inset 0 0 0 1px #a1a1aa }
html body .fp-app.fp-app .fp-th-chip .fp-th-chip-n { opacity: .55; font-size: 12.5px }
html.fp-dark body .fp-app.fp-app .fp-th-chip { background: #2a2a2d; color: #d4d4d8 }
html.fp-dark body .fp-app.fp-app .fp-th-chip:hover { background: #333336; color: #fff }
html.fp-dark body .fp-app.fp-app .fp-th-chip.is-on { background: #f4f4f5; color: #18181b }
html.fp-dark body .fp-app.fp-app .fp-th-chip.is-add { background: transparent; color: #a1a1aa; box-shadow: inset 0 0 0 1px #3f3f46 }

/* ───────────────────────────────────────────────────────────────────────────────────────────────────────────────
   Motion (keks, 2026-11-09: «переделай абсолютно все анимации на сервисе — кривые, дерганые»). One set of durations
   and curves for the whole cabinet; only transform and opacity move (no blur, no width in a keyframe), so every
   animation runs on the compositor. What it replaced: hovers between 120 and 420 ms, menus and dialogs arriving
   through a blur filter over the glass (a repaint per frame), a menu that jumped its icons to the middle and back
   when folded, entrances of up to 900 ms with long staggers.
     press 90 ms · hover 150 ms · out 140 ms · pop (menus) 200 ms · dialog 260 ms · panel (menu, sheets) 300 ms.
   ─────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
:root {
  --fp-ease: cubic-bezier(.22, 1, .36, 1);       /* out: hovers and anything arriving, quick then soft */
  --fp-ease-in: cubic-bezier(.4, 0, 1, 1);       /* in: anything leaving */
  --fp-ease-panel: cubic-bezier(.32, .72, 0, 1); /* a panel sliding or resizing under the hand */
  --fp-t-press: 90ms;
  --fp-t-hover: 150ms;
  --fp-t-out: 140ms;
  --fp-t-pop: 200ms;
  --fp-t-dialog: 260ms;
  --fp-t-panel: 300ms;
}
/* Every hover and focus answers in the same 150 ms (Tailwind wrote 420 ms into transition-colors, the base layer 380 ms
   into every button). Zero specificity: a component's own transition still wins, a duration-* class (--tw-duration)
   is kept. Menus and dialogs are portals outside .fp-app, so this is not scoped to it. */
:where(a, button, [role="button"], [role="menuitem"], [role="option"], [role="tab"], input, textarea, select, summary, label,
  .transition, .transition-all, .transition-colors, .transition-opacity, .transition-transform, .transition-shadow, [class*="transition-["]) {
  transition-duration: var(--tw-duration, var(--fp-t-hover));
  transition-timing-function: var(--tw-ease, var(--fp-ease));
}
/* A press: the button sinks a little at once and comes back softly. Not on the menu's full-width rows. */
html body .fp-app :is(.fp-balance, .px-btn, .fp-seg-tab, .fp-chip, .fp-top-btn, .fp-empty-btn, .fp-home-chip):active:not(:disabled) { transform: scale(.97); transition: transform var(--fp-t-press) var(--fp-ease) }
html body .fp-app .fp-side-item:active { transform: none }

/* Cards that lift: one curve, transform and a shadow, no 350 ms lag. */
html body .fp-app .fp-ext-row, html body .fp-app .kc-pick, html body .fp-app .fp-lift, html body .fp-app .kc-box, html body .fp-app .kc-card, html body .fp-app .kl-lift, html body .fp-app .fp-ou-tile {
  transition: transform 220ms var(--fp-ease), box-shadow 220ms var(--fp-ease), border-color var(--fp-t-hover) var(--fp-ease), background-color var(--fp-t-hover) var(--fp-ease) !important }
html body .fp-app :is(.kc-pick, .fp-lift):hover { transform: translateY(-2px); box-shadow: 0 10px 28px -16px rgba(0,0,0,.22) }
html body .fp-app :is(.kc-pick, .fp-lift, .fp-ext-row):active { transform: translateY(0) scale(.985) !important; transition-duration: var(--fp-t-press) !important }
html body .fp-app .fp-ou-pic .fp-card-art { transition: transform 260ms var(--fp-ease) }
.kc-switch { transition: background-color 200ms var(--fp-ease) }
.kc-switch::after { transition: transform 200ms var(--fp-ease), opacity 200ms var(--fp-ease) }

/* Menus, popovers, tooltips: a small scale from where they were opened, no blur (the glass behind a filter was
   repainted every frame). Items arrive with the menu, not one after another. */
@keyframes fp-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes fp-pop-out { from { opacity: 1; transform: none } to { opacity: 0; transform: scale(.98) } }
@keyframes fp-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes fp-fade-out { from { opacity: 1 } to { opacity: 0 } }
html body .nc-popover[data-state="open"], html body .nc-popover[data-state$="-open"] { animation: fp-pop-in var(--fp-t-pop) var(--fp-ease) both !important }
html body .nc-popover[data-side="top"][data-state="open"] { animation-name: fp-pop-up !important }
@keyframes fp-pop-up { from { opacity: 0; transform: translateY(4px) scale(.97) } to { opacity: 1; transform: none } }
html body .nc-popover[data-state="closed"] { animation: fp-pop-out var(--fp-t-out) var(--fp-ease-in) both !important }
html body .nc-popover .kl-stagger { animation: none !important }

/* Dialogs: the scrim fades, the card rises 8 px and settles; it leaves faster than it came. */
@keyframes fp-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes fp-dialog-out { from { opacity: 1; transform: none } to { opacity: 0; transform: translateY(4px) scale(.99) } }
html body .nc-dialog[data-state="open"], html body .kc-ob-card[data-state="open"] { animation: fp-dialog-in var(--fp-t-dialog) var(--fp-ease) both !important }
html body .nc-dialog[data-state="closed"], html body .kc-ob-card[data-state="closed"] { animation: fp-dialog-out var(--fp-t-out) var(--fp-ease-in) both !important }
html body :is(.nc-scrim, .kc-ob-scrim)[data-state="open"] { animation: fp-fade-in var(--fp-t-dialog) var(--fp-ease) both !important }
html body :is(.nc-scrim, .kc-ob-scrim)[data-state="closed"] { animation: fp-fade-out var(--fp-t-out) var(--fp-ease-in) both !important }
/* A plain dim behind a dialog: a backdrop blur over the whole screen was re-blurred on every frame anything moved
   under it (the status dots, the dotted field), and a dialog ran at 12–16 frames a second. */
html body :is(.nc-scrim, .kc-ob-scrim) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important }
html body .kc-ob-scrim { background: rgb(0 0 0 / 0.42) }
body:has(.fp-app) .fp-set-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(20 20 24 / 0.34) }
html.fp-dark body:has(.fp-app) .fp-set-scrim { background: rgb(0 0 0 / 0.5) }
body:has(.fp-app) .fp-set-scrim { animation: fp-fade-in var(--fp-t-dialog) var(--fp-ease) both }
body:has(.fp-app) .fp-set[role="dialog"] { animation: fp-set-in var(--fp-t-dialog) var(--fp-ease) both }
@media (max-width: 767px) { body:has(.fp-app) .fp-set[role="dialog"] { animation: fp-fade-in var(--fp-t-dialog) var(--fp-ease) both } }
/* A step inside a dialog (welcome, top-up) changes with a short fade-up, no blur. */
@keyframes fp-step-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
html body .kc-ob-step, html body .kc-ob-step > * { animation: fp-step-in 240ms var(--fp-ease) both !important }
html body .kc-ob-step > *:nth-child(n) { animation-delay: 0ms !important }

/* The phone's slide-out menu and side sheets: the drawer curve, out a little faster. */
html body .nc-sheet-left[data-state="open"] { animation: nc-sheet-in-left var(--fp-t-panel) var(--fp-ease-panel) both !important }
html body .nc-sheet-left[data-state="closed"] { animation: nc-sheet-out-left 220ms var(--fp-ease-in) both !important }
html body .nc-sheet-right[data-state="open"] { animation: nc-sheet-in-right var(--fp-t-panel) var(--fp-ease-panel) both !important }
html body .nc-sheet-right[data-state="closed"] { animation: nc-sheet-out-right 220ms var(--fp-ease-in) both !important }

/* Pages and messages: a short fade-up, once. */
@keyframes fp-rise { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
html body .fp-app .kl-page { animation: fp-rise 240ms var(--fp-ease) both }
html body .fp-app .kl-msg-in { animation: fp-rise 260ms var(--fp-ease) both }
html body .fp-app .kl-reveal { animation: fp-rise 320ms var(--fp-ease) backwards; animation-delay: calc(var(--i, 0) * 30ms) }
html body .fp-app .kl-stagger { animation: fp-rise 240ms var(--fp-ease) backwards; animation-delay: calc(min(var(--i, 0), 8) * 25ms) }
html body .kl-zoom-in { animation: fp-pop-in var(--fp-t-pop) var(--fp-ease) both }
html body :is(.kl-in-1, .kl-in-2, .kl-in-3, .kl-in-4, .kl-in-5) { animation: fp-rise 420ms var(--fp-ease) backwards }
html body .kl-in-2 { animation-delay: 50ms } html body .kl-in-3 { animation-delay: 100ms } html body .kl-in-4 { animation-delay: 150ms } html body .kl-in-5 { animation-delay: 200ms }
html body .kl-in-panel { animation: fp-rise 520ms var(--fp-ease) 100ms backwards }
html body :is(.kc-ph-in, .kc-ph-pop, .kc-ph-variant) { animation: fp-dialog-in var(--fp-t-dialog) var(--fp-ease) both }

/* The left menu folds as one slide (it used to swap to the folded layout at once and centre the icons in the still
   wide panel, so they jumped right and slid back): the icons, the toggle and the avatar keep their places, the
   labels and the chat list fade out while the panel narrows and fade in after it widens. */
html body .fp-app.fp-app .fp-side.fp-side { overflow: hidden; transition: width var(--fp-t-panel) var(--fp-ease-panel) }
html body .fp-app .fp-side-head { position: relative; transition: padding var(--fp-t-panel) var(--fp-ease-panel) }
html body .fp-app .fp-side-head > a { position: absolute; left: 16px; top: 50%; translate: 0 -50% }
html body .fp-app .fp-side-head > .fp-side-label { flex: 1 }
html body .fp-app .fp-side-item { overflow: hidden; white-space: nowrap }
html body .fp-app .fp-side :is(.fp-side-label, .fp-side-chats, .fp-side-search) { transition: opacity 180ms var(--fp-ease) 90ms, visibility 0s }
html body .fp-app .fp-side.is-folded :is(.fp-side-label, .fp-side-chats) { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 120ms var(--fp-ease-in), visibility 0s 120ms }
html body .fp-app .fp-side .fp-side-chats { min-width: 236px }
html body .fp-app.fp-app .fp-side.is-folded .fp-side-item { justify-content: flex-start; padding-left: 14px !important; transition: padding var(--fp-t-panel) var(--fp-ease-panel), background-color var(--fp-t-hover) var(--fp-ease) }
html body .fp-app.fp-app .fp-side:not(.is-folded) .fp-side-item { transition: padding var(--fp-t-panel) var(--fp-ease-panel), background-color var(--fp-t-hover) var(--fp-ease) }
html body .fp-app .fp-side.is-folded .fp-side-head { padding-left: 0; padding-right: 18px }
html body .fp-app .fp-side.is-folded .fp-side-search-ic { margin: 2px 0 4px }
html body .fp-app .fp-side.is-folded > div > div.overflow-y-auto { overflow-y: hidden }
html body .fp-app.fp-app .fp-side.is-folded .fp-side-foot { display: block; padding: 16px 20px !important }

html body .fp-app .fp-side.is-folded .fp-side-head > a { visibility: hidden; transition: visibility 0s 120ms }
html body .fp-app .fp-side-btn { position: relative; z-index: 1; flex-shrink: 0 }
html body .fp-app .fp-side-search { animation: fp-fade-in 180ms var(--fp-ease) 90ms both }

/* Skeletons: a soft light passing over, moved with transform. */
.fp-skel-line { position: relative; overflow: hidden; background: var(--fp-ou-skel); animation: none }
.fp-skel-line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--fp-ou-skel2), transparent); transform: translateX(-100%); animation: fp-sweep 1.4s var(--fp-ease-panel) infinite }
@keyframes fp-sweep { to { transform: translateX(100%) } }

/* «Reduce motion»: nothing slides, scales or loops; state changes are near-instant fades. */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important }
  :root { --fp-t-press: 1ms; --fp-t-hover: 1ms; --fp-t-out: 1ms; --fp-t-pop: 1ms; --fp-t-dialog: 1ms; --fp-t-panel: 1ms }
  html body :is(.nc-popover, .nc-dialog, .nc-scrim, .kc-ob-card, .kc-ob-scrim, .kc-ob-step, .kc-ob-step > *, .nc-sheet-left, .nc-sheet-right)[class] { animation-duration: 1ms !important; animation-delay: 0ms !important }
  html body .fp-app :is(.kc-pick, .fp-lift, .fp-ext-row):hover { transform: none }
}

/* ── «Рисую картинку…» in the chat (keks, 2026-11-10: the placeholder was empty or blown up) ──
 * The answer column shrinks to its content (align-self: flex-start above), so the placeholder's min(100%, 360px)
 * resolved against an unsized parent: 0 wide when the answer had nothing else, or as wide as the «Jellee AI» line.
 * A fixed width gives the answer its size; max-width keeps it inside a phone screen. */
html body .fp-app .fp-thread .kc-ai-msg .kl-img-skel { width: 360px; max-width: 100%; flex: none }

/* ── Library, picked pictures (keks, 2026-11-10: the 3px ring with a white gap looked crude and doubled) ──
 * The picture stays full size; one thin dark frame inside the tile and the tick mark it as picked. */
html body .fp-app .fp-lib-sel { box-shadow: inset 0 0 0 2px #18181b }
html.fp-dark body .fp-app .fp-lib-sel { box-shadow: inset 0 0 0 2px #f4f4f5 }

/* ── Full check of the site and the cabinet (2026-11-10) ── */
/* Dashboard in the dark theme: the cards kept the light theme's #ececee frame and the empty balance line, so every
 * block was outlined in near-white. */
html.fp-dark body .fp-app .fp-main[data-page="overview"] .kc-box { border-color: #2a2a2d !important }
html.fp-dark body .fp-app .fp-main[data-page="overview"] .kc-box:hover { border-color: #3a3a3e !important }
html.fp-dark body .fp-app .fp-main[data-page="overview"] .kc-viz-hero .kc-spark[data-empty] { background: #2a2a2d !important }
/* The three tiles under «Активность по часам» stayed white: the light rule above them is written with a stronger selector. */
html.fp-dark body .fp-app.fp-app.fp-app .fp-main.fp-main.fp-main[data-page="overview"] .kc-heat-stat.kc-heat-stat { background: #1a1a1c !important; border-color: #2a2a2d !important }
/* «Объединение»: the three steps were light grey plates with the dark theme's light text (unreadable); on a phone the
 * «Объединить» button broke into two lines. */
html.fp-dark body .fp-app.fp-app.fp-app .fp-main.fp-main.fp-main .fp-merge-steps li { background: #232327 !important; border-color: #2a2a2d }
html body .fp-app .fp-merge button[type="submit"] { white-space: nowrap; flex: none }
/* The sign-in page is always white, but the flower took the dark theme's light colour and almost vanished. */
html.fp-dark .fp-login .fp-flowerbot { color: #0d0d0d }
/* The phone menu is a sheet outside .fp-app: its chat search got the generic dialog input (a white box inside the
 * grey field). Same field as in the desktop menu. */
body:has(.fp-app) [role="dialog"] .fp-side-search > label { height: 38px !important; padding: 0 10px !important; border-radius: 10px !important; background: #e8e8ea !important; box-shadow: none !important; border: 0 !important }
html.fp-dark body:has(.fp-app) [role="dialog"] .fp-side-search > label { background: #262626 !important }
body:has(.fp-app) [role="dialog"] .fp-side-search input { -webkit-appearance: none !important; appearance: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; height: 100% !important; color: #0d0d0d !important; outline: none !important }
html.fp-dark body:has(.fp-app) [role="dialog"] .fp-side-search input { color: #ececec !important }
body:has(.fp-app) [role="dialog"] .fp-side-search input::placeholder { color: #8f8f8f !important }

/* keks, 2026-11-11: limit left in the chat bar capsule: a short green bar and the percent (amber at 30%, red at 10%). */
html body .fp-app .kc-topbar .fp-hcap.fp-hcap.fp-hcap > button.fp-limit { display: inline-flex; gap: 8px; font-variant-numeric: tabular-nums }
html body .fp-app .fp-limit .fp-limit-bar { position: relative; display: block; width: 36px; height: 6px; border-radius: 99px; background: rgba(0,0,0,.08); overflow: hidden }
html body .fp-app .fp-limit .fp-limit-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: #3fb57a; transition: width .6s var(--fp-ease) }
html body .fp-app .fp-limit[data-low="1"] .fp-limit-bar > span { background: #e5a23a }
html body .fp-app .fp-limit[data-low="2"] .fp-limit-bar > span { background: #e5484d }
html body .fp-app .fp-limit .fp-limit-n { font-weight: 500 }
html.fp-dark body .fp-app .fp-limit .fp-limit-bar { background: rgba(255,255,255,.12) }
@media (max-width: 640px) { html body .fp-app .fp-limit .fp-limit-bar { width: 18px } html body .fp-app .kc-topbar .fp-hcap.fp-hcap.fp-hcap > button.fp-limit { gap: 6px } }

.lockup,.fp-lockup{background-image:url(/jellee/lockup-tile.svg)!important;background-size:23.48% 100%!important;background-position:left center!important;background-repeat:no-repeat!important;-webkit-mask:url(/jellee/lockup-tile.svg) left center/23.48% 100% no-repeat,url(/jellee/lockup-word.svg) left center/contain no-repeat!important;mask:url(/jellee/lockup-tile.svg) left center/23.48% 100% no-repeat,url(/jellee/lockup-word.svg) left center/contain no-repeat!important}