/* ==========================================================================
   BLOG & PORTAL EDITORIAL CSS - WANDRÉ DESIGNER (SPA 7 SCREENS)
   ========================================================================== */

/* --- GLOBAL VARS EXTENSION --- */
:root {
    --color-cyan: #009db2;
    --color-cyan-glow: rgba(0, 157, 178, 0.2);
    --color-cream: #ede7df;
    --color-dark-bg: #0b0b0f;
    --color-sidebar-bg: #07070b;
    --color-border: rgba(237, 231, 223, 0.12);
    --color-border-focus: rgba(0, 157, 178, 0.4);
    --color-card-bg: rgba(20, 20, 24, 0.45);
}

/* Base resets & structural styles */
body {
    background-color: var(--color-dark-bg);
    color: var(--color-cream);
    font-family: var(--font-sans);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* SPA shell views controller */
.view-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    animation: fadeIn 0.4s ease-out;
}

/* Global text animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   HEADER & NAVIGATION (PUBLIC VIEW)
   ========================================================================== */
#header.scrolled {
    background-color: rgba(11, 11, 15, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(198, 167, 94, 0.1);
}

.header-container nav {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.btn-outline-glow {
    background: transparent;
    border: 1px solid var(--color-cyan);
    color: var(--color-cyan);
    padding: 0.5rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    border-radius: 0px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 157, 178, 0.1);
}

.btn-outline-glow:hover {
    background: var(--color-cyan);
    color: #0b0b0f;
    box-shadow: 0 0 20px rgba(0, 157, 178, 0.4);
}

/* ==========================================================================
   SCREEN 1: BLOG HOME LAYOUT
   ========================================================================== */
.blog-page-section {
    padding: 120px 2rem 5rem;
    min-height: calc(100vh - 120px);
}

.blog-hero-header {
    margin-bottom: 5rem;
    animation: fadeInUp 0.8s ease;
}

.blog-pre-title {
    font-size: 0.8rem;
    letter-spacing: 0.25em;
    color: var(--color-gold);
    font-weight: 600;
    display: block;
    margin-bottom: 1.5rem;
}

.blog-main-title {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 300;
    line-height: 1.15;
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}

.blog-main-subtitle {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--brand-gray);
    max-width: 650px;
    font-weight: 300;
}

.blog-section-divider-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1rem;
    margin-bottom: 3rem;
}

.blog-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--color-cream);
    margin: 0;
}

.blog-posts-count {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--brand-gray);
    font-weight: 500;
}

/* Grid layout for public cards */
.public-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 3rem;
}

.public-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 0px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.public-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 157, 178, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Card Decorative Ring Cover */
.card-ring-cover {
    height: 220px;
    background: linear-gradient(135deg, #101015 0%, #1a1a24 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--color-border);
}

.card-ring-cover::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background-image: radial-gradient(circle, rgba(237, 231, 223, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    transform: rotate(15deg);
    pointer-events: none;
}

.card-gold-ring-decor {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 6px solid var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(198, 167, 94, 0.2);
    position: relative;
}

.card-gold-ring-decor::after {
    content: '';
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--color-cream);
    opacity: 0.8;
}

.card-ring-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.public-card-body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.public-card-meta {
    font-size: 0.75rem;
    color: var(--color-cyan);
    font-weight: 600;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.public-card-title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    line-height: 1.35;
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--color-cream);
    transition: color 0.3s ease;
}

.public-card:hover .public-card-title {
    color: var(--color-gold);
}

.public-card-excerpt {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--brand-gray);
    margin-bottom: 2rem;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.public-card-link {
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    font-weight: 600;
    color: var(--color-cream);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.public-card-link:hover {
    color: var(--color-gold);
}

.public-card-link svg {
    transition: transform 0.3s ease;
}

.public-card-link:hover svg {
    transform: translateX(4px);
}

/* ==========================================================================
   SCREEN 2: LOGIN SCREEN
   ========================================================================== */
.login-header {
    border-bottom: 1px solid var(--color-border);
    background-color: rgba(11, 11, 15, 0.95);
}

.login-header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-back-blog-link {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    font-weight: 600;
    color: var(--brand-gray);
    text-decoration: none;
    transition: color 0.3s ease;
}

.btn-back-blog-link:hover {
    color: var(--color-cream);
}

.login-page-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.login-card-box {
    background: rgba(15, 15, 18, 0.9);
    border: 1px solid var(--color-border);
    border-radius: 0px;
    padding: 4rem 3rem;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    animation: fadeInUp 0.5s ease;
}

.login-card-badge {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--color-gold);
    font-weight: 600;
    display: block;
    margin-bottom: 1rem;
}

.login-card-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 400;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.01em;
}

.login-card-subtitle {
    font-size: 0.88rem;
    color: var(--brand-gray);
    line-height: 1.5;
    margin-bottom: 3rem;
    font-weight: 300;
}

.login-card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem;
}

.forgot-pass-link {
    font-size: 0.8rem;
    color: var(--brand-gray);
    text-decoration: none;
    transition: color 0.3s ease;
}

.forgot-pass-link:hover {
    color: var(--color-cream);
}

.btn-login-submit {
    background-color: var(--color-cream);
    color: var(--brand-black);
    border: none;
    padding: 1rem 2rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    border-radius: 0px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-login-submit:hover {
    background-color: var(--color-gold);
    box-shadow: 0 0 20px rgba(198, 167, 94, 0.3);
}

.login-error-text {
    color: #ff4a4a;
    font-size: 0.8rem;
    margin-top: 1.5rem;
    text-align: center;
}

/* ==========================================================================
   ADMIN LAYOUT: SIDEBAR + CONTENT
   ========================================================================== */
.admin-dashboard-wrapper {
    display: flex;
    min-height: 100vh;
}

/* Left Sidebar Navigation */
.admin-sidebar {
    width: 260px;
    background-color: var(--color-sidebar-bg);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 100;
}

.sidebar-logo-area {
    padding: 2.5rem 2rem;
    border-bottom: 1px solid rgba(237, 231, 223, 0.05);
}

.sidebar-nav {
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-section-label {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    color: rgb(237, 231, 223);
    font-weight: 600;
    width: 90%;
    margin-top: 0.5rem;
}

.sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 90%;
    color: var(--brand-gray);
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0px;
    transition: all 0.3s ease;
}

.nav-icon-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 2px solid currentColor;
    flex-shrink: 0;
}

.sidebar-nav-link:hover {
    color: var(--color-cream);
    background: rgba(237, 231, 223, 0.03);
}

.sidebar-nav-link.active {
    color: var(--color-cyan);
    background: rgba(0, 157, 178, 0.06);
}

.sidebar-logout-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--brand-gray);
    padding: 1.5rem 2rem;
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    border-top: 1px solid rgba(237, 231, 223, 0.05);
    transition: color 0.3s ease;
}

.sidebar-logout-link:hover {
    color: #ff4a4a;
}

/* Right Main Content Panel */
.admin-content-panel {
    flex-grow: 1;
    margin-left: 260px;
    /* Width of sidebar */
    padding: 3rem 4rem;
    box-sizing: border-box;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.admin-screen {
    display: none;
    flex-direction: column;
    flex-grow: 1;
    animation: fadeIn 0.4s ease-out;
}

.admin-screen.active {
    display: flex;
}

/* Screen Header */
.admin-screen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3.5rem;
}

.admin-header-titles {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.admin-header-pre-title {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    color: var(--color-gold);
    font-weight: 600;
    text-transform: uppercase;
}

.admin-screen-title {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 400;
    margin: 0;
}

.admin-screen-title.size-large {
    font-size: 2.8rem;
}

.admin-screen-subtitle {
    font-size: 0.9rem;
    color: var(--brand-gray);
    margin: 0.5rem 0 0 0;
}

.btn-admin-primary {
    background-color: var(--color-cream);
    color: var(--brand-black);
    border: none;
    padding: 0.9rem 1.8rem;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    border-radius: 0px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-admin-primary:hover {
    background-color: var(--color-gold);
    box-shadow: 0 0 15px rgba(198, 167, 94, 0.2);
}

.btn-admin-outline {
    background: transparent;
    border: 1px solid rgba(237, 231, 223, 0.2);
    color: var(--color-cream);
    padding: 0.9rem 1.8rem;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    border-radius: 0px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-admin-outline:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

/* ==========================================================================
   SCREEN 3: PUBLICATIONS (STAT CARDS & TABLE)
   ========================================================================== */
.admin-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 3.5rem;
}

.stat-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 0px;
    padding: 1.75rem 2rem;
}

.stat-card-label {
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    color: var(--brand-gray);
    font-weight: 600;
}

.stat-card-value {
    font-family: var(--font-sans);
    font-size: 2.8rem;
    font-weight: 600;
    margin: 0.5rem 0 0 0;
    color: var(--color-cream);
}

.admin-table-wrapper {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 0px;
    overflow: hidden;
}

.admin-posts-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.admin-posts-table th {
    padding: 1.25rem 1.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--brand-gray);
    background: rgba(10, 10, 15, 0.4);
    border-bottom: 1px solid var(--color-border);
}

.admin-posts-table td {
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid rgba(237, 231, 223, 0.05);
    font-size: 0.92rem;
    color: var(--color-cream);
    vertical-align: middle;
}

.admin-posts-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-posts-table tbody tr {
    transition: background 0.3s ease;
}

.admin-posts-table tbody tr:hover {
    background: rgba(237, 231, 223, 0.02);
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    border-radius: 0px;
    px;
    text-transform: uppercase;
    text-align: center;
}

.status-badge.published {
    border: 1px solid var(--color-cyan);
    color: var(--color-cyan);
    background: rgba(0, 157, 178, 0.02);
}

.status-badge.draft {
    border: 1px solid var(--color-gold);
    color: var(--color-gold);
    background: rgba(198, 167, 94, 0.02);
}

/* Three dots action dropdown menu triggers */
.btn-table-actions {
    background: transparent;
    border: none;
    color: var(--brand-gray);
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px;
    transition: all 0.3s ease;
}

