/*!
 * Samaji Premium UI System
 * Version: 1.0.0
 * Product: Samaji — PHP Social Media Management Platform
 * Visual foundation: XIS / SignX Indigo, Navy and Violet system
 * Fonts: IBM Plex Sans + IBM Plex Mono
 *
 * Load order:
 *   1. Bootstrap 5 (optional)
 *   2. Samaji-style.css
 *
 * Namespaces:
 *   .xis-*  shared product components
 *   .samaji-* social-media-specific components
 *
 * This file intentionally replaces duplicated legacy SignX/LMS component packs
 * with one coherent, accessible and responsive system.
 */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap");

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
    color-scheme: light;

    /* Brand */
    --xis-primary: #3527c8;
    --xis-primary-rgb: 53, 39, 200;
    --xis-primary-hover: #3122b8;
    --xis-primary-active: #291c9d;
    --xis-navy: #0a1f44;
    --xis-secondary: #8858f0;

    /* Semantic */
    --xis-success: #10b981;
    --xis-success-rgb: 16, 185, 129;
    --xis-warning: #f59e0b;
    --xis-warning-rgb: 245, 158, 11;
    --xis-danger: #ef4444;
    --xis-danger-rgb: 239, 68, 68;
    --xis-info: #3b82f6;
    --xis-info-rgb: 59, 130, 246;

    /* Neutral */
    --xis-slate-950: #020617;
    --xis-slate-900: #0f172a;
    --xis-slate-800: #1e293b;
    --xis-slate-700: #334155;
    --xis-slate-600: #475569;
    --xis-slate-500: #64748b;
    --xis-slate-400: #94a3b8;
    --xis-slate-300: #cbd5e1;
    --xis-slate-200: #e2e8f0;
    --xis-slate-150: #e7e7ee;
    --xis-slate-100: #f1f5f9;
    --xis-slate-50: #f8fafc;
    --xis-white: #ffffff;

    /* Surfaces */
    --xis-bg: #f7f7f8;
    --xis-bg-subtle: #f8fafc;
    --xis-surface: #ffffff;
    --xis-surface-raised: #ffffff;
    --xis-surface-soft: #f8fafc;
    --xis-surface-indigo: #eef2ff;
    --xis-surface-violet: #f5f3ff;
    --xis-surface-success: #ecfdf5;
    --xis-surface-warning: #fffbeb;
    --xis-surface-danger: #fef2f2;
    --xis-surface-info: #eff6ff;

    /* Text */
    --xis-text-strong: #0f172a;
    --xis-text: #334155;
    --xis-text-soft: #64748b;
    --xis-text-muted: #94a3b8;
    --xis-text-inverse: #f8fafc;

    /* Borders */
    --xis-border: #e7e7ee;
    --xis-border-soft: rgba(15, 23, 42, 0.08);
    --xis-border-strong: #cbd5e1;
    --xis-divider: rgba(15, 23, 42, 0.09);

    /* Brand gradients */
    --xis-gradient-primary: linear-gradient(135deg, #3527c8 0%, #6366f1 100%);
    --xis-gradient-creative: linear-gradient(135deg, #3527c8 0%, #8858f0 100%);
    --xis-gradient-navy: linear-gradient(145deg, #0a1f44 0%, #152f5f 100%);
    --xis-gradient-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --xis-gradient-warning: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    --xis-gradient-danger: linear-gradient(135deg, #ef4444 0%, #f87171 100%);

    /* Typography */
    --xis-font-sans: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --xis-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, "Liberation Mono", monospace;

    --xis-fs-2xs: 0.6875rem;
    --xis-fs-xs: 0.75rem;
    --xis-fs-sm: 0.8125rem;
    --xis-fs-base: 0.875rem;
    --xis-fs-md: 0.9375rem;
    --xis-fs-lg: 1rem;
    --xis-fs-xl: 1.125rem;
    --xis-fs-2xl: 1.25rem;
    --xis-fs-3xl: 1.5rem;
    --xis-fs-4xl: 1.875rem;
    --xis-fs-5xl: 2.25rem;
    --xis-fs-display: clamp(2.5rem, 5vw, 4rem);

    --xis-lh-tight: 1.15;
    --xis-lh-snug: 1.35;
    --xis-lh-base: 1.55;
    --xis-lh-relaxed: 1.7;

    /* Spacing */
    --xis-space-0: 0;
    --xis-space-1: 0.25rem;
    --xis-space-2: 0.5rem;
    --xis-space-3: 0.75rem;
    --xis-space-4: 1rem;
    --xis-space-5: 1.25rem;
    --xis-space-6: 1.5rem;
    --xis-space-8: 2rem;
    --xis-space-10: 2.5rem;
    --xis-space-12: 3rem;
    --xis-space-16: 4rem;
    --xis-space-20: 5rem;

    /* Radius */
    --xis-radius-xs: 0.375rem;
    --xis-radius-sm: 0.5rem;
    --xis-radius-md: 0.75rem;
    --xis-radius-lg: 1rem;
    --xis-radius-xl: 1.25rem;
    --xis-radius-2xl: 1.5rem;
    --xis-radius-pill: 999px;

    /* Shadows */
    --xis-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --xis-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
    --xis-shadow-md: 0 10px 28px rgba(15, 23, 42, 0.09);
    --xis-shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.13);
    --xis-shadow-xl: 0 32px 80px rgba(15, 23, 42, 0.18);
    --xis-shadow-focus: 0 0 0 4px rgba(var(--xis-primary-rgb), 0.16);

    /* Motion */
    --xis-duration-fast: 120ms;
    --xis-duration-base: 190ms;
    --xis-duration-slow: 300ms;
    --xis-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --xis-ease-exit: cubic-bezier(0.4, 0, 1, 1);

    /* Layout */
    --xis-sidebar-width: 260px;
    --xis-sidebar-collapsed: 88px;
    --xis-topbar-height: 64px;
    --xis-secondary-panel-width: 320px;
    --xis-content-max: 1440px;
    --xis-content-padding: 24px;

    /* Component size */
    --xis-control-xs: 28px;
    --xis-control-sm: 32px;
    --xis-control-md: 38px;
    --xis-control-lg: 44px;
    --xis-control-xl: 48px;

    /* Focus */
    --xis-focus-color: #4f46e5;
    --xis-focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.2);

    /* Z-index */
    --xis-z-base: 0;
    --xis-z-sticky: 100;
    --xis-z-sidebar: 1020;
    --xis-z-topbar: 1030;
    --xis-z-dropdown: 1040;
    --xis-z-overlay: 1050;
    --xis-z-drawer: 1060;
    --xis-z-modal: 1070;
    --xis-z-toast: 1080;
    --xis-z-tooltip: 1090;

    /* Network identity colors — identity markers only */
    --samaji-facebook: #1877f2;
    --samaji-instagram: #c13584;
    --samaji-linkedin: #0a66c2;
    --samaji-x: #111111;
    --samaji-youtube: #ff0000;
    --samaji-tiktok: #111111;
    --samaji-pinterest: #bd081c;
    --samaji-google: #4285f4;
    --samaji-threads: #111111;
    --samaji-whatsapp: #25d366;

    /* Bootstrap bridge */
    --bs-primary: var(--xis-primary);
    --bs-secondary: var(--xis-secondary);
    --bs-success: var(--xis-success);
    --bs-warning: var(--xis-warning);
    --bs-danger: var(--xis-danger);
    --bs-info: var(--xis-info);
    --bs-body-bg: var(--xis-bg);
    --bs-body-color: var(--xis-text);
    --bs-body-font-family: var(--xis-font-sans);
    --bs-border-color: var(--xis-border);
    --bs-link-color: var(--xis-primary);
    --bs-link-hover-color: var(--xis-primary-hover);
    --bs-border-radius: var(--xis-radius-sm);
    --bs-border-radius-lg: var(--xis-radius-md);
    --bs-focus-ring-color: rgba(var(--xis-primary-rgb), 0.2);
}

html[data-theme="dark"],
body.xis-theme-dark {
    color-scheme: dark;

    --xis-bg: #020617;
    --xis-bg-subtle: #050b18;
    --xis-surface: #0b1220;
    --xis-surface-raised: #111a2c;
    --xis-surface-soft: #0f172a;
    --xis-surface-indigo: #11152b;
    --xis-surface-violet: #18122b;
    --xis-surface-success: rgba(16, 185, 129, 0.1);
    --xis-surface-warning: rgba(245, 158, 11, 0.1);
    --xis-surface-danger: rgba(239, 68, 68, 0.1);
    --xis-surface-info: rgba(59, 130, 246, 0.1);

    --xis-text-strong: #f8fafc;
    --xis-text: #cbd5e1;
    --xis-text-soft: #94a3b8;
    --xis-text-muted: #64748b;

    --xis-border: #1f2937;
    --xis-border-soft: rgba(148, 163, 184, 0.12);
    --xis-border-strong: #334155;
    --xis-divider: rgba(148, 163, 184, 0.14);

    --xis-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
    --xis-shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.26);
    --xis-shadow-md: 0 14px 34px rgba(0, 0, 0, 0.3);
    --xis-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.38);
    --xis-shadow-xl: 0 36px 90px rgba(0, 0, 0, 0.48);

    --bs-body-bg: var(--xis-bg);
    --bs-body-color: var(--xis-text);
    --bs-border-color: var(--xis-border);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        color-scheme: dark;

        --xis-bg: #020617;
        --xis-bg-subtle: #050b18;
        --xis-surface: #0b1220;
        --xis-surface-raised: #111a2c;
        --xis-surface-soft: #0f172a;
        --xis-surface-indigo: #11152b;
        --xis-surface-violet: #18122b;
        --xis-text-strong: #f8fafc;
        --xis-text: #cbd5e1;
        --xis-text-soft: #94a3b8;
        --xis-text-muted: #64748b;
        --xis-border: #1f2937;
        --xis-border-soft: rgba(148, 163, 184, 0.12);
        --xis-border-strong: #334155;
        --xis-divider: rgba(148, 163, 184, 0.14);
    }
}


/* ==========================================================================
   2. RESET, BASE AND TYPOGRAPHY
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--xis-bg);
    color: var(--xis-text);
    font-family: var(--xis-font-sans);
    font-size: var(--xis-fs-md);
    line-height: var(--xis-lh-base);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.xis-app-body {
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

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

button,
[role="button"],
a,
summary,
label[for] {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: var(--xis-primary);
    text-decoration: none;
    text-underline-offset: 0.18em;
    transition:
        color var(--xis-duration-fast) var(--xis-ease),
        opacity var(--xis-duration-fast) var(--xis-ease);
}

a:hover {
    color: var(--xis-primary-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--xis-focus-color);
    outline-offset: 2px;
}

::selection {
    background: rgba(var(--xis-primary-rgb), 0.18);
    color: var(--xis-text-strong);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 var(--xis-space-3);
    color: var(--xis-text-strong);
    font-weight: 600;
    line-height: var(--xis-lh-tight);
    letter-spacing: -0.025em;
}

h1 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
}

h2 {
    font-size: clamp(1.375rem, 2.5vw, 1.75rem);
}

h3 {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
}

h4 {
    font-size: 1.0625rem;
}

h5 {
    font-size: 0.9375rem;
}

h6 {
    font-size: 0.875rem;
}

p {
    margin: 0 0 var(--xis-space-4);
}

small,
.xis-text-small {
    font-size: var(--xis-fs-sm);
}

code,
kbd,
samp,
pre,
.xis-mono {
    font-family: var(--xis-font-mono);
}

code {
    padding: 0.12rem 0.36rem;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-xs);
    background: var(--xis-surface-soft);
    color: var(--xis-text-strong);
    font-size: 0.88em;
}

pre {
    overflow: auto;
    padding: var(--xis-space-4);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-slate-950);
    color: #e2e8f0;
    line-height: 1.6;
}

hr {
    margin: var(--xis-space-6) 0;
    border: 0;
    border-top: 1px solid var(--xis-divider);
}

.xis-skip-link {
    position: fixed;
    top: -100px;
    left: var(--xis-space-4);
    z-index: calc(var(--xis-z-tooltip) + 1);
    padding: var(--xis-space-2) var(--xis-space-3);
    border-radius: var(--xis-radius-sm);
    background: var(--xis-navy);
    color: #fff;
    font-weight: 600;
}

.xis-skip-link:focus {
    top: var(--xis-space-4);
}

.xis-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.xis-display {
    font-size: var(--xis-fs-display);
    line-height: 0.98;
    font-weight: 700;
    letter-spacing: -0.055em;
}

.xis-page-title {
    margin: 0;
    font-size: clamp(1.625rem, 2.5vw, 2rem);
    font-weight: 700;
}

.xis-section-title {
    margin: 0;
    font-size: var(--xis-fs-2xl);
    font-weight: 650;
}

.xis-card-title {
    margin: 0;
    font-size: var(--xis-fs-lg);
    font-weight: 600;
}

.xis-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--xis-space-2);
    margin-bottom: var(--xis-space-2);
    color: var(--xis-primary);
    font-size: var(--xis-fs-xs);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.xis-muted {
    color: var(--xis-text-soft) !important;
}

.xis-subtle {
    color: var(--xis-text-muted) !important;
}

.xis-strong {
    color: var(--xis-text-strong) !important;
}

.xis-tabular {
    font-variant-numeric: tabular-nums;
}

.xis-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xis-clamp-2,
.xis-clamp-3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.xis-clamp-2 {
    -webkit-line-clamp: 2;
}

.xis-clamp-3 {
    -webkit-line-clamp: 3;
}


/* ==========================================================================
   3. LAYOUT PRIMITIVES AND UTILITIES
   ========================================================================== */

.xis-container {
    width: min(var(--xis-content-max), calc(100% - 2 * var(--xis-content-padding)));
    margin-inline: auto;
}

.xis-container--narrow {
    max-width: 760px;
}

.xis-container--form {
    max-width: 960px;
}

.xis-container--fluid {
    width: 100%;
    max-width: none;
}

.xis-stack {
    display: flex;
    flex-direction: column;
    gap: var(--xis-stack-gap, var(--xis-space-4));
}

.xis-inline,
.xis-cluster {
    display: flex;
    align-items: center;
    gap: var(--xis-inline-gap, var(--xis-space-3));
}

.xis-cluster {
    flex-wrap: wrap;
}

.xis-grid {
    display: grid;
    gap: var(--xis-grid-gap, var(--xis-space-4));
}

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

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

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

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

.xis-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.xis-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--xis-space-4);
}

.xis-split--aside {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    align-items: start;
}

.xis-surface {
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-lg);
    background: var(--xis-surface);
    box-shadow: var(--xis-shadow-xs);
}

.xis-surface--soft {
    background: var(--xis-surface-soft);
}

.xis-surface--indigo {
    border-color: rgba(var(--xis-primary-rgb), 0.15);
    background: var(--xis-surface-indigo);
}

.xis-surface--raised {
    background: var(--xis-surface-raised);
    box-shadow: var(--xis-shadow-md);
}

.xis-divider {
    height: 1px;
    background: var(--xis-divider);
}

.xis-scroll-area {
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--xis-slate-300) transparent;
}

.xis-scroll-area::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.xis-scroll-area::-webkit-scrollbar-thumb {
    border-radius: var(--xis-radius-pill);
    background: var(--xis-slate-300);
}

.xis-scroll-area::-webkit-scrollbar-track {
    background: transparent;
}

.xis-aspect-square {
    aspect-ratio: 1;
}

.xis-aspect-video {
    aspect-ratio: 16 / 9;
}

.xis-aspect-post {
    aspect-ratio: 4 / 5;
}

.xis-aspect-story {
    aspect-ratio: 9 / 16;
}

.xis-hidden {
    display: none !important;
}

.xis-w-full {
    width: 100% !important;
}

.xis-h-full {
    height: 100% !important;
}

.xis-min-w-0 {
    min-width: 0 !important;
}

.xis-flex-1 {
    flex: 1 1 0% !important;
}

.xis-items-start {
    align-items: flex-start !important;
}

.xis-items-center {
    align-items: center !important;
}

.xis-justify-between {
    justify-content: space-between !important;
}

.xis-justify-end {
    justify-content: flex-end !important;
}

.xis-text-left {
    text-align: left !important;
}

.xis-text-center {
    text-align: center !important;
}

.xis-text-right {
    text-align: right !important;
}

.xis-m-0 {
    margin: 0 !important;
}

.xis-mt-1 {
    margin-top: var(--xis-space-1) !important;
}

.xis-mt-2 {
    margin-top: var(--xis-space-2) !important;
}

.xis-mt-3 {
    margin-top: var(--xis-space-3) !important;
}

.xis-mt-4 {
    margin-top: var(--xis-space-4) !important;
}

.xis-mt-6 {
    margin-top: var(--xis-space-6) !important;
}

.xis-mb-1 {
    margin-bottom: var(--xis-space-1) !important;
}

.xis-mb-2 {
    margin-bottom: var(--xis-space-2) !important;
}

.xis-mb-3 {
    margin-bottom: var(--xis-space-3) !important;
}

.xis-mb-4 {
    margin-bottom: var(--xis-space-4) !important;
}

.xis-mb-6 {
    margin-bottom: var(--xis-space-6) !important;
}

.xis-p-0 {
    padding: 0 !important;
}

.xis-p-2 {
    padding: var(--xis-space-2) !important;
}

.xis-p-3 {
    padding: var(--xis-space-3) !important;
}

.xis-p-4 {
    padding: var(--xis-space-4) !important;
}

.xis-p-5 {
    padding: var(--xis-space-5) !important;
}

.xis-p-6 {
    padding: var(--xis-space-6) !important;
}


/* ==========================================================================
   4. APPLICATION SHELL
   ========================================================================== */

.xis-app {
    min-height: 100vh;
    background: var(--xis-bg);
}

.xis-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--xis-z-sidebar);
    display: flex;
    width: var(--xis-sidebar-width);
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--xis-gradient-navy);
    color: #dbeafe;
    box-shadow: 12px 0 36px rgba(10, 31, 68, 0.12);
    transition:
        width var(--xis-duration-slow) var(--xis-ease),
        transform var(--xis-duration-slow) var(--xis-ease);
}

.xis-sidebar__brand {
    display: flex;
    min-height: var(--xis-topbar-height);
    align-items: center;
    gap: var(--xis-space-3);
    padding: 0 var(--xis-space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.xis-sidebar__logo {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--xis-radius-md);
    background: rgba(255, 255, 255, 0.08);
}

.xis-sidebar__logo img,
.xis-sidebar__logo svg {
    width: 26px;
    height: 26px;
}

.xis-sidebar__brand-copy {
    min-width: 0;
}

.xis-sidebar__brand-title {
    color: #fff;
    font-size: var(--xis-fs-lg);
    font-weight: 600;
    line-height: 1.2;
}

.xis-sidebar__brand-subtitle {
    margin-top: 2px;
    color: #9fb5d5;
    font-size: var(--xis-fs-2xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.xis-workspace-switcher {
    margin: var(--xis-space-3);
    padding: var(--xis-space-3);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--xis-radius-md);
    background: rgba(255, 255, 255, 0.07);
}

.xis-workspace-switcher__button {
    display: grid;
    width: 100%;
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    align-items: center;
    gap: var(--xis-space-3);
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.xis-workspace-switcher__avatar {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: var(--xis-radius-sm);
    background: var(--xis-gradient-primary);
    color: #fff;
    font-weight: 700;
}

.xis-workspace-switcher__name {
    overflow: hidden;
    color: #fff;
    font-size: var(--xis-fs-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xis-workspace-switcher__meta {
    color: #9fb5d5;
    font-size: var(--xis-fs-2xs);
}

.xis-sidebar__scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--xis-space-2) var(--xis-space-3) var(--xis-space-4);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.xis-nav-section {
    margin-top: var(--xis-space-4);
}

.xis-nav-section__label {
    padding: 0 var(--xis-space-3) var(--xis-space-2);
    color: #8298bb;
    font-size: var(--xis-fs-2xs);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.xis-nav {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xis-nav__link {
    position: relative;
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: var(--xis-space-3);
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: var(--xis-radius-md);
    color: #c8d6eb;
    font-size: var(--xis-fs-base);
    font-weight: 500;
    transition:
        background var(--xis-duration-fast) var(--xis-ease),
        border-color var(--xis-duration-fast) var(--xis-ease),
        color var(--xis-duration-fast) var(--xis-ease),
        transform var(--xis-duration-fast) var(--xis-ease);
}

.xis-nav__link:hover {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.xis-nav__link[aria-current="page"],
.xis-nav__link.is-active {
    border-color: rgba(136, 88, 240, 0.35);
    background: linear-gradient(135deg,
            rgba(53, 39, 200, 0.75),
            rgba(136, 88, 240, 0.55));
    color: #fff;
    box-shadow: 0 10px 24px rgba(15, 8, 80, 0.22);
}

.xis-nav__icon {
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    place-items: center;
}

.xis-nav__icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
}

.xis-nav__label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xis-nav__count {
    min-width: 22px;
    padding: 1px 6px;
    border-radius: var(--xis-radius-pill);
    background: rgba(255, 255, 255, 0.1);
    color: #dbeafe;
    font-size: var(--xis-fs-2xs);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.xis-sidebar__footer {
    padding: var(--xis-space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.xis-topbar {
    position: fixed;
    inset: 0 0 auto var(--xis-sidebar-width);
    z-index: var(--xis-z-topbar);
    display: flex;
    min-height: var(--xis-topbar-height);
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-4);
    padding: 0 var(--xis-space-5);
    border-bottom: 1px solid var(--xis-border);
    background: color-mix(in srgb, var(--xis-surface) 92%, transparent);
    box-shadow: var(--xis-shadow-xs);
    backdrop-filter: blur(16px) saturate(1.1);
    transition: left var(--xis-duration-slow) var(--xis-ease);
}

@supports not (background: color-mix(in srgb, white 50%, transparent)) {
    .xis-topbar {
        background: rgba(255, 255, 255, 0.94);
    }

    html[data-theme="dark"] .xis-topbar,
    body.xis-theme-dark .xis-topbar {
        background: rgba(11, 18, 32, 0.94);
    }
}

.xis-topbar__left,
.xis-topbar__right {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--xis-space-3);
}

.xis-topbar__title {
    min-width: 0;
}

.xis-topbar__title strong {
    display: block;
    overflow: hidden;
    color: var(--xis-text-strong);
    font-size: var(--xis-fs-md);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xis-topbar__title span {
    display: block;
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
}

.xis-main {
    min-height: 100vh;
    margin-left: var(--xis-sidebar-width);
    padding-top: var(--xis-topbar-height);
    transition: margin-left var(--xis-duration-slow) var(--xis-ease);
}

.xis-content {
    width: min(var(--xis-content-max), calc(100% - 2 * var(--xis-content-padding)));
    margin: 0 auto;
    padding: var(--xis-content-padding) 0 calc(var(--xis-content-padding) * 2);
}

.xis-content--fluid {
    width: 100%;
    max-width: none;
    padding-inline: var(--xis-content-padding);
}

.xis-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--xis-space-5);
    margin-bottom: var(--xis-space-6);
}

.xis-page-head__copy {
    min-width: 0;
}

.xis-page-head__description {
    max-width: 760px;
    margin: var(--xis-space-2) 0 0;
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-base);
}

.xis-page-head__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--xis-space-2);
}

.xis-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--xis-space-2);
    margin: 0 0 var(--xis-space-2);
    padding: 0;
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
    list-style: none;
}

.xis-breadcrumb li+li::before {
    content: "/";
    margin-right: var(--xis-space-2);
    color: var(--xis-text-muted);
}

body.xis-sidebar-collapsed .xis-sidebar {
    width: var(--xis-sidebar-collapsed);
}

body.xis-sidebar-collapsed .xis-topbar {
    left: var(--xis-sidebar-collapsed);
}

body.xis-sidebar-collapsed .xis-main {
    margin-left: var(--xis-sidebar-collapsed);
}

body.xis-sidebar-collapsed .xis-sidebar__brand-copy,
body.xis-sidebar-collapsed .xis-workspace-switcher__copy,
body.xis-sidebar-collapsed .xis-workspace-switcher__chevron,
body.xis-sidebar-collapsed .xis-nav-section__label,
body.xis-sidebar-collapsed .xis-nav__label,
body.xis-sidebar-collapsed .xis-nav__count {
    display: none;
}

body.xis-sidebar-collapsed .xis-sidebar__brand {
    justify-content: center;
    padding-inline: 0;
}

body.xis-sidebar-collapsed .xis-workspace-switcher {
    padding: var(--xis-space-2);
}

body.xis-sidebar-collapsed .xis-workspace-switcher__button {
    grid-template-columns: 36px;
    justify-content: center;
}

body.xis-sidebar-collapsed .xis-nav__link {
    justify-content: center;
    padding-inline: 0;
}

.xis-mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--xis-z-sidebar) - 1);
    display: none;
    background: rgba(2, 6, 23, 0.56);
    backdrop-filter: blur(2px);
}


/* ==========================================================================
   5. BUTTONS AND ACTIONS
   ========================================================================== */

.xis-btn {
    --xis-btn-bg: var(--xis-surface);
    --xis-btn-color: var(--xis-text-strong);
    --xis-btn-border: var(--xis-border);
    --xis-btn-shadow: none;

    display: inline-flex;
    min-height: var(--xis-control-md);
    align-items: center;
    justify-content: center;
    gap: var(--xis-space-2);
    padding: 0 14px;
    border: 1px solid var(--xis-btn-border);
    border-radius: var(--xis-radius-sm);
    background: var(--xis-btn-bg);
    color: var(--xis-btn-color);
    box-shadow: var(--xis-btn-shadow);
    font-size: var(--xis-fs-base);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition:
        transform var(--xis-duration-fast) var(--xis-ease),
        border-color var(--xis-duration-fast) var(--xis-ease),
        background var(--xis-duration-fast) var(--xis-ease),
        color var(--xis-duration-fast) var(--xis-ease),
        box-shadow var(--xis-duration-fast) var(--xis-ease);
}

.xis-btn:hover {
    transform: translateY(-1px);
    border-color: var(--xis-border-strong);
    color: var(--xis-btn-color);
    box-shadow: var(--xis-shadow-sm);
}

.xis-btn:active,
.xis-btn.is-active {
    transform: translateY(0);
    box-shadow: none;
}

.xis-btn:focus-visible {
    outline: none;
    box-shadow: var(--xis-focus-ring);
}

.xis-btn:disabled,
.xis-btn.is-disabled {
    opacity: 0.48;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

.xis-btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    stroke-width: 1.9;
}

.xis-btn--primary {
    --xis-btn-bg: var(--xis-gradient-primary);
    --xis-btn-color: #fff;
    --xis-btn-border: transparent;
    --xis-btn-shadow: 0 10px 22px rgba(var(--xis-primary-rgb), 0.2);
}

.xis-btn--primary:hover {
    filter: saturate(1.04);
    box-shadow: 0 13px 28px rgba(var(--xis-primary-rgb), 0.24);
}

.xis-btn--secondary {
    --xis-btn-bg: var(--xis-navy);
    --xis-btn-color: #fff;
    --xis-btn-border: var(--xis-navy);
}

.xis-btn--outline {
    --xis-btn-bg: transparent;
    --xis-btn-color: var(--xis-primary);
    --xis-btn-border: rgba(var(--xis-primary-rgb), 0.35);
}

.xis-btn--outline:hover {
    --xis-btn-bg: rgba(var(--xis-primary-rgb), 0.07);
    --xis-btn-border: rgba(var(--xis-primary-rgb), 0.55);
}

.xis-btn--ghost {
    --xis-btn-bg: transparent;
    --xis-btn-color: var(--xis-text);
    --xis-btn-border: transparent;
}

.xis-btn--ghost:hover {
    --xis-btn-bg: var(--xis-surface-soft);
    --xis-btn-color: var(--xis-text-strong);
    box-shadow: none;
}

.xis-btn--soft {
    --xis-btn-bg: var(--xis-surface-indigo);
    --xis-btn-color: var(--xis-primary);
    --xis-btn-border: rgba(var(--xis-primary-rgb), 0.12);
}

.xis-btn--success {
    --xis-btn-bg: var(--xis-success);
    --xis-btn-color: #fff;
    --xis-btn-border: var(--xis-success);
}

.xis-btn--warning {
    --xis-btn-bg: var(--xis-warning);
    --xis-btn-color: #2d1d00;
    --xis-btn-border: var(--xis-warning);
}

.xis-btn--danger {
    --xis-btn-bg: var(--xis-danger);
    --xis-btn-color: #fff;
    --xis-btn-border: var(--xis-danger);
}

.xis-btn--danger-soft {
    --xis-btn-bg: var(--xis-surface-danger);
    --xis-btn-color: #b91c1c;
    --xis-btn-border: rgba(var(--xis-danger-rgb), 0.18);
}

.xis-btn--publish {
    --xis-btn-bg: var(--xis-gradient-primary);
    --xis-btn-color: #fff;
    --xis-btn-border: transparent;
    --xis-btn-shadow: 0 10px 24px rgba(var(--xis-primary-rgb), 0.22);
}

.xis-btn--schedule {
    --xis-btn-bg: var(--xis-navy);
    --xis-btn-color: #fff;
    --xis-btn-border: var(--xis-navy);
}

.xis-btn--xs {
    min-height: var(--xis-control-xs);
    padding-inline: 9px;
    font-size: var(--xis-fs-xs);
}

.xis-btn--sm {
    min-height: var(--xis-control-sm);
    padding-inline: 11px;
    font-size: var(--xis-fs-sm);
}

.xis-btn--lg {
    min-height: var(--xis-control-lg);
    padding-inline: 18px;
    font-size: var(--xis-fs-md);
}

.xis-btn--xl {
    min-height: var(--xis-control-xl);
    padding-inline: 22px;
    font-size: var(--xis-fs-lg);
}

.xis-btn--block {
    width: 100%;
}

.xis-icon-btn {
    display: inline-grid;
    width: var(--xis-control-md);
    height: var(--xis-control-md);
    place-items: center;
    padding: 0;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-sm);
    background: var(--xis-surface);
    color: var(--xis-text-soft);
    cursor: pointer;
    transition:
        color var(--xis-duration-fast) var(--xis-ease),
        background var(--xis-duration-fast) var(--xis-ease),
        border-color var(--xis-duration-fast) var(--xis-ease),
        transform var(--xis-duration-fast) var(--xis-ease);
}

.xis-icon-btn:hover {
    transform: translateY(-1px);
    border-color: var(--xis-border-strong);
    background: var(--xis-surface-soft);
    color: var(--xis-primary);
}

.xis-icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--xis-focus-ring);
}

.xis-icon-btn[aria-pressed="true"],
.xis-icon-btn.is-active {
    border-color: rgba(var(--xis-primary-rgb), 0.28);
    background: var(--xis-surface-indigo);
    color: var(--xis-primary);
}

.xis-icon-btn--sm {
    width: var(--xis-control-sm);
    height: var(--xis-control-sm);
}

.xis-icon-btn--lg {
    width: var(--xis-control-lg);
    height: var(--xis-control-lg);
}

.xis-icon-btn svg {
    width: 18px;
    height: 18px;
}

.xis-btn.is-loading,
.xis-icon-btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.xis-btn.is-loading::after,
.xis-icon-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--xis-primary);
    animation: xis-spin 0.75s linear infinite;
}

.xis-btn--primary.is-loading::after,
.xis-btn--publish.is-loading::after,
.xis-btn--secondary.is-loading::after,
.xis-btn--success.is-loading::after,
.xis-btn--danger.is-loading::after {
    color: #fff;
}

.xis-btn-group,
.xis-segmented {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface-soft);
}

.xis-segmented__item {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    gap: var(--xis-space-2);
    padding: 0 11px;
    border: 0;
    border-radius: calc(var(--xis-radius-md) - 3px);
    background: transparent;
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-sm);
    font-weight: 500;
    cursor: pointer;
}

.xis-segmented__item:hover {
    color: var(--xis-text-strong);
}

.xis-segmented__item[aria-pressed="true"],
.xis-segmented__item.is-active {
    background: var(--xis-surface);
    color: var(--xis-primary);
    box-shadow: var(--xis-shadow-xs);
}

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


/* ==========================================================================
   6. CARDS, METRICS, BADGES AND AVATARS
   ========================================================================== */

.xis-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-lg);
    background: var(--xis-surface);
    box-shadow: var(--xis-shadow-xs);
}

.xis-card--raised {
    box-shadow: var(--xis-shadow-md);
}

