/* =====================================================================
 *  OZ MARKETING — Admin theme  ·  "Cadence" design language
 *  Zinc-gray canvas + indigo (#5a4be3) accent, hairline borders,
 *  light chrome, near-black pill buttons, monogram avatars, dot
 *  statuses, uppercase micro-labels. Schibsted Grotesk + JetBrains Mono.
 * ===================================================================== */
:root {
    --bg:          #fbfaff;   /* faint cool canvas */
    --card:        #ffffff;
    --ink:         #18181b;   /* zinc-900 */
    --ink-2:       #3f3f46;   /* zinc-700 */
    --muted:       #71717a;   /* zinc-500 */
    --faint:       #a1a1aa;   /* zinc-400 */
    --line:        #ececec;
    --line-2:      #e2e2e2;
    --surface:     #f4f4f5;   /* zinc-100 */
    --accent:      #5a4be3;   /* indigo */
    --accent-2:    #4a3bd0;
    --accent-soft: #efedfd;
    --accent-line: #ddd7fb;
    --ok:          #15803d;  --ok-soft:     #dcfce7;
    --warn:        #b45309;  --warn-soft:   #fef3c7;
    --danger:      #dc2626;  --danger-soft: #fee2e2;
    --info:        #1d4ed8;  --info-soft:   #dbeafe;
    --sidebar-w:   258px;
    --topbar-h:    62px;
    --radius:      14px;
    --shadow:      0 1px 2px rgba(24,24,27,.04);
}

* { font-family: 'Schibsted Grotesk', system-ui, sans-serif; }
[dir="rtl"] * { font-family: 'Tajawal', system-ui, sans-serif; }
code, .mono, .swal2-input { font-family: 'JetBrains Mono', monospace; }

body {
    background: var(--bg);
    color: var(--ink);
    margin: 0;
    padding-top: var(--topbar-h);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -.01em;
}

#preloader { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.spinner-border.text-primary { color: var(--accent) !important; }

/* ---------- Topbar (light) ---------- */
.topbar {
    height: var(--topbar-h);
    background: rgba(255,255,255,.82);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
    padding: 0 1.1rem;
}
.topbar .navbar-brand { color: var(--ink); font-weight: 800; letter-spacing: -.03em; display: flex; align-items: center; gap: .5rem; }
.brand-mark { background: var(--ink); color: #fff; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: .76rem; font-weight: 800; }
.brand-text { font-weight: 700; }
.topbar .sidebar-toggle { color: var(--ink); border: 0; background: transparent; font-size: 1.05rem; }
.topbar .nav-link { color: var(--ink-2) !important; font-weight: 600; }
.topbar .nav-link:hover { color: var(--ink) !important; }
.avatar-sm { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: .76rem; font-weight: 700; }
.btn-lang { background: var(--card); border: 1px solid var(--line-2); color: var(--ink); font-weight: 700; width: 38px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.btn-lang:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Sidebar (light) ---------- */
.sidebar { position: fixed; top: var(--topbar-h); inset-inline-start: 0; bottom: 0; width: var(--sidebar-w); background: var(--card); border-inline-end: 1px solid var(--line); z-index: 1020; transition: transform .25s ease; display: flex; flex-direction: column; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: .9rem .7rem; }
.sidebar-footer { padding: .75rem .8rem; border-top: 1px solid var(--line); }
.sidebar-user { display: flex; align-items: center; gap: .6rem; text-decoration: none; padding: .4rem; border-radius: 10px; }
.sidebar-user:hover { background: var(--bg); }
.su-name { font-weight: 700; font-size: .85rem; color: var(--ink); }
.su-role { font-size: .72rem; color: var(--muted); }
.nav-count { margin-inline-start: auto; background: var(--accent-soft); color: var(--accent-2); font-size: .68rem; font-weight: 800; padding: .05rem .45rem; border-radius: 20px; }
.sidebar-nav .nav-link.active .nav-count { background: #fff; }
.sidebar-nav .nav-link { color: var(--ink-2); font-weight: 600; border-radius: 10px; padding: .55rem .8rem; display: flex; align-items: center; gap: .7rem; margin-bottom: 1px; font-size: .9rem; }
.sidebar-nav .nav-link i { width: 18px; text-align: center; font-size: .95rem; color: var(--faint); }
.sidebar-nav .nav-link:hover { background: var(--surface); color: var(--ink); }
.sidebar-nav .nav-link:hover i { color: var(--ink-2); }
.sidebar-nav .nav-link.active { background: var(--accent-soft); color: var(--accent-2); }
.sidebar-nav .nav-link.active i { color: var(--accent); }
.nav-section { color: var(--faint); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; padding: 1rem .85rem .35rem; }

/* ---------- Main ---------- */
.main-content { margin-inline-start: var(--sidebar-w); padding: 1.9rem 2.1rem; min-height: calc(100vh - var(--topbar-h)); }

/* ---------- Page header ---------- */
.page-header { margin-bottom: 1.6rem; gap: 1rem; }
.page-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -.035em; margin: 0; }
.breadcrumb { font-size: .8rem; }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb-item.active { color: var(--muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--line-2); }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--card); }
.card-header { background: transparent; border-bottom: 1px solid var(--line); padding: 1rem 1.2rem; font-weight: 700; font-size: .95rem; }
.card-body { padding: 1.2rem; }
.card-header-pills .nav-link { color: var(--muted); font-weight: 600; border-radius: 8px; padding: .35rem .8rem; }
.card-header-pills .nav-link.active { background: var(--accent-soft); color: var(--accent-2); }