.btn-table-actions:hover {
    color: var(--color-cream);
    background: rgba(237, 231, 223, 0.08);
}

/* Actions Menu Popover */
.actions-dropdown-container {
    position: relative;
    display: inline-block;
}

.actions-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: #0f0f14;
    border: 1px solid var(--color-border);
    border-radius: 0px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    min-width: 140px;
    overflow: hidden;
}

.actions-dropdown-menu.show {
    display: block;
}

.dropdown-item {
    background: transparent;
    border: none;
    color: var(--color-cream);
    width: 100%;
    padding: 0.75rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
}

.dropdown-item:hover {
    background: rgba(237, 231, 223, 0.06);
    color: var(--color-gold);
}

.dropdown-item.delete-item:hover {
    color: #ff4a4a;
    background: rgba(255, 74, 74, 0.04);
}

/* ==========================================================================
   SCREEN 4: NEW POST BRIEFING
   ========================================================================== */
.admin-split-layout {
    display: flex;
    gap: 2.5rem;
    margin-bottom: 2rem;
}

.admin-col-left {
    flex: 1;
    min-width: 0;
}

.admin-col-right {
    flex: 1;
    min-width: 0;
}

.admin-card-box {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 0px;
    padding: 3rem;
    box-sizing: border-box;
    height: 100%;
}

.admin-card-box.border-dashed {
    border-style: dashed;
    border-color: rgba(237, 231, 223, 0.2);
}

.admin-card-box.flex-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.min-h-card {
    min-height: 520px;
}

.card-box-main-title {
    font-size: 1.35rem;
    font-weight: 500;
    margin: 0 0 0.5rem 0;
    color: var(--color-cream);
}

.card-box-main-title.border-bottom-title {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
}

.card-box-description {
    font-size: 0.88rem;
    color: var(--brand-gray);
    line-height: 1.5;
    margin: 0 0 2.5rem 0;
    font-weight: 300;
}

.text-center-x {
    text-align: center;
}

/* File Drop Zone */
.file-drop-zone {
    background: rgba(10, 10, 15, 0.4);
    border: 1.5px dashed rgba(237, 231, 223, 0.2);
    border-radius: 0px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.file-drop-zone:hover {
    border-color: var(--color-cyan);
    background: rgba(0, 157, 178, 0.02);
}

.file-drop-zone svg {
    color: var(--brand-gray);
    transition: color 0.3s ease;
}

.file-drop-zone:hover svg {
    color: var(--color-cyan);
}

.drop-zone-title {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--color-cream);
}

.drop-zone-sub {
    font-size: 0.72rem;
    color: var(--brand-gray);
}

/* Attached file pills */
.attached-files-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.file-pill {
    background: rgba(237, 231, 223, 0.05);
    border: 1px solid rgba(237, 231, 223, 0.1);
    color: var(--color-cream);
    padding: 0.4rem 0.85rem;
    font-size: 0.78rem;
    border-radius: 0px;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-remove-file {
    background: transparent;
    border: none;
    color: var(--brand-gray);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 300;
    display: inline-flex;
    align-items: center;
    padding: 0;
    transition: color 0.3s ease;
}

.btn-remove-file:hover {
    color: #ff4a4a;
}

.btn-admin-submit-left {
    background-color: var(--color-cream);
    color: var(--brand-black);
    border: none;
    padding: 1.1rem 2.2rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    border-radius: 0px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.btn-admin-submit-left:hover {
    background-color: var(--color-gold);
    box-shadow: 0 0 20px rgba(198, 167, 94, 0.3);
}

/* Right IA Preparing Box */
.ia-preparing-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 2rem;
}

.pulsing-diamond-container {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.pulsing-diamond {
    width: 25px;
    height: 25px;
    border: 3px solid var(--color-cyan);
    transform: rotate(45deg);
    box-shadow: 0 0 25px rgba(0, 157, 178, 0.5);
    animation: pulseDiamond 2.5s infinite ease-in-out;
}

@keyframes pulseDiamond {

    0%,
    100% {
        transform: rotate(45deg) scale(0.9);
        box-shadow: 0 0 10px rgba(0, 157, 178, 0.3);
        opacity: 0.6;
    }

    50% {
        transform: rotate(45deg) scale(1.15);
        box-shadow: 0 0 35px rgba(0, 157, 178, 0.8);
        opacity: 1;
    }
}

.ia-state-title {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--color-cream);
    margin-bottom: 0.5rem;
}

.ia-state-text {
    font-size: 0.8rem;
    color: var(--brand-gray);
    max-width: 280px;
    line-height: 1.5;
}

/* ==========================================================================
   SCREEN 5: IA PROPOSAL REVIEW
   ========================================================================== */
.review-actions-row {
    display: flex;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.btn-inline {
    flex: 1;
    padding: 1rem 0;
    text-align: center;
}

.ia-suggestion-box {
    background: rgba(10, 10, 15, 0.6);
    border: 1px solid var(--color-border);
    border-radius: 0px;
    padding: 2.5rem;
    margin-bottom: 2.5rem;
}

.suggestion-article-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 400;
    color: var(--color-cream);
    margin: 0 0 2rem 0;
}

.suggestion-meta-block {
    margin-bottom: 2rem;
}

.suggestion-meta-block:last-child {
    margin-bottom: 0;
}

.sug-label {
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    color: var(--color-gold);
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
}

.sug-value {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--color-cream);
    margin: 0;
    font-weight: 300;
}

.sug-list {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--color-cream);
    font-size: 0.88rem;
    line-height: 1.8;
    font-weight: 300;
}

.suggestion-actions-row {
    display: flex;
    gap: 1.5rem;
}

.suggestion-actions-row button {
    flex: 1;
}

/* ==========================================================================
   SCREEN 6: ARTICLE WRITER / EDITOR
   ========================================================================== */
.admin-col-editor-body {
    flex: 7;
    min-width: 0;
}

.admin-col-editor-settings {
    flex: 3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.editor-container-box {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 0px;
    padding: 3rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 700px;
}

.editor-input-title {
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    color: var(--color-cream);
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 400;
    width: 100%;
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    box-sizing: border-box;
    outline: none;
}

.editor-input-title:focus {
    border-bottom-color: rgba(237, 231, 223, 0.15);
}

.editor-rich-toolbar {
    display: flex;
    border: 1px solid var(--color-border);
    border-bottom: none;
    background: rgba(10, 10, 15, 0.6);
    padding: 0.4rem;
    gap: 0.25rem;
}

.toolbar-icon {
    background: transparent;
    border: none;
    color: var(--brand-gray);
    padding: 0.4rem 0.8rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 0px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.toolbar-icon:hover {
    background: rgba(237, 231, 223, 0.05);
    color: var(--color-cream);
}

.editor-content-editable {
    background: rgba(10, 10, 15, 0.4);
    border: 1px solid var(--color-border);
    padding: 2rem;
    color: rgba(237, 231, 223, 0.9);
    font-size: 1rem;
    line-height: 1.8;
    min-height: 400px;
    outline: none;
    overflow-y: auto;
    text-align: justify;
    box-sizing: border-box;
}

.editor-content-editable:focus {
    border-color: var(--color-border-focus);
}

.editor-content-editable h2 {
    font-family: var(--font-serif);
    color: var(--color-cream);
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 400;
}

.editor-content-editable blockquote {
    border-left: 2px solid var(--color-gold);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: rgba(237, 231, 223, 0.7);
}

.editor-content-editable[placeholder]:empty:before {
    content: attr(placeholder);
    color: var(--brand-gray);
    font-style: italic;
}

/* Content Editable Image Block Box */
.add-image-helper-box {
    background: rgba(10, 10, 15, 0.3);
    border: 1px dashed rgba(237, 231, 223, 0.15);
    border-radius: 0px;
    padding: 2.5rem;
    text-align: center;
    color: var(--brand-gray);
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    font-weight: 600;
    cursor: pointer;
    margin-top: 2rem;
    transition: all 0.3s ease;
}

.add-image-helper-box:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
    background: rgba(198, 167, 94, 0.01);
}

/* Image inside editable content block styling */
.editor-inserted-image-wrapper {
    position: relative;
    margin: 2rem 0;
    border-radius: 0px;
    overflow: hidden;
    border: 1px solid rgba(237, 231, 223, 0.1);
}

.editor-inserted-image {
    width: 100%;
    max-height: 350px;
    object-fit: cover;
    display: block;
}

.btn-remove-inserted-img {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.7);
    color: #ff4a4a;
    border: 1px solid rgba(255, 74, 74, 0.2);
    border-radius: 0px;
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-remove-inserted-img:hover {
    background: #ff4a4a;
    color: white;
}

/* Settings Card and Covers */
.editor-settings-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 0px;
    padding: 2rem;
    box-sizing: border-box;
}

.editor-settings-card.border-top-divider {
    border-top: 1px solid var(--color-border);
}

.setting-label {
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    color: var(--brand-gray);
    font-weight: 600;
    display: block;
    margin-bottom: 0.75rem;
}

.setting-section-title {
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    color: var(--color-gold);
    font-weight: 600;
    display: block;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.cover-image-upload-zone {
    background: rgba(10, 10, 15, 0.4);
    border: 1px solid var(--color-border);
    border-radius: 0px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
}

.cover-image-upload-zone:hover {
    border-color: var(--color-gold);
}

.cover-image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cover-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
}

.placeholder-title {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--color-cream);
}

.placeholder-sub {
    font-size: 0.65rem;
    color: var(--brand-gray);
}

.editor-excerpt-textarea {
    background: rgba(10, 10, 15, 0.4);
    border: 1px solid var(--color-border);
    border-radius: 0px;
    color: var(--color-cream);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    padding: 1rem;
    min-height: 100px;
    width: 100%;
    resize: none;
    box-sizing: border-box;
    line-height: 1.5;
    outline: none;
}

.editor-excerpt-textarea:focus {
    border-color: var(--color-border-focus);
}

.seo-counts-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.seo-count-item {
    font-size: 0.72rem;
    color: var(--brand-gray);
}

/* ==========================================================================
   SCREEN 7: USER MANAGEMENT
   ========================================================================== */
