/* ============================================================
   First 99 Days — Admin CSS overrides
   Warm palette + serif headings + drawer sidebar (≤768px)
   ============================================================ */

/* ---------- CSS custom properties ---------- */
:root {
  --accent:        #b85c38;
  --accent-soft:   #f0e0d6;
  --accent-hover:  #9e4e2f;
  --bg:            #faf7f4;
  --bg-sidebar:    #2c2420;
  --bg-sidebar-hover: #3d3028;
  --border:        #e8ddd6;
  --text:          #1c1410;
  --text-muted:    #7a6e68;
  --font-serif:    "EB Garamond", Georgia, serif;
  --font-sans:     "Inter", system-ui, sans-serif;
  --sidebar-width: 240px;
  --topbar-h:      56px;
  --radius:        8px;
  --shadow-card:   0 1px 6px rgba(0,0,0,.07);
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
}

/* ---------- Sidebar (desktop) ---------- */
.f90-wrapper {
  display: flex;
  min-height: 100vh;
}

.f90-sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: transform .25s ease;
  z-index: 200;
}

.f90-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 0;
}

.f90-sidebar-brand {
  display: flex;
  flex-direction: column;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: #f0e8e0 !important;
  text-decoration: none;
  padding: 1.25rem 1.25rem .75rem;
  letter-spacing: .01em;
  line-height: 1.3;
}

.f90-sidebar-brand-title {
  font-weight: 600;
}

.f90-sidebar-brand-subtitle {
  font-family: var(--font-sans);
  font-size: .75rem;
  color: var(--text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: .15rem;
}

/* ---------- Flat menu (mockup-style) ---------- */
.f90-menu {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: .25rem 0 .75rem;
}

.f90-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.f90-menu-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: #c8b8af;
  padding: .55rem .9rem;
  margin: 2px 10px;
  border-radius: var(--radius);
  font-size: .9rem;
  min-height: 40px;
  text-decoration: none;
  transition: background .15s, color .15s;
  cursor: pointer;
}

.f90-menu-link:hover,
.f90-menu-link.active {
  background: var(--bg-sidebar-hover);
  color: #fff;
}

.f90-menu-link--disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.f90-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: inherit;
}

.f90-menu-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.f90-menu-icon i {
  font-size: 15px;
  width: 18px;
  text-align: center;
}

.f90-menu-label {
  flex: 1;
  line-height: 1.2;
}

.f90-menu-section-title {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(200, 184, 175, .55);
  padding: 1rem 1.25rem .35rem;
  margin-top: .25rem;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

/* ---------- Sidebar footer ---------- */
.f90-sidebar-footer {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: .75rem 1rem 1rem;
}

.f90-btn-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  color: #c8b8af;
  font-size: .85rem;
  min-height: 40px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background .15s, color .15s;
}

.f90-btn-logout:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}

/* ---------- Page wrapper ---------- */
.f90-page-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Page headings ---------- */
.f90-page-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text);
}

/* ---------- Dashboard header (title + filter pills) ---------- */
.f90-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}
.f90-dashboard-header-left {
  flex: 1 1 auto;
  min-width: 0;
}
.f90-dashboard-header-right {
  flex: 0 0 auto;
}

/* ---------- Capsule edit: 2-col grid (form + live TG preview) ---------- */
.f90-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  align-items: start;
}
.f90-tg-preview-pane {
  position: sticky;
  top: 24px;
}
@media (max-width: 1100px) {
  .f90-edit-grid { grid-template-columns: 1fr; }
  .f90-tg-preview-pane { position: static; }
}

.f90-preview-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.f90-preview-header h3 {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}
.f90-btn-test-preview {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.f90-btn-test-preview:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-soft);
}

