/* Blog post page styles — from blog/post.cfm */
/* ===== ARTICLE + RIGHT WIDGET LAYOUT ===== */
    .bp-layout {
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: 2.5rem;
        align-items: start;
    }

    /* ===== ARTICLE AREA ===== */
    .bp-article {
        min-width: 0;
    }

    /* Breadcrumb */
    .bp-breadcrumb {
        display: inline-flex; align-items: center; gap: 6px;
        color: #6F6F87; text-decoration: none; font-size: 0.875rem; font-weight: 500;
        margin-bottom: 1rem;
    }
    .bp-breadcrumb:hover { color: #8D75E6; }
    [data-theme="dark"] .bp-breadcrumb { color: rgba(255,255,255,0.5); }
    [data-theme="dark"] .bp-breadcrumb:hover { color: #c4b5fd; }
    .bp-breadcrumb svg { width: 16px; height: 16px; }

    /* Feature Image */
    .bp-feature-image {
        width: 100%;
        border-radius: 1rem;
        overflow: hidden;
        margin-bottom: 1.5rem;
        background: linear-gradient(135deg, #f3e8ff 0%, #e0d4f7 100%);
        border: 1px solid rgba(0, 0, 0, 0.06);
        transition: border-color 0.3s ease;
    }
    .bp-feature-image:hover {
        border-color: rgba(141, 117, 230, 0.3);
    }
    [data-theme="dark"] .bp-feature-image { border-color: rgba(255, 255, 255, 0.06); }
    [data-theme="dark"] .bp-feature-image:hover { border-color: rgba(168, 148, 240, 0.35); }
    .bp-feature-image img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Article Header */
    .bp-article-header {
        padding-bottom: 1.5rem;
        margin-bottom: 1.5rem;
        border-bottom: 1px solid #e5e7eb;
    }
    [data-theme="dark"] .bp-article-header { border-bottom-color: rgba(255,255,255,0.1); }
    .bp-meta {
        display: flex; flex-wrap: wrap; gap: 0.75rem;
        align-items: center; font-size: 0.875rem; margin-top: 0.75rem;
    }
    .bp-category {
        padding: 0.25rem 0.75rem; background: #f3e8ff; color: #8D75E6;
        border-radius: 999px; font-weight: 500; font-size: 0.8125rem;
    }
    [data-theme="dark"] .bp-category { background: #2A1B3E; color: #c4b5fd; }
    .bp-meta-item {
        display: flex; align-items: center; gap: 0.5rem; color: #6b7280;
    }
    .bp-meta-item svg { width: 16px; height: 16px; }
    [data-theme="dark"] .bp-meta-item { color: rgba(255,255,255,0.5); }

    .bp-title {
        font-size: 2.25rem; font-weight: 700; line-height: 1.2;
        margin-bottom: 0.5rem; color: #231E41;
    }
    [data-theme="dark"] .bp-title { color: #FFFFFF; }
    .bp-subtitle {
        font-size: 1.0625rem; line-height: 1.6; color: #6F6F87; margin-bottom: 0;
    }
    [data-theme="dark"] .bp-subtitle { color: rgba(255,255,255,0.6); }

    /* ===== SPECTRUM AUDIO PLAYER (from login.cfm) ===== */
    .audio-player {
        margin-top: 1.25rem;
        width: 100%;
    }
    .audio-player-card {
        background: #F8F7F4;
        border-radius: 0.75rem;
        padding: 1.25rem;
        width: 100%;
        box-sizing: border-box;
    }
    [data-theme="dark"] .audio-player-card {
        background: #1A1B2E;
    }
    /* Admin regenerate button on player */
    .bp-player-regen {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 0.75rem;
        padding: 6px 14px;
        background: transparent;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        font-size: 0.75rem;
        color: #6b7280;
        cursor: pointer;
        transition: all 0.2s;
    }
    .bp-player-regen:hover {
        border-color: #8D75E6;
        color: #8D75E6;
    }
    .bp-player-regen:disabled {
        opacity: 0.5;
        pointer-events: none;
    }
    [data-theme="dark"] .bp-player-regen {
        border-color: rgba(255,255,255,0.15);
        color: rgba(255,255,255,0.5);
    }
    [data-theme="dark"] .bp-player-regen:hover {
        border-color: #c4b5fd;
        color: #c4b5fd;
    }

    /* Generating state — pulse the play button */
    .play-button.generating {
        opacity: 0.5;
        animation: genPulse 1.5s ease-in-out infinite;
        pointer-events: none;
    }
    @keyframes genPulse {
        0%, 100% { opacity: 0.4; }
        50% { opacity: 0.7; }
    }
    .audio-player-inner {
        display: flex;
        align-items: center;
        gap: 0.875rem;
    }
    .play-button {
        flex-shrink: 0;
        width: 3rem;
        height: 3rem;
        background: #7D65D6;
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .play-button:hover { background: #6D55C6; }
    .play-icon, .pause-icon { color: white; fill: white; }
    .pause-icon { display: none; }
    .play-button.playing .play-icon { display: none; }
    .play-button.playing .pause-icon { display: block; }

    .track-info { flex: 1; min-width: 0; }
    .track-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.25rem;
    }
    .track-title {
        font-size: 1rem;
        font-weight: 500;
        color: #231E41;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
    }
    [data-theme="dark"] .track-title { color: #FFFFFF; }
    .track-header-right {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
    }
    .mute-button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        color: #8D75E6;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mute-button:hover { color: #7D65D6; }
    .time-display {
        font-size: 0.75rem;
        color: #8D75E6;
        font-weight: 500;
        white-space: nowrap;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }
    .track-artist {
        font-size: 0.875rem;
        color: #6F6F87;
        margin-bottom: 0.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    [data-theme="dark"] .track-artist { color: rgba(255,255,255,0.5); }
    .spectrum-canvas {
        width: 100%;
        height: 2rem;
        border-radius: 4px;
    }

    /* ===== RIGHT SIDEBAR WIDGET ===== */
    .bp-widget-sidebar {
        position: sticky;
        top: 100px;
        margin-top: 2.375rem; /* offset past breadcrumb to align with feature image */
    }
    .bp-recent-widget {
        background: white;
        border-radius: 12px;
        border: 1px solid #E5E7EB;
        overflow: hidden;
    }
    [data-theme="dark"] .bp-recent-widget { background: #1A1B2E; border-color: rgba(255,255,255,0.1); }

    .bp-widget-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid #E5E7EB;
    }
    [data-theme="dark"] .bp-widget-header { border-bottom-color: rgba(255,255,255,0.1); }
    .bp-widget-title {
        font-size: 0.9375rem;
        font-weight: 600;
        color: #231E41;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    [data-theme="dark"] .bp-widget-title { color: #FFFFFF; }
    .bp-widget-title svg { width: 16px; height: 16px; color: #8D75E6; }

    .bp-widget-body { padding: 0; }

    .bp-widget-item {
        display: flex;
        gap: 14px;
        padding: 16px 20px;
        text-decoration: none;
        border-bottom: 1px solid #F3F4F6;
        transition: background 0.15s;
    }
    .bp-widget-item:last-child { border-bottom: none; }
    .bp-widget-item:hover { background: #FAF9FE; }
    [data-theme="dark"] .bp-widget-item { border-bottom-color: rgba(255,255,255,0.06); }
    [data-theme="dark"] .bp-widget-item:hover { background: rgba(255,255,255,0.04); }

    .bp-widget-item-content { flex: 1; min-width: 0; }
    .bp-widget-item-title {
        font-size: 0.875rem;
        font-weight: 600;
        color: #231E41;
        line-height: 1.4;
        margin-bottom: 4px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    [data-theme="dark"] .bp-widget-item-title { color: #FFFFFF; }
    .bp-widget-item:hover .bp-widget-item-title { color: #8D75E6; }
    [data-theme="dark"] .bp-widget-item:hover .bp-widget-item-title { color: #c4b5fd; }
    .bp-widget-item-desc {
        font-size: 0.8125rem;
        color: #6F6F87;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 6px;
    }
    [data-theme="dark"] .bp-widget-item-desc { color: rgba(255,255,255,0.5); }
    .bp-widget-item-meta {
        font-size: 0.75rem;
        color: #9CA3AF;
    }
    [data-theme="dark"] .bp-widget-item-meta { color: rgba(255,255,255,0.35); }

    .bp-widget-item-thumb {
        width: 72px;
        height: 72px;
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;
        border: 1px solid rgba(0, 0, 0, 0.06);
        transition: border-color 0.3s ease;
    }
    .bp-widget-item:hover .bp-widget-item-thumb {
        border-color: rgba(141, 117, 230, 0.3);
    }
    [data-theme="dark"] .bp-widget-item-thumb { border-color: rgba(255, 255, 255, 0.06); }
    [data-theme="dark"] .bp-widget-item:hover .bp-widget-item-thumb { border-color: rgba(168, 148, 240, 0.35); }
    .bp-widget-item-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Accordion toggle */
    .bp-widget-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        padding: 12px 20px;
        border: none;
        border-top: 1px solid #F3F4F6;
        background: none;
        cursor: pointer;
        font-size: 0.8125rem;
        font-weight: 500;
        color: #8D75E6;
        transition: background 0.15s;
    }
    .bp-widget-toggle:hover { background: #FAF9FE; }
    [data-theme="dark"] .bp-widget-toggle { border-top-color: rgba(255,255,255,0.06); }
    [data-theme="dark"] .bp-widget-toggle:hover { background: rgba(255,255,255,0.04); }
    .bp-widget-toggle svg {
        width: 14px; height: 14px;
        transition: transform 0.2s;
    }
    .bp-widget-toggle.expanded svg { transform: rotate(180deg); }

    /* Expanded articles section */
    .bp-widget-more {
        display: none;
    }
    .bp-widget-more.open {
        display: block;
    }

    /* ===== ARTICLE CONTENT (markdown) ===== */
    .bp-content {
        line-height: 1.8;
        font-size: 16px;
        color: #374151;
    }
    [data-theme="dark"] .bp-content { color: #E2E8F0; }

    .bp-content h1 {
        font-size: 2rem; font-weight: 700; line-height: 1.2;
        margin: 0 0 16px 0; color: #231E41; display: none;
    }
    .bp-content h2 {
        font-size: 1.5rem; font-weight: 700; margin: 0.75rem 0 0.375rem 0;
        color: #231E41; border-bottom: 1px solid #E5E7EB; padding-bottom: 4px;
    }
    .bp-content h3 { font-size: 1.25rem; font-weight: 600; margin: 0.625rem 0 0.2rem 0; color: #231E41; }
    .bp-content h4 { font-size: 1.0625rem; font-weight: 600; margin: 0.5rem 0 0.125rem 0; color: #231E41; }
    .bp-content p { margin: 0 0 0.75rem 0; font-size: 1.0625rem; }
    .bp-content ul, .bp-content ol { margin: 0 0 0.75rem 0; padding-left: 1.5rem; }
    .bp-content li { margin-bottom: 0.35rem; }
    .bp-content strong { font-weight: 600; }
    .bp-content em { font-style: italic; }
    .bp-content hr { border: none; border-top: 1px solid #E5E7EB; margin: 1rem 0; }
    .bp-content pre {
        background: #1E1E2E; color: #CDD6F4; border-radius: 8px;
        padding: 20px; overflow-x: auto; margin: 16px 0 24px 0;
        font-size: 13px; line-height: 1.5;
        font-family: 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace;
        white-space: pre; tab-size: 4;
    }
    .bp-content code {
        background: #f3e8ff; color: #8D75E6;
        padding: 2px 6px; border-radius: 4px; font-size: 0.9em;
        font-family: 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace;
    }
    .bp-content pre code {
        background: none; color: inherit; padding: 0; border-radius: 0;
        font-size: 13px; white-space: pre;
    }
    .bp-content table { width: 100%; border-collapse: collapse; margin: 16px 0 24px 0; font-size: 14px; }
    .bp-content th { background: #F8F7F4; font-weight: 600; text-align: left; padding: 10px 14px; border: 1px solid #E5E7EB; }
    .bp-content td { padding: 10px 14px; border: 1px solid #E5E7EB; }
    .bp-content blockquote {
        border-left: 3px solid #8D75E6; padding: 12px 20px; margin: 16px 0;
        color: #6F6F87; background: #F8F7F4; border-radius: 0 8px 8px 0;
    }
    .bp-content a { color: #8D75E6; text-decoration: none; }
    .bp-content a:hover { text-decoration: underline; }

    [data-theme="dark"] .bp-content h1,
    [data-theme="dark"] .bp-content h2,
    [data-theme="dark"] .bp-content h3,
    [data-theme="dark"] .bp-content h4 { color: #FFFFFF; }
    [data-theme="dark"] .bp-content h2 { border-bottom-color: rgba(255,255,255,0.1); }
    [data-theme="dark"] .bp-content hr { border-top-color: rgba(255,255,255,0.1); }
    [data-theme="dark"] .bp-content code { background: #2A2B3E; color: #C4B5FD; }
    [data-theme="dark"] .bp-content pre { background: #0D1117; }
    [data-theme="dark"] .bp-content th { background: #1A1B2E; border-color: rgba(255,255,255,0.1); }
    [data-theme="dark"] .bp-content td { border-color: rgba(255,255,255,0.1); }
    [data-theme="dark"] .bp-content blockquote { background: #1A1B2E; color: rgba(255,255,255,0.6); }

    /* ===== PREV/NEXT NAVIGATION ===== */
    .bp-navigation {
        display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
        padding-top: 2.5rem; margin-top: 2.5rem; border-top: 1px solid #e5e7eb;
    }
    [data-theme="dark"] .bp-navigation { border-top-color: rgba(255,255,255,0.1); }
    .bp-nav-card {
        padding: 1.25rem; border: 1px solid #e5e7eb; border-radius: 0.75rem;
        text-decoration: none; transition: all 0.2s; display: block;
    }
    .bp-nav-card:hover { border-color: #d8b4fe; background: #faf5ff; }
    [data-theme="dark"] .bp-nav-card { border-color: rgba(255,255,255,0.1); }
    [data-theme="dark"] .bp-nav-card:hover { border-color: #7c3aed; background: #1A1B2E; }
    .bp-nav-label { font-size: 0.8125rem; color: #8D75E6; margin-bottom: 0.5rem; font-weight: 500; }
    .bp-nav-title { font-weight: 600; color: #231E41; margin-bottom: 0.25rem; font-size: 0.875rem; line-height: 1.4; }
    [data-theme="dark"] .bp-nav-title { color: #FFFFFF; }
    .bp-nav-desc {
        font-size: 0.8125rem; color: #6b7280; line-height: 1.5;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    [data-theme="dark"] .bp-nav-desc { color: rgba(255,255,255,0.5); }
    .bp-nav-empty { visibility: hidden; }

    /* ===== NOT FOUND ===== */
    .bp-not-found { text-align: center; padding: 5rem 2rem; }
    .bp-not-found h2 { font-size: 1.5rem; color: #231E41; margin-bottom: 0.75rem; }
    .bp-not-found p { color: #6F6F87; }
    .bp-not-found a { color: #8D75E6; text-decoration: none; }
    [data-theme="dark"] .bp-not-found h2 { color: #FFFFFF; }
    [data-theme="dark"] .bp-not-found p { color: rgba(255,255,255,0.6); }

    /* ===== ADMIN EDIT BUTTON ===== */
    .bp-admin-edit {
        position: fixed; top: 80px; right: 24px; z-index: 50;
        width: 44px; height: 44px; border-radius: 50%;
        background: white; border: 1px solid #e5e7eb;
        cursor: pointer; font-size: 1.25rem; display: flex;
        align-items: center; justify-content: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.2s;
    }
    .bp-admin-edit:hover { border-color: #9333ea; box-shadow: 0 4px 12px rgba(147,51,234,0.2); }
    [data-theme="dark"] .bp-admin-edit { background: #1A1B2E; border-color: rgba(255,255,255,0.1); color: #E2E8F0; }

    /* ===== ADMIN EDITOR OVERLAY ===== */
    .bp-editor-overlay {
        position: fixed; inset: 0; z-index: 1000; background: white;
        display: flex; flex-direction: column;
    }
    [data-theme="dark"] .bp-editor-overlay { background: #0F1629; }
    .bp-editor-toolbar {
        display: flex; align-items: center; justify-content: space-between;
        padding: 0.75rem 1.5rem; border-bottom: 1px solid #e5e7eb;
        flex-shrink: 0;
    }
    [data-theme="dark"] .bp-editor-toolbar { border-bottom-color: rgba(255,255,255,0.1); }
    .bp-editor-title { font-weight: 600; font-size: 1rem; color: #231E41; }
    [data-theme="dark"] .bp-editor-title { color: #FFFFFF; }
    .bp-editor-actions { display: flex; gap: 0.5rem; }
    .bp-editor-btn {
        padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem;
        font-weight: 500; cursor: pointer; transition: all 0.2s; border: 1px solid #e5e7eb;
        background: white; color: #374151;
    }
    .bp-editor-btn:hover { border-color: #9333ea; color: #9333ea; }
    .bp-editor-btn.primary { background: #9333ea; color: white; border-color: #9333ea; }
    .bp-editor-btn.primary:hover { background: #7e22ce; }
    .bp-editor-btn.close-btn { background: transparent; border: none; font-size: 1.25rem; color: #6b7280; padding: 0.5rem; }
    .bp-editor-btn.close-btn:hover { color: #231E41; }
    [data-theme="dark"] .bp-editor-btn { background: #1A1B2E; border-color: rgba(255,255,255,0.1); color: #E2E8F0; }
    [data-theme="dark"] .bp-editor-btn:hover { border-color: #7c3aed; color: #c4b5fd; }
    [data-theme="dark"] .bp-editor-btn.primary { background: #7c3aed; border-color: #7c3aed; color: white; }

    .bp-editor-meta {
        display: flex; gap: 1rem; padding: 0.75rem 1.5rem;
        border-bottom: 1px solid #e5e7eb; flex-shrink: 0;
        background: #FAFAFA;
    }
    [data-theme="dark"] .bp-editor-meta { background: #131627; border-bottom-color: rgba(255,255,255,0.1); }
    .bp-editor-meta-field {
        display: flex; align-items: center; gap: 0.5rem; flex: 1;
    }
    .bp-editor-meta-field label {
        font-size: 0.75rem; font-weight: 600; color: #6F6F87;
        white-space: nowrap; flex-shrink: 0;
    }
    [data-theme="dark"] .bp-editor-meta-field label { color: rgba(255,255,255,0.5); }
    .bp-editor-meta-field input {
        flex: 1; padding: 0.375rem 0.625rem; border: 1px solid #E5E7EB;
        border-radius: 6px; font-size: 0.8125rem; color: #231E41;
        background: white; outline: none; transition: border-color 0.2s;
    }
    .bp-editor-meta-field input:focus { border-color: #8D75E6; }
    [data-theme="dark"] .bp-editor-meta-field input {
        background: #0F1629; border-color: rgba(255,255,255,0.15); color: #E2E8F0;
    }
    [data-theme="dark"] .bp-editor-meta-field input:focus { border-color: #7c3aed; }

    .bp-editor-body { flex: 1; overflow: hidden; position: relative; }
    .bp-editor-textarea {
        width: 100%; height: 100%; resize: none; border: none; outline: none;
        padding: 2rem; font-family: 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace;
        font-size: 14px; line-height: 1.6; color: #374151; background: white; tab-size: 4;
    }
    [data-theme="dark"] .bp-editor-textarea { background: #0F1629; color: #E2E8F0; }
    .bp-editor-preview {
        width: 100%; height: 100%; overflow-y: auto;
        padding: 2rem; display: none;
    }

    .bp-toast {
        position: fixed; bottom: 2rem; right: 2rem; z-index: 1001;
        padding: 0.75rem 1.5rem; border-radius: 8px; font-size: 0.875rem;
        font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        transform: translateY(100px); opacity: 0; transition: all 0.3s ease;
    }
    .bp-toast.show { transform: translateY(0); opacity: 1; }
    .bp-toast.success { background: #059669; color: white; }
    .bp-toast.error { background: #DC2626; color: white; }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1024px) {
        .bp-layout {
            grid-template-columns: 1fr;
        }
        .bp-widget-sidebar {
            position: static;
            order: 2;
        }
        .bp-article {
            order: 1;
        }
        .bp-title { font-size: 1.75rem; }
        .audio-player-card { padding: 1rem; }
        .play-button { width: 2.75rem; height: 2.75rem; }
        .track-title { font-size: 0.875rem; }
        .track-artist { font-size: 0.75rem; }
    }

    @media (max-width: 640px) {
        .bp-navigation { grid-template-columns: 1fr; }
        .bp-title { font-size: 1.5rem; }
        .bp-content pre { padding: 14px; font-size: 12px; }
        .audio-player-card { padding: 0.875rem; }
        .play-button { width: 2.5rem; height: 2.5rem; }
        .play-button svg { width: 18px; height: 18px; }
        .track-title { font-size: 0.8125rem; }
        .track-artist { font-size: 0.6875rem; }
        .spectrum-canvas { height: 1.5rem; }
    }

    /* Match the marketing pages' body-area gutters (50px desktop / 20px mobile) */
    .new-main { padding-left: 50px; padding-right: 50px; }
    @media (max-width: 900px) { .new-main { padding-left: 20px; padding-right: 20px; } }