.users-list-table-header {
    display: flex;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--brand-gray);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
}

.users-list-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.user-list-item-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(237, 231, 223, 0.04);
    padding-bottom: 1.25rem;
}

.user-list-item-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.user-col-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 50%;
}

.user-col-email {
    width: 50%;
    font-size: 0.88rem;
    color: var(--brand-gray);
    word-break: break-all;
}

.user-initials-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 157, 178, 0.15);
    border: 1px solid var(--color-cyan);
    color: var(--color-cyan);
    font-size: 0.88rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

.user-name-stack {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.user-name-val {
    font-size: 0.92rem;
    font-weight: 500;
    margin-top: 10px;
    color: var(--color-cream);
}

.user-email-val-sub {
    font-size: 0.78rem;
    color: var(--brand-gray);
    display: none;
    /* Only shown on mobile view layout stacking */
}

/* Password input field with eye icon */
.password-input-wrapper {
    position: relative;
    width: 100%;
}

.password-input-wrapper input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 3rem !important;
}

.btn-toggle-password {
    background: transparent;
    border: none;
    color: var(--brand-gray);
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.btn-toggle-password:hover {
    color: var(--color-cream);
}

.width-full-btn {
    width: 100%;
    margin-top: 1rem;
}

/* ==========================================================================
   SCREEN 8: USER PROFILE
   ========================================================================== */
.max-w-sm {
    max-width: 520px;
}

.profile-avatar-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.profile-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(198, 167, 94, 0.15);
    border: 2px solid var(--color-gold);
    color: var(--color-gold);
    font-size: 1.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.avatar-upload-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.avatar-tip {
    font-size: 0.72rem;
    color: var(--brand-gray);
    margin: 0;
}

/* Custom form fields modifications (border-style style, used in designer mocks) */
.form-group.border-style input[type="text"],
.form-group.border-style input[type="email"],
.form-group.border-style input[type="password"],
.form-group.border-style textarea {
    background: rgba(10, 10, 15, 0.6);
    border: 1px solid var(--color-border);
}

.form-group.border-style input[type="text"]:focus,
.form-group.border-style input[type="email"]:focus,
.form-group.border-style input[type="password"]:focus,
.form-group.border-style textarea:focus {
    border-color: var(--color-border-focus);
}

/* ==========================================================================
   RESPONSIVENESS AND MOBILE TWEAKS
   ========================================================================== */
@media (max-width: 1024px) {
    .admin-sidebar {
        width: 80px;
    }

    .admin-sidebar .sidebar-logo-area img {
        width: 40px;
        content: url('../Assets/simbolo/simbolo_azul_fundo_transparente.png');
    }

    .sidebar-nav-link span:not(.nav-icon-dot) {
        display: none;
    }

    .sidebar-nav-link {
        justify-content: center;
        padding: 1rem 0;
    }

    .nav-section-label {
        display: none;
    }

    .sidebar-logout-link span {
        display: none;
    }

    .sidebar-logout-link {
        justify-content: center;
        padding: 1.5rem 0;
    }

    .admin-content-panel {
        margin-left: 80px;
        padding: 2.5rem 2rem;
    }
}

@media (max-width: 900px) {
    .admin-split-layout {
        flex-direction: column;
        gap: 2rem;
    }

    .admin-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .user-col-email {
        display: none;
    }

    .user-col-info {
        width: 100%;
    }

    .user-email-val-sub {
        display: block;
    }
}

@media (max-width: 600px) {
    .admin-stats-row {
        grid-template-columns: 1fr;
    }

    .admin-posts-table th:nth-child(3),
    .admin-posts-table th:nth-child(4),
    .admin-posts-table td:nth-child(3),
    .admin-posts-table td:nth-child(4) {
        display: none;
        /* Hide date columns on small screens */
    }

    .admin-screen-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .admin-screen-header button {
        width: 100%;
    }

    .header-container nav {
        display: none;
        /* Mobile menu collapsed */
    }
}

/* API integration additions */
.public-home-feed {
    display: flex;
    flex-direction: column;
    gap: 4.5rem;
}

.blog-feed-section {
    width: 100%;
}

.public-featured-post {
    width: 100%;
}

.featured-post-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    min-height: 420px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(13, 13, 16, .82);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

.featured-post-image {
    min-height: 420px;
    overflow: hidden;
    background: #0e0e11;
}

.featured-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

.featured-post-card:hover .featured-post-image img {
    transform: scale(1.025);
}

.featured-post-copy {
    padding: clamp(2rem, 4vw, 4.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.featured-post-copy h3 {
    font-size: clamp(1.9rem, 3vw, 3.2rem);
    line-height: 1.08;
    margin: 1rem 0 1.25rem;
    font-weight: 500;
}

.featured-post-copy p {
    color: var(--brand-gray, #999);
    line-height: 1.8;
    margin: 0 0 2rem;
}

.public-card .card-ring-cover {
    display: block;
}

.public-card .card-ring-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.actions-cell {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-table-action {
    border: 1px solid rgba(255, 255, 255, .16);
    background: transparent;
    color: #d8d8da;
    padding: .42rem .62rem;
    font: inherit;
    font-size: .72rem;
    cursor: pointer;
}

.btn-table-action:hover {
    border-color: #00c6de;
    color: #00c6de;
}

.btn-table-action.danger:hover {
    border-color: #b15a5a;
    color: #e17b7b;
}

.image-library-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

.image-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.library-image-card {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, .1);
    padding: 0;
    background: #0c0d10;
    color: #ddd;
    cursor: pointer;
    overflow: hidden;
    text-align: left;
}

.library-image-card img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
}

.library-image-card span {
    display: block;
    padding: .65rem .8rem;
    font-size: .72rem;
    letter-spacing: .08em;
}

.login-error-message {
    color: #e08b8b;
    border: 1px solid rgba(224, 139, 139, .3);
    background: rgba(128, 35, 35, .12);
    padding: .8rem 1rem;
    margin-bottom: 1rem;
    font-size: .82rem;
}

@media (max-width:900px) {
    .featured-post-card {
        grid-template-columns: 1fr
    }

    .featured-post-image {
        min-height: 280px
    }

    .actions-cell {
        justify-content: flex-start
    }
}


/* ==========================================================================
   WANDRÉ BLOG — UI REFINEMENT 2026-08
   Polimento visual do painel + editor + artigos + biblioteca
   ========================================================================== */

:root {
    --admin-bg: #08090d;
    --admin-surface: rgba(15, 17, 22, .88);
    --admin-surface-2: rgba(11, 13, 17, .92);
    --admin-border: rgba(255, 255, 255, .085);
    --admin-border-strong: rgba(255, 255, 255, .14);
    --admin-text: #f2efe8;
    --admin-muted: #858a93;
    --admin-cyan: #00c9df;
    --admin-gold: #c0a04a;
    --admin-danger: #dc6868;
}

/* Sidebar: clearer hierarchy, iconography and selected state */
.admin-sidebar {
    width: 232px;
    min-width: 232px;
    background: rgba(6, 8, 11, .96);
    border-right: 1px solid var(--admin-border);
    box-shadow: 20px 0 60px rgba(0, 0, 0, .22);
}

.sidebar-logo-area {
    min-height: 104px;
    padding: 28px 26px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    display: flex;
    align-items: center;
}

.sidebar-logo-area img {
    width: 100% !important;
    height: auto;
    opacity: .95;
}

.sidebar-nav {
    padding: 26px 16px;
}

.nav-section-label {

    font-size: 12px;
    letter-spacing: .19em;
    color: #dbdbdb;
    font-weight: 700;
}

.nav-section-label:first-child {
    margin-top: 4px;
}

.sidebar-nav-link {
    min-height: 44px;
    margin: 3px 0;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 0px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #858a93;
    font-size: 12px;
    font-weight: 500;
    transition: .18s ease;
    position: relative;
}

.sidebar-nav-link:hover {
    color: #d9d9d7;
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .045);
}

.sidebar-nav-link.active {
    color: #f7f4ed;
    background: linear-gradient(90deg, rgba(0, 201, 223, .13), rgba(0, 201, 223, .035));
    border-color: rgba(0, 201, 223, .15);
    box-shadow: inset 3px 0 0 var(--admin-cyan);
}

.sidebar-nav-link.active .nav-menu-icon {
    color: var(--admin-cyan);
    opacity: 1;
}

.nav-menu-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .75;
}

.nav-icon-dot {
    display: none !important;
}

.sidebar-footer {
    padding: 18px 16px 22px;
    border-top: 1px solid rgba(255, 255, 255, .055);
}

.sidebar-logout-link {
    padding: 11px 13px;
    border-radius: 0px;
    color: #767b84;
}

.sidebar-logout-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .035);
}

/* Main panel spacing */
.admin-content-panel {
    padding: 42px 52px 72px;
}

.admin-screen-header {
    margin-bottom: 34px;
}

.admin-screen-title {
    letter-spacing: -.025em;
}

.admin-screen-subtitle {
    color: #777d86;
    line-height: 1.55;
    margin-top: 8px;
}

/* Cards: remove wireframe look */
.admin-card-box,
.editor-container-box,
.editor-settings-card,
.stat-card,
.admin-table-wrapper {
    background: linear-gradient(180deg, rgba(16, 18, 23, .90), rgba(11, 13, 17, .88));
    border: 1px solid var(--admin-border);
    border-radius: 0px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .15);
}

.admin-card-box {
    padding: 30px 32px;
}

.card-box-main-title {
    font-size: 19px;
    letter-spacing: -.01em;
}

.card-box-description {
    color: #777c85;
    line-height: 1.6;
    max-width: 680px;
}

/* Inputs, textarea and selects: consistent component styling */
.form-group {
    margin-bottom: 20px;
}

.form-group label,
.setting-label {
    display: block;
    margin: 0 0 8px;
    color: #a7abb2;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .15em;
}

