:root {
    --c365-primary: #176b72;
    --c365-primary-dark: #104d52;
    --c365-sidebar: #14252b;
    --c365-background: #f4f6f8;
    --c365-text: #213037;
}

body { background: var(--c365-background); color: var(--c365-text); }
.auth-body { background: radial-gradient(circle at top right, #d8eff0, var(--c365-background) 45%); }
.auth-card { width: min(100%, 440px); }
.brand-mark { align-items: center; background: var(--c365-primary); border-radius: .7rem; color: #fff; display: inline-flex; font-weight: 800; height: 2.2rem; justify-content: center; width: 2.2rem; }
.brand-mark-large { font-size: 1.5rem; height: 3.5rem; width: 3.5rem; }
.btn-primary { --bs-btn-bg: var(--c365-primary); --bs-btn-border-color: var(--c365-primary); --bs-btn-hover-bg: var(--c365-primary-dark); --bs-btn-hover-border-color: var(--c365-primary-dark); }
.app-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--c365-sidebar); color: #dce5e8; display: flex; flex-direction: column; padding: 1.4rem 1rem; }
.brand { align-items: center; color: #fff; display: flex; font-size: 1.2rem; font-weight: 700; gap: .75rem; padding: 0 .6rem; text-decoration: none; }
.sidebar .nav-link { border-radius: .5rem; color: #c4d0d4; margin-bottom: .2rem; padding: .65rem .75rem; }
.sidebar .nav-link:hover, .sidebar .nav-link:focus, .sidebar .nav-link.active { background: rgba(255,255,255,.11); color: #fff; }
.nav-section { color: #81969e; font-size: .72rem; font-weight: 700; letter-spacing: .08em; padding: 1.5rem .75rem .45rem; text-transform: uppercase; }
.sidebar-footer { color: #81969e; margin-top: auto; padding: 1rem .75rem 0; }
.main-column { min-width: 0; }
.topbar { align-items: center; background: #fff; border-bottom: 1px solid #e7ebed; display: flex; justify-content: space-between; min-height: 68px; padding: .75rem 2rem; }
.tenant-switcher { width: min(100%, 280px); }
.content-area { padding: 2rem; }
.page-heading { align-items: end; display: flex; justify-content: space-between; }
.eyebrow { color: var(--c365-primary); font-size: .75rem; font-weight: 800; letter-spacing: .09em; margin-bottom: .25rem; text-transform: uppercase; }
.stat-card { background: #fff; border-left: 4px solid #aeb9bd; border-radius: .65rem; box-shadow: 0 .125rem .35rem rgba(25,42,48,.07); display: flex; flex-direction: column; padding: 1.15rem; }
.stat-number { font-size: 1.75rem; font-weight: 750; line-height: 1.2; }
.stat-label { color: #607078; font-size: .85rem; margin-top: .25rem; }
.status-warning { border-left-color: #e2a42b; } .status-info { border-left-color: #3b8ea5; }
.status-success { border-left-color: #4a9d6f; } .status-danger { border-left-color: #c95757; }
.status-purple { border-left-color: #8b6eb0; }
.empty-state { background: #f7f9fa; border: 1px dashed #ccd5d8; border-radius: .6rem; color: #607078; padding: 2rem; text-align: center; }
.brand-color { border: 0; border-radius: 50%; flex: 0 0 auto; height: 1.5rem; opacity: 1; padding: 0; width: 1.5rem; }
.media-thumb { aspect-ratio: 9/16; object-fit: cover; }
.post-image-preview { aspect-ratio: 9/16; max-height: 420px; object-fit: contain; width: 100%; }
details > summary { cursor: pointer; list-style-position: inside; }
.step-number { align-items: center; background: var(--c365-primary); border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 auto; font-weight: 700; height: 2rem; justify-content: center; width: 2rem; }
.quick-image-placeholder { align-items: center; aspect-ratio: 9/16; background: #eef2f3; border: 2px dashed #bbc8cc; border-radius: .6rem; color: #6a7b82; display: flex; justify-content: center; margin-inline: auto; max-width: 100%; padding: 1rem; text-align: center; width: 236px; }
.quick-image-preview { aspect-ratio: 9/16; display: block; margin-inline: auto; max-width: 100%; object-fit: contain; width: 236px; }
.platform-preview { background: #f7f9fa; border: 1px solid #dbe2e5; border-radius: .65rem; padding: 1.1rem; }
.platform-preview-image { aspect-ratio: 9/16; object-fit: cover; width: 110px; }
.platform-preview-text { white-space: pre-wrap; }
.platform-choice { align-items: flex-start; background: #f7f9fa; border: 1px solid #dbe2e5; border-radius: .65rem; cursor: pointer; display: flex; gap: .75rem; height: 100%; padding: 1rem; }
.platform-choice:has(input:checked) { background: #eaf5f5; border-color: var(--c365-primary); }
.platform-choice small { color: #607078; display: block; margin-top: .2rem; }
.skip-link { background: #fff; left: 1rem; padding: .75rem; position: fixed; top: 1rem; z-index: 1100; }

@media (max-width: 767.98px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { padding: .8rem 1rem; position: static; }
    .sidebar .nav { flex-direction: row !important; gap: .25rem; margin-top: .75rem !important; }
    .sidebar .nav-section, .sidebar-footer { display: none; }
    .topbar { padding: .75rem 1rem; }
    .content-area { padding: 1.25rem 1rem; }
    .user-name { display: none; }
}

/* Video production: keep previews and stored editorial copy readable on mobile. */
.production-video { width:100%; max-height:640px; background:#142b3a; border-radius:12px; }
.production-text { white-space:pre-wrap; overflow-wrap:anywhere; }
.production-empty { padding:3rem 1.5rem; background:#f1f6f8; border-radius:12px; text-align:center; }

.onboarding-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem}.onboarding-steps a{display:flex;align-items:center;gap:.65rem;padding:1rem;background:#fff;color:#254651;text-decoration:none;border:1px solid #dbe6e8;border-radius:12px;font-weight:600}.onboarding-steps a.current{background:#e6f5f3;border-color:#199ba7}.onboarding-steps span{display:grid;place-items:center;flex-shrink:0;width:1.6rem;height:1.6rem;border-radius:50%;background:#edf2f4;font-size:.8rem}.onboarding-steps .current span{background:#197f89;color:white}.brand-reference{width:100%;height:230px;object-fit:contain;background:#f1f6f8;border-radius:10px}.onboarding-empty{padding:3rem 2rem;background:#fff;border:1px dashed #bfcfd4;border-radius:14px;color:#46616e}.creative-reference{display:block;padding:.6rem;background:#f1f6f8;border-radius:10px}.creative-reference img{width:100%;height:150px;object-fit:contain}.creative-reference span{display:block;font-size:.85rem;margin-top:.6rem;overflow-wrap:anywhere}@media(max-width:800px){.onboarding-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.onboarding-steps a{padding:.8rem;font-size:.85rem}.brand-reference{height:180px}}