/* TG chat-like background — pale blue/gray reminiscent of TG Desktop */
.f90-tg-chat-bg {
  background: #cfd8e3;
  background-image:
    radial-gradient(rgba(255,255,255,.4) 1px, transparent 1.5px),
    linear-gradient(135deg, #d6dde6, #cfd8e3);
  background-size: 18px 18px, 100% 100%;
  border-radius: 12px;
  padding: 16px;
}

/* TG message bubble */
.f90-tg-bubble {
  background: #fff;
  border-radius: 14px;
  padding: 10px 12px 6px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #1c1410;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.f90-tg-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.f90-tg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b85c38, #d4a574);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -.02em;
  flex-shrink: 0;
}
.f90-tg-author-info { line-height: 1.2; min-width: 0; }
.f90-tg-author-name {
  font-size: 13px;
  font-weight: 600;
  color: #b85c38;
}
.f90-tg-author-meta {
  font-size: 11px;
  color: #707579;
}

/* Audio file (TG file-style with circular play + waveform) */
.f90-tg-audio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.f90-tg-audio-play {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b85c38, #d4a574);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.f90-tg-audio-play svg { margin-left: 2px; }
.f90-tg-audio-info { flex: 1; min-width: 0; }
.f90-tg-audio-name {
  font-size: 14px;
  font-weight: 500;
  color: #1c1410;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.f90-tg-audio-wave {
  display: flex;
  align-items: center;
  gap: 1.5px;
  height: 14px;
  margin-top: 3px;
  margin-bottom: 2px;
}
.f90-tg-audio-wave-bar {
  width: 2px;
  background: #b85c38;
  border-radius: 1px;
  opacity: .55;
}
.f90-tg-audio-meta {
  font-size: 12px;
  color: #707579;
}
.f90-tg-audio-meta-sep { margin: 0 4px; }

/* Video — real player */
.f90-tg-video-player {
  width: 100%;
  max-height: 320px;
  border-radius: 8px;
  background: #000;
  display: block;
}

/* GIF — real img/video */
.f90-tg-gif {
  position: relative;
  display: block;
}
.f90-tg-gif-media {
  width: 100%;
  max-height: 320px;
  border-radius: 8px;
  display: block;
  background: #000;
}
.f90-tg-gif-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: .03em;
}

/* PDF — TG document style */
.f90-tg-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.f90-tg-doc-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background: #e54b4b;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.f90-tg-doc-info { flex: 1; min-width: 0; }
.f90-tg-doc-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.f90-tg-doc-meta {
  font-size: 12px;
  color: #707579;
  margin-top: 1px;
}

/* Poll — TG anonymous poll style */
.f90-tg-poll { padding: 4px 0; }
.f90-tg-poll-meta {
  font-size: 11px;
  color: #707579;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 500;
  margin-bottom: 6px;
}
.f90-tg-poll-question {
  font-weight: 500;
  margin-bottom: 12px;
  color: #1c1410;
}
.f90-tg-poll-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(0,0,0,.06);
  font-size: 14px;
  color: #1c1410;
}
.f90-tg-poll-option-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #b85c38;
  flex-shrink: 0;
}

