:root {
    --sp-sidebar-w: 256px;
    --sp-radius: 14px;
    --sp-primary: #4f46e5;
}

[data-bs-theme="light"] {
    --sp-bg: #f4f5fb;
    --sp-surface: #ffffff;
    --sp-border: #e7e8f0;
    --sp-sidebar-bg: #1e1b39;
    --sp-sidebar-fg: #c9c8e0;
    --sp-sidebar-active: #4f46e5;
}
[data-bs-theme="dark"] {
    --sp-bg: #0e0f1a;
    --sp-surface: #181a29;
    --sp-border: #272a3d;
    --sp-sidebar-bg: #14152300;
    --sp-sidebar-bg: #101120;
    --sp-sidebar-fg: #aeb0c8;
    --sp-sidebar-active: #6366f1;
}

body { background: var(--sp-bg); }

/* ---- App shell ---- */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
    width: var(--sp-sidebar-w);
    background: var(--sp-sidebar-bg);
    color: var(--sp-sidebar-fg);
    position: fixed; inset: 0 auto 0 0; z-index: 1040;
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.app-main { flex: 1; margin-left: var(--sp-sidebar-w); min-width: 0; display: flex; flex-direction: column; }
.app-content { padding: 1.5rem; flex: 1; }

.sidebar-brand {
    display: flex; align-items: center; gap: .65rem;
    padding: 1.1rem 1.25rem; font-weight: 700; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand-mark {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff; font-size: .85rem;
}
.brand-mark-lg { width: 56px; height: 56px; font-size: 1.2rem; border-radius: 16px; }
.brand-text { font-size: 1rem; }

.sidebar-nav { padding: .5rem .6rem 2rem; }
.nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; opacity: .5; padding: 1rem .65rem .35rem; }
.sidebar-nav .nav-link {
    color: var(--sp-sidebar-fg); border-radius: 9px; padding: .5rem .65rem;
    font-size: .9rem; margin-bottom: 1px; transition: background .15s, color .15s;
}
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-nav .nav-link.active { background: var(--sp-sidebar-active); color: #fff; }
.sidebar-nav .nav-link .badge { font-size: .58rem; font-weight: 600; }

.sidebar-backdrop { display: none; }

/* ---- Topbar ---- */
.app-topbar {
    display: flex; align-items: center; gap: .65rem;
    padding: .65rem 1.25rem; background: var(--sp-surface);
    border-bottom: 1px solid var(--sp-border); position: sticky; top: 0; z-index: 1030;
}
.topbar-spacer { flex: 1; }
.btn-icon { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 9px; color: inherit; }
.btn-icon:hover { background: var(--sp-bg); }
.workspace-switcher .btn { border-radius: 10px; }
.ws-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: .5rem; }
.user-chip { border: 1px solid var(--sp-border); border-radius: 10px; padding: .25rem .5rem; }
.avatar-sm {
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    display: inline-grid; place-items: center; font-size: .75rem; font-weight: 600;
    background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff;
    overflow: hidden;
}
.avatar-sm img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg {
    width: 72px; height: 72px; border-radius: 50%; flex: none;
    display: inline-grid; place-items: center; font-size: 1.5rem; font-weight: 600;
    background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff;
    overflow: hidden;
}
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Cards & surfaces ---- */
.card { border: 1px solid var(--sp-border); border-radius: var(--sp-radius); background: var(--sp-surface); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: transparent; border-bottom: 1px solid var(--sp-border); }

.stat-card .stat-icon { width: 46px; height: 46px; border-radius: 12px; display: inline-grid; place-items: center; font-size: 1.2rem; flex: none; }
.stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.stat-label { font-size: .8rem; color: var(--bs-secondary-color); }

/* ---- Platform chips ---- */
.platform-chip {
    width: 34px; height: 34px; flex: none; border-radius: 9px; display: inline-grid; place-items: center;
    background: color-mix(in srgb, var(--chip) 14%, transparent); color: var(--chip); font-size: 1rem;
}
.platform-chip-lg { width: 48px; height: 48px; border-radius: 12px; font-size: 1.4rem; }

/* ---- Feature flags ---- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .4rem .9rem; }
.feature-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem 0; border-bottom: 1px dashed var(--sp-border); }
.feature-name { font-size: .82rem; }
.feature-badge { font-size: .66rem; font-weight: 600; }

/* ---- Detail rows ---- */
.detail-row { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--sp-border); }
.detail-row:last-child { border-bottom: 0; }
.detail-label { color: var(--bs-secondary-color); font-size: .85rem; }
.detail-value { font-weight: 500; text-align: right; word-break: break-word; }