.xis-card--interactive {
    cursor: pointer;
    transition:
        transform var(--xis-duration-base) var(--xis-ease),
        border-color var(--xis-duration-base) var(--xis-ease),
        box-shadow var(--xis-duration-base) var(--xis-ease);
}

.xis-card--interactive:hover,
.xis-card--interactive:focus-within {
    transform: translateY(-2px);
    border-color: rgba(var(--xis-primary-rgb), 0.28);
    box-shadow: var(--xis-shadow-md);
}

.xis-card.is-selected {
    border-color: var(--xis-primary);
    box-shadow:
        0 0 0 3px rgba(var(--xis-primary-rgb), 0.12),
        var(--xis-shadow-sm);
}

.xis-card__header,
.xis-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-4);
    padding: var(--xis-space-4) var(--xis-space-5);
}

.xis-card__header {
    border-bottom: 1px solid var(--xis-divider);
}

.xis-card__footer {
    border-top: 1px solid var(--xis-divider);
    background: var(--xis-surface-soft);
}

.xis-card__body {
    padding: var(--xis-space-5);
}

.xis-card__description {
    margin: var(--xis-space-1) 0 0;
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-sm);
}

.xis-metric-card {
    display: grid;
    min-height: 132px;
    gap: var(--xis-space-3);
    padding: var(--xis-space-5);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-lg);
    background:
        radial-gradient(circle at 100% 0, rgba(var(--xis-primary-rgb), 0.08), transparent 38%),
        var(--xis-surface);
    box-shadow: var(--xis-shadow-xs);
}

.xis-metric-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--xis-space-3);
}

.xis-metric-card__icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface-indigo);
    color: var(--xis-primary);
}

.xis-metric-card__label {
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-sm);
    font-weight: 500;
}

.xis-metric-card__value {
    color: var(--xis-text-strong);
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
}

.xis-metric-card__meta {
    display: flex;
    align-items: center;
    gap: var(--xis-space-2);
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
}

.xis-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--xis-fs-xs);
    font-weight: 600;
}

.xis-trend--up {
    color: var(--xis-success);
}

.xis-trend--down {
    color: var(--xis-danger);
}

.xis-badge {
    --xis-badge-bg: var(--xis-surface-soft);
    --xis-badge-color: var(--xis-text-soft);
    --xis-badge-border: var(--xis-border);

    display: inline-flex;
    min-height: 24px;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 2px 8px;
    border: 1px solid var(--xis-badge-border);
    border-radius: var(--xis-radius-pill);
    background: var(--xis-badge-bg);
    color: var(--xis-badge-color);
    font-size: var(--xis-fs-2xs);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.xis-badge::before {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.xis-badge--primary {
    --xis-badge-bg: var(--xis-surface-indigo);
    --xis-badge-color: var(--xis-primary);
    --xis-badge-border: rgba(var(--xis-primary-rgb), 0.14);
}

.xis-badge--success {
    --xis-badge-bg: var(--xis-surface-success);
    --xis-badge-color: #047857;
    --xis-badge-border: rgba(var(--xis-success-rgb), 0.16);
}

.xis-badge--warning {
    --xis-badge-bg: var(--xis-surface-warning);
    --xis-badge-color: #b45309;
    --xis-badge-border: rgba(var(--xis-warning-rgb), 0.18);
}

.xis-badge--danger {
    --xis-badge-bg: var(--xis-surface-danger);
    --xis-badge-color: #b91c1c;
    --xis-badge-border: rgba(var(--xis-danger-rgb), 0.16);
}

.xis-badge--info {
    --xis-badge-bg: var(--xis-surface-info);
    --xis-badge-color: #1d4ed8;
    --xis-badge-border: rgba(var(--xis-info-rgb), 0.16);
}

.xis-badge--neutral::before,
.xis-chip::before,
.xis-tag::before {
    display: none;
}

.xis-chip,
.xis-tag {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 9px;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-pill);
    background: var(--xis-surface);
    color: var(--xis-text);
    font-size: var(--xis-fs-xs);
    font-weight: 500;
}

.xis-chip.is-selected {
    border-color: rgba(var(--xis-primary-rgb), 0.28);
    background: var(--xis-surface-indigo);
    color: var(--xis-primary);
}

.xis-tag {
    border-radius: var(--xis-radius-sm);
    background: var(--xis-surface-soft);
}

.xis-avatar {
    display: inline-grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border: 2px solid var(--xis-surface);
    border-radius: 50%;
    background: var(--xis-gradient-primary);
    color: #fff;
    font-size: var(--xis-fs-sm);
    font-weight: 600;
}

.xis-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xis-avatar--sm {
    width: 28px;
    height: 28px;
    font-size: var(--xis-fs-2xs);
}

.xis-avatar--lg {
    width: 48px;
    height: 48px;
    font-size: var(--xis-fs-md);
}

.xis-avatar--xl {
    width: 64px;
    height: 64px;
    font-size: var(--xis-fs-xl);
}

.xis-avatar-group {
    display: flex;
    align-items: center;
}

.xis-avatar-group .xis-avatar+.xis-avatar {
    margin-left: -9px;
}

.xis-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--xis-text-muted);
}

.xis-status-dot--success {
    background: var(--xis-success);
}

.xis-status-dot--warning {
    background: var(--xis-warning);
}

.xis-status-dot--danger {
    background: var(--xis-danger);
}

.xis-status-dot--info {
    background: var(--xis-info);
}


/* ==========================================================================
   7. FORMS
   ========================================================================== */

.xis-form {
    display: grid;
    gap: var(--xis-space-5);
}

.xis-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--xis-space-4);
}

.xis-field {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.xis-field--wide {
    grid-column: 1 / -1;
}

.xis-field__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-2);
    color: var(--xis-text-strong);
    font-size: var(--xis-fs-sm);
    font-weight: 500;
}

.xis-field__required {
    color: var(--xis-danger);
}

.xis-field__optional,
.xis-field__count,
.xis-field__help {
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
}

.xis-field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--xis-space-2);
    color: #b91c1c;
    font-size: var(--xis-fs-xs);
}

.xis-control,
.xis-select,
.xis-textarea {
    width: 100%;
    min-height: var(--xis-control-lg);
    padding: 9px 12px;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-sm);
    background: var(--xis-surface);
    color: var(--xis-text-strong);
    font-size: var(--xis-fs-base);
    transition:
        border-color var(--xis-duration-fast) var(--xis-ease),
        box-shadow var(--xis-duration-fast) var(--xis-ease),
        background var(--xis-duration-fast) var(--xis-ease);
}

.xis-control::placeholder,
.xis-textarea::placeholder {
    color: var(--xis-text-muted);
}

.xis-control:hover,
.xis-select:hover,
.xis-textarea:hover {
    border-color: var(--xis-border-strong);
}

.xis-control:focus,
.xis-select:focus,
.xis-textarea:focus {
    outline: none;
    border-color: var(--xis-primary);
    box-shadow: var(--xis-focus-ring);
}

.xis-control:disabled,
.xis-select:disabled,
.xis-textarea:disabled {
    background: var(--xis-surface-soft);
    color: var(--xis-text-muted);
    cursor: not-allowed;
}

.xis-control[readonly],
.xis-textarea[readonly] {
    background: var(--xis-surface-soft);
    color: var(--xis-text);
}

.xis-control.is-invalid,
.xis-select.is-invalid,
.xis-textarea.is-invalid,
.xis-field.is-invalid .xis-control,
.xis-field.is-invalid .xis-select,
.xis-field.is-invalid .xis-textarea {
    border-color: var(--xis-danger);
    box-shadow: 0 0 0 3px rgba(var(--xis-danger-rgb), 0.1);
}

.xis-control.is-valid,
.xis-select.is-valid,
.xis-textarea.is-valid {
    border-color: var(--xis-success);
}

.xis-textarea {
    min-height: 112px;
    resize: vertical;
}

.xis-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.xis-input-wrap .xis-control {
    padding-left: 40px;
}

.xis-input-wrap--suffix .xis-control {
    padding-right: 42px;
}

.xis-input-wrap__icon,
.xis-input-wrap__action {
    position: absolute;
    z-index: 1;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--xis-text-soft);
}

.xis-input-wrap__icon {
    left: 3px;
    pointer-events: none;
}

.xis-input-wrap__action {
    right: 3px;
    cursor: pointer;
}

.xis-search {
    position: relative;
}

.xis-search__input {
    padding-left: 40px;
}

.xis-search__icon {
    position: absolute;
    top: 50%;
    left: 13px;
    width: 16px;
    height: 16px;
    color: var(--xis-text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.xis-check,
.xis-radio {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--xis-space-2);
    color: var(--xis-text);
    font-size: var(--xis-fs-base);
    cursor: pointer;
}

.xis-check input,
.xis-radio input {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin-top: 2px;
    accent-color: var(--xis-primary);
}

.xis-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--xis-space-3);
    cursor: pointer;
}

.xis-switch__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.xis-switch__track {
    position: relative;
    width: 42px;
    height: 24px;
    flex: 0 0 42px;
    border: 1px solid var(--xis-border-strong);
    border-radius: var(--xis-radius-pill);
    background: var(--xis-slate-200);
    transition:
        background var(--xis-duration-fast) var(--xis-ease),
        border-color var(--xis-duration-fast) var(--xis-ease);
}

.xis-switch__track::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--xis-shadow-xs);
    content: "";
    transition: transform var(--xis-duration-fast) var(--xis-ease);
}

.xis-switch__input:checked+.xis-switch__track {
    border-color: var(--xis-primary);
    background: var(--xis-primary);
}

.xis-switch__input:checked+.xis-switch__track::after {
    transform: translateX(18px);
}

.xis-switch__input:focus-visible+.xis-switch__track {
    box-shadow: var(--xis-focus-ring);
}

.xis-select-card {
    position: relative;
    display: grid;
    gap: var(--xis-space-2);
    padding: var(--xis-space-4);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface);
    cursor: pointer;
    transition:
        border-color var(--xis-duration-fast) var(--xis-ease),
        background var(--xis-duration-fast) var(--xis-ease),
        box-shadow var(--xis-duration-fast) var(--xis-ease);
}

.xis-select-card:hover {
    border-color: rgba(var(--xis-primary-rgb), 0.28);
}

.xis-select-card.is-selected,
.xis-select-card:has(input:checked) {
    border-color: var(--xis-primary);
    background: var(--xis-surface-indigo);
    box-shadow: 0 0 0 3px rgba(var(--xis-primary-rgb), 0.1);
}

.xis-select-card input {
    position: absolute;
    opacity: 0;
}

.xis-file-dropzone {
    display: grid;
    min-height: 170px;
    place-items: center;
    padding: var(--xis-space-6);
    border: 1.5px dashed var(--xis-border-strong);
    border-radius: var(--xis-radius-lg);
    background: var(--xis-surface-soft);
    color: var(--xis-text-soft);
    text-align: center;
    transition:
        border-color var(--xis-duration-fast) var(--xis-ease),
        background var(--xis-duration-fast) var(--xis-ease);
}

.xis-file-dropzone:hover,
.xis-file-dropzone.is-dragover {
    border-color: var(--xis-primary);
    background: var(--xis-surface-indigo);
}

.xis-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--xis-space-2);
}

.xis-form-actions--sticky {
    position: sticky;
    bottom: 0;
    z-index: var(--xis-z-sticky);
    margin-inline: calc(var(--xis-space-5) * -1);
    margin-bottom: calc(var(--xis-space-5) * -1);
    padding: var(--xis-space-4) var(--xis-space-5);
    border-top: 1px solid var(--xis-border);
    background: color-mix(in srgb, var(--xis-surface) 92%, transparent);
    backdrop-filter: blur(12px);
}

.xis-error-summary {
    padding: var(--xis-space-4);
    border: 1px solid rgba(var(--xis-danger-rgb), 0.2);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface-danger);
    color: #991b1b;
}

.xis-error-summary:focus {
    outline: 2px solid var(--xis-danger);
    outline-offset: 2px;
}


/* ==========================================================================
   8. ALERTS, TABS, DROPDOWNS, TOASTS AND OVERLAYS
   ========================================================================== */

.xis-alert {
    --xis-alert-bg: var(--xis-surface-info);
    --xis-alert-border: rgba(var(--xis-info-rgb), 0.18);
    --xis-alert-color: #1e40af;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--xis-space-3);
    padding: var(--xis-space-4);
    border: 1px solid var(--xis-alert-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-alert-bg);
    color: var(--xis-alert-color);
    font-size: var(--xis-fs-base);
}

.xis-alert--success {
    --xis-alert-bg: var(--xis-surface-success);
    --xis-alert-border: rgba(var(--xis-success-rgb), 0.18);
    --xis-alert-color: #047857;
}

.xis-alert--warning {
    --xis-alert-bg: var(--xis-surface-warning);
    --xis-alert-border: rgba(var(--xis-warning-rgb), 0.2);
    --xis-alert-color: #92400e;
}

.xis-alert--danger {
    --xis-alert-bg: var(--xis-surface-danger);
    --xis-alert-border: rgba(var(--xis-danger-rgb), 0.18);
    --xis-alert-color: #991b1b;
}

.xis-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-4);
    padding: var(--xis-space-3) var(--xis-space-5);
    border-bottom: 1px solid var(--xis-border);
    background: var(--xis-surface-indigo);
    color: var(--xis-text);
}

.xis-tabs {
    display: flex;
    align-items: center;
    gap: var(--xis-space-1);
    overflow-x: auto;
    border-bottom: 1px solid var(--xis-border);
    scrollbar-width: none;
}

.xis-tabs::-webkit-scrollbar {
    display: none;
}

.xis-tab {
    position: relative;
    display: inline-flex;
    min-height: 42px;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--xis-space-2);
    padding: 0 var(--xis-space-3);
    border: 0;
    background: transparent;
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-base);
    font-weight: 500;
    cursor: pointer;
}

.xis-tab:hover {
    color: var(--xis-text-strong);
}

.xis-tab[aria-selected="true"],
.xis-tab.is-active {
    color: var(--xis-primary);
}

.xis-tab[aria-selected="true"]::after,
.xis-tab.is-active::after {
    position: absolute;
    right: var(--xis-space-2);
    bottom: -1px;
    left: var(--xis-space-2);
    height: 2px;
    border-radius: var(--xis-radius-pill);
    background: var(--xis-primary);
    content: "";
}

.xis-tabs--pills {
    gap: var(--xis-space-1);
    padding: 3px;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface-soft);
}

.xis-tabs--pills .xis-tab {
    min-height: 34px;
    border-radius: calc(var(--xis-radius-md) - 3px);
}

.xis-tabs--pills .xis-tab[aria-selected="true"],
.xis-tabs--pills .xis-tab.is-active {
    background: var(--xis-surface);
    box-shadow: var(--xis-shadow-xs);
}

.xis-tabs--pills .xis-tab::after {
    display: none;
}

.xis-dropdown,
.xis-popover {
    position: absolute;
    z-index: var(--xis-z-dropdown);
    min-width: 220px;
    overflow: hidden;
    padding: var(--xis-space-2);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface-raised);
    box-shadow: var(--xis-shadow-lg);
}

.xis-dropdown__item {
    display: flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    gap: var(--xis-space-3);
    padding: 8px 10px;
    border: 0;
    border-radius: var(--xis-radius-sm);
    background: transparent;
    color: var(--xis-text);
    font-size: var(--xis-fs-base);
    text-align: left;
    cursor: pointer;
}

.xis-dropdown__item:hover,
.xis-dropdown__item:focus-visible {
    outline: none;
    background: var(--xis-surface-soft);
    color: var(--xis-text-strong);
}

.xis-dropdown__item--danger {
    color: var(--xis-danger);
}

.xis-dropdown__divider {
    height: 1px;
    margin: var(--xis-space-2) 0;
    background: var(--xis-divider);
}

.xis-tooltip {
    position: fixed;
    z-index: var(--xis-z-tooltip);
    max-width: 240px;
    padding: 6px 9px;
    border-radius: var(--xis-radius-xs);
    background: var(--xis-slate-900);
    color: #fff;
    font-size: var(--xis-fs-xs);
    line-height: 1.35;
    box-shadow: var(--xis-shadow-md);
    pointer-events: none;
}

.xis-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--xis-z-overlay);
    display: grid;
    place-items: center;
    padding: var(--xis-space-4);
    background: rgba(2, 6, 23, 0.56);
    backdrop-filter: blur(4px);
}

.xis-modal {
    display: flex;
    width: min(100%, 640px);
    max-height: min(92vh, 900px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-xl);
    background: var(--xis-surface-raised);
    box-shadow: var(--xis-shadow-xl);
}

.xis-modal--sm {
    width: min(100%, 420px);
}

.xis-modal--lg {
    width: min(100%, 820px);
}

.xis-modal--xl {
    width: min(100%, 1040px);
}

.xis-modal__header,
.xis-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-4);
    padding: var(--xis-space-4) var(--xis-space-5);
}

.xis-modal__header {
    border-bottom: 1px solid var(--xis-border);
}

.xis-modal__body {
    min-height: 0;
    overflow: auto;
    padding: var(--xis-space-5);
}

.xis-modal__footer {
    justify-content: flex-end;
    border-top: 1px solid var(--xis-border);
    background: var(--xis-surface-soft);
}

.xis-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: var(--xis-z-drawer);
    display: flex;
    width: min(420px, 100%);
    flex-direction: column;
    border-left: 1px solid var(--xis-border);
    background: var(--xis-surface-raised);
    box-shadow: var(--xis-shadow-xl);
}

.xis-drawer--left {
    inset: 0 auto 0 0;
    border-right: 1px solid var(--xis-border);
    border-left: 0;
}

.xis-toast-stack {
    position: fixed;
    right: var(--xis-space-5);
    bottom: var(--xis-space-5);
    z-index: var(--xis-z-toast);
    display: grid;
    width: min(380px, calc(100vw - 2 * var(--xis-space-4)));
    gap: var(--xis-space-3);
}

.xis-toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--xis-space-3);
    padding: var(--xis-space-4);
    border: 1px solid var(--xis-border);
    border-left: 4px solid var(--xis-info);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface-raised);
    color: var(--xis-text);
    box-shadow: var(--xis-shadow-lg);
    animation: xis-toast-in var(--xis-duration-slow) var(--xis-ease);
}

.xis-toast--success {
    border-left-color: var(--xis-success);
}

.xis-toast--warning {
    border-left-color: var(--xis-warning);
}

.xis-toast--danger {
    border-left-color: var(--xis-danger);
}

@keyframes xis-toast-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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


/* ==========================================================================
   9. TABLES, LISTS, PAGINATION AND DATA DISPLAY
   ========================================================================== */

.xis-table-wrap {
    overflow: auto;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-lg);
    background: var(--xis-surface);
}

.xis-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    color: var(--xis-text);
    font-size: var(--xis-fs-base);
    font-variant-numeric: tabular-nums;
}

.xis-table caption {
    padding: var(--xis-space-3) var(--xis-space-4);
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
    text-align: left;
}

.xis-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 11px 13px;
    border-bottom: 1px solid var(--xis-border);
    background: var(--xis-surface-soft);
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
    font-weight: 600;
    letter-spacing: 0.035em;
    text-align: left;
    white-space: nowrap;
}

.xis-table td {
    padding: 12px 13px;
    border-bottom: 1px solid var(--xis-divider);
    vertical-align: middle;
}

.xis-table tbody tr {
    transition: background var(--xis-duration-fast) var(--xis-ease);
}

.xis-table tbody tr:hover {
    background: rgba(var(--xis-primary-rgb), 0.035);
}

.xis-table tbody tr.is-selected {
    background: rgba(var(--xis-primary-rgb), 0.08);
}

.xis-table tbody tr:last-child td {
    border-bottom: 0;
}

.xis-table--compact th {
    padding-block: 8px;
}

.xis-table--compact td {
    padding-block: 9px;
    font-size: var(--xis-fs-sm);
}

.xis-table__entity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--xis-space-3);
}

.xis-table__entity-copy {
    min-width: 0;
}

.xis-table__entity-title {
    overflow: hidden;
    color: var(--xis-text-strong);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xis-table__entity-meta {
    margin-top: 2px;
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
}

.xis-table__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--xis-space-1);
}

.xis-bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-4);
    padding: var(--xis-space-3) var(--xis-space-4);
    border: 1px solid rgba(var(--xis-primary-rgb), 0.18);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface-indigo);
}

.xis-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xis-list-item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--xis-space-3);
    padding: var(--xis-space-3) var(--xis-space-4);
    border-bottom: 1px solid var(--xis-divider);
}

.xis-list-item:last-child {
    border-bottom: 0;
}

.xis-list-item--interactive {
    cursor: pointer;
}

.xis-list-item--interactive:hover {
    background: var(--xis-surface-soft);
}

.xis-list-item__content {
    min-width: 0;
    flex: 1;
}

.xis-list-item__title {
    color: var(--xis-text-strong);
    font-weight: 500;
}

.xis-list-item__meta {
    margin-top: 2px;
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
}

.xis-description-list {
    display: grid;
    grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
    gap: var(--xis-space-3) var(--xis-space-5);
    margin: 0;
}

.xis-description-list dt {
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-sm);
    font-weight: 500;
}

.xis-description-list dd {
    min-width: 0;
    margin: 0;
    color: var(--xis-text-strong);
}

.xis-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-3);
}

.xis-pagination__pages {
    display: flex;
    align-items: center;
    gap: var(--xis-space-1);
}

.xis-page-btn {
    display: inline-grid;
    min-width: 34px;
    height: 34px;
    place-items: center;
    padding: 0 8px;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-sm);
    background: var(--xis-surface);
    color: var(--xis-text);
    font-size: var(--xis-fs-sm);
    cursor: pointer;
}

.xis-page-btn:hover {
    border-color: rgba(var(--xis-primary-rgb), 0.3);
    color: var(--xis-primary);
}

.xis-page-btn[aria-current="page"],
.xis-page-btn.is-active {
    border-color: var(--xis-primary);
    background: var(--xis-primary);
    color: #fff;
}

.xis-timeline {
    position: relative;
    display: grid;
    gap: var(--xis-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.xis-timeline::before {
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 8px;
    width: 1px;
    background: var(--xis-border);
    content: "";
}

.xis-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: var(--xis-space-3);
}

.xis-timeline__dot {
    z-index: 1;
    width: 9px;
    height: 9px;
    margin: 5px auto 0;
    border: 2px solid var(--xis-surface);
    border-radius: 50%;
    background: var(--xis-primary);
    box-shadow: 0 0 0 2px rgba(var(--xis-primary-rgb), 0.18);
}

.xis-timeline__content {
    padding-bottom: var(--xis-space-2);
}

.xis-timeline__title {
    color: var(--xis-text-strong);
    font-weight: 500;
}

.xis-timeline__meta {
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
}


/* ==========================================================================
   10. PROGRESS, LOADING, EMPTY AND ERROR STATES
   ========================================================================== */

.xis-progress {
    overflow: hidden;
    width: 100%;
    height: 8px;
    border-radius: var(--xis-radius-pill);
    background: var(--xis-slate-200);
}

.xis-progress__bar {
    height: 100%;
    border-radius: inherit;
    background: var(--xis-gradient-primary);
    transition: width var(--xis-duration-slow) var(--xis-ease);
}

.xis-progress--success .xis-progress__bar {
    background: var(--xis-gradient-success);
}

.xis-progress--warning .xis-progress__bar {
    background: var(--xis-gradient-warning);
}

.xis-progress--danger .xis-progress__bar {
    background: var(--xis-gradient-danger);
}

.xis-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(var(--xis-primary-rgb), 0.2);
    border-top-color: var(--xis-primary);
    border-radius: 50%;
    animation: xis-spin 0.75s linear infinite;
}

.xis-skeleton {
    position: relative;
    overflow: hidden;
    border-radius: var(--xis-radius-sm);
    background: var(--xis-slate-200);
}

.xis-skeleton::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.55),
            transparent);
    content: "";
    transform: translateX(-100%);
    animation: xis-shimmer 1.25s infinite;
}

html[data-theme="dark"] .xis-skeleton,
body.xis-theme-dark .xis-skeleton {
    background: #1f2937;
}

html[data-theme="dark"] .xis-skeleton::after,
body.xis-theme-dark .xis-skeleton::after {
    background: linear-gradient(90deg,
            transparent,
            rgba(148, 163, 184, 0.12),
            transparent);
}

.xis-skeleton--text {
    height: 12px;
}

.xis-skeleton--title {
    width: 60%;
    height: 20px;
}

.xis-skeleton--avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

@keyframes xis-shimmer {
    to {
        transform: translateX(100%);
    }
}

.xis-state {
    display: grid;
    min-height: 280px;
    place-items: center;
    padding: var(--xis-space-8);
    text-align: center;
}

.xis-state__inner {
    max-width: 520px;
}

.xis-state__icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin: 0 auto var(--xis-space-4);
    place-items: center;
    border-radius: var(--xis-radius-lg);
    background: var(--xis-surface-indigo);
    color: var(--xis-primary);
}

.xis-state__title {
    margin-bottom: var(--xis-space-2);
    font-size: var(--xis-fs-xl);
}

.xis-state__description {
    margin: 0 auto var(--xis-space-5);
    color: var(--xis-text-soft);
}

.xis-state--danger .xis-state__icon {
    background: var(--xis-surface-danger);
    color: var(--xis-danger);
}

.xis-state--warning .xis-state__icon {
    background: var(--xis-surface-warning);
    color: var(--xis-warning);
}

.xis-error-boundary {
    padding: var(--xis-space-5);
    border: 1px solid rgba(var(--xis-danger-rgb), 0.2);
    border-radius: var(--xis-radius-lg);
    background: var(--xis-surface-danger);
}


/* ==========================================================================
   11. NETWORK AND SOCIAL ACCOUNT COMPONENTS
   ========================================================================== */

.samaji-network-icon {
    --samaji-network-color: var(--xis-primary);

    display: inline-grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--samaji-network-color) 25%, transparent);
    border-radius: var(--xis-radius-sm);
    background: color-mix(in srgb, var(--samaji-network-color) 10%, var(--xis-surface));
    color: var(--samaji-network-color);
}

@supports not (background: color-mix(in srgb, red 10%, white)) {
    .samaji-network-icon {
        border-color: var(--xis-border);
        background: var(--xis-surface-soft);
    }
}

.samaji-network-icon--facebook {
    --samaji-network-color: var(--samaji-facebook);
}

.samaji-network-icon--instagram {
    --samaji-network-color: var(--samaji-instagram);
}

.samaji-network-icon--linkedin {
    --samaji-network-color: var(--samaji-linkedin);
}

.samaji-network-icon--x {
    --samaji-network-color: var(--samaji-x);
}

.samaji-network-icon--youtube {
    --samaji-network-color: var(--samaji-youtube);
}

.samaji-network-icon--tiktok {
    --samaji-network-color: var(--samaji-tiktok);
}

.samaji-network-icon--pinterest {
    --samaji-network-color: var(--samaji-pinterest);
}

.samaji-network-icon--google {
    --samaji-network-color: var(--samaji-google);
}

.samaji-network-icon--threads {
    --samaji-network-color: var(--samaji-threads);
}

.samaji-network-icon--whatsapp {
    --samaji-network-color: var(--samaji-whatsapp);
}

.samaji-network-stack {
    display: flex;
    align-items: center;
}

.samaji-network-stack .samaji-network-icon+.samaji-network-icon {
    margin-left: -7px;
}

.samaji-account-card {
    --samaji-account-color: var(--xis-primary);

    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--xis-space-3);
    padding: var(--xis-space-4);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface);
    overflow: hidden;
}

.samaji-account-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--samaji-account-color);
    content: "";
}

.samaji-account-card--facebook {
    --samaji-account-color: var(--samaji-facebook);
}

.samaji-account-card--instagram {
    --samaji-account-color: var(--samaji-instagram);
}

.samaji-account-card--linkedin {
    --samaji-account-color: var(--samaji-linkedin);
}

.samaji-account-card--x {
    --samaji-account-color: var(--samaji-x);
}

.samaji-account-card--youtube {
    --samaji-account-color: var(--samaji-youtube);
}

.samaji-account-card--tiktok {
    --samaji-account-color: var(--samaji-tiktok);
}

.samaji-account-card--google {
    --samaji-account-color: var(--samaji-google);
}

.samaji-account-card--whatsapp {
    --samaji-account-color: var(--samaji-whatsapp);
}

.samaji-account-card__name {
    overflow: hidden;
    color: var(--xis-text-strong);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.samaji-account-card__handle,
.samaji-account-card__meta {
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
}

.samaji-connection-health {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
}

.samaji-connection-health.is-healthy {
    color: var(--xis-success);
}

.samaji-connection-health.is-warning {
    color: var(--xis-warning);
}

.samaji-connection-health.is-error {
    color: var(--xis-danger);
}

.samaji-account-selector {
    display: grid;
    gap: var(--xis-space-2);
    max-height: 380px;
    overflow: auto;
}

.samaji-account-option {
    display: grid;
    grid-template-columns: auto 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--xis-space-3);
    padding: 9px 10px;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface);
    cursor: pointer;
}

.samaji-account-option:hover {
    border-color: rgba(var(--xis-primary-rgb), 0.25);
    background: var(--xis-surface-soft);
}

.samaji-account-option.is-selected {
    border-color: var(--xis-primary);
    background: var(--xis-surface-indigo);
}

.samaji-account-option input {
    accent-color: var(--xis-primary);
}


/* ==========================================================================
   12. DASHBOARD
   ========================================================================== */

.samaji-dashboard-alerts {
    display: grid;
    gap: var(--xis-space-3);
    margin-bottom: var(--xis-space-5);
}

.samaji-dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--xis-space-4);
    margin-bottom: var(--xis-space-5);
}

.samaji-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--xis-space-4);
}

.samaji-dashboard-grid>.span-3 {
    grid-column: span 3;
}

.samaji-dashboard-grid>.span-4 {
    grid-column: span 4;
}

.samaji-dashboard-grid>.span-5 {
    grid-column: span 5;
}

.samaji-dashboard-grid>.span-6 {
    grid-column: span 6;
}

.samaji-dashboard-grid>.span-7 {
    grid-column: span 7;
}

.samaji-dashboard-grid>.span-8 {
    grid-column: span 8;
}

.samaji-dashboard-grid>.span-12 {
    grid-column: 1 / -1;
}

.samaji-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--xis-space-3);
}

.samaji-quick-action {
    display: flex;
    min-height: 94px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--xis-space-3);
    padding: var(--xis-space-4);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface);
    color: var(--xis-text);
    cursor: pointer;
    transition:
        transform var(--xis-duration-fast) var(--xis-ease),
        border-color var(--xis-duration-fast) var(--xis-ease),
        box-shadow var(--xis-duration-fast) var(--xis-ease);
}

.samaji-quick-action:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--xis-primary-rgb), 0.28);
    box-shadow: var(--xis-shadow-sm);
}

.samaji-quick-action__icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface-indigo);
    color: var(--xis-primary);
}

.samaji-setup-checklist {
    display: grid;
    gap: var(--xis-space-3);
}

.samaji-setup-step {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--xis-space-3);
    padding: var(--xis-space-3);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface);
}

.samaji-setup-step__number {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: var(--xis-surface-indigo);
    color: var(--xis-primary);
    font-size: var(--xis-fs-xs);
    font-weight: 700;
}

.samaji-setup-step.is-complete .samaji-setup-step__number {
    background: var(--xis-success);
    color: #fff;
}


/* ==========================================================================
   13. PLANNER AND CALENDAR
   ========================================================================== */

.samaji-planner {
    display: flex;
    min-height: calc(100vh - var(--xis-topbar-height) - 48px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-lg);
    background: var(--xis-surface);
}

.samaji-planner__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-3);
    padding: var(--xis-space-3) var(--xis-space-4);
    border-bottom: 1px solid var(--xis-border);
}

.samaji-planner__toolbar-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--xis-space-2);
}

.samaji-calendar {
    min-width: 900px;
    flex: 1;
    overflow: auto;
}

.samaji-calendar__weekdays,
.samaji-calendar__month {
    display: grid;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
}

.samaji-calendar__weekdays {
    position: sticky;
    top: 0;
    z-index: 3;
    border-bottom: 1px solid var(--xis-border);
    background: var(--xis-surface-soft);
}

.samaji-calendar__weekday {
    padding: 9px 10px;
    border-right: 1px solid var(--xis-divider);
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
    font-weight: 600;
    text-align: center;
}

