/* ============================================================
   BASE.CSS — Design Tokens & Global Resets
   میلورم بازار — Persian RTL Frontend
   ============================================================ */

/* ── Font Face ─────────────────────────────────────────────── */
@font-face {
  font-family: "IRANSansX";
  src: url("../fonts/IRANSansX-RegularD4.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IRANSansX";
  src: url("../fonts/IRANSansX-MediumD4.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IRANSansX";
  src: url("../fonts/IRANSansX-DemiBoldD4.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IRANSansX";
  src: url("../fonts/IRANSansX-BoldD4.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IRANSansX";
  src: url("../fonts/IRANSansX-LightD4.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ── Color Tokens — Neutral Ramp ───────────────────────────── */
:root {
  /* The product is light-only by design. This stops Chromium/Firefox from
     auto-darkening form controls when the OS is in dark mode. */
  color-scheme: light;
  --neutral-50:  #f8f7f4;
  --neutral-100: #f0ede6;
  --neutral-200: #e2ddd3;
  --neutral-300: #cfc8ba;
  --neutral-400: #b8ae9c;
  --neutral-500: #9d9080;
  --neutral-600: #7e7265;
  --neutral-700: #5e5549;
  --neutral-800: #3e3830;
  --neutral-900: #231f18;
  --neutral-950: #141209;

  /* ── Color Tokens — Brand (agricultural green) ── */
  --brand-50:  #f0f9f0;
  --brand-100: #dcf0dc;
  --brand-200: #b8e0b8;
  --brand-300: #87c987;
  --brand-400: #55af55;
  --brand-500: #2e8e2e;
  --brand-600: #237023;
  --brand-700: #1c5a1c;
  --brand-800: #164516;
  --brand-900: #0f2e0f;
  --brand-950: #071807;

  /* ── Color Tokens — Accent (warm amber) ── */
  --accent-50:  #fffbf0;
  --accent-100: #fff3d0;
  --accent-200: #ffe49e;
  --accent-300: #ffd066;
  --accent-400: #ffbb33;
  --accent-500: #f5a200;
  --accent-600: #c27f00;
  --accent-700: #8f5d00;
  --accent-800: #5c3b00;
  --accent-900: #2e1d00;
  --accent-950: #170e00;

  /* ── Semantic Surface Roles ── */
  --surface:          var(--neutral-50);
  --surface-raised:   #ffffff;
  --surface-sunken:   var(--neutral-100);
  --surface-dark:     #1a2215;
  --surface-dark-2:   #24301d;

  /* ── Semantic Text Roles ── */
  --text:             var(--neutral-900);
  --text-muted:       var(--neutral-600);
  --text-faint:       var(--neutral-400);
  --text-inverse:     #f5f5f0;
  --text-inverse-muted: rgba(245,245,240,0.7);

  /* ── Semantic Border ── */
  --border:           var(--neutral-200);
  --border-strong:    var(--neutral-300);
  --border-focus:     var(--brand-500);

  /* ── Semantic Interactive ── */
  --color-primary:        var(--brand-600);
  --color-primary-hover:  var(--brand-700);
  --color-primary-active: var(--brand-800);
  --color-primary-text:   #ffffff;

  --color-secondary:        var(--accent-500);
  --color-secondary-hover:  var(--accent-600);
  --color-secondary-text:   #ffffff;

  /* ── Semantic States ── */
  --color-success:  #1e7e34;
  --color-warning:  #c67c00;
  --color-danger:   #c0392b;
  --color-info:     #1a6fa8;

  --color-success-bg: #e8f5e9;
  --color-warning-bg: #fff8e1;
  --color-danger-bg:  #fdecea;
  --color-info-bg:    #e3f2fd;

  /* ── Typography Scale ── */
  --font-family: "IRANSansX", system-ui, sans-serif;
  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  2.75rem;    /* 44px */
  --text-5xl:  3.5rem;     /* 56px */

  --line-height-tight:  1.25;
  --line-height-snug:   1.4;
  --line-height-normal: 1.6;
  --line-height-loose:  1.8;

  /* ── Spacing (8px rhythm) ── */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ── Border Radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-lg:  0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-xl:  0 8px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.07);
  --shadow-focus: 0 0 0 3px rgba(46,142,46,0.25);

  /* ── Transitions ── */
  --transition-fast:   120ms ease;
  --transition-base:   180ms ease;
  --transition-slow:   240ms ease;
  --transition-spring: 240ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Motion system ──
     Shared timing/easing for purposeful UI motion. Entrances decelerate,
     exits stay quicker, and spring is reserved for small confirmations. */
  --motion-fast:      140ms;
  --motion-base:      200ms;
  --motion-slow:      300ms;
  --motion-ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --motion-spring:    cubic-bezier(0.34, 1.28, 0.64, 1);

  /* ── Container ── */
  --container-sm:  600px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1440px;

  /* ── Z-index ── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  direction: rtl;
  scroll-behavior: smooth;
  overflow-x: clip;
  scroll-padding-top: 88px;
  scrollbar-gutter: stable;
}
html, body {
  max-width: 100%;
  overflow-x: clip;
}
*, *::before, *::after {
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--text);
  background-color: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  word-break: break-word;
}
main, section {
  min-width: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-hover); }
a:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

button {
  font-family: var(--font-family);
  cursor: pointer;
  border: none;
  background: none;
}
button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

input, select, textarea {
  font-family: var(--font-family);
  font-size: var(--text-base);
  direction: rtl;
  color: var(--text, #24301d);
  background-color: var(--surface-raised, #fff);
  border-color: var(--border, #e2ddd3);
  accent-color: var(--brand-600, #237023);
}
input::placeholder, textarea::placeholder { color: var(--text-muted, #59664f); opacity: .8; }
::selection { background: var(--brand-200, #cfe8cf); color: #16281a; }

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text);
}

p { max-width: 70ch; }

/* ── Utility Classes ────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.demo-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-warning);
  background: var(--color-warning-bg);
  border: 1px solid rgba(198,124,0,0.2);
  border-radius: var(--radius-full);
  padding: 2px var(--space-2);
  vertical-align: middle;
  white-space: nowrap;
}

.text-muted { color: var(--text-muted); }
.text-faint  { color: var(--text-faint); }
.text-success { color: var(--color-success); }
.text-danger  { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }

.font-bold    { font-weight: var(--font-weight-bold); }
.font-medium  { font-weight: var(--font-weight-medium); }
.font-semibold{ font-weight: var(--font-weight-semibold); }

.tabular-nums { font-variant-numeric: tabular-nums; }

/* ── Toast ──────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  pointer-events: none;
}

.toast {
  min-width: 260px;
  max-width: 400px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: #fff;
  background: var(--neutral-900);
  box-shadow: var(--shadow-xl);
  pointer-events: all;
  opacity: 0;
  transform: translateY(12px);
  animation: toast-in var(--transition-slow) forwards, toast-out 0.3s 2.7s forwards;
}
.toast.success { background: var(--color-success); }
.toast.error   { background: var(--color-danger); }
.toast.warning { background: var(--color-warning); }

@keyframes toast-in  { to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ── Modal ──────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.modal {
  background: var(--surface-raised);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.96) translateY(8px);
  transition: transform var(--transition-slow);
}
.modal-overlay.open .modal {
  transform: scale(1) translateY(0);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
}
.modal-body   { padding: var(--space-6); }
.modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

/* ── Shared motion primitives ───────────────────────────────── */
/* Used by tiny JS hooks (quantity / total changes) and by components that
   re-render their own children. Kept in base.css so every page agrees. */
@keyframes mb-num-bump {
  0%, 100% { transform: scale(1); filter: none; }
  38%      { transform: translateY(-1px) scale(1.055); filter: brightness(1.08); }
}

@keyframes mb-fade-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes mb-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes mb-details-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.is-bumping {
  animation: mb-num-bump var(--motion-base) var(--motion-spring) both;
  will-change: transform;
}

/* Min/max labels added by MBSlider under range controls. */
.range-scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: -2px;
  padding: 0 3px;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .is-bumping { animation: none !important; }
}

/* ── Global announcement banner (Admin → Site Settings) ── */
.mb-an-banner{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#fff7e6,#fffdf7);border-bottom:1.5px solid #f3d9a4;color:#7a4d05;padding:9px 16px;font-size:12.5px;line-height:1.8;position:relative;z-index:60;flex-wrap:wrap}
.mb-an-banner .mb-an-ic{font-size:15px}
.mb-an-banner .mb-an-body b{font-weight:800}
.mb-an-banner .mb-an-body span{color:#9a6708}
.mb-an-banner a{color:#7a4d05;font-weight:800;text-decoration:underline}
.mb-an-close{all:unset;cursor:pointer;margin-inline-start:auto;font-size:17px;color:#b8860b;padding:0 6px;border-radius:6px;line-height:1}
.mb-an-close:hover{background:#f7e8c8}
[dir=rtl] .mb-an-banner{direction:rtl}

/* Real moderated comments */
.mb-comments { margin-top: 26px; padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-raised, #fff); }
.mb-comments-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mb-comments-head h2 { margin: 0; font-size: 18px; }
.mb-comments-list { display: grid; gap: 9px; margin-bottom: 16px; }
.mb-comment { border: 1px solid var(--border); border-radius: 13px; padding: 11px 13px; background: var(--surface, #fff); }
.mb-comment-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.mb-comment-head span { color: var(--text-muted); font-size: 11px; }
.mb-comment p { margin: 6px 0 0; font-size: 13px; line-height: 1.9; white-space: pre-wrap; }
.mb-comments-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 12px; border: 1px dashed var(--border); border-radius: 12px; }
.mb-comments-form { border-top: 1px solid var(--border); padding-top: 14px; }
.mb-comments-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mb-comments-form .form-group { margin-bottom: 10px; }
.mb-comments-form textarea { min-height: 96px; }
@media (max-width: 640px) { .mb-comments { padding: 14px; } .mb-comments-grid { grid-template-columns: 1fr; } }

/* -- Community comments (dynamic, moderated, replies) ------------- */
.cmf-shell{position:relative;overflow:hidden;border:1px solid #dce9df;border-radius:24px;padding:22px;background:linear-gradient(145deg,#f7fcf6,#fffdf6 55%,#f4f9ff);box-shadow:0 20px 55px -38px rgba(20,83,45,.45)}
.cmf-shell--calc{padding:28px;background:linear-gradient(135deg,#ecfdf5 0%,#fefce8 45%,#eff6ff 100%);border-color:#c7e8d5}
.cmf-orb{position:absolute;border-radius:999px;filter:blur(2px);pointer-events:none;opacity:.55;animation:cmfFloat 8s ease-in-out infinite}
.cmf-orb--one{width:180px;height:180px;background:radial-gradient(circle,#fde68a,#f59e0b00 68%);top:-70px;left:-50px}
.cmf-orb--two{width:220px;height:220px;background:radial-gradient(circle,#bfdbfe,#3b82f600 70%);bottom:-110px;right:-65px;animation-delay:-3s}
@keyframes cmfFloat{50%{transform:translateY(10px) scale(1.04)}}
.cmf-head{position:relative;z-index:1;text-align:center;max-width:720px;margin:0 auto 18px}
.cmf-kicker{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid #cce8d8;border-radius:999px;background:#ffffffc9;color:#15803d;font-size:11px;font-weight:800;letter-spacing:.01em}
.cmf-head h2{margin:10px 0 6px;font-size:clamp(20px,3vw,29px);line-height:1.35;color:#173f2a;letter-spacing:-.02em}
.cmf-head>p{max-width:56ch;margin:0 auto;color:#63756a;font-size:12.5px;line-height:1.95}
.cmf-proof{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:13px;color:#6b7d70;font-size:11px}
.cmf-proof b{color:#14532d;font-size:15px}
.cmf-proof-avatars{display:inline-flex;direction:ltr}
.cmf-proof-avatars i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#dcfce7;border:2px solid #fff;color:#166534;font-style:normal;font-size:9px;font-weight:900;margin-inline-start:-6px}
.cmf-proof-avatars i:nth-child(2){background:#fef3c7;color:#92400e}.cmf-proof-avatars i:nth-child(3){background:#dbeafe;color:#1e40af}
.cmf-list{position:relative;z-index:1;display:grid;gap:10px;margin:0 auto 17px;max-width:860px}
.cmf-comment{background:#ffffffd9;border:1px solid #e3eee6;border-radius:17px;padding:13px;transition:border-color .18s,box-shadow .18s,transform .18s}
.cmf-comment:hover{border-color:#b9dfc7;box-shadow:0 12px 24px -22px rgba(20,83,45,.55);transform:translateY(-1px)}
.cmf-comment-main{display:flex;align-items:flex-start;gap:10px}
.cmf-avatar{flex:0 0 auto;width:38px;height:38px;border-radius:13px;display:grid;place-items:center;font-size:14px;font-weight:900;color:#14532d;background:#dcfce7;box-shadow:inset 0 0 0 1px #ffffffb0}
.cmf-avatar--sm{width:28px;height:28px;border-radius:9px;font-size:11px}
.cmf-avatar--amber{background:#fef3c7;color:#92400e}.cmf-avatar--blue{background:#dbeafe;color:#1e40af}.cmf-avatar--rose{background:#ffe4e6;color:#9f1239}.cmf-avatar--violet{background:#ede9fe;color:#5b21b6}.cmf-avatar--mint{background:#dcfce7;color:#166534}
.cmf-comment-body{min-width:0;flex:1}
.cmf-comment-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px}
.cmf-comment-head b{color:#204b32;font-size:12.5px}.cmf-comment-head>span:not(.cmf-verified){color:#8b9a90;font-size:10.5px}
.cmf-verified{font-size:9px!important;color:#15803d!important;background:#ecfdf5;border:1px solid #bbf7d0;border-radius:99px;padding:2px 5px;font-weight:800}
.cmf-comment p{margin:5px 0 5px;color:#405448;font-size:12.5px;line-height:2;white-space:pre-wrap}
.cmf-comment-actions{display:flex;align-items:center;gap:9px}
.cmf-reply-btn{border:0;background:none;color:#8a9b90;font:inherit;font-size:10.5px;font-weight:800;padding:1px 0;cursor:pointer}
.cmf-reply-btn:hover{color:#15803d}.cmf-reply-count{font-size:10px;color:#9aaba0}
.cmf-replies{display:grid;gap:7px;margin-top:8px;padding-inline-start:15px;border-inline-start:2px solid #d7ecdf}
.cmf-reply{display:flex;gap:7px;align-items:flex-start;background:#f8fcf9;border:1px solid #e8f2ea;border-radius:11px;padding:8px}
.cmf-reply-body{min-width:0}.cmf-reply-body p{margin:2px 0 0;font-size:11.5px;line-height:1.9}
.cmf-reply-form-host:not(:empty){margin-top:8px}
.cmf-composer{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:15px;border:1px dashed #bfdfca;border-radius:17px;background:#ffffffc4}
.cmf-composer-head{display:flex;align-items:flex-start;gap:9px;margin-bottom:10px}.cmf-composer-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#dcfce7;font-size:15px;flex:0 0 auto}
.cmf-composer-head h3{margin:0 0 2px;font-size:13px;color:#1f4d32}.cmf-composer-head p{margin:0;color:#829086;font-size:10.5px;line-height:1.8}
.cmf-form{display:grid;gap:8px}.cmf-form-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cmf-input{width:100%;border:1px solid #d9e8dd;border-radius:10px;background:#fff;color:#294434;font:inherit;font-size:12px;padding:9px 10px;outline:none;transition:border-color .18s,box-shadow .18s}
.cmf-input:focus{border-color:#55b978;box-shadow:0 0 0 3px #55b9781f}.cmf-input::placeholder{color:#a0ada4}
.cmf-textarea{resize:vertical;min-height:72px;line-height:1.9}
.cmf-form-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cmf-form-foot .btn{min-height:38px;padding:7px 15px;font-size:11.5px}
.cmf-form-msg{flex:1;min-width:120px;color:#617568;font-size:10.5px;line-height:1.8}
.cmf-cancel{border:0;background:none;color:#7d8e82;font:inherit;font-size:10.5px;cursor:pointer}
.cmf-empty{padding:24px 16px;text-align:center;border:1px dashed #cfe5d6;border-radius:15px;background:#ffffffa6;color:#7b8d80;font-size:12px;line-height:1.9}
.cmf-empty--cta span{display:block;font-size:25px;margin-bottom:4px}.cmf-empty--cta b{display:block;color:#2b5c3c;font-size:13px;margin-bottom:3px}.cmf-empty--cta p{margin:0;font-size:11.5px}
@media(max-width:640px){.cmf-shell--calc{padding:17px;border-radius:19px}.cmf-form-row{grid-template-columns:1fr}.cmf-comment{padding:10px}.cmf-avatar{width:33px;height:33px;border-radius:11px}.cmf-head h2{font-size:20px}.cmf-list,.cmf-composer{max-width:none}}
@media(prefers-reduced-motion:reduce){.cmf-orb{animation:none}.cmf-comment{transition:none}}