/* ---- Empty states ---- */
.empty-state { text-align: center; color: var(--bs-secondary-color); }
.empty-state i { font-size: 2.2rem; opacity: .5; }

/* ---- Checklist ---- */
.checklist-item { display: flex; align-items: center; gap: .6rem; padding: .75rem .9rem; border: 1px solid var(--sp-border); border-radius: 10px; text-decoration: none; color: inherit; }
.checklist-item:hover { border-color: var(--sp-primary); }
.checklist-item.done { color: var(--bs-success); }
.checklist-item.done i:first-child { color: var(--bs-success); }

/* ---- Coming soon ---- */
.coming-badge { display: inline-block; background: color-mix(in srgb, var(--sp-primary) 14%, transparent); color: var(--sp-primary); font-weight: 600; font-size: .8rem; padding: .35rem .85rem; border-radius: 999px; }
.phase-track { display: flex; gap: .5rem; justify-content: center; }
.phase-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 600; background: var(--sp-bg); border: 1px solid var(--sp-border); color: var(--bs-secondary-color); }
.phase-dot.past { background: var(--bs-success); color: #fff; border-color: transparent; }
.phase-dot.current { background: var(--sp-primary); color: #fff; border-color: transparent; }

.min-w-0 { min-width: 0; }

/* ---- Auth ---- */
.auth-body { background: linear-gradient(135deg, #312e81, #4f46e5 55%, #7c3aed); min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.auth-wrap { width: 100%; max-width: 440px; }
.auth-brand { text-align: center; color: #fff; margin-bottom: 1.5rem; }
.auth-brand .brand-mark { margin: 0 auto; }
.auth-brand p { color: rgba(255,255,255,.8); }
.auth-card { border: none; border-radius: 18px; }

/* ---- Error ---- */
.error-body { min-height: 100vh; display: grid; place-items: center; background: var(--sp-bg); padding: 2rem; }
.error-code { font-size: 4.5rem; font-weight: 800; color: var(--sp-primary); line-height: 1; }

.platform-chip-sm { width: 26px; height: 26px; border-radius: 7px; font-size: .8rem; }

/* ---- Media library ---- */
.upload-zone { border: 2px dashed var(--sp-border); border-radius: var(--sp-radius); padding: 1.5rem; text-align: center; background: var(--sp-surface); transition: border-color .15s, background .15s; }
.upload-zone.dragover { border-color: var(--sp-primary); background: color-mix(in srgb, var(--sp-primary) 6%, var(--sp-surface)); }
.upload-inner i { font-size: 2rem; color: var(--sp-primary); }
.upload-progress { margin-top: 1rem; text-align: left; display: grid; gap: .4rem; }
.upload-row { display: flex; align-items: center; gap: .6rem; font-size: .85rem; }
.upload-row .progress { height: 6px; }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .85rem; }
.media-card { border: 1px solid var(--sp-border); border-radius: 12px; overflow: hidden; background: var(--sp-surface); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.media-card:hover, .media-card:focus { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16,24,40,.12); outline: none; }
.media-thumb { position: relative; aspect-ratio: 1; background: var(--sp-bg); display: grid; place-items: center; overflow: hidden; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-play { position: absolute; font-size: 2rem; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); pointer-events: none; }
.media-novideo { font-size: 2rem; color: var(--bs-secondary-color); }
.media-duration { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.72); color: #fff; font-size: .7rem; padding: 1px 5px; border-radius: 4px; }
.media-orient { position: absolute; top: 6px; left: 6px; font-size: .6rem; }
.media-meta { padding: .5rem .6rem; }
.media-name { font-size: .8rem; font-weight: 500; }
.readiness { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.ready-badge { font-size: .6rem; font-weight: 600; padding: 1px 5px; border-radius: 5px; display: inline-flex; align-items: center; gap: 2px; }
.ready-badge.ok { background: color-mix(in srgb, var(--bs-success) 16%, transparent); color: var(--bs-success); }
.ready-badge.no { background: color-mix(in srgb, var(--bs-warning) 18%, transparent); color: #9a6a00; }

/* ---- Composer ---- */
.account-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; }
.account-pick { display: flex; align-items: center; gap: .55rem; border: 1px solid var(--sp-border); border-radius: 10px; padding: .5rem .6rem; cursor: pointer; position: relative; transition: border-color .15s, background .15s; }
.account-pick.checked { border-color: var(--sp-primary); background: color-mix(in srgb, var(--sp-primary) 6%, var(--sp-surface)); }
.account-pick-name { min-width: 0; flex: 1; }
.pick-check { color: var(--sp-primary); opacity: 0; transition: opacity .15s; }
.account-pick.checked .pick-check { opacity: 1; }

.emoji-tray { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .5rem; }
.emoji-btn { border: 1px solid var(--sp-border); background: var(--sp-surface); border-radius: 8px; font-size: 1.1rem; width: 38px; height: 36px; cursor: pointer; }
.emoji-btn:hover { background: var(--sp-bg); }

.selected-media { display: flex; flex-wrap: wrap; gap: .5rem; }
.sel-media { position: relative; width: 78px; height: 78px; border-radius: 9px; overflow: hidden; border: 1px solid var(--sp-border); }
.sel-media img { width: 100%; height: 100%; object-fit: cover; }
.sel-play { position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; color: #fff; font-size: 1.4rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.sel-remove { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: none; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; line-height: 1; cursor: pointer; }
.picker-card { position: relative; }
.picker-check { position: absolute; top: 6px; right: 6px; color: #fff; font-size: 1.2rem; opacity: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.picker-card.selected { outline: 3px solid var(--sp-primary); }
.picker-card.selected .picker-check { opacity: 1; color: var(--sp-primary); }

.preview-sticky { position: sticky; top: 84px; }
.preview-tabs .nav-link { padding: .2rem .6rem; font-size: .78rem; border-radius: 6px; }
.hashtag { color: var(--sp-primary); }

/* Preview cards */
.pv-card { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 12px; padding: .85rem; }
.pv-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.pv-body { white-space: pre-wrap; font-size: .9rem; margin-bottom: .5rem; }
.pv-media { border-radius: 10px; overflow: hidden; position: relative; }
.pv-media img, .pv-media video { display: block; max-height: 280px; object-fit: cover; }
.pv-more { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,.7); color: #fff; padding: 2px 8px; border-radius: 12px; font-size: .8rem; }
.pv-actions { display: flex; gap: 1.5rem; color: var(--bs-secondary-color); margin-top: .5rem; }
.pv-vertical { display: flex; justify-content: center; }
.pv-vframe { position: relative; width: 220px; aspect-ratio: 9/16; background: #000; border-radius: 16px; overflow: hidden; }
.pv-vframe img, .pv-vframe video { width: 100%; height: 100%; object-fit: cover; }
.pv-vert-empty { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-size: 2.5rem; opacity: .5; }
.pv-voverlay { position: absolute; bottom: 0; left: 0; right: 0; padding: .75rem; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; }
.pv-vname { font-weight: 600; font-size: .85rem; }
.pv-vcap { font-size: .8rem; }
.pv-badge { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.7); color: #fff; font-size: .65rem; padding: 2px 7px; border-radius: 10px; }
.pv-badge.tiktok { background: #010101; }
.pv-yt-thumb { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 10px; overflow: hidden; }
.pv-yt-thumb img, .pv-yt-thumb video { width: 100%; height: 100%; object-fit: cover; }
.pv-yt-body { padding-top: .5rem; }
.pv-title { font-weight: 600; }
.pv-sub { font-size: .8rem; color: var(--bs-secondary-color); }
.pv-desc { font-size: .85rem; white-space: pre-wrap; margin-top: .25rem; }
.pv-pin img { width: 100%; border-radius: 12px; }

/* ---- Calendar ---- */
.legend-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--bs-secondary-color); }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.fc .fc-event { cursor: pointer; font-size: .75rem; }
.fc-event-failed { box-shadow: inset 3px 0 0 var(--bs-danger); }
.fc-vert-badge { margin-right: 3px; }
.fc .fc-toolbar-title { font-size: 1.1rem; }

.post-row .platform-chip { transition: transform .1s; }
.post-media-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--sp-border); }
.min-w-0 { min-width: 0; }

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
    .app-shell.sidebar-open .app-sidebar { transform: translateX(0); }
    .app-main { margin-left: 0; }
    .app-shell.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1039; }
    .preview-sticky { position: static; }
}

/* =====================================================================
   v2 — beautification + responsive polish (additive)
   ===================================================================== */

:root { --sp-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
        --sp-shadow-lg: 0 10px 30px -10px rgba(16,24,40,.25); }
[data-bs-theme="light"] { --sp-bg: #f6f7fb; }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
* { -webkit-tap-highlight-color: transparent; }

/* Sidebar: brand-tinted active pill + smoother look */
.app-sidebar { background:
    linear-gradient(180deg, color-mix(in srgb, var(--sp-primary) 22%, var(--sp-sidebar-bg)) 0%, var(--sp-sidebar-bg) 240px); }
.sidebar-nav .nav-link { position: relative; font-weight: 500; }
.sidebar-nav .nav-link.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--sp-primary) 90%, #000) 0%, var(--sp-primary) 100%);
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--sp-primary) 70%, transparent);
}
.sidebar-nav .nav-link.active::before {
    content:""; position:absolute; left:-6px; top:8px; bottom:8px; width:3px; border-radius:3px; background:#fff;
}
.brand-logo { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; background:#fff; }
.brand-logo-preview {
    width: 64px; height: 64px; border-radius: 16px; display: inline-grid; place-items: center; flex: none;
    background: color-mix(in srgb, var(--chip, #4f46e5) 16%, #fff); color: var(--chip, #4f46e5);
    font-weight: 700; font-size: 1.3rem; overflow: hidden; border: 1px solid var(--sp-border);
}
.brand-logo-preview img { width: 100%; height: 100%; object-fit: cover; }
.ws-logo { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; margin-right: .5rem; flex:none; }

/* Topbar: glassy + sticky */
.app-topbar {
    backdrop-filter: saturate(1.2) blur(6px);
    background: color-mix(in srgb, var(--sp-surface) 88%, transparent);
}

/* Cards: softer, lift on hover for interactive ones */
.card { box-shadow: var(--sp-shadow); transition: box-shadow .18s ease, transform .18s ease; }
.stat-card:hover, .account-card:hover, .post-row:hover { box-shadow: var(--sp-shadow-lg); }
.card-header { font-weight: 600; }

/* Buttons: subtle depth */
.btn { font-weight: 500; }
.btn-primary { box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--sp-primary) 60%, transparent); }
.btn-primary:hover { transform: translateY(-1px); }

/* Stat icon gets a soft gradient when brand-colored */
.stat-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.stat-value { letter-spacing: -.02em; }

/* Headings tighter */
h1, .h1, h2, .h2, h3, .h3 { letter-spacing: -.02em; }

/* Tables nicer on desktop */
.table > :not(caption) > * > * { padding: .7rem .75rem; }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); border-bottom-width: 1px; }