.samaji-calendar__day {
    position: relative;
    min-height: 150px;
    padding: var(--xis-space-2);
    border-right: 1px solid var(--xis-divider);
    border-bottom: 1px solid var(--xis-divider);
    background: var(--xis-surface);
}

.samaji-calendar__day.is-outside {
    background: var(--xis-surface-soft);
    color: var(--xis-text-muted);
}

.samaji-calendar__day.is-today {
    background: rgba(var(--xis-primary-rgb), 0.025);
}

.samaji-calendar__day.is-drop-target {
    background: var(--xis-surface-indigo);
    box-shadow: inset 0 0 0 2px var(--xis-primary);
}

.samaji-calendar__date {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    margin-bottom: var(--xis-space-2);
    border-radius: 50%;
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-sm);
}

.samaji-calendar__day.is-today .samaji-calendar__date {
    background: var(--xis-primary);
    color: #fff;
    font-weight: 600;
}

.samaji-calendar__items {
    display: grid;
    gap: 5px;
}

.samaji-calendar-item {
    --samaji-item-color: var(--xis-primary);

    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 5px 7px;
    border: 1px solid var(--xis-border);
    border-left: 3px solid var(--samaji-item-color);
    border-radius: var(--xis-radius-sm);
    background: var(--xis-surface);
    box-shadow: var(--xis-shadow-xs);
    cursor: pointer;
}

.samaji-calendar-item:hover {
    border-color: rgba(var(--xis-primary-rgb), 0.22);
    box-shadow: var(--xis-shadow-sm);
}

.samaji-calendar-item--draft {
    --samaji-item-color: var(--xis-slate-400);
}

.samaji-calendar-item--review {
    --samaji-item-color: var(--xis-secondary);
}

.samaji-calendar-item--approved {
    --samaji-item-color: var(--xis-info);
}

.samaji-calendar-item--scheduled {
    --samaji-item-color: var(--xis-primary);
}

.samaji-calendar-item--publishing {
    --samaji-item-color: var(--xis-warning);
}

.samaji-calendar-item--published {
    --samaji-item-color: var(--xis-success);
}

.samaji-calendar-item--failed {
    --samaji-item-color: var(--xis-danger);
}

.samaji-calendar-item__thumb {
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: var(--xis-radius-xs);
    background: var(--xis-surface-soft);
}

.samaji-calendar-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.samaji-calendar-item__copy {
    min-width: 0;
}

.samaji-calendar-item__title {
    overflow: hidden;
    color: var(--xis-text-strong);
    font-size: var(--xis-fs-xs);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.samaji-calendar-item__meta {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-2xs);
}

.samaji-agenda {
    display: grid;
    gap: var(--xis-space-4);
}

.samaji-agenda__day {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: var(--xis-space-4);
}

.samaji-agenda__date {
    position: sticky;
    top: calc(var(--xis-topbar-height) + var(--xis-space-4));
    align-self: start;
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-sm);
    font-weight: 600;
}

.samaji-agenda__items {
    display: grid;
    gap: var(--xis-space-2);
}


/* ==========================================================================
   14. COMPOSER
   ========================================================================== */

.samaji-composer {
    display: grid;
    min-height: calc(100vh - var(--xis-topbar-height) - 48px);
    grid-template-columns: minmax(360px, 1fr) minmax(320px, 440px);
    overflow: hidden;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-lg);
    background: var(--xis-surface);
}

.samaji-composer__editor {
    min-width: 0;
    border-right: 1px solid var(--xis-border);
}

.samaji-composer__preview {
    min-width: 0;
    background: var(--xis-surface-soft);
}

.samaji-composer__header,
.samaji-composer__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-4);
    padding: var(--xis-space-4) var(--xis-space-5);
}

.samaji-composer__header {
    border-bottom: 1px solid var(--xis-border);
}

.samaji-composer__body {
    display: grid;
    gap: var(--xis-space-5);
    padding: var(--xis-space-5);
}

.samaji-composer__footer {
    position: sticky;
    bottom: 0;
    z-index: var(--xis-z-sticky);
    border-top: 1px solid var(--xis-border);
    background: color-mix(in srgb, var(--xis-surface) 94%, transparent);
    backdrop-filter: blur(12px);
}

.samaji-composer-section {
    display: grid;
    gap: var(--xis-space-3);
}

.samaji-composer-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-3);
}

.samaji-caption {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface);
}

.samaji-caption__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 7px;
    border-bottom: 1px solid var(--xis-border);
    background: var(--xis-surface-soft);
}

.samaji-caption__editor {
    width: 100%;
    min-height: 190px;
    padding: var(--xis-space-4);
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--xis-text-strong);
    font: inherit;
    line-height: 1.65;
    resize: vertical;
}

.samaji-caption__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-3);
    padding: 8px 12px;
    border-top: 1px solid var(--xis-divider);
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
}

.samaji-character-count.is-warning {
    color: var(--xis-warning);
}

.samaji-character-count.is-error {
    color: var(--xis-danger);
    font-weight: 600;
}

.samaji-hashtag-list,
.samaji-mention-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--xis-space-2);
}

.samaji-hashtag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid rgba(var(--xis-primary-rgb), 0.16);
    border-radius: var(--xis-radius-pill);
    background: var(--xis-surface-indigo);
    color: var(--xis-primary);
    font-size: var(--xis-fs-xs);
}

.samaji-media-tray {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: var(--xis-space-3);
}

.samaji-media-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface-soft);
}

.samaji-media-item img,
.samaji-media-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.samaji-media-item__overlay {
    position: absolute;
    inset: auto 6px 6px;
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--xis-duration-fast) var(--xis-ease);
}

.samaji-media-item:hover .samaji-media-item__overlay,
.samaji-media-item:focus-within .samaji-media-item__overlay {
    opacity: 1;
}

.samaji-media-item__order {
    position: absolute;
    top: 6px;
    left: 6px;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    background: rgba(10, 31, 68, 0.86);
    color: #fff;
    font-size: var(--xis-fs-2xs);
    font-weight: 600;
}

.samaji-media-validation {
    padding: var(--xis-space-3);
    border: 1px solid rgba(var(--xis-warning-rgb), 0.18);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface-warning);
    color: #92400e;
    font-size: var(--xis-fs-xs);
}

.samaji-network-overrides {
    display: grid;
    gap: var(--xis-space-4);
}

.samaji-override-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--xis-secondary);
    font-size: var(--xis-fs-xs);
    font-weight: 500;
}

.samaji-preview-stage {
    display: grid;
    min-height: 100%;
    align-content: start;
    gap: var(--xis-space-4);
    padding: var(--xis-space-5);
}

.samaji-preview-frame {
    width: min(100%, 390px);
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-xl);
    background: var(--xis-surface);
    box-shadow: var(--xis-shadow-md);
}

.samaji-preview-frame__label {
    padding: 8px 12px;
    border-bottom: 1px solid var(--xis-border);
    background: var(--xis-surface-soft);
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
    text-align: center;
}

.samaji-post-preview {
    padding: var(--xis-space-4);
}

.samaji-post-preview__header {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--xis-space-3);
}

.samaji-post-preview__name {
    color: var(--xis-text-strong);
    font-weight: 600;
}

.samaji-post-preview__meta {
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
}

.samaji-post-preview__text {
    margin: var(--xis-space-3) 0;
    color: var(--xis-text);
    white-space: pre-wrap;
}

.samaji-post-preview__media {
    overflow: hidden;
    margin-inline: calc(var(--xis-space-4) * -1);
    background: var(--xis-surface-soft);
}

.samaji-post-preview__media img,
.samaji-post-preview__media video {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
}

.samaji-post-preview__engagement {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-3);
    padding-top: var(--xis-space-3);
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
}

.samaji-publish-result {
    display: grid;
    gap: var(--xis-space-3);
}

.samaji-publish-result__row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--xis-space-3);
    padding: var(--xis-space-3);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
}


/* ==========================================================================
   15. MEDIA LIBRARY AND CONTENT LIBRARY
   ========================================================================== */

.samaji-library-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-3);
    margin-bottom: var(--xis-space-4);
}

.samaji-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--xis-space-4);
}

.samaji-asset-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface);
    box-shadow: var(--xis-shadow-xs);
    transition:
        transform var(--xis-duration-fast) var(--xis-ease),
        border-color var(--xis-duration-fast) var(--xis-ease),
        box-shadow var(--xis-duration-fast) var(--xis-ease);
}

.samaji-asset-card:hover,
.samaji-asset-card:focus-within {
    transform: translateY(-2px);
    border-color: rgba(var(--xis-primary-rgb), 0.25);
    box-shadow: var(--xis-shadow-sm);
}

.samaji-asset-card.is-selected {
    border-color: var(--xis-primary);
    box-shadow: 0 0 0 3px rgba(var(--xis-primary-rgb), 0.12);
}

.samaji-asset-card__preview {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background:
        linear-gradient(45deg, var(--xis-surface-soft) 25%, transparent 25%),
        linear-gradient(-45deg, var(--xis-surface-soft) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--xis-surface-soft) 75%),
        linear-gradient(-45deg, transparent 75%, var(--xis-surface-soft) 75%);
    background-size: 16px 16px;
    background-position:
        0 0,
        0 8px,
        8px -8px,
        -8px 0;
}

.samaji-asset-card__preview img,
.samaji-asset-card__preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.samaji-asset-card__body {
    padding: var(--xis-space-3);
}

.samaji-asset-card__name {
    overflow: hidden;
    color: var(--xis-text-strong);
    font-size: var(--xis-fs-sm);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.samaji-asset-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-2);
    margin-top: 4px;
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-2xs);
}

.samaji-upload-queue {
    display: grid;
    gap: var(--xis-space-2);
}

.samaji-upload-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--xis-space-3);
    padding: var(--xis-space-3);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface);
}

.samaji-content-row__caption {
    max-width: 440px;
    overflow: hidden;
    color: var(--xis-text-strong);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.samaji-content-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--xis-fs-xs);
    font-weight: 500;
}

.samaji-content-status--draft {
    color: var(--xis-text-soft);
}

.samaji-content-status--review {
    color: var(--xis-secondary);
}

.samaji-content-status--approved {
    color: var(--xis-info);
}

.samaji-content-status--scheduled {
    color: var(--xis-primary);
}

.samaji-content-status--publishing {
    color: var(--xis-warning);
}

.samaji-content-status--published {
    color: var(--xis-success);
}

.samaji-content-status--failed {
    color: var(--xis-danger);
}


/* ==========================================================================
   16. APPROVALS AND CAMPAIGNS
   ========================================================================== */

.samaji-approval-queue {
    display: grid;
    gap: var(--xis-space-3);
}

.samaji-approval-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: var(--xis-space-4);
    padding: var(--xis-space-4);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-lg);
    background: var(--xis-surface);
}

.samaji-approval-item__preview {
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface-soft);
}

.samaji-approval-item__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.samaji-approval-item__title {
    margin-bottom: var(--xis-space-2);
    color: var(--xis-text-strong);
    font-weight: 600;
}

.samaji-approval-route {
    display: flex;
    align-items: center;
    gap: var(--xis-space-2);
}

.samaji-approval-route__step {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
}

.samaji-review-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: var(--xis-space-5);
}

.samaji-review-decision {
    position: sticky;
    top: calc(var(--xis-topbar-height) + var(--xis-space-5));
    align-self: start;
}

.samaji-comment {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: var(--xis-space-3);
}

.samaji-comment__body {
    padding: var(--xis-space-3);
    border: 1px solid var(--xis-border);
    border-radius: 0 var(--xis-radius-md) var(--xis-radius-md) var(--xis-radius-md);
    background: var(--xis-surface-soft);
}

.samaji-version-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--xis-space-4);
}

.samaji-campaign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--xis-space-4);
}

.samaji-campaign-card {
    display: grid;
    gap: var(--xis-space-4);
    padding: var(--xis-space-5);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-lg);
    background:
        radial-gradient(circle at 100% 0, rgba(136, 88, 240, 0.08), transparent 35%),
        var(--xis-surface);
}

.samaji-campaign-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--xis-space-3);
}

.samaji-campaign-card__title {
    color: var(--xis-text-strong);
    font-size: var(--xis-fs-lg);
    font-weight: 600;
}

.samaji-campaign-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--xis-space-2);
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
}

.samaji-campaign-card__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--xis-space-3);
}

.samaji-mini-metric {
    padding: var(--xis-space-3);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface-soft);
}

.samaji-mini-metric__value {
    color: var(--xis-text-strong);
    font-size: var(--xis-fs-xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.samaji-mini-metric__label {
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
}


/* ==========================================================================
   17. UNIFIED INBOX
   ========================================================================== */

.samaji-inbox {
    display: grid;
    min-height: calc(100vh - var(--xis-topbar-height) - 48px);
    grid-template-columns: 250px minmax(300px, 380px) minmax(420px, 1fr);
    overflow: hidden;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-lg);
    background: var(--xis-surface);
}

.samaji-inbox__queues,
.samaji-inbox__list,
.samaji-inbox__detail {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.samaji-inbox__queues,
.samaji-inbox__list {
    border-right: 1px solid var(--xis-border);
}

.samaji-inbox__panel-head {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-3);
    padding: 0 var(--xis-space-4);
    border-bottom: 1px solid var(--xis-border);
}

.samaji-inbox__scroll {
    height: calc(100% - 58px);
    overflow: auto;
}

.samaji-queue-nav {
    display: grid;
    gap: 4px;
    padding: var(--xis-space-3);
}

.samaji-queue-link {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: var(--xis-space-3);
    padding: 8px 10px;
    border: 0;
    border-radius: var(--xis-radius-sm);
    background: transparent;
    color: var(--xis-text);
    text-align: left;
    cursor: pointer;
}

.samaji-queue-link:hover {
    background: var(--xis-surface-soft);
}

.samaji-queue-link.is-active {
    background: var(--xis-surface-indigo);
    color: var(--xis-primary);
    font-weight: 600;
}

.samaji-queue-link__count {
    margin-left: auto;
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
    font-variant-numeric: tabular-nums;
}

.samaji-conversation-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: var(--xis-space-3);
    padding: var(--xis-space-3) var(--xis-space-4);
    border-bottom: 1px solid var(--xis-divider);
    background: var(--xis-surface);
    cursor: pointer;
}

.samaji-conversation-row:hover {
    background: var(--xis-surface-soft);
}

.samaji-conversation-row.is-active {
    background: var(--xis-surface-indigo);
}

.samaji-conversation-row.is-unread .samaji-conversation-row__name,
.samaji-conversation-row.is-unread .samaji-conversation-row__preview {
    font-weight: 600;
}

.samaji-conversation-row__copy {
    min-width: 0;
}

.samaji-conversation-row__top {
    display: flex;
    align-items: center;
    gap: var(--xis-space-2);
}

.samaji-conversation-row__name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: var(--xis-text-strong);
    font-size: var(--xis-fs-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.samaji-conversation-row__preview {
    overflow: hidden;
    margin-top: 3px;
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.samaji-conversation-row__time {
    color: var(--xis-text-muted);
    font-size: var(--xis-fs-2xs);
    white-space: nowrap;
}

.samaji-sla {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--xis-warning);
    font-size: var(--xis-fs-2xs);
    font-weight: 600;
}

.samaji-thread {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.samaji-thread__header {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-4);
    padding: var(--xis-space-3) var(--xis-space-4);
    border-bottom: 1px solid var(--xis-border);
}

.samaji-thread__messages {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding: var(--xis-space-4);
    background: var(--xis-surface-soft);
}

.samaji-message-group {
    display: grid;
    gap: var(--xis-space-3);
}

.samaji-message {
    display: flex;
    align-items: flex-end;
    gap: var(--xis-space-2);
}

.samaji-message--outgoing {
    justify-content: flex-end;
}

.samaji-message__bubble {
    max-width: min(76%, 640px);
    padding: 10px 12px;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md) var(--xis-radius-md) var(--xis-radius-md) 4px;
    background: var(--xis-surface);
    color: var(--xis-text);
    box-shadow: var(--xis-shadow-xs);
}

.samaji-message--outgoing .samaji-message__bubble {
    border-color: rgba(var(--xis-primary-rgb), 0.16);
    border-radius: var(--xis-radius-md) var(--xis-radius-md) 4px var(--xis-radius-md);
    background: var(--xis-surface-indigo);
}

.samaji-message--note .samaji-message__bubble {
    border-color: rgba(var(--xis-warning-rgb), 0.18);
    background: var(--xis-surface-warning);
}

.samaji-message__meta {
    margin-top: 4px;
    color: var(--xis-text-muted);
    font-size: var(--xis-fs-2xs);
}

.samaji-reply {
    border-top: 1px solid var(--xis-border);
    background: var(--xis-surface);
}

.samaji-reply__mode {
    display: flex;
    gap: var(--xis-space-1);
    padding: var(--xis-space-2) var(--xis-space-4) 0;
}

.samaji-reply__editor {
    min-height: 96px;
    padding: var(--xis-space-3) var(--xis-space-4);
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--xis-text-strong);
    resize: vertical;
}

.samaji-reply__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-3);
    padding: var(--xis-space-2) var(--xis-space-4) var(--xis-space-3);
}

.samaji-contact-panel {
    padding: var(--xis-space-4);
    border-top: 1px solid var(--xis-border);
}


/* ==========================================================================
   18. LISTENING, ANALYTICS AND REPORTS
   ========================================================================== */

.samaji-query-builder {
    display: grid;
    gap: var(--xis-space-3);
    padding: var(--xis-space-4);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-lg);
    background: var(--xis-surface);
}

.samaji-query-group {
    display: grid;
    gap: var(--xis-space-2);
    padding: var(--xis-space-3);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface-soft);
}

.samaji-mention-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: var(--xis-space-3);
    padding: var(--xis-space-4);
    border-bottom: 1px solid var(--xis-divider);
}

.samaji-sentiment {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
}

.samaji-sentiment--positive {
    color: var(--xis-success);
}

.samaji-sentiment--negative {
    color: var(--xis-danger);
}

.samaji-sentiment--neutral {
    color: var(--xis-text-soft);
}

.samaji-analytics-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-3);
    margin-bottom: var(--xis-space-4);
}

.samaji-chart-card {
    min-width: 0;
    padding: var(--xis-space-5);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-lg);
    background: var(--xis-surface);
    box-shadow: var(--xis-shadow-xs);
}

.samaji-chart-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--xis-space-3);
    margin-bottom: var(--xis-space-4);
}

.samaji-chart {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    border-radius: var(--xis-radius-md);
    background:
        linear-gradient(var(--xis-divider) 1px, transparent 1px),
        linear-gradient(90deg, var(--xis-divider) 1px, transparent 1px),
        var(--xis-surface-soft);
    background-size: 32px 32px;
}

.samaji-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--xis-space-3);
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
}

.samaji-chart-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.samaji-chart-legend__swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--xis-primary);
}

.samaji-heatmap {
    display: grid;
    grid-template-columns: 72px repeat(7, minmax(36px, 1fr));
    gap: 3px;
}

.samaji-heatmap__cell {
    min-height: 32px;
    border-radius: var(--xis-radius-xs);
    background: rgba(var(--xis-primary-rgb), var(--samaji-heat, 0.08));
}

.samaji-report-builder {
    display: grid;
    min-height: calc(100vh - var(--xis-topbar-height) - 48px);
    grid-template-columns: 280px minmax(520px, 1fr) 320px;
    overflow: hidden;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-lg);
    background: var(--xis-surface);
}

.samaji-report-builder__library,
.samaji-report-builder__settings {
    min-width: 0;
    overflow: auto;
    background: var(--xis-surface-soft);
}

.samaji-report-builder__library {
    border-right: 1px solid var(--xis-border);
}

.samaji-report-builder__settings {
    border-left: 1px solid var(--xis-border);
}

.samaji-report-builder__canvas {
    min-width: 0;
    overflow: auto;
    padding: var(--xis-space-6);
    background: #e5e7eb;
}

.samaji-report-page {
    width: min(100%, 794px);
    min-height: 1123px;
    margin-inline: auto;
    padding: 48px;
    background: #fff;
    color: #334155;
    box-shadow: var(--xis-shadow-lg);
}

.samaji-report-block {
    position: relative;
    margin-bottom: var(--xis-space-4);
    padding: var(--xis-space-4);
    border: 1px dashed transparent;
}

.samaji-report-block:hover,
.samaji-report-block.is-selected {
    border-color: var(--xis-primary);
}


/* ==========================================================================
   19. AUTOMATIONS, TEAM, CONNECTIONS, BILLING AND SECURITY
   ========================================================================== */

.samaji-automation-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--xis-space-4);
    padding: var(--xis-space-4);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-lg);
    background: var(--xis-surface);
}

.samaji-automation-card__icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface-violet);
    color: var(--xis-secondary);
}

.samaji-rule-builder {
    display: grid;
    gap: var(--xis-space-4);
}

.samaji-rule-block {
    padding: var(--xis-space-4);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-lg);
    background: var(--xis-surface);
}

.samaji-condition-row {
    display: grid;
    grid-template-columns: 120px minmax(160px, 1fr) minmax(180px, 1fr) auto;
    gap: var(--xis-space-2);
    align-items: center;
}

.samaji-permission-matrix {
    overflow: auto;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-lg);
}

.samaji-permission-matrix table {
    min-width: 800px;
}

.samaji-connection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--xis-space-4);
}

.samaji-connection-card {
    display: grid;
    gap: var(--xis-space-4);
    padding: var(--xis-space-5);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-lg);
    background: var(--xis-surface);
}

.samaji-connection-card__header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--xis-space-3);
}

.samaji-connection-card__issues {
    display: grid;
    gap: var(--xis-space-2);
}

.samaji-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--xis-space-4);
}

.samaji-usage-card {
    padding: var(--xis-space-4);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface);
}

.samaji-usage-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-3);
    margin-bottom: var(--xis-space-3);
}

.samaji-plan-card {
    position: relative;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: var(--xis-space-5);
    padding: var(--xis-space-6);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-xl);
    background: var(--xis-surface);
}

.samaji-plan-card.is-featured {
    border-color: var(--xis-primary);
    box-shadow:
        0 0 0 3px rgba(var(--xis-primary-rgb), 0.1),
        var(--xis-shadow-md);
}

.samaji-plan-card__price {
    color: var(--xis-text-strong);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.samaji-plan-card__features {
    display: grid;
    gap: var(--xis-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.samaji-security-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--xis-space-4);
    padding: var(--xis-space-4);
    border-bottom: 1px solid var(--xis-divider);
}

.samaji-secret-field {
    display: flex;
    align-items: center;
    gap: var(--xis-space-2);
}

.samaji-secret-field code {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================================
   20. AUTHENTICATION AND ONBOARDING
   ========================================================================== */

.xis-auth-page {
    display: grid;
    min-height: 100vh;
    grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr);
    background: var(--xis-bg);
}

.xis-auth-brand {
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(32px, 6vw, 72px);
    background:
        radial-gradient(circle at 15% 15%, rgba(136, 88, 240, 0.32), transparent 30%),
        radial-gradient(circle at 85% 80%, rgba(59, 130, 246, 0.2), transparent 35%),
        var(--xis-gradient-navy);
    color: #fff;
}

.xis-auth-brand::after {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
    background-size: 48px 48px;
    content: "";
    pointer-events: none;
}

.xis-auth-brand>* {
    position: relative;
    z-index: 1;
}

.xis-auth-brand__title {
    max-width: 620px;
    color: #fff;
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.055em;
}

.xis-auth-brand__copy {
    max-width: 580px;
    color: #c8d6eb;
    font-size: var(--xis-fs-lg);
    line-height: var(--xis-lh-relaxed);
}

.xis-auth-main {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: var(--xis-space-6);
}

.xis-auth-card {
    width: min(100%, 460px);
    padding: clamp(24px, 5vw, 36px);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-xl);
    background: var(--xis-surface);
    box-shadow: var(--xis-shadow-lg);
}

.xis-auth-card__head {
    margin-bottom: var(--xis-space-6);
}

.xis-auth-card__title {
    margin-bottom: var(--xis-space-2);
    font-size: var(--xis-fs-4xl);
    font-weight: 700;
}

.xis-auth-card__description {
    color: var(--xis-text-soft);
}

.xis-otp {
    display: grid;
    grid-template-columns: repeat(6, minmax(40px, 1fr));
    gap: var(--xis-space-2);
}

.xis-otp input {
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-sm);
    background: var(--xis-surface);
    color: var(--xis-text-strong);
    font-size: var(--xis-fs-2xl);
    font-weight: 600;
    text-align: center;
}

.samaji-onboarding {
    min-height: 100vh;
    background: var(--xis-bg);
}

.samaji-onboarding__topbar {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-4);
    padding: 0 var(--xis-space-6);
    border-bottom: 1px solid var(--xis-border);
    background: var(--xis-surface);
}

.samaji-onboarding__main {
    width: min(100% - 32px, 980px);
    margin-inline: auto;
    padding: var(--xis-space-10) 0 var(--xis-space-16);
}

.samaji-stepper {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--xis-space-10);
}

.samaji-stepper__item {
    position: relative;
    display: grid;
    flex: 1;
    justify-items: center;
    gap: var(--xis-space-2);
    color: var(--xis-text-muted);
    font-size: var(--xis-fs-xs);
    text-align: center;
}

.samaji-stepper__item:not(:last-child)::after {
    position: absolute;
    top: 15px;
    left: calc(50% + 20px);
    width: calc(100% - 40px);
    height: 2px;
    background: var(--xis-border);
    content: "";
}

.samaji-stepper__number {
    z-index: 1;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 2px solid var(--xis-border);
    border-radius: 50%;
    background: var(--xis-surface);
    color: var(--xis-text-soft);
    font-weight: 600;
}

.samaji-stepper__item.is-active,
.samaji-stepper__item.is-complete {
    color: var(--xis-primary);
}

.samaji-stepper__item.is-active .samaji-stepper__number {
    border-color: var(--xis-primary);
    color: var(--xis-primary);
}

.samaji-stepper__item.is-complete .samaji-stepper__number {
    border-color: var(--xis-primary);
    background: var(--xis-primary);
    color: #fff;
}

.samaji-stepper__item.is-complete::after {
    background: var(--xis-primary);
}


/* ==========================================================================
   21. PUBLIC PRODUCT WEBSITE
   ========================================================================== */

.samaji-public {
    background:
        radial-gradient(circle at 12% 8%, rgba(136, 88, 240, 0.13), transparent 24%),
        radial-gradient(circle at 90% 12%, rgba(59, 130, 246, 0.1), transparent 25%),
        var(--xis-bg);
}

.samaji-public-header {
    position: sticky;
    top: 0;
    z-index: var(--xis-z-topbar);
    border-bottom: 1px solid var(--xis-border);
    background: color-mix(in srgb, var(--xis-surface) 90%, transparent);
    backdrop-filter: blur(18px);
}

.samaji-public-header__inner {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-5);
}

.samaji-public-nav {
    display: flex;
    align-items: center;
    gap: var(--xis-space-5);
}

.samaji-public-nav a {
    color: var(--xis-text);
    font-size: var(--xis-fs-base);
    font-weight: 500;
}

.samaji-public-nav a:hover,
.samaji-public-nav a[aria-current="page"] {
    color: var(--xis-primary);
}

.samaji-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
    align-items: center;
    gap: clamp(32px, 6vw, 72px);
    padding-block: clamp(64px, 10vw, 112px);
}

.samaji-hero__title {
    max-width: 760px;
    margin-bottom: var(--xis-space-5);
    font-size: var(--xis-fs-display);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.samaji-hero__title span {
    background: var(--xis-gradient-creative);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.samaji-hero__lead {
    max-width: 650px;
    color: var(--xis-text-soft);
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.75;
}

.samaji-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--xis-space-3);
    margin-top: var(--xis-space-6);
}

.samaji-product-preview {
    position: relative;
    min-height: 470px;
    overflow: hidden;
    padding: var(--xis-space-5);
    border: 1px solid rgba(var(--xis-primary-rgb), 0.18);
    border-radius: var(--xis-radius-2xl);
    background:
        radial-gradient(circle at 15% 15%, rgba(136, 88, 240, 0.18), transparent 28%),
        radial-gradient(circle at 80% 85%, rgba(59, 130, 246, 0.14), transparent 30%),
        var(--xis-gradient-navy);
    box-shadow: var(--xis-shadow-xl);
}

.samaji-product-preview__window {
    height: 100%;
    min-height: 420px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--xis-radius-xl);
    background: var(--xis-surface);
    box-shadow: var(--xis-shadow-lg);
}

.samaji-logo-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--xis-space-6);
    padding-block: var(--xis-space-8);
    color: var(--xis-text-muted);
}

.samaji-feature-grid,
.samaji-use-case-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--xis-space-5);
}

.samaji-feature-card,
.samaji-use-case-card {
    min-height: 100%;
    padding: var(--xis-space-6);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-xl);
    background: var(--xis-surface);
    box-shadow: var(--xis-shadow-xs);
}

.samaji-feature-card__icon {
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: var(--xis-space-5);
    place-items: center;
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface-indigo);
    color: var(--xis-primary);
}

.samaji-public-section {
    padding-block: clamp(56px, 9vw, 96px);
}

.samaji-public-section--soft {
    background: var(--xis-surface-soft);
}

.samaji-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-6);
    padding: clamp(28px, 5vw, 48px);
    border-radius: var(--xis-radius-2xl);
    background: var(--xis-gradient-navy);
    color: #fff;
}

.samaji-cta h2,
.samaji-cta p {
    color: inherit;
}

.samaji-public-footer {
    padding: var(--xis-space-12) 0 var(--xis-space-6);
    border-top: 1px solid var(--xis-border);
    background: var(--xis-navy);
    color: #c8d6eb;
}

.samaji-public-footer a {
    color: #dbeafe;
}

.samaji-public-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, minmax(120px, 1fr));
    gap: var(--xis-space-8);
}

.samaji-public-footer__title {
    margin-bottom: var(--xis-space-3);
    color: #fff;
    font-size: var(--xis-fs-sm);
    font-weight: 600;
}


/* ==========================================================================
   22. PLATFORM ADMIN AND OPERATIONAL COMPONENTS
   ========================================================================== */

.samaji-admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--xis-space-4);
}

.samaji-job-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1.5fr) minmax(140px, 0.7fr) minmax(120px, 0.6fr) auto;
    align-items: center;
    gap: var(--xis-space-4);
    padding: var(--xis-space-3) var(--xis-space-4);
    border-bottom: 1px solid var(--xis-divider);
}

.samaji-job-row__icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface-indigo);
    color: var(--xis-primary);
}

.samaji-log-viewer {
    max-height: 560px;
    overflow: auto;
    padding: var(--xis-space-4);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-slate-950);
    color: #cbd5e1;
    font-family: var(--xis-font-mono);
    font-size: var(--xis-fs-xs);
    line-height: 1.6;
}

.samaji-log-line {
    display: grid;
    grid-template-columns: 90px 78px minmax(0, 1fr);
    gap: var(--xis-space-3);
}

.samaji-log-line__level--error {
    color: #fca5a5;
}

.samaji-log-line__level--warn {
    color: #fcd34d;
}

.samaji-log-line__level--info {
    color: #93c5fd;
}

.samaji-log-line__level--success {
    color: #6ee7b7;
}

.samaji-system-health {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--xis-space-4);
}

.samaji-health-card {
    display: grid;
    gap: var(--xis-space-3);
    padding: var(--xis-space-4);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface);
}

.samaji-health-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-3);
}

.samaji-support-access-banner {
    position: sticky;
    top: var(--xis-topbar-height);
    z-index: calc(var(--xis-z-sticky) + 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-4);
    padding: var(--xis-space-3) var(--xis-space-5);
    border-bottom: 1px solid rgba(var(--xis-warning-rgb), 0.25);
    background: var(--xis-surface-warning);
    color: #78350f;
}


/* ==========================================================================
   23. BOOTSTRAP 5 COMPATIBILITY BRIDGE
   ========================================================================== */

body.xis-app-body .btn-primary {
    border-color: transparent;
    background: var(--xis-gradient-primary);
    color: #fff;
    font-weight: 600;
}

body.xis-app-body .btn-outline-primary {
    border-color: rgba(var(--xis-primary-rgb), 0.38);
    color: var(--xis-primary);
}

body.xis-app-body .btn-outline-primary:hover {
    border-color: var(--xis-primary);
    background: var(--xis-primary);
    color: #fff;
}

body.xis-app-body .card {
    border-color: var(--xis-border);
    border-radius: var(--xis-radius-lg);
    background: var(--xis-surface);
    color: var(--xis-text);
    box-shadow: var(--xis-shadow-xs);
}

