/* ==================================================
   NOVISPRY DESIGN TOKENS
================================================== */

:root {

    /* Core */

    --bg: #f4f7fb;
    --surface: #ffffff;
    --surface-alt: #f8fafc;

    --text: #0f172a;
    --text-secondary: #64748b;

    --border: #e5e7eb;
    --border-light: #edf2f7;

    /* Brand */

    --primary: #4f46e5;
    --primary-hover: #4338ca;

    --primary-light: #eef2ff;
    --primary-soft: #ede9fe;

    --accent: #8b5cf6;

    /* Status */

    --success: #10b981;
    --danger: #ef4444;

    /* Shadows */

    --shadow-sm:
        0 8px 20px rgba(15,23,42,.05);

    --shadow-md:
        0 14px 32px rgba(15,23,42,.08);

    --shadow-lg:
        0 24px 60px rgba(15,23,42,.12);

    /* Radius */

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;

    /* Density */

    --spacing-unit: 1;
}
html[data-theme="dark"] {

    --bg: #0f172a;

    --surface: #172133;

    --surface-alt: #1e293b;

    --text: #f8fafc;

    --text-secondary: #cbd5e1;

    --border: #334155;

    --border-light: #475569;

    --shadow-sm:
        0 8px 20px rgba(0,0,0,.35);

    --shadow-md:
        0 14px 32px rgba(0,0,0,.42);

    --shadow-lg:
        0 24px 60px rgba(0,0,0,.55);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    color-scheme: dark;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background: var(--bg);
    color: var(--text);

    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.dashboard {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 270px;
    background: #0f172a;
    color: white;
    padding: 28px 22px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
}

.sidebar-logo {
    width: 120px;
    margin-bottom: 45px;
}

.sidebar-nav a {
    position: relative;

    display: flex;
    align-items: center;
    gap: 10px;

    color: #dbeafe;
    text-decoration: none;

    padding: 14px 16px;
    margin-bottom: 10px;

    border-radius: 14px;
    font-weight: 800;

    overflow: hidden;

    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.24s ease,
        color 0.24s ease,
        box-shadow 0.24s ease;
}

.sidebar-nav a:hover {
    background: #1e293b;
    color: white;

    transform: translateX(4px);

    box-shadow:
        0 10px 24px
        rgba(0, 0, 0, 0.18);
}

.sidebar-nav a.active {
    background: #1e293b;
    color: white;

    box-shadow:
        inset 3px 0 0 #8b5cf6,
        0 10px 24px rgba(0, 0, 0, 0.16);
}

.sidebar-nav a::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;

    width: 3px;
    height: 0;

    border-radius: 0 999px 999px 0;

    background: linear-gradient(
        180deg,
        #8b5cf6,
        #6366f1
    );

    transform: translateY(-50%);

    transition:
        height 0.24s
        cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-nav a:hover::before,
.sidebar-nav a.active::before {
    height: 26px;
}

.sidebar-nav a:active {
    transform:
        translateX(3px)
        scale(0.98);

    transition-duration: 0.08s;
}

.plan-box {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 28px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 18px;
    padding: 18px;
}

.plan-box span {
    display: block;
    color: #94a3b8;
    font-size: 14px;
    margin-bottom: 8px;
}

.main {
    display: block;
    align-items: initial;
    justify-content: initial;

    margin-left: 270px;
    width: calc(100% - 270px);
    min-height: 100vh;
    padding: 42px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: flex-start;
    margin-bottom: 34px;
}

.topbar p {
    color: #64748b;
    margin-bottom: 10px;
}

.topbar h1 {
    font-size: 48px;
    max-width: 900px;
    line-height: 1.05;
    letter-spacing: -1.5px;
}

.btn {
    background: #4f46e5;
    color: white;
    border: none;
    padding: 14px 22px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.btn.secondary {
    background: white;
    color: #4f46e5;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
    align-items: start;
}

.section {
    background: var(--surface);
    color: var(--text);

    border-radius: 26px;
    padding: 30px;

    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.small-label {

    display:inline-block;

    color:var(--primary);

    font-weight:900;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:.08em;

    margin-bottom:12px;
}

.section h2 {
    font-size: 26px;
    margin-bottom: 10px;
}

.muted {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-grid .full {
    grid-column: 1 / -1;
}

label {

    display: block;

    font-weight: 800;

    margin-bottom: 8px;

    color: var(--text);
}

input,
textarea {

    width: 100%;
    padding: 15px 16px;

    border: 1px solid var(--border);
    border-radius: 14px;

    font-size: 15px;

    background: var(--surface-alt);
    color: var(--text);

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

select {

    background: var(--surface-alt);
    color: var(--text);

    border: 1px solid var(--border);

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}

select:focus{

    outline:none;

    border-color:var(--primary);

    background:var(--surface);

    box-shadow:
        0 0 0 4px
        rgba(79,70,229,.12);
}

textarea {
    min-height: 115px;
    resize: vertical;
}

input:focus,
textarea:focus {
    outline: none;

    border-color: var(--primary);
    background: var(--surface);

    box-shadow:
        0 0 0 4px
        rgba(79, 70, 229, 0.12);
}

.campaign-box {
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid #e5e7eb;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 20px 0 24px;
}

.quick-grid button {
    background: var(--surface-alt);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 15px;
    font-weight: 900;
    cursor: pointer;
}

.quick-grid button:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
}

.tone-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0 24px;
}

.tone-row label {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    padding: 11px 14px;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
}

.tone-row input {
    width: auto;
    margin-right: 6px;
}

.generate-btn {
    background: #4f46e5;
    color: white;
    border: none;
    padding: 16px 24px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
}

.generate-btn:hover {
    background: #4338ca;
}

.side-card {
    position: sticky;
    top: 32px;
}

.setup-list {
    margin-top: 24px;
}

.setup-list div {
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
}

.setup-list span {
    display: block;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.setup-list strong {
    font-size: 17px;
}

.output-section {
    margin-top: 30px;
}

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

.output-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.output-card {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    padding: 24px;
    border-radius: 20px;
    min-height: 160px;
}

.output-card h3 {
    margin-bottom: 12px;
}

.output-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

@media (max-width: 1000px) {
    .sidebar {
        position: static;
        width: 100%;
    }

    .dashboard {
        flex-direction: column;
    }

    .main {
        margin-left: 0;
        width: 100%;
        padding: 24px;
    }

    .dashboard-grid,
    .output-grid,
    .form-grid,
    .quick-grid {
        grid-template-columns: 1fr;
    }

    .topbar {
        flex-direction: column;
    }

    .topbar h1 {
        font-size: 36px;
    }

    .plan-box {
        position: static;
        margin-top: 30px;
    }
}
.generated-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.generated-item:last-child {
    border-bottom: none;
}

.generated-item strong {
    display: block;
    color: #4f46e5;
    margin-bottom: 8px;
    font-size: 14px;
}

.generated-item p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
}

.generated-item button {
    background: var(--surface-alt);
    color: var(--primary);
    border: 1px solid var(--border);
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
}

.generated-item button:hover {
    background: #eef2ff;
}

.copy-btn {
    background: #eef2ff;
    color: #4f46e5;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.copy-btn:hover {
    background: #4f46e5;
    color: white;
}
.result-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    margin-top: 16px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
}

.result-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.result-card-top strong {
    color: var(--primary);
    font-size: 14px;
}

.result-card-top span {
    background: #dcfce7;
    color: #166534;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.result-card p {
    color: var(--text);
    line-height: 1.65;
    margin-bottom: 16px;
}

.result-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.edit-btn,
.regen-btn {
    background: #f8fafc;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.edit-btn:hover,
.regen-btn:hover {
    background: #eef2ff;
    color: #4f46e5;
    border-color: #c7d2fe;
}
.results-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.tab-btn {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.tab-btn:hover,
.tab-btn.active {
    background: #4f46e5;
    color: white;
    border-color: #4f46e5;
}

.tab-content{
    display:none;
}

.tab-content.active{
    display:block;
    animation:tabContentEnter .28s ease both;
}

@keyframes tabContentEnter{
    from{
        opacity:0;
        transform:translateY(8px);
    }

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

.hashtag-box,
.bonus-tip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    margin-bottom: 18px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
}

.hashtag-box h3,
.bonus-tip h3 {
    margin-bottom: 12px;
}

.hashtag-box p,
.bonus-tip p {
    color: var(--text);
    line-height: 1.7;
}

.calendar-list {
    display: grid;
    gap: 14px;
}

.calendar-day {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
}

.calendar-day strong {
    color: #4f46e5;
    display: block;
    margin-bottom: 8px;
}

.calendar-day p {
    color: var(--text);
    line-height: 1.6;
}
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--surface);
    color: var(--text);
    width: 100%;
    max-width: 520px;
    border-radius: 26px;
    padding: 30px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);
}

.modal-content h2 {
    margin-bottom: 10px;
}

.modal-content p {
    color: var(--text-secondary);
    margin-bottom: 18px;
}

.modal-content textarea {
    min-height: 130px;
    margin-bottom: 20px;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.secondary-btn {
    background: #f8fafc;
    color: #334155;
    border: 1px solid #e2e8f0;
    padding: 12px 18px;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
}

.primary-btn {
    background: #4f46e5;
    color: white;
    border: none;
    padding: 12px 18px;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
}
/* ==========================
   Fullscreen Image Preview
========================== */

.generated-image {
    width: 100%;
    max-width: 100%;
    height: auto;

    display: block;

    object-fit: contain;
    border-radius: 12px;

    cursor: zoom-in;
}

.image-output .result-card {
    overflow: hidden;
}

.image-output .generated-image {
    width: 100%;
    height: 360px;

    object-fit: contain;
    object-position: center;

    background: #f4f6fb;
    border: 1px solid #e3e7ef;
    border-radius: 14px;
}

.image-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 32px;
    background: rgba(8, 12, 24, 0.92);
    backdrop-filter: blur(8px);
}

.image-preview-modal.active {
    display: flex;
}

.image-preview-large {
    display: block;
    max-width: min(92vw, 1400px);
    max-height: 88vh;

    object-fit: contain;
    border-radius: 18px;

    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.image-preview-close {
    position: absolute;
    top: 24px;
    right: 28px;

    width: 46px;
    height: 46px;

    border: none;
    border-radius: 50%;

    font-size: 20px;
    cursor: pointer;

    color: white;
    background: rgba(255, 255, 255, 0.12);
}

.image-preview-close:hover {
    background: rgba(255, 255, 255, 0.22);
}

@media (max-width: 700px) {
    .image-preview-modal {
        padding: 18px;
    }

    .image-preview-large {
        max-width: 96vw;
        max-height: 82vh;
    }

    .image-preview-close {
        top: 14px;
        right: 14px;
    }
}
/* AI Image Generation Progress */

.image-progress {
    margin: 18px 0;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.image-progress.hidden {
    display: none;
}

.image-progress-title {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.progress-bar {
    width: 100%;
    height: 10px;
    overflow: hidden;
    background: #e5e7eb;
    border-radius: 999px;
}

#progressBarFill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 999px;
    transition: width 0.35s ease;
}

#progressText {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}
#progressBarFill.complete {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

/* =========================
   Brand Kit
========================= */

.brand-kit-section {
    padding: 28px;
}

.brand-kit-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.brand-kit-header h2 {
    margin: 6px 0 8px;
    font-size: 28px;
}

.brand-kit-header .muted {
    max-width: 720px;
    line-height: 1.6;
}

.brand-kit-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e5e7eb;
}

.brand-tab-btn {
    padding: 14px 24px;
    border: 1px solid #dbe2ea;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.brand-tab-btn:hover {
    transform: translateY(-2px);
    border-color: #c7d2fe;
    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.08);
}

.brand-tab-btn.active {
    border-color: #4f46e5;
    background: linear-gradient(135deg, #4f46e5, #6d5dfc);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.22);
}

.brand-tab-content {
    display: none;
}

.brand-tab-content.active {
    display: block;
    animation: brandTabFade 0.22s ease;
}

@keyframes brandTabFade {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

#brandKitForm .form-grid {
    gap: 22px;
}

#brandKitForm label {
    display: block;
    margin-bottom: 8px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
}

#brandKitForm input,
#brandKitForm select,
#brandKitForm textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #d7dee8;
    border-radius: 12px;
    background: #f8fafc;
    color: #0f172a;
    font: inherit;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

#brandKitForm textarea {
    min-height: 120px;
    resize: vertical;
}

#brandKitForm input:focus,
#brandKitForm select:focus,
#brandKitForm textarea:focus {
    outline: none;
    border-color: #6366f1;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

#brandKitForm input[type="color"] {
    height: 56px;
    padding: 6px;
    cursor: pointer;
}

#brandKitForm input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

#brandKitForm input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 9px;
}

#brandKitForm input[type="file"] {
    min-height: 92px;
    padding: 28px 18px;
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
    cursor: pointer;
}

#brandKitForm input[type="file"]:hover {
    border-color: #818cf8;
    background: #f5f3ff;
}

@media (max-width: 900px) {
    .brand-kit-header {
        flex-direction: column;
    }

    .brand-kit-header #saveBrandKitBtn {
        width: 100%;
    }
}

.brand-hero-left{
    max-width:720px;
}

.brand-hero-left h1{
    margin:12px 0 18px;
}

.brand-hero-left .muted{
    max-width:620px;
    line-height:1.7;
    color:#64748b;
    font-size:16px;
}

.brand-hero-right{
    display:flex;
    align-items:flex-start;
}

.business-header{
    margin-bottom:36px;
}

.business-header h2{
    margin:12px 0 16px;
    font-size:40px;
}

.business-header .muted{
    max-width:620px;
    line-height:1.7;
    font-size:16px;
}

/* =========================
   Brand Color Cards
========================= */

.color-card {
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    transition: all 0.25s ease;
}

.color-card:hover {
    transform: translateY(-3px);
    border-color: #c7d2fe;
    box-shadow: 0 16px 36px rgba(99, 102, 241, 0.12);
}

.color-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}

.color-card-label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.color-card-header p {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.color-card-badge {
    padding: 5px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 12px;
    font-weight: 700;
}

.color-picker-area{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    padding:18px;
    border:1px solid #e6e9ff;
    border-radius:18px;
    background:#ffffff;
    cursor:pointer;
    transition:.25s ease;
}

.color-picker-area{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:12px 14px;
    border:1px solid #e6e9ff;
    border-radius:14px;
    background:#ffffff;
    cursor:pointer;
    transition:.25s ease;
}

.color-card{
    padding:16px;
}

.color-card-header{
    margin-bottom:10px;
}

.color-preview{
    display:block;
    width:100%;
    height:44px;
    flex-shrink:0;
    border-radius:11px;
    border:1px solid rgba(255,255,255,.45);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.35),
        0 6px 14px rgba(0,0,0,.07);
    margin-bottom:8px;
}