/* Video / GIF placeholder boxes (when no file uploaded yet) */
.f90-tg-placeholder {
  background: #2c2420;
  border-radius: 8px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.f90-tg-placeholder-text {
  color: rgba(255,255,255,.6);
  font-size: 12px;
}

/* Caption / text body */
.f90-tg-text {
  margin-top: 8px;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: #1c1410;
  font-size: 14px;
  line-height: 1.45;
}
.f90-tg-text:empty::before {
  content: '…';
  color: #aaa;
}

/* Block-level spacing внутри preview — соответствует редактору
   (.f90-wysiwyg-wrap .ql-editor > p/blockquote/pre имеют такой же
   1em bottom margin). Без этого браузерные дефолты (`<p>` 1em top+bottom,
   `<blockquote>` 1em margin + 40px left padding, `<pre>` 1em margin)
   делали preview визуально «разреженным» относительно редактора. */
.f90-tg-text > p,
.f90-tg-text > blockquote,
.f90-tg-text > pre {
  margin: 0 0 1em 0;
}
.f90-tg-text > p:last-child,
.f90-tg-text > blockquote:last-child,
.f90-tg-text > pre:last-child {
  margin-bottom: 0;
}
/* Дефолтная браузерная отбивка слева у `<blockquote>` (40px) — слишком
   широкая. Подгоняем под Telegram-стиль (граница + небольшой padding). */
.f90-tg-text > blockquote {
  border-left: 3px solid var(--accent, #b85c38);
  padding: 0 0 0 12px;
}
.f90-tg-text > pre {
  background: rgba(0,0,0,.05);
  padding: 8px 12px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
  white-space: pre;
  overflow-x: auto;
}

/* Footer: protect-shield + time */
.f90-tg-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  color: #707579;
}
.f90-tg-protect { font-size: 12px; }

/* ---------- iOS-style toggle for boolean fields in admin forms ----------
   sqladmin рендерит WTForms BooleanField как
   <input type="checkbox" class="form-control"> — а .form-control в Tabler
   стилизует под обычный text-input (широкий пустой прямоугольник).
   Эти правила превращают такой checkbox в нормальный on/off-переключатель. */
.f90-form-input input[type="checkbox"].form-control,
form input[type="checkbox"].form-control {
  appearance: none;
  -webkit-appearance: none;
  width: 44px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  background: #e5dfd6;
  border: 1px solid var(--border);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  display: inline-block;
  vertical-align: middle;
  flex: none;
}
.f90-form-input input[type="checkbox"].form-control::before,
form input[type="checkbox"].form-control::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  top: 1px;
  left: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  transition: left .2s;
}
.f90-form-input input[type="checkbox"].form-control:checked,
form input[type="checkbox"].form-control:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.f90-form-input input[type="checkbox"].form-control:checked::before,
form input[type="checkbox"].form-control:checked::before {
  left: 22px;
}
.f90-form-input input[type="checkbox"].form-control:focus,
form input[type="checkbox"].form-control:focus {
  outline: 2px solid rgba(184, 92, 56, .25);
  outline-offset: 2px;
}

/* ---------- Bot profile page (mockup §settings-bot) ---------- */
.f90-bot-profile-header {
  margin-bottom: 24px;
}

.f90-bot-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1100px) {
  .f90-bot-profile-grid { grid-template-columns: 1fr; }
}
.f90-bot-profile-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
}
@media (max-width: 1100px) {
  .f90-bot-profile-side { position: static; }
}