.form-group.border-style input[type="text"],
.form-group.border-style input[type="email"],
.form-group.border-style input[type="password"],
.form-group.border-style textarea,
.editor-excerpt-textarea,
#editor-post-slug,
#briefing-new-input,
#briefing-review-input,
#profile-about-input {
    width: 100%;
    box-sizing: border-box;

    min-height: 46px;
    padding: 10px 12px;

    color: var(--admin-text);
    background: #090b0f;
    border: 1px solid #30343c;
    border-radius: 0;
    outline: none;

    font: inherit;
    font-size: 12px;
}

.form-group.border-style textarea,
#briefing-new-input,
#briefing-review-input {
    min-height: 154px;
    line-height: 1.6;
    resize: vertical;
}

.editor-excerpt-textarea {
    min-height: 104px;
    resize: vertical;
    line-height: 1.55;
}

.form-group.border-style input:focus,
.form-group.border-style textarea:focus,
.editor-excerpt-textarea:focus,
#editor-post-slug:focus,
#briefing-new-input:focus,
#briefing-review-input:focus,
#profile-about-input:focus {
    border-color: rgba(0, 201, 223, .72);
    box-shadow: 0 0 0 3px rgba(0, 201, 223, .085);
    background: #0b0e12;
}

::placeholder {
    color: #555b64 !important;
    opacity: 1;
}

.select-wrapper.border-style {
    position: relative;
}

.select-wrapper.border-style::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1px solid #92979f;
    border-bottom: 1px solid #92979f;
    transform: translateY(-68%) rotate(45deg);
    pointer-events: none;
}

.select-wrapper.border-style select {
    width: 100%;
    min-height: 44px;
    padding: 0 38px 0 13px;
    appearance: none;
    -webkit-appearance: none;
    color: #e8e5df;
    background: #090b0f;
    border: 1px solid #30343c;
    border-radius: 0px;
    outline: none;
    font-size: 12px;
}

.select-wrapper.border-style select:focus {
    border-color: rgba(0, 201, 223, .72);
    box-shadow: 0 0 0 3px rgba(0, 201, 223, .085);
}

/* Buttons */
.btn-admin-primary,
.btn-login-submit,
.btn-admin-submit-left {
    min-height: 44px;
    padding: 0 20px;
    border-radius: 0px;
    border: 1px solid #f1eee7;
    background: #f1eee7;
    color: #111317;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    transition: .18s ease;
}

.btn-admin-primary:hover,
.btn-login-submit:hover,
.btn-admin-submit-left:hover {
    transform: translateY(-1px);
    background: #fff;
    box-shadow: 0 8px 24px rgba(255, 255, 255, .08);
}

.btn-admin-outline,
.btn-admin-secondary {
    min-height: 42px;
    border-radius: 0px;
    border: 1px solid #343841;
    background: rgba(255, 255, 255, .015);
    color: #d2d3d5;
    padding: 0 17px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    transition: .18s ease;
}

.btn-admin-outline:hover,
.btn-admin-secondary:hover {
    border-color: #5a606b;
    background: rgba(255, 255, 255, .045);
    color: #fff;
}

.btn-admin-secondary {
    border-color: rgba(0, 201, 223, .30);
    color: #75dce8;
}

/* Tables */
.admin-posts-table {
    border-collapse: collapse;
}

.admin-posts-table th {
    height: 48px;
    color: #686e77;
    font-size: 8px;
    letter-spacing: .16em;
    font-weight: 700;
    border-bottom: 1px solid var(--admin-border);
}

.admin-posts-table td {
    min-height: 68px;
    padding-top: 18px;
    padding-bottom: 18px;
    color: #c8c9cb;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.admin-posts-table tr:last-child td {
    border-bottom: 0;
}

.admin-posts-table tbody tr:hover {
    background: rgba(255, 255, 255, .018);
}

/* Editor */
.editor-input-title {
    width: 100%;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--admin-border) !important;
    border-radius: 0 !important;
    color: #f4f1ea !important;
    font-size: 30px !important;
    line-height: 1.25;
    padding: 2px 2px 20px !important;
    margin-bottom: 0 !important;
}

.editor-rich-toolbar {
    min-height: 48px;
    padding: 8px 10px;
    gap: 4px;
    background: rgba(8, 10, 13, .70);
    border-bottom: 1px solid var(--admin-border);
}

.toolbar-icon {
    min-width: 36px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 0px;
    color: #8d929a;
    background: transparent;
    font-size: 10px;
    transition: .15s ease;
}

.toolbar-icon:hover {
    color: #fff;
    background: #181b20;
    border-color: #292d34;
}

.toolbar-icon-image {
    color: #65dbe8;
}

.editor-content-editable {
    min-height: 420px;
    padding: 26px 28px;
    background: #0a0c10;
    border: 0;
    color: #d8d5cd;
    font-size: 15px;
    line-height: 1.8;
}

.editor-content-editable:focus {
    outline: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 201, 223, .25);
}

.editor-content-editable img,
.editor-inserted-image {
    display: block;
    width: auto !important;
    max-width: min(100%, 760px) !important;
    max-height: 520px !important;
    object-fit: contain !important;
    margin: 22px auto !important;
    border-radius: 0px;
}

.editor-inserted-image-wrapper {
    margin: 26px 0;
    padding: 12px;
    background: #080a0d;
    border: 1px solid var(--admin-border);
    border-radius: 0px;
    text-align: center;
}

.btn-remove-inserted-img {
    border: 0;
    color: #df7777;
    background: transparent;
    font-size: 9px;
    letter-spacing: .12em;
    cursor: pointer;
    padding: 8px 12px;
}

.add-image-helper-box {
    min-height: 78px;
    border: 1px dashed #343841;
    border-radius: 0px;
    color: #707680;
    transition: .18s ease;
}

.add-image-helper-box:hover {
    border-color: rgba(0, 201, 223, .45);
    color: #8de4ee;
    background: rgba(0, 201, 223, .025);
}

/* Cover picker */
.cover-image-upload-zone {
    min-height: 190px;
    border: 1px dashed #363a42;
    border-radius: 0px;
    background: #090b0f;
    overflow: hidden;
    cursor: pointer;
}

.cover-image-upload-zone:hover {
    border-color: rgba(0, 201, 223, .42);
}

.cover-image-preview {
    width: 100%;
    height: 190px;
    object-fit: cover;
}

/* Public article: prevent giant images and improve editorial rhythm */
.public-editorial-article {
    width: min(100%, 920px);
    margin: 0 auto;
}

.article-header {
    max-width: 760px;
    margin: 0 auto 38px;
}

.article-title {
    font-size: clamp(38px, 5vw, 46px);
    line-height: 1.04;
    letter-spacing: -.035em;
}

.article-subtitle {
    max-width: 680px;
    font-size: 16px;
    line-height: 1.65;
}

.article-cover {
    width: min(100%, 980px);
    max-height: 560px;
    margin: 0 auto 52px;
    border-radius: 0px;
    overflow: hidden;
    background: #0b0d10;
}

.article-cover img {
    display: block;
    width: 80%;
    height: auto;
    margin: auto;
}

.article-content {
    width: min(100%, 720px);
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.85;
}

.article-content p {
    margin: 0 0 1.55em;
}

.article-content h2 {
    margin: 2.2em 0 .75em;
    font-size: 30px;
    line-height: 1.2;
}

.article-content h3 {
    margin: 1.9em 0 .65em;
    font-size: 23px;
}

.article-content img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    max-height: 620px;
    object-fit: contain;
    margin: 38px auto;
    border-radius: 0px;
}

.article-content figure {
    margin: 42px 0;
    text-align: center;
}

/* Image library */
.image-library-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 24px;
}

.image-library-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.library-image-card {
    display: block;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--admin-border);
    border-radius: 0px;
    background: #0b0d10;
}

.library-image-thumb {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #08090c;
}

.library-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.library-image-card:hover .library-image-thumb img {
    transform: scale(1.025);
}

.library-image-meta {
    min-height: 48px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid var(--admin-border);
}

.library-image-meta span {
    color: #777d86;
    font-size: 9px;
}

.library-image-meta button {
    border: 0;
    background: transparent;
    color: #7fdce6;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .1em;
    cursor: pointer;
}

.library-empty-state,
.image-picker-empty {
    grid-column: 1/-1;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #747a83;
    border: 1px dashed #30343b;
    border-radius: 0px;
}

.library-empty-state strong,
.image-picker-empty strong {
    color: #d2d3d4;
    font-size: 13px;
}

/* Users/profile */
.users-list-table-header {
    padding: 0 0 12px;
    margin-bottom: 0;
    color: #656b74;
    font-size: 8px;
    letter-spacing: .14em;
}

.user-list-row {
    min-height: 72px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.profile-avatar-large {
    box-shadow: inset 0 0 0 1px rgba(192, 160, 74, .65);
}

/* Image picker modal */
.modal-open {
    overflow: hidden;
}

.image-picker-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.image-picker-modal.open {
    display: flex;
}

.image-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 3, 5, .82);
    backdrop-filter: blur(7px);
}

.image-picker-dialog {
    position: relative;
    z-index: 2;
    width: min(1040px, 94vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 0px;
    background: #0d0f13;
    box-shadow: 0 32px 100px rgba(0, 0, 0, .55);
}

.image-picker-header {
    padding: 24px 26px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid var(--admin-border);
}

.image-picker-header h2 {
    margin: 5px 0 7px;
    color: #f1eee7;
    font-size: 24px;
}

.image-picker-header p {
    margin: 0;
    color: #777d86;
    font-size: 11px;
}

.image-picker-close {
    width: 36px;
    height: 36px;
    border: 1px solid #343841;
    border-radius: 0px;
    background: transparent;
    color: #a9adb4;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
}

.image-picker-close:hover {
    color: #fff;
    background: #171a1f;
}

.image-picker-grid {
    padding: 22px 24px;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.image-picker-card {
    padding: 0;
    overflow: hidden;
    position: relative;
    aspect-ratio: 4/3;
    border: 1px solid #282c33;
    border-radius: 0px;
    background: #080a0d;
    cursor: pointer;
}

.image-picker-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .2s ease;
}

.image-picker-card span {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 8px;
    opacity: 0;
    transform: translateY(4px);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 0px;
    background: rgba(4, 6, 8, .86);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .13em;
    transition: .18s ease;
}

.image-picker-card:hover {
    border-color: rgba(0, 201, 223, .50);
}

.image-picker-card:hover img {
    opacity: .66;
    transform: scale(1.025);
}

.image-picker-card:hover span {
    opacity: 1;
    transform: none;
}

.image-picker-loading {
    grid-column: 1/-1;
    padding: 80px 0;
    text-align: center;
    color: #747a83;
    font-size: 11px;
}

.image-picker-footer {
    padding: 15px 24px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--admin-border);
}