body.xis-app-body .card-header,
body.xis-app-body .card-footer {
    border-color: var(--xis-border);
    background: transparent;
}

body.xis-app-body .form-control,
body.xis-app-body .form-select {
    min-height: var(--xis-control-lg);
    border-color: var(--xis-border);
    border-radius: var(--xis-radius-sm);
    background-color: var(--xis-surface);
    color: var(--xis-text-strong);
}

body.xis-app-body .form-control:focus,
body.xis-app-body .form-select:focus {
    border-color: var(--xis-primary);
    box-shadow: var(--xis-focus-ring);
}

body.xis-app-body .table {
    color: var(--xis-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--xis-divider);
    --bs-table-hover-bg: rgba(var(--xis-primary-rgb), 0.035);
}

body.xis-app-body .modal-content {
    border-color: var(--xis-border);
    border-radius: var(--xis-radius-xl);
    background: var(--xis-surface);
    color: var(--xis-text);
    box-shadow: var(--xis-shadow-xl);
}

body.xis-app-body .dropdown-menu {
    padding: var(--xis-space-2);
    border-color: var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface-raised);
    box-shadow: var(--xis-shadow-lg);
}

body.xis-app-body .dropdown-item {
    border-radius: var(--xis-radius-sm);
    color: var(--xis-text);
}

body.xis-app-body .dropdown-item:hover,
body.xis-app-body .dropdown-item:focus {
    background: var(--xis-surface-soft);
    color: var(--xis-text-strong);
}


/* ==========================================================================
   24. RESPONSIVE BEHAVIOR
   ========================================================================== */

@media (max-width: 1280px) {

    .samaji-dashboard-kpis,
    .samaji-admin-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .samaji-dashboard-grid>.span-3,
    .samaji-dashboard-grid>.span-4 {
        grid-column: span 6;
    }

    .samaji-report-builder {
        grid-template-columns: 240px minmax(500px, 1fr);
    }

    .samaji-report-builder__settings {
        display: none;
    }
}

@media (max-width: 1100px) {
    .samaji-inbox {
        grid-template-columns: 220px minmax(300px, 1fr);
    }

    .samaji-inbox__detail {
        position: absolute;
        inset: 0;
        z-index: 4;
        display: none;
        background: var(--xis-surface);
    }

    .samaji-inbox.is-detail-open .samaji-inbox__detail {
        display: block;
    }

    .samaji-composer {
        grid-template-columns: minmax(0, 1fr) 360px;
    }

    .samaji-feature-grid,
    .samaji-use-case-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .samaji-public-footer__grid {
        grid-template-columns: 1.5fr repeat(2, minmax(150px, 1fr));
    }
}

@media (max-width: 991.98px) {
    :root {
        --xis-content-padding: 18px;
    }

    .xis-sidebar {
        transform: translateX(-100%);
    }

    .xis-topbar {
        left: 0;
    }

    .xis-main {
        margin-left: 0;
    }

    body.xis-sidebar-open .xis-sidebar {
        transform: translateX(0);
    }

    body.xis-sidebar-open .xis-mobile-overlay {
        display: block;
    }

    body.xis-sidebar-collapsed .xis-topbar {
        left: 0;
    }

    body.xis-sidebar-collapsed .xis-main {
        margin-left: 0;
    }

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

    .xis-split--aside,
    .samaji-review-layout {
        grid-template-columns: 1fr;
    }

    .samaji-review-decision {
        position: static;
    }

    .samaji-composer {
        grid-template-columns: 1fr;
    }

    .samaji-composer__editor {
        border-right: 0;
    }

    .samaji-composer__preview {
        border-top: 1px solid var(--xis-border);
    }

    .samaji-preview-stage {
        min-height: 560px;
    }

    .samaji-report-builder {
        grid-template-columns: 1fr;
    }

    .samaji-report-builder__library,
    .samaji-report-builder__settings {
        display: none;
    }

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

    .samaji-product-preview {
        min-height: 420px;
    }

    .xis-auth-page {
        grid-template-columns: 1fr;
    }

    .xis-auth-brand {
        display: none;
    }

    .samaji-public-nav {
        display: none;
    }
}

@media (max-width: 768px) {
    :root {
        --xis-content-padding: 16px;
    }

    .xis-topbar {
        padding-inline: var(--xis-space-3);
    }

    .xis-topbar__title span,
    .xis-topbar .xis-hide-tablet {
        display: none;
    }

    .xis-page-head {
        flex-direction: column;
    }

    .xis-page-head__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .xis-grid--2,
    .xis-grid--3,
    .xis-grid--4,
    .xis-grid--6,
    .xis-form-grid {
        grid-template-columns: 1fr;
    }

    .samaji-dashboard-kpis,
    .samaji-admin-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .samaji-dashboard-grid>[class*="span-"] {
        grid-column: 1 / -1;
    }

    .samaji-calendar {
        display: none;
    }

    .samaji-planner .samaji-agenda {
        display: grid;
        padding: var(--xis-space-4);
    }

    .samaji-agenda__day {
        grid-template-columns: 1fr;
        gap: var(--xis-space-2);
    }

    .samaji-agenda__date {
        position: static;
    }

    .samaji-inbox {
        position: relative;
        grid-template-columns: 1fr;
    }

    .samaji-inbox__queues {
        display: none;
    }

    .samaji-inbox__list {
        border-right: 0;
    }

    .samaji-approval-item {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .samaji-approval-item> :last-child {
        grid-column: 1 / -1;
    }

    .samaji-version-compare {
        grid-template-columns: 1fr;
    }

    .samaji-condition-row {
        grid-template-columns: 1fr;
    }

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

    .samaji-cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .xis-description-list {
        grid-template-columns: 1fr;
        gap: var(--xis-space-1);
    }

    .xis-description-list dd {
        margin-bottom: var(--xis-space-3);
    }

    .xis-form-actions--sticky {
        margin-inline: calc(var(--xis-space-4) * -1);
        margin-bottom: calc(var(--xis-space-4) * -1);
        padding-inline: var(--xis-space-4);
    }
}

@media (max-width: 640px) {
    .xis-content {
        width: calc(100% - 2 * var(--xis-content-padding));
    }

    .xis-page-head__actions .xis-btn {
        flex: 1 1 auto;
    }

    .samaji-dashboard-kpis,
    .samaji-admin-stat-grid,
    .samaji-campaign-card__stats,
    .samaji-feature-grid,
    .samaji-use-case-grid,
    .samaji-public-footer__grid {
        grid-template-columns: 1fr;
    }

    .samaji-composer__header,
    .samaji-composer__footer,
    .samaji-library-toolbar,
    .samaji-analytics-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

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

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

    .samaji-approval-item {
        grid-template-columns: 1fr;
    }

    .samaji-approval-item__preview {
        max-width: 120px;
    }

    .samaji-message__bubble {
        max-width: 90%;
    }

    .xis-modal {
        max-height: 100vh;
        border-radius: var(--xis-radius-lg) var(--xis-radius-lg) 0 0;
    }

    .xis-overlay {
        align-items: end;
        padding: 0;
    }

    .xis-toast-stack {
        right: var(--xis-space-3);
        bottom: var(--xis-space-3);
        left: var(--xis-space-3);
        width: auto;
    }

    .samaji-onboarding__topbar {
        padding-inline: var(--xis-space-4);
    }

    .samaji-stepper__item span:last-child {
        display: none;
    }

    .samaji-public-header__inner {
        min-height: 64px;
    }

    .samaji-hero {
        padding-block: var(--xis-space-12);
    }

    .samaji-product-preview {
        min-height: 340px;
        padding: var(--xis-space-3);
    }

    .samaji-product-preview__window {
        min-height: 310px;
    }
}

@media (max-width: 390px) {
    :root {
        --xis-content-padding: 12px;
    }

    .xis-topbar__right .xis-hide-mobile,
    .xis-topbar__title {
        display: none;
    }

    .samaji-media-grid,
    .samaji-media-tray {
        grid-template-columns: 1fr;
    }

    .xis-btn--lg,
    .xis-btn--xl {
        padding-inline: 14px;
    }

    .xis-otp {
        gap: 5px;
    }

    .samaji-account-card {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .samaji-account-card> :last-child {
        grid-column: 1 / -1;
    }
}




/* ==========================================================================
   26. TOOLBARS, FILTERS, SAVED VIEWS AND DATE CONTROLS
   ========================================================================== */

.xis-toolbar,
.xis-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-3);
}

.xis-filterbar {
    padding: var(--xis-space-3);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface);
}

.xis-toolbar__group,
.xis-filterbar__group {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--xis-space-2);
}

.xis-filter-pill {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-pill);
    background: var(--xis-surface);
    color: var(--xis-text);
    font-size: var(--xis-fs-sm);
    cursor: pointer;
}

.xis-filter-pill:hover {
    border-color: rgba(var(--xis-primary-rgb), 0.28);
    color: var(--xis-primary);
}

.xis-filter-pill.is-active {
    border-color: rgba(var(--xis-primary-rgb), 0.28);
    background: var(--xis-surface-indigo);
    color: var(--xis-primary);
}

.xis-filter-pill__count {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    place-items: center;
    padding-inline: 4px;
    border-radius: var(--xis-radius-pill);
    background: rgba(var(--xis-primary-rgb), 0.1);
    font-size: var(--xis-fs-2xs);
    font-variant-numeric: tabular-nums;
}

.xis-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--xis-space-2);
}

.xis-saved-view {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--xis-radius-sm);
    background: transparent;
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-sm);
    cursor: pointer;
}

.xis-saved-view:hover,
.xis-saved-view.is-active {
    border-color: var(--xis-border);
    background: var(--xis-surface-soft);
    color: var(--xis-text-strong);
}

.xis-date-range {
    display: inline-grid;
    grid-template-columns: auto minmax(110px, 1fr) auto minmax(110px, 1fr);
    align-items: center;
    gap: var(--xis-space-2);
}

.xis-date-range__separator {
    color: var(--xis-text-muted);
    font-size: var(--xis-fs-xs);
}

/* ==========================================================================
   27. COMMAND PALETTE AND GLOBAL SEARCH
   ========================================================================== */

.xis-command {
    width: min(100%, 680px);
    overflow: hidden;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-xl);
    background: var(--xis-surface-raised);
    box-shadow: var(--xis-shadow-xl);
}

.xis-command__search {
    position: relative;
    padding: var(--xis-space-3);
    border-bottom: 1px solid var(--xis-border);
}

.xis-command__search input {
    width: 100%;
    min-height: 46px;
    padding: 0 44px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--xis-text-strong);
    font-size: var(--xis-fs-lg);
}

.xis-command__search-icon {
    position: absolute;
    top: 50%;
    left: 24px;
    width: 18px;
    height: 18px;
    color: var(--xis-text-muted);
    transform: translateY(-50%);
}

.xis-command__shortcut {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
}

.xis-command__results {
    max-height: 460px;
    overflow: auto;
    padding: var(--xis-space-2);
}

.xis-command__group-label {
    padding: var(--xis-space-2) var(--xis-space-3);
    color: var(--xis-text-muted);
    font-size: var(--xis-fs-2xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.xis-command__item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--xis-space-3);
    min-height: 46px;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--xis-radius-sm);
    background: transparent;
    color: var(--xis-text);
    text-align: left;
    cursor: pointer;
}

.xis-command__item:hover,
.xis-command__item[aria-selected="true"],
.xis-command__item.is-active {
    background: var(--xis-surface-indigo);
    color: var(--xis-text-strong);
}

.xis-command__item-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: var(--xis-radius-sm);
    background: var(--xis-surface-soft);
    color: var(--xis-primary);
}

.xis-command__item-title {
    font-size: var(--xis-fs-base);
    font-weight: 500;
}

.xis-command__item-meta {
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
}

.xis-kbd {
    display: inline-flex;
    min-width: 24px;
    min-height: 22px;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    border: 1px solid var(--xis-border-strong);
    border-bottom-width: 2px;
    border-radius: var(--xis-radius-xs);
    background: var(--xis-surface-soft);
    color: var(--xis-text-soft);
    font-family: var(--xis-font-mono);
    font-size: var(--xis-fs-2xs);
}

/* ==========================================================================
   28. NOTIFICATION CENTER
   ========================================================================== */

.xis-notification-panel {
    width: min(100vw - 24px, 420px);
    overflow: hidden;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-lg);
    background: var(--xis-surface-raised);
    box-shadow: var(--xis-shadow-xl);
}

.xis-notification-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-3);
    padding: var(--xis-space-4);
    border-bottom: 1px solid var(--xis-border);
}

.xis-notification-panel__list {
    max-height: 520px;
    overflow: auto;
}

.xis-notification {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: var(--xis-space-3);
    padding: var(--xis-space-4);
    border-bottom: 1px solid var(--xis-divider);
    background: var(--xis-surface);
}

.xis-notification.is-unread {
    background: var(--xis-surface-indigo);
}

.xis-notification.is-unread::before {
    position: absolute;
    top: 18px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--xis-primary);
    content: "";
}

.xis-notification__icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface-soft);
    color: var(--xis-primary);
}

.xis-notification__title {
    color: var(--xis-text-strong);
    font-size: var(--xis-fs-sm);
    font-weight: 600;
}

.xis-notification__text {
    margin-top: 3px;
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-xs);
}

.xis-notification__time {
    color: var(--xis-text-muted);
    font-size: var(--xis-fs-2xs);
    white-space: nowrap;
}

/* ==========================================================================
   29. ACCORDIONS, DISCLOSURES, TREES AND SORTABLE LISTS
   ========================================================================== */

.xis-accordion {
    overflow: hidden;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-lg);
    background: var(--xis-surface);
}

.xis-accordion__item+.xis-accordion__item {
    border-top: 1px solid var(--xis-divider);
}

.xis-accordion__trigger {
    display: flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-4);
    padding: 0 var(--xis-space-4);
    border: 0;
    background: transparent;
    color: var(--xis-text-strong);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.xis-accordion__trigger:hover {
    background: var(--xis-surface-soft);
}

.xis-accordion__chevron {
    transition: transform var(--xis-duration-base) var(--xis-ease);
}

.xis-accordion__trigger[aria-expanded="true"] .xis-accordion__chevron {
    transform: rotate(180deg);
}

.xis-accordion__panel {
    padding: 0 var(--xis-space-4) var(--xis-space-4);
    color: var(--xis-text);
}

.xis-tree {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xis-tree ul {
    display: grid;
    gap: 2px;
    margin: 0 0 0 19px;
    padding: 0 0 0 10px;
    border-left: 1px solid var(--xis-border);
    list-style: none;
}

.xis-tree__row {
    display: grid;
    grid-template-columns: 24px 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 3px 6px;
    border-radius: var(--xis-radius-sm);
    color: var(--xis-text);
}

.xis-tree__row:hover {
    background: var(--xis-surface-soft);
}

.xis-tree__row.is-selected {
    background: var(--xis-surface-indigo);
    color: var(--xis-primary);
}

.xis-drag-handle {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: var(--xis-text-muted);
    cursor: grab;
}

.xis-drag-handle:active {
    cursor: grabbing;
}

.xis-sortable {
    display: grid;
    gap: var(--xis-space-2);
}

.xis-sortable__item {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--xis-space-3);
    padding: var(--xis-space-3);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface);
}

.xis-sortable__item.is-dragging {
    opacity: 0.72;
    border-color: var(--xis-primary);
    box-shadow: var(--xis-shadow-lg);
}

.xis-drop-indicator {
    height: 3px;
    border-radius: var(--xis-radius-pill);
    background: var(--xis-primary);
    box-shadow: 0 0 0 3px rgba(var(--xis-primary-rgb), 0.12);
}

/* ==========================================================================
   30. KANBAN AND WORKFLOW BOARDS
   ========================================================================== */

.samaji-kanban {
    display: grid;
    grid-auto-columns: minmax(280px, 320px);
    grid-auto-flow: column;
    gap: var(--xis-space-4);
    overflow-x: auto;
    padding-bottom: var(--xis-space-3);
    scroll-snap-type: x proximity;
}

.samaji-kanban-column {
    display: flex;
    max-height: calc(100vh - var(--xis-topbar-height) - 96px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-lg);
    background: var(--xis-surface-soft);
    scroll-snap-align: start;
}

.samaji-kanban-column__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xis-space-3);
    padding: var(--xis-space-3) var(--xis-space-4);
    border-bottom: 1px solid var(--xis-border);
}

.samaji-kanban-column__body {
    display: grid;
    min-height: 100px;
    gap: var(--xis-space-3);
    overflow-y: auto;
    padding: var(--xis-space-3);
}

.samaji-kanban-card {
    display: grid;
    gap: var(--xis-space-3);
    padding: var(--xis-space-3);
    border: 1px solid var(--xis-border);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface);
    box-shadow: var(--xis-shadow-xs);
    cursor: grab;
}

.samaji-kanban-card:hover {
    border-color: rgba(var(--xis-primary-rgb), 0.24);
    box-shadow: var(--xis-shadow-sm);
}

.samaji-kanban-card:active {
    cursor: grabbing;
}

.samaji-kanban-card__thumb {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--xis-radius-sm);
    background: var(--xis-surface-soft);
}

.samaji-kanban-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   31. ACCESSIBILITY AND CONTENT-QUALITY INDICATORS
   ========================================================================== */

.samaji-accessibility-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--xis-fs-xs);
    font-weight: 500;
}

.samaji-accessibility-status--complete {
    color: var(--xis-success);
}

.samaji-accessibility-status--warning {
    color: var(--xis-warning);
}

.samaji-accessibility-status--missing {
    color: var(--xis-danger);
}

.samaji-quality-score {
    display: grid;
    grid-template-columns: auto minmax(100px, 1fr) auto;
    align-items: center;
    gap: var(--xis-space-3);
}

.samaji-quality-score__bar {
    overflow: hidden;
    height: 7px;
    border-radius: var(--xis-radius-pill);
    background: var(--xis-slate-200);
}

.samaji-quality-score__fill {
    height: 100%;
    border-radius: inherit;
    background: var(--xis-gradient-primary);
}

.samaji-content-warning {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--xis-space-2);
    padding: var(--xis-space-3);
    border: 1px solid rgba(var(--xis-warning-rgb), 0.18);
    border-radius: var(--xis-radius-md);
    background: var(--xis-surface-warning);
    color: #92400e;
    font-size: var(--xis-fs-xs);
}

/* ==========================================================================
   32. MOBILE BOTTOM ACTIONS
   ========================================================================== */

.xis-mobile-actions {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--xis-z-sticky);
    display: none;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
    padding: 8px 10px max(8px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--xis-border);
    background: color-mix(in srgb, var(--xis-surface) 94%, transparent);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(16px);
}

.xis-mobile-actions__item {
    display: grid;
    min-width: 58px;
    min-height: 46px;
    place-items: center;
    gap: 2px;
    border: 0;
    border-radius: var(--xis-radius-sm);
    background: transparent;
    color: var(--xis-text-soft);
    font-size: var(--xis-fs-2xs);
}

.xis-mobile-actions__item.is-active {
    background: var(--xis-surface-indigo);
    color: var(--xis-primary);
}

@media (max-width: 640px) {
    .xis-mobile-actions {
        display: flex;
    }

    body.has-mobile-actions .xis-content {
        padding-bottom: 88px;
    }

    .xis-filterbar {
        align-items: stretch;
        flex-direction: column;
    }

    .xis-filterbar__group {
        width: 100%;
    }

    .xis-date-range {
        grid-template-columns: 1fr;
    }

    .xis-date-range__separator {
        display: none;
    }
}

/* ==========================================================================
   25. PRINT AND ACCESSIBILITY PREFERENCES
   ========================================================================== */

@media print {

    .xis-sidebar,
    .xis-topbar,
    .xis-mobile-overlay,
    .xis-btn,
    .xis-icon-btn,
    .xis-toast-stack,
    .xis-page-head__actions,
    .samaji-planner__toolbar,
    .samaji-composer__footer,
    .samaji-public-header,
    .samaji-public-footer {
        display: none !important;
    }

    body,
    .xis-main,
    .xis-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        color: #111 !important;
    }

    .xis-card,
    .samaji-chart-card,
    .xis-table-wrap {
        break-inside: avoid;
        border-color: #d1d5db !important;
        box-shadow: none !important;
    }

    a {
        color: inherit !important;
        text-decoration: underline;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .xis-btn:hover,
    .xis-card--interactive:hover,
    .samaji-quick-action:hover,
    .samaji-asset-card:hover {
        transform: none !important;
    }

    .xis-skeleton::after {
        display: none;
    }
}

@media (forced-colors: active) {

    .xis-btn,
    .xis-icon-btn,
    .xis-card,
    .xis-control,
    .xis-select,
    .xis-textarea,
    .xis-table-wrap,
    .samaji-calendar-item {
        border: 1px solid CanvasText;
    }

    .xis-btn:focus-visible,
    .xis-icon-btn:focus-visible,
    .xis-control:focus,
    .xis-select:focus,
    .xis-textarea:focus {
        outline: 2px solid Highlight;
    }
}/* Samaji legacy-view bridge
 * Safely maps the existing working Bootstrap/PHP views to the canonical Samaji UI system.
 */
