/* ===== Blog Feature Styles (Simple Blog Manager theme) ===== */

/* Page background: soft, fixed gradient that stays clean on long/scrolling pages
   (overrides the repeating diagonal body gradient from custom.css). */
body {
    background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 100%) fixed;
    min-height: 100vh;
}

/* ===== Public site header (Visual Capitalist style) ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-topbar {
    background: #1f2430;
    color: #e5e7eb;
}
.site-topbar-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.site-logo-mark {
    font-size: 1.6rem;
    color: #3b82f6;
    line-height: 1;
}
.site-logo-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    letter-spacing: 2px;
    color: #fff;
    font-size: 1.15rem;
}
.site-logo-text strong { font-weight: 800; }

.site-topnav {
    display: flex;
    align-items: center;
    gap: 22px;
}
.site-topnav-link {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    transition: color 0.15s;
}
.site-topnav-link:hover { color: #fff; }
.site-topnav-strong { font-weight: 600; color: #e5e7eb; }
.site-subscribe {
    border: 1px solid #4b5563;
    padding: 7px 16px;
    border-radius: 4px;
    font-weight: 600;
}
.site-subscribe:hover { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.site-hamburger {
    background: none;
    border: none;
    color: #e5e7eb;
    cursor: pointer;
    padding: 4px;
    width: auto;
    display: flex;
}

.site-catbar {
    background: #fff;
    border-bottom: 1px solid #eef0f3;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.site-catbar-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.site-cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}
.site-cat {
    color: #374151;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: capitalize;
    transition: color 0.15s;
}
.site-cat:hover { color: #2563eb; }
.site-search-btn {
    position: absolute;
    right: 20px;
    background: none;
    border: none;
    color: #374151;
    cursor: pointer;
    padding: 4px;
    width: auto;
    display: flex;
}
.site-search-btn:hover { color: #2563eb; }
.site-search-box {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px 12px;
}
.site-search-box input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
}
.site-search-box input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}

@media (max-width: 768px) {
    .site-topnav { gap: 14px; }
    .site-topnav-strong, .site-subscribe, .site-topnav-dashboard { display: none; }
    .site-catbar { display: none; }
    .site-catbar.open { display: block; }
    .site-catbar.open .site-catbar-inner {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 20px;
    }
    .site-catbar.open .site-search-btn { position: static; margin-top: 8px; }
}

/* ===== Contributor page ===== */
.contributor-section {
    max-width: 560px;
    margin: 50px auto 60px;
    padding: 0 20px;
}
.contributor-card {
    background: #fff;
    border-radius: 14px;
    padding: 36px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.contributor-card h1 {
    font-size: 1.9rem;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 8px;
}
.contributor-sub {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 24px;
}
.contributor-btn {
    width: 100%;
    margin-top: 8px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    transition: transform 0.15s, box-shadow 0.15s;
}
.contributor-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
.contributor-done-check {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    background: #10b981;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

/* ===== Subscribe modal (site header) ===== */
.subscribe-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.subscribe-overlay.active { display: flex; }
.subscribe-modal {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 32px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    text-align: center;
    animation: uiModalIn 0.2s ease-out;
}
.subscribe-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    width: auto;
    padding: 4px;
}
.subscribe-close:hover { color: #475569; }
.subscribe-modal-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 8px;
}
.subscribe-modal-sub {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
}
.subscribe-modal-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 14px;
}
.subscribe-modal-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.subscribe-modal-error {
    color: #dc2626;
    font-size: 0.85rem;
    margin: -6px 0 12px;
}
.subscribe-modal-btn {
    width: 100%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.subscribe-modal-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
.subscribe-modal-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.subscribe-done-check {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: #10b981;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

/* ===== Admin layout (WordPress-style sidebar) ===== */
:root { --admin-sidebar-w: 240px; }

.admin-body { background: #f1f5f9; }

.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--admin-sidebar-w);
    background: #1a1a2e;
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 200;
    padding: 20px 0;
}
.admin-logo {
    display: block;
    padding: 8px 22px 22px;
    text-decoration: none;
}
.admin-logo .logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: none;
}
.admin-nav { display: flex; flex-direction: column; }
.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    color: #cbd5e1;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.admin-nav-link:hover { background: #24243e; color: #fff; }
.admin-nav-link.active {
    background: #24243e;
    color: #fff;
    border-left-color: #3b82f6;
}
.admin-nav-icon { width: 18px; text-align: center; opacity: 0.9; }