/* Responsive */
@media (max-width: 1100px) {

    .image-library-grid,
    .image-picker-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-content-panel {
        padding: 34px 28px 60px;
    }
}

@media (max-width: 820px) {
    .admin-sidebar {
        width: 78px;
        min-width: 78px;
    }

    .sidebar-logo-area {
        padding: 24px 14px;
        justify-content: center;
    }

    .sidebar-logo-area img {
        width: 48px !important;
        object-fit: cover;
        object-position: left;
    }

    .sidebar-nav {
        padding: 20px 10px;
    }

    .sidebar-nav-link {
        justify-content: center;
        padding: 0;
    }

    .sidebar-nav-link span:not(.nav-icon-dot) {
        display: none;
    }

    .nav-section-label {
        display: none;
    }

    .nav-menu-icon {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
    }

    .sidebar-footer span {
        display: none;
    }

    .image-library-grid,
    .image-picker-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ==========================================================================
   LOGIN — explicit form controls
   ========================================================================== */
.login-card-box form {
    width: 100%;
}

.login-card-box .form-group {
    display: block;
    width: 100%;
    margin: 0 0 20px;
}

.login-card-box .form-group label {
    display: block;
    margin: 0 0 9px;
    color: #a8acb3;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1;
}

.login-card-box .form-group input {
    display: block;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid #30343c;
    border-radius: 0px;
    outline: none;
    background: #090b0f;
    color: #f2efe8;
    font-family: var(--font-sans);
    font-size: 12px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.login-card-box .form-group input:hover {
    border-color: #414650;
}

.login-card-box .form-group input:focus {
    border-color: rgba(0, 201, 223, .75);
    background: #0b0e12;
    box-shadow: 0 0 0 3px rgba(0, 201, 223, .09);
}

.login-card-box .form-group input::placeholder {
    color: #555b64;
}

.login-card-actions {
    margin-top: 26px;
}

.login-card-actions .btn-login-submit {
    width: 100%;
    min-height: 48px;
}

.login-error-message {
    width: 100%;
    box-sizing: border-box;
    margin: 6px 0 0;
    padding: 11px 13px;
    border: 1px solid rgba(220, 104, 104, .38);
    border-radius: 0px;
    background: rgba(220, 104, 104, .08);
    color: #e68c8c;
    font-size: 10px;
    line-height: 1.45;
}

@media (max-width: 560px) {
    .login-card-box {
        padding: 34px 24px;
    }
}


/* API-aligned controls */
.field-help-text {
    margin: 7px 0 0;
    color: #666c75;
    font-size: 9px;
    line-height: 1.45;
}

.agent-config-card {
    max-width: 920px;
}

.agent-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: -2px 0 22px;
    color: #70767f;
    font-size: 9px;
    letter-spacing: .04em;
}

.admin-posts-table .actions-cell {
    text-align: right;
    white-space: nowrap;
}

.admin-posts-table .actions-cell .btn-table-action+.btn-table-action {
    margin-left: 6px;
}

/* ==========================================================================
   GESTÃO DE USUÁRIOS — MODAL + SWEETALERT
   ========================================================================== */
.user-edit-modal{
    position:fixed;
    inset:0;
    z-index:10050;
    display:none;
    align-items:center;
    justify-content:center;
    padding:28px;
}
.user-edit-modal.open{display:flex;}
.user-edit-backdrop{
    position:absolute;
    inset:0;
    background:rgba(2,3,5,.84);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.user-edit-dialog{
    position:relative;
    z-index:2;
    width:min(560px,94vw);
    max-height:90vh;
    overflow:auto;
    border:1px solid rgba(255,255,255,.12);
    background:#0d0f13;
    box-shadow:0 36px 110px rgba(0,0,0,.6);
    animation:wandreModalIn .18s ease-out;
}
@keyframes wandreModalIn{
    from{opacity:0;transform:translateY(12px) scale(.985);}
    to{opacity:1;transform:translateY(0) scale(1);}
}
.user-edit-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding:25px 27px 21px;
    border-bottom:1px solid var(--admin-border);
}
.user-edit-header h2{
    margin:5px 0 7px;
    color:#f2efe8;
    font-family:var(--font-serif);
    font-size:25px;
    font-weight:400;
}
.user-edit-header p{
    margin:0;
    color:#777d86;
    font-size:11px;
}
.user-edit-close{
    width:36px;
    height:36px;
    flex:0 0 36px;
    border:1px solid #343841;
    background:transparent;
    color:#969ba4;
    font-size:23px;
    cursor:pointer;
}
.user-edit-close:hover{color:#fff;background:#171a1f;}
.user-edit-body{padding:25px 27px 8px;}
.user-edit-avatar-row{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:25px;
    padding-bottom:20px;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.user-edit-avatar{width:48px;height:48px;}
.user-edit-avatar-row>div:last-child{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}
.user-edit-avatar-row strong{color:#ebe8e1;font-size:13px;font-weight:600;}
.user-edit-avatar-row span{color:#747a83;font-size:10px;overflow:hidden;text-overflow:ellipsis;}
.user-edit-footer{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding:17px 27px 23px;
    border-top:1px solid var(--admin-border);
}
.user-edit-footer button{min-width:148px;}

.swal2-container{
    z-index:12000!important;
    font-family:var(--font-sans)!important;
}
.wandre-swal-popup,
.swal2-popup.wandre-swal-popup{
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:0!important;
    box-shadow:0 34px 100px rgba(0,0,0,.58)!important;
}
.wandre-swal-popup .swal2-title{
    color:#f2efe8!important;
    font-family:var(--font-serif)!important;
    font-size:24px!important;
    font-weight:400!important;
}
.wandre-swal-popup .swal2-html-container{
    color:#858a93!important;
    font-size:12px!important;
    line-height:1.6!important;
}
.wandre-swal-popup .swal2-confirm,
.wandre-swal-popup .swal2-cancel{
    min-height:42px!important;
    padding:0 18px!important;
    border-radius:0!important;
    font-size:10px!important;
    font-weight:700!important;
    letter-spacing:.12em!important;
    box-shadow:none!important;
}
@media(max-width:600px){
    .user-edit-modal{padding:16px;}
    .user-edit-footer{flex-direction:column-reverse;}
    .user-edit-footer button{width:100%;}
}


/* ==========================================================================
   UPLOAD VAZIO DA BIBLIOTECA + ARQUIVOS DE APOIO DO GERADOR
   ========================================================================== */

.library-empty-dropzone {
    grid-column: 1 / -1;
    min-height: 300px;
    padding: 42px 28px;
    border: 1.5px dashed #343a43;
    background: rgba(8, 10, 13, .55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-align: center;
    cursor: pointer;
    transition: .18s ease;
    box-sizing: border-box;
}

.library-empty-dropzone:hover,
.library-empty-dropzone.drag-over {
    border-color: rgba(0, 201, 223, .72);
    background: rgba(0, 201, 223, .035);
    box-shadow: inset 0 0 0 1px rgba(0, 201, 223, .08);
}

.library-empty-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 8px;
    display: grid;
    place-items: center;
    color: #6bdde9;
}

.library-empty-icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.library-empty-dropzone strong {
    color: #e4e1da;
    font-size: 14px;
    font-weight: 600;
}

.library-empty-dropzone span {
    color: #858a93;
    font-size: 11px;
}

.library-empty-dropzone small {
    margin-top: 4px;
    color: #5d636c;
    font-size: 9px;
}

.briefing-file-dropzone {
    width: 100%;
    min-height: 150px;
    padding: 24px;
    box-sizing: border-box;
    border: 1.5px dashed #343a43;
    background: rgba(8, 10, 13, .55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
    cursor: pointer;
    transition: .18s ease;
}

.briefing-file-dropzone.compact {
    min-height: 116px;
    padding: 20px;
}

.briefing-file-dropzone:hover,
.briefing-file-dropzone.drag-over {
    border-color: rgba(0, 201, 223, .72);
    background: rgba(0, 201, 223, .035);
    box-shadow: inset 0 0 0 1px rgba(0, 201, 223, .08);
}

.briefing-file-icon {
    width: 38px;
    height: 38px;
    color: #6bdde9;
    margin-bottom: 4px;
}

.briefing-file-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.briefing-file-dropzone strong {
    color: #e6e3dc;
    font-size: 11px;
    font-weight: 600;
}

.briefing-file-dropzone span {
    color: #858a93;
    font-size: 10px;
}

.briefing-file-dropzone small {
    color: #5d636c;
    font-size: 9px;
}

.briefing-files-summary {
    margin-top: 9px;
    color: #666c75;
    font-size: 9px;
}

.attached-files-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.file-pill {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: #0b0d11;
    display: flex;
    align-items: center;
    gap: 9px;
}

.file-pill-icon {
    flex: 0 0 auto;
    padding: 4px 6px;
    border: 1px solid rgba(0,201,223,.22);
    color: #6bdde9;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .08em;
}

.file-pill-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #b9bdc3;
    font-size: 10px;
}

.file-pill .btn-remove-file {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(220,104,104,.16);
    color: #cf7373;
    background: transparent;
}

.file-pill .btn-remove-file:hover {
    border-color: rgba(220,104,104,.45);
    background: rgba(220,104,104,.07);
    color: #f09a9a;
}


/* BUSCA, FILTROS, MODELOS, LOADING E EDITOR DE IMAGENS */
.public-search-bar,.admin-search-field{display:flex;align-items:center;gap:10px;border:1px solid #30343c;background:#090b0f;padding:0 13px;box-sizing:border-box}.public-search-bar{width:min(520px,100%);height:48px;margin-top:30px}.public-search-bar svg,.admin-search-field svg{width:17px;height:17px;fill:none;stroke:#6d737c;stroke-width:1.7;flex:0 0 auto}.public-search-bar input,.admin-search-field input{width:100%;height:100%;border:0;outline:0;background:transparent;color:#eee;font:inherit;font-size:12px;box-sizing:border-box}.public-search-bar:focus-within,.admin-search-field:focus-within{border-color:rgba(0,201,223,.65);box-shadow:0 0 0 3px rgba(0,201,223,.07)}.admin-post-filters{display:grid;grid-template-columns:minmax(260px,1fr) 190px auto;gap:12px;align-items:end;margin:0 0 18px}.admin-search-field{height:44px}.admin-date-filter{display:flex;flex-direction:column;gap:7px}.admin-date-filter label{font-size:8px;font-weight:700;letter-spacing:.15em;color:#777d86}.admin-date-filter input{height:44px;box-sizing:border-box;padding:0 12px;border:1px solid #30343c;background:#090b0f;color:#d8d5cf;color-scheme:dark;font:inherit;font-size:11px;outline:0}.btn-clear-filters{height:44px!important;min-height:44px!important}.empty-table-cell{text-align:center!important;color:#747a83!important;padding:36px!important}.admin-posts-table .btn-table-action{height:34px;min-height:34px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:0 12px}.agent-model-insight{margin-top:9px;padding:12px 13px;border:1px solid rgba(0,201,223,.13);background:rgba(0,201,223,.025);display:flex;flex-direction:column;gap:4px}.agent-model-insight strong{color:#dfe3e4;font-size:11px}.agent-model-insight span{color:#7b818a;font-size:10px;line-height:1.5}.agent-model-insight small{color:#536069;font-size:8px;letter-spacing:.06em}#agent-model-input{width:100%;height:46px;padding:0 38px 0 12px;appearance:none;background:#090b0f;color:#eee;border:1px solid #30343c;outline:0;box-sizing:border-box}.ia-suggestion-box{position:relative}.ia-suggestion-box.is-generating>*:not(.ia-regeneration-loading){opacity:.18;filter:blur(1px);pointer-events:none}.ia-regeneration-loading{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:rgba(8,10,13,.82);backdrop-filter:blur(3px);text-align:center}.ia-regeneration-loading strong{color:#eee;font-size:13px}.ia-regeneration-loading span{color:#777d86;font-size:10px}.mini-spinner{width:27px;height:27px;border:2px solid rgba(255,255,255,.12);border-top-color:#00c9df;border-radius:50%;animation:miniSpin .8s linear infinite;margin-bottom:5px}@keyframes miniSpin{to{transform:rotate(360deg)}}.add-image-helper-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.add-image-helper-box small{font-size:9px;letter-spacing:.03em;color:#59606a;font-weight:400}.add-image-helper-box.drag-over,.editor-content-editable.editor-drag-active{border-color:rgba(0,201,223,.75)!important;background:rgba(0,201,223,.035)!important}.editor-inserted-image-wrapper{position:relative!important;cursor:grab;overflow:visible!important}.editor-inserted-image-wrapper:active{cursor:grabbing}.editor-image-drag-handle{position:absolute;top:8px;left:8px;z-index:5;display:grid;place-items:center;width:32px;height:28px;border:1px solid rgba(255,255,255,.15);background:rgba(5,7,9,.86);color:#9da3aa;font-size:14px;letter-spacing:-3px;cursor:grab;user-select:none}.editor-inserted-image-wrapper .btn-remove-inserted-img{display:block!important;position:absolute!important;top:8px!important;right:8px!important;z-index:6!important;background:rgba(5,7,9,.9)!important;border:1px solid rgba(220,104,104,.3)!important;color:#e08080!important;padding:8px 10px!important}.editor-inserted-image-wrapper .btn-remove-inserted-img:hover{background:#7f2f2f!important;color:#fff!important}.image-picker-upload-row{padding:14px 24px 0}.modal-image-dropzone{min-height:74px;border:1px dashed #343a43;background:#090b0f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:.18s ease}.modal-image-dropzone:hover,.modal-image-dropzone.drag-over{border-color:rgba(0,201,223,.7);background:rgba(0,201,223,.03)}.modal-image-dropzone span{color:#cdd0d3;font-size:9px;font-weight:800;letter-spacing:.12em}.modal-image-dropzone small{color:#626872;font-size:9px}@media(max-width:760px){.admin-post-filters{grid-template-columns:1fr}.btn-clear-filters{width:100%}}

/* ==========================================================================
   RESPONSIVE OVERHAUL — PUBLIC BLOG + ADMIN
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

.container-lg,
.container-md {
    width: min(100%, 1400px);
    margin-inline: auto;
}

/* Public reader back button */
.article-back-row {
    width: min(100%, 920px);
    margin: 0 auto 34px;
}

.btn-back-public {
    appearance: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 0 15px 0 10px;
    border: 1px solid rgba(255,255,255,.11);
    background: rgba(9,11,15,.72);
    color: #b9bdc3;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: .18s ease;
    backdrop-filter: blur(8px);
}

.btn-back-public:hover {
    color: #f3f0e9;
    border-color: rgba(0,201,223,.36);
    background: rgba(0,201,223,.035);
    transform: translateX(-2px);
}

.btn-back-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.08);
    background: #0b0d11;
    color: #71dce8;
}

.btn-back-icon svg { width: 15px; height: 15px; }

/* CTA */
.article-cta-box {
    width: min(100%, 760px);
    margin: 72px auto 0;
    padding: clamp(28px, 4vw, 46px);
    border: 1px solid rgba(255,255,255,.10);
    background:
        linear-gradient(135deg, rgba(0,201,223,.035), transparent 42%),
        linear-gradient(180deg, rgba(16,18,23,.96), rgba(10,12,16,.96));
    box-shadow: 0 26px 70px rgba(0,0,0,.24);
}

.article-cta-eyebrow {
    display: block;
    margin-bottom: 12px;
    color: #79dce7;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.cta-box-title {
    margin: 0 0 12px;
    color: #f1eee7;
    font-family: var(--font-serif);
    font-size: clamp(25px, 3.4vw, 38px);
    line-height: 1.08;
    font-weight: 400;
    letter-spacing: -.025em;
}

.cta-box-text {
    width: min(100%, 620px);
    margin: 0 0 26px;
    color: #858a93;
    font-size: 13px;
    line-height: 1.7;
}

.cta-box-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    
}

.btn-box-primary,
.btn-box-outline {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 19px;
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: .18s ease;
}

.btn-box-primary {
    border: 1px solid #f0ede6;
    background: #f0ede6;
    color: #101216;
}

.btn-box-primary:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 34px rgba(255,255,255,.08);
}

.btn-box-outline {
    border: 1px solid #343a43;
    background: rgba(255,255,255,.015);
    color: #d7d8da;
}

.btn-box-outline:hover {
    border-color: rgba(0,201,223,.55);
    background: rgba(0,201,223,.035);
    color: #8fe5ee;
    transform: translateY(-2px);
}

.cta-arrow { font-size: 13px; line-height: 1; }

/* Admin desktop structural fixes */
.admin-content-panel {
    margin-left: 232px;
    width: calc(100% - 232px);
    min-width: 0;
}

.admin-split-layout > * { min-width: 0; }

.profile-card-box { width: min(100%, 760px); }

#form-new-user,
#form-user-profile,
#form-agent-config { width: 100%; }

.admin-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-posts-table { min-width: 760px; }

.image-picker-dialog,
.user-edit-dialog { max-width: calc(100vw - 32px); }

@media (max-width: 1100px) {
    .blog-page-section { padding-inline: 28px; }

    .public-articles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .featured-post-card { grid-template-columns: 1fr; }
    .featured-post-image { min-height: 340px; }

    .admin-split-layout { flex-direction: column; }

    .admin-col-editor-body,
    .admin-col-editor-settings {
        width: 100%;
        flex: none;
    }

    .admin-col-editor-settings {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .editor-container-box { min-height: auto; }
    .agent-config-card { max-width: none; }
}

@media (max-width: 820px) {
    .admin-sidebar {
        width: 72px !important;
        min-width: 72px !important;
    }

    .admin-content-panel {
        margin-left: 72px !important;
        width: calc(100% - 72px) !important;
        padding: 26px 20px 50px !important;
    }

    .sidebar-logo-area {
        min-height: 76px;
        padding: 18px 10px !important;
    }

    .sidebar-logo-area img {
        width: 38px !important;
        content: url('../Assets/simbolo/simbolo_azul_fundo_transparente.png');
    }

    .sidebar-nav { padding: 14px 8px !important; }

    .sidebar-nav-link {
        width: 100% !important;
        min-height: 46px;
        justify-content: center;
        padding: 0 !important;
    }

    .sidebar-nav-link span,
    .nav-section-label,
    .sidebar-footer span { display: none !important; }

    .admin-screen-title,
    .admin-screen-title.size-large { font-size: 30px; }

    .admin-stats-row {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 12px;
        margin-bottom: 24px;
    }

    .admin-post-filters { grid-template-columns: 1fr !important; }

    .admin-col-editor-settings { grid-template-columns: 1fr; }

    .editor-header-actions {
        width: 100%;
        display: flex;
        gap: 8px;
    }

    .editor-header-actions button { flex: 1; }

    .image-library-grid,
    .image-picker-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

    .users-list-table-header { display: none; }
    .user-col-info { width: 100% !important; }
    .user-col-email { display: none; }
    .user-email-val-sub { display: block !important; }

    .review-actions-row,
    .suggestion-actions-row {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 680px) {
    .blog-page-section {
        padding: 96px 18px 48px;
        min-height: auto;
    }

    .header-container { padding-inline: 18px; }
    .header-container .logo-link img { width: 150px; }

    .blog-hero-header { margin-bottom: 52px; }

    .blog-main-title {
        font-size: clamp(38px, 12vw, 56px);
        line-height: 1.02;
    }

    .blog-main-title br { display: none; }

    .blog-main-subtitle {
        font-size: 14px;
        line-height: 1.7;
    }

    .public-search-bar { width: 100%; }

    .blog-section-divider-row {
        margin-bottom: 22px;
        gap: 12px;
        align-items: flex-end;
    }

    .public-articles-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .featured-post-card { min-height: 0; }
    .featured-post-image { min-height: 230px; }
    .featured-post-copy { padding: 24px 20px 28px; }
    .featured-post-copy h3 { font-size: 30px; }
    .public-card-body { padding: 20px; }
    .card-ring-cover { height: 200px; }

    #page-public-reader { padding-top: 92px; }

    .article-back-row { margin-bottom: 28px; }

    .article-title {
        font-size: clamp(34px, 11vw, 48px);
        line-height: 1.02;
    }

    .article-subtitle { font-size: 14px; }

    .article-cover {
        margin-bottom: 34px;
        max-height: none;
    }

    .article-cover img {
        width: 100%;
        height: auto;
    }

    .article-content {
        font-size: 16px;
        line-height: 1.78;
    }

    .article-content h2 { font-size: 26px; }
    .article-content h3 { font-size: 21px; }
    .article-content figure { margin: 28px 0; }
    .article-content img { margin: 26px auto; }

    .article-cta-box {
        margin-top: 48px;
        padding: 24px 18px;
    }

    .cta-box-buttons { flex-direction: column; }

    .btn-box-primary,
    .btn-box-outline {
        width: 100%;
        min-height: 50px;
    }

    .admin-content-panel { padding-inline: 14px !important; }

    .admin-card-box,
    .editor-container-box,
    .editor-settings-card {
        padding: 20px !important;
    }

    .admin-screen-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-screen-header > button,
    .admin-screen-header .editor-header-actions { width: 100%; }

    .editor-rich-toolbar {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .toolbar-icon { flex: 0 0 auto; }

    .editor-content-editable {
        padding: 18px;
        min-height: 360px;
    }

    .editor-input-title { font-size: 25px !important; }

    .image-picker-modal,
    .user-edit-modal { padding: 10px; }

    .image-picker-dialog,
    .user-edit-dialog {
        width: 100%;
        max-width: 100%;
        max-height: 94vh;
    }

    .image-picker-grid {
        padding: 14px;
        gap: 8px;
    }

    .user-edit-footer {
        flex-direction: column-reverse;
    }

    .user-edit-footer button { width: 100%; }
}

@media (max-width: 460px) {
    .admin-sidebar {
        width: 60px !important;
        min-width: 60px !important;
    }

    .admin-content-panel {
        margin-left: 60px !important;
        width: calc(100% - 60px) !important;
        padding: 22px 10px 44px !important;
    }

    .sidebar-logo-area img { width: 32px !important; }

    .admin-stats-row { grid-template-columns: 1fr; }

    .admin-screen-title,
    .admin-screen-title.size-large { font-size: 27px; }

    .admin-card-box,
    .editor-container-box,
    .editor-settings-card {
        padding: 16px !important;
    }

    .image-library-grid,
    .image-picker-grid {
        grid-template-columns: 1fr !important;
    }

    .blog-page-section { padding-inline: 14px; }
}


/* ==========================================================================
   UNIFIED FINAL — CAPA + PUBLICAÇÕES MOBILE
   ========================================================================== */

.required-cover-badge {
    display: inline-flex;
    margin-left: 6px;
    color: #73dce7;
    font-size: 7px;
    letter-spacing: .09em;
    vertical-align: middle;
}

/* Fake editorial cover only on public listing cards/featured */
.public-cover-fallback {
    width: 100%;
    height: 100%;
    min-height: inherit;
    position: relative;
    overflow: hidden;
    padding: 26px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 82% 18%, rgba(0,201,223,.11), transparent 30%),
        linear-gradient(145deg, #11151b, #080a0d 72%);
}

.public-cover-fallback::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.023) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.023) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

.public-cover-fallback-monogram {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(8,10,13,.38);
}

.public-cover-fallback-monogram span {
    color: rgba(240,237,230,.82);
    font-family: var(--font-serif);
    font-size: 28px;
    line-height: 1;
}

.public-cover-fallback-mark {
    position: absolute;
    top: 8px;
    right: 22px;
    color: rgba(255,255,255,.035);
    font-family: var(--font-serif);
    font-size: 112px;
    line-height: 1;
    user-select: none;
}

.card-ring-cover-fallback {
    cursor: default;
}

/* Desktop keeps the original table. */
.admin-posts-mobile-list {
    display: none;
}

@media (min-width: 681px) {
    #admin-screen-publicacoes .admin-table-wrapper {
        display: block;
    }

    #admin-screen-publicacoes .admin-posts-mobile-list {
        display: none !important;
    }
}

/* Mobile only: hide table and use vertical post cards. */
@media (max-width: 680px) {
    #admin-screen-publicacoes .admin-table-wrapper {
        display: none !important;
    }

    #admin-screen-publicacoes .admin-posts-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .admin-post-mobile-card {
        width: 100%;
        min-width: 0;
        padding: 17px 15px 15px;
        border: 1px solid var(--admin-border);
        background: linear-gradient(180deg, rgba(16,18,23,.92), rgba(10,12,16,.90));
        overflow: hidden;
    }

    .admin-post-mobile-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
        margin-bottom: 13px;
    }

    .admin-post-mobile-date {
        color: #656b74;
        font-size: 8px;
        line-height: 1.4;
    }

    .admin-post-mobile-card h3 {
        margin: 0;
        color: #f0ede6;
        font-family: var(--font-serif);
        font-size: 21px;
        line-height: 1.18;
        font-weight: 400;
        overflow-wrap: anywhere;
    }

    .admin-post-mobile-slug {
        display: block;
        margin-top: 7px;
        color: #5e6570;
        font-size: 8px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .admin-post-mobile-card p {
        margin: 12px 0 0;
        color: #858a93;
        font-size: 10px;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .admin-post-mobile-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 15px;
        padding-top: 14px;
        border-top: 1px solid rgba(255,255,255,.055);
    }

    .admin-post-mobile-actions .btn-table-action {
        width: 100%;
        height: 42px;
        min-height: 42px;
        margin: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .admin-post-mobile-empty {
        min-height: 170px;
        padding: 24px;
        border: 1px dashed #30343b;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        text-align: center;
        color: #747a83;
    }

    .public-cover-fallback {
        padding: 20px;
    }

}

@media (max-width: 420px) {
    .admin-post-mobile-actions {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   CONTEÚDO PÚBLICO — IMAGENS SEM CONTROLES DE EDIÇÃO
   ========================================================================== */
.article-inline-figure {
    margin: 38px 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
}

.article-inline-image {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    max-height: 620px;
    object-fit: contain;
    margin: 0 auto !important;
}

#art-content .editor-image-drag-handle,
#art-content .btn-remove-inserted-img {
    display: none !important;
}


/* ==========================================================================
   NAVBAR PÚBLICA MOBILE
   ========================================================================== */

.public-desktop-nav {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.public-mobile-menu-toggle,
.public-mobile-menu {
    display: none;
}

@media (max-width: 680px) {
    /* O menu desktop some, mas a navegação continua disponível pelo botão mobile. */
    .header-container nav.public-desktop-nav {
        display: none !important;
    }

    .header-container {
        min-height: 72px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .public-mobile-menu-toggle {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0;
        background: transparent;
        border: none;
        color: #f1eee7;
        cursor: pointer;
        position: relative;
        z-index: 1003;
    }

    .public-mobile-menu-toggle span {
        width: 18px;
        height: 1px;
        display: block;
        background: currentColor;
        transition: transform .2s ease, opacity .2s ease;
        transform-origin: center;
    }

    .public-mobile-menu-toggle.open span:first-child {
        transform: translateY(4px) rotate(45deg);
    }

    .public-mobile-menu-toggle.open span:last-child {
        transform: translateY(-4px) rotate(-45deg);
    }

    .public-mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1002;
        display: grid;
        grid-template-columns: 1fr;
        padding: 10px 18px 18px;
        border-top: 1px solid rgba(255,255,255,.07);
        border-bottom: 1px solid rgba(255,255,255,.09);
        background: rgba(8,10,13,.98);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    }

    .public-mobile-menu.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .public-mobile-menu a {
        min-height: 58px;
        display: grid;
        grid-template-columns: 34px 1fr;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid rgba(255,255,255,.055);
        color: #b9bdc3;
        text-decoration: none;
    }

    .public-mobile-menu a:last-child {
        border-bottom: 0;
    }

    .public-mobile-menu a span {
        color: #5d646d;
        font-size: 8px;
        letter-spacing: .12em;
    }

    .public-mobile-menu a strong {
        color: #e9e6df;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .public-mobile-menu a.active strong {
        color: #72dce8;
    }

    body.public-menu-open {
        overflow: hidden;
    }

    /* Mantém a logo e o botão confortáveis em telas estreitas. */
    .header-container .logo-link {
        min-width: 0;
        display: flex;
        align-items: center;
    }

    .header-container .logo-link img {
        width: min(150px, 48vw);
        height: auto;
    }
}


/* ==========================================================================
   MOBILE HEADER VISIBILITY FIX — V5
   Garante que o header público realmente apareça acima da hero.
   ========================================================================== */
@media (max-width: 680px) {
    #public-view-container > #header,
    #public-view-container #header {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-height: 72px !important;
        z-index: 10000 !important;
        margin: 0 !important;
        background: rgba(7, 8, 11, .96) !important;
        border-bottom: 1px solid rgba(255,255,255,.09) !important;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    #public-view-container #header .header-container {
        width: 100% !important;
        max-width: none !important;
        min-height: 72px !important;
        height: 72px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
    }

    #public-view-container #header .logo-link {
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #public-view-container #header .logo-link img {
        display: block !important;
        width: min(142px, 44vw) !important;
        height: auto !important;
        max-height: 42px !important;
        object-fit: contain !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #public-view-container #header .public-desktop-nav {
        display: none !important;
    }

    #public-view-container #header .public-mobile-menu-toggle {
        display: inline-flex !important;
        width: auto !important;
        min-width: 84px !important;
        height: 42px !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: row !important;
        gap: 10px !important;
        padding: 0 12px !important;
        border: 1px solid rgba(255,255,255,.14) !important;
        background: rgba(255,255,255,.025) !important;
        color: #ece9e2 !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10002 !important;
    }

    .public-mobile-menu-label {
        display: inline-block !important;
        color: #ece9e2 !important;
        font-size: 9px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: .14em !important;
    }

    .public-mobile-menu-lines {
        width: 17px !important;
        height: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        flex: 0 0 17px !important;
    }

    .public-mobile-menu-lines i {
        width: 17px !important;
        height: 1px !important;
        display: block !important;
        background: #75dce8 !important;
        transition: transform .2s ease;
    }

    .public-mobile-menu-toggle.open .public-mobile-menu-lines i:first-child {
        transform: translateY(5.5px) rotate(45deg);
    }

    .public-mobile-menu-toggle.open .public-mobile-menu-lines i:last-child {
        transform: translateY(-5.5px) rotate(-45deg);
    }

    /* neutraliza as antigas regras que transformavam os spans do botão em linhas */
    #public-view-container #header .public-mobile-menu-toggle > span {
        width: auto;
        height: auto;
        background: transparent;
        transform: none;
    }

    #public-view-container #header .public-mobile-menu-toggle.open > span:first-child,
    #public-view-container #header .public-mobile-menu-toggle.open > span:last-child {
        transform: none;
    }

    #public-view-container #header .public-mobile-menu {
        top: 72px !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
    }

    /* Reserva espaço real para o header fixo. */
    #page-blog-home,
    #page-public-reader {
        padding-top: 112px !important;
    }
}

