:root {
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-strong: #f8fafc;
    --line: #dbe3ef;
    --text: #172033;
    --muted: #68758a;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --accent: #151515;
    --success: #15803d;
    --danger: #b42318;
    --warning-bg: #fff7ed;
    --warning-line: #fed7aa;
    --shadow: 0 18px 50px rgba(32, 45, 72, 0.12);
}

.compact-heading {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.report-followup {
    margin-top: 2rem;
}

.queue-table .report-row > span:first-child {
    min-width: 0;
}

.queue-table small {
    display: block;
    margin-top: 0.35rem;
    color: #b71318;
    line-height: 1.35;
}

.small-button {
    margin-top: 0.4rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(230px, auto) 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 18px clamp(18px, 4vw, 44px);
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(18px);
}

.app-header h1 {
    margin: 0;
    font-size: clamp(22px, 3vw, 32px);
    letter-spacing: 0;
}

.brand-lockup {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    color: var(--text);
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 132px;
    min-width: 132px;
    height: 54px;
    place-items: center;
}

.brand-mark img {
    display: block;
    width: 100%;
    max-height: 54px;
    object-fit: contain;
}

.brand-mark strong {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
}

.brand-copy {
    display: grid;
    gap: 2px;
}

.brand-copy span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.brand-copy strong {
    font-size: 19px;
}

.eyebrow {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.main-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.main-nav a,
.ghost-button,
.primary-link,
.primary-button,
.danger-button,
.success-button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 8px 11px;
    text-decoration: none;
    cursor: pointer;
}

.main-nav a {
    color: var(--muted);
    border-color: transparent;
}

.main-nav a.active,
.main-nav a:hover {
    color: var(--text);
    background: var(--surface-strong);
    border-color: var(--line);
}

.primary-button,
.primary-link {
    background: var(--primary);
    color: #fff;
}

.primary-button:hover,
.primary-link:hover {
    background: var(--primary-dark);
}

.ghost-button {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text);
}

.main-nav a.active {
    border-color: rgba(237, 28, 36, 0.25);
    background: #fff7f7;
}

.danger-button {
    background: #fff1f0;
    color: var(--danger);
    border-color: #ffd2cd;
}

.success-button {
    background: #ecfdf3;
    color: var(--success);
    border-color: #bbf7d0;
}

.logout-form {
    margin: 0;
}

.app-shell {
    width: min(1380px, calc(100% - 36px));
    margin: 28px auto 64px;
}

.flash {
    margin-bottom: 18px;
    padding: 13px 15px;
    border-radius: 8px;
    background: #ecfdf3;
    border: 1px solid #bbf7d0;
    color: #14532d;
}

.flash.error {
    background: #fff1f0;
    border-color: #ffd2cd;
    color: var(--danger);
}

.login-panel {
    width: min(560px, 100%);
    margin: 12vh auto 0;
    padding: 26px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.login-brand {
    margin-bottom: 20px;
}

.login-brand img {
    display: block;
    width: min(260px, 100%);
    height: auto;
}

.login-copy h2,
.section-heading h2 {
    margin: 0;
    letter-spacing: 0;
}

.setup-warning {
    margin: 18px 0;
    padding: 14px 16px;
    background: var(--warning-bg);
    border: 1px solid var(--warning-line);
    border-radius: 8px;
}

.stacked-form,
.editor-form {
    display: grid;
    gap: 16px;
}

label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 11px 12px;
    background: #fff;
    color: var(--text);
}

textarea {
    resize: vertical;
}

fieldset {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
}

legend {
    padding: 0 8px;
    color: var(--text);
    font-weight: 800;
}

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

