/* =====================================================
   WORDIOS UI V3 - MINIMAL PREMIUM DESIGN
===================================================== */

:root {
    --wd-primary: #10253f;
    --wd-primary-dark: #0b1a2d;
    --wd-primary-soft: #eef4ff;
    --wd-accent: #4c78ff;

    --wd-success: #167a3d;
    --wd-success-soft: #eaf7ee;

    --wd-warning: #c07a00;
    --wd-warning-soft: #fff5e6;

    --wd-danger: #c53a3a;
    --wd-danger-soft: #fdeeee;

    --wd-info: #2563eb;
    --wd-info-soft: #eaf2ff;

    --wd-bg: #f4f7fb;
    --wd-card: #ffffff;
    --wd-border: #e6ebf2;
    --wd-text: #0f172a;
    --wd-muted: #64748b;

    --wd-radius-sm: 10px;
    --wd-radius-md: 14px;
    --wd-radius-lg: 18px;

    --wd-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.03);
    --wd-shadow-md: 0 10px 28px rgba(15, 23, 42, 0.04);
}

* {
    box-sizing: border-box;
}

body {
    background: var(--wd-bg);
    color: var(--wd-text);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;
    line-height: 1.5;
}

/* =====================================================
   TOPBAR
===================================================== */

.dashboard-page {
    min-height: 100vh;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: 70px;
    padding: 0 24px;
    background: #ffffff;
    border-bottom: 1px solid var(--wd-border);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--wd-primary);
}

.topbar-logo::before {
    content: "W";
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--wd-primary), var(--wd-accent));
    font-size: 16px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-name {
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid var(--wd-border);
    border-radius: 999px;
    font-weight: 700;
    color: #334155;
    font-size: 13px;
}

.logout-btn {
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 700;
    background: var(--wd-danger);
    color: #ffffff;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: 0.2s ease;
}

.logout-btn:hover {
    background: #a92b2b;
}

/* =====================================================
   MAIN CONTENT
===================================================== */

.dashboard-content {
    width: min(1320px, 100%);
    margin: 0 auto;
    padding: 24px 24px 40px;
}

.welcome-card,
.action-card,
.stat-card {
    border: 1px solid var(--wd-border);
    background: var(--wd-card);
    border-radius: var(--wd-radius-lg);
    box-shadow: var(--wd-shadow-sm);
}

.welcome-card {
    padding: 24px;
    position: relative;
    overflow: hidden;
}

.welcome-card::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(76, 120, 255, 0.14), transparent 72%);
}

.welcome-card h1 {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--wd-text);
    margin-bottom: 6px;
}

.welcome-card p {
    font-size: 14px;
    color: var(--wd-muted);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.stat-card {
    padding: 18px 20px;
    transition: 0.2s ease;
}

.stat-card:hover {
    border-color: #d0daf2;
}

.stat-card h3 {
    color: var(--wd-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.stat-card p {
    margin-top: 6px;
    font-size: 26px;
    color: var(--wd-text);
    font-weight: 800;
}

.action-card {
    padding: 20px;
    margin-top: 18px;
}

.action-card h2 {
    font-size: 20px;
    letter-spacing: -0.02em;
    color: var(--wd-text);
    margin-bottom: 4px;
}

.action-card p {
    color: var(--wd-muted);
    margin-bottom: 14px;
}

/* =====================================================
   BUTTONS
===================================================== */

.primary-link,
.btn,
.table-btn {
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--wd-primary);
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: none;
    box-shadow: none;
    transition: 0.2s ease;
    cursor: pointer;
}

.primary-link {
    padding: 10px 14px;
    display: inline-block;
}

.btn {
    height: 44px;
    width: 100%;
    font-size: 14px;
    padding: 0 16px;
}

.btn-small {
    max-width: 250px;
}

.table-btn {
    padding: 8px 11px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
}

.primary-link:hover,
.btn:hover,
.table-btn:hover {
    background: var(--wd-primary-dark);
}

.danger-btn {
    background: var(--wd-danger) !important;
}

.danger-btn:hover {
    background: #a92b2b !important;
}

/* =====================================================
   FORM UI
===================================================== */

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    font-weight: 850;
    font-size: 13px;
    color: #374151;
    margin-bottom: 8px;
    display: block;
}

.form-control,
.select-control {
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid #dbe1ea;
    background: #ffffff;
    color: #111827;
    font-size: 15px;
    transition: 0.2s ease;
    width: 100%;
    padding: 0 14px;
    font-family: inherit;
}

.form-control:focus,
.select-control:focus {
    border-color: var(--wd-primary);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
    outline: none;
}

.textarea-control {
    min-height: 330px;
    line-height: 1.7;
    resize: vertical;
    padding: 14px;
}

/* =====================================================
   AUTH UI POLISH
===================================================== */

.field-help {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background:
        radial-gradient(circle at top left, rgba(79, 70, 229, 0.2), transparent 34%),
        linear-gradient(180deg, #f8fafc, #eef2ff);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    padding: 28px;
    border-radius: 18px;
    box-shadow: var(--wd-shadow-md);
}

.auth-logo {
    font-size: 28px;
    font-weight: 900;
    color: var(--wd-primary);
    margin-bottom: 10px;
    text-align: center;
    letter-spacing: -0.04em;
}

.auth-title {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
}

.auth-subtitle {
    font-size: 14px;
    text-align: center;
    color: #6b7280;
    margin-bottom: 25px;
}

.auth-link {
    text-align: center;
    margin-top: 18px;
    font-size: 14px;
}

.auth-link a {
    color: var(--wd-primary);
    text-decoration: none;
    font-weight: 600;
}

.alert {
    border-radius: 14px;
    padding: 13px 15px;
    font-weight: 750;
}

.alert-error {
    background: var(--wd-danger-soft);
    color: #991b1b;
}

.alert-success {
    background: var(--wd-success-soft);
    color: #166534;
}

/* =====================================================
   TABLE UI
===================================================== */

.table-wrap {
    border: 1px solid var(--wd-border);
    border-radius: 14px;
    overflow: auto;
    background: #ffffff;
    box-shadow: none;
}

.data-table {
    width: 100%;
    min-width: 960px;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
}

.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 15px 16px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--wd-border);
    white-space: nowrap;
    text-align: left;
}

.data-table tbody td {
    padding: 15px 16px;
    border-bottom: 1px solid #eef2f7;
    color: #334155;
    font-size: 14px;
    vertical-align: middle;
}

.data-table tbody tr {
    transition: 0.18s ease;
}

.data-table tbody tr:hover {
    background: #f8fafc;
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table a {
    color: var(--wd-primary);
    font-weight: 800;
    text-decoration: none;
}

.data-table a:hover {
    text-decoration: underline;
}

/* =====================================================
   BADGES
===================================================== */

.status-badge {
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    display: inline-block;
}

.status-pending {
    background: var(--wd-warning-soft);
    color: #92400e;
}

.status-processing {
    background: var(--wd-info-soft);
    color: #1e40af;
}

.status-completed,
.status-connected,
.status-publish {
    background: var(--wd-success-soft);
    color: #166534;
}

.status-failed,
.status-disconnected,
.status-trash {
    background: var(--wd-danger-soft);
    color: #991b1b;
}

.status-draft {
    background: #fef3c7;
    color: #92400e;
}

.status-private {
    background: #e5e7eb;
    color: #374151;
}

/* =====================================================
   COMMAND RESULT
===================================================== */

.command-request,
.command-result {
    display: inline-block;
    line-height: 1.45;
    font-size: 13px;
}

.command-request {
    max-width: 250px;
    color: #475569;
}

.command-result {
    max-width: 330px;
    color: #0f172a;
    font-weight: 800;
}

.error-text {
    display: inline-block;
    margin-top: 6px;
    color: #991b1b;
    background: #fee2e2;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 12px;
}

.live-status {
    margin-top: 12px;
    padding: 10px 12px;
    display: inline-flex;
    gap: 8px;
    border-radius: 999px;
    background: var(--wd-primary-soft);
    color: #3730a3;
    font-size: 13px;
    font-weight: 800;
}

#live-update-time {
    color: var(--wd-primary);
}

/* =====================================================
   ALERTS / EMPTY BOX
===================================================== */