@media (max-width: 420px) {
    #public-view-container #header .header-container {
        padding-inline: 12px !important;
    }

    #public-view-container #header .logo-link img {
        width: min(128px, 43vw) !important;
    }

    #public-view-container #header .public-mobile-menu-toggle {
        min-width: 78px !important;
        padding-inline: 10px !important;
    }
}


/* ==========================================================================
   CRIAÇÃO DE ARTIGO — IA OU MANUAL + AÇÕES EXPLÍCITAS DO EDITOR
   ========================================================================== */
.article-create-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 24px;
}

.article-create-mode-card {
    width: 100%;
    min-height: 154px;
    padding: 22px 24px;
    border: 1px solid var(--admin-border);
    background: linear-gradient(180deg, rgba(16,18,23,.92), rgba(10,12,16,.9));
    color: var(--admin-text);
    font-family: var(--font-sans);
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    transition: .18s ease;
}

.article-create-mode-card:hover {
    border-color: rgba(0,201,223,.38);
    background: linear-gradient(180deg, rgba(0,201,223,.055), rgba(10,12,16,.94));
    transform: translateY(-1px);
}

.article-create-mode-card.active {
    border-color: rgba(0,201,223,.34);
    box-shadow: inset 3px 0 0 var(--admin-cyan);
}