.stat-card {
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.stat-card::before {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: var(--primary);
}

.stat-card span {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.stat-card strong {
    display: block;
    margin-top: 8px;
    font-size: 32px;
}

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

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.section-heading.no-margin {
    margin-bottom: 0;
}

.section-heading a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.content-list,
.draft-list,
.category-list {
    display: grid;
    gap: 12px;
}

.summary-card,
.draft-card,
.category-row {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.summary-card {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.summary-card h3,
.draft-card h3 {
    margin: 8px 0 6px;
    font-size: 18px;
    letter-spacing: 0;
}

.summary-card p,
.draft-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.summary-meta,
.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}

.summary-meta span,
.post-meta span {
    padding: 5px 8px;
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.category-pill {
    --pill: #2563eb;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 3px 9px;
    background: #ffffff;
    color: var(--pill);
    border: 1px solid var(--pill);
    font-size: 12px;
    font-weight: 800;
}

.editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.8fr);
    gap: 24px;
    align-items: start;
}

.editor-form,
.preview-panel {
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.preview-panel {
    position: sticky;
    top: 104px;
}

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

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

.ai-layout,
.settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.75fr);
    gap: 24px;
    align-items: start;
}

.ai-result-panel {
    position: sticky;
    top: 104px;
}

.ai-generated-image {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.brand-rules {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    color: var(--muted);
    line-height: 1.5;
}

.brand-rules p {
    margin: 0;
    padding: 12px;
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.platform-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.check-tile {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    background: var(--surface-strong);
}

.check-tile input,
.check-row input {
    width: auto;
}

.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
}

.current-media {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.current-media img {
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
}

.preview-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-strong);
}

.preview-tabs button {
    border: 0;
    background: transparent;
    border-radius: 6px;
    padding: 7px 9px;
    cursor: pointer;
    color: var(--muted);
}

.preview-tabs button.active {
    background: #fff;
    color: var(--text);
    box-shadow: 0 1px 4px rgba(32, 45, 72, 0.14);
}

.social-preview {
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.social-preview.instagram {
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

.social-preview.linkedin {
    border-color: #bfd4f4;
}

.preview-head {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px;
}

.preview-head span {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.avatar {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
}

.social-preview p {
    margin: 0;
    padding: 0 14px 14px;
    white-space: pre-wrap;
    line-height: 1.45;
}

.preview-image {
    display: grid;
    min-height: 340px;
    place-items: center;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-weight: 800;
}

.preview-image.is-empty {
    background: repeating-linear-gradient(135deg, #f8fafc, #f8fafc 10px, #eef2f7 10px, #eef2f7 20px);
}

.social-preview.instagram .preview-image {
    aspect-ratio: 1;
    min-height: auto;
}

.social-preview.linkedin .preview-image {
    min-height: 220px;
}

.preview-actions {
    display: flex;
    justify-content: space-around;
    padding: 12px;
    color: var(--muted);
    font-weight: 700;
}

.filter-bar {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(180px, 240px) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 10px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.list-count {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 13px;
}

.draft-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
}

.draft-media {
    display: grid;
    width: 112px;
    height: 92px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.draft-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.draft-main {
    display: grid;
    gap: 9px;
}

.draft-title-row,
.control-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.draft-actions,
.control-row {
    flex-wrap: wrap;
}

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

.draft-actions form,
.inline-form,
.toggle-form {
    margin: 0;
}

.inline-form select {
    width: auto;
    min-width: 130px;
    padding: 8px 10px;
}

.draft-notes {
    display: grid;
    gap: 4px;
    padding: 8px 10px;
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 13px;
}

.platform-checklist {
    display: grid;
    gap: 8px;
}

.platform-line {
    display: grid;
    grid-template-columns: 110px repeat(3, auto) 1fr;
    gap: 8px;
    align-items: center;
    padding: 8px;
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.platform-details {
    border-top: 1px solid var(--line);
    padding-top: 8px;
}

.platform-details summary {
    cursor: pointer;
    color: var(--primary);
    font-weight: 800;
}

.platform-checklist.compact {
    margin-top: 8px;
}

.platform-checklist.compact .platform-line {
    grid-template-columns: 100px repeat(3, auto) 1fr;
    padding: 6px;
}

.mini-toggle {
    min-height: 30px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    padding: 5px 8px;
    cursor: pointer;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}

.helper-text {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.mini-toggle.active {
    color: #fff;
    background: var(--success);
    border-color: var(--success);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
}

.calendar-head,
.calendar-cell {
    min-height: 116px;
    padding: 10px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.calendar-head {
    min-height: auto;
    background: var(--surface-strong);
    color: var(--muted);
    font-weight: 800;
}

.calendar-cell.muted {
    background: #f1f5f9;
}

.calendar-post {
    --pill: #2563eb;
    display: block;
    margin-top: 8px;
    padding: 8px;
    border-left: 4px solid var(--pill);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.3;
}

.calendar-post span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.report-table {
    display: grid;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
}

.report-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) repeat(4, 90px);
    gap: 8px;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--line);
}

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

.report-head {
    background: var(--surface-strong);
    color: var(--muted);
    font-weight: 800;
}

.report-row i {
    --pill: #2563eb;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--pill);
}

.category-edit-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 100px auto auto;
    gap: 10px;
    align-items: center;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.category-edit-row label {
    gap: 5px;
}

.category-edit-row input[type="color"] {
    min-height: 40px;
    padding: 4px;
}

.empty-state,
.muted-text {
    color: var(--muted);
}

@media (max-width: 1080px) {
    .app-header {
        grid-template-columns: 1fr;
    }

    .main-nav {
        justify-content: flex-start;
    }

    .stats-grid,
    .two-column,
    .editor-layout,
    .ai-layout,
    .settings-layout,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .ai-result-panel {
        position: static;
    }

    .preview-panel {
        position: static;
    }

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

    .filter-bar,
    .category-edit-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 740px) {
    .app-shell {
        width: min(100% - 24px, 1380px);
        margin-top: 18px;
    }

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

    .brand-lockup {
        align-items: flex-start;
    }

    .brand-mark {
        width: 112px;
        min-width: 112px;
        height: 46px;
    }

    .brand-copy strong {
        font-size: 16px;
    }

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

    .draft-media {
        width: 100%;
        height: 150px;
    }

    .platform-line {
        grid-template-columns: 1fr;
    }

    .calendar-grid {
        display: block;
    }

    .calendar-head {
        display: none;
    }

    .calendar-cell {
        min-height: 90px;
        border-right: 0;
    }

    .calendar-cell.muted {
        display: none;
    }

    .report-row {
        grid-template-columns: 1fr repeat(2, 70px);
    }

    .report-row span:nth-child(4),
    .report-row span:nth-child(5) {
        display: none;
    }
}