@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

  .blog-detail-shell {
    position: relative;
    isolation: isolate;
    font-family: 'Manrope', 'Segoe UI', sans-serif;
  }

  .blog-detail-shell .public-display,
  .blog-detail-shell .public-title,
  .blog-detail-shell .public-lead,
  .blog-detail-shell .public-button,
  .blog-detail-shell .public-button-secondary,
  .blog-detail-shell input,
  .blog-detail-shell textarea,
  .blog-detail-shell button {
    font-family: inherit;
  }

  .blog-detail-shell .public-display {
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-wrap: balance;
  }

  .blog-detail-shell .public-title {
    letter-spacing: -0.025em;
    line-height: 1.1;
  }

  .blog-detail-shell .public-lead {
    line-height: 1.8;
  }

  /* ========================================================
     ISOLATED CONTENT CONTAINER
     Prevents global design system from overriding editor styles.
     Inline styles from CKEditor always take precedence.
     ======================================================== */
  .blog-content-editor-isolated {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #1f2937;
  }

  /* Critical: Prevent global theme variables from overriding inline editor styles */
  .blog-content-editor-isolated h1,
  .blog-content-editor-isolated h2,
  .blog-content-editor-isolated h3,
  .blog-content-editor-isolated h4,
  .blog-content-editor-isolated h5,
  .blog-content-editor-isolated h6 {
    margin: 1.5em 0 0.5em 0;
    /* DO NOT set color here - allow inline styles to work */
  }

  .blog-content-editor-isolated p {
    margin: 1em 0;
    /* DO NOT set color here - allow inline styles to work */
  }

  .blog-content-editor-isolated strong,
  .blog-content-editor-isolated b {
    font-weight: 700;
    /* DO NOT set color here - allow inline styles to work */
  }

  .blog-content-editor-isolated em,
  .blog-content-editor-isolated i {
    font-style: italic;
    /* DO NOT set color here - allow inline styles to work */
  }

  .blog-content-editor-isolated a {
    text-decoration: underline;
    /* DO NOT set color here - allow inline styles to work */
  }

  .blog-content-editor-isolated u {
    text-decoration: underline;
  }

  .blog-content-editor-isolated blockquote {
    margin: 1em 0;
    padding-left: 1em;
    border-left: 4px solid #d1d5db;
  }

  .blog-content-editor-isolated ul,
  .blog-content-editor-isolated ol {
    margin: 1em 0;
    padding-left: 2em;
  }

  .blog-content-editor-isolated li {
    margin: 0.5em 0;
  }

  .blog-content-editor-isolated code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
    background-color: #f3f4f6;
    padding: 0.2em 0.4em;
    border-radius: 0.3em;
  }

  .blog-content-editor-isolated pre {
    margin: 1em 0;
    padding: 1em;
    background-color: #1f2937;
    color: #f3f4f6;
    border-radius: 0.5em;
    overflow-x: auto;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  }

  .blog-content-editor-isolated pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
  }

  .blog-content-editor-isolated img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em 0;
    border-radius: 0.5em;
  }

  /* Dark mode: DO NOT override editor colors */
  body.theme-dark .blog-content-editor-isolated {
    /* Editor colors are independent of theme mode */
  }

  body.theme-dark .blog-content-editor-isolated h1,
  body.theme-dark .blog-content-editor-isolated h2,
  body.theme-dark .blog-content-editor-isolated h3,
  body.theme-dark .blog-content-editor-isolated p,
  body.theme-dark .blog-content-editor-isolated blockquote,
  body.theme-dark .blog-content-editor-isolated strong,
  body.theme-dark .blog-content-editor-isolated a,
  body.theme-dark .blog-content-editor-isolated li {
    /* DO NOT force colors in dark mode - respect editor's choices */
  }

  body.theme-dark .blog-content-editor-isolated {
    color: #f3f4f6;
  }

  body.theme-dark .blog-content-editor-isolated code {
    background-color: #374151;
    color: #f3f4f6;
  }

  /* Responsive typography */
  @media (max-width: 640px) {
    .blog-content-editor-isolated {
      font-size: 0.95rem;
      line-height: 1.5;
    }

    .blog-content-editor-isolated h1 {
      font-size: 1.75rem;
    }

    .blog-content-editor-isolated h2 {
      font-size: 1.5rem;
    }

    .blog-content-editor-isolated h3 {
      font-size: 1.25rem;
    }
  }

  .blog-detail-shell .detail-hero-meta {
    display: grid;
    gap: 0.9rem;
  }

  .blog-detail-shell .detail-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 1.2rem;
    border: 1px solid color-mix(in srgb, var(--public-panel-border, rgba(148, 163, 184, 0.18)) 92%, transparent);
    background: color-mix(in srgb, var(--public-subcard-bg, rgba(255, 255, 255, 0.76)) 84%, transparent);
  }

  .blog-detail-shell .detail-metric-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--public-text-soft, #94a3b8);
  }

  .blog-detail-shell .detail-metric-value {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--public-text-strong, #0f172a);
  }

  .blog-detail-shell .detail-panel,
  .blog-detail-shell .detail-article-card,
  .blog-detail-shell .themed-panel,
  .blog-detail-shell .themed-card {
    border-color: var(--public-panel-border, rgba(148, 163, 184, 0.18)) !important;
    background: color-mix(in srgb, var(--public-panel-bg, rgba(255, 255, 255, 0.9)) 90%, transparent) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(18px) saturate(145%);
  }

  .blog-detail-shell .detail-action-pill,
  .blog-detail-shell .detail-share-chip,
  .blog-detail-shell .detail-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--public-divider-color, rgba(148, 163, 184, 0.18)) 90%, transparent);
    background: color-mix(in srgb, var(--public-subcard-bg, rgba(255, 255, 255, 0.84)) 90%, transparent);
    color: var(--public-text-muted, #475569);
    transition: 180ms ease;
  }

  .blog-detail-shell .detail-action-pill:hover,
  .blog-detail-shell .detail-share-chip:hover,
  .blog-detail-shell .detail-link-chip:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--theme-primary) 24%, white);
    color: var(--public-text-strong, #0f172a);
  }

  .blog-detail-shell .detail-action-pill.is-liked {
    background: linear-gradient(135deg, #ec4899, #ef4444);
    border-color: transparent;
    color: white;
    box-shadow: 0 16px 28px rgba(236, 72, 153, 0.18);
  }

  .blog-detail-shell .detail-share-chip.is-accent {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    border-color: transparent;
    color: white;
  }

  .blog-detail-shell .detail-article-card {
    overflow: hidden;
    border-radius: 2rem;
  }

  /* NOTE: Editor content is now isolated in .blog-content-editor-isolated
     Global prose styles have been removed to allow editor-defined styles to take precedence */

  .blog-detail-shell .detail-section-heading {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 2rem;
  }

  .blog-detail-shell .detail-section-bar {
    width: 0.3rem;
    height: 2.4rem;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--theme-primary), var(--theme-secondary));
  }

  .blog-detail-shell .detail-form-card p > label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--public-text-strong, #0f172a);
    font-size: 0.92rem;
    font-weight: 700;
  }

  .blog-detail-shell .detail-form-card p > input,
  .blog-detail-shell .detail-form-card p > textarea,
  .blog-detail-shell .detail-form-card p > select,
  .blog-detail-shell .detail-form-card textarea,
  .blog-detail-shell .detail-form-card input[type='text'] {
    width: 100%;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--public-divider-color, rgba(148, 163, 184, 0.2)) 92%, transparent);
    background: color-mix(in srgb, var(--public-subcard-bg, rgba(255, 255, 255, 0.86)) 92%, transparent);
    padding: 0.95rem 1rem;
    color: var(--public-text-strong, #0f172a);
  }

  .blog-detail-shell .detail-form-card textarea:focus,
  .blog-detail-shell .detail-form-card input:focus,
  .blog-detail-shell .detail-form-card select:focus {
    outline: none;
    border-color: rgba(var(--theme-primary-rgb), 0.45);
    box-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb), 0.12);
  }

  .blog-detail-shell .detail-secondary-link {
    color: var(--theme-primary);
    font-weight: 700;
  }

  body.theme-dark .blog-detail-shell .detail-metric-value,
  body.theme-dark .blog-detail-shell .detail-form-card p > label,
  body.theme-dark .blog-detail-shell .text-gray-700,
  body.theme-dark .blog-detail-shell .text-gray-600,
  body.theme-dark .blog-detail-shell .text-gray-500,
  body.theme-dark .blog-detail-shell .detail-article-card .prose p,
  body.theme-dark .blog-detail-shell .detail-article-card .prose li,
  body.theme-dark .blog-detail-shell .detail-article-card .prose blockquote {
    /* Removed: These rules no longer apply to isolated editor content */
  }

  /* Dark mode does not override isolated blog content styles */
  body.theme-dark .blog-content-editor-isolated {
    /* Editor styles remain unchanged regardless of theme */
  }

  body.theme-dark .blog-detail-shell .bg-gray-100,
  body.theme-dark .blog-detail-shell .bg-gray-50,
  body.theme-dark .blog-detail-shell .bg-white,
  body.theme-dark .blog-detail-shell .from-blue-50,
  body.theme-dark .blog-detail-shell .to-indigo-50 {
    background: color-mix(in srgb, var(--public-subcard-bg, rgba(15, 23, 42, 0.9)) 90%, transparent) !important;
  }

  body.theme-dark .blog-detail-shell .border-gray-200,
  body.theme-dark .blog-detail-shell .border-gray-100,
  body.theme-dark .blog-detail-shell .border-blue-100 {
    border-color: var(--public-divider-color, rgba(96, 165, 250, 0.18)) !important;
  }

  body.theme-dark .blog-detail-shell #blog-hero-image-section .bg-blue-50,
  body.theme-dark .blog-detail-shell #blog-hero-image-section .bg-red-50,
  body.theme-dark .blog-detail-shell #blog-hero-image-section .from-indigo-50,
  body.theme-dark .blog-detail-shell #blog-hero-image-section .to-purple-50 {
    background: color-mix(in srgb, var(--public-subcard-bg, rgba(15, 23, 42, 0.9)) 92%, transparent) !important;
  }

  body.theme-dark .blog-detail-shell #blog-hero-image-section .border-blue-100,
  body.theme-dark .blog-detail-shell #blog-hero-image-section .border-red-100,
  body.theme-dark .blog-detail-shell #blog-hero-image-section .border-indigo-100,
  body.theme-dark .blog-detail-shell #blog-hero-image-section .border-indigo-200 {
    border-color: var(--public-divider-color, rgba(96, 165, 250, 0.2)) !important;
  }

  body.theme-dark .blog-detail-shell #blog-hero-image-section .text-blue-800,
  body.theme-dark .blog-detail-shell #blog-hero-image-section .text-red-800,
  body.theme-dark .blog-detail-shell #blog-hero-image-section .text-indigo-800,
  body.theme-dark .blog-detail-shell #blog-hero-image-section .text-indigo-700 {
    color: var(--public-text-strong, #f8fafc) !important;
  }

  body.theme-dark .blog-detail-shell #blog-hero-image-section .bg-white {
    background: color-mix(in srgb, var(--public-subcard-bg, rgba(15, 23, 42, 0.9)) 90%, transparent) !important;
  }

  body.theme-dark .blog-detail-shell #blog-hero-image-section button[class*='border'] {
    border-color: var(--public-divider-color, rgba(96, 165, 250, 0.25)) !important;
  }

  @media (max-width: 1024px) {
    .blog-detail-shell .public-hero-grid {
      grid-template-columns: 1fr;
    }
  }

  .blog-detail-shell .detail-toast {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 70;
    max-width: min(92vw, 26rem);
    border-radius: 0.9rem;
    padding: 0.75rem 0.95rem;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .blog-detail-shell .detail-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .blog-detail-shell .detail-toast.is-success {
    background: linear-gradient(135deg, #16a34a, #15803d);
  }

  .blog-detail-shell .detail-toast.is-error {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
  }

  .blog-detail-shell .detail-toast.is-warning {
    background: linear-gradient(135deg, #d97706, #b45309);
  }