.f90-bot-preview-card,
.f90-bot-side-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.f90-bot-side-card-header,
.f90-bot-preview-card .f90-preview-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.f90-bot-side-card-header h3,
.f90-bot-preview-card .f90-preview-header h3 {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}
.f90-bot-side-card-meta {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.f90-bot-side-card-body { padding: 14px 16px; }

/* Bot profile preview — TG-style mini card */
.f90-bot-preview-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
}
.f90-bot-photo {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b85c38, #d4a574);
  background-size: cover;
  background-position: center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.f90-bot-photo--has-image {
  background-color: transparent;
  background-image: none;
}

/* Bot avatar upload row in form */
.f90-bot-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.f90-bot-avatar-preview,
.f90-bot-avatar-placeholder {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid var(--border);
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.f90-bot-avatar-placeholder {
  background: linear-gradient(135deg, #b85c38, #d4a574);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.f90-bot-avatar-actions {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.f90-bot-avatar-actions .btn {
  align-self: flex-start;
}

/* Welcome image — wider rounded rectangle (16:9-ish), not circle */
.f90-bot-welcome-img,
.f90-bot-welcome-placeholder {
  width: 144px !important;
  height: 80px !important;
  border-radius: 8px !important;
  object-fit: cover;
}
.f90-bot-welcome-placeholder {
  background: var(--bg);
  color: var(--text-muted);
  font-size: 26px;
}
.f90-bot-preview-text { flex: 1; min-width: 0; }
.f90-bot-preview-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  word-wrap: break-word;
}
.f90-bot-preview-username {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 1px;
}
.f90-bot-preview-short {
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
  margin-top: 8px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Access info */
.f90-bot-access-row { margin-bottom: 14px; }
.f90-bot-access-row:last-child { margin-bottom: 0; }
.f90-bot-access-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 500;
}
.f90-bot-access-value { font-size: 13px; color: var(--text); }
.f90-bot-access-secret {
  font-family: monospace;
  font-size: 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  display: inline-block;
}
.f90-bot-access-code {
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  word-break: break-all;
  display: inline-block;
}
.f90-bot-access-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}

/* Bot commands list */
.f90-bot-commands {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.f90-bot-command {
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.f90-bot-command code {
  flex-shrink: 0;
  font-family: monospace;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  min-width: 80px;
  text-align: left;
}
.f90-bot-command span {
  color: var(--text-muted);
  font-size: 13px;
}

/* ---------- Coming-soon stub card (Объявление и т.п.) ---------- */
.f90-coming-soon-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 48px 32px;
  max-width: 640px;
  margin: 24px auto;
  text-align: center;
}
.f90-coming-soon-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.f90-coming-soon-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 14px;
}
.f90-coming-soon-text {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 12px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.f90-coming-soon-meta {
  font-size: 13px;
  margin-top: 20px;
}
.f90-coming-soon-meta strong { color: var(--accent); }

/* ---------- Capsule form (mockup §capsule-edit) ---------- */
.f90-form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.f90-form-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.f90-form-row:last-of-type { border-bottom: none; }

.f90-form-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 7px;
}
.f90-form-label label {
  font-weight: 500;
  color: var(--text);
  margin: 0;
  font-size: 14px;
}
.f90-form-hint {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}
.f90-form-hint code {
  font-size: 12px;
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 4px;
}

.f90-form-input { min-width: 0; }

.f90-form-input .form-control,
.f90-form-input .form-select {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.f90-form-input .form-control:focus,
.f90-form-input .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(184, 92, 56, 0.1);
  outline: none;
}
.f90-form-input textarea.form-control {
  resize: vertical;
  min-height: 90px;
  font-family: inherit;
}
.f90-input-narrow {
  max-width: 120px !important;
}

/* Pill-style radios for segment / status fields */
.f90-pill-radio-group {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  flex-wrap: wrap;
}
.f90-pill-radio {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 999px;
  cursor: pointer;
  margin: 0;
  transition: background .15s, color .15s;
  user-select: none;
}
.f90-pill-radio input[type="radio"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.f90-pill-radio:hover { color: var(--text); }
.f90-pill-radio.active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Segment grid (Компания + Город labels) */
.f90-segment-grid {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px 12px;
  align-items: center;
}
.f90-segment-label {
  font-size: 13px;
  color: var(--text-muted);
}

/* Form footer with submit buttons */
.f90-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 16px 24px;
  background: #fafaf7;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.f90-btn-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  padding: 8px 18px;
  border-radius: 7px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s;
}
.f90-btn-primary:hover {
  background: var(--accent-hover);
  color: #fff;
}

/* Poll options widget — dynamic list of text inputs */
.f90-poll-options { display: block; }
.f90-poll-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.f90-poll-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.f90-poll-option-num {
  width: 24px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: right;
  flex-shrink: 0;
}
.f90-poll-option-row .form-control {
  flex: 1;
}
.f90-btn-remove-option {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.f90-btn-remove-option:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}
.f90-btn-add-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: transparent;
  border: 1px dashed var(--border-strong, #d6c8be);
  border-radius: 7px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.f90-btn-add-option:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

/* Media upload zones (mockup §capsule-edit voice files) */
.f90-uploaded-file,
.f90-upload-zone {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px dashed var(--border-strong, #d6c8be);
  border-radius: 8px;
  background: rgba(255, 255, 255, .55);
  transition: border-color .15s, opacity .15s;
}
.f90-uploaded-file.is-uploading,
.f90-upload-zone.is-uploading { opacity: .6; pointer-events: none; }

.f90-upload-zone {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
}
.f90-upload-zone:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.f90-file-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .03em;
}
.f90-file-info {
  flex: 1;
  min-width: 0;
}
.f90-file-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.f90-file-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.f90-btn-replace {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.f90-btn-replace:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-soft);
}
.f90-upload-stub {
  font-style: italic;
}

@media (max-width: 768px) {
  .f90-form-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px;
  }
  .f90-form-label { padding-top: 0; }
  .f90-pill-radio-group { width: 100%; }
  .f90-segment-grid { grid-template-columns: 1fr; gap: 6px; }
  .f90-form-actions { padding: 14px 16px; }
  .f90-uploaded-file { flex-wrap: wrap; }
  .f90-file-info { width: 100%; }
}