.color-value{
    font-size:17px;
    font-weight:700;
    letter-spacing:.5px;
    color:#111827;
}

.color-edit-icon{
    align-self:flex-end;
    font-size:18px;
    opacity:.7;
    transition:.2s;
}

.color-picker-area:hover .color-edit-icon{
    opacity:1;
    transform:scale(1.15);
}

.brand-color-input {
    display: none;
}

/* =========================
   Brand Logo Uploader
========================= */

.logo-uploader{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    gap:20px;
    min-height:100px;
    padding:16px;
    border:1px dashed #c7d2fe;
    border-radius:18px;
    background:linear-gradient(135deg,#ffffff 0%,#faf9ff 100%);
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.logo-uploader:hover{
    border-color:#818cf8;
    background:#fff;
    box-shadow:0 12px 28px rgba(79,70,229,.08);
}

.logo-uploader.dragging {
    border-color: #4f46e5;
    background: #eef2ff;
    box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.12);
}

.logo-input {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.logo-upload-empty{
    min-height:100px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:18px;
    text-align:center;
    pointer-events:none;
}

.logo-upload-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #eef2ff, #ede9fe);
    font-size: 30px;
    box-shadow: 0 10px 24px rgba(99, 102, 241, 0.12);
}

.logo-upload-empty h3 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 18px;
}

.logo-upload-empty p {
    margin: 0 0 10px;
    color: #4f46e5;
    font-size: 14px;
    font-weight: 700;
}

.logo-upload-empty span {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.logo-upload-preview{
    position:relative;
    z-index:4;
    min-height:100px;
    display:grid;
    grid-template-columns:90px 1fr auto;
    align-items:center;
    gap:20px;
    padding:18px;
    background:#ffffff;
}

.logo-upload-preview.hidden {
    display: none;
}

.logo-preview{
    width:72px;
    height:72px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border:1px solid #e0e7ff;
    border-radius:16px;
    background:#fff;
    box-shadow:0 10px 24px rgba(79,70,229,.08);
}

.logo-preview img{
    display:block;
    max-width:56px;
    max-height:56px;
    object-fit:contain;
}

.logo-preview-details {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.logo-upload-info{
    flex:1;
}

.logo-upload-info strong{
    display:block;
    margin-bottom:5px;
    color:#0f172a;
    font-size:15px;
}

.logo-upload-info p{
    margin:0;
    color:#16a34a;
    font-size:13px;
    font-weight:700;
}

.logo-preview-details span {
    color: #16a34a;
    font-size: 13px;
    font-weight: 700;
}

.logo-remove-btn {
    position: relative;
    z-index: 5;
    padding: 8px 12px;
    border: 1px solid #fecaca;
    border-radius: 999px;
    background: #fff1f2;
    color: #dc2626;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.logo-remove-btn:hover {
    border-color: #fca5a5;
    background: #ffe4e6;
    transform: translateY(-1px);
}

@media (max-width: 700px) {
    .logo-upload-preview {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .logo-preview-box {
        width: 100%;
    }

    .logo-remove-btn {
        justify-self: center;
    }
}

.logo-upload-empty.hidden {
    display: none;
}

.sidebar-logout-form {
    margin-top: 20px;
}

.sidebar-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: #ef4444;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

.sidebar-logout-btn:hover {
    background: #dc2626;
}

.quick-grid button.active {
    background: #4f46e5;
    color: white;
    border: 1px solid #4f46e5;
    box-shadow: 0 10px 25px rgba(79, 70, 229, 0.25);
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

.tone-row label {
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.tone-row label.active {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
    box-shadow: 0 10px 25px rgba(79, 70, 229, 0.25);
    transform: translateY(-2px);
}

.tone-row label.active input {
    accent-color: #ffffff;
}

.novispry-modal {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.novispry-modal.active {
    opacity: 1;
    visibility: visible;
}

.novispry-modal.closing {
    opacity: 0;
    visibility: visible;
}

.novispry-modal-card {
    transform: translateY(10px) scale(0.98);
    transition: transform 0.2s ease;
}

.novispry-modal.active .novispry-modal-card {
    transform: translateY(0) scale(1);
}

.novispry-modal.closing .novispry-modal-card {
    transform: translateY(10px) scale(0.98);
    opacity: 0;
}


.novispry-modal {
    position: fixed;
    inset: 0;
    z-index: 99990;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.novispry-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.novispry-modal.closing {
    opacity: 0;
    visibility: visible;
    pointer-events: none;
}
.novispry-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(4px);
}

.novispry-modal-card {
    position: relative;
    z-index: 1;

    width: min(520px, 100%);
    padding: 24px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;

    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.28);

    transform: translateY(10px) scale(0.98);
    opacity: 0;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.novispry-modal.active .novispry-modal-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.novispry-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.novispry-modal-header h2 {
    margin: 0;
    color: var(--text);
    font-size: 24px;
}

.novispry-modal-header p {
    margin: 8px 0 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.novispry-modal-close {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    padding: 0;

    background: #f3f4f6;
    color: #6b7280;

    border: none;
    border-radius: 10px;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;
}

.novispry-modal-close:hover {
    background: #e5e7eb;
    color: #111827;
}

.novispry-modal-body {
    margin-top: 24px;
}

.novispry-modal-body label {
    display: block;
    margin-bottom: 8px;

    color: var(--text);
    font-size: 14px;
    font-weight: 700;
}

.novispry-modal-body input {
    width: 100%;
    padding: 14px 16px;

    background: var(--surface-alt);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;

    font: inherit;
    outline: none;
}

.novispry-modal-body input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}

.novispry-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;

    margin-top: 24px;
}

.novispry-modal-secondary,
.novispry-modal-primary {
    padding: 12px 18px;

    border-radius: 12px;

    font: inherit;
    font-weight: 700;

    cursor: pointer;
}

.novispry-modal-secondary {
    background: #ffffff;
    color: #374151;

    border: 1px solid #d1d5db;
}

.novispry-modal-secondary:hover {
    background: #f9fafb;
}

.novispry-modal-primary {
    background: linear-gradient(
        135deg,
        #4f46e5,
        #7c3aed
    );
    color: #ffffff;

    border: none;

    box-shadow:
        0 10px 24px rgba(79, 70, 229, 0.24);
}

.novispry-modal-primary:hover {
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .novispry-modal {
        padding: 16px;
    }

    .novispry-modal-card {
        padding: 20px;
    }

    .novispry-modal-actions {
        flex-direction: column-reverse;
    }

    .novispry-modal-secondary,
    .novispry-modal-primary {
        width: 100%;
    }
}

.novispry-modal-danger {
    padding: 12px 18px;

    background: linear-gradient(
        135deg,
        #ef4444,
        #dc2626
    );

    color: #ffffff;

    border: none;
    border-radius: 12px;

    font: inherit;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 10px 24px rgba(239, 68, 68, 0.24);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.novispry-modal-danger:hover {
    transform: translateY(-1px);

    box-shadow:
        0 14px 30px rgba(239, 68, 68, 0.3);
}

.button-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.85;
}

.button-loading::before {
    content: "";

    width: 16px;
    height: 16px;

    display: inline-block;
    flex-shrink: 0;

    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation: novispry-spin 0.7s linear infinite;
}

.button-loading-light::before {
    border-color: rgba(79, 70, 229, 0.25);
    border-top-color: #4f46e5;
}

@keyframes novispry-spin {
    to {
        transform: rotate(360deg);
    }
}

.button-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.skeleton-card {
    padding: 20px;

    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.06);
}

.skeleton-card + .skeleton-card {
    margin-top: 16px;
}

.skeleton-line {
    position: relative;
    overflow: hidden;

    height: 14px;
    margin-bottom: 12px;

    background: #e5e7eb;
    border-radius: 999px;
}

.skeleton-line:last-child {
    margin-bottom: 0;
}

.skeleton-line.short {
    width: 38%;
}

.skeleton-line.medium {
    width: 68%;
}

.skeleton-line.long {
    width: 92%;
}

.skeleton-line.full {
    width: 100%;
}

.skeleton-line::after,
.skeleton-card-title::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        100deg,
        transparent 20%,
        rgba(255, 255, 255, 0.9) 50%,
        transparent 80%
    );

    transform: translateX(-120%);

    animation:
        novispry-skeleton-shimmer
        1.15s
        ease-in-out
        infinite;
}

.skeleton-card-title {
    position: relative;
    overflow: hidden;
}

@keyframes novispry-skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* ========================================
   Campaign generation experience
======================================== */

.campaign-generating {
    min-width: 320px;
    padding: 16px 24px;
    gap: 11px;

    background: linear-gradient(
        135deg,
        #4f46e5,
        #7c3aed
    );

    box-shadow:
        0 14px 34px rgba(79, 70, 229, 0.3);

    opacity: 1;
}

.campaign-loading-sparkle {
    display: inline-block;
    font-size: 21px;
    line-height: 1;

    animation:
        novispry-sparkle-spin 1.4s ease-in-out infinite;
}

@keyframes novispry-sparkle-spin {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.22);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}


.campaign-generation-panel {
    width: min(560px, 100%);
    margin-top: 16px;
    padding: 18px 20px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 16px;

    box-shadow:
        0 14px 35px rgba(15, 23, 42, 0.08);

    opacity: 0;
    transform: translateY(-8px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.campaign-generation-panel.active {
    opacity: 1;
    transform: translateY(0);
}

.campaign-generation-panel.finished {
    border-color: #a7f3d0;
    box-shadow:
        0 14px 35px rgba(16, 185, 129, 0.12);
}


.campaign-generation-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 12px;
}

.campaign-generation-status {
    color: #312e81;
    font-size: 14px;
    font-weight: 800;
}

.campaign-generation-percent {
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
}


.campaign-progress-track {
    width: 100%;
    height: 10px;

    overflow: hidden;

    background: #ede9fe;
    border-radius: 999px;
}

.campaign-progress-fill {
    width: 0%;
    height: 100%;

    background: linear-gradient(
        90deg,
        #4f46e5,
        #8b5cf6
    );

    border-radius: inherit;

    transition: width 0.55s ease;
}

.campaign-generation-panel.finished
.campaign-progress-fill {
    background: linear-gradient(
        90deg,
        #10b981,
        #34d399
    );
}


.campaign-generation-steps {
    display: grid;
    gap: 9px;

    margin: 16px 0 0;
    padding: 0;

    list-style: none;
}

.campaign-generation-step {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #9ca3af;
    font-size: 14px;
    font-weight: 650;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.campaign-step-icon {
    width: 23px;
    height: 23px;

    display: grid;
    place-items: center;
    flex-shrink: 0;

    background: #f3f4f6;
    border-radius: 50%;

    font-size: 12px;
}


.campaign-generation-step.active {
    color: #4f46e5;
    transform: translateX(3px);
}

.campaign-generation-step.active
.campaign-step-icon {
    background: #ede9fe;
    color: #4f46e5;

    animation:
        novispry-step-pulse 1s ease-in-out infinite;
}


.campaign-generation-step.complete {
    color: #059669;
}

.campaign-generation-step.complete
.campaign-step-icon {
    background: #d1fae5;
    color: #059669;
}


@keyframes novispry-step-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.14);
    }
}


.campaign-ready-message {
    color: #047857;
    font-weight: 850;
}


@media (max-width: 600px) {
    .campaign-generating {
        min-width: 0;
        width: 100%;
    }

    .campaign-generation-panel {
        width: 100%;
    }
}

.result-card {
    opacity: 0;
    transform: translateY(16px) scale(0.99);

    animation:
        novispry-result-card-in
        0.5s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}

.result-card:nth-child(1) {
    animation-delay: 0.04s;
}

.result-card:nth-child(2) {
    animation-delay: 0.12s;
}

.result-card:nth-child(3) {
    animation-delay: 0.2s;
}

.result-card:nth-child(4) {
    animation-delay: 0.28s;
}

.result-card:nth-child(5) {
    animation-delay: 0.36s;
}

.result-card:nth-child(6) {
    animation-delay: 0.44s;
}

@keyframes novispry-result-card-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.99);
    }

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

.result-card {
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.result-card:hover {
    transform: translateY(-3px);
    border-color: #c7d2fe;

    box-shadow:
        0 18px 38px rgba(15, 23, 42, 0.1);
}

@keyframes novispry-result-card-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.campaign-generation-panel {
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.campaign-generation-panel.closing {
    opacity: 0;
    transform: translateY(-8px);
}

.campaign-ready-celebration {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.campaign-ready-confetti {
    position: absolute;
    inset: 50% auto auto 50%;

    width: 8px;
    height: 8px;

    border-radius: 50%;
    pointer-events: none;

    animation:
        novispry-confetti-pop
        0.8s
        ease-out
        forwards;
}

@keyframes novispry-confetti-pop {
    0% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            translate(0, 0)
            scale(0.4);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            translate(
                var(--confetti-x),
                var(--confetti-y)
            )
            scale(1);
    }
}

/* ==========================
   Premium Button Animation
========================== */

.quick-grid button,
.generated-item button,
.copy-btn,
.action-btn,
.save-btn,
.generate-btn,
.modal button {
    transition:
        transform .22s cubic-bezier(.22,1,.36,1),
        box-shadow .22s ease,
        background .22s ease,
        border-color .22s ease,
        color .22s ease;
}

.quick-grid button:hover,
.generated-item button:hover,
.copy-btn:hover,
.action-btn:hover,
.save-btn:hover,
.generate-btn:hover,
.modal button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(79,70,229,.18),
        0 4px 10px rgba(79,70,229,.10);
}

.quick-grid button:active,
.generated-item button:active,
.copy-btn:active,
.action-btn:active,
.save-btn:active,
.generate-btn:active,
.modal button:active {

    transform: translateY(0) scale(.97);

    transition-duration: .08s;
}

/* ==========================
   Copy Button Success
========================== */

.copy-btn {
    transition:
        all .28s cubic-bezier(.22,1,.36,1);
}

.copy-btn.copied {

    background: #10b981 !important;
    color: white !important;
    border-color: #10b981 !important;

    transform: scale(1.08);
    box-shadow:
        0 12px 30px rgba(16,185,129,.30);
}

.copy-btn {
    min-width: 88px;
}

.copy-btn.copied {
    transform: translateY(-1px) scale(1.03);
}

/* ==========================
   Rewrite Button States
========================== */

.result-card button.rewriting {
    min-width: 118px;

    background: #eef2ff;
    color: #4f46e5;
    border-color: #c7d2fe;

    cursor: wait;

    animation:
        novispry-rewrite-pulse
        1.1s
        ease-in-out
        infinite;
}

.result-card button.rewrite-success {
    min-width: 118px;

    background: #10b981;
    color: white;
    border-color: #10b981;

    transform:
        translateY(-1px)
        scale(1.03);

    box-shadow:
        0 12px 28px
        rgba(16, 185, 129, 0.28);
}

.result-card button.rewrite-error {
    min-width: 118px;

    background: #fff1f2;
    color: #e11d48;
    border-color: #fecdd3;
}

@keyframes novispry-rewrite-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 0
            rgba(79, 70, 229, 0);
    }

    50% {
        box-shadow:
            0 0 0 5px
            rgba(79, 70, 229, 0.11);
    }
}