:root{--samaji-content-gutter:clamp(1rem,2vw,1.75rem)}
body{background:var(--xis-bg)!important;color:var(--xis-text);font-family:var(--xis-font-sans)!important}
body.xis-app-body{overflow-x:hidden}
.samaji-app-shell{min-height:100vh;background:var(--xis-bg)}
.samaji-mobile-overlay{position:fixed;inset:0;z-index:1015;background:rgba(2,6,23,.56);opacity:0;visibility:hidden;transition:.2s ease}
.samaji-app-sidebar{position:fixed;inset:0 auto 0 0;z-index:1020;width:var(--xis-sidebar-width);display:flex;flex-direction:column;background:var(--xis-gradient-navy);color:#dbeafe;border-right:1px solid rgba(255,255,255,.08);box-shadow:12px 0 36px rgba(10,31,68,.14);transition:transform .25s var(--xis-ease),width .25s var(--xis-ease)}
.samaji-sidebar-brand{min-height:var(--xis-topbar-height);display:flex;align-items:center;gap:.75rem;padding:0 1rem;border-bottom:1px solid rgba(255,255,255,.09)}
.samaji-brand-mark{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#fff,#e0e7ff);color:var(--xis-primary);font-weight:800;letter-spacing:-.04em;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.samaji-brand-copy{min-width:0}.samaji-brand-title{display:block;color:#fff;font-weight:700;font-size:1.05rem;line-height:1.1}.samaji-brand-subtitle{display:block;margin-top:3px;color:#9fb5d5;font-size:.67rem;letter-spacing:.08em;text-transform:uppercase}
.samaji-workspace-card{margin:.9rem .75rem .35rem;padding:.8rem;border:1px solid rgba(255,255,255,.11);border-radius:12px;background:rgba(255,255,255,.07)}
.samaji-workspace-card__row{display:flex;align-items:center;gap:.65rem}.samaji-workspace-avatar{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:var(--xis-gradient-primary);color:#fff;font-size:.78rem;font-weight:700}.samaji-workspace-name{min-width:0;color:#fff;font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.samaji-workspace-meta{color:#9fb5d5;font-size:.68rem}
.samaji-sidebar-scroll{min-height:0;flex:1;overflow-y:auto;padding:.5rem .75rem 1rem}.samaji-nav-section-label{padding:.65rem .65rem .4rem;color:#8298bb;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.samaji-nav{display:grid;gap:4px}.samaji-nav-link{position:relative;display:flex;align-items:center;gap:.75rem;min-height:42px;padding:.58rem .68rem;border:1px solid transparent;border-radius:11px;color:#c8d6eb!important;font-size:.84rem;font-weight:500;text-decoration:none!important;transition:.16s ease}.samaji-nav-link:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.08);color:#fff!important;transform:translateX(2px)}.samaji-nav-link.is-active,.samaji-nav-link[aria-current=page]{background:linear-gradient(135deg,rgba(53,39,200,.86),rgba(136,88,240,.62));border-color:rgba(167,139,250,.34);color:#fff!important;box-shadow:0 10px 24px rgba(15,8,80,.22)}.samaji-nav-link i{display:grid;place-items:center;width:20px;flex:0 0 20px;font-size:1rem}.samaji-nav-label{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.samaji-sidebar-footer{padding:.75rem;border-top:1px solid rgba(255,255,255,.09)}.samaji-user-card{display:flex;align-items:center;gap:.7rem;padding:.55rem;border-radius:11px;color:#dbeafe}.samaji-user-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-weight:700}.samaji-user-copy{min-width:0;flex:1}.samaji-user-name{color:#fff;font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.samaji-user-role{color:#91a8c9;font-size:.68rem}
.samaji-app-topbar{position:fixed;inset:0 0 auto var(--xis-sidebar-width);z-index:1010;min-height:var(--xis-topbar-height);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 1.25rem;border-bottom:1px solid var(--xis-border);background:rgba(255,255,255,.92);box-shadow:var(--xis-shadow-xs);backdrop-filter:blur(16px) saturate(1.1);transition:left .25s var(--xis-ease)}
html[data-theme=dark] .samaji-app-topbar{background:rgba(11,18,32,.92)}
.samaji-topbar-left,.samaji-topbar-right{display:flex;align-items:center;gap:.7rem;min-width:0}.samaji-menu-toggle{display:none}.samaji-topbar-context{min-width:0}.samaji-topbar-context strong{display:block;color:var(--xis-text-strong);font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.samaji-topbar-context span{display:block;color:var(--xis-text-soft);font-size:.72rem}.samaji-search-shell{display:flex;align-items:center;gap:.55rem;width:min(36vw,390px);height:38px;padding:0 .8rem;border:1px solid var(--xis-border);border-radius:10px;background:var(--xis-surface-soft);color:var(--xis-text-soft)}.samaji-search-shell input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--xis-text);font-size:.82rem}.samaji-search-shell kbd{padding:.1rem .35rem;border:1px solid var(--xis-border);border-radius:5px;background:var(--xis-surface);font-size:.65rem;color:var(--xis-text-soft)}
.samaji-icon-button{display:inline-grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--xis-border);border-radius:10px;background:var(--xis-surface);color:var(--xis-text);transition:.16s ease}.samaji-icon-button:hover{border-color:rgba(var(--xis-primary-rgb),.28);background:var(--xis-surface-indigo);color:var(--xis-primary)}
.samaji-app-main{min-height:100vh;margin-left:var(--xis-sidebar-width);padding-top:var(--xis-topbar-height);transition:margin-left .25s var(--xis-ease)}.samaji-app-content{width:min(var(--xis-content-max),calc(100% - 2 * var(--samaji-content-gutter)));margin:0 auto;padding:var(--samaji-content-gutter) 0 calc(var(--samaji-content-gutter) * 2)}
.samaji-flash-stack{display:grid;gap:.65rem;margin-bottom:1rem}.samaji-flash-stack .alert{margin:0}
.samaji-view{min-width:0}.samaji-view>h1:first-child,.samaji-view>.h1:first-child{margin-bottom:1.25rem}.samaji-view .container,.samaji-view .container-fluid{max-width:none;padding-left:0;padding-right:0}
/* Bootstrap visual normalization */
.card{border:1px solid var(--xis-border)!important;border-radius:var(--xis-radius-lg)!important;background:var(--xis-surface)!important;color:var(--xis-text);box-shadow:var(--xis-shadow-xs)!important;overflow:hidden}.card.shadow-sm{box-shadow:var(--xis-shadow-sm)!important}.card.shadow,.card.shadow-lg{box-shadow:var(--xis-shadow-md)!important}.card-header{padding:1rem 1.15rem!important;border-bottom:1px solid var(--xis-border)!important;background:var(--xis-surface)!important;color:var(--xis-text-strong)}.card-body{padding:1.15rem}.card-footer{padding:.9rem 1.15rem;border-top:1px solid var(--xis-border)!important;background:var(--xis-surface-soft)!important}.card-title{color:var(--xis-text-strong)}
.btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:.42rem;border-radius:9px!important;font-weight:600;font-size:.82rem;box-shadow:none!important;transition:.16s ease}.btn:hover{transform:translateY(-1px)}.btn-sm{min-height:32px;font-size:.76rem}.btn-lg{min-height:44px;font-size:.9rem}.btn-primary{border-color:var(--xis-primary)!important;background:var(--xis-gradient-primary)!important}.btn-primary:hover{border-color:var(--xis-primary-hover)!important;filter:brightness(.98)}.btn-outline-primary{border-color:rgba(var(--xis-primary-rgb),.34)!important;color:var(--xis-primary)!important}.btn-outline-primary:hover{background:var(--xis-surface-indigo)!important;color:var(--xis-primary-hover)!important}.btn-secondary{background:var(--xis-slate-700)!important;border-color:var(--xis-slate-700)!important}.btn-light{background:#fff!important;color:var(--xis-primary)!important;border-color:#fff!important}.btn-outline-light:hover{color:var(--xis-navy)!important}.btn-danger{background:var(--xis-danger)!important;border-color:var(--xis-danger)!important}.btn-success{background:var(--xis-success)!important;border-color:var(--xis-success)!important}
.form-label{margin-bottom:.38rem;color:var(--xis-text-strong);font-size:.78rem;font-weight:600}.form-control,.form-select,.input-group-text{min-height:40px;border-color:var(--xis-border-strong)!important;border-radius:9px!important;background-color:var(--xis-surface)!important;color:var(--xis-text)!important;font-size:.84rem}.form-control:focus,.form-select:focus{border-color:var(--xis-primary)!important;box-shadow:var(--xis-shadow-focus)!important}.form-control::placeholder{color:var(--xis-text-muted)}textarea.form-control{min-height:110px}.form-check-input:checked{background-color:var(--xis-primary);border-color:var(--xis-primary)}.form-text{color:var(--xis-text-soft);font-size:.72rem}.input-group>.form-control:not(:last-child),.input-group>.form-select:not(:last-child){border-top-right-radius:0!important;border-bottom-right-radius:0!important}.input-group>.btn:last-child,.input-group>.input-group-text:last-child{border-top-left-radius:0!important;border-bottom-left-radius:0!important}
.table-responsive{border:1px solid var(--xis-border);border-radius:12px;background:var(--xis-surface);overflow-x:auto}.table{margin:0;color:var(--xis-text);font-size:.8rem}.table>:not(caption)>*>*{padding:.78rem .85rem;border-bottom-color:var(--xis-border)!important;background:transparent!important;box-shadow:none!important}.table thead th{background:var(--xis-surface-soft)!important;color:var(--xis-text-soft);font-size:.68rem;font-weight:700;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap}.table tbody tr{transition:.12s ease}.table-hover>tbody>tr:hover>*{background:var(--xis-surface-indigo)!important}.table tbody tr:last-child td{border-bottom:0}
.badge{padding:.38em .62em;border-radius:999px;font-size:.67rem;font-weight:650;letter-spacing:.01em}.bg-primary{background-color:var(--xis-primary)!important}.text-primary{color:var(--xis-primary)!important}.bg-success{background-color:var(--xis-success)!important}.text-success{color:var(--xis-success)!important}.bg-warning{background-color:var(--xis-warning)!important}.text-warning{color:var(--xis-warning)!important}.bg-danger{background-color:var(--xis-danger)!important}.text-danger{color:var(--xis-danger)!important}.bg-info{background-color:var(--xis-info)!important}.text-info{color:var(--xis-info)!important}.text-muted{color:var(--xis-text-soft)!important}
.alert{border:1px solid transparent;border-radius:11px!important;padding:.85rem 1rem;font-size:.82rem}.alert-info{border-color:rgba(var(--xis-info-rgb),.2);background:var(--xis-surface-info);color:var(--xis-text)}.alert-success{border-color:rgba(var(--xis-success-rgb),.22);background:var(--xis-surface-success);color:var(--xis-text)}.alert-warning{border-color:rgba(var(--xis-warning-rgb),.24);background:var(--xis-surface-warning);color:var(--xis-text)}.alert-danger{border-color:rgba(var(--xis-danger-rgb),.22);background:var(--xis-surface-danger);color:var(--xis-text)}
.nav-tabs{gap:.25rem;border-bottom:1px solid var(--xis-border)}.nav-tabs .nav-link{border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;color:var(--xis-text-soft);font-size:.8rem;font-weight:600}.nav-tabs .nav-link:hover{color:var(--xis-primary)}.nav-tabs .nav-link.active{border-bottom-color:var(--xis-primary)!important;background:transparent!important;color:var(--xis-primary)!important}.nav-pills .nav-link{border-radius:9px;color:var(--xis-text-soft);font-size:.8rem;font-weight:600}.nav-pills .nav-link.active{background:var(--xis-primary);color:#fff}
.dropdown-menu{padding:.45rem;border:1px solid var(--xis-border);border-radius:11px;background:var(--xis-surface);box-shadow:var(--xis-shadow-lg)}.dropdown-item{border-radius:7px;color:var(--xis-text);font-size:.8rem}.dropdown-item:hover{background:var(--xis-surface-indigo);color:var(--xis-primary)}.modal-content{border:1px solid var(--xis-border);border-radius:16px;background:var(--xis-surface);color:var(--xis-text);box-shadow:var(--xis-shadow-xl)}.modal-header,.modal-footer{border-color:var(--xis-border)}
.pagination{gap:.28rem}.page-link{min-width:34px;height:34px;display:grid;place-items:center;padding:.3rem;border:1px solid var(--xis-border);border-radius:8px!important;background:var(--xis-surface);color:var(--xis-text)}.page-item.active .page-link{border-color:var(--xis-primary);background:var(--xis-primary);color:#fff}
.progress{height:7px;border-radius:999px;background:var(--xis-slate-100)}.progress-bar{background:var(--xis-gradient-primary)}
/* View patterns */
.samaji-view .d-flex.justify-content-between.align-items-center.mb-4,.samaji-view .d-flex.justify-content-between.align-items-start.mb-4{gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--xis-divider)}
.samaji-view h1,.samaji-view .h1,.samaji-view .h2,.samaji-view .h3{color:var(--xis-text-strong);letter-spacing:-.028em}.samaji-view h1.h3,.samaji-view .h3{font-size:clamp(1.5rem,2vw,1.85rem);font-weight:700}.samaji-view .lead{color:var(--xis-text-soft)}
.samaji-view .position-relative.overflow-hidden.mb-4{border:1px solid rgba(255,255,255,.08);box-shadow:0 16px 36px rgba(53,39,200,.18)}
.samaji-view .hover-lift{transition:transform .18s ease,box-shadow .18s ease}.samaji-view .hover-lift:hover{transform:translateY(-3px);box-shadow:var(--xis-shadow-md)!important}
.samaji-view .rounded-circle{flex:0 0 auto}.samaji-view .border.rounded3,.samaji-view .border.rounded-3,.samaji-view .border.rounded{border-color:var(--xis-border)!important;border-radius:11px!important;background:var(--xis-surface)}
.samaji-view .list-group-item{border-color:var(--xis-border);background:var(--xis-surface);color:var(--xis-text)}
.samaji-view .calendar,.samaji-view [class*=calendar]{--bs-border-color:var(--xis-border)}
.samaji-view canvas{max-width:100%}
/* Empty and disabled states */
.disabled-feature{position:relative;opacity:.62}.disabled-feature:after{content:"Unavailable in the current configuration";position:absolute;inset:auto 1rem 1rem auto;padding:.32rem .55rem;border-radius:7px;background:var(--xis-slate-900);color:#fff;font-size:.65rem}.platform-disabled{opacity:.55;filter:saturate(.5)}
/* Authentication */
.samaji-auth-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(420px,.88fr);background:var(--xis-bg)}.samaji-auth-visual{position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;padding:clamp(2rem,5vw,4.5rem);background:var(--xis-gradient-navy);color:#fff}.samaji-auth-visual:before,.samaji-auth-visual:after{content:"";position:absolute;border-radius:50%;filter:blur(4px);pointer-events:none}.samaji-auth-visual:before{width:520px;height:520px;right:-180px;top:-200px;background:radial-gradient(circle,rgba(136,88,240,.44),transparent 68%)}.samaji-auth-visual:after{width:440px;height:440px;left:-180px;bottom:-180px;background:radial-gradient(circle,rgba(59,130,246,.28),transparent 68%)}.samaji-auth-brand,.samaji-auth-copy,.samaji-auth-preview{position:relative;z-index:1}.samaji-auth-brand{display:flex;align-items:center;gap:.8rem}.samaji-auth-brand .samaji-brand-mark{width:48px;height:48px;flex-basis:48px}.samaji-auth-brand strong{font-size:1.15rem}.samaji-auth-copy{max-width:650px}.samaji-auth-copy h1{max-width:620px;margin-bottom:1rem;color:#fff;font-size:clamp(2.25rem,4.5vw,4rem);line-height:1.02;letter-spacing:-.05em}.samaji-auth-copy p{max-width:580px;color:#cbd5e1;font-size:1rem}.samaji-auth-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin-top:2rem}.samaji-auth-feature{padding:1rem;border:1px solid rgba(255,255,255,.11);border-radius:13px;background:rgba(255,255,255,.065);backdrop-filter:blur(8px)}.samaji-auth-feature i{margin-bottom:.6rem;color:#c4b5fd;font-size:1.15rem}.samaji-auth-feature strong{display:block;color:#fff;font-size:.8rem}.samaji-auth-feature span{display:block;margin-top:.25rem;color:#9fb5d5;font-size:.68rem}.samaji-auth-form-side{display:grid;place-items:center;padding:2rem}.samaji-auth-card{width:min(100%,440px)}.samaji-auth-card__head{margin-bottom:1.5rem}.samaji-auth-card__head h2{margin-bottom:.45rem;font-size:1.75rem}.samaji-auth-card__head p{color:var(--xis-text-soft)}.samaji-password-wrap{position:relative}.samaji-password-wrap .form-control{padding-right:3rem}.samaji-password-toggle{position:absolute;inset:1px 1px 1px auto;width:42px;border:0;background:transparent;color:var(--xis-text-soft)}.samaji-auth-help{display:flex;justify-content:space-between;gap:1rem;margin:.7rem 0 1.25rem;font-size:.75rem}.samaji-demo-credentials{margin-top:1rem;padding:.8rem;border:1px dashed var(--xis-border-strong);border-radius:10px;background:var(--xis-surface-soft);font-size:.72rem;color:var(--xis-text-soft)}
/* Error page */
.samaji-error-shell{min-height:55vh;display:grid;place-items:center}.samaji-error-card{max-width:620px;padding:2rem;text-align:center}.samaji-error-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 1rem;border-radius:18px;background:var(--xis-surface-danger);color:var(--xis-danger);font-size:1.5rem}
@media(max-width:1199px){.samaji-search-shell{width:300px}.samaji-app-content{width:calc(100% - 2rem)}}
@media(max-width:991.98px){.samaji-app-sidebar{transform:translateX(-100%)}body.samaji-sidebar-open .samaji-app-sidebar{transform:translateX(0)}body.samaji-sidebar-open .samaji-mobile-overlay{opacity:1;visibility:visible}.samaji-app-topbar{left:0}.samaji-app-main{margin-left:0}.samaji-menu-toggle{display:inline-grid}.samaji-search-shell{display:none}.samaji-auth-page{grid-template-columns:1fr}.samaji-auth-visual{display:none}.samaji-auth-form-side{min-height:100vh}}
@media(max-width:767.98px){.samaji-app-topbar{padding:0 .75rem}.samaji-topbar-context span{display:none}.samaji-topbar-right .btn span{display:none}.samaji-app-content{width:calc(100% - 1.25rem);padding-top:.8rem}.samaji-view .d-flex.justify-content-between.align-items-center.mb-4,.samaji-view .d-flex.justify-content-between.align-items-start.mb-4{align-items:flex-start!important;flex-direction:column}.samaji-view .d-flex.justify-content-between.align-items-center.mb-4>.btn,.samaji-view .d-flex.justify-content-between.align-items-start.mb-4>.btn{width:100%}.card-body{padding:1rem}.table{min-width:720px}.modal-dialog{margin:.5rem}.samaji-auth-form-side{padding:1.15rem}}
@media(max-width:479.98px){.samaji-topbar-context strong{max-width:135px}.samaji-app-content{width:calc(100% - 1rem)}.btn-group{display:flex;flex-wrap:wrap}.samaji-auth-help{flex-direction:column}.samaji-auth-card__head h2{font-size:1.5rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
@media print{.samaji-app-sidebar,.samaji-app-topbar,.samaji-mobile-overlay,.btn,.dropdown{display:none!important}.samaji-app-main{margin:0!important;padding:0!important}.samaji-app-content{width:100%;padding:0}.card{box-shadow:none!important;break-inside:avoid}}

/* Desktop collapsible sidebar */
.samaji-brand-logo{display:flex;align-items:center;width:100%;min-width:0;text-decoration:none}
.samaji-brand-logo-full{display:block;width:190px;height:42px;object-fit:contain;object-position:left center}
.samaji-brand-logo-mark{display:none;width:44px;height:44px}
.samaji-menu-toggle{display:inline-grid}
body.samaji-sidebar-collapsed .samaji-app-sidebar{width:var(--xis-sidebar-collapsed)}
body.samaji-sidebar-collapsed .samaji-app-topbar{left:var(--xis-sidebar-collapsed)}
body.samaji-sidebar-collapsed .samaji-app-main{margin-left:var(--xis-sidebar-collapsed)}
body.samaji-sidebar-collapsed .samaji-sidebar-brand{justify-content:center;padding-inline:.65rem}
body.samaji-sidebar-collapsed .samaji-brand-logo{justify-content:center}
body.samaji-sidebar-collapsed .samaji-brand-logo-full{display:none}
body.samaji-sidebar-collapsed .samaji-brand-logo-mark{display:block}
body.samaji-sidebar-collapsed .samaji-workspace-card{margin-inline:.65rem;padding:.55rem}
body.samaji-sidebar-collapsed .samaji-workspace-card__row{justify-content:center}
body.samaji-sidebar-collapsed .samaji-workspace-card .samaji-min-w-0,
body.samaji-sidebar-collapsed .samaji-workspace-card .bi-chevron-expand,
body.samaji-sidebar-collapsed .samaji-nav-section-label,
body.samaji-sidebar-collapsed .samaji-nav-label,
body.samaji-sidebar-collapsed .samaji-user-copy{display:none!important}
body.samaji-sidebar-collapsed .samaji-sidebar-scroll{padding-inline:.65rem}
body.samaji-sidebar-collapsed .samaji-nav-link{justify-content:center;gap:0;padding-inline:.55rem;transform:none}
body.samaji-sidebar-collapsed .samaji-nav-link i{width:24px;font-size:1.08rem}
body.samaji-sidebar-collapsed .samaji-sidebar-footer{padding:.65rem}
body.samaji-sidebar-collapsed .samaji-user-card{justify-content:center;padding:.4rem;flex-wrap:wrap;gap:.45rem}
body.samaji-sidebar-collapsed .samaji-user-avatar{width:36px;height:36px;flex:0 0 36px}
body.samaji-sidebar-collapsed .samaji-user-card .samaji-icon-button{width:36px;height:36px}
body.samaji-sidebar-collapsed .samaji-nav-link[data-tooltip]::after{content:attr(data-tooltip);position:absolute;left:calc(100% + 12px);top:50%;z-index:1090;transform:translate(4px,-50%);padding:.42rem .62rem;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#0f172a;color:#fff;font-size:.72rem;font-weight:600;white-space:nowrap;box-shadow:var(--xis-shadow-lg);opacity:0;visibility:hidden;pointer-events:none;transition:.15s ease}
body.samaji-sidebar-collapsed .samaji-nav-link[data-tooltip]:hover::after,
body.samaji-sidebar-collapsed .samaji-nav-link[data-tooltip]:focus-visible::after{opacity:1;visibility:visible;transform:translate(0,-50%)}
@media(max-width:991.98px){
  body.samaji-sidebar-collapsed .samaji-app-sidebar{width:var(--xis-sidebar-width)}
  body.samaji-sidebar-collapsed .samaji-app-topbar{left:0}
  body.samaji-sidebar-collapsed .samaji-app-main{margin-left:0}
  body.samaji-sidebar-collapsed .samaji-sidebar-brand{justify-content:flex-start;padding:0 1rem}
  body.samaji-sidebar-collapsed .samaji-brand-logo{justify-content:flex-start}
  body.samaji-sidebar-collapsed .samaji-brand-logo-full{display:block}
  body.samaji-sidebar-collapsed .samaji-brand-logo-mark{display:none}
  body.samaji-sidebar-collapsed .samaji-workspace-card{margin:.9rem .75rem .35rem;padding:.8rem}
  body.samaji-sidebar-collapsed .samaji-workspace-card__row{justify-content:flex-start}
  body.samaji-sidebar-collapsed .samaji-workspace-card .samaji-min-w-0,
  body.samaji-sidebar-collapsed .samaji-workspace-card .bi-chevron-expand,
  body.samaji-sidebar-collapsed .samaji-nav-section-label,
  body.samaji-sidebar-collapsed .samaji-nav-label,
  body.samaji-sidebar-collapsed .samaji-user-copy{display:block!important}
  body.samaji-sidebar-collapsed .samaji-sidebar-scroll{padding:.5rem .75rem 1rem}
  body.samaji-sidebar-collapsed .samaji-nav-link{justify-content:flex-start;gap:.75rem;padding:.58rem .68rem}
  body.samaji-sidebar-collapsed .samaji-user-card{justify-content:flex-start;flex-wrap:nowrap;padding:.55rem}
  body.samaji-sidebar-collapsed .samaji-nav-link[data-tooltip]::after{display:none}
}

/* Media Library professional upload, filters, and selectable views */
.samaji-media-upload {
    margin-bottom: 22px;
}

.samaji-media-library-shell {
    display: grid;
    gap: 16px;
}

.samaji-media-toolbar,
.samaji-media-bulkbar {
    background: var(--samaji-surface, var(--xis-surface, #fff));
    border: 1px solid var(--samaji-border, var(--xis-border, #e2e8f0));
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, .04);
}

.samaji-media-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 160px 170px auto auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
}

.samaji-media-search {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--samaji-border, var(--xis-border, #e2e8f0));
    border-radius: 10px;
    padding: 0 12px;
    background: var(--samaji-surface-soft, var(--xis-surface-soft, #f8fafc));
}

.samaji-media-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
}

.samaji-view-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--samaji-border, var(--xis-border, #e2e8f0));
    border-radius: 10px;
    background: var(--samaji-surface-soft, var(--xis-surface-soft, #f8fafc));
}

.samaji-view-toggle button {
    width: 34px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--samaji-muted, #64748b);
}

.samaji-view-toggle button.is-active {
    background: var(--xis-primary, #3527c8);
    color: #fff;
}

.samaji-media-bulkbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    color: var(--samaji-muted, #64748b);
}

.samaji-checkline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--xis-text, #0f172a);
}

.samaji-media-browser {
    display: grid;
    gap: 14px;
}

.samaji-media-browser.is-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.samaji-media-browser.is-compact {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.samaji-media-browser.is-list {
    grid-template-columns: 1fr;
}

.samaji-media-browser .samaji-media-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    background: var(--samaji-surface, var(--xis-surface, #fff));
    border: 1px solid var(--samaji-border, var(--xis-border, #e2e8f0));
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, .04);
}

.samaji-media-browser .samaji-media-select {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(148, 163, 184, .45);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
}

.samaji-media-browser .samaji-media-preview {
    height: 180px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(53, 39, 200, .08), rgba(0, 132, 137, .08));
    color: var(--xis-primary, #3527c8);
    text-decoration: none;
}

.samaji-media-browser .samaji-media-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.samaji-media-browser .samaji-media-preview i {
    font-size: 2.7rem;
}

.samaji-media-browser .samaji-media-info {
    min-width: 0;
    padding: 12px 14px;
}

.samaji-media-browser .samaji-media-info h3 {
    margin: 0 0 5px;
    font-size: .95rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.samaji-media-browser .samaji-media-info p,
.samaji-media-browser .samaji-media-info small {
    display: block;
    margin: 0;
    color: var(--samaji-muted, #64748b);
    font-size: .78rem;
}

.samaji-media-browser .samaji-media-actions {
    display: flex;
    gap: 8px;
    padding: 0 14px 14px;
}

.samaji-media-browser .samaji-media-actions .btn {
    flex: 1;
}

.samaji-media-browser.is-compact .samaji-media-preview {
    height: 118px;
}

.samaji-media-browser.is-compact .samaji-media-info h3 {
    font-size: .82rem;
}

.samaji-media-browser.is-compact .samaji-media-actions {
    display: none;
}

.samaji-media-browser.is-list .samaji-media-card {
    grid-template-columns: 92px minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
}

.samaji-media-browser.is-list .samaji-media-preview {
    width: 92px;
    height: 72px;
}

.samaji-media-browser.is-list .samaji-media-info {
    padding: 10px 14px;
}

.samaji-media-browser.is-list .samaji-media-actions {
    padding: 10px 14px;
    min-width: 190px;
}

[data-theme="dark"] .samaji-media-toolbar,
[data-theme="dark"] .samaji-media-bulkbar,
[data-theme="dark"] .samaji-media-browser .samaji-media-card {
    background: var(--samaji-surface, #111827);
    border-color: var(--samaji-border, rgba(148, 163, 184, .22));
}

[data-theme="dark"] .samaji-media-search,
[data-theme="dark"] .samaji-view-toggle {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(148, 163, 184, .22);
}

@media (max-width: 980px) {
    .samaji-media-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .samaji-media-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .samaji-media-toolbar,
    .samaji-media-bulkbar,
    .samaji-media-browser.is-list .samaji-media-card {
        grid-template-columns: 1fr;
    }

    .samaji-media-bulkbar {
        align-items: stretch;
        flex-direction: column;
    }

    .samaji-media-browser.is-list .samaji-media-preview {
        width: 100%;
        height: 160px;
    }

    .samaji-media-browser.is-list .samaji-media-actions {
        min-width: 0;
    }
}


/* Samaji official dove brand assets */
.samaji-brand-logo{gap:.72rem}
.samaji-brand-logo-image{display:block;width:42px;height:42px;flex:0 0 42px;object-fit:contain}
.samaji-brand-logo-copy{display:flex;min-width:0;flex-direction:column;line-height:1.08}
.samaji-brand-logo-copy strong{color:#fff;font-size:1.08rem;font-weight:700;letter-spacing:-.025em}
.samaji-brand-logo-copy small{margin-top:4px;color:#9fb5d5;font-size:.64rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.samaji-auth-brand-logo{display:block;width:52px;height:52px;flex:0 0 52px;object-fit:contain}
body.samaji-sidebar-collapsed .samaji-brand-logo{justify-content:center}
body.samaji-sidebar-collapsed .samaji-brand-logo-copy{display:none}
@media (max-width:991.98px){
  body.samaji-sidebar-collapsed .samaji-brand-logo{justify-content:flex-start}
  body.samaji-sidebar-collapsed .samaji-brand-logo-copy{display:flex}
}
.samaji-phase1-context{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:24px}.samaji-phase1-context h1{font-size:clamp(1.7rem,3vw,2.4rem);margin:.25rem 0}.samaji-phase1-context p,.samaji-section-head p{color:var(--samaji-muted,#64748b);margin:0}.samaji-eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:800;color:#3527C8}.samaji-context-switcher select{min-width:230px;border:1px solid #dbe1ea;border-radius:10px;padding:10px;background:var(--samaji-surface,#fff)}.samaji-toolbar{display:flex;justify-content:flex-end;margin-bottom:18px}.samaji-agency-grid,.samaji-media-grid,.samaji-connector-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}.samaji-agency-card,.samaji-table-panel,.samaji-side-panel,.samaji-form-panel,.samaji-upload-panel,.samaji-connector-card{background:var(--samaji-surface,#fff);border:1px solid var(--samaji-border,#e2e8f0);border-radius:16px;padding:20px;box-shadow:0 8px 30px rgba(15,23,42,.04)}.samaji-card-head,.samaji-connector-card,.samaji-section-head,.samaji-calendar-toolbar{display:flex;align-items:center;gap:12px;justify-content:space-between}.samaji-card-head h2,.samaji-section-head h2,.samaji-side-panel h2{font-size:1.05rem;margin:0}.samaji-card-head p{margin:3px 0 0;color:#64748b;font-size:.88rem}.samaji-brand-dot{width:12px;height:42px;border-radius:99px;background:var(--brand)}.samaji-agency-card dl{display:grid;grid-template-columns:repeat(3,1fr);margin:20px 0}.samaji-agency-card dl div{border-right:1px solid #edf0f5;padding-right:10px}.samaji-agency-card dl div:last-child{border:0}.samaji-agency-card dt{font-size:.72rem;text-transform:uppercase;color:#64748b}.samaji-agency-card dd{font-weight:800;margin:3px 0}.samaji-card-actions{display:flex;gap:8px}.samaji-status{display:inline-flex;padding:4px 9px;border-radius:99px;background:#eef2ff;color:#3527C8;font-size:.72rem;font-weight:800;text-transform:capitalize}.samaji-status.is-active,.samaji-status.is-ready,.samaji-status.is-approved,.samaji-status.is-published{background:#dcfce7;color:#166534}.samaji-status.is-archived,.samaji-status.is-paused,.samaji-status.is-revoked{background:#f1f5f9;color:#475569}.samaji-status.is-failed,.samaji-status.is-rejected,.samaji-status.is-error{background:#fee2e2;color:#991b1b}.samaji-status.is-setup-required,.samaji-status.is-pending{background:#fef3c7;color:#92400e}.samaji-wizard-steps{display:flex;gap:8px;overflow:auto;margin-bottom:24px}.samaji-wizard-steps span{white-space:nowrap;padding:7px 12px;border-radius:99px;background:#f1f5f9;font-size:.78rem;font-weight:700}.samaji-wizard-steps .is-active{background:#3527C8;color:#fff}.samaji-form-panel label{display:flex;flex-direction:column;gap:7px;font-weight:700}.samaji-form-actions{margin-top:22px}.samaji-two-column{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:18px}.samaji-table-panel{padding:0;overflow:hidden}.samaji-table-panel .samaji-section-head{padding:20px}.samaji-table-panel table{margin:0}.samaji-table-panel td,.samaji-table-panel th{padding:13px 20px;vertical-align:middle}.samaji-table-panel td small{display:block;color:#64748b}.samaji-role-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #edf0f5}.samaji-role-row small{display:block;color:#64748b}.samaji-dropzone{border:2px dashed #c7d2fe;border-radius:14px;padding:28px;text-align:center;display:flex;flex-direction:column;gap:4px;cursor:pointer}.samaji-dropzone i{font-size:2rem;color:#3527C8}.samaji-dropzone input{margin:12px auto 0;max-width:360px}.samaji-media-grid{margin-top:18px}.samaji-media-card{background:var(--samaji-surface,#fff);border:1px solid var(--samaji-border,#e2e8f0);border-radius:14px;overflow:hidden}.samaji-media-preview{height:170px;background:#eef2f7;display:grid;place-items:center}.samaji-media-preview img{width:100%;height:100%;object-fit:cover}.samaji-media-preview i{font-size:2.2rem;color:#64748b}.samaji-media-card h3,.samaji-media-card p{padding:0 14px}.samaji-media-card h3{font-size:.9rem;margin:12px 0 4px;overflow-wrap:anywhere}.samaji-media-card p{font-size:.78rem;color:#64748b}.samaji-calendar-toolbar{margin-bottom:16px}.samaji-agenda article{display:grid;grid-template-columns:140px 1fr auto;gap:16px;align-items:center;background:var(--samaji-surface,#fff);border:1px solid var(--samaji-border,#e2e8f0);border-radius:12px;padding:14px;margin-bottom:9px}.samaji-agenda h3{font-size:.95rem;margin:0}.samaji-agenda p{margin:2px 0;color:#64748b}.samaji-empty{text-align:center;padding:50px;background:var(--samaji-surface,#fff);border:1px dashed #cbd5e1;border-radius:16px}.samaji-empty i{font-size:2rem}.samaji-connector-card p{font-size:.8rem;color:#64748b;margin:5px 0 0}.samaji-filter-bar{display:grid;grid-template-columns:1fr 220px auto;gap:10px;margin-bottom:18px}.samaji-timeline article{display:grid;grid-template-columns:16px 1fr;gap:12px;padding:15px;background:var(--samaji-surface,#fff);border:1px solid var(--samaji-border,#e2e8f0);border-radius:12px;margin-bottom:8px}.samaji-audit-dot{width:10px;height:10px;border-radius:99px;background:#3527C8;margin-top:6px}.samaji-audit-dot.is-warning{background:#f59e0b}.samaji-audit-dot.is-error,.samaji-audit-dot.is-critical{background:#dc2626}.samaji-audit-head{display:flex;justify-content:space-between}.samaji-audit-head time,.samaji-timeline p{color:#64748b;font-size:.8rem;margin:3px 0}.samaji-timeline code{font-size:.7rem}@media(max-width:800px){.samaji-phase1-context{align-items:stretch;flex-direction:column}.samaji-context-switcher select{width:100%}.samaji-two-column{grid-template-columns:1fr}.samaji-filter-bar{grid-template-columns:1fr}.samaji-agenda article{grid-template-columns:1fr}.samaji-agency-card dl{grid-template-columns:1fr;gap:10px}.samaji-agency-card dl div{border-right:0;border-bottom:1px solid #edf0f5;padding-bottom:8px}}
.samaji-p2{display:grid;gap:1.25rem}.samaji-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.samaji-page-head h1{margin:.2rem 0}.samaji-kicker{color:#3527C8;font-weight:700;text-transform:uppercase;font-size:.75rem;letter-spacing:.1em}.samaji-filter,.samaji-bulk{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;background:var(--surface,#fff);padding:1rem;border:1px solid var(--border,#e5e7eb);border-radius:16px}.samaji-filter input,.samaji-filter select,.samaji-bulk select,.samaji-p2 input,.samaji-p2 select,.samaji-p2 textarea{border:1px solid var(--border,#dbe1ea);border-radius:10px;padding:.72rem .8rem;background:var(--surface,#fff);color:inherit}.samaji-table-wrap{overflow:auto;border:1px solid var(--border,#e5e7eb);border-radius:16px;background:var(--surface,#fff)}.samaji-table{width:100%;border-collapse:collapse}.samaji-table th,.samaji-table td{padding:.85rem 1rem;border-bottom:1px solid var(--border,#eef0f4);text-align:left;vertical-align:top}.samaji-table td a{display:grid;gap:.25rem;color:inherit;text-decoration:none}.samaji-table small{display:block;color:var(--muted,#64748b)}.samaji-badge{display:inline-flex;padding:.22rem .55rem;border-radius:999px;background:#eeeafd;color:#3527C8;font-size:.75rem;font-weight:700}.samaji-count{display:inline-grid;place-items:center;min-width:1.4rem;height:1.4rem;border-radius:99px;background:#3527C8;color:#fff;margin-left:.35rem;font-size:.7rem}.samaji-empty{padding:2rem!important;text-align:center!important;color:var(--muted,#64748b)}.samaji-conversation-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.25rem}.samaji-thread,.samaji-side-panel,.samaji-card{background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);border-radius:16px;padding:1.1rem}.samaji-message{max-width:78%;padding:1rem;border-radius:16px;margin-bottom:1rem;background:#f2f4f8}.samaji-message.is-outbound{margin-left:auto;background:#eeeafd}.samaji-message p{margin:.35rem 0}.samaji-message em{color:#a33;font-size:.8rem}.samaji-compose,.samaji-side-panel form,.samaji-form-grid{display:grid;gap:.8rem}.samaji-p2 label{display:grid;gap:.35rem;font-weight:600}.samaji-p2 textarea{min-height:100px;resize:vertical}.samaji-notes p{padding:.75rem;border-left:3px solid #8858F0;background:#f7f5ff}.samaji-notes small{display:block;color:#64748b;margin-top:.35rem}.samaji-two{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);gap:1rem}.samaji-stack,.samaji-card-grid{display:grid;gap:1rem}.samaji-card-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.samaji-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem}.samaji-metrics article{background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);border-radius:16px;padding:1rem;display:grid;gap:.4rem}.samaji-metrics strong{font-size:1.8rem;color:#0A1F44}.samaji-metrics span{font-size:.75rem;color:#64748b}.samaji-form-grid{grid-template-columns:1fr 1fr;background:var(--surface,#fff);padding:1.25rem;border-radius:16px;border:1px solid var(--border,#e5e7eb)}.samaji-form-grid fieldset,.span-2{grid-column:1/-1}.samaji-check{display:inline-flex!important;margin:.35rem 1rem .35rem 0}.samaji-report{--report-color:#3527C8}.samaji-report-cover{padding:4rem 2rem;background:linear-gradient(135deg,#0A1F44,var(--report-color));color:#fff;border-radius:20px}.samaji-report-cover h1{font-size:2.6rem}.samaji-report-footer{text-align:center;padding:2rem;color:#64748b}@media(max-width:900px){.samaji-conversation-grid,.samaji-two{grid-template-columns:1fr}.samaji-form-grid{grid-template-columns:1fr}.samaji-form-grid>*{grid-column:1}.samaji-message{max-width:92%}}@media(max-width:600px){.samaji-page-head{display:grid}.samaji-filter>*{width:100%}.samaji-table{min-width:760px}}@media print{.no-print,.sidebar,.topbar{display:none!important}.main-content{margin:0!important;padding:0!important}.samaji-report{display:block}.samaji-report .samaji-card{break-inside:avoid}}
.samaji-p3-hero{padding:2rem;border-radius:24px;background:linear-gradient(135deg,#0A1F44,#3527C8 65%,#8858F0);color:#fff;margin-bottom:1.25rem}.samaji-eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;opacity:.75}.samaji-p3-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.samaji-p3-stat,.samaji-card{background:var(--bs-body-bg);border:1px solid rgba(53,39,200,.14);border-radius:18px;padding:1.25rem;box-shadow:0 12px 35px rgba(10,31,68,.07)}.samaji-p3-stat strong{display:block;font-size:2rem;color:#3527C8}.samaji-p3-stat span,.samaji-muted{color:var(--bs-secondary-color)}.samaji-p3-split{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:1rem}.samaji-card form{display:grid;gap:.8rem}.samaji-card label{display:grid;gap:.35rem;font-weight:600}.samaji-card input,.samaji-card select,.samaji-card textarea{width:100%;border:1px solid rgba(10,31,68,.2);border-radius:10px;padding:.65rem;background:var(--bs-body-bg);color:inherit}.samaji-check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:.5rem!important}.samaji-check input{width:auto}.samaji-list-row{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 0;border-bottom:1px solid rgba(10,31,68,.1)}.samaji-list-row small{display:block;color:var(--bs-secondary-color);overflow-wrap:anywhere}.samaji-badge{padding:.25rem .55rem;border-radius:999px;background:rgba(53,39,200,.1);color:#3527C8}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:.7rem;border-bottom:1px solid rgba(10,31,68,.1)}@media(max-width:850px){.samaji-p3-split{grid-template-columns:1fr}.samaji-p3-hero{padding:1.25rem}}:root{--samaji-intel-indigo:#3527C8;--samaji-intel-navy:#0A1F44;--samaji-intel-violet:#8858F0;--samaji-intel-border:color-mix(in srgb,var(--samaji-intel-indigo) 16%,transparent);--samaji-intel-surface:color-mix(in srgb,var(--bs-body-bg) 96%,var(--samaji-intel-indigo) 4%)}
.samaji-page-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:1.25rem}.samaji-page-head h1{color:var(--samaji-intel-navy);font-weight:750;letter-spacing:-.035em}.samaji-page-head p{max-width:760px;color:var(--bs-secondary-color)}.samaji-eyebrow{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;color:var(--samaji-intel-indigo);font-weight:700}.samaji-intel-grid,.samaji-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin-bottom:1rem}.samaji-intel-card,.samaji-slot{border:1px solid var(--samaji-intel-border);border-radius:18px;padding:1rem;background:linear-gradient(145deg,var(--samaji-intel-surface),var(--bs-body-bg));box-shadow:0 10px 30px rgba(10,31,68,.06)}.samaji-intel-card span,.samaji-slot span{display:block;color:var(--bs-secondary-color);font-size:.8rem}.samaji-intel-card strong{display:block;font-size:1.75rem;color:var(--samaji-intel-navy);margin-top:.35rem}.samaji-panel{background:var(--bs-body-bg);border:1px solid var(--samaji-intel-border);border-radius:20px;padding:1.25rem;margin-bottom:1rem;box-shadow:0 12px 36px rgba(10,31,68,.05)}.samaji-panel h2{font-size:1.08rem;color:var(--samaji-intel-navy);margin-bottom:1rem}.samaji-two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}.samaji-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem}.samaji-panel label{display:grid;gap:.35rem;font-size:.83rem;font-weight:650;margin-bottom:.8rem}.samaji-panel input,.samaji-panel select,.samaji-panel textarea{width:100%;border:1px solid var(--samaji-intel-border);border-radius:11px;padding:.7rem .8rem;background:var(--bs-body-bg);color:var(--bs-body-color)}.samaji-panel input:focus,.samaji-panel select:focus,.samaji-panel textarea:focus{outline:3px solid color-mix(in srgb,var(--samaji-intel-violet) 24%,transparent);border-color:var(--samaji-intel-violet)}.samaji-list{display:grid;gap:.65rem}.samaji-list>div{display:grid;gap:.15rem;border-bottom:1px solid var(--samaji-intel-border);padding:.65rem 0}.samaji-list small,.samaji-help{color:var(--bs-secondary-color)}.samaji-empty{padding:1.1rem;border:1px dashed var(--samaji-intel-border);border-radius:14px;color:var(--bs-secondary-color)}.samaji-callout{display:flex;gap:.8rem;padding:1rem;border:1px solid color-mix(in srgb,var(--samaji-intel-indigo) 20%,transparent);border-radius:16px;background:color-mix(in srgb,var(--samaji-intel-indigo) 6%,var(--bs-body-bg));margin:1rem 0}.samaji-callout.warning{border-color:#d97706;background:color-mix(in srgb,#f59e0b 8%,var(--bs-body-bg))}.samaji-callout i{font-size:1.35rem;color:var(--samaji-intel-indigo)}.samaji-callout p{margin:0;color:var(--bs-secondary-color)}.samaji-ai-output,.samaji-quote{white-space:normal;border-left:4px solid var(--samaji-intel-violet);padding:1rem;background:color-mix(in srgb,var(--samaji-intel-violet) 6%,var(--bs-body-bg));border-radius:0 14px 14px 0}.samaji-inline-form{display:flex;flex-wrap:wrap;align-items:end;gap:.6rem}.samaji-inline-form label{margin:0}.samaji-status{display:inline-flex;border-radius:999px;padding:.2rem .55rem;background:color-mix(in srgb,var(--samaji-intel-indigo) 9%,var(--bs-body-bg));color:var(--samaji-intel-indigo);font-size:.75rem;font-weight:700}.samaji-check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center}.samaji-check input{width:auto}.samaji-slot strong{display:block;color:var(--samaji-intel-navy);margin:.4rem 0}.samaji-slot small{color:var(--bs-secondary-color)}
[data-theme="dark"] .samaji-page-head h1,[data-theme="dark"] .samaji-panel h2,[data-theme="dark"] .samaji-intel-card strong,[data-theme="dark"] .samaji-slot strong{color:#eef2ff}@media(max-width:900px){.samaji-two-col{grid-template-columns:1fr}.samaji-page-head{display:block}}@media(max-width:600px){.samaji-panel{padding:1rem;border-radius:15px}.samaji-inline-form{display:grid;align-items:stretch}.samaji-intel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Samaji 6.5.5 - AsliAI guided assistant and brand voice UX */
.samaji-asliai-hero{position:relative;overflow:hidden;align-items:center!important;padding:1.35rem 1.5rem;border:1px solid var(--samaji-intel-border,#e5e7eb);border-radius:22px;background:linear-gradient(135deg,color-mix(in srgb,#3527C8 10%,var(--bs-body-bg)),color-mix(in srgb,#8858F0 8%,var(--bs-body-bg)));box-shadow:0 18px 45px rgba(10,31,68,.08)}
.samaji-asliai-hero p{max-width:720px}.samaji-asliai-mascot{width:118px;height:118px;object-fit:contain;filter:drop-shadow(0 14px 24px rgba(53,39,200,.22));animation:samaji-asliai-float 4.8s ease-in-out infinite}.samaji-asliai-shell{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);gap:1rem;align-items:start}.samaji-asliai-form,.samaji-asliai-result{display:grid;gap:1.1rem}.samaji-asliai-form section{display:grid;gap:.75rem}.samaji-asliai-form h2,.samaji-guided-section h2{font-size:1rem;margin:0;color:var(--samaji-intel-navy,#0A1F44)}.samaji-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.75rem}.samaji-choice-grid--actions{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.samaji-choice-card,.samaji-media-select-card{position:relative;display:flex!important;gap:.75rem;align-items:center;margin:0!important;padding:.85rem;border:1px solid var(--samaji-intel-border,#e5e7eb);border-radius:14px;background:var(--bs-body-bg);cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.samaji-choice-card:hover,.samaji-media-select-card:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(10,31,68,.08)}.samaji-choice-card:has(input:checked),.samaji-media-select-card:has(input:checked),.samaji-platform-picker label:has(input:checked),.samaji-pill-grid label:has(input:checked){border-color:#3527C8;background:color-mix(in srgb,#3527C8 8%,var(--bs-body-bg));box-shadow:0 0 0 3px color-mix(in srgb,#3527C8 14%,transparent)}.samaji-choice-card input,.samaji-media-select-card input{width:auto!important;flex:0 0 auto}.samaji-choice-card strong,.samaji-choice-card small,.samaji-media-select-card strong,.samaji-media-select-card small{display:block}.samaji-choice-card small,.samaji-media-select-card small{color:var(--bs-secondary-color);line-height:1.35}.samaji-platform-picker{display:flex;gap:.55rem;flex-wrap:wrap}.samaji-platform-picker label{display:inline-flex!important;align-items:center;gap:.45rem;margin:0!important;padding:.65rem .85rem;border:1px solid var(--samaji-intel-border,#e5e7eb);border-radius:999px;cursor:pointer}.samaji-platform-picker input{width:auto!important}.samaji-media-select-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.75rem;max-height:430px;overflow:auto;padding:.2rem}.samaji-media-select-card{align-items:flex-start}.samaji-media-select-card__preview{width:54px;height:54px;flex:0 0 54px;border-radius:12px;background:#eef2ff;display:grid;place-items:center;overflow:hidden;color:#3527C8}.samaji-media-select-card__preview img{width:100%;height:100%;object-fit:cover}.samaji-asliai-empty{display:grid;place-items:center;text-align:center;gap:.45rem;padding:2rem;border:1px dashed var(--samaji-intel-border,#e5e7eb);border-radius:18px;color:var(--bs-secondary-color)}.samaji-asliai-empty img{width:120px;height:120px;object-fit:contain}.samaji-social-preview{border:1px solid var(--samaji-intel-border,#e5e7eb);border-radius:18px;overflow:hidden;background:var(--bs-body-bg)}.samaji-social-preview__head{display:flex;gap:.75rem;align-items:center;padding:1rem;border-bottom:1px solid var(--samaji-intel-border,#e5e7eb)}.samaji-preview-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#3527C8,#8858F0);color:#fff;font-weight:800}.samaji-social-preview__head small{display:block;color:var(--bs-secondary-color)}.samaji-preview-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:2px;background:var(--samaji-intel-border,#e5e7eb)}.samaji-preview-media img{width:100%;height:190px;object-fit:cover;background:#eef2ff}.samaji-social-preview .samaji-ai-output{border:0;border-radius:0;background:transparent;white-space:pre-wrap}.samaji-setup-card code{font-size:.85em}.samaji-brandvoice-form{display:grid;gap:1rem}.samaji-guided-section{display:grid;gap:.65rem;padding:1rem;border:1px solid var(--samaji-intel-border,#e5e7eb);border-radius:16px;background:color-mix(in srgb,#3527C8 3%,var(--bs-body-bg))}.samaji-pill-grid{display:flex;flex-wrap:wrap;gap:.55rem}.samaji-pill-grid label{display:inline-flex!important;align-items:center;gap:.45rem;margin:0!important;padding:.55rem .75rem;border:1px solid var(--samaji-intel-border,#e5e7eb);border-radius:999px;background:var(--bs-body-bg);cursor:pointer;font-size:.85rem}.samaji-pill-grid input{width:auto!important}.samaji-pill-grid--wide label{border-radius:12px}.samaji-mini-label{display:block;margin-bottom:.45rem;font-weight:700;color:var(--samaji-intel-navy,#0A1F44)}@keyframes samaji-asliai-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}[data-theme="dark"] .samaji-asliai-hero{background:linear-gradient(135deg,rgba(53,39,200,.18),rgba(136,88,240,.13))}[data-theme="dark"] .samaji-asliai-form h2,[data-theme="dark"] .samaji-guided-section h2,[data-theme="dark"] .samaji-mini-label{color:#eef2ff}@media(max-width:980px){.samaji-asliai-shell{grid-template-columns:1fr}.samaji-asliai-result{position:static}.samaji-asliai-hero{display:flex!important}.samaji-asliai-mascot{width:86px;height:86px}}@media(max-width:640px){.samaji-asliai-hero{align-items:flex-start!important}.samaji-asliai-mascot{position:absolute;right:.75rem;top:.75rem;width:68px;height:68px;opacity:.78}.samaji-asliai-hero h1,.samaji-asliai-hero p{padding-right:74px}.samaji-choice-grid,.samaji-media-select-grid{grid-template-columns:1fr}.samaji-preview-media img{height:150px}}
.samaji-p5-hero{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;padding:1.4rem;border-radius:22px;background:linear-gradient(135deg,#0A1F44,#3527C8 62%,#8858F0);color:#fff;margin-bottom:1rem}.samaji-p5-hero h1{font-size:clamp(1.6rem,3vw,2.5rem);margin:.25rem 0}.samaji-p5-kicker{font-family:"IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}.samaji-p5-badge{padding:.45rem .75rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(255,255,255,.12);white-space:nowrap}.samaji-p5-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin-bottom:1rem}.samaji-p5-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;margin-bottom:1rem}.samaji-p5-card{background:var(--samaji-surface,#fff);border:1px solid var(--samaji-border,#dfe4ef);border-radius:18px;padding:1.15rem;box-shadow:0 10px 30px rgba(10,31,68,.06);margin-bottom:1rem}.samaji-p5-card>small{display:block;color:#667085}.samaji-p5-card>strong{display:block;font-size:1.7rem;color:#0A1F44}.samaji-p5-card label{display:block;font-weight:600;margin:.75rem 0}.samaji-p5-card input,.samaji-p5-card select,.samaji-p5-card textarea{display:block;width:100%;margin-top:.3rem;padding:.7rem;border:1px solid #cfd6e4;border-radius:10px;background:var(--samaji-surface,#fff);color:inherit}.samaji-p5-card textarea{min-height:100px}.samaji-p5-row{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--samaji-border,#e5e7eb)}.samaji-p5-row span{color:#667085;text-align:right}.samaji-p5-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}.samaji-check{display:flex!important;align-items:center;gap:.6rem}.samaji-check input{width:auto!important;margin:0!important}.samaji-empty{color:#667085;padding:1rem;border:1px dashed #cfd6e4;border-radius:12px}@media(max-width:860px){.samaji-p5-split,.samaji-p5-form-grid{grid-template-columns:1fr}.samaji-p5-hero{flex-direction:column}.samaji-p5-row{flex-direction:column}.samaji-p5-row span{text-align:left}}[data-theme="dark"] .samaji-p5-card{background:#10264a;border-color:#284066}.samaji-p5-card :focus-visible{outline:3px solid #8858F0;outline-offset:2px}
/* ========================================================================== 
   FINAL ENTERPRISE CONSOLIDATION — canonical product and onboarding layer
   ========================================================================== */
.samaji-onboarding-shell{min-height:100vh;background:var(--xis-bg);color:var(--xis-text);font-family:var(--xis-font-sans)}
.samaji-onboarding-header{height:72px;display:flex;align-items:center;gap:20px;padding:0 clamp(20px,4vw,56px);background:var(--xis-surface);border-bottom:1px solid var(--xis-border);position:sticky;top:0;z-index:var(--xis-z-sticky)}
.samaji-onboarding-header>div{display:flex;flex-direction:column;line-height:1.25}.samaji-onboarding-header>div span{color:var(--xis-muted);font-size:var(--xis-fs-sm)}
.samaji-onboarding-brand{display:flex;align-items:center;margin-right:auto}.samaji-onboarding-brand img{width:148px;max-height:38px}
.samaji-onboarding-layout{width:min(1180px,calc(100% - 32px));margin:40px auto;display:grid;grid-template-columns:340px minmax(0,1fr);border:1px solid var(--xis-border);border-radius:var(--xis-radius-xl);overflow:hidden;background:var(--xis-surface);box-shadow:var(--xis-shadow-md)}
.samaji-onboarding-progress{padding:36px;background:var(--xis-gradient-navy);color:#fff}.samaji-onboarding-progress__intro h1{font-size:1.75rem;margin:10px 0}.samaji-onboarding-progress__intro p{color:#cbd5e1;line-height:1.65}
.samaji-onboarding-progress ol{list-style:none;padding:24px 0 0;margin:24px 0 0;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:8px}.samaji-onboarding-progress li{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;color:#94a3b8}.samaji-onboarding-progress li>span{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:10px}.samaji-onboarding-progress li div{display:flex;flex-direction:column}.samaji-onboarding-progress li small{font-size:11px}.samaji-onboarding-progress li.is-active{background:rgba(255,255,255,.1);color:#fff}.samaji-onboarding-progress li.is-active>span{background:var(--xis-primary);border-color:transparent}.samaji-onboarding-progress li.is-complete{color:#d1fae5}.samaji-onboarding-progress li.is-complete>span{background:rgba(16,185,129,.2);border-color:rgba(52,211,153,.35)}
.samaji-onboarding-panel{padding:clamp(28px,5vw,56px)}.samaji-onboarding-panel__head{max-width:680px;margin-bottom:30px}.samaji-onboarding-panel__head h2{font-size:2rem;color:var(--xis-text-strong);margin:8px 0}.samaji-onboarding-panel__head p{font-size:1rem;color:var(--xis-muted)}
.samaji-onboarding-form{display:grid;gap:28px}.xis-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.xis-field{display:grid;gap:8px}.xis-field>span{font-weight:600;color:var(--xis-text-strong)}.xis-field small,.xis-help{color:var(--xis-muted)}.xis-color-control{min-height:46px;padding:6px}
.samaji-onboarding-choice{display:flex;gap:20px;padding:24px;border:1px solid var(--xis-border);border-radius:var(--xis-radius-lg);background:var(--xis-surface-soft)}.samaji-onboarding-choice__icon{width:56px;height:56px;display:grid;place-items:center;border-radius:16px;background:var(--xis-surface-indigo);color:var(--xis-primary);font-size:1.5rem;flex:0 0 auto}.samaji-onboarding-choice h3{margin:0 0 6px;color:var(--xis-text-strong)}
.samaji-radio-cards{border:0;padding:0;margin:0;display:grid;gap:12px}.samaji-radio-cards legend{font-size:.85rem;font-weight:600;margin-bottom:10px}.samaji-radio-cards label input{position:absolute;opacity:0}.samaji-radio-cards label span{display:grid;grid-template-columns:32px 1fr;column-gap:12px;padding:18px;border:1px solid var(--xis-border);border-radius:var(--xis-radius-md);cursor:pointer}.samaji-radio-cards label i{grid-row:1/3;color:var(--xis-primary);font-size:1.25rem}.samaji-radio-cards label small{color:var(--xis-muted)}.samaji-radio-cards label input:checked+span{border-color:var(--xis-primary);box-shadow:var(--xis-focus-ring);background:var(--xis-surface-indigo)}
.samaji-upload-panel{text-align:center;padding:40px;border:2px dashed var(--xis-border-strong);border-radius:var(--xis-radius-lg);background:var(--xis-surface-soft)}.samaji-upload-panel>i{font-size:2.5rem;color:var(--xis-primary)}.samaji-upload-panel .xis-control{margin-top:18px;text-align:left}
.samaji-onboarding-actions{display:flex;align-items:center;justify-content:space-between;padding-top:22px;border-top:1px solid var(--xis-border)}.samaji-onboarding-actions>div{display:flex;gap:10px}
.xis-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 16px;border:1px solid transparent;border-radius:var(--xis-radius-sm);font-weight:600;text-decoration:none;cursor:pointer}.xis-btn--primary{color:#fff;background:var(--xis-primary)}.xis-btn--primary:hover{background:var(--xis-primary-hover);color:#fff}.xis-btn--secondary{color:var(--xis-primary);background:var(--xis-surface-indigo);border-color:rgba(var(--xis-primary-rgb),.2)}.xis-btn--ghost{color:var(--xis-text);background:transparent;border-color:var(--xis-border)}
.xis-alert{display:flex;gap:12px;padding:16px;border-radius:var(--xis-radius-md);border:1px solid}.xis-alert p{margin:4px 0 0}.xis-alert--info{background:var(--xis-surface-info);border-color:rgba(var(--xis-info-rgb),.25);color:var(--xis-text)}
@media(max-width:900px){.samaji-onboarding-layout{grid-template-columns:1fr;margin:20px auto}.samaji-onboarding-progress{padding:24px}.samaji-onboarding-progress__intro p{display:none}.samaji-onboarding-progress ol{grid-template-columns:repeat(6,1fr);gap:4px}.samaji-onboarding-progress li{padding:4px;justify-content:center}.samaji-onboarding-progress li div{display:none}.samaji-onboarding-panel{padding:28px}}
@media(max-width:640px){.samaji-onboarding-header{padding:0 16px}.samaji-onboarding-header>div{display:none}.samaji-onboarding-brand img{width:122px}.samaji-onboarding-layout{width:calc(100% - 20px)}.xis-form-grid{grid-template-columns:1fr}.samaji-onboarding-choice{flex-direction:column}.samaji-onboarding-actions{align-items:stretch;gap:10px}.samaji-onboarding-actions,.samaji-onboarding-actions>div{flex-direction:column}.samaji-onboarding-actions .xis-btn{width:100%}}
/* Samaji authentication extension */
.samaji-auth-card--wide{width:min(100%,560px)}
.samaji-auth-footer-link{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--xis-border);color:var(--xis-text-soft);font-size:.82rem;text-align:center}
.samaji-auth-footer-link a{font-weight:650}
.samaji-password-rules{display:flex;align-items:flex-start;gap:.55rem;margin-top:.8rem;padding:.72rem .8rem;border:1px solid rgba(var(--xis-primary-rgb),.14);border-radius:10px;background:var(--xis-surface-indigo);color:var(--xis-text-soft);font-size:.75rem;line-height:1.5}
.samaji-password-rules i{margin-top:.1rem;color:var(--xis-primary)}
.samaji-auth-card .form-check-label{font-size:.78rem;color:var(--xis-text-soft)}
.samaji-auth-card .alert ul{padding-left:1.1rem}
.samaji-auth-brand-logo{width:48px;height:48px;object-fit:contain}
@media(max-width:991.98px){.samaji-auth-card--wide{max-width:620px}.samaji-auth-page--signup .samaji-auth-form-side{padding-block:2rem}}
@media(max-width:575.98px){.samaji-auth-form-side{align-items:start}.samaji-auth-card{padding-top:1rem}.samaji-auth-card--wide{width:100%}}
.samaji-dashboard{display:grid;gap:24px}.samaji-dashboard-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:270px;padding:38px 40px;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:linear-gradient(135deg,#0a1f44 0%,#172f63 54%,#3527c8 100%);box-shadow:0 18px 44px rgba(10,31,68,.18);color:#fff}.samaji-dashboard-hero:before{content:"";position:absolute;inset:auto -12% -65% auto;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(136,88,240,.45),rgba(136,88,240,0) 68%)}.samaji-dashboard-hero__content,.samaji-dashboard-hero__actions{position:relative;z-index:2}.samaji-dashboard-hero__content{max-width:780px}.samaji-dashboard-hero__eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;color:#c7d2fe;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.samaji-live-dot{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 5px rgba(52,211,153,.13)}.samaji-dashboard-hero h1{max-width:720px;margin:0;color:#fff;font-size:clamp(30px,4vw,46px);font-weight:700;letter-spacing:-.045em}.samaji-dashboard-hero p{max-width:700px;margin:14px 0 20px;color:#cbd5e1;font-size:16px;line-height:1.65}.samaji-dashboard-hero__meta{display:flex;flex-wrap:wrap;gap:10px 22px;color:#dbeafe;font-size:13px}.samaji-dashboard-hero__meta span{display:inline-flex;align-items:center;gap:8px}.samaji-dashboard-hero__actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;max-width:350px}.xis-btn--hero-secondary{border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.08);color:#fff}.xis-btn--hero-secondary:hover{background:rgba(255,255,255,.16);color:#fff}.xis-btn--hero-icon{display:grid;width:44px;height:44px;place-items:center;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(255,255,255,.07);color:#fff}.samaji-dashboard-hero__visual{position:absolute;right:45px;bottom:-70px;width:220px;height:220px;opacity:.18}.samaji-orbit{position:absolute;inset:0;border:1px solid #fff;border-radius:50%}.samaji-orbit--two{inset:34px}.samaji-hero-mark{position:absolute;inset:76px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#3527c8;font-size:26px}.samaji-alert-stack{display:grid;gap:10px}.samaji-dashboard-alert{display:grid;grid-template-columns:40px minmax(0,1fr) auto 34px;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--xis-border);border-left-width:4px;border-radius:14px;background:var(--xis-surface);box-shadow:var(--xis-shadow-xs)}.samaji-dashboard-alert--danger{border-left-color:var(--xis-danger)}.samaji-dashboard-alert--warning{border-left-color:var(--xis-warning)}.samaji-dashboard-alert--info{border-left-color:var(--xis-info)}.samaji-dashboard-alert--success{border-left-color:var(--xis-success)}.samaji-dashboard-alert__icon{display:grid;width:36px;height:36px;place-items:center;border-radius:10px;background:var(--xis-surface-soft)}.samaji-dashboard-alert__copy{display:grid}.samaji-dashboard-alert__copy strong{color:var(--xis-text-strong)}.samaji-dashboard-alert__copy span{color:var(--xis-text-soft);font-size:13px}.samaji-dashboard-alert__close{border:0;background:transparent;color:var(--xis-text-soft)}.samaji-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.samaji-kpi-card{position:relative;min-width:0;padding:21px;border:1px solid var(--xis-border);border-radius:18px;background:var(--xis-surface);box-shadow:var(--xis-shadow-xs);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}.samaji-kpi-card:hover{transform:translateY(-2px);box-shadow:var(--xis-shadow-sm)}.samaji-kpi-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--tone,#3527c8)}.samaji-kpi-card--indigo{--tone:#3527c8;--tone-soft:#eef2ff}.samaji-kpi-card--success{--tone:#10b981;--tone-soft:#ecfdf5}.samaji-kpi-card--warning{--tone:#f59e0b;--tone-soft:#fffbeb}.samaji-kpi-card--info{--tone:#3b82f6;--tone-soft:#eff6ff}.samaji-kpi-card__top{display:flex;align-items:center;justify-content:space-between}.samaji-kpi-card__icon{display:grid;width:42px;height:42px;place-items:center;border-radius:12px;background:var(--tone-soft);color:var(--tone)}.samaji-kpi-card__period{padding:3px 8px;border-radius:7px;background:var(--xis-surface-soft);color:var(--xis-text-soft);font-size:11px;font-weight:600}.samaji-kpi-card__value{margin-top:18px;color:var(--xis-text-strong);font-size:32px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.samaji-kpi-card__label{margin-top:2px;color:var(--xis-text-strong);font-size:14px;font-weight:600}.samaji-kpi-card__note{margin-top:5px;color:var(--xis-text-soft);font-size:12px}.samaji-kpi-card__bar{height:4px;margin-top:17px;overflow:hidden;border-radius:99px;background:var(--xis-slate-100)}.samaji-kpi-card__bar span{display:block;height:100%;border-radius:inherit;background:var(--tone)}.samaji-dashboard-grid{display:grid;gap:20px}.samaji-dashboard-grid--health{grid-template-columns:1.08fr .92fr}.samaji-dashboard-grid--main{grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);align-items:start}.xis-card{border:1px solid var(--xis-border);border-radius:18px;background:var(--xis-surface);box-shadow:var(--xis-shadow-xs)}.xis-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:21px 22px;border-bottom:1px solid var(--xis-divider)}.xis-card__header p{margin:5px 0 0;color:var(--xis-text-soft);font-size:13px}.samaji-health-score{padding:5px 10px;border-radius:8px;font-size:12px;font-weight:700}.samaji-health-score--good{background:var(--xis-surface-success);color:#047857}.samaji-health-score--warning{background:var(--xis-surface-warning);color:#b45309}.samaji-health-card__body{display:grid;grid-template-columns:160px minmax(0,1fr);align-items:center;gap:24px;padding:24px}.samaji-health-ring{display:grid;width:138px;height:138px;place-items:center;border-radius:50%;background:conic-gradient(var(--xis-primary) calc(var(--health)*1%),var(--xis-slate-100) 0);position:relative}.samaji-health-ring:after{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--xis-surface)}.samaji-health-ring div{position:relative;z-index:1;display:grid;text-align:center}.samaji-health-ring strong{color:var(--xis-text-strong);font-size:28px}.samaji-health-ring span{color:var(--xis-text-soft);font-size:12px}.samaji-health-list{display:grid}.samaji-health-item{display:grid;grid-template-columns:38px minmax(0,1fr) 16px;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--xis-divider);color:inherit}.samaji-health-item:last-child{border-bottom:0}.samaji-health-item__icon,.samaji-system-item__icon{display:grid;width:36px;height:36px;place-items:center;border-radius:10px}.is-good{background:var(--xis-surface-success);color:var(--xis-success)}.is-warning{background:var(--xis-surface-warning);color:var(--xis-warning)}.is-muted{background:var(--xis-surface-soft);color:var(--xis-text-muted)}.samaji-health-item strong,.samaji-health-item small{display:block}.samaji-health-item strong{color:var(--xis-text-strong);font-size:13px}.samaji-health-item small{margin-top:2px;color:var(--xis-text-soft);font-size:11px}.samaji-health-item>i{color:var(--xis-text-muted);font-size:11px}.samaji-momentum-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--xis-divider)}.samaji-momentum-grid>div{min-height:126px;padding:22px;background:var(--xis-surface)}.samaji-momentum-grid span,.samaji-momentum-grid small{display:block;color:var(--xis-text-soft);font-size:12px}.samaji-momentum-grid strong{display:block;margin:8px 0 5px;color:var(--xis-text-strong);font-size:27px;letter-spacing:-.04em}.samaji-momentum-grid strong em{font-size:13px;font-style:normal;color:var(--xis-text-soft)}.samaji-mini-progress{height:5px;margin-top:12px;overflow:hidden;border-radius:99px;background:var(--xis-slate-100)}.samaji-mini-progress span{height:100%;border-radius:inherit;background:var(--xis-primary)}.samaji-mini-progress--success span{background:var(--xis-success)}.samaji-content-card{min-width:0}.samaji-post-list{display:grid}.samaji-post-row{display:grid;grid-template-columns:44px minmax(180px,1fr) auto auto minmax(116px,auto) 34px;align-items:center;gap:14px;padding:15px 20px;border-bottom:1px solid var(--xis-divider)}.samaji-post-row:last-child{border-bottom:0}.samaji-post-row:hover{background:var(--xis-surface-soft)}.samaji-post-row__thumb{display:grid;width:42px;height:42px;place-items:center;border-radius:11px;background:var(--xis-surface-indigo);color:var(--xis-primary)}.samaji-post-row__title{display:block;overflow:hidden;color:var(--xis-text-strong);font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.samaji-post-row__meta{display:flex;gap:5px;margin-top:4px;color:var(--xis-text-soft);font-size:11px}.samaji-post-row__networks{display:flex}.samaji-post-row__networks span{display:grid;width:25px;height:25px;margin-left:-5px;place-items:center;border:2px solid var(--xis-surface);border-radius:50%;background:var(--network-color);color:#fff;font-size:9px;font-weight:700}.samaji-post-row__networks span:first-child{margin-left:0}.samaji-post-row__date{color:var(--xis-text-soft);font-size:11px;white-space:nowrap}.xis-status{display:inline-flex;align-items:center;padding:4px 8px;border-radius:7px;font-size:10px;font-weight:600;white-space:nowrap}.xis-status--success{background:var(--xis-surface-success);color:#047857}.xis-status--primary{background:var(--xis-surface-indigo);color:var(--xis-primary)}.xis-status--warning{background:var(--xis-surface-warning);color:#b45309}.xis-status--info{background:var(--xis-surface-info);color:#1d4ed8}.xis-status--danger{background:var(--xis-surface-danger);color:#b91c1c}.xis-status--neutral{background:var(--xis-surface-soft);color:var(--xis-text-soft)}.xis-icon-btn{display:grid;width:32px;height:32px;place-items:center;border:1px solid var(--xis-border);border-radius:9px;background:var(--xis-surface);color:var(--xis-text-soft)}.xis-icon-btn:hover{border-color:rgba(var(--xis-primary-rgb),.25);background:var(--xis-surface-indigo);color:var(--xis-primary)}.samaji-dashboard-side{display:grid;gap:20px}.samaji-quick-actions__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:16px}.samaji-quick-actions__grid a{display:grid;min-height:126px;align-content:start;padding:14px;border:1px solid var(--xis-border);border-radius:13px;color:inherit}.samaji-quick-actions__grid a:hover{border-color:rgba(var(--xis-primary-rgb),.25);background:var(--xis-surface-indigo)}.samaji-quick-actions__grid a>span{display:grid;width:34px;height:34px;place-items:center;margin-bottom:12px;border-radius:10px}.samaji-quick-actions__grid .is-indigo{background:var(--xis-surface-indigo);color:var(--xis-primary)}.samaji-quick-actions__grid .is-warning{background:var(--xis-surface-warning);color:var(--xis-warning)}.samaji-quick-actions__grid .is-info{background:var(--xis-surface-info);color:var(--xis-info)}.samaji-quick-actions__grid .is-success{background:var(--xis-surface-success);color:var(--xis-success)}.samaji-quick-actions__grid strong,.samaji-quick-actions__grid small{display:block}.samaji-quick-actions__grid strong{color:var(--xis-text-strong);font-size:12px}.samaji-quick-actions__grid small{margin-top:3px;color:var(--xis-text-soft);font-size:10px;line-height:1.35}.xis-count-badge{min-width:25px;padding:3px 8px;border-radius:8px;background:var(--xis-surface-warning);color:#b45309;font-size:11px;font-weight:700;text-align:center}.samaji-approval-list,.samaji-upcoming-list{display:grid}.samaji-approval-list a{display:grid;grid-template-columns:34px minmax(0,1fr) 14px;align-items:center;gap:10px;padding:13px 17px;border-bottom:1px solid var(--xis-divider);color:inherit}.xis-avatar{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;background:var(--xis-gradient-primary);color:#fff;font-size:11px;font-weight:700}.samaji-approval-list strong,.samaji-approval-list small,.samaji-upcoming-list strong,.samaji-upcoming-list small{display:block}.samaji-approval-list strong,.samaji-upcoming-list strong{overflow:hidden;color:var(--xis-text-strong);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.samaji-approval-list small,.samaji-upcoming-list small{margin-top:3px;color:var(--xis-text-soft);font-size:10px}.samaji-approval-list>a>i{color:var(--xis-text-muted);font-size:10px}.samaji-card-footer-link{display:flex;align-items:center;justify-content:space-between;padding:13px 17px;color:var(--xis-primary);font-size:11px;font-weight:600}.samaji-upcoming-list a{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:11px;padding:12px 17px;border-bottom:1px solid var(--xis-divider);color:inherit}.samaji-upcoming-list time{display:grid;width:42px;height:42px;place-items:center;border-radius:10px;background:var(--xis-surface-indigo);color:var(--xis-primary);line-height:1}.samaji-upcoming-list time strong{font-size:16px}.samaji-upcoming-list time span{font-size:9px;text-transform:uppercase}.samaji-dashboard-empty,.samaji-compact-empty{display:grid;place-items:center;text-align:center}.samaji-dashboard-empty{min-height:330px;padding:35px}.samaji-dashboard-empty__icon{display:grid;width:60px;height:60px;place-items:center;margin-bottom:14px;border-radius:18px;background:var(--xis-surface-indigo);color:var(--xis-primary);font-size:24px}.samaji-dashboard-empty h3{font-size:17px}.samaji-dashboard-empty p{max-width:360px;color:var(--xis-text-soft);font-size:13px}.samaji-compact-empty{min-height:120px;padding:22px;color:var(--xis-text-soft)}.samaji-compact-empty i{margin-bottom:10px;font-size:22px}.samaji-compact-empty p{margin:0;font-size:12px}.samaji-compact-empty.is-success i{color:var(--xis-success)}.samaji-platform-section{overflow:hidden}.samaji-platform-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:18px}.samaji-platform-card{position:relative;padding:16px;border:1px solid var(--xis-border);border-radius:14px;background:var(--xis-surface);overflow:hidden}.samaji-platform-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--network-color)}.samaji-platform-card__head{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px}.samaji-platform-card__icon{display:grid;width:36px;height:36px;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--network-color) 10%,transparent);color:var(--network-color)}.samaji-platform-card__head strong,.samaji-platform-card__head small{display:block}.samaji-platform-card__head strong{color:var(--xis-text-strong);font-size:12px}.samaji-platform-card__head small{margin-top:2px;color:var(--xis-text-soft);font-size:10px}.samaji-platform-card__state{display:flex;align-items:center;gap:5px;color:var(--xis-success);font-size:9px}.samaji-platform-card__state i{font-size:6px}.samaji-platform-card__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0}.samaji-platform-card__stats div{padding:11px;border-radius:10px;background:var(--xis-surface-soft)}.samaji-platform-card__stats span,.samaji-platform-card__stats strong{display:block}.samaji-platform-card__stats span{color:var(--xis-text-soft);font-size:9px}.samaji-platform-card__stats strong{margin-top:3px;color:var(--xis-text-strong);font-size:18px}.samaji-platform-card>a{display:flex;align-items:center;justify-content:space-between;color:var(--xis-primary);font-size:10px;font-weight:600}.samaji-system-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) 36px;align-items:center;gap:8px;padding:15px}.samaji-system-item{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:9px;min-width:0;padding:8px}.samaji-system-item__icon{width:32px;height:32px}.samaji-system-item strong,.samaji-system-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.samaji-system-item strong{color:var(--xis-text-strong);font-size:10px}.samaji-system-item small{margin-top:2px;color:var(--xis-text-soft);font-size:9px}
@media(max-width:1199.98px){.samaji-kpi-grid{grid-template-columns:repeat(2,1fr)}.samaji-dashboard-grid--main{grid-template-columns:1fr}.samaji-dashboard-side{grid-template-columns:repeat(3,minmax(0,1fr))}.samaji-system-strip{grid-template-columns:repeat(3,1fr) 36px}.samaji-platform-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:991.98px){.samaji-dashboard-hero{grid-template-columns:1fr;padding:30px}.samaji-dashboard-hero__actions{justify-content:flex-start;max-width:none;margin-top:24px}.samaji-dashboard-hero__visual{right:-30px}.samaji-dashboard-grid--health{grid-template-columns:1fr}.samaji-dashboard-side{grid-template-columns:1fr}.samaji-post-row{grid-template-columns:42px minmax(0,1fr) auto auto}.samaji-post-row__networks,.samaji-post-row__date{display:none}}
@media(max-width:767.98px){.samaji-dashboard{gap:16px}.samaji-dashboard-hero{min-height:0;padding:25px 22px;border-radius:18px}.samaji-dashboard-hero h1{font-size:29px}.samaji-dashboard-hero__meta{display:grid;gap:8px}.samaji-dashboard-hero__actions{display:grid;grid-template-columns:1fr 1fr 44px;width:100%}.samaji-dashboard-hero__actions .xis-btn{justify-content:center}.samaji-kpi-grid{grid-template-columns:1fr 1fr;gap:10px}.samaji-kpi-card{padding:16px}.samaji-kpi-card__value{font-size:27px}.samaji-health-card__body{grid-template-columns:1fr}.samaji-health-ring{margin:auto}.samaji-momentum-grid{grid-template-columns:1fr 1fr}.samaji-platform-grid{grid-template-columns:1fr}.samaji-system-strip{grid-template-columns:repeat(2,1fr) 36px}.samaji-dashboard-alert{grid-template-columns:36px 1fr 30px}.samaji-dashboard-alert .xis-btn{display:none}.xis-card__header{padding:18px}.samaji-post-row{padding:13px 15px}}
@media(max-width:479.98px){.samaji-dashboard-hero__actions{grid-template-columns:1fr}.xis-btn--hero-icon{width:100%}.samaji-kpi-grid{grid-template-columns:1fr}.samaji-momentum-grid{grid-template-columns:1fr}.samaji-quick-actions__grid{grid-template-columns:1fr 1fr}.samaji-post-row{grid-template-columns:38px minmax(0,1fr) 30px}.samaji-post-row>div:nth-child(4){display:none}.samaji-system-strip{grid-template-columns:1fr 1fr}.samaji-system-strip>.xis-icon-btn{display:none}.samaji-dashboard-alert__copy span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.samaji-kpi-card{transition:none}.fa-spin{animation:none!important}}
@media print{.samaji-dashboard-hero__actions,.samaji-quick-actions,.samaji-system-strip{display:none!important}.samaji-dashboard-hero{background:#0a1f44!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.samaji-dashboard-grid--main,.samaji-dashboard-grid--health{grid-template-columns:1fr}}

/* Samaji 6.5.5 dashboard/sidebar polish */
.samaji-dashboard-side .samaji-quick-actions{
    display:block!important;
    width:100%!important;
    overflow:hidden!important;
}
.samaji-sidebar-scroll{
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
    scroll-padding-block:72px;
    overscroll-behavior:contain;
}
.samaji-sidebar-scroll::-webkit-scrollbar{width:0;height:0}
.samaji-nav-link{isolation:isolate}
.samaji-nav-link.is-active,.samaji-nav-link[aria-current=page]{
    position:relative;
    outline:1px solid rgba(255,255,255,.08);
}
.samaji-nav-link.is-active:before,.samaji-nav-link[aria-current=page]:before{
    content:"";
    position:absolute;
    inset:8px auto 8px -8px;
    width:3px;
    border-radius:999px;
    background:#a5b4fc;
}
html[data-theme=light] .samaji-app-sidebar{
    background:linear-gradient(180deg,#081b3d 0%,#0e2857 54%,#151f3f 100%);
}
html[data-theme=dark] .samaji-app-sidebar{
    background:linear-gradient(180deg,#020617 0%,#08152e 52%,#0f172a 100%);
    border-right-color:rgba(148,163,184,.14);
    box-shadow:12px 0 36px rgba(0,0,0,.34);
}
html[data-theme=dark] .samaji-workspace-card,
html[data-theme=dark] .samaji-sidebar-footer{border-color:rgba(148,163,184,.14)}
html[data-theme=dark] .samaji-nav-link{color:#cbd5e1!important}
html[data-theme=dark] .samaji-nav-section-label{color:#7f92b2}

.samaji-kpi-card{
    min-height:178px;
    border-radius:20px;
    background:
        radial-gradient(circle at 100% 0,color-mix(in srgb,var(--tone) 13%,transparent),transparent 34%),
        linear-gradient(180deg,var(--xis-surface),var(--xis-surface-raised));
}
.samaji-kpi-card:after{
    content:"";
    position:absolute;
    right:18px;
    bottom:18px;
    width:74px;
    height:74px;
    border-radius:22px;
    background:var(--tone-soft);
    opacity:.48;
    transform:rotate(8deg);
}
.samaji-kpi-card__top,
.samaji-kpi-card__value,
.samaji-kpi-card__label,
.samaji-kpi-card__note,
.samaji-kpi-card__bar{position:relative;z-index:1}
.samaji-kpi-card__icon{
    width:46px;
    height:46px;
    border-radius:14px;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 15%,transparent);
}
.samaji-kpi-card__value{font-size:36px}
.samaji-kpi-card__label{font-size:13px;text-transform:uppercase;letter-spacing:.055em}
.samaji-kpi-card__note{min-height:18px}
html[data-theme=dark] .samaji-kpi-card{
    background:
        radial-gradient(circle at 100% 0,color-mix(in srgb,var(--tone) 20%,transparent),transparent 38%),
        linear-gradient(180deg,#101827,#0b1220);
}
html[data-theme=dark] .samaji-kpi-card__period{background:rgba(148,163,184,.1)}
html[data-theme=dark] .samaji-kpi-card__bar{background:rgba(148,163,184,.16)}

.samaji-quick-actions__grid{
    grid-template-columns:repeat(2,minmax(180px,1fr));
    gap:12px;
    padding:18px;
}
.samaji-quick-actions .xis-card__header{
    display:block!important;
    width:100%!important;
    padding:21px 22px 10px!important;
    border-bottom:0!important;
}
.samaji-quick-actions .xis-card__header .xis-kicker,
.samaji-quick-actions .xis-card__header .xis-card-title{
    display:block;
}
.samaji-quick-actions .samaji-quick-actions__grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    clear:both!important;
    padding:8px 18px 18px!important;
}
.samaji-quick-actions__grid .samaji-quick-action-card{
    position:relative;
    display:grid;
    grid-template-columns:38px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;
    column-gap:10px!important;
    min-width:0!important;
    min-height:104px!important;
    padding:13px!important;
    border:1px solid var(--xis-border);
    border-radius:14px;
    background:linear-gradient(180deg,var(--xis-surface),var(--xis-surface-soft));
    color:inherit;
    text-decoration:none;
    box-shadow:0 1px 0 rgba(15,23,42,.03);
}
.samaji-quick-actions__grid .samaji-quick-action-card:hover{
    border-color:rgba(var(--xis-primary-rgb),.28);
    background:var(--xis-surface-indigo);
    color:inherit;
    transform:translateY(-1px);
}
.samaji-quick-actions__grid .samaji-quick-action-card>span{
    grid-row:1 / span 2;
    display:grid;
    width:38px;
    height:38px;
    place-items:center;
    margin:0;
    border-radius:12px;
    font-size:16px;
}
.samaji-quick-actions__grid .samaji-quick-action-card>strong{
    min-width:0;
    color:var(--xis-text-strong);
    font-size:13px;
    line-height:1.25;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
}
.samaji-quick-actions__grid .samaji-quick-action-card>small{
    min-width:0;
    margin-top:2px;
    color:var(--xis-text-soft);
    font-size:11px;
    line-height:1.35;
    overflow:visible!important;
    white-space:normal!important;
}
.samaji-quick-actions__grid .samaji-quick-action-card>i{
    position:absolute!important;
    right:10px!important;
    top:10px!important;
    color:var(--xis-text-muted);
    font-size:11px;
}
.samaji-quick-actions__grid .samaji-quick-action-card.is-disabled{
    opacity:.58;
    cursor:not-allowed;
}
.samaji-quick-actions__grid .is-violet{background:var(--xis-surface-violet);color:var(--xis-secondary)}
.samaji-quick-actions__grid .is-slate{background:var(--xis-surface-soft);color:var(--xis-slate-600)}
html[data-theme=dark] .samaji-quick-actions__grid .samaji-quick-action-card{
    background:linear-gradient(180deg,#101827,#0b1220);
    box-shadow:none;
}
html[data-theme=dark] .samaji-quick-actions__grid .samaji-quick-action-card:hover{background:#111d33}
html[data-theme=dark] .samaji-quick-actions__grid .is-slate{background:rgba(148,163,184,.12);color:#cbd5e1}

html[data-theme=dark] .samaji-dashboard-hero{
    border-color:rgba(148,163,184,.16);
    background:linear-gradient(135deg,#020617 0%,#0f1d38 56%,#281f8d 100%);
}
html[data-theme=dark] .samaji-dashboard-alert,
html[data-theme=dark] .samaji-platform-card,
html[data-theme=dark] .samaji-system-strip,
html[data-theme=dark] .xis-card{
    background:#0b1220;
}
html[data-theme=dark] .samaji-post-row:hover,
html[data-theme=dark] .samaji-platform-card__stats div{background:#111d33}

@media(max-width:1199.98px){
    .samaji-quick-actions .samaji-quick-actions__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:767.98px){
    .samaji-quick-actions .samaji-quick-actions__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .samaji-quick-action-card{grid-template-columns:38px minmax(0,1fr);min-height:86px}
    .samaji-quick-action-card>i{display:none}
}
@media(max-width:479.98px){
    .samaji-quick-actions__grid{grid-template-columns:1fr}
}
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  --primary: #3527c8;
  --primary-hover: #2f22b3;
  --violet: #8858f0;
  --navy: #0a1f44;
  --navy-2: #142f61;
  --ink: #0f172a;
  --text: #334155;
  --muted: #64748b;
  --line: #e4e8f0;
  --soft: #f6f7fb;
  --surface: #ffffff;
  --success: #10b981;
  --warning: #f59e0b;
  --shadow-sm: 0 8px 24px rgba(15, 23, 42, .07);
  --shadow-lg: 0 30px 80px rgba(15, 23, 42, .16);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --container: 1200px;
}

html[data-theme="dark"] {
  --ink: #f8fafc;
  --text: #d8e0ec;
  --muted: #98a7bc;
  --line: #243149;
  --soft: #07111f;
  --surface: #0d1727;
  --shadow-sm: 0 8px 24px rgba(0,0,0,.22);
  --shadow-lg: 0 30px 80px rgba(0,0,0,.42);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'IBM Plex Sans', Arial, sans-serif; color: var(--text); background: var(--surface); line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 3px solid rgba(99,102,241,.35); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 9999; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { top: 16px; }
.container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 1000; height: 76px; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.site-header.is-scrolled { background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--line); box-shadow: 0 6px 28px rgba(15,23,42,.06); backdrop-filter: blur(18px); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; }
.brand-mark img { width: 38px; height: 38px; }
.brand-mark--dark { display: none; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { color: var(--ink); font-size: 18px; letter-spacing: -.02em; }
.brand-copy small { color: var(--muted); margin-top: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.primary-nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.primary-nav a { color: var(--text); font-size: 14px; font-weight: 600; }
.primary-nav a:hover { color: var(--primary); }
.header-actions { display: flex; align-items: center; gap: 9px; }
.theme-toggle, .menu-toggle { border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.theme-toggle { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.theme-toggle svg { width: 18px; height: 18px; }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 10px; }
.menu-toggle span:not(.sr-only) { display: block; height: 2px; margin: 5px 0; background: currentColor; border-radius: 4px; }

.btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 700; transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--primary), #6366f1); box-shadow: 0 12px 28px rgba(53,39,200,.24); }
.btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #5855e8); }
.btn-secondary { color: var(--ink); border-color: var(--line); background: var(--surface); }
.btn-secondary:hover, .btn-ghost:hover { border-color: #bfc7d6; background: var(--soft); }
.btn-ghost { color: var(--ink); background: transparent; }
.btn-lg { min-height: 50px; padding-inline: 23px; border-radius: 12px; }
.btn-light { color: var(--navy); background: #fff; box-shadow: 0 14px 30px rgba(0,0,0,.16); }
.btn-outline-light { color: #fff; border-color: rgba(255,255,255,.42); }

.hero { position: relative; overflow: hidden; padding: 150px 0 92px; background: radial-gradient(circle at 14% 10%, rgba(99,102,241,.13), transparent 31%), linear-gradient(180deg, #fbfcff 0%, #f7f8fd 100%); }
html[data-theme="dark"] .hero { background: radial-gradient(circle at 14% 10%, rgba(99,102,241,.18), transparent 31%), linear-gradient(180deg, #07111f 0%, #0a1424 100%); }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .55; pointer-events: none; }
.hero-orb--one { width: 440px; height: 440px; right: -180px; top: -120px; background: radial-gradient(circle, rgba(136,88,240,.22), transparent 67%); }
.hero-orb--two { width: 260px; height: 260px; left: -130px; bottom: -100px; background: radial-gradient(circle, rgba(53,39,200,.16), transparent 68%); }
.hero-grid { position: relative; display: grid; grid-template-columns: .92fr 1.18fr; gap: 64px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--primary); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.eyebrow span { width: 22px; height: 2px; background: currentColor; border-radius: 4px; }
.hero h1 { margin: 18px 0 20px; color: var(--ink); font-size: clamp(44px, 5vw, 70px); line-height: 1.01; letter-spacing: -.055em; max-width: 700px; }
.hero-lead { margin: 0; max-width: 650px; color: var(--muted); font-size: 18px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-proof { margin-top: 36px; padding-top: 27px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hero-proof div { display: flex; flex-direction: column; gap: 4px; }
.hero-proof strong { color: var(--ink); font-size: 14px; }
.hero-proof span { color: var(--muted); font-size: 12px; line-height: 1.45; }

.app-preview { position: relative; }
.app-preview::before { content: ''; position: absolute; inset: 8% -5% -8% 8%; border-radius: 40px; background: linear-gradient(135deg, rgba(53,39,200,.18), rgba(136,88,240,.07)); filter: blur(30px); }
.preview-shell { position: relative; display: grid; grid-template-columns: 148px minmax(0,1fr); min-height: 470px; overflow: hidden; border: 1px solid rgba(255,255,255,.62); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-lg); transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg); }
.preview-sidebar { padding: 18px 12px; color: #dbeafe; background: linear-gradient(155deg, var(--navy), #17376d); }
.preview-brand { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 13px; }
.preview-brand img { width: 25px; height: 25px; }
.preview-workspace { display: flex; gap: 8px; align-items: center; margin: 20px 0; padding: 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.06); }
.preview-workspace > b { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--violet)); font-size: 10px; }
.preview-workspace span { display: flex; min-width: 0; flex-direction: column; line-height: 1.2; }
.preview-workspace strong { font-size: 9px; color: #fff; }
.preview-workspace small { margin-top: 3px; color: #9fb5d5; font-size: 7px; }
.preview-nav { display: grid; gap: 7px; }
.preview-nav span { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 8px; color: #bdcce3; font-size: 9px; font-weight: 600; }
.preview-nav i { width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 3px; opacity: .85; }
.preview-nav .is-active { color: #fff; background: linear-gradient(135deg, rgba(53,39,200,.8), rgba(136,88,240,.55)); }
.preview-main { min-width: 0; background: #f6f7fb; }
.preview-topbar { height: 50px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; color: #1e293b; border-bottom: 1px solid #e5e7eb; background: #fff; font-size: 10px; font-weight: 600; }
.preview-topbar b { width: 27px; height: 27px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--navy); font-size: 8px; }
.preview-content { padding: 18px; }
.preview-welcome { min-height: 76px; display: flex; justify-content: space-between; align-items: center; padding: 16px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--navy), #243f78 65%, #4f46e5); }
.preview-welcome div { display: flex; flex-direction: column; gap: 3px; }
.preview-welcome small { color: #c8d7ee; font-size: 7px; }
.preview-welcome strong { font-size: 12px; }
.preview-welcome > span { padding: 7px 10px; border-radius: 7px; background: #fff; color: var(--navy); font-size: 7px; font-weight: 700; }
.preview-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin: 12px 0; }
.preview-stats article { min-width: 0; padding: 11px; border: 1px solid #e6e9f0; border-radius: 10px; background: #fff; }
.preview-stats small, .preview-stats em { display: block; color: #64748b; font-size: 6.5px; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-stats strong { display: block; margin: 4px 0; color: #0f172a; font-size: 18px; }
.preview-stats em { color: #10b981; }
.preview-panels { display: grid; grid-template-columns: 1.25fr .85fr; gap: 10px; }
.preview-panels article { min-width: 0; min-height: 165px; padding: 12px; border: 1px solid #e6e9f0; border-radius: 11px; background: #fff; }
.panel-head { display: flex; justify-content: space-between; align-items: center; color: #0f172a; font-size: 7px; }
.panel-head span { color: #64748b; font-size: 6px; }
.chart-bars { height: 105px; margin-top: 17px; display: flex; align-items: flex-end; gap: 7px; border-bottom: 1px solid #e7eaf0; }
.chart-bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #6366f1, #3527c8); }
.preview-list > div:not(.panel-head) { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #edf0f4; }
.preview-list > div:last-child { border-bottom: 0; }
.network { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 22px; border-radius: 6px; color: #fff; font-size: 7px; }
.network-f { background: #1877f2; }.network-i { background: #c13584; }.network-l { background: #0a66c2; }
.preview-list div span { min-width: 0; display: flex; flex-direction: column; }
.preview-list strong { color: #0f172a; font-size: 6.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-list small { color: #64748b; font-size: 5.8px; }

.brand-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.strip-inner { min-height: 76px; display: flex; align-items: center; justify-content: center; gap: 22px; color: var(--muted); font-size: 13px; }
.strip-inner > span { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 700; }
.strip-inner strong { color: var(--ink); font-weight: 600; }
.strip-inner i { width: 4px; height: 4px; border-radius: 50%; background: var(--line); }

.section { padding: 100px 0; }
.section-intro { background: var(--surface); }
.soft-section { background: var(--soft); }
.section-heading { max-width: 650px; }
.section-heading.centered { margin: 0 auto 52px; text-align: center; }
.section-heading.centered .eyebrow { justify-content: center; }
.section-heading h2, .workflow-copy h2, .cta-card h2 { margin: 14px 0 17px; color: var(--ink); font-size: clamp(32px, 4vw, 50px); line-height: 1.08; letter-spacing: -.045em; }
.section-heading p, .workflow-copy > p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.75; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card { position: relative; min-height: 330px; padding: 30px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 1px 0 rgba(15,23,42,.02); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.feature-card:hover { transform: translateY(-5px); border-color: #cbd2df; box-shadow: var(--shadow-sm); }
.feature-card--primary { color: #dbeafe; border-color: transparent; background: linear-gradient(145deg, var(--navy), var(--navy-2)); }
.feature-card--primary h3 { color: #fff; }.feature-card--primary p, .feature-card--primary li { color: #c3d1e5; }.feature-card--primary .icon-box { background: rgba(255,255,255,.1); color: #fff; }
.icon-box { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 25px; border-radius: 13px; color: var(--primary); background: #eef2ff; font-size: 20px; font-weight: 700; }
.feature-card h3 { margin: 0 0 12px; color: var(--ink); font-size: 20px; }
.feature-card p { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.feature-card ul { margin: 0; padding: 0; display: grid; gap: 10px; list-style: none; }
.feature-card li { position: relative; padding-left: 20px; color: var(--text); font-size: 13px; }
.feature-card li::before { content: '✓'; position: absolute; left: 0; color: var(--success); font-weight: 700; }

.workflow-section { color: #fff; background: linear-gradient(145deg, #071b3e, var(--navy) 58%, #253d79); }
.workflow-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; }
.eyebrow-light { color: #b9c9ff; }
.workflow-copy h2, .cta-card h2 { color: #fff; }
.workflow-copy > p { color: #c3d1e5; margin-bottom: 28px; }
.workflow-steps { margin: 0; padding: 0; display: grid; gap: 0; list-style: none; }
.workflow-steps li { position: relative; display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 0 0 28px; }
.workflow-steps li:not(:last-child)::after { content: ''; position: absolute; left: 26px; top: 52px; bottom: 5px; width: 1px; background: rgba(255,255,255,.15); }
.workflow-steps > li > span { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; color: #fff; background: rgba(255,255,255,.08); font-size: 12px; font-weight: 700; }
.workflow-steps strong { display: block; margin: 2px 0 5px; font-size: 18px; }
.workflow-steps p { margin: 0; color: #b7c6dc; font-size: 14px; }

.platform-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.platform-note { margin-top: 30px; padding: 18px; display: flex; flex-direction: column; gap: 5px; border-left: 3px solid var(--primary); background: var(--soft); }
.platform-note strong { color: var(--ink); font-size: 14px; }.platform-note span { color: var(--muted); font-size: 13px; }
.platform-cloud { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--soft); }
.platform-pill { min-height: 82px; display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 6px 18px rgba(15,23,42,.04); }
.platform-pill b { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: #fff; font-size: 16px; }
.platform-pill span { color: var(--ink); font-weight: 700; }
.platform-facebook b { background:#1877f2 }.platform-instagram b { background:linear-gradient(135deg,#f58529,#c13584,#5851db) }.platform-linkedin b { background:#0a66c2 }.platform-x b { background:#111 }.platform-youtube b { background:#f00 }.platform-whatsapp b { background:#25d366 }

.security-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; align-items: center; }
.security-visual { position: relative; min-height: 440px; display: grid; place-items: center; }
.shield { position: relative; width: 210px; height: 245px; display: grid; place-items: center; clip-path: polygon(50% 0, 91% 17%, 86% 70%, 50% 100%, 14% 70%, 9% 17%); background: linear-gradient(145deg, var(--primary), var(--navy)); box-shadow: var(--shadow-lg); }
.shield::before { content:''; position:absolute; inset:9px; clip-path:inherit; background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.03)); }
.shield img { position: relative; width: 90px; z-index: 1; filter: drop-shadow(0 12px 20px rgba(0,0,0,.18)); }
.shield span { position: absolute; width: 300px; height: 300px; border: 1px solid rgba(53,39,200,.15); border-radius: 50%; }
.security-card { position: absolute; width: 230px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
.security-card--one { top: 32px; left: 0; }.security-card--two { right: 0; bottom: 34px; }
.security-card b { display:block; color:var(--ink); font-size:14px; }.security-card span { color:var(--muted); font-size:12px; }
.check-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.check-grid span { position: relative; padding-left: 28px; color: var(--text); font-size: 14px; }
.check-grid span::before { content:'✓'; position:absolute; left:0; top:0; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--success); font-size:11px; font-weight:700; }

.audience-section { padding-top: 86px; }
.audience-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
.audience-grid article { min-height:260px; padding:28px; border-right:1px solid var(--line); background:var(--surface); }
.audience-grid article:last-child { border-right:0; }
.audience-grid span { color:var(--primary); font-size:12px; font-weight:700; letter-spacing:.1em; }
.audience-grid h3 { margin:35px 0 12px; color:var(--ink); font-size:19px; }
.audience-grid p { margin:0; color:var(--muted); font-size:14px; }

.cta-section { padding: 25px 0 100px; background: var(--surface); }
.cta-card { position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:30px; align-items:center; padding:48px; overflow:hidden; border-radius:24px; color:#fff; background:linear-gradient(135deg,var(--navy),#19366d 65%,#4f46e5); box-shadow:var(--shadow-lg); }
.cta-card::after { content:''; position:absolute; width:260px; height:260px; right:-80px; top:-110px; border-radius:50%; background:rgba(136,88,240,.25); }
.cta-logo { position:relative; z-index:1; width:82px; height:82px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.15); border-radius:20px; background:rgba(255,255,255,.08); }
.cta-logo img { width:58px; }
.cta-card h2 { margin:8px 0; font-size:34px; }.cta-card p { margin:0; color:#c7d4e7; }
.cta-actions { position:relative; z-index:1; display:flex; gap:10px; }

.site-footer { color:#c5d3e7; background:#06152f; }
.footer-grid { padding:70px 0 52px; display:grid; grid-template-columns:2fr repeat(3,1fr); gap:50px; }
.brand-footer .brand-copy strong { color:#fff; }.brand-footer .brand-copy small { color:#9db1cf; }
.footer-brand p { max-width:420px; margin:20px 0 0; color:#9db1cf; font-size:14px; }
.footer-grid h3 { margin:0 0 16px; color:#fff; font-size:14px; }
.footer-grid > div:not(.footer-brand) { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.footer-grid a { color:#9db1cf; font-size:13px; }.footer-grid a:hover { color:#fff; }
.footer-bottom { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid rgba(255,255,255,.1); color:#8298b8; font-size:12px; }

html[data-theme="dark"] .brand-mark--light { display:none; }
html[data-theme="dark"] .brand-mark--dark { display:grid; }
html[data-theme="dark"] .preview-shell { border-color:#29344a; }
html[data-theme="dark"] .site-header:not(.is-scrolled) .brand-copy strong,
html[data-theme="dark"] .site-header:not(.is-scrolled) .primary-nav a,
html[data-theme="dark"] .site-header:not(.is-scrolled) .theme-toggle { color:#f8fafc; }

@media (max-width: 1080px) {
  .primary-nav { gap:16px; }.primary-nav a { font-size:13px; }
  .hero-grid { grid-template-columns:1fr; }.hero-copy { max-width:780px; }
  .app-preview { max-width:840px; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .security-grid, .platform-grid { gap:45px; }
  .audience-grid { grid-template-columns:repeat(2,1fr); }.audience-grid article:nth-child(2) { border-right:0; }.audience-grid article:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .cta-card { grid-template-columns:auto 1fr; }.cta-actions { grid-column:2; }
}

@media (max-width: 860px) {
  .site-header { height:68px; }.header-inner { gap:12px; }
  .menu-toggle { display:block; margin-left:auto; }
  .primary-nav { position:fixed; inset:68px 16px auto; z-index:1001; display:none; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-lg); }
  .primary-nav.is-open { display:grid; gap:4px; }.primary-nav a { padding:12px; border-radius:9px; }.primary-nav a:hover { background:var(--soft); }
  .header-actions .btn-ghost { display:none; }.header-actions .btn-primary { min-height:40px; padding-inline:14px; }
  .hero { padding-top:120px; }.hero h1 { font-size:48px; }
  .preview-shell { transform:none; }
  .workflow-grid, .platform-grid, .security-grid { grid-template-columns:1fr; }
  .workflow-grid { gap:50px; }.platform-grid, .security-grid { gap:55px; }
  .security-visual { order:2; }
  .footer-grid { grid-template-columns:2fr 1fr 1fr; }.footer-grid > div:last-child { grid-column:2; }
}

@media (max-width: 640px) {
  .container { width:min(100% - 28px, var(--container)); }
  .brand-copy small { display:none; }.header-actions .btn-primary { display:none; }
  .hero { padding:108px 0 66px; }.hero h1 { font-size:40px; }.hero-lead { font-size:16px; }
  .hero-actions { flex-direction:column; }.hero-actions .btn { width:100%; }
  .hero-proof { grid-template-columns:1fr; gap:14px; }
  .preview-shell { grid-template-columns:68px minmax(0,1fr); min-height:420px; border-radius:17px; }
  .preview-sidebar { padding:14px 8px; }.preview-brand span, .preview-workspace span, .preview-nav span { font-size:0; }.preview-brand { justify-content:center; }.preview-workspace { justify-content:center; padding:8px 4px; }.preview-nav span { justify-content:center; padding:8px 4px; }
  .preview-content { padding:10px; }.preview-stats { grid-template-columns:repeat(2,1fr); }.preview-panels { grid-template-columns:1fr; }.preview-list { display:none; }
  .strip-inner { justify-content:flex-start; overflow-x:auto; white-space:nowrap; }
  .section { padding:72px 0; }.feature-grid { grid-template-columns:1fr; }.feature-card { min-height:auto; }
  .platform-cloud { padding:18px; grid-template-columns:1fr; }
  .security-visual { min-height:520px; }.security-card { width:210px; }.security-card--one { left:0; }.security-card--two { right:0; }
  .check-grid { grid-template-columns:1fr; }
  .audience-grid { grid-template-columns:1fr; }.audience-grid article { border-right:0; border-bottom:1px solid var(--line); min-height:auto; }.audience-grid article:last-child { border-bottom:0; }
  .cta-card { grid-template-columns:1fr; padding:32px 24px; }.cta-actions { grid-column:auto; flex-direction:column; }.cta-actions .btn { width:100%; }.cta-logo { width:68px; height:68px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:34px; }.footer-brand { grid-column:1/-1; }.footer-grid > div:last-child { grid-column:auto; }.footer-bottom { padding:18px 0; flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
/* Samaji Planner smart day summaries — 6.0.4 */
.samaji-view--schedule-calendar .calendar-day[data-date] {
  cursor: pointer;
  isolation: isolate;
}
.samaji-view--schedule-calendar .calendar-day[data-date]:focus-visible {
  outline: 3px solid rgba(53,39,200,.28);
  outline-offset: -3px;
}
.samaji-planner-day-summary {
  display: grid;
  gap: .55rem;
  min-width: 0;
}
.samaji-planner-thumbnails {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding-left: 2px;
}
.samaji-planner-thumbnail {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid var(--xis-surface, #fff);
  background: var(--xis-surface-soft, #f8fafc);
  box-shadow: 0 4px 12px rgba(15,23,42,.12);
  display: grid;
  place-items: center;
  position: relative;
  padding: 0;
  margin-left: calc(var(--samaji-thumb-index, 0) * -8px);
  color: var(--xis-primary, #3527C8);
}
.samaji-planner-thumbnail:first-child { margin-left: 0; }
.samaji-planner-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.samaji-planner-thumbnail:hover,
.samaji-planner-thumbnail:focus-visible {
  z-index: 4;
  transform: translateY(-2px);
  outline: 2px solid var(--xis-primary, #3527C8);
  outline-offset: 1px;
}
.samaji-planner-thumbnail__fallback { font-size: .95rem; }
.samaji-planner-thumbnail__status {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid #fff;
  background: #64748b;
}
.samaji-planner-thumbnail__status.is-published { background: #10b981; }
.samaji-planner-thumbnail__status.is-scheduled,
.samaji-planner-thumbnail__status.is-approved { background: #3527c8; }
.samaji-planner-thumbnail__status.is-publishing { background: #3b82f6; }
.samaji-planner-thumbnail__status.is-failed,
.samaji-planner-thumbnail__status.is-partially-published { background: #ef4444; }
.samaji-planner-thumbnail--more {
  margin-left: -8px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--xis-primary, #3527C8);
  background: var(--xis-surface-indigo, #eef2ff);
}
.samaji-planner-day-meta { min-width: 0; line-height: 1.2; }
.samaji-planner-day-meta strong,
.samaji-planner-day-meta span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.samaji-planner-day-meta strong { font-size: .78rem; color: var(--xis-ink, #0f172a); }
.samaji-planner-day-meta span { margin-top: 2px; font-size: .68rem; color: var(--xis-muted, #64748b); }
.samaji-planner-quick-add {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--xis-border, #e7e7ee);
  background: var(--xis-surface, #fff);
  color: var(--xis-primary, #3527C8);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  opacity: .25;
  transition: opacity .18s ease, background-color .18s ease, color .18s ease;
}
.calendar-day:hover .samaji-planner-quick-add,
.samaji-planner-quick-add:focus-visible { opacity: 1; }
.samaji-planner-quick-add:hover,
.samaji-planner-quick-add:focus-visible {
  background: var(--xis-primary, #3527C8);
  color: #fff;
  outline: none;
}
.calendar-day-has-posts .calendar-day-badge { margin-right: 32px; }
[data-theme="dark"] .samaji-planner-thumbnail { border-color: var(--xis-surface, #0b1220); }
@media (max-width: 768px) {
  .samaji-planner-quick-add { opacity: 1; }
  .samaji-planner-day-summary { padding-right: 36px; }
  .samaji-planner-thumbnail { width: 46px; height: 46px; flex-basis: 46px; }
}

/* Samaji 6.0.6 — Planner post cards and published indicators */
.samaji-view--schedule-calendar .samaji-published-dot {
  display: inline-block;
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  background: var(--xis-success, #10B981);
  box-shadow: 0 0 0 3px rgba(16,185,129,.16);
  flex: 0 0 auto;
}
.samaji-view--schedule-calendar .samaji-planner-card {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: .55rem;
  padding: .55rem;
  border: 1px solid var(--xis-border, #E7E7EE);
  border-left: 3px solid var(--xis-secondary, #8858F0);
  border-radius: var(--xis-radius-sm, 8px);
  background: var(--xis-surface, #fff);
  box-shadow: 0 5px 14px rgba(15,23,42,.07);
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  overflow: hidden;
}
.samaji-view--schedule-calendar .samaji-planner-card:hover,
.samaji-view--schedule-calendar .samaji-planner-card:focus-within {
  border-color: rgba(53,39,200,.42);
  box-shadow: 0 9px 22px rgba(15,23,42,.12);
  transform: translateY(-1px);
}
.samaji-view--schedule-calendar .samaji-planner-card__media {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  background: var(--xis-surface-indigo, #EEF2FF);
  color: var(--xis-primary, #3527C8);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.samaji-view--schedule-calendar .samaji-planner-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.samaji-view--schedule-calendar .samaji-planner-card__published {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: .55rem;
  height: .55rem;
  border: 2px solid #fff;
  box-shadow: none;
}
.samaji-view--schedule-calendar .samaji-planner-card__body { min-width: 0; }
.samaji-view--schedule-calendar .samaji-planner-card--month {
  grid-template-columns: 34px minmax(0,1fr);
  gap: .42rem;
  padding: .42rem;
  margin-bottom: .38rem;
}
.samaji-view--schedule-calendar .samaji-planner-card--month .samaji-planner-card__media {
  width: 34px;
  height: 34px;
}
.samaji-view--schedule-calendar .samaji-planner-card--month .calendar-post-title {
  font-size: .76rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--xis-ink, #0F172A);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.samaji-view--schedule-calendar .samaji-planner-detail-card {
  display: grid;
  grid-template-columns: 88px minmax(0,1fr);
  gap: 1rem;
}
.samaji-view--schedule-calendar .samaji-planner-detail-thumb {
  width: 88px;
  height: 88px;
  border-radius: var(--xis-radius-md, 12px);
  object-fit: cover;
  background: var(--xis-surface-indigo, #EEF2FF);
}
.samaji-view--schedule-calendar .samaji-planner-detail-thumb--fallback {
  display: grid;
  place-items: center;
  color: var(--xis-primary, #3527C8);
  font-size: 1.5rem;
}
.samaji-view--schedule-calendar .schedule-quick-add {
  width: 34px !important;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  float: right;
}
[data-theme="dark"] .samaji-view--schedule-calendar .samaji-planner-card__published { border-color: var(--xis-surface, #0B1220); }
@media (max-width: 767.98px) {
  .samaji-view--schedule-calendar .samaji-planner-detail-card { grid-template-columns: 64px minmax(0,1fr); }
  .samaji-view--schedule-calendar .samaji-planner-detail-thumb { width:64px; height:64px; }
}

/* Samaji 6.1.0 — Three-in-One Smart Planner */
.samaji-view--planner-3in1{--planner-border:var(--xis-border,#e7e7ee);--planner-surface:var(--xis-surface,#fff);display:grid;gap:20px}.samaji-planner-hero{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;padding:24px;border:1px solid var(--planner-border);border-radius:20px;background:linear-gradient(135deg,var(--xis-surface,#fff),var(--xis-surface-indigo,#eef2ff))}.samaji-planner-hero h1{margin:4px 0 8px;font-size:clamp(1.65rem,3vw,2.35rem);color:var(--xis-ink,#0f172a)}.samaji-planner-hero p{margin:0;max-width:720px;color:var(--xis-muted,#64748b)}.samaji-eyebrow,.samaji-step-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--xis-primary,#3527c8)}.samaji-planner-hero__actions{display:flex;gap:10px;flex-wrap:wrap}.samaji-planner-modebar{display:grid;grid-template-columns:repeat(3,1fr);padding:5px;border:1px solid var(--planner-border);border-radius:14px;background:var(--planner-surface)}.samaji-planner-mode{display:flex;justify-content:center;align-items:center;gap:9px;padding:12px;border-radius:10px;color:var(--xis-text,#334155);font-weight:600;text-decoration:none}.samaji-planner-mode:hover{background:var(--xis-surface-soft,#f8fafc)}.samaji-planner-mode.is-active{background:var(--xis-primary,#3527c8);color:#fff;box-shadow:0 8px 20px rgba(53,39,200,.18)}.samaji-planner-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.samaji-planner-kpi{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--planner-border);border-radius:14px;background:var(--planner-surface);text-decoration:none;color:inherit}.samaji-planner-kpi strong,.samaji-planner-kpi small{display:block}.samaji-planner-kpi strong{font-size:1.35rem;color:var(--xis-ink,#0f172a)}.samaji-planner-kpi small{color:var(--xis-muted,#64748b)}.samaji-kpi-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center}.samaji-kpi-icon.is-indigo{background:#eef2ff;color:#3527c8}.samaji-kpi-icon.is-green{background:#ecfdf5;color:#059669}.samaji-kpi-icon.is-violet{background:#f5f3ff;color:#7c3aed}.samaji-kpi-icon.is-red{background:#fef2f2;color:#dc2626}.samaji-planner-shell,.samaji-quick-composer,.samaji-planner-create-aside>.xis-card,.samaji-optimize-grid>.xis-card{padding:0;border:1px solid var(--planner-border);border-radius:18px;background:var(--planner-surface);overflow:hidden}.samaji-planner-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px;border-bottom:1px solid var(--planner-border);flex-wrap:wrap}.samaji-date-nav{display:flex;align-items:center;gap:8px}.samaji-date-nav>div{min-width:140px}.samaji-date-nav strong,.samaji-date-nav small{display:block}.samaji-date-nav small{color:var(--xis-muted,#64748b)}.samaji-view-switcher{display:flex;padding:4px;background:var(--xis-surface-soft,#f8fafc);border-radius:10px}.samaji-view-switcher a{padding:8px 12px;text-decoration:none;color:var(--xis-muted,#64748b);border-radius:8px;font-weight:600;font-size:.875rem}.samaji-view-switcher a.is-active{background:var(--planner-surface);color:var(--xis-primary,#3527c8);box-shadow:0 1px 4px rgba(15,23,42,.1)}.samaji-month-head,.samaji-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.samaji-month-head>div{padding:11px 12px;text-align:center;color:var(--xis-muted,#64748b);font-size:.75rem;font-weight:700;text-transform:uppercase;border-bottom:1px solid var(--planner-border)}.samaji-calendar-cell{min-height:170px;padding:9px;border-right:1px solid var(--planner-border);border-bottom:1px solid var(--planner-border);background:var(--planner-surface);transition:.15s}.samaji-calendar-cell:nth-child(7n){border-right:0}.samaji-calendar-cell.is-outside{background:var(--xis-surface-soft,#f8fafc)}.samaji-calendar-cell.is-today{background:linear-gradient(180deg,rgba(53,39,200,.08),transparent)}.samaji-calendar-cell.is-drop-target,.samaji-week-slot.is-drop-target,.samaji-day-row.is-drop-target{outline:2px dashed var(--xis-primary,#3527c8);outline-offset:-4px;background:var(--xis-surface-indigo,#eef2ff)}.samaji-calendar-cell__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.samaji-calendar-cell__head>a:first-child{text-decoration:none;color:inherit}.samaji-calendar-cell__head span,.samaji-calendar-cell__head strong{display:inline;margin-right:5px}.samaji-calendar-cell__head span{font-size:.68rem;color:var(--xis-muted,#64748b);text-transform:uppercase}.samaji-day-add{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;text-decoration:none;background:var(--xis-surface-soft,#f8fafc);color:var(--xis-primary,#3527c8);font-size:1.1rem}.samaji-calendar-cell__posts{display:grid;gap:6px}.samaji-calendar-post{border:1px solid var(--planner-border);border-left:3px solid var(--xis-primary,#3527c8);border-radius:9px;background:var(--planner-surface);box-shadow:0 3px 9px rgba(15,23,42,.06);overflow:hidden}.samaji-calendar-post.is-published{border-left-color:var(--xis-success,#10b981)}.samaji-calendar-post.is-failed{border-left-color:var(--xis-danger,#ef4444)}.samaji-calendar-post>a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:7px;align-items:center;padding:6px;text-decoration:none;color:inherit}.samaji-calendar-post__thumb{position:relative;width:34px;height:34px;border-radius:7px;display:grid;place-items:center;overflow:hidden;background:var(--xis-surface-indigo,#eef2ff);color:var(--xis-primary,#3527c8)}.samaji-calendar-post__thumb img{width:100%;height:100%;object-fit:cover}.samaji-live-dot{position:absolute;right:2px;bottom:2px;width:9px;height:9px;border:2px solid #fff;border-radius:50%;background:var(--xis-success,#10b981)}.samaji-calendar-post__content{min-width:0}.samaji-calendar-post__content small,.samaji-calendar-post__content strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.samaji-calendar-post__content small{font-size:.66rem;color:var(--xis-muted,#64748b)}.samaji-calendar-post__content strong{font-size:.76rem;color:var(--xis-ink,#0f172a)}.samaji-more-posts,.samaji-empty-day{font-size:.72rem;text-decoration:none;color:var(--xis-primary,#3527c8);padding:2px 4px}.samaji-empty-day{color:var(--xis-subtle,#94a3b8)}.samaji-week-board{display:grid;grid-template-columns:70px repeat(7,minmax(130px,1fr));overflow:auto}.samaji-week-heading,.samaji-week-time,.samaji-week-slot{border-right:1px solid var(--planner-border);border-bottom:1px solid var(--planner-border)}.samaji-week-heading{padding:12px;text-align:center;position:sticky;top:0;background:var(--planner-surface);z-index:2}.samaji-week-heading span,.samaji-week-heading strong,.samaji-week-heading small{display:block}.samaji-week-heading strong{font-size:1.4rem}.samaji-week-heading small{color:var(--xis-muted,#64748b)}.samaji-week-heading.is-today{background:var(--xis-surface-indigo,#eef2ff)}.samaji-week-time{padding:16px 8px;color:var(--xis-muted,#64748b);font-size:.75rem}.samaji-week-slot{min-height:118px;padding:7px}.samaji-week-post{border-left:4px solid var(--xis-secondary,#8858f0);border-radius:10px;background:var(--planner-surface);box-shadow:0 5px 14px rgba(15,23,42,.1);margin-bottom:6px}.samaji-week-post>a{display:block;padding:9px;text-decoration:none;color:inherit}.samaji-week-post small,.samaji-week-post strong{display:block}.samaji-week-post strong{font-size:.82rem}.samaji-live-label{display:inline-flex;align-items:center;gap:5px;color:var(--xis-success,#10b981);font-size:.7rem;font-weight:700}.samaji-live-label i{width:7px;height:7px;border-radius:50%;background:currentColor}.samaji-day-view__head{display:flex;justify-content:center;gap:24px;align-items:center;padding:18px;border-bottom:1px solid var(--planner-border)}.samaji-day-view__head a{color:var(--xis-primary,#3527c8)}.samaji-day-view__head span,.samaji-day-view__head strong{display:block;text-align:center}.samaji-day-row{display:grid;grid-template-columns:80px 1fr;min-height:72px;border-bottom:1px solid var(--planner-border)}.samaji-day-row>time{padding:14px;color:var(--xis-muted,#64748b)}.samaji-day-row>div{padding:7px;border-left:1px solid var(--planner-border)}.samaji-day-post{padding:10px;border-left:4px solid var(--xis-primary,#3527c8);background:var(--xis-surface-soft,#f8fafc);border-radius:10px;margin-bottom:5px}.samaji-day-post a{text-decoration:none;color:inherit}.samaji-day-post strong,.samaji-day-post span{display:block}.samaji-day-post span{font-size:.78rem;color:var(--xis-muted,#64748b)}.samaji-agenda{padding:18px}.samaji-agenda h3{margin:22px 0 9px}.samaji-agenda-row{display:grid;grid-template-columns:80px 44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border-bottom:1px solid var(--planner-border)}.samaji-agenda-row>div span{display:block;color:var(--xis-muted,#64748b);font-size:.8rem}.samaji-planner-create-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);gap:18px}.xis-card__header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:22px;border-bottom:1px solid var(--planner-border)}.xis-card__header h2{margin:4px 0}.xis-card__header p{margin:0;color:var(--xis-muted,#64748b)}.samaji-quick-composer__form{padding:22px}.xis-field{display:grid;gap:7px;margin-bottom:18px}.xis-field label,.xis-field legend{font-weight:600;color:var(--xis-ink,#0f172a)}.xis-field textarea,.xis-field input,.xis-field select{width:100%;border:1px solid var(--xis-border-strong,#cbd5e1);border-radius:10px;padding:11px;background:var(--planner-surface);color:var(--xis-text,#334155)}.xis-field__meta{display:flex;justify-content:space-between;gap:12px;color:var(--xis-muted,#64748b);font-size:.75rem}.samaji-account-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.samaji-account-choice{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--planner-border);border-radius:10px;cursor:pointer}.samaji-account-choice:has(input:checked){border-color:var(--xis-primary,#3527c8);background:var(--xis-surface-indigo,#eef2ff)}.samaji-account-choice strong,.samaji-account-choice small{display:block}.samaji-account-choice small{color:var(--xis-muted,#64748b)}.samaji-network-dot{width:9px;height:9px;border-radius:50%;background:var(--xis-primary,#3527c8)}.samaji-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.samaji-sticky-actions{display:flex;justify-content:flex-end;gap:9px;position:sticky;bottom:0;padding-top:14px;background:var(--planner-surface)}.samaji-planner-create-aside{display:grid;gap:18px;align-content:start}.samaji-planner-create-aside>.xis-card{padding:18px}.samaji-shortcut-row,.samaji-process-list a{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--planner-border);text-decoration:none;color:inherit}.samaji-shortcut-row i,.samaji-process-list i{width:36px;height:36px;border-radius:10px;background:var(--xis-surface-indigo,#eef2ff);color:var(--xis-primary,#3527c8);display:grid;place-items:center}.samaji-shortcut-row strong,.samaji-shortcut-row small,.samaji-process-list strong,.samaji-process-list small{display:block}.samaji-shortcut-row small,.samaji-process-list small{color:var(--xis-muted,#64748b)}.samaji-time-slot{padding:10px 0;border-bottom:1px solid var(--planner-border)}.samaji-time-slot strong,.samaji-time-slot span,.samaji-time-slot small{display:block}.samaji-time-slot small{color:var(--xis-muted,#64748b)}.samaji-optimize-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}.samaji-optimize-grid>.xis-card{padding:22px}.samaji-optimize-grid>.xis-card:first-child{grid-column:1/-1}.samaji-health-score{display:flex;align-items:center;gap:22px;padding:10px 0 20px}.samaji-health-score__ring{width:112px;height:112px;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(var(--xis-primary,#3527c8) calc(var(--score)*1%),var(--xis-surface-soft,#f8fafc) 0);position:relative}.samaji-health-score__ring:before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--planner-surface)}.samaji-health-score__ring strong,.samaji-health-score__ring span{position:relative}.samaji-health-score__ring strong{font-size:2rem}.samaji-gap-strip{display:grid;grid-template-columns:repeat(14,1fr);gap:6px}.samaji-gap-strip a{display:grid;text-align:center;padding:8px 3px;border-radius:8px;text-decoration:none}.samaji-gap-strip a.is-filled{background:#ecfdf5;color:#047857}.samaji-gap-strip a.is-gap{background:#fff7ed;color:#c2410c}.samaji-gap-strip span{font-size:.62rem;text-transform:uppercase}.samaji-recommendation-list{display:grid;gap:8px}.samaji-recommendation{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:11px;border:1px solid var(--planner-border);border-radius:11px}.samaji-recommendation__rank{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--xis-surface-indigo,#eef2ff);color:var(--xis-primary,#3527c8);font-weight:700}.samaji-recommendation strong,.samaji-recommendation span,.samaji-recommendation small{display:block}.samaji-recommendation small{color:var(--xis-muted,#64748b)}.is-dragging{opacity:.45}.xis-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:1024px){.samaji-planner-kpis{grid-template-columns:repeat(2,1fr)}.samaji-planner-create-layout,.samaji-optimize-grid{grid-template-columns:1fr}.samaji-optimize-grid>.xis-card:first-child{grid-column:auto}.samaji-month-calendar{overflow:auto}.samaji-month-head,.samaji-month-grid{min-width:900px}}
@media(max-width:640px){.samaji-planner-hero{align-items:flex-start;flex-direction:column}.samaji-planner-hero__actions{width:100%}.samaji-planner-hero__actions .xis-btn{flex:1}.samaji-planner-kpis{grid-template-columns:1fr 1fr}.samaji-planner-mode span{display:none}.samaji-planner-toolbar{align-items:stretch}.samaji-date-nav,.samaji-view-switcher{width:100%;justify-content:center}.samaji-planner-filter{width:100%}.samaji-planner-filter select{width:100%}.samaji-account-picker,.samaji-form-grid{grid-template-columns:1fr}.samaji-gap-strip{grid-template-columns:repeat(7,1fr)}.samaji-agenda-row{grid-template-columns:58px 40px 1fr}.samaji-agenda-row>.samaji-live-label{grid-column:3}.samaji-planner-kpi{padding:11px}.samaji-kpi-icon{display:none}}

/* ========================================================================== */
/* Samaji 6.1.1 — Local SVG icon and Commercial hero refinement            */
/* ========================================================================== */
i[data-xis-icon="ready"]::before{content:none!important;display:none!important}
i[data-xis-icon="ready"]{display:inline-flex;align-items:center;justify-content:center;line-height:1;vertical-align:-.125em;width:1em;height:1em;flex:0 0 auto}
.xis-svg-icon{display:block;width:1em;height:1em;overflow:visible;pointer-events:none}
.xis-svg-icon--spin{animation:xis-icon-spin .85s linear infinite}
@keyframes xis-icon-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.xis-svg-icon--spin{animation:none}}

.samaji-p5-hero{
  position:relative;overflow:hidden;isolation:isolate;
  align-items:center!important;
  padding:clamp(1.25rem,2.5vw,2rem)!important;
  min-height:150px;
  background:
    radial-gradient(circle at 88% 18%,rgba(255,255,255,.22),transparent 24%),
    linear-gradient(130deg,var(--xis-navy,#0A1F44) 0%,var(--xis-primary,#3527C8) 58%,var(--xis-secondary,#8858F0) 100%)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 18px 45px rgba(10,31,68,.18)!important;
}
.samaji-p5-hero::after{content:"";position:absolute;z-index:-1;width:210px;height:210px;right:-70px;bottom:-125px;border:38px solid rgba(255,255,255,.08);border-radius:50%}
.samaji-p5-hero h1,.samaji-p5-hero p,.samaji-p5-hero strong,.samaji-p5-hero small,.samaji-p5-kicker{color:#fff!important}
.samaji-p5-hero h1{font-weight:700!important;letter-spacing:-.025em;line-height:1.08;margin:.2rem 0 .55rem!important;text-shadow:0 1px 1px rgba(0,0,0,.08)}
.samaji-p5-hero p{max-width:720px;margin:0!important;color:rgba(255,255,255,.82)!important;font-size:.96rem;line-height:1.6}
.samaji-p5-hero__identity{display:flex;align-items:center;gap:1rem;min-width:0}
.samaji-p5-hero__icon{display:grid;place-items:center;width:58px;height:58px;flex:0 0 58px;border-radius:17px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.samaji-p5-hero__icon i{font-size:1.6rem;color:#fff}
.samaji-p5-kicker{opacity:.78;font-weight:600}
.samaji-p5-badge{color:#fff!important;background:rgba(255,255,255,.13)!important;border-color:rgba(255,255,255,.24)!important;backdrop-filter:blur(8px);font-weight:600}
[data-theme="dark"] .samaji-p5-hero{box-shadow:0 18px 45px rgba(0,0,0,.32)!important}
@media(max-width:640px){.samaji-p5-hero__identity{align-items:flex-start}.samaji-p5-hero__icon{width:48px;height:48px;flex-basis:48px;border-radius:14px}.samaji-p5-badge{margin-left:64px}}

/* Samaji 6.3.2 managed platform connection center */
.samaji-managed-connection-hero{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:2rem;border-radius:var(--xis-radius-lg,16px);background:linear-gradient(135deg,#0A1F44 0%,#3527C8 58%,#8858F0 100%);color:#fff;overflow:hidden;position:relative}.samaji-managed-connection-hero:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-70px;top:-100px;background:rgba(255,255,255,.09)}.samaji-managed-connection-hero>*{position:relative;z-index:1}.samaji-managed-connection-hero__eyebrow,.samaji-managed-readiness__eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.samaji-managed-connection-hero h2{margin:.45rem 0;color:#fff;font-size:clamp(1.55rem,3vw,2.25rem)}.samaji-managed-connection-hero p{margin:0;max-width:760px;color:rgba(255,255,255,.82)}.samaji-managed-connection-hero__meta{display:flex;gap:.75rem}.samaji-managed-connection-hero__meta span{min-width:96px;padding:.8rem 1rem;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(255,255,255,.1);text-align:center;font-size:.78rem}.samaji-managed-connection-hero__meta strong{display:block;font-size:1.35rem;color:#fff}
.samaji-platform-connect-card{height:100%;padding:1.25rem;border:1px solid var(--xis-border,#E7E7EE);border-radius:16px;background:var(--xis-surface,#fff);box-shadow:0 8px 28px rgba(15,23,42,.05)}.samaji-platform-connect-card__header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:start}.samaji-platform-connect-card__icon,.samaji-readiness-row__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--platform-color) 12%,white);color:var(--platform-color);font-size:1.2rem}.samaji-platform-connect-card__identity h3{margin:0 0 .2rem;font-size:1.05rem}.samaji-platform-connect-card__identity p{margin:0;color:var(--xis-muted,#64748B);font-size:.875rem;line-height:1.45}.samaji-status-badge{padding:.38rem .62rem;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap}.samaji-status-badge--connected{background:#DCFCE7;color:#166534}.samaji-status-badge--ready_to_connect{background:#EEF2FF;color:#3527C8}.samaji-status-badge--platform_setup_required,.samaji-status-badge--infrastructure_required{background:#FEF3C7;color:#92400E}.samaji-platform-connect-card__account,.samaji-platform-connect-card__notice{display:flex;gap:.7rem;align-items:flex-start;margin:1rem 0;padding:.85rem 1rem;border-radius:12px}.samaji-platform-connect-card__account{background:#F0FDF4;color:#166534}.samaji-platform-connect-card__account small{display:block;color:#4B5563}.samaji-platform-connect-card__notice{background:#F8FAFC;color:#475569}.samaji-platform-connect-card__actions{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;margin-top:1rem}.samaji-platform-connect-card__actions form{margin:0}.samaji-managed-readiness{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.4fr);gap:1.5rem}.samaji-managed-readiness__intro{padding:1.5rem;border-radius:16px;background:linear-gradient(145deg,#0A1F44,#3527C8);color:#fff;align-self:start;position:sticky;top:80px}.samaji-managed-readiness__intro h2{color:#fff;margin:.5rem 0}.samaji-managed-readiness__intro p{color:rgba(255,255,255,.8)}.samaji-callback-box{margin-top:1rem;padding:.8rem;border-radius:10px;background:rgba(255,255,255,.1)}.samaji-callback-box span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}.samaji-callback-box code{display:block;margin-top:.3rem;color:#fff;word-break:break-all}.samaji-readiness-list{border:1px solid var(--xis-border,#E7E7EE);border-radius:16px;background:var(--xis-surface,#fff);overflow:hidden}.samaji-readiness-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1rem 1.15rem;border-bottom:1px solid var(--xis-border,#E7E7EE)}.samaji-readiness-row:last-child{border-bottom:0}.samaji-readiness-row__body span{display:block;color:var(--xis-muted,#64748B);font-size:.83rem}.samaji-readiness-row__status{display:flex;align-items:center;gap:.75rem}.samaji-readiness-row__status a{font-size:.82rem}
@media(max-width:900px){.samaji-managed-connection-hero{align-items:flex-start;flex-direction:column}.samaji-managed-readiness{grid-template-columns:1fr}.samaji-managed-readiness__intro{position:static}.samaji-readiness-row{grid-template-columns:auto minmax(0,1fr)}.samaji-readiness-row__status{grid-column:2;justify-content:flex-start}}@media(max-width:560px){.samaji-platform-connect-card__header{grid-template-columns:auto minmax(0,1fr)}.samaji-status-badge{grid-column:2;justify-self:start}.samaji-managed-connection-hero__meta{width:100%}.samaji-managed-connection-hero__meta span{flex:1}.samaji-platform-connect-card__actions .btn{width:100%;justify-content:center}}

/* Samaji 6.5.6 - AsliAI nonprofit presets and draggable Aurora processing mascot */
@property --samaji-asliai-aurora-a {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes samaji-asliai-aurora-rot { to { --samaji-asliai-aurora-a: 360deg; } }
@keyframes samaji-asliai-glow-pulse {
  0%,100% { box-shadow: 0 12px 34px rgba(10,31,68,.28), 0 0 0 1px rgba(6,182,212,.12), 0 0 16px rgba(6,182,212,.35), 0 0 30px rgba(6,182,212,.12); }
  33% { box-shadow: 0 12px 34px rgba(10,31,68,.28), 0 0 0 1px rgba(16,185,129,.12), 0 0 16px rgba(16,185,129,.35), 0 0 30px rgba(16,185,129,.12); }
  66% { box-shadow: 0 12px 34px rgba(10,31,68,.28), 0 0 0 1px rgba(139,92,246,.12), 0 0 16px rgba(139,92,246,.35), 0 0 30px rgba(139,92,246,.12); }
}
.samaji-asliai-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1055;
  display: none;
  align-items: center;
  gap: .65rem;
  min-width: 74px;
  min-height: 74px;
  padding: .65rem .95rem .65rem .65rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #0A1F44;
  box-shadow: 0 12px 34px rgba(10,31,68,.18);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.samaji-generated-media {
  display: grid;
  gap: .6rem;
  padding: 1rem;
  border-bottom: 1px solid var(--samaji-intel-border,#e5e7eb);
  background: color-mix(in srgb,#3527C8 3%,var(--bs-body-bg));
}
.samaji-generated-media img {
  display: block;
  width: 100%;
  max-height: 760px;
  object-fit: contain;
  border-radius: 14px;
  background: #f8fafc;
  box-shadow: 0 12px 30px rgba(10,31,68,.12);
}
[data-theme="dark"] .samaji-generated-media img { background: #0b1220; }
.samaji-asliai-fab.is-visible { display: inline-flex; }
.samaji-asliai-fab.is-processing { animation: samaji-asliai-glow-pulse 2.4s ease-in-out infinite; }
.samaji-asliai-fab:active { cursor: grabbing; }
.samaji-asliai-fab img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(53,39,200,.24));
  animation: samaji-asliai-float 3.6s ease-in-out infinite;
}
.samaji-asliai-fab__label {
  font-weight: 800;
  font-size: .88rem;
  white-space: nowrap;
}
.samaji-asliai-fab__ring {
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  padding: 2px;
  pointer-events: none;
}
.samaji-asliai-fab.is-processing .samaji-asliai-fab__ring {
  background: conic-gradient(from var(--samaji-asliai-aurora-a, 0deg), #06b6d4 0%, #10b981 22%, #2563eb 45%, #8b5cf6 68%, #ec4899 86%, #06b6d4 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: samaji-asliai-aurora-rot 2.4s linear infinite;
}
[data-theme="dark"] .samaji-asliai-fab {
  background: rgba(15,23,42,.94);
  color: #eef2ff;
}
@media (max-width: 640px) {
  .samaji-asliai-fab { right: 12px; bottom: 12px; min-width: 66px; min-height: 66px; }
  .samaji-asliai-fab__label { display: none; }
}
/* AsliAI image poster guidance */
.samaji-ai-poster-tips {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .8rem .9rem;
    border: 1px solid color-mix(in srgb, #008489 28%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, #008489 8%, var(--bs-body-bg, #fff));
    color: var(--xis-text, #334155);
    font-size: .88rem;
    line-height: 1.45;
}

.samaji-ai-poster-tips i {
    color: #008489;
    font-size: 1.05rem;
    margin-top: .1rem;
}

[data-theme="dark"] .samaji-ai-poster-tips {
    background: rgba(0, 132, 137, .12);
    border-color: rgba(45, 212, 191, .28);
    color: #dbeafe;
}

/* Samaji 7.0 — managed Facebook connection */
.samaji-facebook-connect-card{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:26px 28px;border:1px solid rgba(24,119,242,.18);border-radius:20px;background:linear-gradient(135deg,#fff 0%,#f7faff 62%,#eef5ff 100%);box-shadow:0 12px 35px rgba(10,31,68,.07)}
.samaji-facebook-connect-card__main{display:flex;align-items:flex-start;gap:18px;min-width:0}.samaji-facebook-connect-card__icon{width:56px;height:56px;flex:0 0 56px;display:grid;place-items:center;border-radius:17px;background:#1877f2;color:#fff;font-size:26px;box-shadow:0 9px 24px rgba(24,119,242,.22)}
.samaji-facebook-connect-card__eyebrow{display:block;margin-bottom:4px;color:#1877f2;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.samaji-facebook-connect-card h2{margin:0 0 7px;color:#0a1f44;font-size:22px}.samaji-facebook-connect-card p{max-width:720px;margin:0;color:#667085}.samaji-facebook-connect-card__trust{margin-top:10px;color:#475467;font-size:13px;font-weight:600}.samaji-facebook-connect-card__actions{display:flex;min-width:245px;flex-direction:column;align-items:stretch;gap:8px}.samaji-facebook-connect-card__actions small{max-width:300px;color:#667085;font-size:12px;line-height:1.45}.samaji-facebook-button{background:#1877f2;border-color:#1877f2;font-weight:750}.samaji-facebook-button:hover{background:#1469d8;border-color:#1469d8}
@media(max-width:900px){.samaji-facebook-connect-card{align-items:stretch;flex-direction:column}.samaji-facebook-connect-card__actions{min-width:0}.samaji-facebook-connect-card__actions .btn{width:100%}}