/* ---------- Stat cards (flat, minimal) ---------- */
.stat-card .card-body { padding: 1.1rem 1.2rem; }
.stat-icon { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1rem; background: var(--accent-soft); color: var(--accent); }
.stat-value { font-size: 1.7rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.stat-label { color: var(--muted); font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; margin-top: .2rem; }
.bg-grad-1 { background: var(--accent-soft) !important; color: var(--accent) !important; }
.bg-grad-2 { background: var(--warn-soft) !important; color: var(--warn) !important; }
.bg-grad-3 { background: var(--info-soft) !important; color: var(--info) !important; }
.bg-grad-4 { background: var(--ok-soft) !important; color: var(--ok) !important; }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; font-weight: 600; font-size: .9rem; }
.btn-primary { background: var(--ink); border-color: var(--ink); }
.btn-primary:hover { background: #000; border-color: #000; }
.btn-success { background: var(--ok); border-color: var(--ok); }
.btn-warning { background: var(--warn); border-color: var(--warn); color: #fff; }
.btn-secondary { background: var(--card); border: 1px solid var(--line-2); color: var(--ink); }
.btn-secondary:hover { background: var(--surface); color: var(--ink); }
.btn-outline-primary { color: var(--accent); border-color: var(--accent-line); }
.btn-outline-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-light { background: var(--card); border: 1px solid var(--line-2); color: var(--ink-2); }
.btn-light:hover { background: var(--surface); }
.btn-light-primary { background: var(--accent-soft); color: var(--accent-2); border: 0; }
.btn-light-info { background: var(--info-soft); color: var(--info); border: 0; }
.btn-light-danger { background: var(--danger-soft); color: var(--danger); border: 0; }
.btn-light-primary:hover { background: var(--accent); color: #fff; }
.btn-light-info:hover { background: var(--info); color: #fff; }
.btn-light-danger:hover { background: var(--danger); color: #fff; }

/* ---------- Badges ---------- */
.badge { font-weight: 700; padding: .4em .7em; border-radius: 7px; font-size: .72rem; }
.badge-orange, .bg-warning-subtle.text-warning { background: var(--warn-soft) !important; color: var(--warn) !important; }
.bg-success-subtle { background: var(--ok-soft) !important; } .text-success { color: var(--ok) !important; }
.bg-primary-subtle { background: var(--accent-soft) !important; } .text-primary { color: var(--accent) !important; }
.bg-info-subtle { background: var(--info-soft) !important; } .text-info { color: var(--info) !important; }
.bg-danger-subtle { background: var(--danger-soft) !important; } .text-danger { color: var(--danger) !important; }
.bg-secondary-subtle { background: var(--surface) !important; } .text-secondary { color: var(--muted) !important; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-inline-end: 6px; vertical-align: middle; }

/* ---------- Monogram avatar ---------- */
.monogram { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; flex-shrink: 0; letter-spacing: .02em; }

/* ---------- Cadence stat cards (label · big value · delta) ---------- */
.cad-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.05rem 1.2rem; box-shadow: var(--shadow); height: 100%; transition: box-shadow .2s ease, transform .2s ease; }
.cad-stat:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(24,24,27,.07); }
.cs-label { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .55rem; }
.cs-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; display: flex; align-items: baseline; gap: .5rem; }
.stat-delta { font-size: .8rem; font-weight: 700; letter-spacing: 0; }
.delta-up { color: var(--ok); } .delta-down { color: var(--danger); }
.stat-sub { font-size: .82rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }

/* ---------- Greeting header ---------- */
.greeting { font-size: 2.1rem; font-weight: 800; letter-spacing: -.04em; margin: 0; }
.greeting-sub { color: var(--muted); font-size: 1rem; margin-top: .25rem; }

/* ---------- Pill tabs (All / Needs approval / Onboarding) ---------- */
.pill-tabs { display: inline-flex; background: var(--surface); border-radius: 11px; padding: 3px; gap: 2px; }
.pill-tabs button { border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: .85rem; padding: .35rem .9rem; border-radius: 9px; }
.pill-tabs button.active { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }

/* ---------- Client table cells ---------- */
.cell-client { display: flex; align-items: center; gap: .7rem; }
.cell-client .cc-name { font-weight: 700; }
.cell-client .cc-sub { font-size: .76rem; color: var(--muted); }
.cell-num { font-weight: 700; } .cell-num small { color: var(--muted); font-weight: 500; }

/* ---------- Tables ---------- */
.table > :not(caption) > * > * { padding: .8rem 1rem; }
.table thead th { text-transform: uppercase; font-size: .68rem; letter-spacing: .07em; color: var(--muted); border-bottom: 1px solid var(--line); font-weight: 800; }
.table tbody td { border-color: var(--line); }
.table-img { border: 1px solid var(--line); }
.table-hover tbody tr:hover { background: var(--bg); }
.dataTables_filter input { border: 1px solid var(--line-2); border-radius: 9px; padding: .4rem .8rem; background: var(--card); }
.dataTables_length select { border: 1px solid var(--line-2); border-radius: 9px; }
.page-link { color: var(--ink-2); border-radius: 8px !important; border-color: var(--line); margin: 0 1px; }
.page-item.active .page-link { background: var(--ink); border-color: var(--ink); }

/* ---------- Forms ---------- */
.form-label { font-weight: 600; font-size: .84rem; margin-bottom: .35rem; color: var(--ink-2); }
.form-control, .form-select { border: 1px solid var(--line-2); border-radius: 10px; padding: .55rem .8rem; background: var(--card); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(90,75,227,.15); }
.input-group-text { background: var(--surface); border-color: var(--line-2); color: var(--muted); }

/* ---------- Crop widget ---------- */
.cw-preview-wrap { border: 2px dashed var(--line-2); border-radius: 11px; background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cw-preview { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Media grid ---------- */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 1rem; }
.media-tile { position: relative; border-radius: 13px; overflow: hidden; aspect-ratio: 1; border: 1px solid var(--line); background: var(--bg); cursor: pointer; }
.media-tile img { width: 100%; height: 100%; object-fit: cover; }
.media-tile .media-meta { position: absolute; inset-inline: 0; bottom: 0; padding: .5rem .6rem; background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; font-size: .72rem; }

/* ---------- Steps / lists ---------- */
.step-item { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.step-item:last-child { border-bottom: 0; }
.step-check { width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .72rem; flex-shrink: 0; line-height: 1; }
.step-check .spinner-border { width: .85rem; height: .85rem; border-width: .14em; }
.step-item { align-items: center; }
.step-done { background: var(--ok-soft); color: var(--ok); }
.step-todo { background: var(--surface); color: var(--muted); }
.progress-ring { font-weight: 800; color: var(--accent); }

/* ---------- Utilities ---------- */
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.modal-content { border: 1px solid var(--line); border-radius: 16px; }
.modal-header { border-bottom: 1px solid var(--line); }
hr { border-color: var(--line); opacity: 1; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-card { width: 100%; max-width: 410px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 10px 40px rgba(24,24,27,.06); }

/* =====================================================================
 *  MODERN POLISH — micro-interactions, depth, refined details
 * ===================================================================== */
.btn, .card, .sidebar-nav .nav-link, .nav-link, .form-control, .form-select,
.table-hover tbody tr, .media-tile, .step-check, .badge, .table-img, .stat-icon {
    transition: all .16s cubic-bezier(.4,0,.2,1);
}
.btn:active { transform: translateY(1px); }
.btn-primary { box-shadow: 0 1px 2px rgba(24,24,27,.18); }
.btn-primary:hover { box-shadow: 0 4px 14px rgba(24,24,27,.22); transform: translateY(-1px); }

/* card hover lift */
.card { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.stat-card:hover, .media-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(24,24,27,.08); }
.media-tile:hover img { transform: scale(1.04); }

/* active nav: left accent bar */
.sidebar-nav .nav-link { position: relative; }
.sidebar-nav .nav-link.active::before {
    content: ''; position: absolute; inset-inline-start: -.7rem; top: 50%; transform: translateY(-50%);
    width: 3px; height: 18px; border-radius: 3px; background: var(--accent);
}

/* page-load entrance — calm, not flashy */
@keyframes riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.main-content > .page-header, .main-content > .row, .main-content > .card { animation: riseIn .4s cubic-bezier(.4,0,.2,1) both; }
.main-content > .row { animation-delay: .05s; }
.main-content > .card:last-child { animation-delay: .1s; }

/* refined focus-visible for keyboard nav */
a:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .nav-link:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}

/* modern thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 9px; border: 2px solid var(--card); }
*::-webkit-scrollbar-thumb:hover { background: var(--faint); }

/* frosted modal backdrop */
.modal-backdrop.show { backdrop-filter: blur(3px); opacity: .35; }

/* reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
    *, .main-content > * { animation: none !important; transition: none !important; }
}

/* ---------- Sidebar backdrop (mobile) ---------- */
#sidebarBackdrop { position: fixed; inset: 0; background: rgba(15,18,34,.4); z-index: 1019; opacity: 0; visibility: hidden; transition: opacity .25s ease; }
body.sidebar-open #sidebarBackdrop { opacity: 1; visibility: visible; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,.15); }
    [dir="rtl"] .sidebar { transform: translateX(100%); }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-inline-start: 0; padding: 1.1rem; }
    .page-title { font-size: 1.4rem; }
    .greeting { font-size: 1.55rem; }
    .greeting-sub { font-size: .9rem; }
    .cs-value { font-size: 1.5rem; }
    .card-body { padding: 1rem; }
    /* keep wide tables usable */
    .table-responsive { -webkit-overflow-scrolling: touch; }
}
@media (max-width: 575.98px) {
    .main-content { padding: .85rem; }
    .media-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
    .page-header { flex-direction: column; align-items: flex-start !important; }
    .page-actions { width: 100%; }
    .page-actions .btn { width: 100%; }
    .modal-dialog { margin: .5rem; }
    .swal2-popup { width: 92vw !important; }
    .topbar .brand-text { display: none; }
    .cs-value { font-size: 1.35rem; }
    /* stat cards: comfortable 2-up already via col-6 */
    .btn { padding: .45rem .8rem; }
}
/* never let a table force horizontal page scroll */
.table-responsive { width: 100%; overflow-x: auto; }

/* =====================================================================
 *  LOADING & INTERACTION LAYER  ·  shimmer skeletons, top progress bar,
 *  image fade-in, button-loading, ripple. All global + automatic.
 * ===================================================================== */

/* ---- Top AJAX progress bar (auto-driven by jQuery ajaxStart/Stop) ---- */
#ozbar { position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 0; z-index: 10800;
    background: linear-gradient(90deg, var(--accent), #8b7bff); border-radius: 0 3px 3px 0;
    box-shadow: 0 0 10px rgba(90,75,227,.5); opacity: 0; transition: width .25s ease, opacity .35s ease; }
#ozbar.go { opacity: 1; }

/* ---- Shimmer skeletons ---- */
@keyframes ozShimmer { 0% { background-position: -460px 0; } 100% { background-position: 460px 0; } }
.skeleton, .sk { position: relative; overflow: hidden;
    background: var(--surface);
    background-image: linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(255,255,255,.65) 50%, rgba(0,0,0,0) 100%);
    background-size: 460px 100%; background-repeat: no-repeat;
    animation: ozShimmer 1.25s ease-in-out infinite; border-radius: 8px; }
.sk-line { height: 11px; border-radius: 6px; margin-bottom: .55rem; }
.sk-line.w-40 { width: 40%; } .sk-line.w-60 { width: 60%; } .sk-line.w-80 { width: 80%; }
.sk-title { height: 18px; width: 55%; border-radius: 7px; margin-bottom: .9rem; }
.sk-tile { width: 100%; aspect-ratio: 1; border-radius: 13px; }
.sk-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
.sk-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; background: var(--card); }
@media (prefers-reduced-motion: reduce) { .skeleton, .sk { animation: none; } }