/* ---------- Content list filter pills (mockup §capsules) ---------- */
.f90-content-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.f90-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.f90-filter-group {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 0;
}
.f90-pill {
  padding: 6px 14px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-muted);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.f90-pill:hover {
  color: var(--text);
}
.f90-pill.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.f90-filter-count {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 13px;
}
@media (max-width: 768px) {
  .f90-filter-group { flex-wrap: wrap; }
  .f90-pill { padding: 5px 10px; font-size: 12.5px; }
  .f90-filter-count { margin-left: 0; width: 100%; }
}

/* ---------- Tabs pills (mockup §tabs-pills) ---------- */
.f90-tabs-pills {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
  gap: 0;
}
.f90-tab {
  padding: 6px 14px;
  border: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.f90-tab:hover {
  color: var(--text);
}
.f90-tab.active {
  background: var(--accent-soft);
  color: var(--accent);
}
@media (max-width: 576px) {
  .f90-tabs-pills { width: 100%; justify-content: space-between; }
  .f90-tab { padding: 6px 8px; font-size: 12px; }
}

.f90-page-pretitle {
  color: var(--text-muted);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  background: #fff;
}

/* ---------- Tables ---------- */
.table thead th {
  background: #f5f0ec;
  color: var(--text-muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 2px solid var(--border);
}

.table-responsive {
  border-radius: var(--radius);
  overflow-x: auto;           /* horizontal scroll on narrow screens */
}

/* ---------- Buttons ---------- */
.btn-primary,
.f90-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  min-height: 40px;
  font-weight: 500;
  border-radius: var(--radius);
  transition: background .15s;
}

.btn-primary:hover,
.f90-btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-secondary {
  min-height: 40px;
}

/* ---------- Forms ---------- */
.form-label,
.f90-label {
  font-weight: 500;
  font-size: .88rem;
  color: var(--text);
  margin-bottom: .35rem;
  display: block;
}

.form-control,
.f90-input {
  border-color: var(--border);
  border-radius: var(--radius);
  min-height: 40px;
  font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}

.form-control:focus,
.f90-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(184,92,56,.15);
}

/* ---------- Mobile topbar ---------- */
.f90-topbar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  background: var(--bg-sidebar);
  z-index: 300;
  align-items: center;
  padding: 0 1rem;
  gap: .75rem;
}

.f90-topbar-brand {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: #f0e8e0;
  text-decoration: none;
  flex: 1;
}

/* Burger button */
.f90-burger {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 40px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
}

.f90-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #f0e8e0;
  border-radius: 2px;
  transition: transform .2s;
}

/* ---------- Overlay (mobile) ---------- */
.f90-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 190;
}

.f90-overlay--visible {
  display: block;
}

/* ---------- Login page ---------- */
.f90-login-bg {
  background: var(--bg);
  padding: 1.5rem;
}

.f90-login-card {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

.f90-login-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .25rem;
}

.f90-login-subtitle {
  color: var(--text-muted);
  font-size: .9rem;
  margin-bottom: 0;
}

/* ---------- Dashboard column override ----------
   Tabler `.row-deck > [class*=col-]` forces `display: flex; align-items: stretch`
   on every col, which turns our two stacked blocks (KPI grid + health section)
   into a horizontal flex row. Switching to block restores the natural top/bottom
   stacking for the dashboard column without affecting other admin pages. */
.f90-dashboard-col {
  display: block !important;
}