.empty-box {
    padding: 18px;
    background: #f8fafc;
    border: 1px dashed #cfd8e3;
    border-radius: 12px;
    color: #64748b;
    font-weight: 600;
    text-align: center;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

/* =====================================================
   MOBILE RESPONSIVE
===================================================== */

@media (max-width: 900px) {
    .topbar {
        height: auto;
        min-height: 68px;
        padding: 12px 16px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .topbar-logo {
        font-size: 20px;
    }

    .topbar-right {
        width: 100%;
        justify-content: space-between;
    }

    .dashboard-content {
        padding: 16px;
    }

    .welcome-card {
        padding: 18px;
    }

    .welcome-card h1 {
        font-size: 24px;
    }

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

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

    .primary-link,
    .btn-small {
        width: 100%;
        max-width: 100%;
        text-align: center;
        justify-content: center;
    }

    .action-card {
        padding: 16px;
        border-radius: 16px;
    }
}

/* Mobile table becomes cards */
@media (max-width: 760px) {
    .table-wrap {
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .data-table {
        min-width: 0;
        width: 100%;
        border-collapse: collapse;
    }

    .data-table thead {
        display: none;
    }

    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table td {
        display: block;
        width: 100%;
    }

    .data-table tbody tr {
        margin-bottom: 12px;
        padding: 12px;
        background: #ffffff;
        border: 1px solid var(--wd-border);
        border-radius: 14px;
        box-shadow: none;
    }

    .data-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 14px;
        padding: 11px 0;
        border-bottom: 1px solid #eef2f7;
        text-align: right;
        word-break: break-word;
    }

    .data-table tbody td:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .data-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        text-align: left;
        font-size: 12px;
        font-weight: 900;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .data-table tbody td form {
        display: block !important;
        margin: 8px 0 0 0 !important;
        width: 100%;
    }

    .data-table tbody td .table-btn,
    .data-table tbody td button.table-btn {
        width: 100%;
        margin-top: 8px;
    }

    .command-request,
    .command-result {
        max-width: 100%;
    }

    .table-actions {
        width: 100%;
    }

    .table-actions a,
    .table-actions form,
    .table-actions button {
        width: 100%;
        margin-top: 8px;
    }
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.table-actions form {
    margin: 0;
    display: inline-block;
}

/* Utility */

.details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 20px;
}

.detail-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 18px;
    border-radius: 14px;
}

.detail-box h3 {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 10px;
}

.api-box {
    margin-top: 20px;
    padding: 18px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

.api-box h3 {
    margin-bottom: 8px;
}

.api-box p {
    color: #6b7280;
    margin-bottom: 12px;
}

.api-key-full {
    display: block;
    word-break: break-all;
    padding: 14px;
}

code {
    background: #f3f4f6;
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 12px;
}

@media (max-width: 768px) {
    .details-grid {
        grid-template-columns: 1fr;
    }
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

.activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.activity-item strong {
    display: block;
    font-size: 14px;
    color: #111827;
    margin-bottom: 4px;
}

.activity-item p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.activity-item span {
    white-space: nowrap;
    font-size: 12px;
    color: #6b7280;
}

@media (max-width: 768px) {
    .activity-item {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =====================================================
   WORDIOS POST EDITOR PRO ADDON
===================================================== */
.editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}

.editor-main,
.editor-side,
.mini-panel,
.compact-card {
    min-width: 0;
}

.mini-panel {
    background: #ffffff;
    border: 1px solid var(--wd-border, #e6eaf0);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}

.mini-panel h3 {
    margin: 0 0 14px;
    color: var(--wd-navy, #0A1E3C);
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 800;
}

.compact-card {
    margin-top: 18px !important;
    padding: 18px !important;
}

.ai-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0 4px;
}

.featured-preview {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--wd-border, #e6eaf0);
    border-radius: 10px;
    margin-bottom: 12px;
    background: #f8fafc;
}

.featured-preview img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
}

input[type="file"].form-control {
    padding: 9px 12px !important;
    height: auto !important;
}

@media (max-width: 980px) {
    .editor-grid {
        grid-template-columns: 1fr;
    }

    .editor-side {
        order: -1;
    }
}

@media (max-width: 640px) {
    .ai-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-toolbar .table-btn {
        width: 100%;
    }
}

/* =====================================================
   WORDIOS PHASE 2 - SEO AUTOMATION UI
===================================================== */
.seo-automation-card {
    margin-top: 18px !important;
}

.seo-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.seo-score-circle {
    flex: 0 0 auto;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #0A1E3C;
    font-weight: 800;
}

.seo-score-circle span {
    font-size: 28px;
    line-height: 1;
}

.seo-score-circle small {
    display: block;
    margin-top: -16px;
    color: #64748b;
    font-size: 11px;
}

.seo-score-circle.score-good {
    background: #dcfce7;
    border-color: #bbf7d0;
    color: #15803d;
}

.seo-score-circle.score-warn {
    background: #fef3c7;
    border-color: #fde68a;
    color: #b45309;
}

.seo-score-circle.score-bad {
    background: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;
}

.seo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.seo-check-box,
.ai-suggestion-box {
    background: #ffffff;
    border: 1px solid #e6eaf0;
    border-radius: 11px;
    padding: 14px;
}

.seo-check-box h3,
.ai-seo-suggestions h3,
.ai-suggestion-box strong {
    margin: 0 0 8px;
    color: #0A1E3C;
    font-size: 14px;
    font-weight: 800;
}

.seo-check-box p {
    margin: 0 0 9px;
    font-size: 13px;
    color: #334155;
}

.seo-good {
    color: #15803d !important;
    font-weight: 700;
}

.seo-warn {
    color: #b45309 !important;
    font-weight: 700;
}

.seo-bad {
    color: #b91c1c !important;
    font-weight: 700;
}

.seo-meter {
    width: 100%;
    height: 7px;
    background: #edf2f7;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 9px;
}

.seo-meter span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width 0.2s ease;
}

.meter-good {
    background: #22c55e;
}

.meter-warn {
    background: #f59e0b;
}

.meter-bad {
    background: #ef4444;
}

.seo-suggestions {
    display: grid;
    gap: 6px;
}

.seo-suggestion-item {
    background: #f8fafc;
    border: 1px solid #eef2f6;
    border-radius: 8px;
    padding: 8px 10px;
    color: #475569;
    font-size: 12px;
    line-height: 1.45;
}

.ai-seo-suggestions {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eef2f6;
}

.ai-suggestion-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ai-suggestion-box ul {
    margin: 8px 0 0;
    padding-left: 18px;
}

.ai-suggestion-box li,
.ai-suggestion-box p {
    color: #475569;
    font-size: 12px;
    line-height: 1.55;
    margin: 0 0 6px;
}

@media (max-width: 900px) {
    .seo-grid,
    .ai-suggestion-grid {
        grid-template-columns: 1fr;
    }

    .seo-card-head {
        align-items: flex-start;
    }
}


/* =====================================================
   SMART SUGGESTIONS PANEL - COPY / APPLY / INSERT
===================================================== */
.smart-suggestion-card {
    border-color: #dbe3ef !important;
}

.smart-actions-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 18px;
}

.light-btn {
    background: #f1f5f9 !important;
    color: #0A1E3C !important;
    border: 1px solid #dbe3ef !important;
}

.light-btn:hover {
    background: #e2e8f0 !important;
}

.smart-status {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.smart-suggestion-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    gap: 16px;
    align-items: start;
}

.smart-local-panel,
.smart-ai-panel {
    border: 1px solid #e6eaf0;
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
}

.smart-local-panel > h3,
.smart-ai-head h3 {
    margin: 0 0 6px;
    color: #0A1E3C;
    font-size: 16px;
    font-weight: 800;
}

.smart-ai-head p {
    margin: 0 0 12px;
    color: #64748b;
    font-size: 13px;
}

.compact-seo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.smart-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.smart-suggestion-item {
    border: 1px solid #e6eaf0;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px;
}

.smart-suggestion-item strong {
    display: block;
    color: #0A1E3C;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 5px;
}

.smart-suggestion-item p {
    margin: 0;
    color: #334155;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.smart-suggestion-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 9px;
}

.smart-mini-btn {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0A1E3C;
    border-radius: 7px;
    min-height: 28px;
    padding: 0 9px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.smart-mini-btn.primary {
    background: #0A1E3C;
    border-color: #0A1E3C;
    color: #ffffff;
}

.smart-mini-btn:hover {
    opacity: 0.88;
}

.ai-smart-suggestions {
    display: grid;
    gap: 12px;
    max-height: 820px;
    overflow: auto;
    padding-right: 4px;
}

.empty-smart-box {
    min-height: 180px;
    display: grid;
    place-items: center;
    text-align: center;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    border-radius: 10px;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    padding: 18px;
}

.smart-ai-group {
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    padding: 12px;
    background: #ffffff;
}

.smart-ai-group h4 {
    margin: 0 0 10px;
    color: #0A1E3C;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.smart-ai-group .smart-suggestion-item {
    margin-bottom: 8px;
}

.smart-ai-group .smart-suggestion-item:last-child {
    margin-bottom: 0;
}

@media (max-width: 1020px) {
    .smart-suggestion-layout {
        grid-template-columns: 1fr;
    }

    .ai-smart-suggestions {
        max-height: none;
    }
}

@media (max-width: 720px) {
    .compact-seo-grid {
        grid-template-columns: 1fr;
    }

    .smart-actions-row .table-btn,
    .smart-actions-row .light-btn {
        width: 100%;
    }

    .smart-suggestion-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .smart-mini-btn {
        width: 100%;
    }
}

/* =====================================================
   FULL WEBSITE SYNC / INTELLIGENCE V1
===================================================== */
.wordios-action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.wordios-action-row form {
    margin: 0;
}
.intelligence-hero .table-actions form {
    margin: 0;
}
.intelligence-meta {
    margin-top: 10px;
    color: var(--wd-muted, #64748b);
    font-size: 13px;
    font-weight: 700;
}
.intelligence-stats {
    grid-template-columns: repeat(6, 1fr) !important;
}
.intelligence-details {
    grid-template-columns: repeat(4, 1fr);
}
.split-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.mini-heading {
    margin: 0 0 12px;
    color: var(--wd-navy, #0A1E3C);
    font-size: 15px;
    font-weight: 800;
}
.term-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.term-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid var(--wd-border, #e6eaf0);
    color: var(--wd-soft-text, #334155);
    font-size: 12px;
    font-weight: 700;
}
.term-pill small {
    color: var(--wd-muted, #64748b);
    font-weight: 800;
}
.media-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
.media-card {
    overflow: hidden;
    border: 1px solid var(--wd-border, #e6eaf0);
    border-radius: 12px;
    background: #fff;
}
.media-card img,
.media-file-icon {
    width: 100%;
    height: 130px;
    object-fit: cover;
    background: #f1f5f9;
    display: grid;
    place-items: center;
    color: #64748b;
    font-weight: 800;
    font-size: 12px;
}
.media-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
}
.media-card-body strong {
    color: var(--wd-text, #0f172a);
    font-size: 13px;
    line-height: 1.3;
}
.media-card-body small {
    color: var(--wd-muted, #64748b);
    font-size: 11px;
    line-height: 1.35;
}
.media-card-body a {
    color: var(--wd-blue, #2563eb);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}
.status-good,
.status-info {
    background: var(--wd-success-bg, #dcfce7) !important;
    color: var(--wd-success, #15803d) !important;
}
.status-warning {
    background: var(--wd-warning-bg, #fef3c7) !important;
    color: var(--wd-warning, #b45309) !important;
}
.status-critical {
    background: var(--wd-danger-bg, #fee2e2) !important;
    color: var(--wd-danger, #b91c1c) !important;
}

@media (max-width: 1100px) {
    .intelligence-stats {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .intelligence-details {
        grid-template-columns: repeat(2, 1fr);
    }
    .media-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .wordios-action-row,
    .intelligence-hero .table-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }
    .wordios-action-row form,
    .wordios-action-row .primary-link,
    .wordios-action-row .btn,
    .intelligence-hero .table-actions form,
    .intelligence-hero .table-actions a,
    .intelligence-hero .table-actions button {
        width: 100%;
    }
    .intelligence-stats,
    .intelligence-details,
    .split-grid,
    .media-grid {
        grid-template-columns: 1fr !important;
    }
    .media-card img,
    .media-file-icon {
        height: 180px;
    }
}


/* =====================================================
   SEO AUDIT V1 UI
===================================================== */
.seo-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.audit-check-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
.audit-check-grid span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 10px;
    border: 1px solid var(--wd-border, #e6eaf0);
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}
.inline-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.compact-select {
    width: auto !important;
    min-width: 140px;
    min-height: 40px !important;
}
.status-critical {
    background: #fee2e2 !important;
    color: #991b1b !important;
}
.status-warning {
    background: #fef3c7 !important;
    color: #92400e !important;
}
.status-info {
    background: #dbeafe !important;
    color: #1e40af !important;
}
@media (max-width: 900px) {
    .seo-stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .audit-check-grid {
        grid-template-columns: 1fr 1fr;
    }
    .inline-form {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .compact-select {
        width: 100% !important;
    }
}
@media (max-width: 560px) {
    .seo-stats-grid,
    .audit-check-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =====================================================
   SEO AUDIT PRO UI V2
===================================================== */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: var(--wd-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.seo-pro-hero h1 {
    margin: 0 0 6px;
    color: var(--wd-primary);
    letter-spacing: -0.04em;
}

.seo-audit-console {
    padding: 18px !important;
}

.seo-console-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1fr auto;
    gap: 14px;
    align-items: end;
}

.seo-console-actions {
    display: flex;
    align-items: end;
    min-height: 42px;
}

.seo-force-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.seo-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.seo-score-card small,
.stat-card small {
    display: block;
    margin-top: 8px;
    color: var(--wd-muted);
    font-size: 12px;
    font-weight: 600;
}

.score-good {
    border-left: 4px solid var(--wd-success) !important;
}

.score-warn {
    border-left: 4px solid var(--wd-warning) !important;
}

.score-bad {
    border-left: 4px solid var(--wd-danger) !important;
}

.seo-tabs {
    position: sticky;
    top: 70px;
    z-index: 9;
    display: flex;
    gap: 8px;
    margin: 18px 0;
    padding: 10px;
    overflow-x: auto;
    background: rgba(244, 247, 251, 0.92);
    backdrop-filter: blur(10px);
    border: 1px solid var(--wd-border);
    border-radius: 14px;
}

.seo-tab {
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 9px 14px;
    background: #ffffff;
    color: var(--wd-muted);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.seo-tab.active {
    background: var(--wd-primary);
    color: #ffffff;
}

.seo-tab-panel {
    display: none;
}

.seo-tab-panel.active {
    display: block;
}

.seo-two-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

.seo-group-list {
    display: grid;
    gap: 10px;
}

.seo-group-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--wd-border);
    border-radius: 12px;
    background: #fbfdff;
}

.seo-group-row strong,
.fix-card h3,
.audit-pro-card strong {
    color: var(--wd-primary);
}

.seo-group-row small {
    display: block;
    margin-top: 4px;
    color: var(--wd-muted);
    font-size: 12px;
}

.seo-mini-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.score-bars {
    display: grid;
    gap: 16px;
}

.score-bars div {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding-bottom: 10px;
}

.score-bars span,
.score-bars strong {
    position: relative;
    z-index: 2;
}

.score-bars em {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 6px;
    border-radius: 999px;
    background: var(--wd-primary);
    opacity: 0.18;
}

.mini-heading {
    margin: 22px 0 10px;
    color: var(--wd-primary);
    font-size: 15px;
}

.seo-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.seo-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--wd-primary-soft);
    color: var(--wd-primary);
    font-size: 12px;
    font-weight: 800;
}

.audit-pro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.audit-pro-card {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--wd-border);
    border-radius: 13px;
    background: #ffffff;
}

.audit-pro-card.flat {
    margin-top: 10px;
}

.audit-pro-card span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.seo-filter-bar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 150px 190px 140px auto auto;
    gap: 10px;
    margin: 14px 0 18px;
    align-items: center;
}

.seo-score-pill {
    display: inline-flex;
    min-width: 72px;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.seo-score-pill.score-good {
    background: var(--wd-success-soft);
    color: var(--wd-success);
    border-left: 0 !important;
}

.seo-score-pill.score-warn {
    background: var(--wd-warning-soft);
    color: var(--wd-warning);
    border-left: 0 !important;
}

.seo-score-pill.score-bad {
    background: var(--wd-danger-soft);
    color: var(--wd-danger);
    border-left: 0 !important;
}

.fix-center-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.fix-center-grid.single {
    grid-template-columns: 1fr;
}

.fix-card {
    padding: 16px;
    border: 1px solid var(--wd-border);
    border-radius: 14px;
    background: #ffffff;
}

.fix-card-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.fix-card h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

.fix-card p {
    margin: 0 0 10px;
    color: var(--wd-muted);
    font-size: 13px;
}

.fix-card small {
    display: block;
    margin-bottom: 12px;
    color: #334155;
    font-weight: 800;
}

.audit-detail-list {
    display: grid;
    gap: 10px;
}

.audit-detail-list div {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--wd-border);
}

.audit-detail-list div:last-child {
    border-bottom: 0;
}

.audit-detail-list strong {
    color: var(--wd-primary);
}

.audit-detail-list span {
    color: #334155;
    word-break: break-word;
}

.seo-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.seo-check-card {
    position: relative;
    padding: 14px;
    border: 1px solid var(--wd-border);
    border-radius: 14px;
    background: #ffffff;
}

.seo-check-card.passed {
    border-color: rgba(22, 122, 61, 0.25);
    background: #fbfffc;
}

.seo-check-card.failed {
    border-color: rgba(197, 58, 58, 0.25);
    background: #fffafa;
}

.seo-check-card strong {
    display: block;
    margin-bottom: 5px;
    color: var(--wd-primary);
}

.seo-check-card span {
    color: var(--wd-muted);
    font-size: 13px;
}

.seo-check-card em {
    position: absolute;
    right: 12px;
    top: 12px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f8fafc;
    color: var(--wd-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.seo-check-card.passed em {
    background: var(--wd-success-soft);
    color: var(--wd-success);
}

.seo-check-card.failed em {
    background: var(--wd-danger-soft);
    color: var(--wd-danger);
}

.seo-check-card p {
    margin: 10px 0 0;
    color: #334155;
    font-size: 13px;
}

.muted-link {
    background: #f8fafc !important;
    color: var(--wd-primary) !important;
    border: 1px solid var(--wd-border) !important;
}

.muted-link:hover {
    background: #eef4ff !important;
}

.status-critical {
    background: var(--wd-danger-soft) !important;
    color: var(--wd-danger) !important;
}

.status-warning {
    background: var(--wd-warning-soft) !important;
    color: var(--wd-warning) !important;
}

.status-info {
    background: var(--wd-info-soft) !important;
    color: var(--wd-info) !important;
}

@media (max-width: 980px) {
    .seo-console-grid,
    .seo-filter-bar,
    .seo-two-col {
        grid-template-columns: 1fr;
    }

    .seo-force-form {
        align-items: flex-start;
        flex-direction: column;
    }

    .seo-tabs {
        top: 62px;
    }

    .audit-detail-list div {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   SEO AI FIX SUGGESTIONS V1
===================================================== */
.seo-ai-fix-drawer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    justify-content: flex-end;
    background: rgba(10, 30, 60, 0.42);
    backdrop-filter: blur(3px);
}

.seo-ai-fix-drawer.active {
    display: flex;
}

.seo-ai-fix-panel {
    width: min(760px, 100%);
    height: 100vh;
    overflow-y: auto;
    background: #ffffff;
    border-left: 1px solid var(--wd-border, #e6eaf0);
    box-shadow: -18px 0 40px rgba(10, 30, 60, 0.16);
    padding: 22px;
}

.seo-ai-fix-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--wd-border, #e6eaf0);
}

.seo-ai-fix-head h2 {
    margin: 4px 0 6px;
    color: var(--wd-navy, #0A1E3C);
    font-size: 22px;
    letter-spacing: -0.035em;
}

.seo-ai-fix-head p {
    margin: 0;
    color: var(--wd-muted, #64748b);
    word-break: break-word;
}

.seo-ai-fix-close {
    width: 36px;
    height: 36px;
    border: 1px solid var(--wd-border, #e6eaf0);
    border-radius: 10px;
    background: #f8fafc;
    color: var(--wd-navy, #0A1E3C);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.seo-loading-box,
.seo-fix-summary,
.seo-fix-payload,
.seo-fix-suggestion-group {
    border: 1px solid var(--wd-border, #e6eaf0);
    border-radius: 12px;
    background: #ffffff;
    padding: 16px;
    margin-bottom: 14px;
}

.seo-loading-box {
    background: #f8fafc;
}

.seo-fix-summary {
    background: #eff6ff;
    border-color: #dbeafe;
}

.seo-fix-summary strong,
.seo-fix-suggestion-group h3,
.seo-fix-payload h3 {
    display: block;
    margin: 0 0 10px;
    color: var(--wd-navy, #0A1E3C);
    font-size: 15px;
    font-weight: 800;
}

.seo-fix-summary p {
    margin: 0;
    color: #334155;
}

.seo-fix-suggestion-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #eef2f6;
}

.seo-fix-suggestion-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.seo-fix-suggestion-text {
    color: #111827;
    line-height: 1.55;
    word-break: break-word;
}

.seo-fix-suggestion-text.is-html {
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e6eaf0;
    border-radius: 8px;
    padding: 10px;
    white-space: pre-wrap;
}

.seo-fix-payload pre {
    max-height: 240px;
    overflow: auto;
    margin: 0;
    padding: 12px;
    border-radius: 10px;
    background: #0A1E3C;
    color: #e5e7eb;
    font-size: 12px;
}

@media (max-width: 760px) {
    .seo-ai-fix-panel {
        width: 100%;
        padding: 16px;
    }

    .seo-fix-suggestion-item {
        grid-template-columns: 1fr;
    }

    .seo-fix-suggestion-item .table-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
}
/* =====================================================
   SEO AUDIT PAGE LAYOUT FIX
===================================================== */

.seo-audit-page,
.seo-pro-page,
.website-seo-audit-page {
    width: 100%;
}

.seo-audit-shell,
.seo-pro-shell,
.audit-pro-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 22px 0 44px;
}

.seo-audit-hero,
.audit-hero,
.seo-pro-hero {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e6eaf0;
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 18px;
}

.seo-audit-hero h1,
.audit-hero h1,
.seo-pro-hero h1 {
    margin: 0 0 8px;
    color: #0A1E3C;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.seo-audit-hero p,
.audit-hero p,
.seo-pro-hero p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.seo-audit-actions,
.audit-actions,
.seo-pro-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.seo-audit-actions select,
.audit-actions select,
.seo-pro-actions select {
    min-width: 180px;
}

/* Prevent page content from going under sidebar/header */
.dashboard-main,
.app-main,
.main-content {
    min-width: 0;
    overflow-x: hidden;
}/* =====================================================
   AI SEO FIX SUGGESTIONS PANEL FIX
===================================================== */

.ai-fix-suggestions-wrap {
    width: 100%;
    margin-top: 22px;
    clear: both;
}

.ai-fix-suggestions-panel {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e6eaf0;
    border-radius: 14px;
    padding: 20px;
    margin-top: 16px;
    box-shadow: 0 8px 24px rgba(10, 30, 60, 0.04);
}

.ai-fix-suggestions-panel h3 {
    margin: 0 0 8px;
    color: #0A1E3C;
    font-size: 20px;
    font-weight: 800;
}

.ai-fix-suggestions-panel p {
    margin: 0 0 14px;
    color: #64748b;
    font-size: 14px;
}

.ai-fix-empty {
    width: 100%;
    padding: 18px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #475569;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

.ai-fix-result-card {
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    background: #ffffff;
    padding: 14px;
    margin-bottom: 12px;
}

.ai-fix-result-card:last-child {
    margin-bottom: 0;
}

.ai-fix-result-card h4 {
    margin: 0 0 8px;
    color: #0A1E3C;
    font-size: 15px;
    font-weight: 800;
}

.ai-fix-result-text {
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e6eaf0;
    border-radius: 10px;
    color: #334155;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.ai-fix-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.ai-fix-actions button,
.ai-fix-actions .table-btn {
    min-height: 32px;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
}

.seo-fix-loading {
    opacity: 0.65;
    pointer-events: none;
}

@media (max-width: 760px) {
    .seo-audit-shell,
    .seo-pro-shell,
    .audit-pro-shell {
        width: calc(100% - 20px);
        padding-top: 14px;
    }

    .seo-audit-hero,
    .audit-hero,
    .seo-pro-hero {
        padding: 18px;
    }

    .seo-audit-actions,
    .audit-actions,
    .seo-pro-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .seo-audit-actions select,
    .audit-actions select,
    .seo-pro-actions select,
    .seo-audit-actions button,
    .audit-actions button,
    .seo-pro-actions button {
        width: 100%;
    }

    .ai-fix-actions {
        flex-direction: column;
    }

    .ai-fix-actions button {
        width: 100%;
    }
}/* =====================================================
   WORDIOS APP LAYOUT V4 - CLEAN CONSOLIDATED
===================================================== */

.wordios-app {
    display: flex;
    min-height: 100vh;
    background: #f5f7fb;
}

.wordios-sidebar-v2 {
    width: 270px;
    min-width: 270px;
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at top left, rgba(91, 72, 255, 0.18), transparent 34%),
        linear-gradient(180deg, #071022 0%, #050b18 100%);
    border-right: 1px solid rgba(148, 163, 184, 0.14);
    color: #dbeafe;
    overflow: hidden;
    font-family: Inter, Arial, sans-serif;
}

.sidebar-v2-brand {
    height: 76px;
    padding: 17px 18px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-v2-logo-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
}

.sidebar-v2-logo {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #6544ff, #7c3aed);
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.35);
}

.sidebar-v2-brand-text {
    min-width: 0;
}

.sidebar-v2-brand-text strong {
    display: block;
    color: #ffffff;
    font-size: 17px;
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 850;
}

.sidebar-v2-brand-text small {
    display: block;
    margin-top: 4px;
    color: #8ea0c4;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
}

.sidebar-v2-mini-btn {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: rgba(148, 163, 184, 0.08);
    color: #94a3b8;
    cursor: pointer;
    transition: 0.18s ease;
}

.sidebar-v2-mini-btn:hover {
    background: rgba(99, 102, 241, 0.18);
    color: #ffffff;
}

.sidebar-v2-mini-btn i {
    font-size: 12px;
}

.sidebar-v2-menu {
    flex: 1;
    padding: 6px 14px 14px;
    overflow-y: auto;
}

.sidebar-v2-menu::-webkit-scrollbar {
    width: 4px;
}

.sidebar-v2-menu::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.22);
    border-radius: 999px;
}

.sidebar-v2-section {
    padding-top: 12px;
}

.sidebar-v2-section + .sidebar-v2-section {
    margin-top: 8px;
}

.sidebar-v2-section-title {
    margin: 0 0 8px 10px;
    color: #6d7fa4;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.sidebar-v2-link {
    height: 42px;
    margin-bottom: 5px;
    padding: 0 12px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #a6b5d3;
    text-decoration: none;
    font-size: 14px;
    font-weight: 720;
    position: relative;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.sidebar-v2-link:hover {
    color: #ffffff;
    background: rgba(148, 163, 184, 0.08);
    transform: translateX(2px);
}

.sidebar-v2-link.active {
    color: #ffffff;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.36), rgba(99, 102, 241, 0.14));
    box-shadow: inset 3px 0 0 #7c3aed;
}

.sidebar-v2-link.active::after {
    content: "";
    position: absolute;
    right: 12px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #8b5cf6;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12);
}

.sidebar-v2-icon {
    width: 20px;
    min-width: 20px;
    display: grid;
    place-items: center;
    color: #91a3c7;
}

.sidebar-v2-link:hover .sidebar-v2-icon,
.sidebar-v2-link.active .sidebar-v2-icon {
    color: #ffffff;
}

.sidebar-v2-icon i {
    font-size: 14px;
}

.sidebar-v2-text {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-v2-user {
    min-height: 76px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-top: 1px solid rgba(148, 163, 184, 0.13);
    background: rgba(2, 6, 23, 0.38);
}

.sidebar-v2-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    position: relative;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    color: #ffffff;
    font-weight: 900;
    font-size: 15px;
    border: 2px solid rgba(255, 255, 255, 0.14);
}

.sidebar-v2-avatar span {
    position: absolute;
    right: 0;
    bottom: 1px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #22c55e;
    border: 2px solid #050b18;
}

.sidebar-v2-user-meta {
    min-width: 0;
}

.sidebar-v2-user-meta strong {
    display: block;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.15;
    font-weight: 800;
}

.sidebar-v2-user-meta small {
    display: block;
    margin-top: 4px;
    color: #7f8eaf;
    font-size: 11px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wordios-main {
    flex: 1;
    min-width: 0;
}

.wordios-topbar {
    min-height: 72px;
    height: 72px;
    padding: 0 30px;
    background: #ffffff;
    border-bottom: 1px solid #e6ebf2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar-content {
    flex: 1;
}

.topbar-title {
    margin: 0 0 4px;
    font-size: 20px;
    color: #0A1E3C;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.topbar-subtitle {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.user-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e6ebf2;
    color: #0A1E3C;
    font-size: 13px;
    font-weight: 700;
}

.user-pill i {
    font-size: 14px;
}

.logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 15px;
    border-radius: 999px;
    background: var(--wd-danger);
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: 0.2s ease;
}

.logout-btn:hover {
    background: #a92b2b;
}

.logout-btn i {
    font-size: 14px;
}

.wordios-content {
    width: min(1180px, calc(100% - 42px));
    margin: 0 auto;
    padding: 28px 0 46px;
}

/* =====================================================
   WORDIOS SIDEBAR COLLAPSE MODE
===================================================== */

body.wordios-sidebar-collapsed .wordios-sidebar-v2 {
    width: 86px;
    min-width: 86px;
}

body.wordios-sidebar-collapsed .sidebar-v2-brand {
    padding-left: 14px;
    padding-right: 14px;
    justify-content: center;
    gap: 0;
}

body.wordios-sidebar-collapsed .sidebar-v2-logo-wrap {
    justify-content: center;
}

body.wordios-sidebar-collapsed .sidebar-v2-brand-text,
body.wordios-sidebar-collapsed .sidebar-v2-section-title,
body.wordios-sidebar-collapsed .sidebar-v2-text,
body.wordios-sidebar-collapsed .sidebar-v2-user-meta {
    display: none;
}

body.wordios-sidebar-collapsed .sidebar-v2-mini-btn {
    position: absolute;
    top: 54px;
    right: -13px;
    z-index: 20;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}

body.wordios-sidebar-collapsed .sidebar-v2-mini-btn i {
    transform: rotate(180deg);
}

body.wordios-sidebar-collapsed .sidebar-v2-menu {
    padding-left: 12px;
    padding-right: 12px;
}

body.wordios-sidebar-collapsed .sidebar-v2-section {
    padding-top: 10px;
}

body.wordios-sidebar-collapsed .sidebar-v2-link {
    width: 48px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 15px;
    margin-left: auto;
    margin-right: auto;
}

body.wordios-sidebar-collapsed .sidebar-v2-link.active {
    box-shadow: none;
    background: rgba(99, 102, 241, 0.34);
}

body.wordios-sidebar-collapsed .sidebar-v2-link::before {
    content: attr(data-title);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #0A1E3C;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 100;
}

body.wordios-sidebar-collapsed .sidebar-v2-link:hover::before {
    opacity: 1;
}

/* =====================================================
   MOBILE RESPONSIVE
===================================================== */

@media (max-width: 920px) {
    .wordios-app {
        display: block;
    }

    .wordios-sidebar-v2 {
        width: 100%;
        min-width: 100%;
        height: auto;
        position: relative;
    }

    .sidebar-v2-brand {
        height: auto;
        padding: 14px 16px;
    }

    .sidebar-v2-menu {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 8px;
        max-height: 420px;
    }

    .sidebar-v2-section {
        display: contents;
    }

    .sidebar-v2-section-title {
        grid-column: 1 / -1;
        margin-top: 12px;
    }

    .sidebar-v2-user {
        min-height: auto;
    }

    .wordios-topbar {
        height: auto;
        min-height: 68px;
        padding: 14px 16px;
    }

    .topbar-title {
        font-size: 18px;
    }

    .topbar-subtitle {
        font-size: 12px;
    }

    .wordios-content {
        width: calc(100% - 22px);
        padding-top: 18px;
    }

    body.wordios-sidebar-collapsed .wordios-sidebar-v2 {
        width: 100%;
        min-width: 100%;
    }

    body.wordios-sidebar-collapsed .sidebar-v2-mini-btn {
        position: static;
        background: transparent;
        border: none;
        box-shadow: none;
        color: #94a3b8;
    }

    body.wordios-sidebar-collapsed .sidebar-v2-link::before {
        display: none;
    }

    body.wordios-sidebar-collapsed .sidebar-v2-link {
        width: auto;
        height: auto;
        padding: 0 12px;
        justify-content: flex-start;
    }
}

/* Hide old v1 sidebar classes just in case */
.wordios-sidebar:not(.wordios-sidebar-v2) {
    display: none !important;
}

body.wordios-sidebar-collapsed .sidebar-v2-link.active::after {
    right: 6px;
    top: 8px;
}

body.wordios-sidebar-collapsed .sidebar-v2-icon {
    width: 22px;
    min-width: 22px;
}

body.wordios-sidebar-collapsed .sidebar-v2-icon i {
    font-size: 15px;
}

body.wordios-sidebar-collapsed .sidebar-v2-user {
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
}

body.wordios-sidebar-collapsed .sidebar-v2-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
}

/* Tooltip in collapsed mode */
body.wordios-sidebar-collapsed .sidebar-v2-link::before {
    content: attr(data-title);
    position: absolute;
    left: 62px;
    top: 50%;
    transform: translateY(-50%);
    min-width: max-content;
    padding: 7px 10px;
    border-radius: 9px;
    background: #0f172a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: 0.16s ease;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
    z-index: 40;
}

body.wordios-sidebar-collapsed .sidebar-v2-link:hover::before {
    opacity: 1;
}

/* Smooth animation */
.wordios-sidebar-v2,
.sidebar-v2-brand-text,
.sidebar-v2-text,
.sidebar-v2-user-meta,
.sidebar-v2-section-title,
.wordios-main {
    transition: 0.22s ease;
}

@media (max-width: 920px) {
    body.wordios-sidebar-collapsed .wordios-sidebar-v2 {
        width: 100%;
        min-width: 100%;
    }

    body.wordios-sidebar-collapsed .sidebar-v2-brand-text,
    body.wordios-sidebar-collapsed .sidebar-v2-section-title,
    body.wordios-sidebar-collapsed .sidebar-v2-text,
    body.wordios-sidebar-collapsed .sidebar-v2-user-meta {
        display: block;
    }

    body.wordios-sidebar-collapsed .sidebar-v2-link {
        width: auto;
        justify-content: flex-start;
        padding: 0 12px;
    }

    body.wordios-sidebar-collapsed .sidebar-v2-link::before {
        display: none;
    }

    body.wordios-sidebar-collapsed .sidebar-v2-mini-btn {
        position: static;
    }
}

/* =====================================================
   WORDIOS HEADER V1 - AI COMMAND HEADER FINAL
   This section intentionally overrides older topbar/sidebar rules.
===================================================== */

:root {
    --wd-shell-dark: #060b1d;
    --wd-shell-darker: #040817;
    --wd-shell-border: rgba(148, 163, 184, 0.14);
    --wd-shell-text: #e5edff;
    --wd-shell-muted: #8fa1c5;
    --wd-shell-accent: #7c3aed;
    --wd-shell-blue: #4f46e5;
    --wd-shell-green: #00c076;
}

.wordios-app {
    display: flex !important;
    min-height: 100vh;
    background: #f5f7fb;
}

.wordios-main {
    flex: 1;
    min-width: 0;
    background: #f5f7fb;
}

.wordios-topbar.wordios-command-header {
    position: sticky;
    top: 0;
    z-index: 60;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 18px !important;
    display: grid;
    grid-template-columns: auto minmax(280px, 560px) auto;
    gap: 14px;
    align-items: center;
    background: linear-gradient(180deg, #070d20 0%, #050a19 100%) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.13) !important;
    box-shadow: none !important;
}

.command-header-left,
.command-header-right,
.command-header-center {
    min-width: 0;
    display: flex;
    align-items: center;
}

.command-header-center {
    justify-content: stretch;
}

.command-header-right {
    justify-content: flex-end;
    gap: 10px;
}

.command-icon-btn {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 11px;
    display: inline-grid;
    place-items: center;
    background: rgba(15, 23, 42, 0.56);
    color: #95a4c7;
    cursor: pointer;
    transition: 0.18s ease;
    position: relative;
}

.command-icon-btn:hover {
    color: #ffffff;
    border-color: rgba(124, 58, 237, 0.42);
    background: rgba(124, 58, 237, 0.18);
}

.command-icon-btn i {
    font-size: 13px;
}

.wordios-command-search {
    width: 100%;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px 0 13px;
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.wordios-command-search:focus-within {
    border-color: rgba(124, 58, 237, 0.55);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.wordios-command-search > i {
    color: #7f8eaf;
    font-size: 13px;
}

.wordios-command-search input {
    flex: 1;
    min-width: 0;
    height: 32px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #ffffff;
    font-size: 13px;
    font-weight: 650;
    font-family: inherit;
}

.wordios-command-search input::placeholder {
    color: #7f8eaf;
}

.command-shortcuts {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.command-shortcuts span {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(2, 6, 23, 0.44);
    color: #7f8eaf;
    font-size: 11px;
    font-weight: 900;
}

.website-switcher,
.profile-menu-wrap {
    position: relative;
}

.website-switcher-btn {
    height: 34px;
    max-width: 210px;
    padding: 0 12px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.58);
    color: #dbeafe;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
}

.website-switcher-btn:hover {
    border-color: rgba(124, 58, 237, 0.42);
    background: rgba(124, 58, 237, 0.12);
}

.site-orb {
    width: 14px;
    height: 14px;
    min-width: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #22d3ee);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.site-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.website-switcher-menu,
.profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 250px;
    display: none;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    z-index: 100;
}

.website-switcher-menu.active,
.profile-dropdown.active {
    display: block;
}

.website-switcher-item,
.profile-dropdown a {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    color: #0f172a;
    text-decoration: none;
    border-bottom: 1px solid #edf2f7;
}

.website-switcher-item:last-child,
.profile-dropdown a:last-child {
    border-bottom: 0;
}

.website-switcher-item:hover,
.profile-dropdown a:hover {
    background: #f8fafc;
}

.website-switcher-item strong,
.profile-dropdown-head strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 850;
}

.website-switcher-item small,
.profile-dropdown-head small {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.ai-supervisor-pill {
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(0, 192, 118, 0.10);
    border: 1px solid rgba(0, 192, 118, 0.22);
    color: #3df39c;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.ai-supervisor-pill span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00c076;
    box-shadow: 0 0 0 4px rgba(0, 192, 118, 0.12);
}

.notification-btn em {
    position: absolute;
    right: -4px;
    top: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #4f46e5;
    color: #ffffff;
    border: 2px solid #060b1d;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

.profile-avatar-btn {
    width: 36px;
    height: 36px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #6366f1, #ec4899);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.16);
}

.profile-avatar-btn span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.15);
    font-weight: 900;
    font-size: 13px;
}

.profile-dropdown {
    min-width: 230px;
}

.profile-dropdown-head {
    padding: 14px;
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
}

.profile-dropdown a {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 750;
}

.profile-dropdown a i {
    width: 16px;
    color: #64748b;
}

.profile-dropdown a.danger-link {
    color: #b91c1c;
}

.wordios-page-heading {
    display: flex;
    align-items: center;
    min-height: 92px;
    padding: 22px 32px 18px;
    background: #ffffff;
    border-bottom: 1px solid #e6ebf2;
}

.wordios-page-heading h1 {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -0.045em;
}

.wordios-page-heading p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 650;
}

.wordios-page-heading small {
    display: inline-flex;
    margin-top: 7px;
    color: #7f8eaf;
    font-size: 12px;
    font-weight: 800;
}

.wordios-content {
    width: min(1160px, calc(100% - 42px));
    margin: 0 auto;
    padding: 28px 0 46px;
}

/* Sidebar polish for Header V1 package */
.wordios-sidebar-v2.wordios-sidebar-v5 {
    width: 270px !important;
    min-width: 270px !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(124, 58, 237, 0.22), transparent 30%),
        linear-gradient(180deg, #071022 0%, #050a18 100%) !important;
}

.wordios-sidebar-v5 .sidebar-v2-icon i {
    font-size: 14px;
}

body.wordios-sidebar-collapsed .wordios-sidebar-v2.wordios-sidebar-v5 {
    width: 86px !important;
    min-width: 86px !important;
}

/* Dark mode shell */
body.wordios-dark-mode .wordios-main,
body.wordios-dark-mode .wordios-app {
    background: #0b1120;
}

body.wordios-dark-mode .wordios-page-heading,
body.wordios-dark-mode .welcome-card,
body.wordios-dark-mode .action-card,
body.wordios-dark-mode .stat-card,
body.wordios-dark-mode .mini-panel,
body.wordios-dark-mode .table-wrap,
body.wordios-dark-mode .fix-card,
body.wordios-dark-mode .seo-ai-fix-panel {
    background: #101827 !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
    color: #e5edff;
}

body.wordios-dark-mode .wordios-page-heading h1,
body.wordios-dark-mode .welcome-card h1,
body.wordios-dark-mode .action-card h2,
body.wordios-dark-mode .stat-card p,
body.wordios-dark-mode h1,
body.wordios-dark-mode h2,
body.wordios-dark-mode h3 {
    color: #f8fafc;
}

body.wordios-dark-mode .wordios-page-heading p,
body.wordios-dark-mode .wordios-page-heading small,
body.wordios-dark-mode p,
body.wordios-dark-mode .stat-card h3 {
    color: #9fb0d2;
}

/* Responsive header */
@media (max-width: 1180px) {
    .wordios-topbar.wordios-command-header {
        grid-template-columns: auto minmax(220px, 1fr) auto;
        gap: 10px;
    }

    .ai-supervisor-pill {
        display: none;
    }
}

@media (max-width: 920px) {
    .wordios-app {
        display: block !important;
    }

    .wordios-sidebar-v2.wordios-sidebar-v5 {
        width: 100% !important;
        min-width: 100% !important;
        height: auto;
        position: relative;
    }

    .wordios-topbar.wordios-command-header {
        position: sticky;
        height: auto !important;
        min-height: 64px !important;
        grid-template-columns: auto 1fr auto;
        padding: 10px 14px !important;
    }

    .website-switcher {
        display: none;
    }

    .wordios-page-heading {
        padding: 18px 18px 14px;
    }

    .wordios-content {
        width: calc(100% - 22px);
        padding-top: 18px;
    }
}

@media (max-width: 720px) {
    .wordios-topbar.wordios-command-header {
        grid-template-columns: auto 1fr;
    }

    .command-header-right {
        grid-column: 1 / -1;
        justify-content: space-between;
        width: 100%;
    }

    .command-header-center {
        min-width: 0;
    }

    .command-shortcuts,
    .notification-btn {
        display: none;
    }
}


/* =====================================================
   WORDIOS HEADER NOTIFICATION V2 PATCH
   - Theme toggle removed
   - Sidebar collapse button removed from sidebar
   - Header collapse button retained
   - Right notification drawer added
===================================================== */

.wordios-sidebar-v5 .sidebar-v2-brand {
    justify-content: flex-start !important;
}

.wordios-sidebar-v5 .sidebar-v2-logo-wrap {
    width: 100%;
}

.wordios-sidebar-v5 .sidebar-v2-mini-btn {
    display: none !important;
}

.command-header-right {
    gap: 12px;
}

.wordios-notification-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1198;
    display: none;
    background: rgba(2, 6, 23, 0.42);
    backdrop-filter: blur(2px);
}

.wordios-notification-backdrop.active {
    display: block;
}

.wordios-notification-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1199;
    width: min(360px, 100vw);
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #050a1a;
    border-left: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: -28px 0 80px rgba(2, 6, 23, 0.42);
    color: #e5edff;
    transform: translateX(105%);
    transition: transform 0.24s ease;
}

.wordios-notification-drawer.active {
    transform: translateX(0);
}

.notification-drawer-head {
    min-height: 72px;
    padding: 20px 18px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.notification-drawer-head h2 {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.035em;
}

.notification-drawer-head small {
    display: block;
    margin-top: 5px;
    color: #7f8eaf;
    font-size: 11px;
    font-weight: 750;
}

.notification-close-btn {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: transparent;
    color: #9fb0d2;
    cursor: pointer;
    transition: 0.18s ease;
}

.notification-close-btn:hover {
    color: #ffffff;
    background: rgba(148, 163, 184, 0.10);
}

.notification-drawer-list {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: grid;
    align-content: start;
    gap: 16px;
}

.notification-drawer-list::-webkit-scrollbar {
    width: 4px;
}

.notification-drawer-list::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.24);
    border-radius: 999px;
}

.notification-drawer-card {
    position: relative;
    padding: 16px 16px 15px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 22px;
    background: rgba(15, 23, 42, 0.36);
}

.notification-drawer-card:hover {
    border-color: rgba(124, 58, 237, 0.34);
    background: rgba(15, 23, 42, 0.52);
}

.notification-drawer-card .notification-dot {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00c076;
    box-shadow: 0 0 0 4px rgba(0, 192, 118, 0.10);
}

.notification-drawer-card.is-warning .notification-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.10);
}

.notification-drawer-card small {
    display: block;
    margin-bottom: 8px;
    color: #8fa1c5;
    font-size: 11px;
    font-weight: 800;
}

.notification-drawer-card strong {
    display: block;
    padding-right: 18px;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 900;
}

.notification-drawer-card p {
    margin: 7px 0 0;
    color: #a6b5d3;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 650;
}

.notification-drawer-footer {
    height: 52px;
    display: grid;
    place-items: center;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    color: #6d7fa4;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.12em;
}

body.wordios-notification-open {
    overflow: hidden;
}

body.wordios-sidebar-collapsed .wordios-sidebar-v5 .sidebar-v2-brand {
    justify-content: center !important;
}

@media (max-width: 720px) {
    .wordios-notification-drawer {
        width: 100vw;
    }

    .notification-btn {
        display: inline-grid !important;
    }
}

/* =====================================================
   WORDIOS DASHBOARD V6 - SIMPLE AI OS HOME
===================================================== */

.wd-dashboard-v6 {
    width: 100%;
    padding: 0 0 48px;
}

.wd-dashboard-v6 a {
    text-decoration: none;
}

.wd-dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) 360px;
    gap: 18px;
    margin-bottom: 18px;
}

.wd-hero-main {
    position: relative;
    overflow: hidden;
    min-height: 230px;
    padding: 28px;
    border: 1px solid #dfe7f3;
    border-radius: 24px;
    background:
        radial-gradient(circle at 88% 12%, rgba(99, 102, 241, 0.22), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #eef4ff 100%);
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.04);
}

.wd-hero-main::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -90px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(79, 70, 229, 0.10);
}

.wd-hero-kicker {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 12px;
    font-weight: 850;
    margin-bottom: 18px;
}

.wd-hero-kicker span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14);
}

.wd-hero-main h1 {
    position: relative;
    z-index: 2;
    margin: 0;
    max-width: 620px;
    font-size: 36px;
    line-height: 1.08;
    letter-spacing: -0.06em;
    color: #0f172a;
}

.wd-hero-main p {
    position: relative;
    z-index: 2;
    max-width: 620px;
    margin: 14px 0 0;
    color: #5f6f89;
    font-size: 15px;
    line-height: 1.65;
}

.wd-hero-actions {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.wd-btn {
    min-height: 42px;
    border: 0;
    border-radius: 13px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: pointer;
    font-weight: 850;
    font-size: 13px;
    line-height: 1;
    transition: 0.18s ease;
}

.wd-btn-primary {
    background: #0b1b35;
    color: #ffffff !important;
}

.wd-btn-primary:hover {
    background: #071225;
    transform: translateY(-1px);
}

.wd-btn-light {
    background: #ffffff;
    color: #0b1b35 !important;
    border: 1px solid #dfe7f3;
}

.wd-btn-light:hover {
    background: #f8fafc;
    transform: translateY(-1px);
}

.wd-hero-ai-card {
    padding: 22px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.26), transparent 34%),
        #071022;
    color: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
}

.wd-ai-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.wd-ai-head h2 {
    margin: 0;
    font-size: 18px;
    letter-spacing: -0.04em;
}

.wd-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    font-size: 12px;
    font-weight: 850;
}

.wd-ai-badge span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
}

.wd-ai-summary {
    display: grid;
    gap: 10px;
}

.wd-ai-summary-item {
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
}

.wd-ai-summary-item strong {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
}

.wd-ai-summary-item small {
    display: block;
    color: #9fb0d2;
    font-size: 12px;
    line-height: 1.5;
}

.wd-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.wd-metric-card,
.wd-panel,
.wd-seo-score-box,
.wd-seo-issues {
    border: 1px solid #dfe7f3;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.035);
}

.wd-metric-card {
    padding: 18px;
    border-radius: 20px;
    transition: 0.18s ease;
}

.wd-metric-card:hover,
.wd-panel:hover,
.wd-seo-score-box:hover,
.wd-seo-issues:hover {
    border-color: #ccd8ec;
}

.wd-metric-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.wd-metric-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: #eef4ff;
    color: #4f46e5;
}

.wd-metric-change {
    font-size: 12px;
    font-weight: 850;
    color: #059669;
}

.wd-metric-card h3 {
    margin: 0;
    font-size: 12px;
    color: #667085;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wd-metric-card p {
    margin: 6px 0 0;
    font-size: 28px;
    line-height: 1;
    color: #0f172a;
    font-weight: 900;
    letter-spacing: -0.05em;
}

.wd-seo-strip {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.wd-seo-score-box,
.wd-seo-issues,
.wd-panel {
    border-radius: 22px;
    overflow: hidden;
}

.wd-seo-score-box {
    padding: 22px;
}

.wd-circle-score {
    --score: 74%;
    width: 132px;
    height: 132px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(#22c55e 0 var(--score), #e5e7eb var(--score) 100%);
    position: relative;
}

.wd-circle-score::before {
    content: "";
    position: absolute;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #ffffff;
}

.wd-circle-score strong {
    position: relative;
    z-index: 2;
    font-size: 32px;
    letter-spacing: -0.06em;
    color: #0f172a;
}

.wd-seo-score-box h3,
.wd-seo-score-box p {
    text-align: center;
}

.wd-seo-score-box h3 {
    margin: 0;
    font-size: 16px;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.wd-seo-score-box p {
    margin: 8px 0 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.5;
}

.wd-seo-issues {
    padding: 16px;
}

.wd-panel-head {
    padding: 18px 20px;
    border-bottom: 1px solid #edf1f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.wd-panel-head.no-border {
    padding: 0 0 14px;
    border-bottom: 0;
}

.wd-panel-head h2 {
    margin: 0;
    font-size: 18px;
    letter-spacing: -0.04em;
    color: #0f172a;
}

.wd-panel-head p {
    margin: 4px 0 0;
    color: #667085;
    font-size: 13px;
}

.wd-panel-link {
    color: #4f46e5;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.wd-issue-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.wd-issue-box {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #edf1f7;
    background: #fbfdff;
}

.wd-issue-count {
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.05em;
}

.wd-issue-count.red { color: #dc2626; }
.wd-issue-count.orange { color: #ea580c; }
.wd-issue-count.green { color: #059669; }

.wd-issue-box strong {
    display: block;
    color: #0f172a;
    font-size: 14px;
    margin-bottom: 5px;
}

.wd-issue-box small {
    display: block;
    color: #667085;
    font-size: 12px;
    line-height: 1.5;
}

.wd-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 380px;
    gap: 18px;
}

.wd-website-list,
.wd-action-list {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.wd-website-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #edf1f7;
    background: #fbfdff;
}

.wd-site-name {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.wd-site-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #ffffff;
    font-weight: 900;
}

.wd-site-name strong,
.wd-site-name small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wd-site-name strong {
    color: #0f172a;
    font-size: 15px;
    margin-bottom: 3px;
}

.wd-site-name small {
    color: #667085;
    font-size: 12px;
}

.wd-site-health {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.wd-score-pill {
    min-width: 70px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 12px;
    font-weight: 900;
}

.wd-mini-actions {
    display: flex;
    gap: 8px;
}

.wd-mini-btn {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #dfe7f3;
    background: #ffffff;
    border-radius: 10px;
    color: #344054;
    font-size: 12px;
    font-weight: 850;
    display: inline-flex;
    align-items: center;
}

.wd-mini-btn:hover {
    background: #f8fafc;
    color: #0f172a;
}

.wd-right-stack {
    display: grid;
    gap: 18px;
    align-content: start;
}

.wd-action-item {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #edf1f7;
    background: #ffffff;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: inherit;
    transition: 0.18s ease;
}

.wd-action-item:hover {
    border-color: #d8e1ef;
    background: #fbfdff;
    transform: translateY(-1px);
}

.wd-action-item i {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #fff7ed;
    color: #ea580c;
}

.wd-action-item strong,
.wd-command-row strong {
    display: block;
    font-size: 13px;
    color: #0f172a;
    margin-bottom: 4px;
}

.wd-action-item small,
.wd-command-row small {
    display: block;
    color: #667085;
    font-size: 12px;
    line-height: 1.5;
}

.wd-command-list {
    padding: 6px 16px 16px;
    display: grid;
}

.wd-command-row {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #edf1f7;
}

.wd-command-row:last-child {
    border-bottom: 0;
}

.wd-command-dot {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
}

.wd-command-dot.done {
    background: #f0fdf4;
    color: #16a34a;
}

.wd-command-dot.pending {
    background: #fff7ed;
    color: #ea580c;
}

.wd-status {
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 900;
    text-transform: capitalize;
}

.wd-status.done {
    background: #ecfdf5;
    color: #047857;
}

.wd-status.pending {
    background: #fff7ed;
    color: #c2410c;
}

.wd-empty-state,
.wd-empty-mini {
    margin: 16px;
    padding: 24px;
    border-radius: 18px;
    border: 1px dashed #cfd8e3;
    background: #fbfdff;
    text-align: center;
    color: #667085;
}

.wd-empty-state i {
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #eef4ff;
    color: #4f46e5;
}

.wd-empty-state strong {
    display: block;
    color: #0f172a;
    font-size: 16px;
    margin-bottom: 6px;
}

.wd-empty-state p {
    max-width: 520px;
    margin: 0 auto 14px;
    font-size: 13px;
    line-height: 1.6;
}

.wd-activity-panel {
    margin-top: 18px;
}

.wd-activity-list {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.wd-activity-item {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 14px;
    background: #fbfdff;
    border: 1px solid #edf1f7;
    border-radius: 16px;
}

.wd-activity-item strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    margin-bottom: 4px;
}

.wd-activity-item p {
    margin: 0;
    color: #667085;
    font-size: 13px;
}

.wd-activity-item span {
    flex: 0 0 auto;
    color: #667085;
    font-size: 12px;
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .wd-dashboard-hero,
    .wd-dashboard-grid,
    .wd-seo-strip {
        grid-template-columns: 1fr;
    }

    .wd-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .wd-hero-main {
        padding: 22px;
    }

    .wd-hero-main h1 {
        font-size: 29px;
    }

    .wd-metric-grid,
    .wd-issue-grid {
        grid-template-columns: 1fr;
    }

    .wd-website-card {
        grid-template-columns: 1fr;
    }

    .wd-site-health {
        justify-content: flex-start;
    }

    .wd-command-row {
        grid-template-columns: 34px 1fr;
    }

    .wd-command-row .wd-status {
        grid-column: 2;
        width: fit-content;
    }

    .wd-activity-item {
        flex-direction: column;
    }
}


/* =====================================================
   CONNECT WEBSITE SETUP FLOW V1
===================================================== */
.wd-connect-flow,
.wd-sites-page,
.wd-site-manager {
    display: grid;
    gap: 18px;
}

.wd-connect-hero,
.wd-sites-hero,
.wd-manager-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
    border: 1px solid #dfe7f3;
    border-radius: 24px;
    background:
        radial-gradient(circle at 92% 10%, rgba(99, 102, 241, 0.16), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #eef4ff 100%);
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.04);
}

.wd-connect-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 12px;
}

.wd-connect-hero h1,
.wd-sites-hero h1,
.wd-manager-hero h1 {
    margin: 0;
    color: #0f172a;
    font-size: 30px;
    line-height: 1.12;
    letter-spacing: -0.055em;
}

.wd-connect-hero p,
.wd-sites-hero p,
.wd-manager-hero p {
    max-width: 660px;
    margin: 10px 0 0;
    color: #5f6f89;
    font-size: 14px;
    line-height: 1.65;
}

.wd-connect-steps-mini {
    min-width: 260px;
    display: grid;
    gap: 8px;
}

.wd-connect-steps-mini div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #dfe7f3;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    color: #667085;
    font-size: 12px;
    font-weight: 850;
}

.wd-connect-steps-mini span {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #eef4ff;
    color: #4f46e5;
}

.wd-connect-steps-mini .active {
    color: #0f172a;
    border-color: rgba(79, 70, 229, 0.20);
}

.wd-connect-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 18px;
    align-items: start;
}

.wd-connect-grid:not(.has-setup) {
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
}

.wd-connect-card,
.wd-manager-panel,
.wd-site-card,
.wd-sites-empty {
    border: 1px solid #dfe7f3;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.035);
}

.wd-connect-card {
    padding: 20px;
}

.wd-card-head,
.wd-panel-head-clean {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.wd-card-head h2,
.wd-panel-head-clean h2,
.wd-site-card h2,
.wd-sites-empty h2 {
    margin: 0;
    color: #0f172a;
    font-size: 19px;
    letter-spacing: -0.04em;
}

.wd-card-head p,
.wd-panel-head-clean p {
    margin: 5px 0 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.5;
}

.wd-card-head > i,
.wd-panel-head-clean > i {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #eef4ff;
    color: #4f46e5;
}

.wd-connect-form .form-group:last-of-type {
    margin-bottom: 16px;
}

.wd-connect-submit,
.wd-btn {
    min-height: 42px;
    border: 0;
    border-radius: 13px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: pointer;
    font-weight: 850;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.wd-btn-sm {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 11px;
    font-size: 12px;
}

.wd-btn-primary,
.wd-connect-submit {
    background: #0b1b35 !important;
    color: #ffffff !important;
}

.wd-btn-light {
    background: #ffffff !important;
    color: #0b1b35 !important;
    border: 1px solid #dfe7f3 !important;
}

.wd-btn-danger {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}

.wd-setup-empty {
    min-height: 280px;
    display: grid;
    place-items: center;
    text-align: center;
}

.wd-setup-empty p,
.wd-sites-empty p {
    max-width: 460px;
    margin: 8px auto 0;
    color: #667085;
    line-height: 1.6;
}

.wd-empty-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: #eef4ff;
    color: #4f46e5;
    font-size: 22px;
}

.wd-api-key-box {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #edf1f7;
    border-radius: 18px;
    background: #fbfdff;
}

.wd-api-key-box.compact {
    margin-bottom: 16px;
}

.wd-api-key-box strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
}

.wd-api-key-box small {
    color: #667085;
    font-size: 12px;
}

.wd-api-key-box code {
    display: block;
    padding: 13px;
    border-radius: 12px;
    background: #0b1b35;
    color: #e2e8f0;
    word-break: break-all;
    font-size: 12px;
}

.wd-copy-btn {
    min-height: 36px;
    border: 1px solid #dfe7f3;
    border-radius: 12px;
    background: #ffffff;
    color: #0b1b35;
    font-weight: 850;
    cursor: pointer;
}

.wd-plugin-guide {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid #edf1f7;
    border-radius: 18px;
    background: #ffffff;
}

.wd-plugin-guide h3 {
    margin: 0 0 10px;
    font-size: 15px;
    color: #0f172a;
}

.wd-plugin-guide ol {
    margin: 0;
    padding-left: 18px;
    color: #475467;
    font-size: 13px;
    line-height: 1.85;
}

.wd-setup-actions,
.wd-manager-button-row,
.wd-site-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.wd-setup-actions form,
.wd-manager-button-row form,
.wd-action-group form {
    margin: 0;
}

.wd-connect-alert {
    margin: 0;
}

/* Connected website cards */
.wd-sites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.wd-site-card {
    padding: 18px;
}

.wd-site-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.wd-site-logo,
.wd-manager-logo {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #ffffff;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(79, 70, 229, 0.22);
}

.wd-site-top h2 {
    font-size: 16px;
}

.wd-site-top a,
.wd-manager-site a {
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.wd-site-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background: #fbfdff;
    border: 1px solid #edf1f7;
}

.wd-site-meta-grid small,
.wd-manager-card small {
    display: block;
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.wd-site-meta-grid strong,
.wd-manager-card strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
}

.wd-sites-empty {
    padding: 42px 20px;
    text-align: center;
}

/* Website manager */
.wd-manager-site {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wd-manager-logo {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 20px;
    font-size: 22px;
}

.wd-manager-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

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

.wd-manager-card {
    padding: 16px;
    border: 1px solid #dfe7f3;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.03);
}

.wd-manager-card strong {
    font-size: 22px;
    letter-spacing: -0.04em;
}

.wd-manager-card p {
    margin: 8px 0 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.5;
}

.wd-manager-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 18px;
    align-items: start;
}

.wd-manager-panel {
    padding: 18px;
}

.wd-action-groups {
    display: grid;
    gap: 12px;
}

.wd-action-group {
    padding: 14px;
    border: 1px solid #edf1f7;
    border-radius: 18px;
    background: #fbfdff;
}

.wd-action-group h3 {
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    font-size: 14px;
    letter-spacing: -0.02em;
}

.wd-action-group > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wd-action-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dfe7f3;
    border-radius: 11px;
    background: #ffffff;
    color: #0b1b35;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
}

.wd-action-btn:hover,
.wd-btn-light:hover,
.wd-copy-btn:hover {
    background: #f8fafc !important;
}

.wd-advanced-tools {
    margin-top: 14px;
    border: 1px dashed #cfd8e3;
    border-radius: 16px;
    padding: 12px;
    background: #ffffff;
}

.wd-advanced-tools summary {
    cursor: pointer;
    color: #667085;
    font-size: 13px;
    font-weight: 900;
}

.wd-advanced-tools .wd-manager-button-row {
    margin-top: 12px;
}

@media (max-width: 1080px) {
    .wd-connect-hero,
    .wd-sites-hero,
    .wd-manager-hero,
    .wd-connect-grid,
    .wd-manager-grid,
    .wd-manager-overview-grid {
        grid-template-columns: 1fr;
    }

    .wd-connect-hero,
    .wd-sites-hero,
    .wd-manager-hero {
        display: grid;
    }

    .wd-connect-steps-mini {
        min-width: 0;
    }
}

@media (max-width: 720px) {
    .wd-connect-hero h1,
    .wd-sites-hero h1,
    .wd-manager-hero h1 {
        font-size: 25px;
    }

    .wd-setup-actions,
    .wd-manager-button-row,
    .wd-site-actions,
    .wd-action-group > div,
    .wd-manager-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .wd-setup-actions .wd-btn,
    .wd-manager-button-row .wd-btn,
    .wd-site-actions .wd-btn,
    .wd-action-btn,
    .wd-manager-actions .wd-btn,
    .wd-manager-button-row form,
    .wd-action-group form {
        width: 100%;
    }

    .wd-site-meta-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   WORDIOS WEBSITE REMOVE / DANGER ZONE V1
===================================================== */

.wd-btn-danger {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

.wd-btn-danger:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}

.wd-danger-zone-panel {
    border-color: #fecaca !important;
    background: linear-gradient(180deg, #ffffff 0%, #fffafa 100%) !important;
}

.wd-danger-zone-panel .wd-panel-head-clean > i {
    color: #dc2626;
    background: #fee2e2;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
}

.wd-danger-zone-box {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid #fecaca;
    border-radius: 16px;
    background: #fff7f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.wd-danger-zone-box strong {
    display: block;
    margin-bottom: 5px;
    color: #991b1b;
    font-size: 15px;
    font-weight: 900;
}

.wd-danger-zone-box small {
    display: block;
    max-width: 760px;
    color: #7f1d1d;
    font-size: 13px;
    line-height: 1.55;
}

.wd-remove-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.wd-remove-modal.active {
    display: flex;
}

.wd-remove-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(5px);
}

.wd-remove-dialog {
    position: relative;
    width: min(520px, 100%);
    border-radius: 24px;
    border: 1px solid rgba(254, 202, 202, 0.9);
    background: #ffffff;
    padding: 24px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    animation: wdRemovePop 0.16s ease-out;
}

@keyframes wdRemovePop {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.wd-remove-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
}

.wd-remove-close:hover {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}

.wd-remove-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: #fee2e2;
    color: #dc2626;
    font-size: 22px;
    margin-bottom: 16px;
}

.wd-remove-dialog h2 {
    margin: 0 42px 8px 0;
    color: #0f172a;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -0.045em;
}

.wd-remove-dialog p {
    margin: 0 0 16px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}

.wd-remove-target {
    padding: 13px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #f8fafc;
    margin-bottom: 16px;
}

.wd-remove-target strong {
    display: block;
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 3px;
}

.wd-remove-target small {
    display: block;
    color: #64748b;
    font-size: 12px;
    word-break: break-word;
}

.wd-remove-form label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.wd-remove-form .form-control {
    margin-bottom: 16px;
}

.wd-remove-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.wd-site-actions .wd-btn-danger {
    border-color: #fecaca !important;
    background: #fff1f2 !important;
    color: #be123c !important;
}

.wd-site-actions .wd-btn-danger:hover {
    background: #e11d48 !important;
    color: #ffffff !important;
    border-color: #e11d48 !important;
}

@media (max-width: 760px) {
    .wd-danger-zone-box {
        align-items: stretch;
        flex-direction: column;
    }

    .wd-danger-zone-box .wd-btn,
    .wd-remove-actions .wd-btn {
        width: 100%;
        justify-content: center;
    }

    .wd-remove-dialog {
        padding: 20px;
        border-radius: 20px;
    }

    .wd-remove-actions {
        flex-direction: column-reverse;
    }
}

/* =====================================================
   WEBSITE MANAGER ACTIONS V2 - WORKING BUTTONS + CLEAN TABLES
===================================================== */

.wd-action-groups-v2 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.wd-action-group-card {
    border: 1px solid #e4eaf3;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    padding: 15px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.035);
}

.wd-action-group-head {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 14px;
}

.wd-action-group-head h3 {
    margin: 0;
    color: #0f172a;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.035em;
}

.wd-action-group-head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}

.wd-action-group-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #eef4ff;
    color: #4f46e5;
}

.wd-action-group-icon.content {
    background: #eff6ff;
    color: #2563eb;
}

.wd-action-group-icon.seo {
    background: #f5f3ff;
    color: #7c3aed;
}

.wd-action-group-icon.intelligence {
    background: #ecfdf5;
    color: #059669;
}

.wd-action-list {
    display: grid;
    gap: 9px;
}

.wd-action-form {
    margin: 0;
}

.wd-action-btn {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #e4eaf3;
    border-radius: 14px;
    background: #ffffff;
    color: #0f172a !important;
    text-decoration: none !important;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    text-align: left;
    font-weight: 850;
    cursor: pointer;
    transition: 0.18s ease;
    font-family: inherit;
}

.wd-action-btn i {
    color: #64748b;
    font-size: 14px;
    text-align: center;
}

.wd-action-btn span {
    display: block;
    font-size: 13px;
    line-height: 1.2;
    color: inherit;
}

.wd-action-btn small {
    grid-column: 2;
    display: block;
    margin-top: -3px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;
}

.wd-action-btn:hover {
    border-color: #cfd8ea;
    background: #f8fbff;
    transform: translateY(-1px);
}

/* Dark run button */
.wd-action-btn.wd-action-run {
    background: #0b1b35;
    color: #ffffff !important;
    border-color: #0b1b35;
}

.wd-action-btn.wd-action-run i,
.wd-action-btn.wd-action-run span,
.wd-action-btn.wd-action-run small {
    color: rgba(255, 255, 255, 0.82) !important;
}

.wd-action-btn.wd-action-run span {
    color: #ffffff !important;
}

/* Hover fixed */
.wd-action-btn.wd-action-run:hover {
    background: #122848;
    color: #ffffff !important;
    border-color: #122848;
}

.wd-action-btn.wd-action-run:hover i,
.wd-action-btn.wd-action-run:hover span,
.wd-action-btn.wd-action-run:hover small {
    color: #000 !important;
}

.wd-site-actions-v2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.wd-site-inline-form {
    margin: 0;
    display: inline-flex;
}

.wd-manager-panel .table-wrap {
    border-radius: 18px;
    border-color: #e4eaf3;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.025);
}

.wd-manager-panel .data-table thead th {
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    letter-spacing: 0.08em;
}

.wd-manager-panel .data-table tbody td {
    font-size: 13px;
}

.command-table td:first-child,
.posts-table td:first-child {
    font-weight: 850;
    color: #0f172a;
}

.table-actions .table-btn {
    min-height: 30px;
    border-radius: 9px;
}

.wd-advanced-tools {
    margin-top: 16px;
    border: 1px dashed #cfd8ea;
    border-radius: 16px;
    background: #fbfdff;
    padding: 12px;
}

.wd-advanced-tools summary {
    cursor: pointer;
    color: #334155;
    font-size: 13px;
    font-weight: 900;
}

.wd-advanced-tools .wd-manager-button-row {
    margin-top: 12px;
}

@media (max-width: 1120px) {
    .wd-action-groups-v2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .wd-site-actions-v2,
    .wd-site-inline-form,
    .wd-site-actions-v2 .wd-btn {
        width: 100%;
    }

    .wd-action-btn {
        min-height: 52px;
    }
}