/* ---- Image fade-in once loaded (no flash of broken/empty box) ---- */
img.oz-fade { opacity: 0; transition: opacity .45s ease; }
img.oz-fade.oz-in { opacity: 1; }

/* ---- Button loading state ---- */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 15px; height: 15px;
    margin: -7.5px 0 0 -7.5px; border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; color: #fff; animation: ozSpin .55s linear infinite; }
.btn-secondary.is-loading::after, .btn-light.is-loading::after, .btn-outline-primary.is-loading::after { color: var(--ink); }
@keyframes ozSpin { to { transform: rotate(360deg); } }

/* ---- Ripple on buttons ---- */
.btn { position: relative; overflow: hidden; }
.oz-ripple { position: absolute; border-radius: 50%; transform: scale(0); pointer-events: none;
    background: rgba(255,255,255,.5); animation: ozRipple .6s ease-out; }
.btn-secondary .oz-ripple, .btn-light .oz-ripple, .btn-outline-primary .oz-ripple { background: rgba(90,75,227,.22); }
@keyframes ozRipple { to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .oz-ripple { display: none; } }

/* ---- Staggered reveal for injected card/list grids ---- */
@keyframes ozPop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.oz-pop { animation: ozPop .42s cubic-bezier(.4,0,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .oz-pop { animation: none; } }

/* ---- DataTables processing pill (replace default ugly box) ---- */
.dataTables_processing { border: 0 !important; background: var(--ink) !important; color: #fff !important;
    border-radius: 10px !important; box-shadow: 0 8px 24px rgba(24,24,27,.25) !important; font-weight: 600;
    font-size: .82rem; padding: .55rem 1rem !important; width: auto !important; }

/* =====================================================================
 *  ██  V2 REDESIGN — "OZ STUDIO / AURORA"  ██
 *  A premium AI-studio identity: warm-cool canvas, glass chrome, gradient
 *  accents, soft layered depth, dark-mode ready. All additive — reuses the
 *  existing class vocabulary & CSS variables so nothing breaks.
 * ===================================================================== */
:root {
    --bg:          #f7f7fb;
    --card:        #ffffff;
    --ink:         #14141b;
    --ink-2:       #3a3a45;
    --muted:       #6b6b78;
    --faint:       #9a9aa8;
    --line:        #eceaf3;
    --line-2:      #e0ddec;
    --surface:     #f2f1f8;
    --accent:      #6d5cf0;   /* refreshed indigo-violet */
    --accent-2:    #5a4be3;
    --accent-3:    #8b7bff;
    --accent-soft: #efedfe;
    --accent-line: #ddd7fb;
    --grad:        linear-gradient(120deg, #6d5cf0 0%, #8b6cff 45%, #4d9dff 100%);
    --grad-soft:   linear-gradient(120deg, #efedfe 0%, #eaf2ff 100%);
    --radius:      16px;
    --radius-sm:   11px;
    --shadow:      0 1px 2px rgba(20,20,40,.05), 0 1px 3px rgba(20,20,40,.04);
    --shadow-md:   0 6px 18px rgba(30,25,70,.07), 0 2px 6px rgba(30,25,70,.05);
    --shadow-lg:   0 18px 50px rgba(40,30,90,.13), 0 6px 16px rgba(40,30,90,.08);
    --glass:       rgba(255,255,255,.72);
    --glow:        0 0 0 3px rgba(109,92,240,.14);
}
:root[data-theme="dark"] {
    --bg:#0e0e14; --card:#181822; --ink:#f2f2f7; --ink-2:#c9c9d6; --muted:#9494a6; --faint:#6c6c80;
    --line:#26263340; --line:#2a2a38; --line-2:#33333f; --surface:#20202b;
    --accent-soft:#241f45; --accent-line:#3a3170;
    --grad-soft:linear-gradient(120deg,#221d44 0%,#182a4a 100%);
    --glass:rgba(24,24,34,.72);
    --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 18px rgba(0,0,0,.45); --shadow-lg:0 18px 50px rgba(0,0,0,.55);
}

/* ambient gradient-mesh canvas (layered into the body background so it actually shows) */
body {
    background:
      radial-gradient(60vw 40vw at 12% -8%, rgba(109,92,240,.10), transparent 60%),
      radial-gradient(55vw 45vw at 100% 0%, rgba(77,157,255,.09), transparent 55%),
      radial-gradient(50vw 50vw at 90% 100%, rgba(139,108,255,.07), transparent 60%),
      var(--bg);
    background-attachment: fixed;
}
:root[data-theme="dark"] body {
    background:
      radial-gradient(60vw 40vw at 12% -8%, rgba(109,92,240,.16), transparent 60%),
      radial-gradient(55vw 45vw at 100% 0%, rgba(77,157,255,.12), transparent 55%),
      var(--bg);
    background-attachment: fixed;
}

/* ---- Glass chrome ---- */
.topbar { background: var(--glass); backdrop-filter: saturate(180%) blur(16px); border-bottom:1px solid var(--line); }
.brand-mark { background: var(--grad); box-shadow: 0 4px 12px rgba(109,92,240,.35); border-radius:11px; }
.sidebar { background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(10px); border-inline-end:1px solid var(--line); }
.avatar-sm, .btn-lang { border-radius: var(--radius-sm); }

/* active nav → gradient pill + glow bar */
.sidebar-nav .nav-link.active { background: var(--grad-soft); color: var(--accent-2); box-shadow: inset 0 0 0 1px var(--accent-line); }
.sidebar-nav .nav-link.active::before { background: var(--grad); box-shadow: 0 0 8px rgba(109,92,240,.6); width:3px; height:20px; }
.sidebar-nav .nav-link { transition: background .18s ease, color .18s ease, transform .18s ease; }
.sidebar-nav .nav-link:hover { transform: translateX(2px); }

/* ---- Cards: layered depth + hover glow ---- */
.card { border:1px solid var(--line); box-shadow: var(--shadow-md); border-radius: var(--radius); background: var(--card); }
.card:hover { box-shadow: var(--shadow-lg); }
.card-header { padding: 1.05rem 1.3rem; }
.card-body { padding: 1.3rem; }

/* ---- Stat cards: subtle gradient tint + accent glow ---- */
.cad-stat, .stat-card { position: relative; overflow: hidden; box-shadow: var(--shadow-md); }
.cad-stat::after, .stat-card::after { content:''; position:absolute; inset:0 0 auto auto; width:120px; height:120px;
    background: radial-gradient(circle at 100% 0, rgba(109,92,240,.10), transparent 70%); pointer-events:none; }
.cad-stat:hover, .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.stat-icon { background: var(--grad-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.cs-value, .stat-value { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* keep colored delta/sub inside a gradient value readable (don't inherit the transparent fill) */
.cs-value .stat-delta, .cs-value .stat-sub, .cs-value small, .stat-value small {
    -webkit-text-fill-color: initial; background: none; -webkit-background-clip: initial; background-clip: initial; }

/* ---- Buttons: gradient primary, springy ---- */
.btn { border-radius: var(--radius-sm); font-weight: 650; }
.btn-primary { background: var(--grad); border:0; box-shadow: 0 4px 14px rgba(109,92,240,.30); }
.btn-primary:hover { background: var(--grad); filter: brightness(1.06); box-shadow: 0 8px 22px rgba(109,92,240,.40); transform: translateY(-1px); }
.btn-outline-primary { border-color: var(--accent-line); color: var(--accent-2); }
.btn-outline-primary:hover { background: var(--grad); border-color: transparent; color:#fff; }
.btn-success { background: var(--ok); border:0; } .btn-warning { background: var(--warn); border:0; }

/* form focus → soft glow */
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: var(--glow); }

/* ---- Badges a touch softer ---- */
.badge { border-radius: 8px; }

/* =====================================================================
 *  NEW COMPONENT: STATUS TIMELINE  (.oz-timeline)
 * ===================================================================== */
.oz-timeline { list-style:none; margin:0; padding:.2rem 0 0; position:relative; }
.oz-timeline li { position:relative; padding: 0 0 1.15rem 2rem; }
.oz-timeline li::before { /* connector */
    content:''; position:absolute; inset-inline-start:9px; top:20px; bottom:-2px; width:2px; background: var(--line-2); }
.oz-timeline li:last-child::before { display:none; }
.oz-timeline .tl-dot { position:absolute; inset-inline-start:2px; top:3px; width:18px; height:18px; border-radius:50%;
    background: var(--card); border:2px solid var(--line-2); display:flex; align-items:center; justify-content:center;
    font-size:.55rem; color:#fff; z-index:1; }
.oz-timeline li.done .tl-dot { background: var(--grad); border-color: transparent; box-shadow: 0 0 0 3px rgba(109,92,240,.15); }
.oz-timeline li.current .tl-dot { background: var(--card); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109,92,240,.18); }
.oz-timeline li.current .tl-dot::after { content:''; width:7px; height:7px; border-radius:50%; background: var(--accent); animation: ozPulse 1.4s ease-in-out infinite; }
.oz-timeline li.done::before { background: var(--accent-3); }
.tl-title { font-weight:700; font-size:.9rem; }
.tl-meta { font-size:.76rem; color:var(--muted); }
@keyframes ozPulse { 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(1.5); opacity:.5;} }

/* =====================================================================
 *  NEW COMPONENT: CALENDAR  (.oz-cal)
 * ===================================================================== */
.oz-cal-head { display:grid; grid-template-columns: repeat(7,1fr); gap:8px; margin-bottom:8px; }
.oz-cal-head span { text-align:center; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.oz-cal { display:grid; grid-template-columns: repeat(7,1fr); gap:8px; }
.oz-cal-cell { min-height:104px; border:1px solid var(--line); border-radius:12px; background:var(--card); padding:.45rem; position:relative;
    transition: box-shadow .18s ease, transform .18s ease; }
.oz-cal-cell:hover { box-shadow: var(--shadow-md); }
.oz-cal-cell.other { background: var(--surface); opacity:.55; }
.oz-cal-cell.today { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(109,92,240,.18); }
.oz-cal-daynum { font-size:.72rem; font-weight:800; color:var(--muted); }
.oz-cal-cell.today .oz-cal-daynum { color:var(--accent-2); }
.oz-cal-ev { display:block; margin-top:4px; padding:2px 6px; border-radius:7px; font-size:.68rem; font-weight:700;
    background: var(--grad-soft); color: var(--accent-2); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    border-inline-start:3px solid var(--accent); }
.oz-cal-ev.st-published { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.oz-cal-ev.st-scheduled { background: var(--info-soft); color: var(--info); border-color: var(--info); }
.oz-cal-ev.st-failed { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.oz-cal-more { font-size:.66rem; color:var(--muted); font-weight:700; margin-top:3px; }
@media (max-width: 700px){ .oz-cal-cell { min-height:64px; } .oz-cal-ev { font-size:0; padding:5px; border-radius:50%; width:8px; display:inline-block; margin-inline-end:3px; } }

/* =====================================================================
 *  NEW: AI GENERATION EFFECTS  (.oz-generating aurora border + overlay)
 * ===================================================================== */
@keyframes ozAurora { 0%{ background-position:0% 50%;} 50%{ background-position:100% 50%;} 100%{ background-position:0% 50%;} }
.oz-generating { position:relative; }
.oz-generating::before { content:''; position:absolute; inset:-2px; border-radius:inherit; z-index:0; padding:2px;
    background: linear-gradient(120deg,#6d5cf0,#8b6cff,#4d9dff,#6d5cf0); background-size:300% 300%;
    animation: ozAurora 3s linear infinite;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.oz-gen-overlay { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.6rem; background: color-mix(in srgb, var(--card) 62%, transparent); backdrop-filter: blur(2px); border-radius:inherit; }
.oz-gen-orb { width:46px; height:46px; border-radius:50%; background: var(--grad); background-size:200% 200%;
    animation: ozAurora 2.2s linear infinite, ozBreathe 1.6s ease-in-out infinite; box-shadow: 0 0 30px rgba(109,92,240,.5); }
@keyframes ozBreathe { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.14);} }
.oz-gen-label { font-weight:700; font-size:.86rem; color:var(--ink); letter-spacing:.01em; }
.oz-gen-label .oz-dots::after { content:''; animation: ozDots 1.4s steps(4,end) infinite; }
@keyframes ozDots { 0%{content:'';} 25%{content:'.';} 50%{content:'..';} 75%{content:'...';} 100%{content:'';} }

/* image placeholder (shimmer while empty / loading) */
.oz-placeholder { position:relative; background: var(--surface); border-radius: var(--radius-sm); overflow:hidden;
    display:flex; align-items:center; justify-content:center; color:var(--faint); }
.oz-placeholder::after { content:''; position:absolute; inset:0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); background-size:200% 100%;
    animation: ozShimmer 1.4s ease-in-out infinite; }
:root[data-theme="dark"] .oz-placeholder::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
.oz-placeholder i { position:relative; z-index:1; font-size:1.4rem; opacity:.5; }

/* post-selection checkbox — custom so the CHECKED state is obvious (accent fill + white tick),
   readable over image thumbnails. (Native accent-color box read as plain white when ticked.) */
.post-check { -webkit-appearance:none; appearance:none; width:24px; height:24px; margin:0; cursor:pointer;
    border:2px solid #fff; border-radius:7px; background:rgba(0,0,0,.42); position:relative;
    box-shadow:0 1px 5px rgba(0,0,0,.35); transition:background .15s ease, border-color .15s ease; }
.post-check:hover { background:rgba(0,0,0,.6); }
.post-check:checked { background:var(--grad); border-color:#fff; }
.post-check:checked::after { content:''; position:absolute; left:7.5px; top:3px; width:6px; height:11px;
    border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.post-card.is-picked { outline:2px solid var(--accent); outline-offset:1px; }

/* grouped action-button section label */
.oz-action-label { font-size:.64rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--faint); margin:0 0 .5rem; }
.card-body > .oz-action-label:not(:first-child) { margin-top:.25rem; }

/* theme toggle button */
.theme-toggle { background:transparent; border:0; color:var(--ink-2); font-size:1.05rem; width:38px; height:32px; border-radius:var(--radius-sm); }
.theme-toggle:hover { background: var(--surface); color:var(--ink); }

/* dark-mode readability tweaks */
:root[data-theme="dark"] body { color: var(--ink); }
:root[data-theme="dark"] .btn-light, :root[data-theme="dark"] .btn-secondary { background: var(--surface); color: var(--ink-2); border-color: var(--line-2); }
:root[data-theme="dark"] .table-hover tbody tr:hover { background: var(--surface); }
:root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .card { background: var(--card); }
:root[data-theme="dark"] .table { color: var(--ink-2); }
:root[data-theme="dark"] .text-dark { color: var(--ink) !important; }