@import "tailwindcss";

html, body {
  background-color: #efefef;
}

/* Every enabled button gets a pointer cursor by default. Disabled buttons keep
   the browser default, and any per-element `cursor-*` utility still wins since
   utilities are layered above base. */
@layer base {
  button:not(:disabled) {
    cursor: pointer;
  }
}

:root {
  /* Grayscale / Neutrals */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-black-10: rgba(0, 0, 0, 0.1);
  --color-black-70: rgba(0, 0, 0, 0.7);

  --color-gray-25: #fafafa;
  --color-gray-50: #fbfbfb;
  --color-gray-75: #f9f9f9;
  --color-gray-100: #f8f8f8;
  --color-gray-115: #f8f9fa;
  --color-gray-125: #f0f0f0;
  --color-gray-135: #f3f3f3;
  --color-gray-145: #f1f1f1;
  --color-gray-150: #f4f4f4;
  --color-gray-175: rgba(150, 150, 150, 0.2);
  --color-gray-200: #ebebee;
  --color-gray-215: #e9e9e9;
  --color-gray-225: #f0f2f5;
  --color-gray-235: #e5e7eb;
  --color-gray-250: #eaeaea;
  --color-gray-275: #cecece;
  --color-gray-285: #dfdfdf;
  --color-gray-300: #d9d9d9;
  --color-gray-350: #bebebe;
  --color-gray-400: #aeaeae;
  --color-gray-475: #969696;
  --color-gray-500: #9e9e9e;
  --color-gray-515: #9d9d9d;
  --color-gray-550: #8f8f8f;
  --color-gray-575: #797979;
  --color-gray-585: #7a7a7a;
  --color-gray-590: #737373;
  --color-gray-600: #777777;
  --color-gray-700: #4e4e4e;
  --color-gray-725: #484848;
  --color-gray-605: #727272;
  --color-gray-615: #6c6c6c;
  --color-gray-770: #333333;
  --color-gray-775: #393939;
  --color-gray-800: #323232;
  --color-gray-815: #2a2a2a;
  --color-gray-845: #0a0a0a;
  --color-gray-900: #232323;

  /* Cool grays — standard Tailwind neutral scale, used by the My Content /
     My Account mockup-matched screens. Kept separate so the existing warm
     gray-* tokens (used app-wide) stay untouched. */
  --color-coolgray-50: #f9fafb;
  --color-coolgray-100: #f3f4f6;
  --color-coolgray-200: #e5e7eb;
  --color-coolgray-300: #d1d5db;
  --color-coolgray-400: #9ca3af;
  --color-coolgray-500: #6b7280;
  --color-coolgray-600: #4b5563;
  --color-coolgray-700: #374151;
  --color-coolgray-800: #1f2937;
  --color-coolgray-900: #111827;

  /* Blues & Teals */
  --color-blue-light: #08a1ee;
  --color-blue-light-hover: #078ecc;
  --color-blue-primary: #06a0eb;
  --color-blue-deep: #071428;
  --color-blue-navy: #0f2750;
  --color-blue-electric: #2662c8;
  --color-blue-muted: #5c6f7c;
  --color-blue-pending: #007aff;
  --color-blue-banner: #0b87c6;
  --color-blue-sky: #51bff8;
  --color-blue-soft: #a8e2ff;
  --color-blue-pale: #f1f6ff;
  --color-blue-icy: #f8fdff;
  --color-blue-deep-alt: #0a1a2f;

  /* Social brand colors */
  --color-brand-facebook: #0765fe;
  --color-brand-linkedin: #0077b5;
  --color-brand-whatsapp: #55eb4c;

  /* Accents */
  --color-yellow-gold: #ffc017;
  --color-red-bright: #f94343;
  --color-red-deep: #cc2329;
  --color-error: #ff3b30;
  --color-green-vibrant: #65e26b;
  --color-success: #4cd964;
  --color-cream: #fdf6eb;
  --color-off-white: #fafaf9;
  --color-beige: #e9d8ba;

  /* Specific Multi-values from screenshots */
  --color-surface-80: rgba(40, 40, 40, 0.8);
  --color-white-20: rgba(255, 255, 255, 0.2);

  /* Gradients (Ready to use as background-image) */
  --grad-blue-primary: linear-gradient(to bottom, #163b78, #2662c8);
  --grad-blue-alt: linear-gradient(to bottom, #2562c8, #2662c8);
  --grad-silver: linear-gradient(to bottom, #ececec, #dcdcdc);
  --grad-sky: linear-gradient(to bottom, #55bff4, #0f8bc9);

  /* New Brand Colors from screenshot & prompts */
  --color-brand-bg-start: #071428;
  --color-brand-bg-end: #0f2750;
  --color-brand-blue-primary: #08a1ee;
  --color-brand-border-light: #d3def1;
  --color-brand-border-card: #e2e2e2;
  --color-brand-navy-dark: #173e7e;
  --color-brand-border-alt: #cdd0d4;
  --color-brand-blue-mid: #1c59c0;
  --color-brand-blue-base: #163b78;
  --color-brand-blue-vibrant: #1e4ea0;
  --color-brand-blue-electric: #2662c8;
  --color-brand-blue-cyan: #08a1ee;
  --Primary: #08a1ee;

  /* Composite Gradients */
  --grad-brand-hero: linear-gradient(
    180deg,
    var(--color-brand-bg-start) 0%,
    var(--color-brand-bg-end) 100%
  );
  --grad-brand-btn: linear-gradient(
    180deg,
    var(--color-brand-bg-start) 0%,
    var(--color-brand-blue-electric) 100%
  );
  --grad-brand-card: linear-gradient(
    180deg,
    var(--color-brand-blue-base) 0%,
    var(--color-brand-blue-electric) 100%
  );
  --grad-membership-paywall: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.51) 0%,
    #ffffff 20%
  );
}

@theme {
  --breakpoint-xs: 400px;
}

@theme inline {
  --font-sans: var(--font-inter);
  --font-poppins: var(--font-poppins);
  --font-serif: var(--font-source-serif);
  /* System UI stack — matches the My Content mockup's body font. */
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --color-white: var(--color-white);
  --color-black: var(--color-black);
  --color-black-10: var(--color-black-10);
  --color-black-70: var(--color-black-70);

  --color-gray-25: var(--color-gray-25);
  --color-gray-50: var(--color-gray-50);
  --color-gray-75: var(--color-gray-75);
  --color-gray-100: var(--color-gray-100);
  --color-gray-115: var(--color-gray-115);
  --color-gray-125: var(--color-gray-125);
  --color-gray-135: var(--color-gray-135);
  --color-gray-145: var(--color-gray-145);
  --color-gray-150: var(--color-gray-150);
  --color-gray-175: var(--color-gray-175);
  --color-gray-200: var(--color-gray-200);
  --color-gray-215: var(--color-gray-215);
  --color-gray-225: var(--color-gray-225);
  --color-gray-235: var(--color-gray-235);
  --color-gray-250: var(--color-gray-250);
  --color-gray-275: var(--color-gray-275);
  --color-gray-285: var(--color-gray-285);
  --color-gray-300: var(--color-gray-300);
  --color-gray-350: var(--color-gray-350);
  --color-gray-400: var(--color-gray-400);
  --color-gray-475: var(--color-gray-475);
  --color-gray-500: var(--color-gray-500);
  --color-gray-515: var(--color-gray-515);
  --color-gray-550: var(--color-gray-550);
  --color-gray-575: var(--color-gray-575);
  --color-gray-585: var(--color-gray-585);
  --color-gray-590: var(--color-gray-590);
  --color-gray-600: var(--color-gray-600);
  --color-gray-700: var(--color-gray-700);
  --color-gray-725: var(--color-gray-725);
  --color-gray-605: var(--color-gray-605);
  --color-gray-615: var(--color-gray-615);
  --color-gray-770: var(--color-gray-770);
  --color-gray-775: var(--color-gray-775);
  --color-gray-800: var(--color-gray-800);
  --color-gray-815: var(--color-gray-815);
  --color-gray-845: var(--color-gray-845);
  --color-gray-900: var(--color-gray-900);

  --color-coolgray-50: var(--color-coolgray-50);
  --color-coolgray-100: var(--color-coolgray-100);
  --color-coolgray-200: var(--color-coolgray-200);
  --color-coolgray-300: var(--color-coolgray-300);
  --color-coolgray-400: var(--color-coolgray-400);
  --color-coolgray-500: var(--color-coolgray-500);
  --color-coolgray-600: var(--color-coolgray-600);
  --color-coolgray-700: var(--color-coolgray-700);
  --color-coolgray-800: var(--color-coolgray-800);
  --color-coolgray-900: var(--color-coolgray-900);

  --color-blue-light: var(--color-blue-light);
  --color-blue-light-hover: var(--color-blue-light-hover);
  --color-blue-primary: var(--color-blue-primary);
  --color-blue-deep: var(--color-blue-deep);
  --color-blue-navy: var(--color-blue-navy);
  --color-blue-electric: var(--color-blue-electric);
  --color-blue-muted: var(--color-blue-muted);
  --color-blue-pending: var(--color-blue-pending);
  --color-blue-banner: var(--color-blue-banner);
  --color-blue-sky: var(--color-blue-sky);
  --color-blue-soft: var(--color-blue-soft);
  --color-blue-pale: var(--color-blue-pale);
  --color-blue-icy: var(--color-blue-icy);
  --color-blue-deep-alt: var(--color-blue-deep-alt);

  --color-brand-facebook: var(--color-brand-facebook);
  --color-brand-linkedin: var(--color-brand-linkedin);
  --color-brand-whatsapp: var(--color-brand-whatsapp);

  --color-yellow-gold: var(--color-yellow-gold);
  --color-red-bright: var(--color-red-bright);
  --color-red-deep: var(--color-red-deep);
  --color-error: var(--color-error);
  --color-green-vibrant: var(--color-green-vibrant);
  --color-success: var(--color-success);
  --color-cream: var(--color-cream);
  --color-off-white: var(--color-off-white);
  --color-beige: var(--color-beige);

  --color-surface-80: var(--color-surface-80);
  --color-white-20: var(--color-white-20);

  --color-brand-bg-start: var(--color-brand-bg-start);
  --color-brand-bg-end: var(--color-brand-bg-end);
  --color-brand-blue-primary: var(--color-brand-blue-primary);
  --color-brand-border-light: var(--color-brand-border-light);
  --color-brand-border-card: var(--color-brand-border-card);
  --color-brand-border-alt: var(--color-brand-border-alt);
  --color-brand-navy: var(--color-brand-navy-dark);
  --color-brand-blue-mid: var(--color-brand-blue-mid);
  --color-brand-blue-base: var(--color-brand-blue-base);
  --color-brand-blue-vibrant: var(--color-brand-blue-vibrant);
  --color-brand-blue-electric: var(--color-brand-blue-electric);
  --color-brand-blue-cyan: var(--color-brand-blue-cyan);

  --bg-brand-hero: var(--grad-brand-hero);
  --bg-brand-btn: var(--grad-brand-btn);
  --bg-brand-card: var(--grad-brand-card);
  --bg-membership-paywall: var(--grad-membership-paywall);

  --background-image-grad-blue-primary: linear-gradient(
    to bottom,
    #163b78,
    #2662c8
  );
  --background-image-grad-blue-alt: linear-gradient(
    to bottom,
    #2562c8,
    #2662c8
  );
  --background-image-grad-silver: linear-gradient(to bottom, #ececec, #dcdcdc);
  --background-image-grad-sky: linear-gradient(to bottom, #55bff4, #0f8bc9);
  --background-image-hero-main: linear-gradient(
    149deg,
    #2562c8 14.84%,
    #0f2750 85.16%
  );

  --background-image-nav-blue-main: linear-gradient(
    88deg,
    #2562c8 50.84%,
    #0f2750 210.16%
  );

  --animate-float: float 4s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* --background-image-nav1-blue-main: linear-gradient(
    180deg,
    #2562c8 94.84%,
    #0f2750 5.16%
  ); */

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}


/* Tiptap Editor Styles */
.tiptap {
  :first-child {
    margin-top: 0;
  }

  /* List styles */
  ul,
  ol {
    padding: 0 1rem;
    margin: 1.25rem 1rem 1.25rem 0.4rem;

    li p {
      margin-top: 0.25rem;
      margin-bottom: 0.25rem;
    }
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  /* Blockquote styles */
  blockquote {
    border-left: 3px solid var(--color-gray-200);
    margin: 1.5rem 0;
    padding-left: 1rem;
    font-style: italic;
    color: var(--color-gray-600);
  }

  /* Link styles */
  a {
    color: var(--color-blue-light);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: var(--color-blue-primary);
    }
  }

  /* Code styles */
  code {
    background-color: var(--color-gray-100);
    border-radius: 0.4rem;
    color: var(--color-black);
    font-size: 0.85rem;
    padding: 0.25rem 0.3rem;
  }

  pre {
    background: var(--color-gray-900);
    border-radius: 0.5rem;
    color: var(--color-white);
    font-family: "JetBrainsMono", monospace;
    margin: 1.5rem 0;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    max-width: 100%;

    code {
      background: none;
      color: inherit;
      font-size: 0.8rem;
      padding: 0;
    }
  }

  /* Image styles */
  img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0.75rem 0;
    border-radius: 0.5rem;
  }

  img.ProseMirror-selectednode {
    outline: 2px solid var(--color-blue-light);
  }
}

/* button {
  cursor: pointer;
} */

/* ─── Blog Content (WordPress HTML) ─── */
.blog-content,
.blog-content p {
  color: #1f2937;
  font-family: var(--font-sans);
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.625;
  margin-bottom: 16px;
}

.blog-content p:last-child {
  margin-bottom: 0;
}

/* h2 */
.blog-content h2 {
  color: #111827;
  font-family: var(--font-sans);
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 39px;
  margin-bottom: 8px;
}

/* h3 – h6 */
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
  color: #111827;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 30px;
  margin-bottom: 8px;
}

.blog-content h3 {
  font-size: 22px;
}
.blog-content h4 {
  font-size: 20px;
}
.blog-content h5 {
  font-size: 18px;
}
.blog-content h6 {
  font-size: 16px;
}

/* h1 (rare in post body, but handle it) */
.blog-content h1 {
  color: #111827;
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 44px;
  margin-bottom: 12px;
}

/* First heading needs no top margin */
.blog-content > h1:first-child,
.blog-content > h2:first-child,
.blog-content > h3:first-child {
  margin-top: 0;
}

/* Lists */
.blog-content ul,
.blog-content ol {
  color: #1f2937;
  font-family: var(--font-sans);
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.625;
  margin-bottom: 16px;
  padding-left: 24px;
}

.blog-content li + li {
  margin-top: 4px;
}

.blog-content ul {
  list-style-type: disc;
}

.blog-content ol {
  list-style-type: decimal;
}

.blog-content ul ul {
  list-style-type: circle;
  margin-bottom: 0;
}

.blog-content ol ol {
  list-style-type: lower-alpha;
  margin-bottom: 0;
}

/* Images */
.blog-content {
  overflow-x: hidden;
}

.blog-content pre {
  overflow-x: auto;
  max-width: 100%;
  white-space: pre;
}

.blog-content table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

.blog-content img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  margin: 16px 0;
  border-radius: 8px;
}

.blog-content img.aligncenter {
  width: auto !important;
  height: auto;
  display: block;
  /* margin: 20px auto; */
}

.blog-content img.alignleft {
  float: left;
  height: auto;
  margin-right: 24px;
  margin-bottom: 16px;
}

.blog-content img.alignright {
  float: right;
  height: auto;
  margin-left: 24px;
  margin-bottom: 16px;
}

/* Anchor wrapping an image → behave like a block */
.blog-content a:has(img) {
  display: block;
  margin: 20px 0;
  text-decoration: none;
}

.blog-content a:has(img.aligncenter) {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Links */
.blog-content a {
  color: #08a1ee;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-content a:hover {
  color: #078ecc;
}

/* Blockquote */
.blog-content blockquote {
  border-left: 4px solid #60a5fa;
  padding: 4px 0 4px 20px;
  margin: 16px 0;
  font-style: italic;
  color: #4b5563;
  font-size: 17px;
  line-height: 1.625;
}

/* Strong / Em */
.blog-content strong,
.blog-content b {
  font-weight: 700;
  color: inherit;
}

.blog-content em,
.blog-content i {
  font-style: italic;
}

/* Tables */
.blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-size: 18px;
  line-height: 1.5;
  opacity: 1;
}

.blog-content th,
.blog-content td {
  padding: 12px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
  vertical-align: top;
  color: #1f2937;
  font-family: var(--font-sans);
}

.blog-content th {
  background: #f8f8f8;
  font-weight: 600;
  color: #232323;
}

/* HR */
.blog-content hr {
  border: none;
  border-top: 1px solid #f1f1f1;
  margin: 40px 0;
  opacity: 1;
}

/* Clearfix for floated images */
.blog-content::after {
  content: "";
  display: table;
  clear: both;
}

/* FAQ accordion */
.blog-content .blog-faq {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 32px 0;
}

.blog-content .blog-faq details {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.06);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.blog-content .blog-faq details[open] {
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.08);
}