/* ==========================
   Improve Button States
========================== */

#improvePost {
    min-width: 118px;

    transition:
        transform 0.24s
        cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.24s ease,
        background 0.24s ease,
        border-color 0.24s ease,
        color 0.24s ease;
}

#improvePost.improving {
    background: #eef2ff;
    color: #4f46e5;
    border-color: #c7d2fe;

    cursor: wait;

    animation:
        novispry-improve-pulse
        1.1s
        ease-in-out
        infinite;
}

#improvePost.improve-success {
    background: #10b981;
    color: white;
    border-color: #10b981;

    transform:
        translateY(-1px)
        scale(1.03);

    box-shadow:
        0 12px 28px
        rgba(16, 185, 129, 0.28);
}

#improvePost.improve-error {
    background: #fff1f2;
    color: #e11d48;
    border-color: #fecdd3;
}

@keyframes novispry-improve-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 0
            rgba(79, 70, 229, 0);
    }

    50% {
        box-shadow:
            0 0 0 5px
            rgba(79, 70, 229, 0.11);
    }
}

/* ==========================
   Dashboard Hero
========================== */

.dashboard-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;

    margin-bottom: 34px;
    padding: 14px 6px 0;
}

.dashboard-hero-copy {
    max-width: 720px;
}

.dashboard-hero-welcome {
    margin: 0 0 12px;

    color: #4f46e5;
    font-size: 16px;
    font-weight: 700;
}

.dashboard-hero-title {
    margin: 0;

    color: var(--text);
    font-size: clamp(42px, 4.2vw, 64px);
    line-height: 1.02;
    letter-spacing: -0.045em;
    font-weight: 900;
}

.dashboard-hero-title span {
    color: #5b4bff;
}

.dashboard-hero-description {
    max-width: 610px;

    margin: 18px 0 0;

    color: var(--text-secondary);
    font-size: 17px;
    line-height: 1.65;
}

.dashboard-hero-action {
    display: flex;
    flex-direction: column;
    align-items: center;

    flex-shrink: 0;
    padding-top: 32px;
}

.dashboard-hero-generate {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    min-width: 255px;

    padding: 17px 18px 17px 22px;

    border: 0;
    border-radius: 16px;

    color: white;
    background:
        linear-gradient(
            135deg,
            #6d4aff,
            #4f46e5
        );

    font-size: 15px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 16px 34px rgba(79, 70, 229, 0.28);

    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.24s ease,
        filter 0.24s ease;
}

.dashboard-hero-generate:hover {
    transform: translateY(-3px);

    filter: brightness(1.05);

    box-shadow:
        0 22px 42px rgba(79, 70, 229, 0.36);
}

.dashboard-hero-generate:active {
    transform:
        translateY(-1px)
        scale(0.98);
}

.dashboard-hero-arrow {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.15);

    font-size: 18px;

    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.dashboard-hero-generate:hover
.dashboard-hero-arrow {
    transform: translateX(3px);
}

.dashboard-hero-hint {
    display: flex;
    align-items: center;
    gap: 5px;

    margin: 14px 0 0;

    color: #5b4bff;
    font-size: 15px;
    font-weight: 800;

    transform: rotate(-4deg);
}

.dashboard-hero-hint span {
    display: inline-block;
    font-size: 25px;
    transform: rotate(-12deg);
}

@media (max-width: 980px) {
    .dashboard-hero {
        flex-direction: column;
        gap: 22px;
    }

    .dashboard-hero-action {
        align-items: flex-start;
        padding-top: 0;
    }

    .dashboard-hero-hint {
        margin-left: 58px;
    }
}

@media (max-width: 640px) {
    .dashboard-hero-title {
        font-size: 40px;
    }

    .dashboard-hero-generate {
        width: 100%;
        min-width: 0;
    }

    .dashboard-hero-action {
        width: 100%;
    }
}

/* ==========================
   Business Header
========================== */

.business-header {
    margin-bottom: 26px;
}

.business-header h2 {
    margin-top: 10px;
    margin-bottom: 10px;

    font-size: 34px;
    line-height: 1.15;
}

.business-header .muted {
    max-width: 620px;

    font-size: 17px;
    line-height: 1.6;
}

.profile-tools {
    display: flex;
    flex-direction: column;

    gap: 16px;

    margin-bottom: 34px;
}

.profile-label {
    color: #64748b;

    font-size: 13px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.profile-tools select {

    max-width: 420px;

    height: 52px;

    border-radius: 14px;
}

.profile-tools #saveBusinessProfileBtn {

    width: fit-content;

    padding-inline: 28px;
}

.profile-secondary-actions {

    display: flex;

    gap: 12px;
}

/* ==========================
   Setup Cards
========================== */

.setup-card {
    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: 20px;

    padding: 28px;

    margin-bottom: 30px;

   box-shadow: var(--shadow-sm);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.setup-card:hover {

    transform: translateY(-2px);

    box-shadow:
        0 18px 38px rgba(15,23,42,.08);
}

.setup-card-header {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 28px;
}

.setup-icon {

    width: 58px;

    height: 58px;

    border-radius: 18px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 28px;

    background:
        linear-gradient(
            135deg,
            #eef2ff,
            #ede9fe
        );
}

.setup-card-header h3 {

    margin: 0;

    font-size: 27px;

    color: var(--text);
}

.setup-card-header p {

    margin-top: 6px;

    color: var(--text-secondary);

    font-size: 15px;
}

/* Marketing Goals setup card override */

.campaign-box.setup-card {
    margin-top: 0;
    padding-top: 28px;
    border-top: 1px solid #edf2f7;
}

.campaign-box.setup-card > h2,
.campaign-box.setup-card > .small-label {
    display: none;
}

/* ==========================
   Ready to Generate Card
========================== */

.generate-card {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8f7ff 100%
        );

    border-color: #ddd6fe;
}

.generate-card::before {
    content: "";

    position: absolute;
    top: -90px;
    right: -60px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(124, 58, 237, 0.14),
            rgba(124, 58, 237, 0)
        );

    pointer-events: none;
}

.generate-card .setup-card-header {
    margin-bottom: 0;
}

.generate-card .generate-btn {
    position: relative;
    z-index: 1;

    flex-shrink: 0;

    min-width: 280px;

    padding: 17px 26px;

    border-radius: 16px;

    box-shadow:
        0 16px 32px
        rgba(79, 70, 229, 0.25);
}

.generate-card .generate-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 22px 42px
        rgba(79, 70, 229, 0.34);
}

@media (max-width: 850px) {
    .generate-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .generate-card .generate-btn {
        width: 100%;
        min-width: 0;
    }
}

/* ==========================
   Ready Checklist
========================== */

.generate-ready-list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;

    margin: 16px 0 0;
    padding: 0;

    list-style: none;
}

.generate-ready-list li {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #475569;
    font-size: 14px;
    font-weight: 700;
}

.generate-ready-list li span {
    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    color: #047857;
    background: #d1fae5;

    font-size: 13px;
    font-weight: 900;
}

@media (max-width: 850px) {
    .generate-ready-list {
        flex-direction: column;
        gap: 9px;
    }
}

/* ==========================
   Premium Result Cards
========================== */

.premium-result-card {
    position: relative;
    overflow: hidden;

    padding: 0;

    border: 1px solid #e2e8f0;
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.05);

    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.premium-result-card:hover {
    transform: translateY(-3px);

    border-color: #c7d2fe;

    box-shadow:
        0 20px 44px rgba(15, 23, 42, 0.09);
}

.premium-result-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #4f46e5,
            #6366f1
        );
}

.premium-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 22px 24px 18px;

    border-bottom: 1px solid #f1f5f9;
}

.premium-result-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.premium-result-icon {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    flex-shrink: 0;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #eef2ff,
            #ede9fe
        );

    font-size: 21px;
}

.premium-result-platform {
    display: block;

    margin-bottom: 3px;

    color: #6366f1;

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.premium-result-title {
    margin: 0;

    color: #0f172a;

    font-size: 18px;
    line-height: 1.25;
}

.premium-result-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 11px;

    border-radius: 999px;

    color: #047857;
    background: #d1fae5;

    font-size: 12px;
    font-weight: 800;
}

.premium-result-status span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #10b981;

    box-shadow:
        0 0 0 4px rgba(16, 185, 129, 0.12);
}

.premium-result-content {
    padding: 24px;
}

.premium-result-content p {
    margin: 0;

    color: #334155;

    font-size: 16px;
    line-height: 1.75;

    white-space: pre-wrap;
}

.premium-result-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    padding: 16px 24px 20px;

    border-top: 1px solid #f1f5f9;

    background: #fbfcff;
}

.premium-result-actions button {
    min-height: 38px;

    padding: 8px 14px;

    border: 1px solid #e2e8f0;
    border-radius: 999px;

    background: #ffffff;
    color: #334155;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}

.premium-result-actions button:hover {
    color: #4f46e5;
    border-color: #c7d2fe;
    background: #f5f3ff;
}

@media (max-width: 640px) {
    .premium-result-header {
        align-items: flex-start;
    }

    .premium-result-status {
        flex-shrink: 0;
    }

    .premium-result-actions {
        align-items: stretch;
    }

    .premium-result-actions button {
        flex: 1;
    }
}

/* ==========================
   Premium Hashtags & Tip
========================== */

.premium-info-card {
    margin-bottom: 18px;
}

.premium-hashtag-content p {
    color: #4338ca;
    font-weight: 700;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.premium-tip-content {
    position: relative;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #faf9ff 100%
        );
}

.premium-tip-content::before {
    content: "“";

    position: absolute;
    top: 5px;
    right: 22px;

    color: rgba(99, 102, 241, 0.1);

    font-family: Georgia, serif;
    font-size: 82px;
    line-height: 1;

    pointer-events: none;
}

.premium-tip-content p {
    position: relative;
    z-index: 1;

    max-width: 1000px;

    color: #334155;
    font-size: 16px;
    line-height: 1.75;
}

.premium-ai-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 11px;

    border-radius: 999px;

    color: #5b21b6;
    background: #ede9fe;

    font-size: 12px;
    font-weight: 800;
}

/* ==========================================
   WEEKLY CALENDAR
========================================== */

.calendar-planner-card{
    background:#fff;
    border-radius:24px;
    border:1px solid #e6edf8;
    box-shadow:0 12px 30px rgba(15,23,42,.06);
    overflow:hidden;
    margin-top:20px;
}

.calendar-planner-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:28px 30px;
    background:linear-gradient(135deg,#2563eb,#4f46e5);
    color:#fff;
}

.calendar-planner-heading{
    display:flex;
    gap:18px;
    align-items:center;
}

.calendar-planner-icon{
    width:64px;
    height:64px;
    border-radius:18px;
    background:rgba(255,255,255,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
}

.calendar-planner-label{
    font-size:11px;
    letter-spacing:2px;
    opacity:.8;
    text-transform:uppercase;
}

.calendar-planner-heading h3{
    margin:4px 0;
    font-size:24px;
    font-weight:700;
}

.calendar-planner-heading p{
    margin:0;
    opacity:.85;
}

.calendar-planner-badge{
    background:rgba(255,255,255,.18);
    padding:10px 18px;
    border-radius:999px;
    font-weight:600;
}

.calendar-planner-grid{
    display:grid;
    gap:18px;
    padding:28px;
}

.calendar-day-card{
    display:flex;
    gap:20px;
    align-items:flex-start;
    border:1px solid #edf2f7;
    border-radius:18px;
    padding:22px;
    transition:.25s;

    background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);

    position:relative;
    overflow:hidden;
}

.calendar-day-card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(37,99,235,.08);
}


.calendar-day-number{
    width:54px;
    height:54px;
    border-radius:16px;
    background:linear-gradient(135deg,#2563eb,#4f46e5);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:18px;
    flex-shrink:0;
}

.calendar-day-content{
    flex:1;
}

.calendar-day-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:12px;
}

.calendar-day-label{
    font-size:11px;
    color:#64748b;
    letter-spacing:1px;
    text-transform:uppercase;
}

.calendar-day-header h4{
    margin:3px 0 0;
    font-size:20px;
}

.calendar-day-status{
    background:#dcfce7;
    color:#15803d;
    padding:6px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}

.calendar-day-content p{
    color:#475569;
    line-height:1.7;
    margin:16px 0;
}

.calendar-day-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.calendar-day-type{
    color:#2563eb;
    font-weight:600;
}

.calendar-copy-btn{
    border:none;
    background:#2563eb;
    color:white;
    padding:10px 18px;
    border-radius:10px;
    cursor:pointer;
    font-weight:600;
    transition:.2s;
}

.calendar-copy-btn:hover{
    background:#1d4ed8;
}

/* ==========================================
   AI IMAGE STUDIO
========================================== */

.image-studio-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    margin-bottom:24px;
}

.image-studio-eyebrow{
    display:block;
    margin-bottom:7px;
    color:#6366f1;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.8px;
    text-transform:uppercase;
}

.image-studio-header h3{
    margin:0 0 7px;
    color:#0f172a;
    font-size:24px;
    line-height:1.2;
}

.image-studio-header p{
    margin:0;
    color:#64748b;
    line-height:1.6;
}

.image-studio-status{
    flex-shrink:0;
    padding:9px 14px;
    border:1px solid #ddd6fe;
    border-radius:999px;
    background:#f5f3ff;
    color:#6d28d9;
    font-size:13px;
    font-weight:700;
}

.image-asset-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    margin-bottom:22px;
}

.image-asset-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:16px;
    min-height:128px;
    padding:20px;
    overflow:hidden;
    border:1px solid #e2e8f0;
    border-radius:18px;
    background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
    cursor:pointer;
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}