.article-create-mode-kicker {
    color: #73dce7;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .18em;
}

.article-create-mode-card strong {
    color: #f0ede6;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.article-create-mode-card small {
    max-width: 560px;
    color: #777d86;
    font-size: 10px;
    line-height: 1.6;
}

.article-create-mode-action {
    margin-top: auto;
    color: #d9dcde;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.editor-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 760px) {
    .article-create-mode-grid {
        grid-template-columns: 1fr;
    }

    .article-create-mode-card {
        min-height: 132px;
        padding: 18px;
    }
}

/* ========================================================================== 
   NOVO ARTIGO — SWITCH IA / MANUAL COM RASCUNHO LOCAL
   ========================================================================== */
.article-create-switch-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: -6px 0 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255,255,255,.065);
}

.article-create-switch {
    position: relative;
    width: min(100%, 470px);
    min-height: 64px;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid #30343c;
    background: #080a0e;
    overflow: hidden;
}

.article-create-switch-indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: linear-gradient(180deg, rgba(0,201,223,.14), rgba(0,201,223,.055));
    border: 1px solid rgba(0,201,223,.34);
    box-shadow: inset 3px 0 0 var(--admin-cyan), 0 8px 24px rgba(0,0,0,.18);
    transition: transform .24s cubic-bezier(.22,.8,.22,1), box-shadow .24s ease;
    pointer-events: none;
}