.blog-content .blog-faq summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-sans);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: #1e40af;
  user-select: none;
}

.blog-content .blog-faq summary::-webkit-details-marker {
  display: none;
}

.blog-content .blog-faq summary::before {
  content: "+";
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  padding-bottom: 2px;
}

.blog-content .blog-faq details[open] summary {
  background: linear-gradient(180deg, #eff6ff 0%, #f5f9ff 100%);
}

.blog-content .blog-faq details[open] summary::before {
  content: "\2212"; /* minus sign */
}

.blog-content .blog-faq details p {
  font-family: var(--font-sans);
  margin: 0;
  padding: 4px 24px 20px 72px;
  color: #1f2937;
  font-size: 19px;
  line-height: 1.625;
}

@media (max-width: 640px) {
  .blog-content .blog-faq summary {
    font-size: 16px;
    padding: 16px 18px;
  }
  .blog-content .blog-faq details p {
    padding: 4px 18px 18px 66px;
  }
}

/* Rich answer prose */
.prose-rich b, .prose-rich strong { font-weight: 700; }
.prose-rich em, .prose-rich i { font-style: italic; }
.prose-rich u { text-decoration: underline; }
.prose-rich a { color: #2563eb; text-decoration: underline; word-break: break-word; }
.prose-rich a:hover { color: #1d4ed8; }
.prose-rich ul { list-style-type: disc; padding-left: 1.25rem; margin-bottom: 0.75rem; }
.prose-rich ol { list-style-type: decimal; padding-left: 1.25rem; }
.prose-rich li { color: #374151; line-height: 1.7; margin-bottom: 0.25rem; font-size: 14px; }
.prose-rich p { font-size: 14px; color: #374151; line-height: 1.7; margin-bottom: 0.75rem; }
.prose-rich p:last-child { margin-bottom: 0; }
.prose-rich blockquote {
  border-left: 4px solid #93c5fd;
  padding: 0.5rem 1rem 0.5rem 1rem;
  margin: 0.875rem 0;
  background: rgba(239,246,255,0.6);
  border-radius: 0 0.625rem 0.625rem 0;
  font-style: italic;
  color: #6b7280;
  font-size: 13.5px;
  line-height: 1.65;
}

/* Rich text editor */
.rte-wrap { border: 1px solid #bfdbfe; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.07); }
.rte-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid #dbeafe; background: rgba(239,246,255,0.4); }
.rte-header-label { font-size: 11px; font-weight: 600; color: #1d4ed8; letter-spacing: .06em; text-transform: uppercase; }
.rte-header-close { display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:4px;cursor:pointer;color:#93c5fd;transition:background .1s,color .1s; }
.rte-header-close:hover { background:#dbeafe;color:#2563eb; }
.rte-toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 10px; background: #f9fafb; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; flex-wrap: wrap; }
.rte-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; border-radius: 4px; cursor: pointer; color: #4b5563; font-size: 13px; font-weight: 600; transition: background .1s; }
.rte-btn:hover { background: #e5e7eb; color: #111827; }
.rte-btn.active { background: #dbeafe; color: #2563eb; }
.rte-sep { width: 1px; height: 16px; background: #d1d5db; margin: 0 4px; }
.rte-body { min-height: 140px; padding: 10px 12px; font-size: 14px; color: #111827; line-height: 1.7; outline: none; font-family: 'Inter', sans-serif; border-top: none; border-bottom: none; }
.rte-body b, .rte-body strong { font-weight: 700; }
.rte-body em, .rte-body i { font-style: italic; }
.rte-body u { text-decoration: underline; }
.rte-body ul { list-style-type: disc; padding-left: 1.25rem; }
.rte-body ol { list-style-type: decimal; padding-left: 1.25rem; }
.rte-body blockquote { border-left: 4px solid #93c5fd; padding: .375rem .875rem; margin: .5rem 0; background: rgba(239,246,255,.6); border-radius: 0 .5rem .5rem 0; font-style: italic; color: #6b7280; font-size: 13.5px; }
.rte-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid #e5e7eb; background: rgba(249,250,251,0.6); }
.rte-footer-right { display: flex; gap: 8px; }
.rte-btn-cancel { padding:6px 12px;font-size:13px;font-weight:500;border-radius:8px;border:1px solid #e5e7eb;color:#4b5563;background:#fff;cursor:pointer;font-family:'Inter',sans-serif;transition:background .1s; }
.rte-btn-cancel:hover { background:#f9fafb; }
.rte-btn-draft { padding:6px 12px;font-size:13px;font-weight:500;border-radius:8px;border:1px solid #d1d5db;color:#4b5563;background:#fff;cursor:pointer;font-family:'Inter',sans-serif;transition:background .1s; }
.rte-btn-draft:hover { background:#f9fafb; }
.rte-btn-submit { padding:6px 14px;font-size:13px;font-weight:600;border-radius:8px;background:#2563eb;color:#fff;border:none;cursor:pointer;font-family:'Inter',sans-serif;transition:background .1s; }
.rte-btn-submit:hover { background:#1d4ed8; }

/* Three footer buttons crowd on small phones — tighten spacing/padding. */
@media (max-width: 480px) {
  .rte-footer { padding: 8px 10px; gap: 6px; }
  .rte-footer-right { gap: 6px; }
  .rte-btn-cancel, .rte-btn-draft { padding: 6px 9px; font-size: 12px; }
  .rte-btn-submit { padding: 6px 10px; font-size: 12px; }
}

/* Sidebar links */
.sidebar-qlink { display:block;padding:14px 0;border-bottom:1px solid #f3f4f6;text-decoration:none; }
.sidebar-qlink:last-child { border-bottom:none;padding-bottom:0; }
.sidebar-qlink:hover .sidebar-title { color:#3b82f6; }
.sidebar-blink { display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid #f3f4f6;text-decoration:none; }
.sidebar-blink:last-child { border-bottom:none;padding-bottom:0; }
.sidebar-blink:hover .sidebar-title { color:#3b82f6; }
.sidebar-title { font-size:13px;font-weight:500;color:#1f2937;line-height:1.4;transition:color .15s; }
.sidebar-meta { font-size:11px;font-weight:600;color:#9ca3af;margin-top:2px; }

/* Fullscreen overlay */
#rte-fullscreen { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.45); align-items: center; justify-content: center; }
#rte-fullscreen.open { display: flex; }
#rte-inner-fs { background: #fff; border-radius: 16px; width: 720px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.18); }