/* ---------- Dashboard KPI cards ---------- */
.f90-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) {
  .f90-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .f90-kpi-grid { grid-template-columns: 1fr; }
}

.f90-kpi-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
}

.f90-kpi-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: .5rem;
}

.f90-kpi-value {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--accent);
}

/* ---------- Seed banner ---------- */
.f90-seed-banner {
  background: #fff8f0;
  border: 1px solid #f0d0b0;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  color: var(--text);
  padding: 1rem 1.25rem;
}

/* ============================================================
   RESPONSIVE — mobile ≤768px
   ============================================================ */
@media (max-width: 768px) {
  /* Show topbar, push content down */
  .f90-topbar {
    display: flex;
  }

  .f90-wrapper {
    flex-direction: column;
  }

  .f90-page-wrapper {
    padding-top: var(--topbar-h);
  }

  /* Sidebar becomes fixed drawer. Topbar (z-index 300) sits on top of the
     sidebar (z-index 250); without padding-top the first menu item is hidden
     under the topbar's dark band. Push inner content down by topbar height. */
  .f90-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    transform: translateX(-100%);
    z-index: 250;
    height: 100%;
    padding-top: var(--topbar-h);
  }

  .f90-sidebar--open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
  }

  /* Stacked forms: label on top, full-width input */
  .row.g-3 > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* KPI grid mobile breakpoints already defined alongside the rule itself
     in the desktop section (576px → 1fr). Removed duplicate here. */

  /* Touch-targets */
  .btn,
  .nav-link,
  .f90-nav .nav-link,
  .f90-nav .nav-item a {
    min-height: 40px;
    min-width: 40px;
  }
}

/* ============================================================
   NARROW — ≤420px
   ============================================================ */
@media (max-width: 420px) {
  .f90-login-title {
    font-size: 1.6rem;
  }

  .container-fluid {
    padding-left: .75rem;
    padding-right: .75rem;
  }
}

/* ============================================================
   WYSIWYG (Quill snow) — поля text_body / prompt_text в админке.
   ============================================================ */