.article-create-switch.manual-active .article-create-switch-indicator {
    transform: translateX(100%);
    box-shadow: inset -3px 0 0 var(--admin-cyan), 0 8px 24px rgba(0,0,0,.18);
}

.article-create-switch-option {
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 54px;
    padding: 9px 15px;
    border: 0;
    background: transparent;
    color: #777d86;
    font-family: var(--font-sans);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    transition: color .18s ease;
}

.article-create-switch-option span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
}

.article-create-switch-option small {
    font-size: 9px;
    line-height: 1.25;
    color: #5f6570;
    transition: color .18s ease;
}

.article-create-switch-option.active {
    color: #f1eee7;
}

.article-create-switch-option.active small {
    color: #8a9099;
}

.article-create-mode-description {
    width: min(100%, 510px);
    margin: 0;
    color: #777d86;
    font-size: 11px;
    line-height: 1.65;
    text-align: right;
}

.article-create-panel[hidden] {
    display: none !important;
}

.article-create-panel:not([hidden]) {
    animation: articleCreateModeIn .22s ease-out;
}

@keyframes articleCreateModeIn {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: none; }
}

.manual-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(280px, .75fr);
    gap: 22px;
    align-items: start;
}

.manual-create-main {
    min-height: 680px;
    padding: 30px !important;
}

.manual-create-heading {
    min-height: 54px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.manual-create-kicker {
    display: block;
    margin-bottom: 6px;
    color: #73dce7;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .17em;
}

.manual-create-heading h3 {
    margin: 0;
    color: #f1eee7;
    font-family: var(--font-serif);
    font-size: 23px;
    font-weight: 400;
    letter-spacing: -.02em;
}

.manual-autosave-state {
    flex: 0 0 auto;
    padding: 7px 9px;
    border: 1px solid rgba(0,201,223,.16);
    background: rgba(0,201,223,.025);
    color: #68bdc7;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .11em;
}

.manual-post-title {
    width: 100%;
    margin: 0;
    padding: 0 2px 18px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.09);
    outline: 0;
    background: transparent;
    color: #f3f0e9;
    font-family: var(--font-serif);
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.2;
    letter-spacing: -.025em;
}

.manual-post-title:focus {
    border-bottom-color: rgba(0,201,223,.48);
}

.manual-rich-toolbar {
    min-height: 48px;
    margin-top: 18px;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    border: 1px solid #2b2f36;
    border-bottom: 0;
    background: #080a0e;
}

.manual-rich-toolbar button {
    flex: 0 0 auto;
    min-width: 36px;
    height: 31px;
    padding: 0 10px;
    border: 1px solid transparent;
    background: transparent;
    color: #858b94;
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}

.manual-rich-toolbar button:hover {
    border-color: #30343c;
    background: #15181d;
    color: #f1eee7;
}

.manual-rich-body {
    min-height: 475px;
    padding: 26px 28px;
    border: 1px solid #2b2f36;
    outline: 0;
    background: #090b0f;
    color: #d8d5cd;
    font-size: 15px;
    line-height: 1.82;
    overflow-wrap: anywhere;
}

.manual-rich-body:focus {
    border-color: rgba(0,201,223,.52);
    box-shadow: inset 0 0 0 1px rgba(0,201,223,.08);
}

.manual-rich-body:empty::before {
    content: attr(data-placeholder);
    color: #555b64;
    font-style: italic;
    pointer-events: none;
}

.manual-rich-body h2,
.manual-rich-body h3 {
    color: #f0ede6;
    font-family: var(--font-serif);
    font-weight: 400;
}

.manual-rich-body blockquote {
    margin: 24px 0;
    padding-left: 18px;
    border-left: 2px solid var(--admin-gold);
    color: #aaa69f;
    font-style: italic;
}

.manual-create-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.manual-settings-card,
.manual-actions-card {
    height: auto !important;
    padding: 24px !important;
}

.manual-settings-card textarea {
    min-height: 120px !important;
}

.manual-settings-note,
.manual-actions-card p {
    margin: 2px 0 0;
    color: #6f7580;
    font-size: 10px;
    line-height: 1.6;
}

.manual-actions-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.manual-actions-card .setting-section-title {
    margin-bottom: 2px;
}

.manual-actions-card p {
    margin-bottom: 8px;
}

.manual-actions-card button {
    width: 100%;
    min-height: 46px;
}

@media (max-width: 1100px) {
    .manual-create-layout {
        grid-template-columns: 1fr;
    }

    .manual-create-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .manual-create-main {
        min-height: auto;
    }
}

@media (max-width: 760px) {
    .article-create-switch-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .article-create-switch {
        width: 100%;
    }

    .article-create-mode-description {
        width: 100%;
        text-align: left;
    }

    .manual-create-heading {
        flex-direction: column;
        gap: 10px;
    }

    .manual-create-sidebar {
        grid-template-columns: 1fr;
    }

    .manual-rich-body {
        min-height: 380px;
        padding: 20px;
    }
}

@media (max-width: 460px) {
    .article-create-switch-option {
        padding-inline: 10px;
    }

    .article-create-switch-option small {
        font-size: 8px;
    }

    .manual-create-main,
    .manual-settings-card,
    .manual-actions-card {
        padding: 16px !important;
    }

    .manual-rich-body {
        min-height: 330px;
        padding: 16px;
    }
}


/* Editor final usado diretamente pelos modos IA e Manual */
.editor-create-mode-switch-wrap {
    margin-top: 0;
}

#admin-screen-editor .editor-create-mode-switch-wrap[hidden] {
    display: none !important;
}

#admin-screen-editor .editor-create-mode-switch-wrap:not([hidden]) + .admin-screen-header {
    margin-top: 0;
}