.admin-sidebar-bottom { padding: 0 0 4px; }
.admin-user {
    padding: 12px 22px;
    border-top: 1px solid #2d2d44;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.admin-user-email { color: #fff; font-size: 0.85rem; font-weight: 600; word-break: break-all; }
.admin-user-roles { color: #94a3b8; font-size: 0.75rem; text-transform: capitalize; }
.admin-logout { color: #fca5a5; }
.admin-logout:hover { background: #3b1d1d; color: #fecaca; }

.admin-main {
    margin-left: var(--admin-sidebar-w);
    min-height: 100vh;
    padding: 20px 0;
}
/* Pull admin content up since there's no top navbar offset here. */
.admin-main .blog-admin { margin-top: 24px; }

.admin-mobilebar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: #1a1a2e;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    z-index: 210;
}
.admin-mobile-toggle {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    width: auto;
}
.admin-mobile-logo { text-decoration: none; }
.admin-mobile-logo .logo-text {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: none;
}

@media (max-width: 768px) {
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        top: 56px;
        padding-top: 12px;
    }
    .admin-sidebar.open { transform: translateX(0); }
    .admin-main { margin-left: 0; padding-top: 68px; }
    .admin-mobilebar { display: flex; }
}

/* Shared */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
    font-size: 1.05rem;
}
.badge-id {
    background: #e0e7ff;
    color: #3730a3;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
}
.status-badge {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.status-draft { background: #fef3c7; color: #92400e; }
.status-published { background: #d1fae5; color: #065f46; }

.btn-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-add:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* ===== Admin / Manage page ===== */
.blog-admin {
    max-width: 1000px;
    margin: 100px auto 60px;
    padding: 0 20px;
}
.blog-admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}
.blog-admin-header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a2e;
}
.sub-count {
    font-size: 1rem;
    font-weight: 600;
    color: #94a3b8;
}

/* Admin section subheadings (Contributors / Pending) */
.section-subhead {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 4px;
}
.section-note {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 14px;
}

/* Avatar settings */
.avatar-settings {
    display: flex;
    align-items: center;
    gap: 18px;
}
.avatar-current {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: #e2e8f0;
    flex: 0 0 72px;
}
.avatar-current img,
.avatar-current svg {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover;
    display: block;
}
.avatar-dropzone {
    flex: 1;
    padding: 16px 14px 10px;
}
.avatar-dropzone .dropzone-icon { font-size: 1.4rem; }
.blog-admin-actions {
    display: flex;
    gap: 10px;
}
.btn-bulk-delete {
    padding: 10px 18px;
    background: #fee2e2;
    color: #dc2626;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-bulk-delete:hover:not(:disabled) { background: #fecaca; }
.btn-bulk-delete:disabled { opacity: 0.5; cursor: not-allowed; }

/* Editor */
.post-editor {
    display: none;
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.post-editor.active { display: block; }
.post-editor h3 {
    margin-bottom: 18px;
    font-size: 1.25rem;
    color: #1a1a2e;
}
.post-editor .form-group { margin-bottom: 16px; }
.slug-field {
    display: flex;
    align-items: stretch;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}
.slug-prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.9rem;
    border-right: 1px solid #e2e8f0;
    white-space: nowrap;
}
.slug-field input {
    border: none;
    border-radius: 0;
    flex: 1;
}
.slug-field input:focus {
    outline: none;
    box-shadow: none;
}
.slug-field:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.slug-hint {
    display: block;
    margin-top: 6px;
    color: #94a3b8;
    font-size: 0.8rem;
}
/* Drag & drop featured image */
.dropzone {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    padding: 22px 16px 14px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover { border-color: #93c5fd; background: #f1f6ff; }
.dropzone.dragover {
    border-color: #3b82f6;
    background: #e0edff;
}
.dropzone.uploading { opacity: 0.6; pointer-events: none; }
.dropzone-inner { pointer-events: none; }
.dropzone-icon {
    font-size: 1.8rem;
    color: #3b82f6;
    display: block;
    margin-bottom: 4px;
}
.dropzone-text { color: #475569; font-size: 0.95rem; margin: 0; }
.dropzone-browse { color: #2563eb; font-weight: 600; text-decoration: underline; }
.dropzone-hint { color: #94a3b8; font-size: 0.8rem; margin: 4px 0 0; }
.dropzone input[type="file"] {
    display: block;
    margin: 12px auto 0;
    width: auto;
    font-size: 0.85rem;
    cursor: pointer;
}

/* CSV table preview in the editor */
.table-preview-wrap { display: none; margin-top: 12px; }
.table-preview-wrap.active { display: block; }
.table-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
}
.table-preview { overflow-x: auto; }

/* Rendered data table (editor preview + published post) */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    background: #fff;
}
.data-table th, .data-table td {
    border: 1px solid #e5e7eb;
    padding: 8px 12px;
    text-align: left;
}
.data-table th {
    background: #f1f5f9;
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
}
.data-table tr:nth-child(even) td { background: #f8fafc; }
.post-table-wrap {
    overflow-x: auto;
    margin: 20px 0;
    border-radius: 6px;
}

/* Upload progress bar (TQDM-style %) */
.upload-progress {
    display: none;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
.upload-progress-bar {
    flex: 1;
    height: 10px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}
.upload-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 999px;
    transition: width 0.15s ease;
}
.upload-progress-pct {
    font-size: 0.85rem;
    font-weight: 700;
    color: #2563eb;
    min-width: 42px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.image-preview-wrap {
    display: none;
    margin-top: 12px;
}
.image-preview-wrap.active { display: block; }
.image-preview-wrap img {
    max-width: 100%;
    max-height: 240px;
    border-radius: 8px;
    display: block;
    margin-bottom: 8px;
    border: 1px solid #e2e8f0;
}
.btn-remove-image {
    padding: 6px 12px;
    background: #f1f5f9;
    color: #475569;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-remove-image:hover { background: #e2e8f0; }
.editor-buttons {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}
.btn-submit {
    padding: 10px 22px;
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-submit:hover { background: #059669; }
.btn-cancel {
    padding: 10px 22px;
    background: #f1f5f9;
    color: #475569;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-cancel:hover { background: #e2e8f0; }

/* Table */
.blog-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.blog-table th, .blog-table td {
    padding: 14px 18px;
    text-align: left;
}
.blog-table th {
    background: #f1f5f9;
    font-weight: 600;
    color: #475569;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.blog-table tr:not(:last-child) td { border-bottom: 1px solid #f1f5f9; }
.blog-table tr:hover td { background: #f8fafc; }
.blog-table td { color: #334155; font-size: 0.95rem; }
.col-check { width: 40px; text-align: center; }
.col-check input { width: auto; }
.row-actions { display: flex; gap: 8px; align-items: center; }
.btn-view, .btn-edit, .btn-delete, .btn-publish, .btn-unpublish {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}
.btn-view { background: #e0e7ff; color: #3730a3; }
.btn-view:hover { background: #c7d2fe; }
.btn-edit { background: #dbeafe; color: #1e40af; }
.btn-edit:hover { background: #bfdbfe; }
.btn-publish { background: #d1fae5; color: #065f46; }
.btn-publish:hover { background: #a7f3d0; }
.btn-unpublish { background: #fef3c7; color: #92400e; }
.btn-unpublish:hover { background: #fde68a; }
.btn-delete { background: #fee2e2; color: #dc2626; }
.btn-delete:hover { background: #fecaca; }

/* ===== Home magazine layout (Latest / Featured / Popular) ===== */
.btn-manage {
    display: inline-block;
    padding: 8px 18px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
}

.home-layout {
    max-width: 1160px;
    margin: 30px auto 60px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 34px;
    align-items: start;
}
.home-col { min-width: 0; }

/* Section headings ("Latest" / "Popular") with the angled green-style tab */
.col-heading {
    position: relative;
    border-top: 2px solid #e5e7eb;
    margin-bottom: 18px;
    height: 22px;
}
.col-heading span {
    position: absolute;
    top: -1px;
    background: #2563eb;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 14px 5px 10px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.col-heading-popular span { right: 0; left: auto; clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%); }

/* Shared kicker (category + time) */
.kicker {
    display: block;
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
/* Footer "powered" block: stack lines, right-aligned. */
.footer-powered {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.kicker-time { color: #9ca3af; font-weight: 500; }
.kicker-cat { color: #6b7280; text-decoration: none; }
.kicker-cat:hover { color: #2563eb; }

/* Category page */
.category-page {
    max-width: 780px;
    margin: 40px auto 60px;
    padding: 0 20px;
}
.category-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 28px;
}
.cat-item {
    display: flex;
    gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid #eef0f3;
    text-decoration: none;
    color: inherit;
    align-items: center;
}
.cat-thumb {
    flex: 0 0 200px;
    width: 200px;
    aspect-ratio: 16 / 10;
    border-radius: 2px;
    overflow: hidden;
    background: #f1f5f9;
}
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.cat-item-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.25;
    margin-top: 2px;
}
.cat-item:hover .cat-item-title { color: #2563eb; }

/* Category tag on the single post page */
.post-cat-tag {
    display: inline-block;
    background: #2563eb;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 12px 4px 10px;
    margin-bottom: 12px;
    text-decoration: none;
    clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.post-cat-tag:hover { background: #1d4ed8; }

@media (max-width: 600px) {
    .cat-thumb { flex-basis: 120px; width: 120px; }
    .cat-item-title { font-size: 1.1rem; }
}

.thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
}

/* Side items (Latest / Popular) */
.side-item {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #eef0f3;
    text-decoration: none;
    color: inherit;
}
.side-item:first-child { padding-top: 0; }
.side-thumb {
    flex: 0 0 68px;
    width: 68px;
    height: 54px;
    border-radius: 4px;
    overflow: hidden;
    background: #f1f5f9;
}
.side-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.side-meta { min-width: 0; }
.side-title {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
}
.side-item:hover .side-title { color: #2563eb; }

/* Featured (center) */
.feat-card { display: block; text-decoration: none; }
.feat-image {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: #f1f5f9;
    border-radius: 2px;
}
/* Crop to a consistent banner, anchored to the top so the title/header of
   tall infographics stays visible. */
.feat-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.feat-cat {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #2563eb;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 12px 4px 10px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.feat-body { padding: 16px 0 20px; border-bottom: 1px solid #eef0f3; margin-bottom: 20px; }
.feat-body a { text-decoration: none; }
.feat-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.2;
    margin-top: 2px;
}
.feat-body a:hover .feat-title { color: #2563eb; }

.feat-secondary { display: flex; flex-direction: column; gap: 16px; }
.feat-sec-item {
    display: flex;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    align-items: center;
}
.feat-sec-thumb {
    flex: 0 0 150px;
    width: 150px;
    aspect-ratio: 16 / 10;
    border-radius: 2px;
    overflow: hidden;
    background: #f1f5f9;
}
.feat-sec-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.feat-sec-title {
    display: block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.25;
}
.feat-sec-item:hover .feat-sec-title { color: #2563eb; }

@media (max-width: 980px) {
    .home-layout { grid-template-columns: 1fr; gap: 40px; }
    .home-featured { order: -1; }
}

/* ===== Single post ===== */
/* Two-column single-post layout: content left, reserved sidebar (ads) right. */
.post-layout {
    max-width: 1140px;
    margin: 40px auto 60px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    align-items: start;
}
.post-main { min-width: 0; }

.post-aside {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.aside-signup {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 18px;
    background: #fff;
}
.aside-signup h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 12px;
}
.aside-signup input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-bottom: 12px;
}
.aside-signup input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.aside-signup-btn {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 9px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.aside-signup-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Inline "Subscribed" confirmation (replaces the form on success) */
.subscribe-done {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #065f46;
    background: #d1fae5;
    border-radius: 8px;
    padding: 12px 14px;
    font-weight: 600;
    font-size: 0.95rem;
}
.subscribe-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #10b981;
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Reserved ad space (empty placeholder for now). */
.ad-slot {
    min-height: 600px;
    border-radius: 8px;
}

@media (max-width: 900px) {
    .post-layout { grid-template-columns: 1fr; gap: 0; }
    .post-aside { display: none; }
}

.post-article {
    padding: 0;
}
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 0.9rem;
}
.breadcrumbs a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 600;
}
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumb-sep { color: #94a3b8; }
.breadcrumb-current {
    color: #64748b;
    font-weight: 500;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.post-notfound {
    text-align: center;
    padding: 60px 20px;
}
.post-notfound h1 {
    font-size: 2rem;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 12px;
}
.post-notfound p {
    color: #64748b;
    margin-bottom: 24px;
}

.post-header { margin-bottom: 24px; }
.draft-tag {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.post-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1.2;
    margin-bottom: 12px;
}
.post-date {
    color: #64748b;
    font-size: 0.95rem;
}
.post-byline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}
.byline-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 40px;
    background: #e2e8f0;
}
.byline-avatar img,
.byline-avatar svg {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px;
    max-height: 40px;
    object-fit: cover;
    display: block;
}
.byline-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}
.byline-published {
    color: #94a3b8;
    font-size: 0.82rem;
}
.byline-by {
    color: #475569;
    font-size: 0.85rem;
}
.byline-by strong { color: #1a1a2e; font-weight: 700; }
.post-hero {
    margin: 24px 0 32px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.post-hero img { width: 100%; display: block; }
.post-content {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #334155;
}
.post-content p { margin-bottom: 20px; }
.post-content h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 32px 0 14px;
    line-height: 1.3;
}
.post-content h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 26px 0 12px;
    line-height: 1.3;
}
.post-content ul,
.post-content ol {
    margin: 0 0 20px 24px;
}
.post-content li { margin-bottom: 8px; }
.post-content a { color: #2563eb; text-decoration: underline; }
.post-content blockquote {
    border-left: 4px solid #3b82f6;
    background: #f8fafc;
    padding: 12px 20px;
    margin: 0 0 20px;
    color: #475569;
    font-style: italic;
    border-radius: 0 8px 8px 0;
}
.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 12px 0;
    display: block;
}

/* ===== Single-post footer (newsletter + topics + prev/next) ===== */
.post-footer {
    margin: 40px 0 0;
    padding: 0;
}
.newsletter-box {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 32px;
    margin-bottom: 36px;
}
.newsletter-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 8px;
}
.newsletter-sub {
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 520px;
}
.newsletter-form { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.newsletter-form input {
    width: 100%;
    max-width: 520px;
    padding: 13px 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
    background: #fff;
}
.newsletter-form input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.newsletter-btn {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 12px 22px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.newsletter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.related-topics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding-bottom: 20px;
    margin-bottom: 8px;
}
.related-label {
    font-weight: 700;
    color: #1a1a2e;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}
.topic-tag {
    color: #374151;
    font-weight: 600;
    font-size: 0.9rem;
}
.topic-tag:hover { color: #3b82f6; }

.post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    border-top: 1px solid #e5e7eb;
    padding-top: 24px;
}
.nav-card {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
}
.nav-card.nav-next { justify-content: flex-end; text-align: right; }
.nav-empty { visibility: hidden; }
.nav-arrow {
    font-size: 2rem;
    color: #9ca3af;
    line-height: 1;
    transition: color 0.15s;
}
.nav-card:hover .nav-arrow { color: #3b82f6; }
.nav-meta { display: flex; flex-direction: column; gap: 4px; }
.nav-kicker {
    color: #2563eb;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.nav-title {
    color: #1a1a2e;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.3;
}
.nav-card:hover .nav-title { color: #3b82f6; }

@media (max-width: 640px) {
    .post-nav { grid-template-columns: 1fr; gap: 16px; }
    .nav-card.nav-next { justify-content: flex-start; text-align: left; flex-direction: row-reverse; }
    .nav-empty { display: none; }
    .newsletter-box { padding: 24px; }
}

/* ===== Rich Text Editor ===== */
.rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: #f8fafc;
}
.rte-toolbar button {
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    width: auto;
    transition: background 0.15s, border-color 0.15s;
}
.rte-toolbar button:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}
.rte-sep {
    width: 1px;
    height: 22px;
    background: #e2e8f0;
    margin: 0 4px;
}
.rte-editor {
    min-height: 220px;
    max-height: 480px;
    overflow-y: auto;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 0 0 8px 8px;
    background: #fff;
    font-size: 1rem;
    line-height: 1.7;
    color: #334155;
}
.rte-editor:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.rte-editor:empty:before {
    content: attr(data-placeholder);
    color: #94a3b8;
}
.rte-editor h2, .rte-editor h3 { color: #1a1a2e; margin: 12px 0 8px; }
.rte-editor ul, .rte-editor ol { margin: 0 0 12px 22px; }
.rte-editor blockquote {
    border-left: 4px solid #3b82f6;
    background: #f8fafc;
    padding: 8px 16px;
    margin: 0 0 12px;
    color: #475569;
    font-style: italic;
}
.rte-editor img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }
.rte-editor a { color: #2563eb; text-decoration: underline; }

/* ===== UI Modal ===== */
.ui-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ui-modal-overlay.active { display: flex; }
.ui-modal {
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: uiModalIn 0.2s ease-out;
}
@keyframes uiModalIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.ui-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 10px;
}
.ui-modal-message {
    color: #475569;
    font-size: 0.98rem;
    line-height: 1.6;
    margin-bottom: 24px;
}
.ui-modal-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    margin-bottom: 24px;
    margin-top: -12px;
}
.ui-modal-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.ui-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.ui-modal-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
}
.ui-modal-btn-cancel { background: #f1f5f9; color: #475569; }
.ui-modal-btn-cancel:hover { background: #e2e8f0; }
.ui-modal-btn-ok { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; }
.ui-modal-btn-ok:hover { box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); }

.ui-modal-custom { margin-bottom: 24px; }

/* ===== Auth / Login ===== */
.auth-section {
    max-width: 420px;
    margin: 120px auto 60px;
    padding: 0 20px;
}
.auth-card {
    background: #fff;
    border-radius: 14px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.auth-card h1 {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 6px;
}
.auth-sub {
    color: #64748b;
    margin-bottom: 24px;
}
.auth-btn { width: 100%; margin-top: 8px; }
.auth-hint { margin-top: 16px; font-size: 0.9rem; color: #64748b; text-align: center; }
.auth-hint a { color: #3b82f6; font-weight: 600; text-decoration: none; }
.auth-hint a:hover { text-decoration: underline; }

/* Referral link box */
.referral-box {
    background: #fff;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.referral-info strong { color: #1a1a2e; font-size: 1.05rem; }
.referral-info p { color: #64748b; font-size: 0.9rem; margin: 4px 0 14px; }
.referral-row { display: flex; gap: 10px; }
.referral-row input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    background: #f8fafc;
    color: #334155;
}
.referral-row .btn-add { white-space: nowrap; }

/* Role badges + checkboxes */
.status-badge.role-superadmin { background: #ede9fe; color: #6d28d9; }
.status-badge.role-admin { background: #dbeafe; color: #1e40af; }
.status-badge.role-editor { background: #d1fae5; color: #065f46; }
.status-badge.role-guest { background: #f1f5f9; color: #475569; }
.roles-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.roles-checkboxes label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: #334155;
    margin: 0;
}
.roles-checkboxes input { width: auto; }
.muted { color: #94a3b8; }

/* ===== Toast ===== */
.ui-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1a1a2e;
    color: #fff;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 1100;
}
.ui-toast.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 640px) {
    .post-title { font-size: 1.9rem; }
    .blog-table th:nth-child(5), .blog-table td:nth-child(5) { display: none; }
    .row-actions { flex-wrap: wrap; }
}


/* =========================================================================
   DEVTAUKO THEME — original editorial reading layout
   Goal: a distinct, refined reading experience (not a dev.to clone).
   - Single centered reading column with a comfortable measure
   - Floating horizontal reaction pill (not a vertical left strip)
   - Gradient byline card + author chip
   - Full-width "More from" strip at the bottom (no dead right column)
   - Reading progress bar across the top
   Kept: the big bold headline treatment.
   ========================================================================= */

:root {
    --dev-bg: #f7f7f9;
    --dev-surface: #ffffff;
    --dev-border: #ebebef;
    --dev-text: #16161d;
    --dev-muted: #6b6b76;
    --dev-accent: #5b3df5;        /* violet — our own signature, not dev.to indigo */
    --dev-accent-2: #d63384;      /* pink accent (like button active state) */
    --dev-accent-soft: #efeaff;
    --dev-radius: 14px;
}

body {
    background: var(--dev-bg) !important;
    color: var(--dev-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
}

/* ===== Reading progress bar (top of viewport) ===== */
.dev-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: var(--dev-accent);
    z-index: 300;
    transition: width 0.1s linear;
}

/* ===== Header: translucent, floating, centered ===== */
.site-header { background: transparent; }
.site-topbar {
    background: rgba(255,255,255,0.8);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    color: var(--dev-text);
    border-bottom: 1px solid var(--dev-border);
}
.site-topbar-inner {
    height: 60px;
    max-width: 1180px;
    padding: 0 24px;
    justify-content: flex-start;
    gap: 0;
}

/* Logo: wordmark only. */
.site-logo-mark { display: none; }
.site-logo { gap: 0; }
.site-logo-text {
    display: inline-block;
    color: var(--dev-text);
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.3px;
}

/* Original nav hidden; our own banner cluster used instead. */
.site-topnav { display: none; }

/* Search: pill, centered, soft. */
.dev-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 560px;
    margin: 0 auto;
    background: #f1f1f5;
    border: 1px solid transparent;
    border-radius: 999px;
    height: 42px;
    padding: 0 16px 0 10px;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.dev-search:focus-within {
    background: #fff;
    border-color: var(--dev-accent);
    box-shadow: 0 0 0 3px rgba(91,61,245,0.12);
}
.dev-search-icon {
    display: flex; align-items: center; justify-content: center;
    width: auto; padding: 4px; background: none; border: none;
    color: var(--dev-muted); cursor: pointer;
}
.dev-search-input {
    flex: 1; border: none; outline: none; background: none;
    font-size: 0.95rem; color: var(--dev-text); padding: 0 8px;
    width: auto; box-shadow: none;
}
.dev-search-input:focus { box-shadow: none; transform: none; }
.dev-search-powered { font-size: 0.72rem; color: #b6b6c0; white-space: nowrap; }
@media (max-width: 760px) { .dev-search-powered { display: none; } }

/* Right action cluster. */
.dev-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* Logged-out: plain "Log in" link + "Create account" outline button. */
.dev-login {
    color: var(--dev-text);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 9px 14px;
    border-radius: 999px;
    transition: background 0.15s;
}
.dev-login:hover { background: #f1f1f5; }
.dev-signup {
    color: var(--dev-accent);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 9px 18px;
    border: 1px solid var(--dev-accent);
    border-radius: 999px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.dev-signup:hover { background: var(--dev-accent); color: #fff; }
.dev-subscribe {
    color: var(--dev-text);
    text-decoration: none; font-size: 0.82rem; font-weight: 700;
    letter-spacing: 0.3px; padding: 9px 16px;
    border: 1px solid var(--dev-border); border-radius: 999px;
    transition: background 0.15s, border-color 0.15s;
}
.dev-subscribe:hover { background: #f1f1f5; }
.dev-create {
    color: #fff; text-decoration: none; font-size: 0.9rem; font-weight: 600;
    padding: 9px 18px;
    background: var(--dev-accent);
    border: none; border-radius: 999px; white-space: nowrap;
    box-shadow: 0 6px 16px rgba(91,61,245,0.3);
    transition: transform 0.15s, box-shadow 0.15s;
}
.dev-create:hover { transform: translateY(-1px); background: #4a2fd6; box-shadow: 0 8px 22px rgba(91,61,245,0.4); }
.dev-bell {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; background: none; border: none;
    border-radius: 50%; color: var(--dev-muted); cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.dev-bell:hover { background: #f1f1f5; color: var(--dev-text); }
.dev-avatar {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
    text-decoration: none;
}
.dev-avatar svg { width: 34px; height: 34px; display: block; }
.dev-avatar-letter {
    background: var(--dev-accent);
    color: #fff; font-weight: 700; font-size: 1rem; text-transform: lowercase;
    cursor: pointer; border: none;
}

/* ----- Logged-in user menu (dropdown) ----- */
.dev-usermenu { position: relative; display: flex; align-items: center; }
.dev-usermenu-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    background: var(--dev-surface);
    border: 1px solid var(--dev-border);
    border-radius: var(--dev-radius);
    box-shadow: 0 12px 40px rgba(22,22,29,0.16);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
    z-index: 260;
}
.dev-usermenu.open .dev-usermenu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dev-usermenu-head {
    display: block;
    padding: 14px 18px;
    text-decoration: none;
}
.dev-usermenu-name {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dev-text);
    line-height: 1.3;
}
.dev-usermenu-handle {
    display: block;
    font-size: 0.9rem;
    color: var(--dev-muted);
}
.dev-usermenu-head:hover .dev-usermenu-name { color: var(--dev-accent); }
.dev-usermenu-sep { height: 1px; background: var(--dev-border); margin: 6px 0; }
.dev-usermenu-item {
    display: block;
    padding: 11px 18px;
    color: #3a3a44;
    text-decoration: none;
    font-size: 1rem;
    transition: background 0.12s, color 0.12s;
}
.dev-usermenu-item:hover { background: var(--dev-accent-soft); color: var(--dev-accent); }
@media (max-width: 760px) {
    .dev-subscribe, .dev-create { display: none !important; }
    .dev-search { margin: 0 12px; }
}

/* ===== Layout: sticky author column (left) + centered reading column ===== */
.post-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 860px);
    justify-content: center;
    gap: 32px;
    max-width: 1240px;
    margin: 40px auto 80px;
    padding: 0 24px;
    align-items: start;
}
.post-main { min-width: 0; }

/* The right dev.to sidebar is removed from the reading flow entirely. */
.post-aside { display: none !important; }

/* Left author column sticks as you scroll. */
.dev-authorcol {
    position: sticky;
    top: 84px;
    align-self: start;
}

@media (max-width: 1080px) {
    /* Stack: author card flows above the article (no longer sticky). */
    .post-layout { grid-template-columns: minmax(0, 860px); justify-content: center; }
    .dev-authorcol { position: static; order: -1; }
}

/* Article on an airy white card with a soft shadow. */
.post-article {
    background: var(--dev-surface);
    border: 1px solid var(--dev-border);
    border-radius: 20px;
    padding: 44px 56px 48px;
    box-shadow: 0 10px 40px rgba(22,22,29,0.06);
}
.breadcrumbs { display: none; }

/* Hero image flush at the top of the card. */
.post-hero {
    margin: -44px -56px 32px;
    border-radius: 20px 20px 0 0;
    box-shadow: none;
}
.post-hero img {
    border-radius: 20px 20px 0 0;
    max-height: 440px; object-fit: cover;
}

/* ----- Byline: author chip on a soft band ----- */
.post-header { margin-bottom: 8px; }
.post-byline {
    order: 2;                       /* below the title, unlike dev.to */
    margin: 20px 0 0;
    padding: 14px 16px;
    background: var(--dev-accent-soft);
    border: 1px solid var(--dev-border);
    border-radius: var(--dev-radius);
}
.byline-avatar {
    width: 46px; height: 46px; min-width: 46px; max-width: 46px; flex: 0 0 46px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--dev-accent-soft);
}
.byline-avatar img, .byline-avatar svg { width: 46px !important; height: 46px !important; }
.byline-published { color: var(--dev-muted); font-size: 0.84rem; order: 2; }
.byline-by { color: var(--dev-text); font-weight: 600; font-size: 0.95rem; }
.byline-by strong { color: var(--dev-text); }

/* Keep the BIG headline (as requested), slightly refined. */
.post-title {
    font-size: 2.9rem;
    font-weight: 800;
    color: var(--dev-text);
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 4px;
}

/* Category pill. */
.post-cat-tag {
    background: var(--dev-accent-soft);
    color: var(--dev-accent);
    border: none; clip-path: none;
    border-radius: 999px; padding: 5px 14px;
    font-weight: 700; letter-spacing: 0.2px; text-transform: none;
}
.post-cat-tag:hover { background: var(--dev-accent); color: #fff; }

/* ----- Article body typography ----- */
.post-content {
    font-size: 1.18rem;
    line-height: 1.8;
    color: #2a2a33;
    margin-top: 28px;
}
.post-content h2 {
    font-size: 1.7rem; font-weight: 800; color: var(--dev-text);
    letter-spacing: -0.4px; margin: 40px 0 14px;
}
.post-content h2::before {
    content: ""; display: block; width: 44px; height: 4px;
    background: var(--dev-accent);
    border-radius: 2px; margin-bottom: 14px;
}
.post-content h3 { font-size: 1.32rem; font-weight: 700; color: var(--dev-text); margin: 28px 0 10px; }
.post-content a { color: var(--dev-accent); text-decoration-color: rgba(91,61,245,0.4); }
.post-content blockquote {
    border-left: 4px solid var(--dev-accent);
    background: var(--dev-accent-soft);
    color: #3a3a44; border-radius: 0 10px 10px 0;
    padding: 14px 22px; font-style: normal;
}
.post-content code {
    background: #f1f1f5; border-radius: 5px; padding: 2px 6px;
    font-size: 0.9em;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
.post-content pre {
    background: #16161d; color: #e8e8f0; border-radius: 12px;
    padding: 20px 22px; overflow-x: auto; margin: 0 0 22px;
    white-space: pre;                 /* preserve newlines + indentation */
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.95rem; line-height: 1.6;
    tab-size: 4;
}
.post-content pre code {
    display: block;
    background: transparent; padding: 0; color: inherit;
    white-space: pre;
    font-size: inherit;
    border-radius: 0;
}

/* ===== Floating horizontal reaction pill (replaces the left strip) ===== */
.dev-rail {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;       /* horizontal, not vertical */
    align-items: center;
    gap: 4px;
    padding: 6px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border: 1px solid var(--dev-border);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(22,22,29,0.15);
    z-index: 250;
    top: auto;                 /* override base sticky top */
}
.dev-rail-btn {
    display: flex; flex-direction: row; align-items: center; gap: 6px;
    width: auto; padding: 8px 12px;
    background: none; border: none; color: var(--dev-muted);
    cursor: pointer; text-decoration: none; border-radius: 999px;
    transition: background 0.15s, color 0.15s;
}
.dev-rail-btn svg { width: 20px; height: 20px; padding: 0; border-radius: 0; }
.dev-rail-btn:hover { background: #f1f1f5; color: var(--dev-text); }
.dev-rail-count { font-size: 0.85rem; color: inherit; line-height: 1; }
.dev-rail-btn.active { color: var(--dev-accent-2); }
#dev-rail-bookmark.active { color: var(--dev-accent); }
.dev-rail-btn.active svg { fill: currentColor; stroke: currentColor; }
.dev-rail-more { padding: 8px 10px; }
@media (max-width: 560px) {
    .dev-rail { bottom: 14px; }
    .dev-rail-btn { padding: 8px 10px; }
}

/* ===== Post footer blocks (inside the centered column) ===== */
.post-footer { margin-top: 36px; }
.newsletter-box {
    background: var(--dev-accent);
    border: none; color: #fff;
    border-radius: 18px; padding: 34px;
}
.newsletter-title { color: #fff; }
.newsletter-sub { color: rgba(255,255,255,0.85); }
.newsletter-form input { border: none; }
.newsletter-btn {
    background: #fff; color: var(--dev-accent); border-radius: 999px;
    font-weight: 700;
}
.newsletter-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }

/* Tags as soft chips. */
.related-topics {
    background: var(--dev-surface);
    border: 1px solid var(--dev-border);
    border-radius: var(--dev-radius);
    padding: 16px 20px; margin-top: 24px;
}
.related-label { color: var(--dev-muted); }
.topic-tag {
    display: inline-block; color: var(--dev-accent);
    background: var(--dev-accent-soft);
    border-radius: 999px; padding: 4px 12px; font-weight: 600;
}
.topic-tag:hover { background: var(--dev-accent); color: #fff; }

/* Prev/next cards. */
.post-nav {
    background: transparent; border: none; border-top: 1px solid var(--dev-border);
    border-radius: 0; padding: 24px 0 0; margin-top: 28px;
}
.nav-card {
    padding: 16px; border: 1px solid var(--dev-border);
    border-radius: var(--dev-radius); background: var(--dev-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.nav-card:hover { border-color: var(--dev-accent); box-shadow: 0 6px 18px rgba(91,61,245,0.12); }
.nav-kicker { color: var(--dev-accent); }
.nav-title { color: var(--dev-text); }
.nav-card:hover .nav-title, .nav-card:hover .nav-arrow { color: var(--dev-accent); }

/* ===== "More from" strip BELOW the article (author card now lives on the left) ===== */
.dev-bottom {
    max-width: 860px;
    margin: 0 auto 80px;
    padding: 0 24px;
}

.dev-author-card {
    background: var(--dev-surface);
    border: 1px solid var(--dev-border);
    border-radius: 18px; overflow: hidden;
}
.dev-author-banner {
    height: 56px;
    background: var(--dev-accent);
}
.dev-author-body { padding: 0 20px 20px; }
.dev-author-head { display: flex; align-items: flex-end; gap: 12px; margin-top: -26px; margin-bottom: 14px; }
.dev-author-avatar {
    width: 60px; height: 60px; min-width: 60px;
    border-radius: 50%; overflow: hidden; background: #e2e8f0;
    border: 4px solid #fff;
}
.dev-author-avatar img, .dev-author-avatar svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.dev-author-name { font-size: 1.2rem; font-weight: 800; color: var(--dev-text); line-height: 1.2; padding-bottom: 6px; }
.dev-follow-btn {
    width: 100%;
    background: var(--dev-accent);
    color: #fff; border: none; border-radius: 999px; padding: 11px;
    font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
}
.dev-follow-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(91,61,245,0.3); }
.dev-follow-btn.following { background: #f1f1f5; color: var(--dev-text); }
.dev-author-meta { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.dev-meta-row { display: flex; flex-direction: column; gap: 2px; }
.dev-meta-label { font-size: 0.72rem; font-weight: 700; color: var(--dev-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.dev-meta-value { font-size: 0.92rem; color: var(--dev-text); }

.dev-morefrom {
    background: var(--dev-surface);
    border: 1px solid var(--dev-border);
    border-radius: 18px; padding: 6px 20px 16px;
}
.dev-morefrom-title { font-size: 1.05rem; font-weight: 800; color: var(--dev-text); padding: 16px 0 6px; }
.dev-morefrom-title span { color: var(--dev-accent); }
.dev-morefrom-item { display: block; padding: 14px 0; border-top: 1px solid var(--dev-border); text-decoration: none; }
.dev-morefrom-item:first-of-type { border-top: none; }
.dev-morefrom-head { display: block; font-size: 1rem; font-weight: 600; color: var(--dev-text); line-height: 1.35; margin-bottom: 6px; }
.dev-morefrom-item:hover .dev-morefrom-head { color: var(--dev-accent); }
.dev-morefrom-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.dev-morefrom-tags span { font-size: 0.8rem; color: var(--dev-muted); }

/* ===== Footer: light, matches the airy theme ===== */
.footer {
    background: transparent; color: var(--dev-text);
    border-top: 1px solid var(--dev-border); margin-top: 20px;
}
.footer-logo .logo-text { color: var(--dev-text); -webkit-text-fill-color: var(--dev-text); }
.footer-description { color: var(--dev-muted); }
.social-link { background: #f1f1f5; color: var(--dev-muted); }
.social-link:hover { background: var(--dev-accent); color: #fff; }
.footer-heading { color: var(--dev-text); }
.footer-link { color: var(--dev-muted); }
.footer-link:hover { color: var(--dev-accent); }
.footer-bottom { border-top: 1px solid var(--dev-border); }
.footer-copyright, .footer-powered { color: var(--dev-muted); }

/* ===== Responsive ===== */
@media (max-width: 760px) {
    .post-article { padding: 28px 22px 32px; border-radius: 16px; }
    .post-hero { margin: -28px -22px 24px; border-radius: 16px 16px 0 0; }
    .post-hero img { border-radius: 16px 16px 0 0; }
    .post-title { font-size: 2.1rem; }
    .post-content { font-size: 1.08rem; }
}

/* =========================================================================
   DEVTAUKO — Editor (Create Post) screen, dev.to-inspired
   Applies only when <body> has .devt-editor-body (set for the devtauko theme).
   The admin sidebar is not rendered on this theme; a minimal top bar is used.
   ========================================================================= */

.devt-editor-body { background: var(--dev-bg); }

/* ----- Minimal top bar ----- */
.devt-editor-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 20px;
    background: var(--dev-bg);
}
.devt-editor-bar-left { display: flex; align-items: center; gap: 16px; }
.devt-editor-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px; height: 40px;
    padding: 0 10px;
    background: #000; color: #fff;
    border-radius: 6px;
    font-weight: 800; font-size: 0.95rem; letter-spacing: 0.5px;
    text-decoration: none;
}
.devt-editor-mode { font-size: 1rem; font-weight: 500; color: var(--dev-text); }
.devt-editor-bar-right { display: flex; align-items: center; gap: 18px; }
.devt-editor-close {
    font-size: 1.6rem; line-height: 1; color: var(--dev-muted);
    text-decoration: none; padding: 4px 8px; border-radius: 6px;
}
.devt-editor-close:hover { background: #ececf1; color: var(--dev-text); }

/* ----- Main content area: centered card ----- */
.devt-editor-main {
    margin-left: 0 !important;      /* no sidebar on devtauko */
    padding: 10px 0 120px;
    min-height: calc(100vh - 56px);
}
.devt-editor-body .blog-admin {
    margin: 0 auto;
    padding: 0 20px;
}

/* The editor becomes an airy white card. */
.devt-editor-body .post-editor {
    background: var(--dev-surface);
    border: 1px solid var(--dev-border);
    border-radius: 12px;
    padding: 28px 44px 36px;
    box-shadow: 0 6px 24px rgba(22,22,29,0.05);
    margin-bottom: 0;
}

/* Generic form groups: drop the boxed look; most labels are hidden in favor
   of large placeholder-driven inputs (dev.to style). */
.devt-editor-body .post-editor .form-group { margin-bottom: 20px; }
.devt-editor-body .post-editor > .form-group > label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--dev-muted);
}

/* Big borderless auto-growing title (wraps to multiple lines). */
.devt-editor-body #post-title {
    border: none;
    padding: 6px 0;
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.15;
    color: var(--dev-text);
    box-shadow: none;
    width: 100%;
    resize: none;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
}
.devt-editor-body #post-title::placeholder { color: #c7c7d1; }
.devt-editor-body #post-title:focus { box-shadow: none; transform: none; outline: none; }
/* Hide the "Title" label; the placeholder carries the hint. */
.devt-editor-body #post-title + small,
.devt-editor-body .post-editor > .form-group:first-of-type > label { display: none; }

/* Slug / category inputs: quiet underline style. */
.devt-editor-body #post-slug,
.devt-editor-body #post-category {
    border: none;
    border-bottom: 1px solid var(--dev-border);
    border-radius: 0;
    padding: 8px 0;
}
.devt-editor-body #post-slug:focus,
.devt-editor-body #post-category:focus {
    box-shadow: none; transform: none;
    border-bottom-color: var(--dev-accent);
}
.devt-editor-body .slug-field { border: none; }
.devt-editor-body .slug-field { border-bottom: 1px solid var(--dev-border); border-radius: 0; }
.devt-editor-body .slug-prefix { background: none; border: none; padding-left: 0; color: var(--dev-muted); }

/* Cover image / CSV dropzones: lighter, rounded. */
.devt-editor-body .dropzone {
    border: 1.5px dashed #d7d7df;
    border-radius: 10px;
    background: #fafafc;
}
.devt-editor-body .dropzone:hover { border-color: var(--dev-accent); background: var(--dev-accent-soft); }
.devt-editor-body .dropzone-icon { color: var(--dev-accent); }
.devt-editor-body .dropzone-browse { color: var(--dev-accent); }

/* ----- Formatting toolbar (dev.to-style icon buttons) ----- */
.devt-editor-body .rte-toolbar {
    background: #f7f7f9;
    border: 1px solid var(--dev-border);
    border-radius: 8px 8px 0 0;
    gap: 2px;
    padding: 8px 10px;
}
.devt-editor-body .rte-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #44444f;
    font-size: 1rem;
}
.devt-editor-body .rte-toolbar button svg { width: 20px; height: 20px; }
.devt-editor-body .rte-toolbar button:hover {
    background: #ececf1;
    border-color: transparent;
    color: var(--dev-accent);
}

/* Embedded code-block editor: a dark textarea that reads as one block. */
.devt-editor-body .rte-code-block {
    margin: 12px 0 16px;
    border-radius: 10px;
    overflow: hidden;
    background: #16161d;
}
.devt-editor-body .rte-code-block::before {
    content: "Code";
    display: block;
    padding: 6px 14px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #9aa0b4;
    background: #1e1e28;
}
.devt-editor-body .rte-code {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 60px;
    margin: 0;
    padding: 14px 16px;
    border: none;
    outline: none;
    resize: none;
    overflow: hidden;
    background: #16161d;
    color: #e8e8f0;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.92rem;
    line-height: 1.6;
    tab-size: 4;
    white-space: pre;
    box-shadow: none;
}
.devt-editor-body .rte-code:focus { box-shadow: none; outline: none; }
.devt-editor-body .rte-code::placeholder { color: #6b7080; }

/* Code styling inside the editor so blocks are visible while writing. */
.devt-editor-body .rte-editor code {
    background: #ececf1;
    border-radius: 4px;
    padding: 1px 5px;
    font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
    font-size: 0.9em;
}
.devt-editor-body .rte-editor pre {
    background: #16161d;
    color: #e8e8f0;
    border-radius: 10px;
    padding: 16px 18px;
    overflow-x: auto;
    margin: 0 0 16px;
    white-space: pre;
    font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
    font-size: 0.92rem;
    line-height: 1.6;
    tab-size: 4;
}
.devt-editor-body .rte-editor pre code {
    display: block;
    background: transparent;
    padding: 0;
    color: inherit;
    white-space: pre;
    font-size: inherit;
    border-radius: 0;
}

/* ----- Content area: clean, large, borderless-ish ----- */
.devt-editor-body .rte-editor {
    border: 1px solid var(--dev-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    min-height: 340px;
    font-size: 1.1rem;
    line-height: 1.75;
    color: #2a2a33;
}
.devt-editor-body .rte-editor:focus { box-shadow: none; border-color: var(--dev-border); }

/* Status select stays usable but understated. */
.devt-editor-body #post-status {
    border: 1px solid var(--dev-border);
    border-radius: 8px;
    max-width: 220px;
}

/* ----- Sticky bottom action bar (Publish / Save) ----- */
.devt-editor-body .editor-buttons {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: saturate(160%) blur(8px);
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    border-top: 1px solid var(--dev-border);
    z-index: 90;
}
.devt-editor-body .editor-buttons .btn-submit {
    background: var(--dev-accent);
    border-radius: 8px;
    padding: 11px 26px;
    font-weight: 700;
}
.devt-editor-body .editor-buttons .btn-submit:hover { background: #4a2fd6; }
.devt-editor-body .editor-buttons .btn-cancel {
    background: transparent;
    color: var(--dev-muted);
    border-radius: 8px;
    padding: 11px 18px;
}
.devt-editor-body .editor-buttons .btn-cancel:hover { background: #ececf1; color: var(--dev-text); }

/* ----- Two-column layout: editor card + "Editor Basics" help panel ----- */
.devt-editor-body .blog-admin {
    max-width: 1140px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
}
.devt-editor-aside {
    position: sticky;
    top: 72px;
    padding: 4px 4px 0;
}
.devt-aside-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--dev-text);
    margin-bottom: 14px;
}
.devt-aside-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.devt-aside-list li {
    position: relative;
    padding-left: 20px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--dev-muted);
}
.devt-aside-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 8px;
    width: 7px; height: 7px;
    background: var(--dev-accent);
    border-radius: 50%;
}
.devt-aside-list strong { color: var(--dev-text); font-weight: 700; }
.devt-aside-list code {
    background: #ececf1;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.85em;
    font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
}

/* "Save Draft" is a lighter secondary button next to the violet Publish. */
.devt-editor-body .editor-buttons #devt-draft-btn {
    background: var(--dev-accent-soft);
    color: var(--dev-accent);
    font-weight: 700;
    border-radius: 8px;
    padding: 11px 20px;
}
.devt-editor-body .editor-buttons #devt-draft-btn:hover { background: #e2daff; }

@media (max-width: 980px) {
    .devt-editor-body .blog-admin { grid-template-columns: minmax(0, 1fr); }
    .devt-editor-aside { position: static; order: 2; }
}

@media (max-width: 760px) {
    .devt-editor-body .post-editor { padding: 20px 20px 28px; }
    .devt-editor-body #post-title { font-size: 2rem; }
}