.f90-wysiwyg-wrap {
  border: 1px solid #ced4da;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

/* Toolbar — компактная серая полоска под form-control. Quill дефолтно
   рисует свою чёрную обводку, перетираем под Bootstrap-стиль. */
.f90-wysiwyg-wrap .ql-toolbar.f90-wysiwyg-toolbar {
  border: 0;
  border-bottom: 1px solid #e9ecef;
  background: #f8f9fa;
  padding: 6px 8px;
}

.f90-wysiwyg-wrap .ql-toolbar .ql-formats {
  margin-right: 12px;
}

/* Все 10 кнопок toolbar'а используют кастомные иконки/лейблы вместо
   Quill-дефолтов (читабельность для нетехнических авторов). Унифицируем
   размер и поведение active-state. */
.f90-wysiwyg-wrap .ql-toolbar button.ql-bold,
.f90-wysiwyg-wrap .ql-toolbar button.ql-italic,
.f90-wysiwyg-wrap .ql-toolbar button.ql-underline,
.f90-wysiwyg-wrap .ql-toolbar button.ql-strike,
.f90-wysiwyg-wrap .ql-toolbar button.ql-link,
.f90-wysiwyg-wrap .ql-toolbar button.ql-spoiler,
.f90-wysiwyg-wrap .ql-toolbar button.ql-code,
.f90-wysiwyg-wrap .ql-toolbar button.ql-code-block,
.f90-wysiwyg-wrap .ql-toolbar button.ql-blockquote,
.f90-wysiwyg-wrap .ql-toolbar button.ql-clean {
  width: 28px;
  height: 26px;
  padding: 2px 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.f90-wysiwyg-wrap .ql-toolbar button svg {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
.f90-wysiwyg-wrap .ql-toolbar button.ql-active {
  color: #06c;
}

/* Буквенные лейблы Ж/К/Ч/З — конвенция Russian Word, мгновенное
   узнавание для русскоговорящих авторов. Каждая буква стилизована под
   формат, который применяет. */
.f90-wysiwyg-wrap .ql-toolbar .f90-tb-letter {
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  color: currentColor;
  /* Обычные .ql-toolbar button.ql-bold .f90-tb-letter получают bold от
     самой буквенной class — не от parent button. Это позволяет одной
     CSS-моделью работать и в active-state, и в hover-state. */
}
.f90-wysiwyg-wrap .ql-toolbar .f90-tb-bold      { font-weight: 800; }
.f90-wysiwyg-wrap .ql-toolbar .f90-tb-italic    { font-style: italic; font-weight: 600; }
.f90-wysiwyg-wrap .ql-toolbar .f90-tb-underline { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.f90-wysiwyg-wrap .ql-toolbar .f90-tb-strike    { text-decoration: line-through; font-weight: 600; }

/* Editor area — высота как у textarea rows=4, шрифт админский. */
.f90-wysiwyg-wrap .ql-container.f90-wysiwyg-editor {
  border: 0;
  font-family: inherit;
  font-size: 14px;
  min-height: 96px;
}
.f90-wysiwyg-wrap .ql-editor {
  min-height: 96px;
  padding: 8px 12px;
}

/* Block-level spacing: WYSIWYG-fidelity с TG-preview панелью.
   Quill snow.css по дефолту ставит `margin: 0` на параграфах, и автор
   видит блоки слипшимися. В TG-preview панели (.f90-tg-text использует
   white-space: pre-wrap) тот же контент после round-trip через
   sanitize_for_telegram отрисовывается с пустыми строками от `\n\n`,
   плюс блок-элементы (<blockquote>, <pre>) имеют свой natural margin.
   В итоге автор видит «всё липнет» в редакторе и «много пустых строк»
   в TG — недоумение «WYSIWYG не работает».

   Подгоняем margin блоков в редакторе так, чтобы видимый отступ
   соответствовал тому, что выйдет в Telegram. 1em ≈ 1 line-height ≈
   `\n\n` whitespace. */
.f90-wysiwyg-wrap .ql-editor > p,
.f90-wysiwyg-wrap .ql-editor > blockquote,
.f90-wysiwyg-wrap .ql-editor > pre {
  margin: 0 0 1em 0;
}
.f90-wysiwyg-wrap .ql-editor > p:last-child,
.f90-wysiwyg-wrap .ql-editor > blockquote:last-child,
.f90-wysiwyg-wrap .ql-editor > pre:last-child {
  margin-bottom: 0;
}

/* tg-spoiler в редакторе — стилизуем как заштрихованный фон, чтобы
   автор видел, что отметил спойлером. В Telegram это чёрный плашечный
   эффект, тут нам важен только контраст. */
.f90-wysiwyg-wrap .ql-editor span.tg-spoiler {
  background: linear-gradient(135deg, #d4d4d8 25%, #e4e4e7 25%, #e4e4e7 50%,
                                       #d4d4d8 50%, #d4d4d8 75%, #e4e4e7 75%);
  background-size: 8px 8px;
  border-radius: 2px;
  padding: 0 2px;
}

/* Counter — серая мелочь под редактором. Цвет меняется по мере
   приближения к лимиту (warn=90%, over=>100%). */
.f90-wysiwyg-counter {
  padding: 4px 12px;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  font-size: 12px;
  color: #6c757d;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.f90-wysiwyg-counter-warn { color: #d97706; }
.f90-wysiwyg-counter-over { color: #dc2626; font-weight: 600; }

/* tg-spoiler в самом Telegram-preview-bubble — тот же визуал. */
.f90-tg-text span.tg-spoiler,
.f90-tg-bubble span.tg-spoiler {
  background: linear-gradient(135deg, #6b7280 25%, #4b5563 25%, #4b5563 50%,
                                       #6b7280 50%, #6b7280 75%, #4b5563 75%);
  background-size: 8px 8px;
  color: transparent;
  border-radius: 2px;
  padding: 0 2px;
}