.image-asset-card:hover{
    transform:translateY(-3px);
    border-color:#c7d2fe;
    box-shadow:0 14px 30px rgba(79,70,229,.09);
}

.image-asset-card input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.image-asset-card::before{
    content:"";
    position:absolute;
    inset:0;
    border:2px solid transparent;
    border-radius:18px;
    pointer-events:none;
    transition:border-color .22s ease;
}

.image-asset-card:has(input:checked){
    border-color:#818cf8;
    background:linear-gradient(145deg,#ffffff 0%,#f5f3ff 100%);
    box-shadow:0 12px 28px rgba(79,70,229,.1);
}

.image-asset-card:has(input:checked)::before{
    border-color:rgba(99,102,241,.22);
}

.image-asset-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:54px;
    height:54px;
    flex-shrink:0;
    border:1px solid #e0e7ff;
    border-radius:16px;
    background:#eef2ff;
    font-size:25px;
}

.image-asset-info{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.image-asset-info strong{
    color:#0f172a;
    font-size:16px;
}

.image-asset-info > span{
    color:#4f46e5;
    font-size:13px;
    font-weight:700;
}

.image-asset-info small{
    color:#64748b;
    font-size:13px;
}

.image-asset-check{
    position:absolute;
    top:14px;
    right:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:25px;
    height:25px;
    border:1px solid #cbd5e1;
    border-radius:50%;
    background:#fff;
    color:transparent;
    font-size:13px;
    font-weight:900;
    transition:.2s ease;
}

.image-asset-card:has(input:checked) .image-asset-check{
    border-color:#6366f1;
    background:#6366f1;
    color:#fff;
    box-shadow:0 5px 12px rgba(99,102,241,.25);
}

@media (max-width:760px){
    .image-studio-header{
        flex-direction:column;
    }

    .image-asset-grid{
        grid-template-columns:1fr;
    }

    .image-studio-status{
        align-self:flex-start;
    }
}

/* ==========================================
   GENERATED IMAGE CARDS
========================================== */

.generated-image-card{
    overflow:hidden;
    border:1px solid #e2e8f0;
    border-radius:20px;
    background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
    box-shadow:0 10px 26px rgba(15,23,42,.05);
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.generated-image-card:hover{
    transform:translateY(-3px);
    border-color:#c7d2fe;
    box-shadow:0 16px 36px rgba(79,70,229,.09);
}

.generated-image-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:18px 20px;
    border-bottom:1px solid #edf2f7;
    background:linear-gradient(135deg,#ffffff 0%,#f8f7ff 100%);
}

.generated-image-card-header .queue-item-name{
    display:flex;
    align-items:center;
    gap:10px;
}

.generated-image-card-header strong{
    color:#0f172a;
    font-size:15px;
    font-weight:800;
}

.generated-image-card-header .queue-status-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:10px;
    background:#eef2ff;
    font-size:15px;
}

.generated-image-card .queue-status-badge{
    padding:7px 12px;
    border-radius:999px;
    background:#dcfce7;
    color:#15803d;
    font-size:12px;
    font-weight:800;
}

.generated-image-card .queue-item-message{
    margin:0;
    padding:18px 20px 22px;
    color:#64748b;
    line-height:1.6;
}

/* ==========================================
   COMPLETED GENERATED ASSETS
========================================== */

.generated-asset-title{
    display:flex;
    align-items:center;
    gap:12px;
}

.generated-asset-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    flex-shrink:0;
    border:1px solid #e0e7ff;
    border-radius:13px;
    background:#eef2ff;
    font-size:19px;
}

.generated-asset-label{
    display:block;
    margin-bottom:3px;
    color:#6366f1;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.3px;
}

.generated-asset-title strong{
    display:block;
    color:#0f172a;
    font-size:16px;
}

.queue-status-badge.is-complete{
    background:#dcfce7;
    color:#15803d;
}

.queue-status-badge.is-error{
    background:#fee2e2;
    color:#b91c1c;
}

.generated-image-preview{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:340px;
    padding:22px;
    overflow:hidden;
    background:#f4f7fc;
    cursor:pointer;
}

.generated-image-preview .generated-image{
    display:block;
    max-width:100%;
    max-height:620px;
    border-radius:14px;
    box-shadow:0 18px 40px rgba(15,23,42,.14);
    transition:transform .3s ease;
}

.generated-image-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(15,23,42,.4);
    opacity:0;
    transition:opacity .25s ease;
}

.generated-image-overlay span{
    padding:11px 16px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:999px;
    background:rgba(15,23,42,.72);
    color:#fff;
    font-size:13px;
    font-weight:700;
    backdrop-filter:blur(8px);
}

.generated-image-preview:hover .generated-image{
    transform:scale(1.015);
}

.generated-image-preview:hover .generated-image-overlay{
    opacity:1;
}

.generated-image-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding:18px 20px;
    border-top:1px solid #edf2f7;
    background:#fff;
}

.generated-image-meta{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.generated-image-meta strong{
    color:#0f172a;
    font-size:14px;
}

.generated-image-meta span{
    color:#64748b;
    font-size:12px;
}

.generated-image-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:9px;
}

.generated-image-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 15px;
    border:1px solid #dbe3ef;
    border-radius:11px;
    background:#fff;
    color:#334155;
    font:inherit;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    cursor:pointer;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.generated-image-action:hover{
    transform:translateY(-2px);
    border-color:#c7d2fe;
    background:#f8f7ff;
    color:#4f46e5;
    box-shadow:0 8px 18px rgba(79,70,229,.08);
}

.generated-image-download{
    border-color:#4f46e5;
    background:#4f46e5;
    color:#fff;
}

.generated-image-download:hover{
    border-color:#4338ca;
    background:#4338ca;
    color:#fff;
    box-shadow:0 10px 20px rgba(79,70,229,.2);
}

.generated-image-error{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:28px 22px;
    background:#fff7f7;
}

.generated-image-error-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    flex-shrink:0;
    border-radius:50%;
    background:#fee2e2;
    color:#b91c1c;
    font-weight:900;
}

.generated-image-error strong{
    display:block;
    margin-bottom:5px;
    color:#991b1b;
}

.generated-image-error p{
    margin:0;
    color:#7f1d1d;
    line-height:1.6;
}

.generated-image-retry{
    border-color:#fecaca;
    color:#b91c1c;
}

@media (max-width:760px){
    .generated-image-preview{
        min-height:240px;
        padding:14px;
    }

    .generated-image-footer{
        align-items:flex-start;
        flex-direction:column;
    }

    .generated-image-actions{
        width:100%;
        justify-content:flex-start;
    }
}

/* ==========================================
   GENERATED ASSETS HEADER
========================================== */

.image-queue-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin:22px 0 18px;
    padding:22px 24px;
    border:1px solid #e0e7ff;
    border-radius:20px;
    background:linear-gradient(135deg,#ffffff 0%,#f7f5ff 100%);
    box-shadow:0 10px 28px rgba(79,70,229,.06);
}

.image-queue-heading{
    display:flex;
    align-items:center;
    gap:15px;
}

.image-queue-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:50px;
    height:50px;
    flex-shrink:0;
    border:1px solid #ddd6fe;
    border-radius:15px;
    background:#ede9fe;
    font-size:23px;
}

.image-queue-eyebrow{
    display:block;
    margin-bottom:4px;
    color:#6366f1;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.6px;
    text-transform:uppercase;
}

.image-queue-header h3{
    margin:0 0 4px;
    color:#0f172a;
    font-size:20px;
    line-height:1.2;
}

.image-queue-header p{
    margin:0;
    color:#64748b;
    font-size:13px;
    line-height:1.5;
}

.image-queue-total{
    flex-shrink:0;
    padding:9px 14px;
    border:1px solid #ddd6fe;
    border-radius:999px;
    background:#fff;
    color:#5b21b6;
    font-size:13px;
    font-weight:800;
}

@media (max-width:640px){
    .image-queue-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .image-queue-total{
        align-self:flex-start;
    }
}

/* ==========================================
   AI IMAGE GENERATION PROGRESS
========================================== */

.image-progress{
    margin-top:18px;
    padding:22px 24px;
    border:1px solid #e0e7ff;
    border-radius:20px;
    background:linear-gradient(135deg,#ffffff 0%,#f8f7ff 100%);
    box-shadow:0 12px 30px rgba(79,70,229,.07);
}

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

.image-progress-heading{
    display:flex;
    align-items:center;
    gap:13px;
}

.image-progress-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    flex-shrink:0;
    border:1px solid #ddd6fe;
    border-radius:14px;
    background:#ede9fe;
    font-size:21px;
    animation:imageProgressPulse 1.8s ease-in-out infinite;
}

.image-progress-eyebrow{
    display:block;
    margin-bottom:3px;
    color:#6366f1;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.image-progress-title{
    color:#0f172a;
    font-size:17px;
    font-weight:800;
}

.image-progress-status{
    flex-shrink:0;
    padding:8px 13px;
    border:1px solid #ddd6fe;
    border-radius:999px;
    background:#f5f3ff;
    color:#6d28d9;
    font-size:12px;
    font-weight:800;
}

.image-progress .progress-bar{
    height:10px;
    overflow:hidden;
    border-radius:999px;
    background:#e7eaf0;
}

.image-progress #progressBarFill{
    height:100%;
    width:0;
    border-radius:inherit;
    background:linear-gradient(90deg,#4f46e5,#7c3aed);
    transition:width .45s ease;
}

.image-progress-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:11px;
}

.image-progress #progressText{
    color:#475569;
    font-size:13px;
    font-weight:600;
}

.image-progress-estimate{
    color:#94a3b8;
    font-size:12px;
}

@keyframes imageProgressPulse{
    0%,
    100%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(99,102,241,.12);
    }

    50%{
        transform:scale(1.05);
        box-shadow:0 0 0 8px rgba(99,102,241,0);
    }
}

@media (max-width:640px){
    .image-progress{
        padding:18px;
    }

    .image-progress-header{
        align-items:flex-start;
    }

    .image-progress-footer{
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }
}

/* ==========================================
   PRIMARY BUTTON INTERACTIONS
========================================== */

.btn,
#generateImagesBtn,
#saveCampaignBtn,
#copyAllBtn,
.generate-button{
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease,
        background .18s ease;
}

.btn:hover,
#generateImagesBtn:hover,
#saveCampaignBtn:hover,
#copyAllBtn:hover,
.generate-button:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(79,70,229,.22);
    filter:brightness(1.04);
}

.btn:active,
#generateImagesBtn:active,
#saveCampaignBtn:active,
#copyAllBtn:active,
.generate-button:active{
    transform:translateY(0) scale(.98);
    box-shadow:0 6px 14px rgba(79,70,229,.16);
}

.btn:focus-visible,
#generateImagesBtn:focus-visible,
#saveCampaignBtn:focus-visible,
#copyAllBtn:focus-visible,
.generate-button:focus-visible{
    outline:3px solid rgba(99,102,241,.25);
    outline-offset:3px;
}

.btn:disabled,
#generateImagesBtn:disabled,
#saveCampaignBtn:disabled,
#copyAllBtn:disabled,
.generate-button:disabled{
    transform:none;
    box-shadow:none;
    filter:none;
    cursor:not-allowed;
}

/* ==========================================
   RESULT CARD INTERACTIONS
========================================== */