/* Empty states a touch friendlier */
.empty-state i { background: color-mix(in srgb, var(--sp-primary) 10%, transparent); width: 66px; height: 66px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--sp-primary); opacity: 1; }

/* ---- Mobile / touch ---- */
@media (max-width: 575.98px) {
    .app-content { padding: 1rem .85rem 5rem; }
    .app-topbar { padding: .55rem .85rem; gap: .4rem; }
    .workspace-switcher .fw-semibold { max-width: 36vw; }
    .btn { min-height: 40px; }            /* comfortable touch target */
    .btn-sm { min-height: 34px; }
    h1, .h3 { font-size: 1.4rem; }
    .stat-value { font-size: 1.25rem; }
    .card { border-radius: 12px; }

    /* Make wide tables scroll cleanly and shrink */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .table { font-size: .85rem; }

    /* Stack the composer + previews; previews below the editor */
    .preview-sticky { position: static; margin-top: 1rem; }

    /* Account/media grids: comfortable columns */
    .media-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; }
    .account-picker { grid-template-columns: 1fr; }
    .feature-grid { grid-template-columns: 1fr; }
}

@media (max-width: 991.98px) {
    .app-topbar { position: sticky; top: 0; }
    .preview-sticky { position: static; }
    .pv-vframe { width: 180px; }
}

/* Larger tap targets for icon buttons on touch devices */
@media (hover: none) {
    .btn-icon { width: 42px; height: 42px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---- Custom confirm modal ---- */
.sp-confirm-dialog { max-width: 400px; }
.sp-confirm-icon { width: 60px; height: 60px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 1.7rem; margin-inline: auto; }
.sp-confirm-icon.danger { background: color-mix(in srgb, var(--bs-danger) 14%, transparent); color: var(--bs-danger); }
.sp-confirm-icon.warning { background: color-mix(in srgb, var(--bs-warning) 18%, transparent); color: #9a6a00; }
.sp-confirm-icon.primary { background: color-mix(in srgb, var(--sp-primary) 14%, transparent); color: var(--sp-primary); }
.sp-confirm-title { font-weight: 700; }
#spConfirmModal .modal-content { border: none; border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(16,24,40,.4); }
.auth-logo { max-height: 64px; max-width: 220px; border-radius: 12px; background: #fff; padding: 6px 10px; }