.result-card{
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.result-card:hover{
    transform:translateY(-3px);
    border-color:#c7d2fe;
    box-shadow:
        0 18px 36px rgba(15,23,42,.08),
        0 8px 18px rgba(79,70,229,.08);
}

.result-card:active{
    transform:translateY(-1px);
}

/* ==========================================
   RESULT CARD INTERACTIONS
========================================== */

.result-card{
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.result-card:hover{
    transform:translateY(-3px);
    border-color:#c7d2fe;
    box-shadow:
        0 18px 36px rgba(15,23,42,.08),
        0 8px 18px rgba(79,70,229,.08);
}

.result-card:active{
    transform:translateY(-1px);
}

/* ==========================================
   CAMPAIGN LIBRARY
========================================== */

.campaign-library-section{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.library-hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    padding:30px;
    border:1px solid #e0e7ff;
    border-radius:24px;
    background:linear-gradient(135deg,#ffffff 0%,#f7f5ff 100%);
    box-shadow:0 14px 34px rgba(79,70,229,.07);
}

.library-eyebrow{
    display:block;
    margin-bottom:8px;
    color:#6366f1;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.7px;
    text-transform:uppercase;
}

.library-hero h1{
    margin:0 0 10px;
    color:#0f172a;
    font-size:32px;
    line-height:1.15;
}

.library-hero p{
    max-width:620px;
    margin:0;
    color:#64748b;
    font-size:15px;
    line-height:1.7;
}

.library-hero-right{
    display:grid;
    grid-template-columns:repeat(2,minmax(130px,1fr));
    gap:14px;
    flex-shrink:0;
}

.library-stat{
    min-width:140px;
    padding:18px;
    border:1px solid #e0e7ff;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 20px rgba(15,23,42,.04);
}

.library-stat span{
    display:block;
    margin-bottom:6px;
    color:#64748b;
    font-size:12px;
    font-weight:700;
}

.library-stat strong{
    color:#0f172a;
    font-size:20px;
}

.library-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.library-search{
    position:relative;
    flex:1;
}

.library-search-icon{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    color:#6366f1;
    font-size:20px;
    pointer-events:none;
}

.library-search input{
    width:100%;
    min-height:52px;
    padding:0 18px 0 48px;
    border:1px solid #dbe3ef;
    border-radius:16px;
    background:#fff;
    color:#0f172a;
    font:inherit;
    box-shadow:0 8px 20px rgba(15,23,42,.04);
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.library-search input:focus{
    outline:none;
    border-color:#818cf8;
    box-shadow:
        0 0 0 4px rgba(99,102,241,.12),
        0 10px 24px rgba(79,70,229,.07);
}

.library-create-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:0 20px;
    border-radius:16px;
    background:linear-gradient(135deg,#4f46e5,#6d28d9);
    color:#fff;
    font-size:14px;
    font-weight:800;
    text-decoration:none;
    box-shadow:0 12px 24px rgba(79,70,229,.2);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.library-create-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 30px rgba(79,70,229,.26);
    filter:brightness(1.04);
}

.campaign-library-grid{
    display:grid;
    gap:16px;
}

.campaign-empty-state{
    display:flex;
    align-items:center;
    flex-direction:column;
    justify-content:center;
    min-height:320px;
    padding:40px 24px;
    border:1px dashed #c7d2fe;
    border-radius:22px;
    background:linear-gradient(180deg,#ffffff 0%,#faf9ff 100%);
    text-align:center;
}

.campaign-empty-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:66px;
    height:66px;
    margin-bottom:16px;
    border-radius:20px;
    background:#ede9fe;
    font-size:30px;
}

.campaign-empty-state h3{
    margin:0 0 8px;
    color:#0f172a;
    font-size:22px;
}

.campaign-empty-state p{
    max-width:430px;
    margin:0 0 20px;
    color:#64748b;
    line-height:1.6;
}

@media (max-width:900px){
    .library-hero{
        align-items:flex-start;
        flex-direction:column;
    }

    .library-hero-right{
        width:100%;
    }
}

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

    .library-create-btn{
        width:100%;
    }

    .library-hero-right{
        grid-template-columns:1fr;
    }
}

/* ==========================
   Saved Campaign Library
========================== */

.campaign-library-card{
    background:#fff;
    border:1px solid #e6ebff;
    border-radius:24px;
    padding:28px;
    margin-bottom:24px;
    box-shadow:0 12px 30px rgba(37,99,235,.06);
    transition:.25s;
}

.campaign-library-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 40px rgba(37,99,235,.12);
}

.campaign-card-main{
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    gap:22px;
    align-items:start;
}

.campaign-card-icon{
    width:64px;
    height:64px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    background:linear-gradient(180deg,#eef2ff,#e4e8ff);
    flex-shrink:0;
}

.campaign-card-content{
    flex:1;
}

.campaign-card-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
}

.campaign-card-label{
    display:block;
    font-size:12px;
    font-weight:700;
    letter-spacing:.18em;
    color:#5b5cf0;
    margin-bottom:6px;
}

.campaign-card-heading h3{
    margin:0;
    font-size:28px;
    font-weight:700;
}

.campaign-card-status{
    background:#dff8e9;
    color:#14824d;
    padding:8px 16px;
    border-radius:999px;
    font-weight:700;
}

.campaign-card-meta{
    display:grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap:24px;
    margin-top:22px;
    align-items:start;
}

.campaign-meta-item{
    display:flex;
    flex-direction:column;
}

.campaign-meta-item strong{
    font-size:15px;
}

.campaign-meta-item{
    display:flex;
    align-items:center;
    gap:12px;

    background:#f8faff;
    border:1px solid #edf2ff;
    border-radius:14px;

    padding:14px 18px;
    min-width:170px;

    transition:.25s;
}

.campaign-meta-item:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(79,70,229,.08);
}

.campaign-meta-icon{
    width:44px;
    height:44px;

    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(135deg,#eef2ff,#ffffff);

    font-size:20px;

    flex-shrink:0;
}

.campaign-card-actions{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:12px;

    margin-top:22px;
    padding-left:86px;

    align-items:center;
}

.campaign-action-btn{
    border:none;
    border-radius:14px;
    padding:12px 22px;
    background:#f5f7ff;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
    .campaign-action-btn{
    border:none;
    border-radius:14px;
    padding:12px 22px;
    background:#f5f7ff;
    font-weight:600;
    cursor:pointer;
    transition:.2s;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:130px;
    height:46px;
}
}

.campaign-action-btn:hover{
    transform:translateY(-2px);
}

.campaign-open-btn{
    background:#5b5cf0;
    color:#fff;
}

.campaign-delete-btn{
    background:#fff1f1;
    color:#d33;
}

/* ==========================================
   CAMPAIGN CARD MICRO-INTERACTIONS
========================================== */

.campaign-library-card{
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.campaign-library-card:hover{
    transform:translateY(-4px);
    border-color:#c7d2fe;
    box-shadow:
        0 20px 42px rgba(15,23,42,.08),
        0 10px 24px rgba(79,70,229,.08);
}

.campaign-card-icon{
    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.campaign-library-card:hover .campaign-card-icon{
    transform:translateY(-2px) rotate(-3deg);
    box-shadow:0 10px 22px rgba(79,70,229,.14);
}

.campaign-action-btn{
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.campaign-action-btn:hover{
    transform:translateY(-2px);
    background:#eef2ff;
    color:#4338ca;
    box-shadow:0 8px 18px rgba(79,70,229,.09);
}

.campaign-action-btn:active{
    transform:translateY(0) scale(.98);
}

.campaign-open-btn:hover{
    background:#4338ca;
    color:#fff;
    box-shadow:0 11px 22px rgba(79,70,229,.22);
}

.campaign-delete-btn:hover{
    background:#fee2e2;
    color:#b91c1c;
    box-shadow:0 8px 18px rgba(185,28,28,.08);
}

/* ==========================================
   SIMPLE CAMPAIGN LIBRARY CARD
========================================== */

.campaign-library-card-simple{
    padding:26px;
}

.campaign-simple-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.campaign-simple-title-group{
    display:flex;
    align-items:center;
    gap:16px;
}

.campaign-simple-title-group h3{
    margin:4px 0 0;
    color:#0f172a;
    font-size:25px;
    line-height:1.2;
}

.campaign-simple-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
}

.campaign-simple-meta span{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:0 13px;
    border:1px solid #e2e8f0;
    border-radius:11px;
    background:#f8fafc;
    color:#475569;
    font-size:13px;
    font-weight:600;
}

.campaign-library-card-simple .campaign-card-actions{
    display:flex;
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
    padding-left:0;
}

.campaign-library-card-simple .campaign-action-btn{
    width:auto;
    min-width:0;
    height:42px;
    padding:0 17px;
}

.campaign-library-card-simple .campaign-card-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 13px;
    background:#dcfce7;
    color:#15803d;
    border:1px solid #bbf7d0;
    font-size:12px;
    font-weight:800;
}

@media (max-width:700px){
    .campaign-simple-header{
        flex-direction:column;
    }

    .campaign-simple-meta{
        align-items:stretch;
        flex-direction:column;
    }

    .campaign-simple-meta span{
        width:100%;
    }

    .campaign-library-card-simple .campaign-card-actions{
        align-items:stretch;
        flex-direction:column;
    }

    .campaign-library-card-simple .campaign-action-btn{
        width:100%;
    }
}

/* ==========================================
   CAMPAIGN LIBRARY FINAL POLISH
========================================== */

.campaign-library-card-simple .campaign-card-icon{
    width:60px;
    height:60px;
    border:1px solid #ddd6fe;
    border-radius:18px;
    background:linear-gradient(135deg,#ede9fe 0%,#f5f3ff 100%);
    font-size:0;
    box-shadow:0 10px 24px rgba(79,70,229,.08);
}

.campaign-library-card-simple .campaign-card-icon::before{
    content:"📁";
    font-size:27px;
    filter:saturate(.75) hue-rotate(215deg);
}

.campaign-library-card-simple .campaign-simple-title-group h3{
    font-size:28px;
    font-weight:800;
    letter-spacing:-.02em;
}

.campaign-library-card-simple{
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.campaign-library-card-simple:hover{
    transform:translateY(-4px);
    border-color:#c7d2fe;
    box-shadow:
        0 22px 44px rgba(15,23,42,.08),
        0 10px 24px rgba(79,70,229,.08);
}

.campaign-library-card-simple:hover .campaign-card-icon{
    transform:translateY(-2px) rotate(-3deg);
    box-shadow:0 14px 28px rgba(79,70,229,.14);
}

.font-card{
    align-self:stretch;
}

.font-card label{
    display:block;
    margin-bottom:8px;
    color:#334155;
    font-size:13px;
    font-weight:700;
}

.font-card select{
    width:100%;
    min-height:50px;
    padding:0 15px;
    border:1px solid #dbe3ef;
    border-radius:13px;
    background:#f8fafc;
    color:#0f172a;
    font:inherit;
    cursor:pointer;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.font-card select:focus{
    outline:none;
    border-color:#818cf8;
    background:#fff;
    box-shadow:0 0 0 4px rgba(99,102,241,.12);
}

/* ==========================================
   CONTENT CALENDAR PAGE
========================================== */

.page-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.page-header h1{
    margin:8px 0 10px;
    color:#0f172a;
    font-size:34px;
    line-height:1.15;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-top:20px;
}

.stat-card{
    padding:16px 18px;
    border:1px solid #e0e7ff;
    border-radius:20px;
    background:linear-gradient(135deg,#ffffff 0%,#faf9ff 100%);
    box-shadow:0 12px 28px rgba(79,70,229,.06);
}

.stat-card span{
    display:block;
    margin-bottom:8px;
    color:#64748b;
    font-size:13px;
    font-weight:700;
}

.stat-card strong{
    color:#0f172a;
    font-size:24px;
    line-height:1;
}

.calendar-workspace{
    margin-top:20px;
}

.calendar-panel{
    overflow:hidden;
    border:1px solid #e0e7ff;
    border-radius:24px;
    background:#fff;
    box-shadow:
        0 18px 42px rgba(15,23,42,.07),
        0 8px 22px rgba(79,70,229,.05);
}

.calendar-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    padding:24px 28px;
}
.calendar-month-controls{
    display:flex;
    align-items:center;
    gap:16px;
}

.calendar-month-controls h2{
    margin:4px 0 0;
    color:#0f172a;
    font-size:25px;
}

.calendar-nav-btn,
.calendar-today-btn,
.calendar-view-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    border:1px solid #dbe3ef;
    border-radius:12px;
    background:#fff;
    color:#334155;
    font:inherit;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.calendar-nav-btn{
    width:40px;
    padding:0;
    font-size:18px;
}

.calendar-today-btn,
.calendar-view-btn{
    padding:0 15px;
}

.calendar-nav-btn:hover,
.calendar-today-btn:hover,
.calendar-view-btn:hover{
    transform:translateY(-2px);
    border-color:#c7d2fe;
    background:#f5f3ff;
    color:#4f46e5;
    box-shadow:0 8px 18px rgba(79,70,229,.09);
}

.calendar-view-actions{
    display:flex;
    align-items:center;
    gap:10px;
}
.calendar-view-btn.active{
    border-color:#4f46e5;
    background:linear-gradient(135deg,#4f46e5,#6d5dfc);
    color:#fff;
    box-shadow:0 10px 22px rgba(79,70,229,.2);
}

.calendar-weekdays{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    border-bottom:1px solid #e8edf5;
    background:#f8fafc;
}

.calendar-weekdays span{
    padding:13px 10px;
    color:#64748b;
    font-size:12px;
    font-weight:800;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:.7px;
}

.calendar-month-grid{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
}

.calendar-date{
    position:relative;
    min-height:128px;
    padding:12px;
    border-right:1px solid #edf1f7;
    border-bottom:1px solid #edf1f7;
    background:#fff;
    transition:
        background .18s ease,
        box-shadow .18s ease;
}

.calendar-date:nth-child(7n){
    border-right:none;
}

.calendar-date:hover{
    z-index:2;
    background:#fafaff;
    box-shadow:inset 0 0 0 2px rgba(99,102,241,.12);
}

.calendar-date-number{
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    margin-bottom:9px;
    border-radius:10px;
    color:#334155;
    font-size:13px;
    font-weight:800;
}

.calendar-date.today{
    background:linear-gradient(180deg,#faf9ff 0%,#ffffff 100%);
}

.calendar-date.today .calendar-date-number{
    background:linear-gradient(135deg,#4f46e5,#6d5dfc);
    color:#fff;
    box-shadow:0 7px 16px rgba(79,70,229,.22);
}

.calendar-date.muted-date{
    background:#fafafa;
}

.calendar-date.muted-date .calendar-date-number{
    color:#b0bac9;
}

.calendar-event{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:2px 7px;
    padding:8px 9px;
    border:1px solid transparent;
    border-radius:11px;

    cursor:grab;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        opacity .18s ease;
}

.calendar-event:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 16px rgba(15,23,42,.08);
}

.calendar-event.dragging{
    opacity:.45;
    cursor:grabbing;
}
.calendar-event span{
    grid-row:1 / 3;
    align-self:start;
    font-size:14px;
}

.calendar-event strong{
    overflow:hidden;
    color:#1e293b;
    font-size:11px;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.calendar-event small{
    color:#64748b;
    font-size:10px;
    font-weight:700;
}

.instagram-event{
    border-color:#c4b5fd;
    background:linear-gradient(135deg,#f5f3ff,#ede9fe);
}

.facebook-event{
    border-color:#93c5fd;
    background:linear-gradient(135deg,#eff6ff,#dbeafe);
}

.tiktok-event{
    border-color:#cbd5e1;
    background:linear-gradient(135deg,#f8fafc,#e2e8f0);
}

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

    .calendar-panel{
        overflow-x:auto;
    }

    .calendar-toolbar,
    .calendar-weekdays,
    .calendar-month-grid{
        min-width:900px;
    }
}

@media (max-width:700px){
    .page-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .page-header .btn{
        width:100%;
    }

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

.calendar-date{
    cursor:pointer;
    transition:
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.calendar-date:hover{
    z-index:2;
    background:#faf9ff;
    box-shadow:inset 0 0 0 2px rgba(99,102,241,.18);
    transform:translateY(-2px);
}
.calendar-date.drag-over{
    background:#eef2ff;
    outline:2px dashed #6366f1;
    outline-offset:-4px;
}

.calendar-date.muted-date{
    cursor:default;
}

.calendar-date.muted-date:hover{
    background:#fafafa;
    box-shadow:none;
    transform:none;
}

.calendar-month-grid.week-view .calendar-date{
    min-height:260px;
}

/* Schedule Content Modal */

.schedule-modal{
    position:fixed;
    inset:0;
    z-index:2000;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:24px;
}

.schedule-modal.hidden{
    display:none;
}

.schedule-modal-backdrop{
    position:absolute;
    inset:0;

    background:rgba(15, 23, 42, 0.55);
    backdrop-filter:blur(5px);
}

.schedule-modal-card{
    position:relative;
    z-index:1;

    width:min(100%, 620px);
    max-height:calc(100vh - 48px);
    overflow-y:auto;

    padding:28px;

    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:24px;

    box-shadow:
        0 24px 70px rgba(15, 23, 42, 0.22);
}

.schedule-modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;

    margin-bottom:26px;
}

.schedule-modal-header h2{
    margin:5px 0 6px;

    font-size:27px;
    line-height:1.15;
    color:#0f172a;
}

.schedule-modal-header p{
    margin:0;

    color:#64748b;
    font-size:14px;
    line-height:1.6;
}

.schedule-modal-close{
    flex:0 0 auto;

    width:38px;
    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:12px;

    color:#475569;
    font-size:25px;
    line-height:1;

    cursor:pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.schedule-modal-close:hover{
    background:#f1f5f9;
    border-color:#cbd5e1;
    color:#0f172a;
    transform:translateY(-1px);
}

.schedule-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.schedule-field{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.schedule-field-full{
    margin-top:18px;
}

.schedule-field label{
    font-size:13px;
    font-weight:700;
    color:#334155;
}

.schedule-field input,
.schedule-field select{
    width:100%;
    min-height:46px;

    padding:11px 13px;

    background:#ffffff;
    border:1px solid #dbe3ee;
    border-radius:12px;

    color:#0f172a;
    font:inherit;

    outline:none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.schedule-field input::placeholder{
    color:#94a3b8;
}

.schedule-field input:focus,
.schedule-field select:focus{
    border-color:#7c3aed;

    box-shadow:
        0 0 0 4px rgba(124, 58, 237, 0.12);
}

.schedule-modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;

    margin-top:28px;
    padding-top:20px;

    border-top:1px solid #edf2f7;
}

body.schedule-modal-open{
    overflow:hidden;
}

@media (max-width:650px){
    .schedule-modal{
        align-items:flex-end;
        padding:12px;
    }

    .schedule-modal-card{
        width:100%;
        max-height:90vh;

        padding:22px;

        border-radius:22px;
    }

    .schedule-form-grid{
        grid-template-columns:1fr;
    }

    .schedule-modal-actions{
        flex-direction:column-reverse;
    }

    .schedule-modal-actions .btn{
        width:100%;
    }
}

/* Calendar Event Details */

.event-details-card{
    width:min(100%, 660px);
}

.event-platform-badge{
    display:inline-flex;
    align-items:center;

    padding:6px 10px;

    background:#f3e8ff;
    border:1px solid #e9d5ff;
    border-radius:999px;

    color:#7e22ce;
    font-size:11px;
    font-weight:800;
    letter-spacing:0.06em;
    text-transform:uppercase;
}

.event-details-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;

    margin-bottom:18px;
}

.event-details-meta-item{
    display:flex;
    flex-direction:column;
    gap:6px;

    padding:15px;

    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:14px;
}

.event-details-meta-label{
    color:#64748b;
    font-size:11px;
    font-weight:800;
    letter-spacing:0.05em;
    text-transform:uppercase;
}

.event-details-meta-item strong{
    color:#0f172a;
    font-size:14px;
}

.event-details-content{
    padding:18px;

    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:16px;
}

.event-details-content p{
    margin:10px 0 0;

    color:#334155;
    font-size:14px;
    line-height:1.75;
    white-space:pre-wrap;
}

.event-details-right-actions{
    display:flex;
    gap:12px;
}

.btn.danger{
    background:#ffffff;
    border:1px solid #fecaca;
    color:#dc2626;
}

.btn.danger:hover{
    background:#fef2f2;
    border-color:#fca5a5;
}

.calendar-event{
    cursor:pointer;
}

.calendar-event:hover{
    transform:translateY(-1px);
    filter:brightness(0.98);
}

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

    .event-details-right-actions{
        width:100%;
        flex-direction:column;
    }

    .event-details-right-actions .btn,
    .btn.danger{
        width:100%;
    }
}
/* Delete Event Confirmation */

.delete-event-card{
    width:min(100%, 430px);
    text-align:center;
}

.delete-event-icon{
    width:58px;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 auto 18px;

    background:#fef2f2;
    border:1px solid #fecaca;
    border-radius:18px;

    font-size:25px;
}

.delete-event-card h2{
    margin:0 0 10px;

    color:#0f172a;
    font-size:24px;
}

.delete-event-card > p{
    margin:0;

    color:#64748b;
    font-size:14px;
    line-height:1.7;
}

.delete-event-card .schedule-modal-actions{
    justify-content:center;
}

.btn.danger-filled{
    background:#dc2626;
    border:1px solid #dc2626;
    color:#ffffff;
}

.btn.danger-filled:hover{
    background:#b91c1c;
    border-color:#b91c1c;
}

/* =========================================================
   SOCIAL CONNECTIONS PAGE
========================================================= */

.social-connections-hero{
    margin-bottom:24px;
    padding:32px;
    border:1px solid #dfe3f0;
    border-radius:24px;
    background:
        radial-gradient(
            circle at top right,
            rgba(99, 102, 241, .16),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f8ff 100%
        );
    overflow:hidden;
}

.social-connections-hero-content{
    max-width:780px;
}

.coming-soon-badge{
    display:inline-flex;
    align-items:center;
    padding:7px 12px;
    border-radius:999px;
    background:#eef2ff;
    color:#4f46e5;
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.social-connections-hero h2{
    margin:18px 0 10px;
    max-width:720px;
    color:#172033;
    font-size:34px;
    line-height:1.15;
}

.social-connections-hero p{
    margin:0;
    max-width:700px;
    color:#687086;
    font-size:16px;
    line-height:1.7;
}

.social-workflow{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:26px;
}

.workflow-step{
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 14px;
    border:1px solid #e3e6f2;
    border-radius:14px;
    background:#ffffff;
    color:#273044;
    font-size:14px;
    font-weight:700;
}

.workflow-step span{
    display:grid;
    width:26px;
    height:26px;
    place-items:center;
    border-radius:50%;
    background:#eef2ff;
    color:#4f46e5;
    font-size:12px;
}

.workflow-arrow{
    color:#9aa2b5;
    font-size:18px;
    font-weight:700;
}

.social-platforms-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:20px;
    margin-bottom:24px;
}

.social-platform-card{
    display:flex;
    flex-direction:column;
    min-height:285px;
    padding:24px;
    border:1px solid #e1e5ef;
    border-radius:22px;
    background:#ffffff;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.social-platform-card:hover{
    transform:translateY(-3px);
    border-color:#cfd5e5;
    box-shadow:0 14px 35px rgba(31, 41, 55, .08);
}

.social-platform-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.social-platform-icon{
    display:grid;
    width:52px;
    height:52px;
    place-items:center;
    border-radius:16px;
    font-size:24px;
    font-weight:800;
}

.facebook-icon{
    background:#eef4ff;
    color:#1877f2;
}

.instagram-icon{
    background:#fff0f6;
    color:#d62976;
}

.linkedin-icon{
    background:#eef7ff;
    color:#0a66c2;
    font-size:18px;
}

.tiktok-icon{
    background:#f2f3f6;
    color:#111827;
}

.social-status-badge{
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    background:#f4f5f8;
    color:#747d91;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.social-platform-card h3{
    margin:22px 0 8px;
    color:#1d2638;
    font-size:21px;
}

.social-platform-card p{
    margin:0 0 24px;
    color:#6b7280;
    font-size:14px;
    line-height:1.65;
}

.social-connect-button{
    width:100%;
    margin-top:auto;
    padding:12px 16px;
    border:1px solid #dfe3ec;
    border-radius:12px;
    background:#f6f7fa;
    color:#959cad;
    font-size:14px;
    font-weight:700;
    cursor:not-allowed;
}

.social-coming-soon-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:24px;
    border:1px solid #dfe3f0;
    border-radius:22px;
    background:#ffffff;
}

.social-coming-soon-card > div{
    display:flex;
    align-items:center;
    gap:16px;
}

.social-coming-soon-icon{
    display:grid;
    flex:0 0 auto;
    width:50px;
    height:50px;
    place-items:center;
    border-radius:15px;
    background:#eef2ff;
    font-size:23px;
}

.social-coming-soon-card h2{
    margin:0 0 6px;
    color:#1f2937;
    font-size:18px;
}

.social-coming-soon-card p{
    margin:0;
    max-width:720px;
    color:#6b7280;
    font-size:14px;
    line-height:1.6;
}

.social-coming-soon-card .primary-button:disabled{
    opacity:.65;
    cursor:not-allowed;
}

@media (max-width:900px){

    .social-platforms-grid{
        grid-template-columns:1fr;
    }

    .social-coming-soon-card{
        align-items:flex-start;
        flex-direction:column;
    }
}

@media (max-width:640px){

    .social-connections-hero{
        padding:22px;
    }

    .social-connections-hero h2{
        font-size:27px;
    }

    .social-workflow{
        align-items:stretch;
        flex-direction:column;
    }

    .workflow-step{
        width:100%;
    }

    .workflow-arrow{
        display:none;
    }

    .social-platform-card{
        min-height:unset;
        padding:20px;
    }
}

.social-connections-page{
    width:100%;
    overflow:hidden;
}

/* =========================================================
   SETTINGS PAGE
========================================================= */

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

.settings-card{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    align-items:center;
    gap:18px;
    min-height:150px;
    padding:24px;
    border:1px solid #e1e5ef;
    border-radius:22px;
    background:#ffffff;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.settings-card:hover{
    transform:translateY(-3px);
    border-color:#cfd5e5;
    box-shadow:0 14px 35px rgba(31, 41, 55, .08);
}

.settings-card-icon{
    display:grid;
    width:52px;
    height:52px;
    place-items:center;
    border-radius:16px;
    background:#eef2ff;
    font-size:23px;
}

.settings-card-content{
    min-width:0;
}

.settings-card-label{
    display:block;
    margin-bottom:6px;
    color:#6366f1;
    font-size:11px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.settings-card h2{
    margin:0 0 7px;
    color:#1d2638;
    font-size:20px;
}

.settings-card p{
    margin:0;
    color:#6b7280;
    font-size:14px;
    line-height:1.6;
}

.settings-card-button,
.settings-card-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:104px;
    padding:11px 15px;
    border:1px solid #d8ddeb;
    border-radius:12px;
    background:#ffffff;
    color:#4f46e5;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.settings-card-button:hover:not(:disabled),
.settings-card-link:hover{
    transform:translateY(-1px);
    border-color:#b9c1d5;
    background:#f8f9ff;
}

.settings-card-button:disabled{
    background:#f5f6f9;
    color:#9aa2b5;
    cursor:not-allowed;
}

.danger-settings-card{
    border-color:#f1d8dc;
}

.danger-settings-card .settings-card-icon{
    background:#fff1f2;
}

.danger-settings-card .settings-card-label{
    color:#e11d48;
}

.settings-card-button.danger{
    border-color:#fecdd3;
    background:#fff1f2;
    color:#be123c;
}

.settings-card-button.danger:hover{
    border-color:#fda4af;
    background:#ffe4e6;
}

@media (max-width:1000px){

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

@media (max-width:640px){

    .settings-card{
        grid-template-columns:auto minmax(0, 1fr);
        align-items:start;
        padding:20px;
    }

    .settings-card-button,
    .settings-card-link{
        grid-column:1 / -1;
        width:100%;
    }
}

/* ==================================================
   DASHBOARD THEME COMPLETION
================================================== */

.topbar p,
.profile-label,
.generate-ready-list li {
    color: var(--text-secondary);
}

.btn {
    background: var(--primary);
}

.btn.secondary {
    background: var(--surface);
    color: var(--primary);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.campaign-box,
.campaign-box.setup-card {
    border-color: var(--border);
}

.quick-grid button:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

.quick-grid button.active,
.tone-row label.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.generate-btn {
    background: var(--primary);
}

.generate-btn:hover {
    background: var(--primary-hover);
}

.generate-card {
    background: linear-gradient(
        135deg,
        var(--surface) 0%,
        var(--surface-alt) 100%
    );

    border-color: var(--border);
}

.premium-result-card,
.calendar-planner-card,
.image-progress,
.campaign-generation-panel,
.skeleton-card {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.premium-result-header,
.premium-result-actions {
    border-color: var(--border);
}

.premium-result-title,
.premium-result-content p,
.premium-tip-content p,
.image-progress-title {
    color: var(--text);
}

.premium-result-actions {
    background: var(--surface-alt);
}

.premium-result-actions button,
.edit-btn,
.regen-btn,
.secondary-btn,
.novispry-modal-secondary {
    background: var(--surface-alt);
    color: var(--text);
    border-color: var(--border);
}

.tab-btn {
    background: var(--surface-alt);
    color: var(--text-secondary);
    border-color: var(--border);
}

.tab-btn:hover,
.tab-btn.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

.premium-tip-content {
    background: linear-gradient(
        135deg,
        var(--surface) 0%,
        var(--surface-alt) 100%
    );
}

.image-output .generated-image {
    background: var(--surface-alt);
    border-color: var(--border);
}

.progress-bar,
.skeleton-line {
    background: var(--border);
}

#progressText,
.campaign-generation-percent {
    color: var(--text-secondary);
}

.novispry-modal-close {
    background: var(--surface-alt);
    color: var(--text-secondary);
}

.novispry-modal-close:hover {
    background: var(--border);
    color: var(--text);
}

/* ==================================================
   BRAND KIT DARK MODE
================================================== */

.brand-kit-tabs {
    border-bottom-color: var(--border);
}

.brand-tab-btn {
    background: var(--surface-alt);
    color: var(--text);
    border-color: var(--border);
}

.brand-tab-btn:hover {
    border-color: var(--primary);
}

.brand-tab-btn.active {
    background: linear-gradient(
        135deg,
        var(--primary),
        var(--accent)
    );

    border-color: var(--primary);
    color: #ffffff;
}

#brandKitForm label {
    color: var(--text);
}

#brandKitForm input,
#brandKitForm select,
#brandKitForm textarea {
    background: var(--surface-alt);
    color: var(--text);
    border-color: var(--border);
}

#brandKitForm input:focus,
#brandKitForm select:focus,
#brandKitForm textarea:focus {
    background: var(--surface);
    border-color: var(--primary);
}

#brandKitForm input[type="file"] {
    background: var(--surface-alt);
    border-color: var(--border);
    color: var(--text-secondary);
}

#brandKitForm input[type="file"]:hover {
    background: var(--surface);
    border-color: var(--primary);
}

.brand-hero-left .muted {
    color: var(--text-secondary);
}

.color-card {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.color-card-label,
.color-value {
    color: var(--text);
}

.color-card-header p {
    color: var(--text-secondary);
}

.color-card-badge {
    background: var(--primary-soft);
    color: var(--primary);
}

.color-picker-area {
    background: var(--surface-alt);
    border-color: var(--border);
}

.logo-uploader {
    background: linear-gradient(
        135deg,
        var(--surface) 0%,
        var(--surface-alt) 100%
    );

    border-color: var(--border);
}

.logo-uploader:hover {
    background: var(--surface);
    border-color: var(--primary);
}

.logo-uploader.dragging {
    background: var(--primary-light);
    border-color: var(--primary);
}

.logo-upload-empty h3,
.logo-upload-info strong {
    color: var(--text);
}

.logo-upload-empty span {
    color: var(--text-secondary);
}

.logo-upload-preview {
    background: var(--surface);
}

.logo-preview {
    background: var(--surface-alt);
    border-color: var(--border);
}

.logo-remove-btn {
    background: color-mix(
        in srgb,
        var(--danger) 12%,
        var(--surface)
    );

    color: var(--danger);
    border-color: color-mix(
        in srgb,
        var(--danger) 35%,
        var(--border)
    );
}

/* ==================================================
   SAVED CAMPAIGNS DARK MODE
================================================== */

.saved-campaigns-page,
.saved-campaigns-section {
    color: var(--text);
}

.saved-campaigns-header h1,
.saved-campaigns-header h2,
.campaign-card h3,
.campaign-card-title {
    color: var(--text);
}

.saved-campaigns-header p,
.campaign-card p,
.campaign-card-meta,
.campaign-date,
.saved-campaigns-empty p {
    color: var(--text-secondary);
}

.saved-campaigns-toolbar,
.campaign-card,
.saved-campaigns-empty,
.campaign-counter-card {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.saved-campaigns-search,
#campaignSearch {
    background: var(--surface-alt);
    color: var(--text);
    border-color: var(--border);
}

.saved-campaigns-search:focus,
#campaignSearch:focus {
    background: var(--surface);
    border-color: var(--primary);
}

.campaign-card {
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.campaign-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.campaign-card-actions button {
    background: var(--surface-alt);
    color: var(--text);
    border-color: var(--border);
}

.campaign-card-actions button:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

.campaign-card-actions .open-btn {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

.campaign-card-actions .open-btn:hover {
    background: var(--primary-hover);
    color: #ffffff;
}

.campaign-card-actions .delete-btn {
    color: var(--danger);
}

.saved-badge,
.campaign-status-badge {
    background: color-mix(
        in srgb,
        var(--success) 16%,
        var(--surface)
    );

    color: var(--success);
}

.saved-campaigns-empty-icon {
    background: var(--surface-alt);
    border-color: var(--border);
}

/* ==================================================
   SAVED CAMPAIGNS DARK MODE
================================================== */

.library-hero {
    background: linear-gradient(
        135deg,
        var(--surface) 0%,
        var(--surface-alt) 100%
    );

    border-color: var(--border);
    box-shadow: var(--shadow-md);
}

.library-hero h1 {
    color: var(--text);
}

.library-hero p,
.library-stat span,
.campaign-simple-meta {
    color: var(--text-secondary);
}

.library-stat {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.library-stat strong {
    color: var(--text);
}

.library-search input {
    background: var(--surface-alt);
    color: var(--text);
    border-color: var(--border);
}

.library-search input:focus {
    background: var(--surface);
    border-color: var(--primary);
}

.campaign-library-card {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.campaign-library-card h3 {
    color: var(--text);
}

.campaign-card-label,
.library-eyebrow {
    color: var(--primary);
}

.campaign-simple-header,
.campaign-card-actions {
    border-color: var(--border);
}

.campaign-card-icon {
    background: var(--surface-alt);
    border-color: var(--border);
}

.campaign-action-btn {
    background: var(--surface-alt);
    color: var(--text);
    border-color: var(--border);
}

.campaign-action-btn:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

.campaign-open-btn {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

.campaign-open-btn:hover {
    background: var(--primary-hover);
    color: #ffffff;
}

.campaign-delete-btn {
    color: var(--danger);
}

.campaign-card-status {
    background: color-mix(
        in srgb,
        var(--success) 16%,
        var(--surface)
    );

    color: var(--success);
}

#campaignList > p {
    color: var(--text-secondary);
}

/* ==================================================
   CALENDAR DARK MODE
================================================== */

.stats-grid {
    gap: 18px;
}

.stat-card {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.stat-card span {
    color: var(--text-secondary);
}

.stat-card strong {
    color: var(--text);
}

.calendar-workspace,
.calendar-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.calendar-toolbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.calendar-toolbar h2 {
    color: var(--text);
}

.calendar-weekdays {
    background: var(--surface-alt);
}

.calendar-weekdays span {
    color: var(--text-secondary);
}

.calendar-month-grid {
    background: var(--surface);
}

.calendar-day {
    background: var(--surface);
    border-color: var(--border);
}

.calendar-day:hover {
    background: var(--surface-alt);
}

.calendar-day-number {
    color: var(--text);
}

.calendar-nav-btn,
.calendar-view-btn,
.calendar-today-btn {
    background: var(--surface-alt);
    color: var(--text);
    border: 1px solid var(--border);
}

.calendar-nav-btn:hover,
.calendar-view-btn:hover,
.calendar-today-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary);
}

.calendar-view-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.schedule-modal-card {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

.schedule-field label {
    color: var(--text);
}

.schedule-field input,
.schedule-field select,
.schedule-field textarea {
    background: var(--surface-alt);
    color: var(--text);
    border: 1px solid var(--border);
}

.schedule-field input:focus,
.schedule-field select:focus,
.schedule-field textarea:focus {
    border-color: var(--primary);
    background: var(--surface);
}

/* ==================================================
   CALENDAR GRID DARK MODE
================================================== */

.calendar-date {
    background: var(--surface);
    color: var(--text);

    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.calendar-date:hover {
    background: var(--surface-alt);
}

.calendar-date-number {
    color: var(--text);
}

.calendar-date.muted-date {
    background: color-mix(
        in srgb,
        var(--surface-alt) 70%,
        var(--surface)
    );
}

.calendar-date.muted-date .calendar-date-number {
    color: var(--text-secondary);
}

.calendar-date.today {
    background: color-mix(
        in srgb,
        var(--primary) 10%,
        var(--surface)
    );

    box-shadow:
        inset 0 0 0 2px
        color-mix(
            in srgb,
            var(--primary) 55%,
            transparent
        );
}

.calendar-event {
    background: var(--primary-soft);
    color: var(--text);
    border-color: var(--primary);
}

/* ==================================================
   SOCIAL CONNECTIONS DARK MODE
================================================== */

.social-hero-card,
.social-platform-card,
.social-feature-card,
.connection-card {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.social-hero-card h2,
.social-platform-card h3,
.connection-card h3,
.social-feature-card h3 {
    color: var(--text);
}

.social-hero-card p,
.social-platform-card p,
.connection-card p,
.social-feature-card p {
    color: var(--text-secondary);
}

.platform-icon,
.connection-icon {
    background: var(--surface-alt);
    border: 1px solid var(--border);
}

.social-step,
.step-pill {
    background: var(--surface-alt);
    color: var(--text);
    border: 1px solid var(--border);
}

.social-step-number {
    background: var(--primary);
    color: white;
}

.connect-btn,
.connection-btn {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.connect-btn:hover,
.connection-btn:hover {
    background: var(--primary-hover);
}

.coming-soon-badge {
    background: var(--primary-soft);
    color: var(--primary);
}

.social-platform-card:hover,
.connection-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

/* ==================================================
   SOCIAL HERO DARK MODE
================================================== */

.social-connections-hero {
    background: linear-gradient(
        135deg,
        var(--surface) 0%,
        var(--surface-alt) 100%
    );

    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

.social-connections-hero-content h2 {
    color: var(--text);
}

.social-connections-hero-content p {
    color: var(--text-secondary);
}

.social-connections-hero .coming-soon-badge {
    background: var(--primary-soft);
    color: var(--primary);
}

.social-workflow .social-step {
    background: var(--surface-alt);
    color: var(--text);
    border: 1px solid var(--border);
}

.social-workflow .social-step-number {
    background: var(--primary);
    color: #fff;
}

.social-workflow .social-arrow {
    color: var(--text-secondary);
}

/* ==================================================
   SOCIAL COMING SOON DARK MODE
================================================== */

.social-coming-soon-card {
    background: linear-gradient(
        135deg,
        var(--surface) 0%,
        var(--surface-alt) 100%
    );

    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    color: var(--text);
}

.social-coming-soon-card h2,
.social-coming-soon-card h3,
.social-coming-soon-card strong {
    color: var(--text);
}

.social-coming-soon-card p,
.social-coming-soon-card span:not(.coming-soon-badge):not(.social-coming-soon-icon) {
    color: var(--text-secondary);
}

.social-coming-soon-card .btn {
    background: var(--surface-alt);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.social-coming-soon-card .btn:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

/* ==================================================
   SETTINGS DARK MODE
================================================== */

.settings-card,
.settings-option-card,
.settings-grid > *,
.settings-section-card {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.settings-card h2,
.settings-card h3,
.settings-option-card h2,
.settings-option-card h3,
.settings-section-card h2,
.settings-section-card h3 {
    color: var(--text);
}

.settings-card p,
.settings-option-card p,
.settings-section-card p,
.settings-card small,
.settings-option-card small {
    color: var(--text-secondary);
}

.settings-card-icon,
.settings-option-icon {
    background: var(--surface-alt);
    border: 1px solid var(--border);
}

.settings-card .btn.secondary,
.settings-option-card .btn.secondary,
.settings-section-card .btn.secondary {
    background: var(--surface-alt);
    color: var(--primary);
    border-color: var(--border);
}

.settings-card .btn.secondary:hover,
.settings-option-card .btn.secondary:hover,
.settings-section-card .btn.secondary:hover {
    background: var(--primary-light);
    border-color: var(--primary);
}

.settings-card:hover,
.settings-option-card:hover,
.settings-section-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

/* ==================================================
   PHASE 1 — GLOBAL VISUAL POLISH
================================================== */

/* Smoother page rendering */

.main {
    animation: novispry-page-enter 0.35s ease both;
}

@keyframes novispry-page-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

/* Unified card behavior */

.section,
.setup-card,
.premium-result-card,
.campaign-library-card,
.stat-card,
.calendar-panel,
.social-connections-hero,
.social-platform-card,
.social-coming-soon-card,
.settings-card,
.settings-option-card,
.settings-section-card,
.color-card {
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease;
}

.section:hover,
.setup-card:hover,
.campaign-library-card:hover,
.stat-card:hover,
.social-platform-card:hover,
.settings-card:hover,
.settings-option-card:hover,
.settings-section-card:hover,
.color-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(
        in srgb,
        var(--primary) 35%,
        var(--border)
    );
    box-shadow: var(--shadow-md);
}

/* Prevent large workspace containers from lifting */

.calendar-panel:hover,
.social-connections-hero:hover,
.social-coming-soon-card:hover {
    transform: none;
}

/* Consistent heading hierarchy */

h1,
h2,
h3 {
    color: var(--text);
}

h1 {
    letter-spacing: -0.035em;
}

h2 {
    letter-spacing: -0.02em;
}

h3 {
    letter-spacing: -0.01em;
}

/* Consistent muted text */

.muted,
.page-header p,
.library-hero p,
.social-connections-hero p,
.settings-card p,
.settings-option-card p {
    color: var(--text-secondary);
    line-height: 1.65;
}

/* Unified button motion */

button,
.btn,
.campaign-action-btn,
.calendar-nav-btn,
.calendar-view-btn,
.calendar-today-btn,
.brand-tab-btn,
.tab-btn {
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease;
}

button:hover:not(:disabled),
.btn:hover:not(:disabled),
.campaign-action-btn:hover:not(:disabled),
.calendar-nav-btn:hover:not(:disabled),
.calendar-view-btn:hover:not(:disabled),
.calendar-today-btn:hover:not(:disabled),
.brand-tab-btn:hover:not(:disabled),
.tab-btn:hover:not(:disabled) {
    transform: translateY(-2px);
}

button:active:not(:disabled),
.btn:active:not(:disabled),
.campaign-action-btn:active:not(:disabled),
.calendar-nav-btn:active:not(:disabled),
.calendar-view-btn:active:not(:disabled),
.calendar-today-btn:active:not(:disabled),
.brand-tab-btn:active:not(:disabled),
.tab-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.97);
}

/* Cleaner inputs */

input,
textarea,
select {
    border-radius: var(--radius-sm);
}

input:hover,
textarea:hover,
select:hover {
    border-color: color-mix(
        in srgb,
        var(--primary) 28%,
        var(--border)
    );
}

/* Better section spacing */

.section + .section,
.section + .stats-grid,
.stats-grid + .calendar-workspace {
    margin-top: 24px;
}

/* Consistent badges */

.small-label,
.library-eyebrow,
.campaign-card-label,
.premium-result-platform {
    letter-spacing: 0.09em;
}

/* Refined sidebar */

.sidebar {
    box-shadow:
        12px 0 40px rgba(0, 0, 0, 0.12);
}

.sidebar-nav a {
    min-height: 46px;
}
/* ==================================================
   PHASE 1 — CARD HIERARCHY & SPACING
================================================== */

/* More consistent card radius */

.section,
.setup-card,
.premium-result-card,
.campaign-library-card,
.stat-card,
.calendar-panel,
.social-connections-hero,
.social-platform-card,
.social-coming-soon-card,
.settings-card,
.color-card {
    border-radius: var(--radius-lg);
}

/* Cleaner internal spacing */

.section,
.calendar-panel,
.social-connections-hero,
.social-coming-soon-card {
    padding: 30px;
}

.settings-card,
.social-platform-card,
.campaign-library-card,
.stat-card,
.color-card {
    padding: 22px;
}

/* Stronger card separation */

.section,
.calendar-panel,
.social-connections-hero,
.social-coming-soon-card {
    box-shadow: var(--shadow-md);
}

.settings-card,
.social-platform-card,
.campaign-library-card,
.stat-card,
.color-card {
    box-shadow: var(--shadow-sm);
}

/* Better heading spacing */

.section h1,
.section h2,
.social-connections-hero h2,
.settings-card h3,
.social-platform-card h3,
.campaign-library-card h3 {
    margin-bottom: 8px;
}

/* Better paragraph rhythm */

.section p,
.settings-card p,
.social-platform-card p,
.campaign-library-card p {
    line-height: 1.65;
}

/* More breathing room between card rows */

.settings-grid,
.social-platforms-grid,
.stats-grid,
.campaign-list,
.output-grid {
    gap: 20px;
}

/* Improve card icons */

.settings-card-icon,
.settings-option-icon,
.platform-icon,
.connection-icon,
.campaign-card-icon,
.setup-icon {
    box-shadow:
        inset 0 0 0 1px
        color-mix(
            in srgb,
            var(--primary) 14%,
            transparent
        );
}

/* Refined hover depth */

.settings-card:hover,
.social-platform-card:hover,
.campaign-library-card:hover,
.stat-card:hover,
.color-card:hover {
    box-shadow:
        0 18px 42px
        color-mix(
            in srgb,
            var(--primary) 10%,
            transparent
        );
}

/* ==================================================
   SETTINGS MODAL POLISH — OPTION CARDS
================================================== */

/* Wider settings dialogs */

#appearanceSettingsModal .novispry-modal-card,
#emailPreferencesModal .novispry-modal-card {
    width: min(680px, 100%);
    max-height: min(86vh, 820px);
    overflow-y: auto;
}

/* Stronger modal header */

#appearanceSettingsModal .novispry-modal-header,
#emailPreferencesModal .novispry-modal-header {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

#appearanceSettingsModal .novispry-modal-header h2,
#emailPreferencesModal .novispry-modal-header h2 {
    font-size: 26px;
    letter-spacing: -0.025em;
}

/* Appearance groups */

.appearance-setting-group {
    margin-top: 28px;
}

.appearance-setting-group:first-child {
    margin-top: 0;
}

.appearance-setting-group h3 {
    margin-bottom: 12px;
    font-size: 15px;
    color: var(--text);
}

/* Appearance option grid */

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

.appearance-setting-group:first-child
.appearance-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Selectable appearance cards */

.appearance-choice {
    position: relative;

    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 86px;
    margin: 0;
    padding: 16px;

    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 16px;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.appearance-choice:hover {
    transform: translateY(-2px);
    border-color: color-mix(
        in srgb,
        var(--primary) 55%,
        var(--border)
    );
    box-shadow: var(--shadow-sm);
}

.appearance-choice input {
    position: absolute;
    top: 14px;
    right: 14px;

    width: 18px;
    height: 18px;
    margin: 0;

    accent-color: var(--primary);
}

.appearance-choice span {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-right: 26px;
}

.appearance-choice strong {
    color: var(--text);
    font-size: 15px;
}

.appearance-choice small {
    color: var(--text-secondary);
    line-height: 1.45;
}

.appearance-choice:has(input:checked) {
    background: color-mix(
        in srgb,
        var(--primary) 10%,
        var(--surface)
    );

    border-color: var(--primary);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--primary) 14%,
            transparent
        );
}

/* Email preference cards */

#emailPreferencesModal .novispry-modal-body {
    display: grid;
    gap: 12px;
}

.settings-preference-option {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: 14px;

    margin: 0;
    padding: 17px 18px;

    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 16px;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.settings-preference-option:hover {
    transform: translateY(-2px);
    border-color: color-mix(
        in srgb,
        var(--primary) 55%,
        var(--border)
    );
    box-shadow: var(--shadow-sm);
}

.settings-preference-option input {
    width: 19px;
    height: 19px;
    margin: 2px 0 0;

    flex-shrink: 0;
    accent-color: var(--primary);
}

.settings-preference-option span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-preference-option strong {
    color: var(--text);
    font-size: 15px;
}

.settings-preference-option small {
    color: var(--text-secondary);
    line-height: 1.5;
}

.settings-preference-option:has(input:checked) {
    background: color-mix(
        in srgb,
        var(--primary) 9%,
        var(--surface)
    );

    border-color: var(--primary);
}

/* Cleaner modal actions */

#appearanceSettingsModal .novispry-modal-actions,
#emailPreferencesModal .novispry-modal-actions {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

#appearanceSettingsModal .novispry-modal-primary,
#emailPreferencesModal .novispry-modal-primary {
    min-width: 170px;
}

/* Mobile */

@media (max-width: 700px) {
    .appearance-choice-grid,
    .appearance-setting-group:first-child
    .appearance-choice-grid {
        grid-template-columns: 1fr;
    }
}
/* ==================================================
   SETTINGS MODAL POLISH — PROFILE
================================================== */

#profileSettingsModal .novispry-modal-card {
    width: min(640px, 100%);
}

#profileSettingsModal .novispry-modal-header {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

#profileSettingsModal .novispry-modal-header h2 {
    font-size: 26px;
    letter-spacing: -0.025em;
}

#profileSettingsModal .novispry-modal-body {
    display: grid;
    gap: 18px;
    margin-top: 24px;
}

#profileSettingsModal .novispry-modal-body label {
    margin-bottom: -10px;
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

#profileSettingsModal .novispry-modal-body input {
    min-height: 52px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 14px;
}

#profileSettingsModal .novispry-modal-body input:hover {
    border-color: color-mix(
        in srgb,
        var(--primary) 35%,
        var(--border)
    );
}

#profileSettingsModal .novispry-modal-body input:focus {
    background: var(--surface);
    border-color: var(--primary);
    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--primary) 14%,
            transparent
        );
}

#profileSettingsModal #profileEmail {
    opacity: 0.72;
    cursor: not-allowed;
}

#profileSettingsModal .novispry-modal-actions {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

#profileSettingsModal .novispry-modal-primary {
    min-width: 160px;
}

/* =========================================
   Upgrade Limit Modal
========================================= */

.upgrade-limit-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.upgrade-limit-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.upgrade-limit-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(8px);
}

.upgrade-limit-card {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 520px;

    padding: 36px;

    border: 1px solid var(--border);
    border-radius: 28px;

    background: var(--surface);
    color: var(--text);

    box-shadow:
        0 32px 90px rgba(15, 23, 42, 0.32);

    transform: translateY(18px) scale(0.97);

    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.upgrade-limit-modal.active .upgrade-limit-card {
    transform: translateY(0) scale(1);
}

.upgrade-limit-close {
    position: absolute;
    top: 18px;
    right: 18px;

    width: 38px;
    height: 38px;

    border: 1px solid var(--border);
    border-radius: 50%;

    background: var(--surface-alt);
    color: var(--text-secondary);

    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.upgrade-limit-icon {
    display: grid;
    place-items: center;

    width: 64px;
    height: 64px;

    margin-bottom: 18px;

    border-radius: 20px;

    background: linear-gradient(
        135deg,
        #ede9fe,
        #eef2ff
    );

    font-size: 30px;
}

.upgrade-limit-label {
    display: inline-block;

    margin-bottom: 10px;

    color: var(--primary);

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 0.12em;
}

.upgrade-limit-card h2 {
    margin-bottom: 10px;

    font-size: 30px;
    letter-spacing: -0.7px;
}

.upgrade-limit-card > p {
    margin-bottom: 22px;

    color: var(--text-secondary);
    line-height: 1.6;
}

.upgrade-limit-usage {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 22px;
    padding: 16px 18px;

    border: 1px solid var(--border);
    border-radius: 16px;

    background: var(--surface-alt);
}

.upgrade-limit-usage span {
    color: var(--text-secondary);
    font-weight: 700;
}

.upgrade-limit-usage strong {
    color: var(--primary);
    font-size: 18px;
}

.upgrade-limit-features {
    display: grid;
    gap: 12px;

    margin: 0 0 26px;
    padding: 0;

    list-style: none;
}

.upgrade-limit-features li {
    color: var(--text);
    font-weight: 700;
}

.upgrade-limit-primary,
.upgrade-limit-secondary {
    width: 100%;

    padding: 15px 20px;

    border-radius: 15px;

    font-size: 15px;
    font-weight: 900;

    cursor: pointer;
}

.upgrade-limit-primary {
    border: none;

    background: linear-gradient(
        135deg,
        #4f46e5,
        #7c3aed
    );

    color: white;

    box-shadow:
        0 14px 30px rgba(79, 70, 229, 0.24);
}

.upgrade-limit-primary:hover {
    transform: translateY(-1px);
}

.upgrade-limit-secondary {
    margin-top: 10px;

    border: 1px solid var(--border);

    background: transparent;
    color: var(--text-secondary);
}

@media (max-width: 600px) {
    .upgrade-limit-card {
        padding: 28px 22px;
    }

    .upgrade-limit-card h2 {
        font-size: 25px;
    }
}

/* =========================================
   Subscription Usage
========================================= */

.subscription-usage {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 18px;
    width: 100%;
}

.usage-item {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.usage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.usage-row span {
    color: var(--text-muted, #64748b);
    font-weight: 500;
}

.usage-row strong {
    color: var(--text-primary, #0f172a);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}

.usage-progress {
    width: 100%;
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
}

.usage-progress-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
    90deg,
    #4f46e5,
    #7c3aed
);
    border-radius: 999px;
    transition:
        width 0.7s ease,
        background-color 0.25s ease;
        
        
}

.usage-progress-fill {
    animation: usageFill .8s ease;
}

@keyframes usageFill {
    from {
        width: 0;
    }
}

.usage-progress-fill.limit-reached {
    background: #ef4444;
}

.usage-note {
    display: block;
    margin-top: 2px;
    color: #b45309;
    font-size: 0.76rem;
    line-height: 1.45;
}

/* Dark theme */

[data-theme="dark"] .usage-row strong {
    color: #f8fafc;
}

[data-theme="dark"] .usage-row span {
    color: #94a3b8;
}

[data-theme="dark"] .usage-progress {
    background: rgba(148, 163, 184, 0.18);
}

[data-theme="dark"] .usage-note {
    color: #fbbf24;
}

/* Mobile */

@media (max-width: 700px) {
    .subscription-usage {
        gap: 14px;
    }

    .usage-row {
        font-size: 0.85rem;
    }

    .usage-note {
        font-size: 0.72rem;
    }
}

/* ==========================================
   Legal Pages
========================================== */

.legal-page{
    max-width:1000px;
}

.legal-header{
    margin-bottom:42px;
}

.legal-header h1{
    margin:12px 0 16px;

    font-size:54px;
    line-height:1.05;
    letter-spacing:-1.5px;

    color:var(--text);
}

.legal-header p{
    max-width:700px;

    color:var(--text-secondary);

    font-size:18px;
    line-height:1.75;
}

.legal-card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:28px;

    padding:42px;

    box-shadow:var(--shadow-md);
}

.legal-section{

    display:flex;

    align-items:flex-start;

    gap:26px;

    padding:34px 0;

    border-bottom:1px solid var(--border-light);
}

.legal-section:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.legal-number{

    flex-shrink:0;

    width:60px;
    height:60px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #eef2ff,
        #ede9fe
    );

    color:#4f46e5;

    font-size:20px;
    font-weight:900;
}

.legal-section h2{

    margin:0 0 12px;

    color:var(--text);

    font-size:28px;
}

.legal-section p{

    color:var(--text-secondary);

    font-size:16px;

    line-height:1.8;
}

@media (max-width:900px){

    .legal-card{
        padding:28px;
    }

    .legal-section{
        flex-direction:column;
    }

    .legal-number{
        width:52px;
        height:52px;
    }

    .legal-header h1{
        font-size:42px;
    }

}

.sidebar-footer {
    margin-top: auto;
    padding: 0 22px 24px;
}

.sidebar-footer-divider {
    height: 1px;
    margin-bottom: 18px;
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px;
}

.sidebar-footer-links a,
.sidebar-footer-links span {
    color: rgba(255, 255, 255, 0.48);
    font-size: 11px;
    text-decoration: none;
}

.sidebar-footer-links a:hover {
    color: #ffffff;
}

.sidebar-support-link {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.2s ease;
}

.sidebar-support-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.sidebar-copyright {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.3);
    font-size: 10px;
}

/* Fix dashboard content positioning after responsive view */

body .dashboard > .main {
    display: block !important;
    align-items: initial !important;
    justify-content: initial !important;

    padding-top: 42px !important;

    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

body .dashboard > .main > .dashboard-hero {
    position: static !important;

    margin-top: 0 !important;
    padding-top: 14px !important;

    opacity: 1 !important;
    transform: none !important;
}

@media (max-width: 768px) {

    .calendar-planner-header{
        flex-direction:column;
        align-items:flex-start;
        gap:18px;
        padding:22px;
    }

    .calendar-planner-heading{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }

    .calendar-planner-grid{
        padding:18px;
        gap:16px;
    }

    .calendar-day-card{
        flex-direction:column;
        gap:16px;
        padding:18px;
    }

    .calendar-day-number{
        width:60px;
        height:60px;
    }

    .calendar-day-header{
        flex-direction:column;
        gap:12px;
        align-items:flex-start;
    }

    .calendar-day-footer{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }

    .calendar-copy-btn{
        width:100%;
    }

    .calendar-day-content p{
        margin:12px 0;
    }

}

/* ==========================
   Mobile Sidebar
========================== */

.mobile-menu-btn,
.mobile-menu-close,
.sidebar-overlay{
    display:none;
}

@media (max-width:768px){

    .mobile-menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    position:fixed;
    top:20px;
    left:20px;

    width:48px;
    height:48px;

    border:none;
    border-radius:14px;

    background:#4f46e5;
    color:#fff;

    font-size:24px;
    cursor:pointer;

    z-index:2001;

    box-shadow:0 12px 28px rgba(0,0,0,.18);
}

.sidebar-logo{
    margin-top:45px;
}

    .sidebar{

    position:fixed;

    top:0;
    left:0;
    bottom:0;

    width:320px;
    max-width:90vw;

    transform:translateX(-100%);
    transition:transform .28s ease;

    z-index:2002;

    overflow-y:auto;
}

    .sidebar.open{
        transform:translateX(0);
    }

    .mobile-menu-close{
    display:flex;
    align-items:center;
    justify-content:center;

    position:absolute;
    top:18px;
    right:18px;

    width:42px;
    height:42px;

    border:none;
    border-radius:10px;

    background:rgba(255,255,255,.08);
    color:#fff;

    font-size:28px;
    font-weight:600;

    cursor:pointer;
}

    .sidebar-overlay{

        position:fixed;
        inset:0;

        display:block;

        background:rgba(0,0,0,.45);

        opacity:0;
        visibility:hidden;

        transition:.25s ease;

        z-index:2000;
    }

    .sidebar-overlay.show{

        opacity:1;
        visibility:visible;
    }

    .main{

        margin-left:0;
        width:100%;
        padding:80px 20px 20px;
    }
}

/* ==========================
   Final Mobile Fixes
========================== */

@media (max-width:640px){

    /* Subscription card */

    .settings-card:has(#subscriptionUsage){
        grid-template-columns:52px minmax(0,1fr);
        align-items:start;
    }

    .settings-card:has(#subscriptionUsage)
    .settings-card-content{
        width:100%;
    }

    #subscriptionActions{
        grid-column:1 / -1;
        width:100%;
    }

    #subscriptionActions form,
    #subscriptionActions .settings-card-button{
        width:100%;
    }

    .usage-row{
        gap:10px;
    }

    .usage-row span{
        min-width:0;
    }

    /* Campaign results heading */

    .output-header{
        flex-direction:column;
        align-items:stretch;
        gap:20px;
    }

    .output-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:12px;
        width:100%;
    }

    .output-actions .btn{
        width:100%;
        min-width:0;
        padding:13px 10px;
    }
}