@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');


:root {
    --sejoli-panel-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sejoli-panel-font-size-base: 16px;
}

html {
    font-size: var(--sejoli-panel-font-size-base);
}

body.sejoli-panel {
    --sejoli-panel-admin-bar-height: 0px;
    --sejoli-panel-top-nav-height: 0px;
    --sejoli-panel-radius-lg: 1rem;
    --sejoli-panel-radius-md: 0.75rem;
    --sejoli-panel-radius-sm: 0.5rem;
    --sejoli-panel-shadow: 0 12px 40px -10px rgba(15, 23, 42, 0.06), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
    --sejoli-panel-bg: #fcfcfd;
    --sejoli-panel-surface: #ffffff;
    --sejoli-panel-surface-strong: #f8fafc;
    --sejoli-panel-border: #e2e8f0;
    --sejoli-panel-text: #0f172a;
    --sejoli-panel-muted: #64748b;
    --sejoli-panel-accent: #0f172a;
    --sejoli-panel-accent-soft: #f1f5f9;
    --sejoli-panel-highlight: #0f172a;
    --sejoli-panel-sidebar-bg: #f8fafc;
    --sejoli-panel-sidebar-text: #0f172a;
    --sejoli-panel-sidebar-muted: #64748b;
    --sejoli-panel-sidebar-active: #e2e8f0;
    --sejoli-panel-success: #10b981;
    --sejoli-panel-warning: #f59e0b;
    --sejoli-panel-danger: #ef4444;
    --sejoli-panel-glow-1: transparent;
    --sejoli-panel-glow-2: transparent;
    background: var(--sejoli-panel-bg);
    color: var(--sejoli-panel-text);
    font-family: var(--sejoli-panel-font);
    font-size: 1rem;
}

body.admin-bar.sejoli-panel {
    --sejoli-panel-admin-bar-height: 32px;
}

@media (max-width: 782px) {
    body.admin-bar.sejoli-panel {
        --sejoli-panel-admin-bar-height: 46px;
    }
}

body.sejoli-panel-auth-body {
    min-height: 100vh;
    font-family: var(--sejoli-panel-font);
    color: var(--sejoli-panel-text);
    background: var(--sejoli-panel-bg);
    font-size: 1rem;
}

body.sejoli-panel--theme-ember {
    --sejoli-panel-radius-lg: 1.5rem;
    --sejoli-panel-radius-md: 1.25rem;
    --sejoli-panel-radius-sm: 0.875rem;
    --sejoli-panel-shadow: 0 16px 40px -8px rgba(234, 88, 12, 0.08), 0 8px 16px -6px rgba(234, 88, 12, 0.04);
    --sejoli-panel-bg: #fffbf7;
    --sejoli-panel-surface: #ffffff;
    --sejoli-panel-surface-strong: #fff7ed;
    --sejoli-panel-border: #fed7aa;
    --sejoli-panel-text: #431407;
    --sejoli-panel-muted: #9a3412;
    --sejoli-panel-accent: #ea580c;
    --sejoli-panel-accent-soft: #ffedd5;
    --sejoli-panel-highlight: #ea580c;
    --sejoli-panel-sidebar-bg: #fff7ed;
    --sejoli-panel-sidebar-text: #431407;
    --sejoli-panel-sidebar-muted: #9a3412;
    --sejoli-panel-sidebar-active: #ffedd5;
    --sejoli-panel-success: #10b981;
    --sejoli-panel-warning: #f59e0b;
    --sejoli-panel-danger: #ef4444;
    --sejoli-panel-glow-1: transparent;
    --sejoli-panel-glow-2: transparent;
}

body.sejoli-panel--theme-midnight {
    --sejoli-panel-radius-lg: 0.5rem;
    --sejoli-panel-radius-md: 0.375rem;
    --sejoli-panel-radius-sm: 0.25rem;
    --sejoli-panel-shadow: none;
    --sejoli-panel-bg: #09090b;
    --sejoli-panel-surface: #121214;
    --sejoli-panel-surface-strong: #18181b;
    --sejoli-panel-border: rgba(255, 255, 255, 0.08);
    --sejoli-panel-text: #fafafa;
    --sejoli-panel-muted: #a1a1aa;
    --sejoli-panel-accent: #fafafa;
    --sejoli-panel-accent-soft: #27272a;
    --sejoli-panel-highlight: #fafafa;
    --sejoli-panel-sidebar-bg: #09090b;
    --sejoli-panel-sidebar-text: #fafafa;
    --sejoli-panel-sidebar-muted: #a1a1aa;
    --sejoli-panel-sidebar-active: #27272a;
    --sejoli-panel-success: #10b981;
    --sejoli-panel-warning: #f59e0b;
    --sejoli-panel-danger: #ef4444;
    --sejoli-panel-glow-1: transparent;
    --sejoli-panel-glow-2: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.sejoli-panel--theme-neo-brutal {
    --sejoli-panel-radius-lg: 0.5rem;
    --sejoli-panel-radius-md: 0.5rem;
    --sejoli-panel-radius-sm: 0.5rem;
    --sejoli-panel-shadow: 4px 4px 0px 0px #1a1a1a;
    --sejoli-panel-bg: #f4f6f8;
    --sejoli-panel-surface: #ffffff;
    --sejoli-panel-surface-strong: #f4f6f8;
    --sejoli-panel-border: #1a1a1a;
    --sejoli-panel-text: #1a1a1a;
    --sejoli-panel-muted: #4b5563;
    --sejoli-panel-accent: #3b82f6;
    --sejoli-panel-accent-soft: rgba(59, 130, 246, 0.1);
    --sejoli-panel-highlight: #3b82f6;
    --sejoli-panel-sidebar-bg: #ffffff;
    --sejoli-panel-sidebar-text: #1a1a1a;
    --sejoli-panel-sidebar-muted: #4b5563;
    --sejoli-panel-sidebar-active: #f4f6f8;
    --sejoli-panel-success: #10b981;
    --sejoli-panel-warning: #f59e0b;
    --sejoli-panel-danger: #ef4444;
    --sejoli-panel-glow-1: transparent;
    --sejoli-panel-glow-2: transparent;
}

/* Neo-Brutal Specific Overrides */
body.sejoli-panel--theme-neo-brutal .ui.card,
body.sejoli-panel--theme-neo-brutal .ui.cards > .card,
body.sejoli-panel--theme-neo-brutal .ui.menu,
body.sejoli-panel--theme-neo-brutal .ui.input > input,
body.sejoli-panel--theme-neo-brutal input,
body.sejoli-panel--theme-neo-brutal select,
body.sejoli-panel--theme-neo-brutal textarea,
body.sejoli-panel--theme-neo-brutal button,
body.sejoli-panel--theme-neo-brutal .sejoli-panel-btn,
body.sejoli-panel--theme-neo-brutal .sejoli-panel-sidebar {
   border-width: 2px !important;
}

body.sejoli-panel--theme-neo-brutal .ui.cards > .card:hover,
body.sejoli-panel--theme-neo-brutal .ui.card:hover,
body.sejoli-panel--theme-neo-brutal .sejoli-panel-btn:hover {
    box-shadow: 6px 6px 0px 0px #1a1a1a !important;
    transform: translate(-2px, -2px) !important;
}

body.sejoli-panel--theme-neo-brutal .sejoli-panel-action,
body.sejoli-panel--theme-neo-brutal .sejoli-panel-list__item {
    border-width: 2px;
    border-color: #1a1a1a;
    box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.04);
}

body.sejoli-panel--theme-neo-brutal .sejoli-panel-action:hover,
body.sejoli-panel--theme-neo-brutal .sejoli-panel-list__item:hover {
    border-color: #1a1a1a;
    box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.04);
}

body.sejoli-panel--theme-neo-brutal.sejoli-panel--view-akses .ui.cards > .card:hover {
    box-shadow: 6px 6px 0px 0px #1a1a1a !important;
    border-color: #1a1a1a !important;
    transform: translate(-2px, -2px) !important;
}



/* ----------------------------------
   Theme: Vault (Enterprise / Clean)
----------------------------------- */
body.sejoli-panel--theme-vault {
    --sejoli-panel-radius-lg: 0.5rem;
    --sejoli-panel-radius-md: 0.375rem;
    --sejoli-panel-radius-sm: 0.25rem;
    --sejoli-panel-shadow: 0 4px 24px -6px rgba(15, 23, 42, 0.04), 0 2px 4px -2px rgba(15, 23, 42, 0.02);
    --sejoli-panel-bg: #f8fafc;
    --sejoli-panel-surface: #ffffff;
    --sejoli-panel-surface-strong: #f1f5f9;
    --sejoli-panel-border: #f1f5f9;
    --sejoli-panel-text: #0f172a;
    --sejoli-panel-muted: #64748b;
    --sejoli-panel-accent: #1e3a8a;
    --sejoli-panel-accent-soft: #eff6ff;
    --sejoli-panel-highlight: #1e3a8a;
    --sejoli-panel-sidebar-bg: #ffffff;
    --sejoli-panel-sidebar-text: #0f172a;
    --sejoli-panel-sidebar-muted: #64748b;
    --sejoli-panel-sidebar-active: #eff6ff;
    --sejoli-panel-success: #10b981;
    --sejoli-panel-warning: #f59e0b;
    --sejoli-panel-danger: #ef4444;
    --sejoli-panel-glow-1: transparent;
    --sejoli-panel-glow-2: transparent;
}

body.sejoli-panel--theme-vault .ui.card,
body.sejoli-panel--theme-vault .ui.cards > .card {
    border: 1px solid #f1f5f9;
    box-shadow: 0 8px 30px -4px rgba(15, 23, 42, 0.03) !important;
}

body.sejoli-panel--theme-vault .ui.card:hover,
body.sejoli-panel--theme-vault .ui.cards > .card:hover {
    box-shadow: 0 12px 40px -6px rgba(15, 23, 42, 0.08) !important;
    transform: translateY(-2px);
}


/* ----------------------------------
   Theme: Graphite (Extreme Minimalist)
----------------------------------- */
body.sejoli-panel--theme-graphite {
    --sejoli-panel-radius-lg: 0;
    --sejoli-panel-radius-md: 0;
    --sejoli-panel-radius-sm: 0;
    --sejoli-panel-shadow: none;
    --sejoli-panel-bg: #f5f5f5;
    --sejoli-panel-surface: #ffffff;
    --sejoli-panel-surface-strong: #fafafa;
    --sejoli-panel-border: #e5e5e5;
    --sejoli-panel-text: #171717;
    --sejoli-panel-muted: #737373;
    --sejoli-panel-accent: #171717;
    --sejoli-panel-accent-soft: #f5f5f5;
    --sejoli-panel-highlight: #171717;
    --sejoli-panel-sidebar-bg: #ffffff;
    --sejoli-panel-sidebar-text: #171717;
    --sejoli-panel-sidebar-muted: #737373;
    --sejoli-panel-sidebar-active: #f5f5f5;
    --sejoli-panel-success: #16a34a;
    --sejoli-panel-warning: #d97706;
    --sejoli-panel-danger: #dc2626;
    --sejoli-panel-glow-1: transparent;
    --sejoli-panel-glow-2: transparent;
}

body.sejoli-panel--theme-graphite .ui.card,
body.sejoli-panel--theme-graphite .ui.cards > .card,
body.sejoli-panel--theme-graphite .sejoli-panel-btn,
body.sejoli-panel--theme-graphite input,
body.sejoli-panel--theme-graphite select,
body.sejoli-panel--theme-graphite textarea,
body.sejoli-panel--theme-graphite .sejoli-panel-sidebar {
    box-shadow: none !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 0 !important;
}

body.sejoli-panel--theme-graphite .ui.card:hover,
body.sejoli-panel--theme-graphite .ui.cards > .card:hover {
    border-color: #171717 !important;
    transform: none;
}



/* ----------------------------------
   Layout: Top Navigation
----------------------------------- */
@media (min-width: 1025px) {
    body.sejoli-panel-layout-top .sejoli-panel-app {
        display: flex;
        flex-direction: column;
    }

    body.sejoli-panel-layout-top .sejoli-panel-sidebar {
        width: 100%;
        position: sticky;
        top: var(--sejoli-panel-admin-bar-height, 0);
        z-index: 9999; /* Boosted to float above complex widgets */
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        overflow: visible !important; /* CRITICAL: Override default overflow-y: auto which clips dropdowns */
        justify-content: initial;
        column-gap: clamp(0.5rem, 1vw, 0.9rem);
        padding: 0.75rem max(2rem, calc((100vw - 1440px) / 2)); /* Match .sejoli-panel-stage max-width */
        height: auto;
        min-height: 70px;
        border-right: none;
        border-bottom: 1px solid var(--sejoli-panel-border);
    }

    body.sejoli-panel-layout-top .sejoli-panel-sidebar__header {
        grid-column: 1;
        padding: 0;
        margin-bottom: 0;
        min-width: 0;
        width: max-content;
        flex-shrink: 0;
    }

    body.sejoli-panel-layout-top .sejoli-panel-sidebar__brand-link {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        min-width: max-content;
    }

    body.sejoli-panel-brand-label-hidden.sejoli-panel-layout-top .sejoli-panel-sidebar {
        column-gap: 0.55rem;
    }

    body.sejoli-panel-brand-label-hidden.sejoli-panel-layout-top .sejoli-panel-sidebar__header {
        align-items: center;
        gap: 0;
    }

    body.sejoli-panel-brand-label-hidden.sejoli-panel-layout-top .sejoli-panel-sidebar__brand-link {
        gap: 0;
        padding: 0;
    }

    body.sejoli-panel-layout-top .sejoli-panel-sidebar__collapse {
        display: none; /* Hide toggle button in top nav mode */
    }

    body.sejoli-panel-layout-top .sejoli-panel-sidebar__nav-wrap {
        grid-column: 2;
        min-width: 0;
        overflow: visible;
        padding: 0 clamp(0.15rem, 0.55vw, 0.5rem) 0 clamp(0.25rem, 0.7vw, 0.65rem);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 0;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    body.sejoli-panel-brand-label-hidden.sejoli-panel-layout-top .sejoli-panel-sidebar__nav-wrap {
        padding-left: clamp(0.1rem, 0.3vw, 0.3rem);
        padding-right: 0;
        justify-content: flex-start;
    }
    
    body.sejoli-panel-layout-top .sejoli-panel-sidebar__nav-wrap::-webkit-scrollbar {
        display: none;
    }

    /* Target BOTH nav menu types (Fallback and WP Menu) */
    body.sejoli-panel-layout-top .sejoli-panel-nav,
    body.sejoli-panel-layout-top .sejoli-panel-nav--wp-menu {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 0.35rem;
        min-height: auto;
        min-width: max-content;
        width: max-content;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* Reset vertical gaps */
    body.sejoli-panel-layout-top .sejoli-panel-nav__group,
    body.sejoli-panel-layout-top .sejoli-panel-nav--wp-menu > a.item,
    body.sejoli-panel-layout-top .sejoli-panel-nav--wp-menu .master-menu {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: auto; /* Neutralize any inherited width 100% */
        min-width: max-content;
        flex: 0 0 auto;
    }

    /* Reset WP menu column behavior */
    body.sejoli-panel-layout-top .sejoli-panel-nav--wp-menu {
        width: max-content;
    }

    /* Link padding reset for horizontal mode */
    body.sejoli-panel-layout-top .sejoli-panel-nav__link,
    body.sejoli-panel-layout-top .sejoli-panel-nav--wp-menu > a.item,
    body.sejoli-panel-layout-top .sejoli-panel-nav--wp-menu .master-menu > a.item {
        padding: 0.5rem 0.8rem;
        border-radius: var(--sejoli-panel-radius-md);
        white-space: nowrap;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.45rem;
        min-width: max-content; /* Prevent squishing text */
        flex: 0 0 auto;
        width: auto; /* Override width: 100% from base CSS */
        margin: 0;
    }

    body.sejoli-panel-layout-top .sejoli-panel-sidebar__footer {
        grid-column: 3;
        padding: 0;
        border-top: none;
        margin-top: 0;
        width: max-content;
        min-width: max-content;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-shrink: 0;
    }

    body.sejoli-panel-layout-top .sejoli-panel-user {
        flex-direction: row-reverse;
        align-items: center;
        gap: 0.55rem;
        padding: 0.4rem 0.6rem;
        border-radius: 2rem; /* Make it a perfect pill shape regardless of theme */
        margin-top: 0;
        width: auto; /* Prevent taking 100% width like in sidebar */
        justify-content: center;
        min-width: max-content;
    }

    body.sejoli-panel-layout-top .sejoli-panel-user__avatar,
    body.sejoli-panel-layout-top .sejoli-panel-user__info,
    body.sejoli-panel-layout-top .sejoli-panel-nav__label,
    body.sejoli-panel-layout-top .sejoli-panel-nav--wp-menu .item .sejoli-panel-nav__label {
        white-space: nowrap;
    }

    body.sejoli-panel-layout-top .sejoli-panel-user__info {
        text-align: right;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    body.sejoli-panel-layout-top .sejoli-panel-user strong {
        line-height: 1.1;
    }
    
    body.sejoli-panel-layout-top .sejoli-panel-user span {
        line-height: 1.2;
    }

    body.sejoli-panel-layout-top .sejoli-panel-stage {
        flex: 1;
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
    }

    /* Submenu handling for top nav (Fallback & WP Menus) */
    body.sejoli-panel-layout-top .sejoli-panel-nav__group,
    body.sejoli-panel-layout-top .sejoli-panel-nav--wp-menu > a.item,
    body.sejoli-panel-layout-top .sejoli-panel-nav--wp-menu .master-menu {
        position: relative;
        overflow: visible; /* Ensure master dropdown isn't clipped */
    }

    /* Hide Submenu Arrow on Top Nav for a cleaner look */
    body.sejoli-panel-layout-top .sejoli-panel-submenu-toggle {
        display: none !important;
    }

    body.sejoli-panel-layout-top .sejoli-panel-nav__submenu,
    body.sejoli-panel-layout-top .sejoli-panel-nav--wp-menu .master-menu .menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 200px;
        background: var(--sejoli-panel-surface);
        border: 1px solid var(--sejoli-panel-border);
        border-radius: var(--sejoli-panel-radius-md);
        box-shadow: var(--sejoli-panel-shadow);
        padding: 0.5rem;
        z-index: 10000; /* Ensure dropdown displays over ALL stage content */
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        margin: 0; /* Override left margin from sidebar layout */
    }

    /* Hover effect to show the submenus */
    body.sejoli-panel-layout-top .sejoli-panel-nav__group:hover .sejoli-panel-nav__submenu,
    body.sejoli-panel-layout-top .sejoli-panel-nav__group:focus-within .sejoli-panel-nav__submenu,
    body.sejoli-panel-layout-top .sejoli-panel-nav--wp-menu .master-menu:hover .menu,
    body.sejoli-panel-layout-top .sejoli-panel-nav--wp-menu .master-menu:focus-within .menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        display: flex !important; /* Force override display none from JS */
        pointer-events: auto;
    }
    
    body.sejoli-panel-layout-top .sejoli-panel-nav__sublink,
    body.sejoli-panel-layout-top .sejoli-panel-nav--wp-menu .master-menu .menu li a.item {
        padding: 0.5rem 1rem;
        border-radius: var(--sejoli-panel-radius-sm);
        margin-left: 0; /* Reset left margin */
    }
    
    /* Remove the connection line in submenus for top nav mode */
    body.sejoli-panel-layout-top .sejoli-panel-nav__sublink::before,
    body.sejoli-panel-layout-top .sejoli-panel-nav--wp-menu .master-menu .menu li a.item::before {
        display: none; 
    }
}


.sejoli-panel-skip-link {
    position: absolute;
    left: -9999px;
    top: 1rem;
    z-index: 99999;
}

.sejoli-panel-skip-link:focus {
    left: 1rem;
    background: #fff;
    color: #111;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
}

.sejoli-panel-app {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: 100vh;
    min-height: calc(100vh - var(--sejoli-panel-admin-bar-height));
    min-height: calc(100dvh - var(--sejoli-panel-admin-bar-height));
    transition: grid-template-columns 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 921px) {
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-app {
        grid-template-columns: 80px minmax(0, 1fr);
    }
}

.sejoli-panel-sidebar {
    position: sticky;
    top: var(--sejoli-panel-admin-bar-height);
    z-index: 20;
    height: 100vh;
    height: calc(100vh - var(--sejoli-panel-admin-bar-height));
    height: calc(100dvh - var(--sejoli-panel-admin-bar-height));
    padding: 1rem;
    background: var(--sejoli-panel-sidebar-bg);
    color: var(--sejoli-panel-sidebar-text);
    border-right: 1px solid var(--sejoli-panel-border);
    overflow-y: hidden;
    overflow-x: hidden;
    transition: padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

@media (min-width: 921px) {
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-sidebar {
        padding: 1rem 0.7rem;
        overflow-x: visible;
    }
}

.sejoli-panel-sidebar__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    flex-shrink: 0;
}

.sejoli-panel-sidebar__collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    background: transparent;
    color: var(--sejoli-panel-sidebar-muted, #64748b);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    padding: 0;
}

.sejoli-panel-sidebar__collapse::before {
    content: '';
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'%3E%3C/rect%3E%3Cline x1='9' y1='3' x2='9' y2='21'%3E%3C/line%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'%3E%3C/rect%3E%3Cline x1='9' y1='3' x2='9' y2='21'%3E%3C/line%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 920px) {
    .sejoli-panel-sidebar__collapse {
        display: none;
    }
}

.sejoli-panel-sidebar__collapse:hover {
    background: var(--sejoli-panel-sidebar-active, #e2e8f0);
    color: var(--sejoli-panel-sidebar-text, #0f172a);
}

.sejoli-panel-sidebar__collapse svg {
    display: none; /* Hide the original SVG */
}

@media (min-width: 921px) {
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-sidebar__collapse::before {
        transform: rotate(180deg);
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-sidebar__collapse svg {
        transform: rotate(180deg);
    }
}

.sejoli-panel-sidebar__brand-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}

@media (min-width: 921px) {
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-sidebar__brand-copy {
        display: none;
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-sidebar__header {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-sidebar__brand {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-sidebar__brand-link {
        justify-content: center;
        align-items: center;
        width: 100%;
    }
}

.sejoli-panel-sidebar__brand-link strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
}

.sejoli-panel-sidebar__brand-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.18rem;
}

.sejoli-panel-sidebar__brand-subtitle {
    display: inline-flex;
    color: var(--sejoli-panel-sidebar-muted);
    font-size: 0.75rem;
}

.sejoli-panel-sidebar__brand-theme {
    display: inline-flex;
    align-items: center;
    padding: 0.16rem 0.45rem;
    border-radius: 999px;
    background: var(--sejoli-panel-accent-soft);
    border: 1px solid var(--sejoli-panel-border);
    color: var(--sejoli-panel-sidebar-muted);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
}

.sejoli-panel-sidebar__logo {
    max-height: 48px;
    max-width: 160px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

body.sejoli-panel--theme-midnight .sejoli-panel-badge {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
}

@media (min-width: 921px) {
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-sidebar__brand-copy {
        display: none;
    }
}

.sejoli-panel-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex-grow: 1;
    min-height: 0;
}

.sejoli-panel-sidebar__nav-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 -0.15rem;
    padding: 0 0.15rem;
    scrollbar-width: thin;
    scrollbar-color: var(--sejoli-panel-border) transparent;
}

.sejoli-panel-sidebar__nav-wrap::-webkit-scrollbar {
    width: 8px;
}

.sejoli-panel-sidebar__nav-wrap::-webkit-scrollbar-thumb {
    background: var(--sejoli-panel-border);
    border-radius: 999px;
}

.sejoli-panel-sidebar__nav-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.sejoli-panel-nav__group {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.sejoli-panel-nav__link,
.sejoli-panel-nav__sublink {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--sejoli-panel-sidebar-text);
    opacity: 0.8;
    text-decoration: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 921px) {
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__link span,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__sublink span,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__submenu {
        display: none;
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__link {
        justify-content: center;
        padding: 0.5rem;
    }
}

.sejoli-panel-nav__link {
    position: relative;
    padding: 0.44rem 0.65rem;
}

.sejoli-panel-nav__sublink {
    padding: 0.42rem 0.65rem 0.42rem 2.2rem;
}

.sejoli-panel-nav__submenu {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0.35rem 0 0.15rem 1.1rem;
    padding: 0.35rem 0 0.35rem 1rem;
    border-left: 1px solid var(--sejoli-panel-border);
    background: var(--sejoli-panel-surface-strong);
    border-radius: 0 0.75rem 0.75rem 0;
}

.sejoli-panel-nav__sublink {
    position: relative;
    margin-left: 0.15rem;
    opacity: 0.84;
    padding: 0.45rem 0.7rem 0.45rem 0.85rem;
    border-radius: 0.5rem;
}

.sejoli-panel-nav__sublink::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 50%;
    width: 0.6rem;
    height: 1px;
    background: var(--sejoli-panel-border);
    transform: translateY(-50%);
}

.sejoli-panel-nav__group.is-active > .sejoli-panel-nav__link,
.sejoli-panel-nav__sublink.is-active {
    font-weight: 600;
    color: var(--sejoli-panel-sidebar-text);
    opacity: 1;
    background: var(--sejoli-panel-sidebar-active);
}

.sejoli-panel-nav__link:hover,
.sejoli-panel-nav__sublink:hover {
    background: var(--sejoli-panel-sidebar-active);
    color: var(--sejoli-panel-sidebar-text);
    opacity: 1;
}

.sejoli-panel-nav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    background: transparent;
    flex-shrink: 0;
}

.sejoli-panel-nav__icon--text {
    font-size: 0.8rem;
    font-weight: 800;
}

.sejoli-panel-nav__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.sejoli-panel-nav--wp-menu {
    gap: 0.25rem;
}

.sejoli-panel-nav--wp-menu > a.item,
.sejoli-panel-nav--wp-menu .master-menu > a.item,
.sejoli-panel-nav--wp-menu .master-menu .menu li a.item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    color: var(--sejoli-panel-sidebar-text);
    opacity: 0.8;
    text-decoration: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sejoli-panel-nav--wp-menu > a.item,
.sejoli-panel-nav--wp-menu .master-menu > a.item {
    padding: 0.44rem 0.65rem;
}

.sejoli-panel-nav--wp-menu .master-menu {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.sejoli-panel-nav--wp-menu .master-menu .menu {
    list-style: none;
    display: none;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0.35rem 0 0.15rem 1.1rem;
    padding: 0.35rem 0 0.35rem 1rem;
    border-left: 1px solid var(--sejoli-panel-border);
    background: var(--sejoli-panel-surface-strong);
    border-radius: 0 0.75rem 0.75rem 0;
}

.sejoli-panel-nav--wp-menu .master-menu .menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sejoli-panel-nav--wp-menu .master-menu .menu li a.item {
    position: relative;
    margin-left: 0.15rem;
    padding: 0.45rem 0.7rem 0.45rem 0.85rem;
    opacity: 0.84;
    border-radius: 0.5rem;
}

.sejoli-panel-nav--wp-menu .master-menu .menu li a.item.active,
.sejoli-panel-nav--wp-menu .master-menu .menu li a.item.current-menu-item {
    font-weight: 600;
    color: var(--sejoli-panel-sidebar-text) !important;
    opacity: 1;
    background: var(--sejoli-panel-sidebar-active);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sejoli-panel-border) 78%, transparent);
}

.sejoli-panel-nav--wp-menu .master-menu .menu li a.item::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 50%;
    width: 0.6rem;
    height: 1px;
    background: var(--sejoli-panel-border);
    transform: translateY(-50%);
}

.sejoli-panel-nav--wp-menu .master-menu .menu li a.item.active::before,
.sejoli-panel-nav--wp-menu .master-menu .menu li a.item.current-menu-item::before {
    background: var(--sejoli-panel-sidebar-text);
}

.sejoli-panel-nav--wp-menu .master-menu.is-open > .menu,
.sejoli-panel-nav--wp-menu .master-menu.submenu-open > .menu {
    display: flex;
}

.sejoli-panel-nav--wp-menu a.item:hover,
.sejoli-panel-nav--wp-menu a.item.active,
.sejoli-panel-nav--wp-menu a.item.current-menu-item,
.sejoli-panel-nav--wp-menu a.item.current-menu-parent,
.sejoli-panel-nav--wp-menu a.item.current-menu-ancestor {
    font-weight: 600;
    color: var(--sejoli-panel-sidebar-text);
    opacity: 1;
    background: var(--sejoli-panel-sidebar-active);
}

.sejoli-panel-nav--wp-menu a.item i.icon,
.sejoli-panel-nav--wp-menu a.item .sejoli-panel-nav__icon {
    order: -1;
    flex-shrink: 0;
    width: 1.25rem;
    min-width: 1.25rem;
    text-align: center;
}

.sejoli-panel-nav--wp-menu a.item i.icon {
    margin: 0;
    font-size: 1rem;
    line-height: 1;
}

.sejoli-panel-nav--wp-menu a.item .sejoli-panel-nav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sejoli-panel-nav--wp-menu a.item .sejoli-panel-nav__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sejoli-panel-nav--wp-menu .master-menu > a.item {
    position: relative;
    justify-content: flex-start;
    padding-right: 2.4rem;
    color: var(--sejoli-panel-sidebar-text);
    opacity: 0.92;
}

.sejoli-panel-nav--wp-menu .master-menu > a.item .sejoli-panel-nav__label {
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    font-weight: 600;
    opacity: 1;
}

.sejoli-panel-nav--wp-menu .master-menu.is-open > a.item,
.sejoli-panel-nav--wp-menu .master-menu.submenu-open > a.item {
    color: var(--sejoli-panel-sidebar-text) !important;
    -webkit-text-fill-color: var(--sejoli-panel-sidebar-text);
    opacity: 1 !important;
    background: var(--sejoli-panel-sidebar-active);
    box-shadow: inset 0 0 0 1px var(--sejoli-panel-border);
}

.sejoli-panel-nav--wp-menu .master-menu.is-open > a.item i.icon,
.sejoli-panel-nav--wp-menu .master-menu.is-open > a.item .sejoli-panel-nav__label,
.sejoli-panel-nav--wp-menu .master-menu.submenu-open > a.item i.icon,
.sejoli-panel-nav--wp-menu .master-menu.submenu-open > a.item .sejoli-panel-nav__label,
.sejoli-panel-nav--wp-menu .master-menu.submenu-open > a.item * {
    color: inherit !important;
    -webkit-text-fill-color: currentColor;
    opacity: 1 !important;
}

.sejoli-panel-submenu-toggle {
    position: absolute;
    top: 0.28rem;
    right: 0.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--sejoli-panel-sidebar-muted);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sejoli-panel-submenu-toggle:hover {
    background: var(--sejoli-panel-sidebar-active);
    color: var(--sejoli-panel-sidebar-text);
}

.sejoli-panel-submenu-toggle svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sejoli-panel-nav--wp-menu .master-menu.is-open > .sejoli-panel-submenu-toggle svg,
.sejoli-panel-nav--wp-menu .master-menu.submenu-open > .sejoli-panel-submenu-toggle svg {
    transform: rotate(90deg);
}

@media (min-width: 921px) {
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu .menu {
        display: none;
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-submenu-toggle {
        display: none;
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-sidebar__nav-wrap {
        margin: 0;
        padding: 0;
        overflow-x: visible;
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu {
        width: 100%;
        align-items: center;
        gap: 0.35rem;
        overflow: visible;
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__group,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu {
        width: 100%;
        align-items: center;
        overflow: visible;
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__link,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu > a.item,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu > a.item {
        display: grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        margin: 0 auto;
        padding: 0;
        gap: 0 !important;
        font-size: 0;
        border-radius: 0.8rem;
        overflow: visible;
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__link span,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu a.item .sejoli-panel-nav__label,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu a.item > span:not(.sejoli-panel-nav__icon) {
        display: none !important;
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__link .sejoli-panel-nav__icon,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu > a.item i.icon,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu > a.item i.icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        float: none !important;
        flex-shrink: 0;
        margin: 0 !important;
        font-size: 1rem;
        width: 1.35rem;
        min-width: 1.35rem;
        height: 1.35rem;
        line-height: 1;
        text-align: center;
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__link .sejoli-panel-nav__icon,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu > a.item .sejoli-panel-nav__icon,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu > a.item .sejoli-panel-nav__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.35rem;
        height: 1.35rem;
        min-width: 1.35rem;
        font-size: 0.875rem;
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu > a.item i.icon::before,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu > a.item i.icon::before {
        display: block;
        width: 100%;
        text-align: center;
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu > a.item i.bullhorn.icon,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu > a.item i.bullhorn.icon {
        transform: translateX(0.2rem);
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu.has-active-child > a.item,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu > a.item.active,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu > a.item.current-menu-parent,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu > a.item.current-menu-ancestor {
        background: var(--sejoli-panel-sidebar-active);
        box-shadow: inset 0 0 0 1px var(--sejoli-panel-border);
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-sidebar__footer {
        padding-top: 0.75rem;
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-user {
        width: 2.75rem;
        justify-content: center;
        margin: 0 auto;
        padding: 0.2rem;
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__link[data-sejoli-tooltip]::after,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu > a.item[data-sejoli-tooltip]::after,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu > a.item[data-sejoli-tooltip]::after {
        content: attr(data-sejoli-tooltip);
        position: absolute;
        top: 50%;
        left: calc(100% + 0.8rem);
        transform: translateY(-50%) translateX(-0.35rem);
        display: inline-flex;
        align-items: center;
        min-height: 2.2rem;
        padding: 0.45rem 0.75rem;
        border-radius: 0.7rem;
        background: var(--sejoli-panel-tooltip-bg, var(--sejoli-panel-sidebar-bg));
        border: 1px solid var(--sejoli-panel-tooltip-border, var(--sejoli-panel-border));
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22);
        color: var(--sejoli-panel-tooltip-text, var(--sejoli-panel-sidebar-text));
        font-size: 0.82rem;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: 0;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 50;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__link[data-sejoli-tooltip]::before,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu > a.item[data-sejoli-tooltip]::before,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu > a.item[data-sejoli-tooltip]::before {
        content: "";
        position: absolute;
        top: 50%;
        left: calc(100% + 0.45rem);
        width: 0.6rem;
        height: 0.6rem;
        background: var(--sejoli-panel-tooltip-bg, var(--sejoli-panel-sidebar-bg));
        border-left: 1px solid var(--sejoli-panel-tooltip-border, var(--sejoli-panel-border));
        border-top: 1px solid var(--sejoli-panel-tooltip-border, var(--sejoli-panel-border));
        transform: translateY(-50%) rotate(-45deg);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 49;
        transition: opacity 0.18s ease, visibility 0.18s ease;
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__link[data-sejoli-tooltip]:hover::after,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__link[data-sejoli-tooltip]:focus-visible::after,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu > a.item[data-sejoli-tooltip]:hover::after,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu > a.item[data-sejoli-tooltip]:focus-visible::after,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu > a.item[data-sejoli-tooltip]:hover::after,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu > a.item[data-sejoli-tooltip]:focus-visible::after {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(0);
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__link[data-sejoli-tooltip]:hover,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__link[data-sejoli-tooltip]:focus-visible,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu > a.item[data-sejoli-tooltip]:hover,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu > a.item[data-sejoli-tooltip]:focus-visible,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu > a.item[data-sejoli-tooltip]:hover,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu > a.item[data-sejoli-tooltip]:focus-visible {
        z-index: 30;
    }

    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__link[data-sejoli-tooltip]:hover::before,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__link[data-sejoli-tooltip]:focus-visible::before,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu > a.item[data-sejoli-tooltip]:hover::before,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu > a.item[data-sejoli-tooltip]:focus-visible::before,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu > a.item[data-sejoli-tooltip]:hover::before,
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu > a.item[data-sejoli-tooltip]:focus-visible::before {
        opacity: 1;
        visibility: visible;
    }
}

.sejoli-panel-sidebar__footer {
    margin-top: 0.75rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--sejoli-panel-border);
    flex-shrink: 0;
    position: relative;
    z-index: 3;
}

.sejoli-panel-stage {
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
}

.sejoli-panel-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem 1.5rem;
    background: var(--sejoli-panel-surface);
    border-bottom: 1px solid var(--sejoli-panel-border);
    margin-bottom: 1.5rem;
}

/* Member content (Sejoli Member Page template): hide page titles, keep mobile menu toggle */
.sejoli-panel-topbar--minimal {
    justify-content: flex-start;
    padding: 0.75rem 1.25rem;
    margin-bottom: 0.75rem;
}

.sejoli-panel-topbar--minimal .sejoli-panel-topbar__title {
    align-items: center;
    min-height: 0;
}

/* Member content: no separator band / sharp edge between topbar and body */
body.sejoli-panel--semantic-member .sejoli-panel-topbar--minimal {
    border-bottom: none;
    box-shadow: none;
    margin-bottom: 0;
    background: transparent;
    padding-top: 1rem;
    padding-bottom: 0;
}

body.sejoli-panel--semantic-member .sejoli-panel-content__inner {
    margin-top: clamp(1.5rem, 4vw, 3rem);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    background: var(--sejoli-panel-surface);
    border-radius: var(--sejoli-panel-radius-lg);
    padding: clamp(1.5rem, 4vw, 3rem);
    box-shadow: var(--sejoli-panel-shadow);
    border: 1px solid var(--sejoli-panel-border);
}

body.sejoli-panel-layout-top.sejoli-panel--semantic-member .sejoli-panel-content__inner {
    margin-top: clamp(2rem, 5vw, 4rem);
}

body.sejoli-panel--semantic-member .sejoli-panel-topbar--minimal .sejoli-panel-toggle {
    border-color: color-mix(in srgb, var(--sejoli-panel-border) 35%, transparent);
    box-shadow: none;
    background: color-mix(in srgb, var(--sejoli-panel-surface) 65%, transparent);
}

body.sejoli-panel--semantic-member .sejoli-panel-topbar--minimal .sejoli-panel-toggle:hover,
body.sejoli-panel--semantic-member .sejoli-panel-topbar--minimal .sejoli-panel-toggle:focus-visible {
    border-color: color-mix(in srgb, var(--sejoli-panel-border) 55%, transparent);
    background: var(--sejoli-panel-surface);
}

.sejoli-panel-topbar__title,
.sejoli-panel-topbar__actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.sejoli-panel-topbar__title h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.sejoli-panel-topbar__title p {
    margin: 0.25rem 0 0;
    color: var(--sejoli-panel-text);
    opacity: 0.8;
    font-size: 0.875rem;
}

.sejoli-panel-topbar__eyebrow {
    display: none;
}

.sejoli-panel-topbar__action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.75rem;
    color: var(--sejoli-panel-text);
    opacity: 0.8;
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sejoli-panel-topbar__action:hover {
    opacity: 1;
    background: var(--sejoli-panel-surface-strong);
    border-color: var(--sejoli-panel-border);
}

.sejoli-panel-topbar__action svg {
    width: 1.25rem;
    height: 1.25rem;
}

.sejoli-panel-user {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.35rem;
    background: transparent;
    border: 0;
    border-radius: 0.375rem;
    appearance: none;
    color: var(--sejoli-panel-sidebar-text);
    text-align: left;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    font: inherit;
}

.sejoli-panel-user:hover {
    background: var(--sejoli-panel-sidebar-active);
}

.sejoli-panel-user:focus-visible {
    outline: 0;
    background: var(--sejoli-panel-sidebar-active);
    box-shadow: 0 0 0 3px var(--sejoli-panel-focus-ring);
}

.sejoli-panel-user strong,
.sejoli-panel-user span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sejoli-panel-user strong {
    font-size: 0.82rem;
    font-weight: 600;
}

.sejoli-panel-user span {
    color: var(--sejoli-panel-sidebar-text);
    opacity: 0.8;
    font-size: 0.72rem;
}

body.sejoli-panel-sidebar-collapsed .sejoli-panel-user__info {
    display: none;
}

body.sejoli-panel-sidebar-collapsed .sejoli-panel-user {
    justify-content: center;
    padding: 0.35rem;
}

.sejoli-panel-user__avatar {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.375rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sejoli-panel-highlight);
    color: var(--sejoli-panel-surface);
    flex-shrink: 0;
}

.sejoli-panel-user__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sejoli-panel-user__avatar .sejoli-panel-nav__icon {
    width: 100%;
    height: 100%;
    background: transparent;
    color: inherit;
}

@media (max-height: 880px) and (min-width: 921px) {
    .sejoli-panel-sidebar {
        padding: 0.8rem 0.85rem;
    }

    .sejoli-panel-sidebar__header {
        margin-bottom: 0.65rem;
    }

    .sejoli-panel-sidebar__logo {
        width: 32px;
        height: 32px;
        padding: 0.25rem;
    }

    .sejoli-panel-sidebar__brand-link strong {
        font-size: 0.84rem;
    }

    .sejoli-panel-sidebar__brand-subtitle {
        font-size: 0.7rem;
    }

    .sejoli-panel-sidebar__brand-theme {
        padding: 0.14rem 0.4rem;
        font-size: 0.64rem;
    }

    .sejoli-panel-nav__link,
    .sejoli-panel-nav--wp-menu > a.item,
    .sejoli-panel-nav--wp-menu .master-menu > a.item {
        padding-top: 0.38rem;
        padding-bottom: 0.38rem;
    }

    .sejoli-panel-nav__sublink,
    .sejoli-panel-nav--wp-menu .master-menu .menu li a.item {
        padding-top: 0.34rem;
        padding-bottom: 0.34rem;
    }

    .sejoli-panel-sidebar__footer {
        padding-top: 0.65rem;
    }

    .sejoli-panel-user {
        gap: 0.55rem;
        padding: 0.25rem;
    }

    .sejoli-panel-user span {
        display: none;
    }
}

.sejoli-panel-toggle {
    display: none;
    border: 1px solid var(--sejoli-panel-border);
    background: var(--sejoli-panel-surface);
    border-radius: 0.375rem;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--sejoli-panel-text);
    cursor: pointer;
}

.sejoli-panel-content {
    padding: 0 2rem 2rem;
    flex: 1 1 auto;
    min-width: 0;
}

.sejoli-panel-content__inner {
    display: grid;
    gap: 1.4rem;
    margin-top: 1.5rem;
}

.sejoli-panel-footer {
    margin: auto 2rem 1.35rem;
    padding-top: 0.15rem;
}

.sejoli-panel-footer__inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    min-height: 2.85rem;
    padding: 0.78rem 1rem;
    border: 1px solid color-mix(in srgb, var(--sejoli-panel-border) 82%, transparent);
    border-radius: var(--sejoli-panel-radius-md);
    background: color-mix(in srgb, var(--sejoli-panel-elevated-surface) 78%, var(--sejoli-panel-surface) 22%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.sejoli-panel-footer__copy {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--sejoli-panel-muted) 84%, var(--sejoli-panel-text) 16%);
    max-width: 100%;
    text-align: left;
}

.sejoli-panel-footer--align-center .sejoli-panel-footer__inner {
    justify-content: center;
}

.sejoli-panel-footer--align-center .sejoli-panel-footer__copy {
    text-align: center;
}

.sejoli-panel-footer--align-right .sejoli-panel-footer__inner {
    justify-content: flex-end;
}

.sejoli-panel-footer--align-right .sejoli-panel-footer__copy {
    text-align: right;
}

body.sejoli-panel,
body.sejoli-panel-preview-document {
    --sejoli-panel-sticky-footer-height: 0px;
}

@media (min-width: 921px) {
    body.sejoli-panel-footer-sticky-enabled .sejoli-panel-stage,
    body.sejoli-panel-preview-document.sejoli-panel-footer-sticky-enabled .sejoli-panel-stage {
        padding-bottom: calc(var(--sejoli-panel-sticky-footer-height, 0px) + 0.55rem);
    }

    body.sejoli-panel-footer-sticky-enabled .sejoli-panel-footer--sticky,
    body.sejoli-panel-preview-document.sejoli-panel-footer-sticky-enabled .sejoli-panel-footer--sticky {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 260px;
        z-index: 60;
        margin: 0;
        padding: 0 1.5rem 1rem 2rem;
        pointer-events: none;
    }

    body.sejoli-panel-footer-sticky-enabled .sejoli-panel-footer--sticky .sejoli-panel-footer__inner,
    body.sejoli-panel-preview-document.sejoli-panel-footer-sticky-enabled .sejoli-panel-footer--sticky .sejoli-panel-footer__inner {
        width: 100%;
        pointer-events: auto;
    }

    body.sejoli-panel-sidebar-collapsed:not(.sejoli-panel-layout-top).sejoli-panel-footer-sticky-enabled .sejoli-panel-footer--sticky {
        left: 80px;
    }

    body.sejoli-panel-layout-top.sejoli-panel-footer-sticky-enabled .sejoli-panel-footer--sticky,
    body.sejoli-panel-preview-document.sejoli-panel-layout-top.sejoli-panel-footer-sticky-enabled .sejoli-panel-footer--sticky {
        left: 0;
        padding-right: max(2rem, calc((100vw - 1440px) / 2));
        padding-left: max(2rem, calc((100vw - 1440px) / 2));
    }

    body.sejoli-panel-layout-top.sejoli-panel-footer-sticky-enabled .sejoli-panel-footer--sticky .sejoli-panel-footer__inner,
    body.sejoli-panel-preview-document.sejoli-panel-layout-top.sejoli-panel-footer-sticky-enabled .sejoli-panel-footer--sticky .sejoli-panel-footer__inner {
        max-width: 1440px;
        margin: 0 auto;
    }

    body.sejoli-panel--theme-neo-brutal.sejoli-panel-footer-sticky-enabled .sejoli-panel-footer--sticky,
    body.sejoli-panel-preview-document.sejoli-panel--theme-neo-brutal.sejoli-panel-footer-sticky-enabled .sejoli-panel-footer--sticky {
        padding-bottom: 1.1rem;
    }
}

body.sejoli-panel--theme-horizon .sejoli-panel-footer__inner {
    border-color: color-mix(in srgb, var(--sejoli-panel-border) 76%, var(--sejoli-panel-primary) 8%);
    box-shadow: 0 16px 26px -26px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body.sejoli-panel--theme-ember .sejoli-panel-footer__inner {
    border-color: color-mix(in srgb, var(--sejoli-panel-border) 72%, var(--sejoli-panel-primary) 28%);
    background: color-mix(in srgb, var(--sejoli-panel-elevated-surface) 82%, var(--sejoli-panel-surface) 18%);
    box-shadow: 0 18px 32px -30px rgba(154, 52, 18, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

body.sejoli-panel--theme-midnight .sejoli-panel-footer__inner {
    border-color: color-mix(in srgb, var(--sejoli-panel-border) 74%, var(--sejoli-panel-primary) 26%);
    background: color-mix(in srgb, var(--sejoli-panel-surface) 86%, var(--sejoli-panel-primary) 14%);
    box-shadow: 0 18px 34px -28px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.sejoli-panel--theme-midnight .sejoli-panel-footer__copy {
    color: color-mix(in srgb, var(--sejoli-panel-muted) 74%, var(--sejoli-panel-text) 26%);
}

body.sejoli-panel--theme-neo-brutal .sejoli-panel-footer__inner {
    border-width: 2px;
    border-color: #1a1a1a;
    background: #ffffff;
    box-shadow: 4px 4px 0 0 #1a1a1a;
}

body.sejoli-panel--theme-vault .sejoli-panel-footer__inner {
    border-color: color-mix(in srgb, var(--sejoli-panel-border) 86%, var(--sejoli-panel-primary) 14%);
    background: #ffffff;
    box-shadow: 0 18px 36px -32px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

body.sejoli-panel--theme-graphite .sejoli-panel-footer__inner {
    border-radius: 0;
    background: var(--sejoli-panel-surface);
    box-shadow: none;
}

@media (max-width: 920px) {
    .sejoli-panel-footer {
        margin: auto 1rem 1rem;
    }

    .sejoli-panel-footer__inner {
        min-height: 0;
        padding: 0.72rem 0.85rem;
    }

    .sejoli-panel-footer__copy {
        font-size: 0.78rem;
    }

    body.sejoli-panel-footer-sticky-enabled .sejoli-panel-stage,
    body.sejoli-panel-preview-document.sejoli-panel-footer-sticky-enabled .sejoli-panel-stage {
        padding-bottom: 0;
    }
}

.sejoli-panel-hero,
.sejoli-panel-card,
.sejoli-panel-empty,
.sejoli-panel-auth__card {
    background: var(--sejoli-panel-surface);
    border: 1px solid var(--sejoli-panel-border);
    box-shadow: var(--sejoli-panel-shadow);
}

.sejoli-panel-hero,
.sejoli-panel-card,
.sejoli-panel-empty {
    border-radius: var(--sejoli-panel-radius-lg);
}

.sejoli-panel-hero {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.8rem 2rem;
    background: var(--sejoli-panel-highlight);
    color: var(--sejoli-panel-surface);
}

.sejoli-panel-hero__eyebrow {
    margin: 0 0 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    opacity: 0.82;
}

.sejoli-panel-hero h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.sejoli-panel-hero p {
    margin: 0.55rem 0 0;
    max-width: 42rem;
    line-height: 1.6;
    opacity: 0.9;
}

.sejoli-panel-badge {
    min-width: 180px;
    align-self: center;
    padding: 0.75rem 1rem;
    border-radius: var(--sejoli-panel-radius-sm);
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.sejoli-panel-badge--action {
    display: inline-flex;
    flex-direction: column;
    gap: 0.3rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.sejoli-panel-badge--action:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.34);
}

.sejoli-panel-badge strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
}

.sejoli-panel-badge span {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
}

.sejoli-panel-stats,
.sejoli-panel-grid,
.sejoli-panel-product-grid {
    display: grid;
    gap: 1rem;
}

.sejoli-panel-stats {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.sejoli-panel-stat {
    padding: 1.25rem 1.3rem;
    border-radius: var(--sejoli-panel-radius-md);
    background: var(--sejoli-panel-surface);
    border: 1px solid var(--sejoli-panel-border);
    box-shadow: var(--sejoli-panel-shadow);
}

.sejoli-panel-stat span,
.sejoli-panel-card__head p {
    color: var(--sejoli-panel-text);
    opacity: 0.8;
    font-size: 0.875rem;
}

.sejoli-panel-stat strong {
    display: block;
    margin-top: 0.45rem;
    font-size: 1.5rem;
    font-weight: 600;
}

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

.sejoli-panel-card {
    padding: 1.5rem;
}

.sejoli-panel-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sejoli-panel-card__head h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.sejoli-panel-card__head p,
.sejoli-panel-list__item strong,
.sejoli-panel-action strong {
    margin: 0;
}

.sejoli-panel-action-list,
.sejoli-panel-list,
.sejoli-panel-auth__stack {
    display: grid;
    gap: 0.95rem;
}

.sejoli-panel-action,
.sejoli-panel-list__item {
    display: block;
    padding: 1rem 1.05rem;
    border-radius: var(--sejoli-panel-radius-sm);
    border: 1px solid var(--sejoli-panel-border);
    box-shadow: inset 0 0 0 1px transparent;
    background: var(--sejoli-panel-surface-strong);
    text-decoration: none;
    color: inherit;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition:
        background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sejoli-panel-action:hover,
.sejoli-panel-list__item:hover {
    border-color: var(--sejoli-panel-muted);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sejoli-panel-muted) 72%, transparent);
}

.sejoli-panel-action strong,
.sejoli-panel-action span,
.sejoli-panel-list__item strong,
.sejoli-panel-list__item span {
    display: block;
}

.sejoli-panel-action strong,
.sejoli-panel-list__item strong {
    font-size: 0.875rem;
    font-weight: 600;
}

.sejoli-panel-action span,
.sejoli-panel-list__item span {
    font-size: 0.875rem;
    color: var(--sejoli-panel-text);
    opacity: 0.8;
    margin-top: 0.25rem;
}

.sejoli-panel-dual-stat {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.sejoli-panel-dual-stat > div {
    padding: 1rem;
    border-radius: var(--sejoli-panel-radius-sm);
    background: var(--sejoli-panel-surface-strong);
    border: 1px solid var(--sejoli-panel-border);
}

.sejoli-panel-dual-stat span {
    display: block;
    color: var(--sejoli-panel-text);
    opacity: 0.8;
    font-size: 0.875rem;
}

.sejoli-panel-dual-stat strong {
    display: block;
    margin-top: 0.45rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.sejoli-panel-inline-link,
.sejoli-panel-auth-links a {
    color: var(--sejoli-panel-accent);
    text-decoration: none;
    font-weight: 700;
}

.sejoli-panel-empty {
    display: grid;
    gap: 0.5rem;
    padding: 1.8rem;
    text-align: center;
}

.sejoli-panel-empty--soft {
    text-align: left;
    box-shadow: none;
}

.sejoli-panel-filter,
.sejoli-panel-chip-list,
.sejoli-panel-inline-form {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.sejoli-panel-filter-bar {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.sejoli-panel-filter__item,
.sejoli-panel-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    min-height: 2.5rem;
    border-radius: 0.375rem;
    border: 0;
    background: var(--sejoli-panel-surface);
    box-shadow: inset 0 0 0 1px var(--sejoli-panel-border);
    text-decoration: none;
    color: var(--sejoli-panel-text);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    position: relative;
    transform: translateZ(0);
}

.sejoli-panel-filter__item.is-active {
    background: var(--sejoli-panel-highlight);
    box-shadow: inset 0 0 0 1px var(--sejoli-panel-highlight);
    color: var(--sejoli-panel-surface);
}

body.sejoli-panel--theme-neo-brutal .sejoli-panel-filter__item {
    min-height: 2.6rem;
    box-shadow: inset 0 0 0 2px var(--sejoli-panel-border);
}

body.sejoli-panel--theme-neo-brutal .sejoli-panel-filter__item.is-active {
    box-shadow: inset 0 0 0 2px var(--sejoli-panel-chip-active);
}

.sejoli-panel-search {
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
    flex: 1;
    min-width: 240px;
    max-width: 320px;
}

.sejoli-panel-auth-form,
.sejoli-panel-affiliate-result {
    display: grid;
    gap: 1rem;
}

.sejoli-panel-auth-form label,
.sejoli-panel-affiliate-result label {
    display: grid;
    gap: 0.45rem;
    font-weight: 700;
}

.sejoli-panel-auth-form input,
.sejoli-panel-auth-form select,
.sejoli-panel-affiliate-result input,
.sejoli-panel-search input {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--sejoli-panel-border);
    background: var(--sejoli-panel-surface-strong);
    color: var(--sejoli-panel-text);
}

.sejoli-panel-password {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
}

.sejoli-panel-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 0.375rem;
    background: var(--sejoli-panel-highlight);
    color: var(--sejoli-panel-surface);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.sejoli-panel-submit:hover {
    opacity: 0.9;
}

.sejoli-panel-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.sejoli-panel-product-card {
    overflow: hidden;
    border-radius: var(--sejoli-panel-radius-md);
    background: var(--sejoli-panel-surface);
    border: 1px solid var(--sejoli-panel-border);
    box-shadow: var(--sejoli-panel-shadow);
}

.sejoli-panel-product-card__media {
    position: relative;
    aspect-ratio: 16/9;
    background: rgba(15, 141, 198, 0.08);
}

.sejoli-panel-product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sejoli-panel-product-card__badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(10, 19, 41, 0.7);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
}

.sejoli-panel-product-card__body {
    display: grid;
    gap: 0.9rem;
    padding: 1.4rem;
}

.sejoli-panel-product-card__body h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.sejoli-panel-product-card__body p {
    margin: 0;
    color: var(--sejoli-panel-text);
    opacity: 0.8;
    font-size: 0.875rem;
}

.sejoli-panel-product-card__price {
    font-size: 1.125rem;
    font-weight: 600;
}

.sejoli-panel-product-card__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.sejoli-panel-product-card--course .sejoli-panel-product-card__actions .sejoli-panel-submit {
    width: 100%;
}

.sejoli-panel-alert {
    padding: 1rem 1.1rem;
    border-radius: var(--sejoli-panel-radius-md);
    background: var(--sejoli-panel-surface);
    border: 1px solid var(--sejoli-panel-border);
}

.sejoli-panel-alert ul {
    margin: 0;
    padding-left: 1.2rem;
}

.sejoli-panel-shell__legacy .ui.card,
.sejoli-panel-shell__legacy .ui.cards > .card,
.sejoli-panel-shell__legacy .ui.message,
.sejoli-panel-shell__legacy .ui.segment,
.sejoli-panel-shell__legacy .ui.table,
.sejoli-panel-shell__legacy .ui.form input:not([type]),
.sejoli-panel-shell__legacy .ui.form input[type="text"],
.sejoli-panel-shell__legacy .ui.form input[type="email"],
.sejoli-panel-shell__legacy .ui.form input[type="number"],
.sejoli-panel-shell__legacy .ui.form input[type="password"],
.sejoli-panel-shell__legacy .ui.form textarea,
.sejoli-panel-shell__legacy .ui.form select,
.sejoli-panel-content .ui.message,
.sejoli-panel-content .ui.segment,
.sejoli-panel-content .ui.table {
    border-radius: var(--sejoli-panel-radius-sm) !important;
}

/* Fix Native Sejoli Widgets Colors */
body.sejoli-panel-body .sejoli-panel-shell__legacy .ui.card,
body.sejoli-panel-body .sejoli-panel-shell__legacy .ui.cards > .card {
    background: var(--sejoli-panel-surface);
    box-shadow: var(--sejoli-panel-shadow);
    border: 1px solid var(--sejoli-panel-border);
}

body.sejoli-panel-body .sejoli-panel-shell__legacy .ui.card > .content {
    border-top: 1px solid var(--sejoli-panel-border);
}

body.sejoli-panel-body .sejoli-panel-shell__legacy .ui.cards.information .content.value,
body.sejoli-panel-body .sejoli-panel-shell__legacy .ui.cards.top-ten .content.value,
body.sejoli-panel-body .sejoli-panel-shell__legacy .ui.cards.acquisition .content.value {
    background-color: var(--sejoli-panel-surface) !important;
    color: var(--sejoli-panel-text) !important;
}

body.sejoli-panel-body .sejoli-panel-shell__legacy .ui.cards.information .content.value *,
body.sejoli-panel-body .sejoli-panel-shell__legacy .ui.cards.top-ten .content.value *,
body.sejoli-panel-body .sejoli-panel-shell__legacy .ui.cards.acquisition .content.value * {
    color: var(--sejoli-panel-text) !important;
}

/* -- Impeccable Overrides: Akses Page -- */
body.sejoli-panel--view-akses .ui.three.column.doubling.stackable.cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 1.5rem !important;
    margin: 1.5rem 0 !important;
}

body.sejoli-panel--view-akses .ui.three.column.doubling.stackable.cards::before,
body.sejoli-panel--view-akses .ui.three.column.doubling.stackable.cards::after {
    display: none !important;
}

body.sejoli-panel--view-akses .ui.cards > .card {
    width: 100% !important;
    margin: 0 !important;
    border-radius: var(--sejoli-panel-radius-md) !important;
    background: var(--sejoli-panel-surface) !important;
    border: 1px solid var(--sejoli-panel-border) !important;
    box-shadow: var(--sejoli-panel-shadow) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.sejoli-panel--view-akses .ui.cards > .card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.08) !important;
    border-color: color-mix(in srgb, var(--sejoli-panel-border) 80%, var(--sejoli-panel-text)) !important;
}

body.sejoli-panel--theme-ember.sejoli-panel--view-akses .ui.cards > .card:hover {
    box-shadow: 0 20px 40px -8px rgba(234, 88, 12, 0.12) !important;
}

body.sejoli-panel--view-akses .ui.card > .content:first-child {
    background: var(--sejoli-panel-surface-strong) !important;
    padding: 1.25rem 1.5rem !important;
    border-bottom: 1px solid var(--sejoli-panel-border) !important;
    border-top: none !important;
}

body.sejoli-panel--view-akses .ui.card > .content:first-child .header {
    color: var(--sejoli-panel-text) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.4 !important;
}

body.sejoli-panel--view-akses .ui.card > .content:not(:first-child) {
    padding: 1.15rem 1.5rem !important;
    border-top: 1px solid var(--sejoli-panel-border) !important;
    background: var(--sejoli-panel-surface) !important;
}

body.sejoli-panel--view-akses .ui.card > .content .ui.sub.header {
    font-family: var(--sejoli-panel-font) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--sejoli-panel-muted) !important;
    margin-bottom: 0.65rem !important;
}

body.sejoli-panel--view-akses .ui.card > .content p {
    margin: 0 !important;
    font-size: 0.95rem !important;
    color: var(--sejoli-panel-text) !important;
}

body.sejoli-panel--view-akses .ui.card > .content p > a {
    display: inline-flex !important;
    align-items: center !important;
    color: var(--sejoli-panel-highlight) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.sejoli-panel--view-akses .ui.card > .content p > a:hover {
    opacity: 0.75 !important;
}

body.sejoli-panel--view-akses .ui.card > .content p > a.click-access {
    background: var(--sejoli-panel-sidebar-active) !important;
    color: var(--sejoli-panel-text) !important;
    padding: 0.5rem 0.85rem !important;
    border-radius: 0.4rem !important;
    font-size: 0.85rem !important;
    margin-top: 0.2rem !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.sejoli-panel--view-akses .ui.card > .content p > a.click-access:hover {
    background: var(--sejoli-panel-highlight) !important;
    color: var(--sejoli-panel-surface) !important;
    opacity: 1 !important;
}

body.sejoli-panel--view-akses .column:empty,
body.sejoli-panel--view-akses .ui.card .content:empty {
    display: none !important;
}

body.sejoli-panel-body .sejoli-panel-shell__legacy .ui.card > .content > .header:not(.ui),
body.sejoli-panel-body .sejoli-panel-shell__legacy .ui.card > .content > .meta,
body.sejoli-panel-body .sejoli-panel-shell__legacy .ui.card > .content > .description {
    color: var(--sejoli-panel-text);
}

body.sejoli-panel-body .sejoli-panel-shell__legacy .ui.table {
    background: var(--sejoli-panel-surface) !important;
    color: var(--sejoli-panel-text) !important;
    border-color: var(--sejoli-panel-border) !important;
}

body.sejoli-panel-body .sejoli-panel-shell__legacy .ui.table thead th {
    background: var(--sejoli-panel-surface-strong) !important;
    color: var(--sejoli-panel-text) !important;
    border-color: var(--sejoli-panel-border) !important;
}

body.sejoli-panel-body .sejoli-panel-shell__legacy .ui.table td {
    border-color: var(--sejoli-panel-border) !important;
    color: var(--sejoli-panel-text) !important;
}

.sejoli-panel-content table {
    width: 100%;
}

.sejoli-panel-overlay {
    display: none;
}

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

    .sejoli-panel-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .sejoli-panel-topbar--minimal {
        flex-direction: row;
        align-items: center;
    }

    .sejoli-panel-topbar__actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 920px) {
    .sejoli-panel-app {
        grid-template-columns: 1fr;
    }

    .sejoli-panel-sidebar {
        position: fixed;
        left: 0;
        top: var(--sejoli-panel-admin-bar-height);
        height: calc(100vh - var(--sejoli-panel-admin-bar-height));
        height: calc(100dvh - var(--sejoli-panel-admin-bar-height));
        width: min(88vw, 320px);
        transform: translateX(-100%);
        transition: transform 0.24s ease;
        z-index: 99;
    }

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

    body.sejoli-panel-sidebar-open .sejoli-panel-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(9, 17, 27, 0.45);
        z-index: 80;
    }

    .sejoli-panel-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .sejoli-panel-content,
    .sejoli-panel-topbar {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
}

@media (max-width: 640px) {
    .sejoli-panel-hero,
    .sejoli-panel-password,
    .sejoli-panel-search,
    .sejoli-panel-inline-form {
        grid-template-columns: 1fr;
        display: grid;
    }

    .sejoli-panel-search {
        margin-left: 0;
        max-width: none;
        min-width: 100%;
    }

    .sejoli-panel-dual-stat {
        grid-template-columns: 1fr;
    }

    .sejoli-panel-topbar__actions {
        gap: 0.75rem;
    }

    .sejoli-panel-user,
    .sejoli-panel-topbar__action {
        width: 100%;
        justify-content: center;
    }
}

body.sejoli-panel {
    --sejoli-panel-elevated-surface: var(--sejoli-panel-surface-strong);
    --sejoli-panel-hero-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #334155 100%);
    --sejoli-panel-hero-text: #f8fafc;
    --sejoli-panel-primary: #0f172a;
    --sejoli-panel-primary-text: #f8fafc;
    --sejoli-panel-chip-active: #0f172a;
    --sejoli-panel-chip-active-text: #f8fafc;
    --sejoli-panel-input-bg: var(--sejoli-panel-surface-strong);
    --sejoli-panel-chart-text: #1e293b;
    --sejoli-panel-chart-muted: #64748b;
    --sejoli-panel-chart-grid: rgba(148, 163, 184, 0.26);
    --sejoli-panel-tooltip-bg: #0f172a;
    --sejoli-panel-tooltip-border: rgba(15, 23, 42, 0.12);
    --sejoli-panel-tooltip-text: #f8fafc;
    --sejoli-panel-focus-ring: rgba(15, 23, 42, 0.18);
    --sejoli-panel-glow-1: rgba(59, 130, 246, 0.12);
    --sejoli-panel-glow-2: rgba(16, 185, 129, 0.12);
    --sejoli-panel-accent: var(--sejoli-panel-primary);
    --sejoli-panel-accent-soft: var(--sejoli-panel-elevated-surface);
    --sejoli-panel-auth-shell-width: 40rem;
    --sejoli-panel-auth-card-width: 28rem;
    --sejoli-panel-auth-register-width: 40rem;
    --sejoli-panel-auth-split-width: 72rem;
    --sejoli-panel-auth-current-width: var(--sejoli-panel-auth-card-width);
    --sejoli-panel-auth-card-surface: rgba(255, 255, 255, 0.88);
    --sejoli-panel-auth-brand-surface: rgba(255, 255, 255, 0.72);
    --sejoli-panel-auth-border: rgba(148, 163, 184, 0.18);
    --sejoli-panel-auth-brand-border: rgba(148, 163, 184, 0.16);
    --sejoli-panel-auth-shadow: 0 30px 70px -44px rgba(15, 23, 42, 0.45);
    --sejoli-panel-auth-brand-shadow: 0 20px 40px -34px rgba(15, 23, 42, 0.28);
    --sejoli-panel-auth-ring: rgba(255, 255, 255, 0.45);
    --sejoli-panel-auth-toggle-bg: rgba(255, 255, 255, 0.86);
    --sejoli-panel-auth-card-padding: clamp(1.35rem, 2.8vw, 2.25rem);
    --sejoli-panel-auth-edge: 1px;
}

body.sejoli-panel--theme-neo-brutal {
    --sejoli-panel-primary: #1a1a1a;
    --sejoli-panel-primary-text: #ffffff;
    --sejoli-panel-chip-active: #1a1a1a;
    --sejoli-panel-chip-active-text: #ffffff;
    --sejoli-panel-input-bg: #ffffff;
    --sejoli-panel-chart-text: #1a1a1a;
    --sejoli-panel-chart-muted: #4b5563;
    --sejoli-panel-chart-grid: rgba(26, 26, 26, 0.1);
    --sejoli-panel-tooltip-bg: #ffffff;
    --sejoli-panel-tooltip-border: #1a1a1a;
    --sejoli-panel-tooltip-text: #1a1a1a;
    --sejoli-panel-focus-ring: rgba(26, 26, 26, 0.16);
    --sejoli-panel-glow-1: transparent;
    --sejoli-panel-glow-2: transparent;
    --sejoli-panel-auth-card-surface: #ffffff;
    --sejoli-panel-auth-brand-surface: #ffffff;
    --sejoli-panel-auth-border: #1a1a1a;
    --sejoli-panel-auth-brand-border: #1a1a1a;
    --sejoli-panel-auth-shadow: 10px 10px 0 0 #1a1a1a;
    --sejoli-panel-auth-brand-shadow: 4px 4px 0 0 #1a1a1a;
    --sejoli-panel-auth-ring: rgba(59, 130, 246, 0.14);
    --sejoli-panel-auth-toggle-bg: #ffffff;
    --sejoli-panel-auth-edge: 2px;
}

body.sejoli-panel--theme-horizon {
    --sejoli-panel-auth-card-surface: rgba(255, 255, 255, 0.9);
    --sejoli-panel-auth-brand-surface: rgba(255, 255, 255, 0.76);
    --sejoli-panel-auth-border: rgba(148, 163, 184, 0.18);
    --sejoli-panel-auth-brand-border: rgba(148, 163, 184, 0.16);
    --sejoli-panel-auth-shadow: 0 30px 70px -44px rgba(15, 23, 42, 0.45);
    --sejoli-panel-auth-brand-shadow: 0 20px 40px -34px rgba(15, 23, 42, 0.28);
}

body.sejoli-panel--theme-ember {
    --sejoli-panel-elevated-surface: #ffedd5;
    --sejoli-panel-hero-bg: linear-gradient(135deg, #7c2d12 0%, #c2410c 50%, #ea580c 100%);
    --sejoli-panel-hero-text: #fff7ed;
    --sejoli-panel-primary: #ea580c;
    --sejoli-panel-primary-text: #fff7ed;
    --sejoli-panel-chip-active: #ea580c;
    --sejoli-panel-chip-active-text: #fff7ed;
    --sejoli-panel-input-bg: #fffaf6;
    --sejoli-panel-chart-text: #7c2d12;
    --sejoli-panel-chart-muted: #9a3412;
    --sejoli-panel-chart-grid: rgba(251, 146, 60, 0.22);
    --sejoli-panel-tooltip-bg: #7c2d12;
    --sejoli-panel-tooltip-border: rgba(194, 65, 12, 0.18);
    --sejoli-panel-tooltip-text: #fff7ed;
    --sejoli-panel-focus-ring: rgba(234, 88, 12, 0.2);
    --sejoli-panel-glow-1: rgba(234, 88, 12, 0.18);
    --sejoli-panel-glow-2: rgba(251, 191, 36, 0.15);
    --sejoli-panel-auth-card-surface: rgba(255, 251, 247, 0.92);
    --sejoli-panel-auth-brand-surface: rgba(255, 247, 237, 0.84);
    --sejoli-panel-auth-border: rgba(234, 88, 12, 0.18);
    --sejoli-panel-auth-brand-border: rgba(234, 88, 12, 0.2);
    --sejoli-panel-auth-shadow: 0 28px 70px -42px rgba(154, 52, 18, 0.34);
    --sejoli-panel-auth-brand-shadow: 0 18px 38px -30px rgba(154, 52, 18, 0.25);
    --sejoli-panel-auth-ring: rgba(255, 237, 213, 0.5);
    --sejoli-panel-auth-toggle-bg: rgba(255, 247, 237, 0.96);
}

body.sejoli-panel--theme-midnight {
    --sejoli-panel-elevated-surface: #27272a;
    --sejoli-panel-hero-bg: linear-gradient(135deg, #020617 0%, #111827 55%, #1f2937 100%);
    --sejoli-panel-hero-text: #f8fafc;
    --sejoli-panel-primary: #fafafa;
    --sejoli-panel-primary-text: #09090b;
    --sejoli-panel-chip-active: #fafafa;
    --sejoli-panel-chip-active-text: #09090b;
    --sejoli-panel-input-bg: #111827;
    --sejoli-panel-chart-text: #fafafa;
    --sejoli-panel-chart-muted: #a1a1aa;
    --sejoli-panel-chart-grid: rgba(82, 82, 91, 0.38);
    --sejoli-panel-tooltip-bg: #18181b;
    --sejoli-panel-tooltip-border: rgba(228, 228, 231, 0.12);
    --sejoli-panel-tooltip-text: #fafafa;
    --sejoli-panel-focus-ring: rgba(248, 250, 252, 0.16);
    --sejoli-panel-glow-1: rgba(56, 189, 248, 0.16);
    --sejoli-panel-glow-2: rgba(16, 185, 129, 0.12);
    --sejoli-panel-auth-card-surface: rgba(12, 14, 18, 0.92);
    --sejoli-panel-auth-brand-surface: rgba(17, 24, 39, 0.82);
    --sejoli-panel-auth-border: rgba(255, 255, 255, 0.08);
    --sejoli-panel-auth-brand-border: rgba(255, 255, 255, 0.08);
    --sejoli-panel-auth-shadow: 0 34px 80px -42px rgba(0, 0, 0, 0.7);
    --sejoli-panel-auth-brand-shadow: 0 22px 44px -34px rgba(0, 0, 0, 0.55);
    --sejoli-panel-auth-ring: rgba(255, 255, 255, 0.12);
    --sejoli-panel-auth-toggle-bg: rgba(17, 24, 39, 0.95);
}

body.sejoli-panel--theme-vault {
    --sejoli-panel-primary: #1e3a8a;
    --sejoli-panel-primary-text: #ffffff;
    --sejoli-panel-chip-active: #1e3a8a;
    --sejoli-panel-chip-active-text: #ffffff;
    --sejoli-panel-input-bg: #f8fafc;
    --sejoli-panel-chart-text: #0f172a;
    --sejoli-panel-chart-muted: #64748b;
    --sejoli-panel-chart-grid: rgba(148, 163, 184, 0.15);
    --sejoli-panel-tooltip-bg: #ffffff;
    --sejoli-panel-tooltip-border: #e2e8f0;
    --sejoli-panel-tooltip-text: #0f172a;
    --sejoli-panel-focus-ring: rgba(30, 58, 138, 0.12);
    --sejoli-panel-glow-1: transparent;
    --sejoli-panel-glow-2: transparent;
    --sejoli-panel-auth-card-surface: rgba(255, 255, 255, 0.96);
    --sejoli-panel-auth-brand-surface: rgba(255, 255, 255, 0.82);
    --sejoli-panel-auth-border: rgba(191, 219, 254, 0.66);
    --sejoli-panel-auth-brand-border: rgba(226, 232, 240, 0.82);
    --sejoli-panel-auth-shadow: 0 26px 54px -42px rgba(30, 58, 138, 0.2);
    --sejoli-panel-auth-brand-shadow: 0 14px 28px -24px rgba(15, 23, 42, 0.16);
    --sejoli-panel-auth-ring: rgba(219, 234, 254, 0.85);
    --sejoli-panel-auth-toggle-bg: #ffffff;
}

body.sejoli-panel--theme-graphite {
    --sejoli-panel-primary: #171717;
    --sejoli-panel-primary-text: #ffffff;
    --sejoli-panel-chip-active: #171717;
    --sejoli-panel-chip-active-text: #ffffff;
    --sejoli-panel-input-bg: #ffffff;
    --sejoli-panel-chart-text: #171717;
    --sejoli-panel-chart-muted: #737373;
    --sejoli-panel-chart-grid: rgba(0, 0, 0, 0.05);
    --sejoli-panel-tooltip-bg: #ffffff;
    --sejoli-panel-tooltip-border: #e5e5e5;
    --sejoli-panel-tooltip-text: #171717;
    --sejoli-panel-focus-ring: rgba(23, 23, 23, 0.08);
    --sejoli-panel-glow-1: transparent;
    --sejoli-panel-glow-2: transparent;
    --sejoli-panel-auth-card-surface: rgba(255, 255, 255, 0.96);
    --sejoli-panel-auth-brand-surface: rgba(255, 255, 255, 0.96);
    --sejoli-panel-auth-border: #d4d4d8;
    --sejoli-panel-auth-brand-border: #d4d4d8;
    --sejoli-panel-auth-shadow: none;
    --sejoli-panel-auth-brand-shadow: none;
    --sejoli-panel-auth-ring: rgba(245, 245, 245, 0.96);
    --sejoli-panel-auth-toggle-bg: #fafafa;
}

.sejoli-panel-hero {
    background: var(--sejoli-panel-hero-bg);
    color: var(--sejoli-panel-hero-text);
}

.sejoli-panel-hero .sejoli-panel-badge {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: inherit;
}

.sejoli-panel-card,
.sejoli-panel-empty,
.sejoli-panel-stat,
.sejoli-panel-alert,
.sejoli-panel-product-card,
.sejoli-panel-topbar,
.sejoli-panel-toggle,
.sejoli-panel-topbar__action,
.sejoli-panel-user,
.sejoli-panel-sidebar__brand-theme,
.sejoli-panel-action,
.sejoli-panel-list__item,
.sejoli-panel-dual-stat > div,
.sejoli-panel-filter__item,
.sejoli-panel-chip {
    background: var(--sejoli-panel-surface);
}

.sejoli-panel-stat,
.sejoli-panel-card,
.sejoli-panel-empty,
.sejoli-panel-alert,
.sejoli-panel-product-card,
.sejoli-panel-topbar,
.sejoli-panel-toggle {
    border-color: var(--sejoli-panel-border);
}

.sejoli-panel-action,
.sejoli-panel-list__item,
.sejoli-panel-dual-stat > div,
.sejoli-panel-filter__item,
.sejoli-panel-chip,
.sejoli-panel-user,
.sejoli-panel-topbar__action,
.sejoli-panel-sidebar__brand-theme {
    background: var(--sejoli-panel-elevated-surface);
}

.sejoli-panel-inline-link,
.sejoli-panel-auth-links a {
    color: var(--sejoli-panel-primary);
}

.sejoli-panel-submit {
    background: var(--sejoli-panel-primary);
    color: var(--sejoli-panel-primary-text);
    box-shadow: 0 16px 24px -22px var(--sejoli-panel-primary);
}

.sejoli-panel-submit:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.sejoli-panel-filter__item.is-active {
    background: var(--sejoli-panel-chip-active);
    border-color: var(--sejoli-panel-chip-active);
    color: var(--sejoli-panel-chip-active-text);
}

.sejoli-panel-user {
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--sejoli-panel-border);
    border-radius: calc(var(--sejoli-panel-radius-md) + 0.125rem);
    box-shadow: none;
}

.sejoli-panel-user__avatar {
    background: linear-gradient(135deg, var(--sejoli-panel-primary) 0%, rgba(255, 255, 255, 0.16) 100%);
    color: var(--sejoli-panel-primary-text);
}

.sejoli-panel-badge,
.sejoli-panel-empty--soft,
.sejoli-panel-product-card__badge {
    backdrop-filter: blur(10px);
}

.sejoli-panel-product-card__badge {
    background: rgba(15, 23, 42, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sejoli-panel-auth__intro p,
.sejoli-panel-topbar__title p,
.sejoli-panel-card__head p,
.sejoli-panel-stat span,
.sejoli-panel-action span,
.sejoli-panel-list__item span,
.sejoli-panel-dual-stat span,
.sejoli-panel-product-card__body p,
.sejoli-panel-empty span {
    color: var(--sejoli-panel-muted);
    opacity: 1;
}

.sejoli-panel-auth__eyebrow,
.sejoli-panel-auth__intro .sejoli-panel-auth__eyebrow,
.sejoli-panel-hero__eyebrow {
    color: inherit;
    opacity: 0.74;
}

/* -------------------------------------------------------------------------- */
/* Auth Layout                                                                 */
/* -------------------------------------------------------------------------- */
.sejoli-panel-auth {
    position: relative;
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(1rem, 3vw, 2.5rem);
    overflow: hidden;
    background:
        radial-gradient(circle at top center, var(--sejoli-panel-glow-1) 0%, rgba(0, 0, 0, 0) 38%),
        radial-gradient(circle at 100% 0%, var(--sejoli-panel-glow-2) 0%, rgba(0, 0, 0, 0) 30%),
        var(--sejoli-panel-bg);
}

.sejoli-panel-auth__glow {
    position: absolute;
    inset: -8rem auto auto 50%;
    width: min(52rem, calc(100vw + 6rem));
    height: 24rem;
    transform: translateX(-50%);
    border-radius: 1000px;
    background:
        radial-gradient(circle at center, var(--sejoli-panel-glow-1) 0%, rgba(0, 0, 0, 0) 68%),
        radial-gradient(circle at 70% 70%, var(--sejoli-panel-glow-2) 0%, rgba(0, 0, 0, 0) 72%);
    filter: blur(24px);
    pointer-events: none;
    opacity: 0.9;
}

.sejoli-panel-auth__wrap {
    position: relative;
    z-index: 1;
    width: min(100%, var(--sejoli-panel-auth-current-width));
    margin: auto;
    display: grid;
    gap: 1rem;
    justify-items: center;
    align-content: center;
}

.sejoli-panel-auth__brand {
    width: 100%;
}

.sejoli-panel-auth__brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    max-width: 100%;
    padding: 0.8rem 1rem;
    border: var(--sejoli-panel-auth-edge) solid var(--sejoli-panel-auth-brand-border);
    border-radius: calc(var(--sejoli-panel-radius-md) + 0.15rem);
    background: var(--sejoli-panel-auth-brand-surface);
    box-shadow: var(--sejoli-panel-auth-brand-shadow);
    color: inherit;
    text-decoration: none;
    backdrop-filter: blur(16px);
}

.sejoli-panel-auth__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.15rem;
    height: 3.15rem;
    border-radius: calc(var(--sejoli-panel-radius-md) + 0.15rem);
    background: var(--sejoli-panel-elevated-surface);
    overflow: hidden;
}

.sejoli-panel-auth__brand-mark--has-logo {
    width: 4rem;
    height: 4rem;
    padding: 0.28rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}

.sejoli-panel-auth__logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
    transform: scale(1.04);
}

.sejoli-panel-auth__brand-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.sejoli-panel-auth__brand-copy {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
}

.sejoli-panel-auth__brand-copy strong,
.sejoli-panel-auth__brand-copy span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sejoli-panel-auth__brand-copy strong {
    font-size: 0.98rem;
    font-weight: 700;
}

.sejoli-panel-auth__brand-copy span {
    color: var(--sejoli-panel-muted);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sejoli-panel-hero__title {
    margin: 0;
    font-size: clamp(1.75rem, 2.6vw, 2.35rem);
    line-height: 1.15;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="hidden"] {
    gap: 0.85rem;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="text-only"] .sejoli-panel-auth__brand,
.sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="logo-only"] .sejoli-panel-auth__brand,
.sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="member-area-only"] .sejoli-panel-auth__brand {
    width: auto;
    max-width: 100%;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="text-only"] .sejoli-panel-auth__brand-link {
    gap: 0;
    padding: 0.72rem 1rem 0.78rem;
    align-items: flex-start;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="text-only"] .sejoli-panel-auth__brand-copy {
    gap: 0.1rem;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="text-only"] .sejoli-panel-auth__brand-copy strong {
    font-size: 1rem;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="logo-only"] .sejoli-panel-auth__brand-link {
    justify-content: center;
    padding: 0.7rem;
    min-width: 0;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="logo-only"] .sejoli-panel-auth__brand-mark,
.sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="logo-only"] .sejoli-panel-auth__brand-mark--has-logo {
    margin: 0;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="member-area-only"] .sejoli-panel-auth__brand-link {
    gap: 0;
    justify-content: center;
    padding: 0.65rem 0.95rem;
    min-width: clamp(10rem, 20vw, 12.5rem);
}

.sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="member-area-only"] .sejoli-panel-auth__brand-copy {
    justify-items: center;
    text-align: center;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="member-area-only"] .sejoli-panel-auth__brand-copy span {
    font-size: 0.73rem;
    letter-spacing: 0.16em;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="text-only"] .sejoli-panel-auth__brand--inline,
.sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="logo-only"] .sejoli-panel-auth__brand--inline,
.sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="member-area-only"] .sejoli-panel-auth__brand--inline {
    width: 100%;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="text-only"] .sejoli-panel-auth__brand--inline .sejoli-panel-auth__brand-link,
.sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="logo-only"] .sejoli-panel-auth__brand--inline .sejoli-panel-auth__brand-link,
.sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="member-area-only"] .sejoli-panel-auth__brand--inline .sejoli-panel-auth__brand-link {
    width: fit-content;
    max-width: 100%;
}

.sejoli-panel-auth__main {
    width: 100%;
}

.sejoli-panel-auth__aside,
.sejoli-panel-auth__media {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: var(--sejoli-panel-auth-edge) solid var(--sejoli-panel-auth-border);
    border-radius: calc(var(--sejoli-panel-radius-lg) + 0.1rem);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--sejoli-panel-auth-card-surface) 88%, transparent) 0%, color-mix(in srgb, var(--sejoli-panel-auth-card-surface) 96%, var(--sejoli-panel-primary) 4%) 100%);
    box-shadow: var(--sejoli-panel-auth-shadow);
    backdrop-filter: blur(18px);
}

.sejoli-panel-auth__aside {
    display: grid;
    align-content: start;
    gap: 0.9rem;
    padding: var(--sejoli-panel-auth-card-padding);
    isolation: isolate;
}

.sejoli-panel-auth__aside p,
.sejoli-panel-auth__media-copy p {
    margin: 0;
    color: var(--sejoli-panel-muted);
    line-height: 1.7;
}

.sejoli-panel-auth__aside-copy {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: start;
    gap: 0.9rem;
}

.sejoli-panel-auth__aside-content {
    position: relative;
    z-index: 2;
    isolation: isolate;
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 0.7rem;
    min-height: 100%;
    max-width: min(25rem, 78%);
    padding: clamp(2rem, 4vw, 3rem);
}

.sejoli-panel-auth__aside-content::before {
    content: "";
    position: absolute;
    inset: -0.9rem -1.15rem -1rem -1.1rem;
    border-radius: 1.5rem;
    background:
        linear-gradient(180deg, rgba(9, 23, 82, 0.42), rgba(12, 28, 95, 0.28)),
        radial-gradient(circle at top left, rgba(8, 20, 74, 0.24), transparent 64%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 18px 44px -30px rgba(6, 18, 73, 0.5);
    backdrop-filter: blur(2px);
    z-index: -1;
}

.sejoli-panel-auth__aside-kicker {
    margin: 0;
    color: #eaf2ff;
    -webkit-text-fill-color: #eaf2ff;
    opacity: 1;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
    text-shadow: 0 4px 14px rgba(6, 18, 73, 0.22);
}

.sejoli-panel-auth__aside-heading {
    margin: 0;
    max-width: 11ch;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    opacity: 1;
    font-size: clamp(1.8rem, 3.2vw, 2.75rem);
    font-weight: 780;
    line-height: 1.04;
    letter-spacing: -0.038em;
    text-wrap: balance;
    text-shadow:
        0 6px 18px rgba(7, 20, 78, 0.24),
        0 1px 3px rgba(8, 22, 88, 0.14);
}

.sejoli-panel-auth__aside-description {
    margin: 0;
    max-width: 30ch;
    color: #f3f7ff;
    -webkit-text-fill-color: #f3f7ff;
    opacity: 1;
    font-size: clamp(0.98rem, 1.45vw, 1.08rem);
    font-weight: 560;
    line-height: 1.58;
    text-wrap: pretty;
    text-shadow: 0 4px 14px rgba(7, 20, 78, 0.22);
}

.sejoli-panel-auth__aside-visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        linear-gradient(136deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 28%, rgba(255, 255, 255, 0) 48%),
        radial-gradient(circle at 78% 22%, rgba(151, 182, 255, 0.24) 0%, rgba(151, 182, 255, 0.12) 12%, transparent 30%),
        radial-gradient(circle at 86% 84%, rgba(78, 113, 255, 0.36) 0%, rgba(78, 113, 255, 0.12) 18%, transparent 42%),
        linear-gradient(160deg, #2b52df 0%, #2348c8 44%, #2448c5 68%, #335df1 100%);
}

.sejoli-panel-auth__aside-orb,
.sejoli-panel-auth__aside-grid {
    position: absolute;
    display: block;
}

.sejoli-panel-auth__aside-orb {
    display: block;
    filter: none;
    mix-blend-mode: normal;
}

.sejoli-panel-auth__aside-orb--one {
    inset: -18% auto auto -20%;
    width: clamp(22rem, 60vw, 38rem);
    height: clamp(26rem, 72vw, 42rem);
    background:
        radial-gradient(ellipse at 64% 24%, rgba(195, 210, 255, 0.84) 0%, rgba(164, 183, 255, 0.7) 20%, rgba(130, 156, 255, 0.4) 42%, rgba(130, 156, 255, 0.12) 58%, transparent 66%);
    border-radius: 46% 54% 38% 62% / 18% 24% 76% 82%;
    transform: rotate(10deg);
    opacity: 0.74;
    filter: blur(1px);
}

.sejoli-panel-auth__aside-orb--two {
    inset: auto auto -34% 18%;
    width: clamp(18rem, 50vw, 30rem);
    height: clamp(12rem, 32vw, 18rem);
    background:
        radial-gradient(ellipse at 52% 10%, rgba(40, 71, 188, 0.18) 0%, rgba(34, 63, 173, 0.1) 18%, transparent 26%),
        linear-gradient(180deg, rgba(25, 54, 160, 0.96) 0%, rgba(28, 63, 181, 0.98) 100%);
    border-radius: 50% 50% 0 0 / 72% 72% 0 0;
    opacity: 1;
    box-shadow: 0 -24px 46px -30px rgba(12, 29, 102, 0.6);
}

.sejoli-panel-auth__aside-grid {
    inset: 0;
    background-image:
        linear-gradient(104deg, rgba(255, 255, 255, 0) 22%, rgba(205, 219, 255, 0.34) 44%, rgba(255, 255, 255, 0.08) 53%, rgba(255, 255, 255, 0) 70%);
    mask-image: linear-gradient(130deg, transparent 18%, rgba(0, 0, 0, 0.88) 40%, transparent 76%);
    opacity: 0.72;
    transform: translateX(8%);
}

.sejoli-panel-auth__media {
    display: grid;
    min-height: clamp(16rem, 38vw, 28rem);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--sejoli-panel-primary) 22%, transparent) 0%, transparent 45%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--sejoli-panel-primary) 14%, transparent) 0%, transparent 38%),
        color-mix(in srgb, var(--sejoli-panel-auth-card-surface) 92%, var(--sejoli-panel-primary) 8%);
}

.sejoli-panel-auth__media--image {
    background: color-mix(in srgb, var(--sejoli-panel-auth-card-surface) 84%, #000 16%);
}

.sejoli-panel-auth__media--placeholder::before {
    content: "";
    position: absolute;
    inset: auto -10% -18% 40%;
    height: 12rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sejoli-panel-primary) 18%, transparent);
    filter: blur(18px);
    opacity: 0.9;
}

.sejoli-panel-auth__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.sejoli-panel-auth__media-copy {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: end;
    gap: 0.85rem;
    min-height: inherit;
    padding: clamp(1.35rem, 3.2vw, 2.4rem);
}

.sejoli-panel-auth__media-copy .sejoli-panel-auth__eyebrow,
.sejoli-panel-auth__aside .sejoli-panel-auth__eyebrow {
    margin: 0;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"] {
    width: min(100%, var(--sejoli-panel-auth-split-width));
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: stretch;
    justify-items: stretch;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"][data-sejoli-auth-aside-mode="visual-only"] .sejoli-panel-auth__aside {
    min-height: clamp(24rem, 48vw, 38rem);
    background:
        linear-gradient(156deg, #264eda 0%, #2249cb 42%, #2449cb 64%, #315bf0 100%);
    box-shadow:
        0 36px 72px -46px rgba(16, 36, 118, 0.44),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"][data-sejoli-auth-aside-mode="visual-only"] .sejoli-panel-auth__aside::before {
    content: "";
    position: absolute;
    inset: 1rem;
    border-radius: calc(var(--sejoli-panel-radius-lg) - 0.2rem);
    border: 1px solid rgba(183, 199, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.02)),
        linear-gradient(128deg, rgba(173, 193, 255, 0.12), rgba(255, 255, 255, 0));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    z-index: 0;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"][data-sejoli-auth-aside-mode="visual-only"] .sejoli-panel-auth__aside::after {
    content: "";
    position: absolute;
    inset: -6% -12% auto auto;
    width: clamp(14rem, 30vw, 22rem);
    height: clamp(18rem, 42vw, 28rem);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(175, 194, 255, 0.48) 0%, rgba(162, 183, 255, 0.34) 24%, rgba(118, 144, 255, 0.18) 56%, rgba(118, 144, 255, 0) 82%);
    transform: rotate(8deg);
    filter: blur(0.5px);
    opacity: 0.92;
    z-index: 1;
}

body.sejoli-panel--theme-horizon .sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"][data-sejoli-auth-aside-mode="visual-only"] .sejoli-panel-auth__aside,
body.sejoli-panel--theme-vault .sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"][data-sejoli-auth-aside-mode="visual-only"] .sejoli-panel-auth__aside {
    background:
        linear-gradient(156deg, #294fe0 0%, #234acf 42%, #244ad0 64%, #3560f4 100%);
}

body.sejoli-panel--theme-midnight .sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"][data-sejoli-auth-aside-mode="visual-only"] .sejoli-panel-auth__aside {
    background:
        linear-gradient(156deg, rgba(25, 42, 124, 0.98) 0%, rgba(29, 50, 143, 0.98) 44%, rgba(40, 66, 182, 0.96) 100%);
    box-shadow:
        0 34px 80px -42px rgba(0, 0, 0, 0.58),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.sejoli-panel--theme-midnight .sejoli-panel-auth__aside-visual {
    background:
        linear-gradient(136deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 28%, rgba(255, 255, 255, 0) 48%),
        radial-gradient(circle at 82% 84%, rgba(78, 113, 255, 0.26) 0%, rgba(78, 113, 255, 0.1) 18%, transparent 40%),
        linear-gradient(156deg, rgba(43, 69, 195, 0.08), rgba(23, 39, 116, 0));
}

body.sejoli-panel--theme-midnight .sejoli-panel-auth__aside-grid {
    background-image:
        linear-gradient(104deg, rgba(255, 255, 255, 0) 22%, rgba(208, 220, 255, 0.22) 44%, rgba(255, 255, 255, 0.08) 53%, rgba(255, 255, 255, 0) 70%);
    opacity: 0.58;
}

body.sejoli-panel--theme-midnight .sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"][data-sejoli-auth-aside-mode="visual-only"] .sejoli-panel-auth__aside::before {
    border-color: rgba(173, 193, 255, 0.14);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01)),
        linear-gradient(128deg, rgba(173, 193, 255, 0.08), rgba(255, 255, 255, 0));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body.sejoli-panel--theme-graphite .sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"][data-sejoli-auth-aside-mode="visual-only"] .sejoli-panel-auth__aside,
body.sejoli-panel--theme-neo-brutal .sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"][data-sejoli-auth-aside-mode="visual-only"] .sejoli-panel-auth__aside {
    background:
        linear-gradient(156deg, #294edf 0%, #234acc 42%, #315af0 100%);
}

.sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"][data-sejoli-auth-aside-mode="visual-only"] .sejoli-panel-auth__aside-copy {
    display: none;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"][data-sejoli-auth-aside-mode="visual-only"] .sejoli-panel-auth__aside {
    display: flex;
    align-items: flex-start;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"] .sejoli-panel-auth__main {
    display: flex;
    align-items: stretch;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"] .sejoli-panel-auth__card {
    width: 100%;
    min-height: 100%;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"] .sejoli-panel-auth__aside,
.sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"] .sejoli-panel-auth__main,
.sejoli-panel-auth__wrap[data-sejoli-auth-shell="visual-split"] .sejoli-panel-auth__media,
.sejoli-panel-auth__wrap[data-sejoli-auth-shell="visual-split"] .sejoli-panel-auth__main {
    height: 100%;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-shell="visual-split"] {
    width: min(100%, var(--sejoli-panel-auth-split-width));
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-areas: "main media";
    align-items: stretch;
    justify-items: stretch;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-shell="visual-split"] .sejoli-panel-auth__main {
    grid-area: main;
    display: flex;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-shell="visual-split"] .sejoli-panel-auth__card {
    width: 100%;
}

.sejoli-panel-auth__wrap[data-sejoli-auth-shell="visual-split"] .sejoli-panel-auth__media {
    grid-area: media;
    min-height: 100%;
}

body.sejoli-panel--view-register .sejoli-panel-auth__main {
    width: 100%;
}

body.sejoli-panel--view-register {
    --sejoli-panel-auth-current-width: var(--sejoli-panel-auth-register-width);
}

@media (max-width: 960px) {
    .sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"][data-sejoli-auth-aside-mode="visual-only"] .sejoli-panel-auth__aside {
        min-height: clamp(12rem, 34vw, 16rem);
    }

    .sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"][data-sejoli-auth-aside-mode="visual-only"] .sejoli-panel-auth__aside::before {
        inset: 0.8rem;
    }

    .sejoli-panel-auth__aside-orb--one {
        inset: -22% auto auto -42%;
        width: clamp(18rem, 78vw, 28rem);
        height: clamp(18rem, 82vw, 30rem);
        opacity: 0.86;
    }

    .sejoli-panel-auth__aside-orb--two {
        inset: auto auto -42% 10%;
        width: clamp(14rem, 68vw, 24rem);
        height: clamp(8rem, 30vw, 12rem);
        opacity: 1;
    }

    .sejoli-panel-auth__aside-grid {
        opacity: 0.56;
    }

    .sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"][data-sejoli-auth-aside-mode="visual-only"] .sejoli-panel-auth__aside::after {
        inset: -10% -22% auto auto;
        width: clamp(10rem, 40vw, 16rem);
        height: clamp(11rem, 34vw, 16rem);
        opacity: 0.74;
    }

    .sejoli-panel-auth__aside-content {
        gap: 0.5rem;
        max-width: min(100%, 19rem);
        padding: 1.25rem 1.3rem;
        align-content: end;
    }

    .sejoli-panel-auth__aside-content::before {
        inset: -0.65rem -0.75rem -0.8rem -0.75rem;
        border-radius: 1.15rem;
        backdrop-filter: blur(2px);
    }

    .sejoli-panel-auth__aside-kicker {
        font-size: 0.72rem;
        letter-spacing: 0.14em;
    }

    .sejoli-panel-auth__aside-heading {
        max-width: 11ch;
        font-size: clamp(1.45rem, 5.4vw, 2rem);
        line-height: 1.04;
    }

    .sejoli-panel-auth__aside-description {
        max-width: 28ch;
        font-size: 0.92rem;
        line-height: 1.52;
    }
}

.sejoli-panel-auth__card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--sejoli-panel-auth-card-padding);
    border: var(--sejoli-panel-auth-edge) solid var(--sejoli-panel-auth-border);
    border-radius: calc(var(--sejoli-panel-radius-lg) + 0.1rem);
    background: var(--sejoli-panel-auth-card-surface);
    box-shadow: var(--sejoli-panel-auth-shadow);
    backdrop-filter: blur(18px);
}

.sejoli-panel-auth__stack {
    display: grid;
    gap: 1.2rem;
    align-content: start;
    min-height: 100%;
}

.sejoli-panel-auth__stack > :first-child {
    margin-top: 0;
}

.sejoli-panel-auth__brand--inline + .sejoli-panel-auth__stack {
    margin-top: 0.9rem;
}

.sejoli-panel-auth__brand--inline + .sejoli-panel-auth__intro {
    margin-top: 0.45rem;
}

.sejoli-panel-auth__brand--inline + .sejoli-panel-auth__helper {
    margin-top: 0.45rem;
}

.sejoli-panel-auth .sejoli-social-login {
    display: grid;
    gap: 0.95rem;
    margin: 0;
}

.sejoli-panel-auth .sejoli-social-buttons {
    margin: 0;
    gap: 0.75rem;
}

.sejoli-panel-auth .sejoli-social-divider {
    margin: 0;
}

.sejoli-panel-auth__intro {
    display: grid;
    gap: 0.5rem;
}

.sejoli-panel-auth__intro p,
.sejoli-panel-auth__title {
    margin: 0;
}

.sejoli-panel-auth__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.sejoli-panel-auth__intro p:not(.sejoli-panel-auth__eyebrow) {
    max-width: 42rem;
    color: var(--sejoli-panel-muted);
    line-height: 1.65;
}

.sejoli-panel-auth__intro .sejoli-panel-auth__eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.68;
}

.sejoli-panel-auth__helper {
    margin: 0;
    color: var(--sejoli-panel-muted);
    font-size: 0.96rem;
    font-weight: 500;
    line-height: 1.65;
}

.sejoli-panel-auth .sejoli-panel-alert {
    border-radius: calc(var(--sejoli-panel-radius-md) + 0.05rem);
    background: color-mix(in srgb, var(--sejoli-panel-auth-card-surface) 92%, var(--sejoli-panel-primary) 8%);
    box-shadow: none;
}

.sejoli-panel-auth-form {
    display: grid;
    gap: 1rem;
}

.sejoli-panel-auth-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.sejoli-panel-auth-form__field {
    display: grid;
    gap: 0.45rem;
    font-weight: 600;
    align-content: start;
}

.sejoli-panel-auth-form__field--full {
    grid-column: 1 / -1;
}

.sejoli-panel-auth .sejoli-panel-auth-form__field > span {
    font-size: 0.82rem;
    line-height: 1.45;
    letter-spacing: 0.01em;
}

.sejoli-panel-auth .sejoli-panel-auth-form input,
.sejoli-panel-auth .sejoli-panel-auth-form select,
.sejoli-panel-auth .sejoli-panel-auth-form textarea {
    min-height: 3rem;
    padding: 0.75rem 0.95rem;
    border-radius: calc(var(--sejoli-panel-radius-sm) + 0.15rem);
    border: var(--sejoli-panel-auth-edge) solid var(--sejoli-panel-border);
    background: var(--sejoli-panel-input-bg);
    color: var(--sejoli-panel-text);
    font-weight: 500;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.sejoli-panel-auth .sejoli-panel-auth-form input::placeholder,
.sejoli-panel-auth .sejoli-panel-auth-form textarea::placeholder {
    color: var(--sejoli-panel-muted);
}

.sejoli-panel-password {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: stretch;
}

.sejoli-panel-password > input {
    width: 100%;
}

.sejoli-panel-auth .sejoli-panel-password__toggle {
    min-height: 3rem;
    min-width: 5.4rem;
    padding: 0.65rem 0.9rem;
    border: var(--sejoli-panel-auth-edge) solid var(--sejoli-panel-border);
    border-radius: calc(var(--sejoli-panel-radius-sm) + 0.15rem);
    background: var(--sejoli-panel-auth-toggle-bg);
    color: var(--sejoli-panel-text);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition:
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.sejoli-panel-auth-form--register .sejoli-panel-auth-form__grid {
    align-items: start;
    gap: clamp(1rem, 2vw, 1.3rem) clamp(1rem, 2.2vw, 1.4rem);
}

.sejoli-panel-auth-form--register .sejoli-panel-auth-form__field {
    min-width: 0;
}

.sejoli-panel-auth-form--register .sejoli-panel-auth-form__password-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.9rem, 1.8vw, 1.2rem);
    align-items: start;
}

.sejoli-panel-auth-form--register .sejoli-panel-auth-form__field--password-pair {
    gap: 0.55rem;
}

.sejoli-panel-auth-form--register .sejoli-panel-password {
    grid-template-columns: minmax(0, 1fr) minmax(6.25rem, 7.2rem);
    gap: 0.75rem;
}

.sejoli-panel-auth-form--register .sejoli-panel-password__toggle {
    width: 100%;
    min-width: 6.25rem;
}

.sejoli-panel-auth-form--register .sejoli-panel-submit {
    margin-top: 0.55rem;
}

.sejoli-panel-auth-form--register + .sejoli-panel-auth-links {
    margin-top: 0.5rem;
}

.sejoli-panel-auth .sejoli-panel-password__toggle:hover {
    transform: translateY(-1px);
    border-color: var(--sejoli-panel-primary);
}

.sejoli-panel-auth .sejoli-panel-submit {
    width: 100%;
    min-height: 3.2rem;
    margin-top: 0.15rem;
    border-radius: calc(var(--sejoli-panel-radius-sm) + 0.15rem);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.sejoli-panel-auth-links {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.2rem;
}

.sejoli-panel-auth-link-line {
    margin: 0;
    color: var(--sejoli-panel-muted);
    line-height: 1.6;
}

.sejoli-panel-auth-link-line a,
.sejoli-panel-auth-link-line--muted {
    color: var(--sejoli-panel-primary);
    font-weight: 700;
    text-decoration: none;
}

.sejoli-panel-auth-link-line--muted {
    justify-self: start;
    font-size: 0.92rem;
}

body.sejoli-panel--theme-midnight .sejoli-panel-auth__brand-copy span,
body.sejoli-panel--theme-midnight .sejoli-panel-auth__intro p:not(.sejoli-panel-auth__eyebrow),
body.sejoli-panel--theme-midnight .sejoli-panel-auth-link-line {
    color: rgba(228, 228, 231, 0.74);
}

body.sejoli-panel--theme-neo-brutal .sejoli-panel-auth__card,
body.sejoli-panel--theme-neo-brutal .sejoli-panel-auth__brand-link,
body.sejoli-panel--theme-neo-brutal .sejoli-panel-auth .sejoli-panel-password__toggle,
body.sejoli-panel--theme-neo-brutal .sejoli-panel-auth .sejoli-panel-submit {
    backdrop-filter: none;
}

body.sejoli-panel--theme-neo-brutal .sejoli-panel-auth__card,
body.sejoli-panel--theme-neo-brutal .sejoli-panel-auth__brand-link,
body.sejoli-panel--theme-neo-brutal .sejoli-panel-auth .sejoli-panel-password__toggle,
body.sejoli-panel--theme-neo-brutal .sejoli-panel-auth .sejoli-panel-submit {
    border-width: 2px;
}

body.sejoli-panel--theme-neo-brutal .sejoli-panel-auth .sejoli-panel-password__toggle:hover,
body.sejoli-panel--theme-neo-brutal .sejoli-panel-auth .sejoli-panel-submit:hover {
    transform: translate(-1px, -1px);
}

body.sejoli-panel--theme-vault .sejoli-panel-auth__card {
    border-top: 4px solid var(--sejoli-panel-primary);
}

body.sejoli-panel--theme-graphite .sejoli-panel-auth__card,
body.sejoli-panel--theme-graphite .sejoli-panel-auth__brand-link,
body.sejoli-panel--theme-graphite .sejoli-panel-auth .sejoli-panel-auth-form input,
body.sejoli-panel--theme-graphite .sejoli-panel-auth .sejoli-panel-password__toggle,
body.sejoli-panel--theme-graphite .sejoli-panel-auth .sejoli-panel-submit,
body.sejoli-panel--theme-graphite .sejoli-panel-auth .sejoli-panel-alert {
    border-radius: 0 !important;
    backdrop-filter: none;
}

body.sejoli-panel--theme-graphite .sejoli-panel-auth__brand-mark {
    border-radius: 0;
}

body.sejoli-panel--theme-midnight .sejoli-panel-auth__card {
    box-shadow: var(--sejoli-panel-auth-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.sejoli-panel--theme-midnight .sejoli-panel-auth__brand-link {
    box-shadow: var(--sejoli-panel-auth-brand-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.sejoli-panel--theme-midnight .sejoli-panel-auth .sejoli-panel-auth-form input,
body.sejoli-panel--theme-midnight .sejoli-panel-auth .sejoli-panel-password__toggle {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

@media (max-width: 720px) {
    .sejoli-panel-auth-form__grid {
        grid-template-columns: 1fr;
    }

    .sejoli-panel-auth-form__field--full {
        grid-column: auto;
    }
}

@media (max-width: 980px) {
    .sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"],
    .sejoli-panel-auth__wrap[data-sejoli-auth-shell="visual-split"] {
        width: min(100%, var(--sejoli-panel-auth-register-width));
        grid-template-columns: 1fr;
    }

    .sejoli-panel-auth__wrap[data-sejoli-auth-shell="visual-split"] {
        grid-template-areas:
            "main"
            "media";
    }

    .sejoli-panel-auth__wrap[data-sejoli-auth-shell="portal-split"] .sejoli-panel-auth__aside,
    .sejoli-panel-auth__wrap[data-sejoli-auth-shell="visual-split"] .sejoli-panel-auth__media {
        min-height: clamp(14rem, 42vw, 24rem);
    }
}

@media (max-width: 640px) {
    .sejoli-panel-auth {
        padding: 1rem;
    }

    .sejoli-panel-auth__brand {
        justify-self: stretch;
    }

    .sejoli-panel-auth__brand-link {
        width: 100%;
    }

    .sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="text-only"] .sejoli-panel-auth__brand,
    .sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="member-area-only"] .sejoli-panel-auth__brand {
        width: 100%;
    }

    .sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="text-only"] .sejoli-panel-auth__brand-link,
    .sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="member-area-only"] .sejoli-panel-auth__brand-link {
        width: 100%;
        padding: 0.7rem 0.9rem;
        justify-content: flex-start;
    }

    .sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="member-area-only"] .sejoli-panel-auth__brand-link {
        min-width: 0;
    }

    .sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="member-area-only"] .sejoli-panel-auth__brand-copy {
        justify-items: start;
        text-align: left;
    }

    .sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="logo-only"] .sejoli-panel-auth__brand {
        width: auto;
    }

    .sejoli-panel-auth__wrap[data-sejoli-auth-brand-layout="logo-only"] .sejoli-panel-auth__brand-link {
        width: auto;
        padding: 0.65rem;
    }

    .sejoli-panel-auth__aside,
    .sejoli-panel-auth__media {
        min-height: 13rem;
    }

    .sejoli-panel-auth__media-copy {
        align-content: end;
        padding: 1.15rem;
    }

    .sejoli-panel-password {
        grid-template-columns: 1fr;
    }

    .sejoli-panel-auth .sejoli-panel-password__toggle {
        width: 100%;
    }

    .sejoli-panel-auth-form--register .sejoli-panel-auth-form__password-pair {
        grid-template-columns: 1fr;
    }

    .sejoli-panel-auth-form--register .sejoli-panel-password {
        grid-template-columns: 1fr;
    }
}

.sejoli-panel-auth-form input,
.sejoli-panel-auth-form select,
.sejoli-panel-affiliate-result input,
.sejoli-panel-search input,
.sejoli-panel-auth-form textarea,
.sejoli-panel-content select.ui.dropdown,
.sejoli-panel-content select.select2-filled {
    background: var(--sejoli-panel-input-bg);
    color: var(--sejoli-panel-text);
    border-color: var(--sejoli-panel-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.sejoli-panel-auth-form input::placeholder,
.sejoli-panel-affiliate-result input::placeholder,
.sejoli-panel-search input::placeholder,
.sejoli-panel-auth-form textarea::placeholder {
    color: var(--sejoli-panel-muted);
    opacity: 1;
}

.sejoli-panel-password button {
    min-height: 2.5rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--sejoli-panel-border);
    border-radius: 0.375rem;
    background: var(--sejoli-panel-elevated-surface);
    color: var(--sejoli-panel-text);
    cursor: pointer;
    transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sejoli-panel-password button:hover {
    transform: translateY(-1px);
    border-color: var(--sejoli-panel-primary);
}

.sejoli-panel-auth-form input:focus,
.sejoli-panel-auth-form select:focus,
.sejoli-panel-auth-form textarea:focus,
.sejoli-panel-affiliate-result input:focus,
.sejoli-panel-search input:focus,
.sejoli-panel-submit:focus-visible,
.sejoli-panel-inline-link:focus-visible,
.sejoli-panel-auth-links a:focus-visible,
.sejoli-panel-badge--action:focus-visible,
.sejoli-panel-filter__item:focus-visible,
.sejoli-panel-password button:focus-visible,
.sejoli-panel-topbar__action:focus-visible,
.sejoli-panel-sidebar a:focus-visible,
.select2-container--default .select2-selection--single:focus-visible,
.select2-search__field:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--sejoli-panel-focus-ring);
    border-color: var(--sejoli-panel-primary);
}

.sejoli-panel-filter__item:focus-visible {
    box-shadow: 0 0 0 3px var(--sejoli-panel-focus-ring), inset 0 0 0 1px var(--sejoli-panel-border);
}

.sejoli-panel-filter__item.is-active:focus-visible {
    box-shadow: 0 0 0 3px var(--sejoli-panel-focus-ring), inset 0 0 0 1px var(--sejoli-panel-chip-active);
}

body.sejoli-panel--theme-neo-brutal .sejoli-panel-filter__item:focus-visible {
    box-shadow: 0 0 0 3px var(--sejoli-panel-focus-ring), inset 0 0 0 2px var(--sejoli-panel-border);
}

body.sejoli-panel--theme-neo-brutal .sejoli-panel-filter__item.is-active:focus-visible {
    box-shadow: 0 0 0 3px var(--sejoli-panel-focus-ring), inset 0 0 0 2px var(--sejoli-panel-chip-active);
}

.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 2.5rem;
    border-radius: 0.375rem;
    border: 1px solid var(--sejoli-panel-border);
    background: var(--sejoli-panel-input-bg);
    color: var(--sejoli-panel-text);
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--sejoli-panel-text);
    line-height: 2.4rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.5rem;
}

.select2-dropdown {
    border: 1px solid var(--sejoli-panel-border);
    background: var(--sejoli-panel-surface);
    color: var(--sejoli-panel-text);
    box-shadow: var(--sejoli-panel-shadow);
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--sejoli-panel-border);
    background: var(--sejoli-panel-input-bg);
    color: var(--sejoli-panel-text);
}

.select2-results__option {
    color: var(--sejoli-panel-text);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--sejoli-panel-chip-active);
    color: var(--sejoli-panel-chip-active-text);
}

body.sejoli-panel .sejoli-panel-content .ui.header,
body.sejoli-panel .sejoli-panel-content .ui.header .sub.header,
body.sejoli-panel .sejoli-panel-content .ui.list > .item,
body.sejoli-panel .sejoli-panel-content .ui.list > .item .header,
body.sejoli-panel .sejoli-panel-content .ui.selection.dropdown,
body.sejoli-panel .sejoli-panel-content .ui.selection.dropdown .text,
body.sejoli-panel .sejoli-panel-content .ui.label,
body.sejoli-panel .sejoli-panel-content .ui.message,
body.sejoli-panel .sejoli-panel-content .ui.segment,
body.sejoli-panel .sejoli-panel-content .ui.table,
body.sejoli-panel .sejoli-panel-content .ui.form label,
body.sejoli-panel .sejoli-panel-content .ui.form .field > label,
body.sejoli-panel .sejoli-panel-content .ui.form input,
body.sejoli-panel .sejoli-panel-content .ui.form textarea,
body.sejoli-panel .sejoli-panel-content .ui.form select {
    color: var(--sejoli-panel-text) !important;
}

body.sejoli-panel .sejoli-panel-content .ui.selection.dropdown,
body.sejoli-panel .sejoli-panel-content .ui.message,
body.sejoli-panel .sejoli-panel-content .ui.segment,
body.sejoli-panel .sejoli-panel-content .ui.form input,
body.sejoli-panel .sejoli-panel-content .ui.form textarea,
body.sejoli-panel .sejoli-panel-content .ui.form select {
    background: var(--sejoli-panel-input-bg) !important;
    border-color: var(--sejoli-panel-border) !important;
}

body.sejoli-panel .sejoli-panel-content .ui.selection.dropdown .menu,
body.sejoli-panel .sejoli-panel-content .ui.dropdown .menu,
body.sejoli-panel .sejoli-panel-content .ui.selection.dropdown .menu > .item {
    background: var(--sejoli-panel-surface) !important;
    color: var(--sejoli-panel-text) !important;
    border-color: var(--sejoli-panel-border) !important;
}

body.sejoli-panel .sejoli-panel-content .ui.selection.dropdown .menu > .item:hover,
body.sejoli-panel .sejoli-panel-content .ui.dropdown .menu > .item:hover {
    background: var(--sejoli-panel-elevated-surface) !important;
}

body.sejoli-panel .sejoli-panel-content .ui.placeholder {
    background: transparent !important;
}

body.sejoli-panel .sejoli-panel-content .ui.placeholder .line {
    background: var(--sejoli-panel-elevated-surface) !important;
}

.sejoli-panel-dashboard {
    display: grid;
    gap: 1rem;
}

.sejoli-panel-dashboard__section {
    display: grid;
    gap: 1.25rem;
}

.sejoli-panel-dashboard__section-head {
    align-items: center;
}

.sejoli-panel-dashboard__section-note {
    max-width: 28rem;
    color: var(--sejoli-panel-muted);
    font-size: 0.875rem;
    line-height: 1.6;
}

.sejoli-panel-dashboard__kpi-grid,
.sejoli-panel-dashboard__chart-grid,
.sejoli-panel-dashboard__top-grid,
.sejoli-panel-dashboard__acquisition-grid {
    display: grid;
    gap: 1rem;
}

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

.sejoli-panel-dashboard__kpi-group {
    display: grid;
    gap: 1rem;
    padding: 1.2rem;
    border: 1px solid var(--sejoli-panel-border);
    border-radius: var(--sejoli-panel-radius-md);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
        var(--sejoli-panel-elevated-surface);
}

.sejoli-panel-dashboard__kpi-head {
    display: grid;
    gap: 0.28rem;
}

.sejoli-panel-dashboard__kpi-head p,
.sejoli-panel-dashboard__kpi-head h4,
.sejoli-panel-dashboard__kpi-head span {
    margin: 0;
}

.sejoli-panel-dashboard__kpi-head p {
    color: var(--sejoli-panel-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sejoli-panel-dashboard__kpi-head h4 {
    font-size: 1.02rem;
    font-weight: 600;
}

.sejoli-panel-dashboard__kpi-head span {
    color: var(--sejoli-panel-muted);
    font-size: 0.875rem;
    line-height: 1.55;
}

.sejoli-panel-dashboard__metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.sejoli-panel-dashboard__metric {
    display: grid;
    gap: 0.42rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--sejoli-panel-border);
    border-radius: var(--sejoli-panel-radius-sm);
    background: var(--sejoli-panel-surface);
    min-height: 5.5rem;
}

.sejoli-panel-dashboard__metric-label {
    color: var(--sejoli-panel-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sejoli-panel-dashboard__metric-value {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.3;
}

.sejoli-panel-dashboard__metric--lead {
    border-color: rgba(249, 115, 22, 0.28);
}

.sejoli-panel-dashboard__metric--sales {
    border-color: rgba(34, 197, 94, 0.24);
}

.sejoli-panel-dashboard__metric--omset {
    border-color: rgba(79, 140, 255, 0.24);
}

.sejoli-panel-dashboard__metric--commission {
    border-color: rgba(20, 184, 166, 0.24);
}

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

.sejoli-panel-dashboard__chart-card {
    display: grid;
    min-height: 0;
}

.sejoli-panel-dashboard__chart-shell {
    position: relative;
    flex: 1;
    min-height: 15rem;
}

.sejoli-panel-dashboard__chart-shell canvas {
    width: 100% !important;
    height: 100% !important;
}

.sejoli-panel-dashboard__chart-shell--pie {
    min-height: 15rem;
}

.sejoli-panel-dashboard__chart-empty {
    position: absolute;
    inset: 0;
}

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

.sejoli-panel-dashboard__rank-card {
    display: grid;
    gap: 0.9rem;
}

.sejoli-panel-dashboard__rank-list {
    display: grid;
    gap: 0.7rem;
}

.sejoli-panel-dashboard__rank-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--sejoli-panel-border);
    border-radius: var(--sejoli-panel-radius-sm);
    background: var(--sejoli-panel-elevated-surface);
}

.sejoli-panel-dashboard__rank-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    min-height: 2.1rem;
    border-radius: 999px;
    background: rgba(79, 140, 255, 0.12);
    color: var(--sejoli-panel-primary);
    font-size: 0.78rem;
    font-weight: 700;
}

.sejoli-panel-dashboard__rank-media {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    object-fit: cover;
    background: var(--sejoli-panel-surface);
}

.sejoli-panel-dashboard__rank-media--placeholder {
    display: inline-block;
    border: 1px dashed var(--sejoli-panel-border);
}

.sejoli-panel-dashboard__rank-copy {
    min-width: 0;
    display: grid;
    gap: 0.22rem;
}

.sejoli-panel-dashboard__rank-copy strong,
.sejoli-panel-dashboard__rank-copy span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sejoli-panel-dashboard__rank-copy span {
    color: var(--sejoli-panel-muted);
    font-size: 0.8rem;
}

.sejoli-panel-dashboard__rank-total {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--sejoli-panel-primary);
    text-align: right;
}

.sejoli-panel-dashboard__acquisition-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.95fr);
}

.sejoli-panel-dashboard__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--sejoli-panel-border);
    border-radius: var(--sejoli-panel-radius-sm);
    background: var(--sejoli-panel-elevated-surface);
}

.sejoli-panel-dashboard__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.sejoli-panel-dashboard__table th,
.sejoli-panel-dashboard__table td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--sejoli-panel-border);
    text-align: left;
    vertical-align: top;
}

.sejoli-panel-dashboard__table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--sejoli-panel-surface);
    color: var(--sejoli-panel-muted);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sejoli-panel-dashboard__table tbody tr:last-child td {
    border-bottom: 0;
}

.sejoli-panel-dashboard__table tbody tr:hover td {
    background: rgba(79, 140, 255, 0.05);
}

.sejoli-panel-dashboard__table td:nth-child(3),
.sejoli-panel-dashboard__table td:nth-child(4),
.sejoli-panel-dashboard__table td:nth-child(5),
.sejoli-panel-dashboard__table td:nth-child(6) {
    white-space: nowrap;
}

.sejoli-panel-dashboard__table-empty {
    display: grid;
    gap: 0.3rem;
    padding: 1rem 0;
    text-align: center;
}

.sejoli-panel-dashboard__table-empty span {
    color: var(--sejoli-panel-muted);
}

.sejoli-panel-dashboard__empty {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.35rem;
    min-height: 100%;
    padding: 1.6rem;
    border: 1px dashed var(--sejoli-panel-border);
    border-radius: var(--sejoli-panel-radius-sm);
    background:
        radial-gradient(circle at top, rgba(79, 140, 255, 0.08), rgba(79, 140, 255, 0) 55%),
        var(--sejoli-panel-elevated-surface);
    text-align: center;
}

.sejoli-panel-dashboard__empty span {
    color: var(--sejoli-panel-muted);
    line-height: 1.6;
}

.sejoli-panel-dashboard__empty--compact {
    min-height: 6.5rem;
}

.sejoli-panel-dashboard__empty--chart {
    min-height: 100%;
}

.sejoli-panel-dashboard__metric.is-loading,
.sejoli-panel-dashboard__rank-row.is-loading,
[data-panel-acquisition-rows] tr.is-loading td {
    position: relative;
    overflow: hidden;
}

.sejoli-panel-dashboard__metric.is-loading::before,
.sejoli-panel-dashboard__rank-row.is-loading::before,
[data-panel-acquisition-rows] tr.is-loading td::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-100%);
    animation: sejoli-panel-pulse 1.35s linear infinite;
}

@keyframes sejoli-panel-pulse {
    to {
        transform: translateX(100%);
    }
}

@media (max-width: 1280px) {
    .sejoli-panel-dashboard__kpi-grid,
    .sejoli-panel-dashboard__top-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1080px) {
    .sejoli-panel-dashboard__chart-grid,
    .sejoli-panel-dashboard__acquisition-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .sejoli-panel-dashboard__kpi-grid,
    .sejoli-panel-dashboard__top-grid,
    .sejoli-panel-dashboard__metric-grid {
        grid-template-columns: 1fr;
    }

    .sejoli-panel-dashboard__rank-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .sejoli-panel-dashboard__rank-total,
    .sejoli-panel-dashboard__rank-media {
        grid-column: 2;
    }

    .sejoli-panel-dashboard__rank-total {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .sejoli-panel-dashboard__section-head {
        align-items: flex-start;
    }

    .sejoli-panel-dashboard__chart-shell {
        min-height: 14rem;
    }

    .sejoli-panel-dashboard__table th,
    .sejoli-panel-dashboard__table td {
        padding: 0.78rem;
    }
}

.sejoli-panel-dashboard-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 2.4rem;
    margin-bottom: 0.4rem;
}

.sejoli-panel-dashboard-toolbar[hidden] {
    display: none !important;
}

.sejoli-panel-dashboard-toolbar__launcher {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    width: min(100%, 18rem);
    margin-inline-start: auto;
}

.sejoli-panel-dashboard-toolbar__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    padding: 0.68rem 1rem;
    border: 1px solid var(--sejoli-panel-border);
    border-radius: 999px;
    background: var(--sejoli-panel-surface);
    color: var(--sejoli-panel-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.sejoli-panel-dashboard-toolbar__button:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: var(--sejoli-panel-primary);
}

.sejoli-panel-dashboard-toolbar__button:disabled {
    opacity: 0.6;
    cursor: wait;
}

.sejoli-panel-dashboard-toolbar__button--primary {
    border-color: var(--sejoli-panel-primary);
    background: var(--sejoli-panel-primary);
    color: #ffffff;
}

.sejoli-panel-dashboard-toolbar__button--ghost {
    background: transparent;
}

.sejoli-panel-dashboard-toolbar__button--launcher {
    width: 2.85rem;
    min-width: 2.85rem;
    min-height: 2.85rem;
    padding: 0;
    border-color: color-mix(in srgb, var(--sejoli-panel-border) 82%, var(--sejoli-panel-primary) 18%);
    background: color-mix(in srgb, var(--sejoli-panel-surface) 76%, var(--sejoli-panel-accent-soft) 24%);
    color: color-mix(in srgb, var(--sejoli-panel-text) 45%, var(--sejoli-panel-primary) 55%);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.sejoli-panel-dashboard-toolbar__button--launcher:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--sejoli-panel-primary) 45%, var(--sejoli-panel-border));
    background: color-mix(in srgb, var(--sejoli-panel-surface) 62%, var(--sejoli-panel-accent-soft) 38%);
}

.sejoli-panel-dashboard-toolbar__button--launcher svg {
    width: 1.05rem;
    height: 1.05rem;
}

.sejoli-panel-dashboard-toolbar__button-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sejoli-panel-dashboard-toolbar__status {
    min-height: 1rem;
    max-width: 14rem;
    text-align: right;
    color: var(--sejoli-panel-muted);
    font-size: 0.78rem;
    line-height: 1.45;
    letter-spacing: 0.01em;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.sejoli-panel-dashboard-toolbar__status.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.sejoli-panel-dashboard-toolbar__status.is-error {
    color: var(--sejoli-panel-danger);
}

body.sejoli-panel-dashboard-drawer-open {
    overflow: hidden;
}

.sejoli-panel-dashboard-drawer-backdrop {
    --sejoli-panel-drawer-enter-duration: 320ms;
    --sejoli-panel-drawer-exit-duration: 240ms;
    --sejoli-panel-drawer-enter-ease: cubic-bezier(0, 0, 0.2, 1);
    --sejoli-panel-drawer-exit-ease: cubic-bezier(0.4, 0, 1, 1);
    position: fixed;
    inset: 0;
    z-index: 9997;
    background: rgba(15, 23, 42, 0.32);
    opacity: 0;
    will-change: opacity;
    transition: opacity var(--sejoli-panel-drawer-enter-duration) var(--sejoli-panel-drawer-enter-ease);
}

.sejoli-panel-dashboard-drawer-backdrop.is-visible {
    opacity: 1;
}

.sejoli-panel-dashboard-drawer-backdrop.is-closing {
    transition-duration: var(--sejoli-panel-drawer-exit-duration);
    transition-timing-function: var(--sejoli-panel-drawer-exit-ease);
}

.sejoli-panel-dashboard-drawer {
    --sejoli-panel-drawer-enter-duration: 320ms;
    --sejoli-panel-drawer-exit-duration: 240ms;
    --sejoli-panel-drawer-enter-ease: cubic-bezier(0, 0, 0.2, 1);
    --sejoli-panel-drawer-exit-ease: cubic-bezier(0.4, 0, 1, 1);
    --sejoli-panel-drawer-offset: 1.1rem;
    position: fixed;
    top: max(1rem, calc(var(--sejoli-panel-admin-bar-height, 0px) + 1rem));
    right: 1rem;
    bottom: 1rem;
    z-index: 9998;
    width: min(28rem, calc(100vw - 2rem));
    pointer-events: none;
}

.sejoli-panel-dashboard-drawer.is-opening,
.sejoli-panel-dashboard-drawer.is-open {
    pointer-events: auto;
}

.sejoli-panel-dashboard-drawer.is-closing {
    pointer-events: auto;
}

@media (min-width: 1025px) {
    body.sejoli-panel-layout-top .sejoli-panel-dashboard-drawer-backdrop {
        top: calc(var(--sejoli-panel-admin-bar-height, 0px) + var(--sejoli-panel-top-nav-height, 0px));
    }

    body.sejoli-panel-layout-top .sejoli-panel-dashboard-drawer {
        top: calc(var(--sejoli-panel-admin-bar-height, 0px) + var(--sejoli-panel-top-nav-height, 0px) + 1rem);
    }
}

.sejoli-panel-dashboard-drawer__panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--sejoli-panel-border);
    border-radius: clamp(1rem, 2vw, 1.4rem);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--sejoli-panel-accent-soft) 42%, transparent), transparent 18%),
        var(--sejoli-panel-surface);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    transform: translate3d(var(--sejoli-panel-drawer-offset), 0, 0);
    opacity: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transition-property: transform, opacity;
    transition-duration: var(--sejoli-panel-drawer-enter-duration), var(--sejoli-panel-drawer-enter-duration);
    transition-timing-function: var(--sejoli-panel-drawer-enter-ease), var(--sejoli-panel-drawer-enter-ease);
}

.sejoli-panel-dashboard-drawer.is-opening .sejoli-panel-dashboard-drawer__panel,
.sejoli-panel-dashboard-drawer.is-open .sejoli-panel-dashboard-drawer__panel {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.sejoli-panel-dashboard-drawer__header,
.sejoli-panel-dashboard-drawer__body,
.sejoli-panel-dashboard-drawer__footer {
    opacity: 1;
    transform: none;
    transition: none;
}

.sejoli-panel-dashboard-drawer.is-closing .sejoli-panel-dashboard-drawer__panel {
    transition-duration: var(--sejoli-panel-drawer-exit-duration), var(--sejoli-panel-drawer-exit-duration);
    transition-timing-function: var(--sejoli-panel-drawer-exit-ease), var(--sejoli-panel-drawer-exit-ease);
}

.sejoli-panel-dashboard-drawer__header,
.sejoli-panel-dashboard-drawer__footer {
    padding: 1.2rem 1.2rem 1rem;
}

.sejoli-panel-dashboard-drawer__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--sejoli-panel-border) 78%, transparent);
}

.sejoli-panel-dashboard-drawer__copy {
    display: grid;
    gap: 0.35rem;
}

.sejoli-panel-dashboard-drawer__copy p,
.sejoli-panel-dashboard-drawer__copy h3,
.sejoli-panel-dashboard-drawer__copy span {
    margin: 0;
}

.sejoli-panel-dashboard-drawer__copy p {
    color: var(--sejoli-panel-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.sejoli-panel-dashboard-drawer__copy h3 {
    font-size: 1.12rem;
    line-height: 1.35;
}

.sejoli-panel-dashboard-drawer__copy span {
    color: var(--sejoli-panel-muted);
    line-height: 1.6;
}

.sejoli-panel-dashboard-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--sejoli-panel-border);
    border-radius: 999px;
    background: var(--sejoli-panel-surface);
    color: var(--sejoli-panel-text);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.sejoli-panel-dashboard-drawer__close:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: var(--sejoli-panel-primary);
}

.sejoli-panel-dashboard-drawer__body {
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding: 1.1rem 1.2rem 1rem;
}

.sejoli-panel-dashboard-drawer__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
    border-top: 1px solid color-mix(in srgb, var(--sejoli-panel-border) 78%, transparent);
    background: color-mix(in srgb, var(--sejoli-panel-surface) 92%, var(--sejoli-panel-accent-soft));
}

.sejoli-panel-dashboard-toolbar__manager {
    display: grid;
    gap: 0.9rem;
}

.sejoli-panel-dashboard-toolbar__manager-head {
    display: grid;
    gap: 0.25rem;
}

.sejoli-panel-dashboard-toolbar__manager-head span {
    color: var(--sejoli-panel-muted);
    line-height: 1.55;
}

.sejoli-panel-dashboard-toolbar__manager-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.sejoli-panel-dashboard-toolbar__toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--sejoli-panel-border);
    border-radius: var(--sejoli-panel-radius-md);
    background: color-mix(in srgb, var(--sejoli-panel-surface-strong) 74%, var(--sejoli-panel-surface));
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.sejoli-panel-dashboard-toolbar__toggle:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--sejoli-panel-primary) 35%, var(--sejoli-panel-border));
    background: color-mix(in srgb, var(--sejoli-panel-accent-soft) 42%, var(--sejoli-panel-surface));
}

.sejoli-panel-dashboard-toolbar__toggle input {
    margin-top: 0.2rem;
}

.sejoli-panel-dashboard-toolbar__toggle-copy {
    display: grid;
    gap: 0.15rem;
}

.sejoli-panel-dashboard-toolbar__toggle-copy small {
    color: var(--sejoli-panel-muted);
    line-height: 1.5;
}

.sejoli-panel-dashboard__canvas {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.sejoli-panel-dashboard-widget {
    display: grid;
    gap: 0;
    min-width: 0;
}

.sejoli-panel-dashboard-widget[hidden] {
    display: none !important;
}

.sejoli-panel-dashboard.is-editing .sejoli-panel-dashboard-widget[hidden] {
    display: grid !important;
}

.sejoli-panel-dashboard-widget--span-full {
    grid-column: span 12;
}

.sejoli-panel-dashboard-widget--span-half {
    grid-column: span 6;
}

.sejoli-panel-dashboard-widget--span-third {
    grid-column: span 4;
}

.sejoli-panel-dashboard-widget--span-wide {
    grid-column: span 8;
}

.sejoli-panel-dashboard-widget--span-narrow {
    grid-column: span 4;
}

.sejoli-panel-dashboard-widget__chrome {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px dashed transparent;
    border-radius: var(--sejoli-panel-radius-md);
    background: var(--sejoli-panel-surface);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.sejoli-panel-dashboard.is-editing .sejoli-panel-dashboard-widget {
    gap: 0.7rem;
}

.sejoli-panel-dashboard.is-editing .sejoli-panel-dashboard-widget__chrome {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    border-color: var(--sejoli-panel-border);
}

.sejoli-panel-dashboard-widget__chrome-copy {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.sejoli-panel-dashboard-widget__chrome-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sejoli-panel-dashboard-widget__handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    min-height: 2.2rem;
    border: 1px dashed var(--sejoli-panel-border);
    border-radius: 0.85rem;
    background: var(--sejoli-panel-surface);
    color: var(--sejoli-panel-muted);
    cursor: grab;
    user-select: none;
    letter-spacing: 0.2em;
}

.sejoli-panel-dashboard-widget__handle:focus {
    outline: 2px solid var(--sejoli-panel-primary);
    outline-offset: 2px;
}

.sejoli-panel-dashboard-widget__chrome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.sejoli-panel-dashboard-widget__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--sejoli-panel-border);
    border-radius: 999px;
    background: var(--sejoli-panel-surface);
    color: var(--sejoli-panel-text);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}

.sejoli-panel-dashboard-widget__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sejoli-panel-dashboard-widget__body > .sejoli-panel-card,
.sejoli-panel-dashboard-widget__body > .sejoli-panel-hero,
.sejoli-panel-dashboard-widget__body > section {
    flex: 1;
}

.sejoli-panel-dashboard.is-editing .sejoli-panel-dashboard-widget.is-hidden-widget {
    opacity: 0.72;
}

.sejoli-panel-dashboard.is-editing .sejoli-panel-dashboard-widget.is-hidden-widget .sejoli-panel-dashboard-widget__body {
    filter: saturate(0.7);
}

.sejoli-panel-dashboard-widget--ghost {
    opacity: 0.4;
}

.sejoli-panel-dashboard-widget--chosen .sejoli-panel-dashboard-widget__chrome,
.sejoli-panel-dashboard-widget--dragging .sejoli-panel-dashboard-widget__chrome {
    border-color: var(--sejoli-panel-primary);
    background: var(--sejoli-panel-accent-soft);
}

@media (max-width: 1080px) {
    .sejoli-panel-dashboard-widget--span-half,
    .sejoli-panel-dashboard-widget--span-wide,
    .sejoli-panel-dashboard-widget--span-narrow {
        grid-column: span 12;
    }
}

@media (max-width: 900px) {
    .sejoli-panel-dashboard-widget--span-third {
        grid-column: span 6;
    }

    .sejoli-panel-dashboard-toolbar__manager-grid,
    .sejoli-panel-dashboard-drawer__footer {
        grid-template-columns: 1fr;
    }

    .sejoli-panel-dashboard-drawer__footer {
        display: grid;
    }
}

@media (max-width: 720px) {
    .sejoli-panel-dashboard-widget--span-third {
        grid-column: span 12;
    }

    .sejoli-panel-dashboard-toolbar__launcher {
        width: 100%;
    }

    .sejoli-panel-dashboard-toolbar__status {
        width: 100%;
        max-width: none;
    }

    .sejoli-panel-dashboard-drawer {
        --sejoli-panel-drawer-offset: 0.95rem;
        top: var(--sejoli-panel-admin-bar-height, 0px);
        right: 0;
        bottom: 0;
        width: 100vw;
    }

    .sejoli-panel-dashboard-drawer__panel {
        border-radius: 1.4rem 1.4rem 0 0;
        transform: translate3d(0, var(--sejoli-panel-drawer-offset), 0);
    }

    .sejoli-panel-dashboard-drawer__header,
    .sejoli-panel-dashboard-drawer__body,
    .sejoli-panel-dashboard-drawer__footer,
    .sejoli-panel-dashboard-widget__chrome {
        padding: 0.95rem;
    }

    .sejoli-panel-dashboard-widget__chrome {
        flex-direction: column;
        align-items: stretch;
    }

    .sejoli-panel-dashboard-widget__chrome-actions {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sejoli-panel-dashboard-toolbar__status,
    .sejoli-panel-dashboard-drawer-backdrop,
    .sejoli-panel-dashboard-drawer__panel,
    .sejoli-panel-dashboard-drawer__close {
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        animation-duration: 0.01ms !important;
    }

    .sejoli-panel-dashboard-drawer__panel {
        transform: none;
    }
}

/* -------------------------------------------------------------------------- */
/* Modern Panel Header Updates                                                */
/* -------------------------------------------------------------------------- */
/* Note: .sejoli-panel-sidebar__brand-link core layout is defined earlier */
.sejoli-panel-sidebar__brand-link {
    padding: 0.25rem 0;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sejoli-panel-sidebar__brand-link:hover {
    opacity: 0.9;
}

.sejoli-panel-sidebar__logo {
    max-height: 48px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.sejoli-panel-brand-fallback {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--sejoli-panel-primary, #10b981), color-mix(in srgb, var(--sejoli-panel-primary, #10b981) 72%, #000 28%));
    color: var(--sejoli-panel-primary-text, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow:
        0 4px 6px -1px color-mix(in srgb, var(--sejoli-panel-primary, #10b981) 20%, transparent),
        0 2px 4px -1px color-mix(in srgb, var(--sejoli-panel-primary, #10b981) 12%, transparent);
}

.sejoli-panel-sidebar__brand-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
    overflow: hidden;
}

body.sejoli-panel-brand-label-hidden .sejoli-panel-sidebar__brand-copy {
    display: none;
}

body.sejoli-panel-brand-label-hidden .sejoli-panel-sidebar__brand-link {
    gap: 0;
}

body.sejoli-panel-brand-label-hidden:not(.sejoli-panel-layout-top) .sejoli-panel-sidebar__header {
    align-items: center;
    margin-bottom: 0.65rem;
}

body.sejoli-panel-brand-label-hidden:not(.sejoli-panel-layout-top) .sejoli-panel-sidebar__brand {
    display: flex;
    align-items: center;
}

body.sejoli-panel-brand-label-hidden:not(.sejoli-panel-layout-top) .sejoli-panel-sidebar__brand-link {
    padding: 0.125rem 0;
}

/* ----------------------------------
   User Profile Dropdown Menu
----------------------------------- */
.sejoli-panel-user-wrap {
    position: relative;
    z-index: 2;
}

.sejoli-panel-user-menu {
    position: absolute;
    bottom: 100%;
    right: 0;
    min-width: 196px;
    max-width: min(240px, calc(100vw - 2rem));
    max-height: min(20rem, calc(100dvh - 2rem));
    overflow-y: auto;
    background: var(--sejoli-panel-surface);
    border: 1px solid var(--sejoli-panel-border);
    border-radius: var(--sejoli-panel-radius-md);
    box-shadow: var(--sejoli-panel-shadow);
    padding: 0.375rem;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.98);
    transform-origin: bottom right;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0;
    list-style: none;
}

.sejoli-panel-user-menu__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sejoli-panel-user-menu__item--logout {
    margin-top: 0.125rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--sejoli-panel-border);
}

.sejoli-panel-user-wrap.is-open > .sejoli-panel-user,
.sejoli-panel-user-wrap:hover > .sejoli-panel-user,
.sejoli-panel-user-wrap:focus-within > .sejoli-panel-user {
    background: var(--sejoli-panel-sidebar-active);
}

.sejoli-panel-user-wrap.is-open .sejoli-panel-user-menu,
.sejoli-panel-user-wrap:hover .sejoli-panel-user-menu,
.sejoli-panel-user-wrap:focus-within .sejoli-panel-user-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
}

.sejoli-panel-user-menu__link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: var(--sejoli-panel-radius-sm);
    color: var(--sejoli-panel-text);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
}

.sejoli-panel-user-menu__link:hover {
    background: var(--sejoli-panel-sidebar-active);
    color: var(--sejoli-panel-accent);
}

.sejoli-panel-user-menu__link .dashicons {
    font-size: 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--sejoli-panel-sidebar-muted);
    transition: inherit;
}

.sejoli-panel-user-menu__link:hover .dashicons {
    color: var(--sejoli-panel-accent);
}

.sejoli-panel-user-menu__link--admin .dashicons {
    color: var(--sejoli-panel-accent);
}

.sejoli-panel-user-menu__link.text-danger {
    color: var(--sejoli-panel-danger);
}

.sejoli-panel-user-menu__link.text-danger .dashicons {
    color: var(--sejoli-panel-danger);
}

.sejoli-panel-user-menu__link.text-danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

@media (min-width: 1025px) {
    body.sejoli-panel-layout-top .sejoli-panel-user-wrap {
        display: flex;
        align-items: center;
        padding-bottom: 0.55rem;
        margin-bottom: -0.55rem;
    }

    body.sejoli-panel-layout-top .sejoli-panel-user-menu {
        top: 100%;
        bottom: auto;
        right: 0;
        left: auto;
        max-height: min(20rem, calc(100vh - 5rem));
        margin-top: 0;
        transform: translateY(0.3rem) scale(0.98);
        transform-origin: top right;
    }

    body.sejoli-panel-layout-top .sejoli-panel-user-wrap.is-open .sejoli-panel-user-menu,
    body.sejoli-panel-layout-top .sejoli-panel-user-wrap:hover .sejoli-panel-user-menu,
    body.sejoli-panel-layout-top .sejoli-panel-user-wrap:focus-within .sejoli-panel-user-menu {
        transform: translateY(0) scale(1);
    }
}

@media (min-width: 921px) {
    body.sejoli-panel-sidebar-collapsed:not(.sejoli-panel-layout-top) .sejoli-panel-user-menu {
        top: 50%;
        bottom: auto;
        left: 100%;
        right: auto;
        max-height: min(20rem, calc(100vh - 2rem));
        transform: translateY(-50%) scale(0.98);
        transform-origin: left center;
    }

    body.sejoli-panel-sidebar-collapsed:not(.sejoli-panel-layout-top) .sejoli-panel-user-wrap.is-open .sejoli-panel-user-menu,
    body.sejoli-panel-sidebar-collapsed:not(.sejoli-panel-layout-top) .sejoli-panel-user-wrap:hover .sejoli-panel-user-menu,
    body.sejoli-panel-sidebar-collapsed:not(.sejoli-panel-layout-top) .sejoli-panel-user-wrap:focus-within .sejoli-panel-user-menu {
        transform: translateY(-50%) scale(1);
    }
}

/* Hide Redundant Topbar Card on Top Nav Desktop */
@media (min-width: 921px) {
    body.sejoli-panel-layout-top .sejoli-panel-topbar {
        display: none !important;
    }
}

.sejoli-panel-sidebar__brand-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--sejoli-panel-text-primary, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.sejoli-panel-sidebar__brand-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--sejoli-panel-text-muted, #6b7280);
    white-space: nowrap;
}

.sejoli-panel-sidebar__brand-theme {
    background-color: var(--sejoli-panel-surface-alt, #f3f4f6);
    padding: 2px 6px;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sejoli-panel-text-secondary, #4b5563);
}


@media (min-width: 921px) {
    /* Show the uploaded logo nicely when collapsed instead of hiding it */
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-sidebar__logo {
        display: block !important;
        max-width: 100% !important;
        max-height: 36px !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }
    
    /* Ensure the fallback initial stays visible but neatly centered */
    body.sejoli-panel-sidebar-collapsed .sejoli-panel-brand-fallback {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.25rem !important;
        margin: 0 auto !important;
    }
}

@media (min-width: 1025px) {
    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-sidebar {
        padding: 0.75rem max(2rem, calc((100vw - 1440px) / 2));
        overflow: visible !important;
    }

    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-sidebar__header {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: auto;
        margin-bottom: 0;
    }

    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-sidebar__brand {
        width: auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-sidebar__brand-link {
        width: auto;
        justify-content: flex-start;
        align-items: center;
        flex-direction: row;
    }

    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed:not(.sejoli-panel-brand-label-hidden) .sejoli-panel-sidebar__brand-copy {
        display: flex !important;
    }

    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-sidebar__logo {
        max-width: 160px !important;
        max-height: 48px !important;
        margin: 0 !important;
    }

    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-brand-fallback {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.5rem !important;
        margin: 0 !important;
    }

    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-sidebar__nav-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0 clamp(0.15rem, 0.55vw, 0.5rem) 0 clamp(0.25rem, 0.7vw, 0.65rem);
        overflow: visible;
    }

    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed.sejoli-panel-brand-label-hidden .sejoli-panel-sidebar__nav-wrap {
        justify-content: flex-start;
        padding-left: clamp(0.1rem, 0.3vw, 0.3rem);
        padding-right: 0;
    }

    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-nav,
    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu {
        width: max-content;
        min-width: max-content;
        gap: 0.35rem;
        align-items: center;
        overflow: visible;
        justify-content: flex-start;
        margin: 0;
    }

    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__group,
    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu {
        width: auto;
        min-width: max-content;
        flex: 0 0 auto;
        align-items: stretch;
        overflow: visible;
    }

    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__link,
    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu > a.item,
    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu > a.item {
        display: flex;
        place-items: initial;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0.5rem 0.8rem;
        gap: 0.45rem !important;
        font-size: 0.875rem;
        justify-content: flex-start;
        border-radius: var(--sejoli-panel-radius-md);
    }

    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__link > span,
    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__sublink > span,
    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu a.item .sejoli-panel-nav__label,
    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu a.item > span:not(.sejoli-panel-nav__icon) {
        display: inline-flex !important;
        align-items: center;
    }

    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__link[data-sejoli-tooltip]::after,
    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu > a.item[data-sejoli-tooltip]::after,
    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu > a.item[data-sejoli-tooltip]::after,
    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-nav__link[data-sejoli-tooltip]::before,
    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu > a.item[data-sejoli-tooltip]::before,
    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-nav--wp-menu .master-menu > a.item[data-sejoli-tooltip]::before {
        content: none !important;
        display: none !important;
    }

    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-sidebar__footer {
        width: max-content;
        padding: 0;
        margin-top: 0;
    }

    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-user {
        width: auto;
        margin: 0;
        padding: 0.4rem 0.6rem;
        justify-content: center;
    }

    body.sejoli-panel-layout-top.sejoli-panel-sidebar-collapsed .sejoli-panel-user__info {
        display: flex !important;
    }
}

/* ----------------------------------
   Home Dashboard: Compact Top Area
----------------------------------- */

body.sejoli-panel--view-home .sejoli-panel-content__inner {
    margin-top: 0.35rem;
    gap: 0.45rem;
}

body.sejoli-panel--view-home .sejoli-panel-topbar {
    padding: 0.75rem 2rem;
    margin-bottom: 0.5rem;
}

body.sejoli-panel--view-home .sejoli-panel-dashboard-shell {
    position: relative;
}

body.sejoli-panel--view-home {
    --sejoli-panel-home-gap: clamp(0.8rem, 1.4vw, 1rem);
    --sejoli-panel-home-card-padding: clamp(1.05rem, 2vw, 1.3rem);
    --sejoli-panel-home-block-padding: clamp(1.3rem, 2.4vw, 1.65rem);
}

body.sejoli-panel--view-home .sejoli-panel-dashboard__canvas {
    gap: var(--sejoli-panel-home-gap);
    align-items: start;
}

body.sejoli-panel--view-home .sejoli-panel-hero {
    gap: clamp(0.95rem, 2vw, 1.25rem);
    padding: clamp(1.25rem, 2.2vw, 1.55rem) clamp(1.3rem, 2.8vw, 1.85rem);
    align-items: center;
}

body.sejoli-panel--view-home .sejoli-panel-hero > div {
    display: grid;
    gap: 0.5rem;
}

body.sejoli-panel--view-home .sejoli-panel-hero__eyebrow {
    margin-bottom: 0;
}

body.sejoli-panel--view-home .sejoli-panel-hero p {
    margin-top: 0.45rem;
    line-height: 1.55;
}

body.sejoli-panel--view-home .sejoli-panel-hero h2 {
    line-height: 1.18;
}

body.sejoli-panel--view-home .sejoli-panel-badge {
    min-width: 164px;
    padding: 0.7rem 0.95rem;
}

body.sejoli-panel--view-home .sejoli-panel-stats,
body.sejoli-panel--view-home .sejoli-panel-grid,
body.sejoli-panel--view-home .sejoli-panel-dashboard__section,
body.sejoli-panel--view-home .sejoli-panel-dashboard__kpi-grid,
body.sejoli-panel--view-home .sejoli-panel-dashboard__chart-grid,
body.sejoli-panel--view-home .sejoli-panel-dashboard__top-grid,
body.sejoli-panel--view-home .sejoli-panel-dashboard__acquisition-grid {
    gap: var(--sejoli-panel-home-gap);
}

body.sejoli-panel--view-home .sejoli-panel-stat {
    padding: 1rem 1.1rem;
}

body.sejoli-panel--view-home .sejoli-panel-stat strong {
    margin-top: 0.3rem;
    line-height: 1.2;
}

body.sejoli-panel--view-home .sejoli-panel-card {
    padding: var(--sejoli-panel-home-card-padding);
}

body.sejoli-panel--view-home .sejoli-panel-card__head {
    gap: 0.75rem;
    margin-bottom: 0.8rem;
}

body.sejoli-panel--view-home .sejoli-panel-card__head h3 {
    font-size: 1.05rem;
    line-height: 1.35;
}

body.sejoli-panel--view-home .sejoli-panel-action-list,
body.sejoli-panel--view-home .sejoli-panel-list {
    gap: 0.75rem;
}

body.sejoli-panel--view-home .sejoli-panel-action,
body.sejoli-panel--view-home .sejoli-panel-list__item {
    padding: 0.85rem 0.95rem;
    border-color: color-mix(in srgb, var(--sejoli-panel-border) 88%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sejoli-panel-border) 78%, transparent);
    background: var(--sejoli-panel-elevated-surface);
}

body.sejoli-panel--view-home .sejoli-panel-empty {
    gap: 0.4rem;
    padding: 1.2rem;
}

body.sejoli-panel--view-home .sejoli-panel-dual-stat {
    gap: 0.7rem;
}

body.sejoli-panel--view-home .sejoli-panel-dual-stat > div {
    padding: 0.85rem 0.9rem;
}

body.sejoli-panel--view-home .sejoli-panel-dual-stat strong {
    margin-top: 0.3rem;
    line-height: 1.2;
}

body.sejoli-panel--view-home .sejoli-panel-dashboard__kpi-group {
    gap: 0.85rem;
    padding: 1rem;
}

body.sejoli-panel--view-home .sejoli-panel-dashboard__metric-grid {
    gap: 0.7rem;
}

body.sejoli-panel--view-home .sejoli-panel-dashboard__metric {
    min-height: 5rem;
    padding: 0.85rem 0.9rem;
}

body.sejoli-panel--view-home .sejoli-panel-dashboard__chart-shell {
    min-height: 13rem;
}

body.sejoli-panel--view-home .sejoli-panel-dashboard__chart-shell--pie {
    min-height: 14rem;
}

body.sejoli-panel--view-home .sejoli-panel-dashboard__rank-card {
    gap: 0.75rem;
}

body.sejoli-panel--view-home .sejoli-panel-dashboard__rank-list {
    gap: 0.55rem;
}

body.sejoli-panel--view-home .sejoli-panel-dashboard__rank-row {
    gap: 0.65rem;
    padding: 0.72rem 0.82rem;
}

body.sejoli-panel--view-home .sejoli-panel-dashboard__table th,
body.sejoli-panel--view-home .sejoli-panel-dashboard__table td {
    padding: 0.78rem 0.9rem;
}

body.sejoli-panel--view-home .sejoli-panel-dashboard__empty {
    padding: 1.2rem;
}

body.sejoli-panel--view-home .sejoli-panel-dashboard-toolbar {
    position: absolute;
    top: 0.5rem;
    right: 0;
    z-index: 2;
    min-height: 0;
    margin-bottom: 0;
}

body.sejoli-panel--view-home .sejoli-panel-dashboard-toolbar__launcher {
    width: auto;
}

body.sejoli-panel--view-home .sejoli-panel-dashboard-toolbar__status {
    display: none;
}

@media (min-width: 921px) {
    body.sejoli-panel-layout-top.sejoli-panel--view-home .sejoli-panel-content {
        padding-top: 1rem;
    }
}

@media (max-width: 920px) {
    body.sejoli-panel--view-home .sejoli-panel-content__inner {
        margin-top: 0.3rem;
        gap: 0.4rem;
    }

    body.sejoli-panel--view-home .sejoli-panel-topbar {
        margin-bottom: 0.4rem;
    }

    body.sejoli-panel--view-home .sejoli-panel-hero {
        padding-top: 1.2rem;
        padding-bottom: 1.2rem;
        padding-right: 1.15rem;
        padding-left: 1.15rem;
    }

    body.sejoli-panel--view-home .sejoli-panel-card,
    body.sejoli-panel--view-home .sejoli-panel-stat {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

@media (max-width: 640px) {
    body.sejoli-panel--view-home .sejoli-panel-dashboard__canvas,
    body.sejoli-panel--view-home .sejoli-panel-stats,
    body.sejoli-panel--view-home .sejoli-panel-grid,
    body.sejoli-panel--view-home .sejoli-panel-dashboard__metric-grid,
    body.sejoli-panel--view-home .sejoli-panel-dashboard__rank-list {
        gap: 0.7rem;
    }

    body.sejoli-panel--view-home .sejoli-panel-hero {
        gap: 0.85rem;
        padding: 1.05rem 1rem;
        align-items: stretch;
    }

    body.sejoli-panel--view-home .sejoli-panel-badge {
        width: 100%;
        min-width: 0;
    }

    body.sejoli-panel--view-home .sejoli-panel-card,
    body.sejoli-panel--view-home .sejoli-panel-empty {
        padding: 1rem;
    }

    body.sejoli-panel--view-home .sejoli-panel-stat {
        padding: 0.95rem 1rem;
    }

    body.sejoli-panel--view-home .sejoli-panel-dashboard__kpi-group,
    body.sejoli-panel--view-home .sejoli-panel-dashboard__metric,
    body.sejoli-panel--view-home .sejoli-panel-dashboard__empty {
        padding: 0.9rem;
    }
}

/* Affiliate overview — product select status */
.sejoli-panel-affiliate-status {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--sejoli-panel-text-muted, #666);
}

.sejoli-panel-affiliate-status--info {
    color: var(--sejoli-panel-text-muted, #666);
}

.sejoli-panel-affiliate-status--warn {
    color: var(--sejoli-panel-warn, #b45309);
}

.sejoli-panel-affiliate-status--error {
    color: var(--sejoli-panel-danger, #b91c1c);
}

body.sejoli-panel--view-overview .sejoli-panel-submit:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

body.sejoli-panel--view-overview form#sejoli-panel-aff-link-parameter {
    display: flex !important;
    margin-top: 0;
}

/* Affiliate overview — parameter tracking (align with legacy affiliasi-link UX) */
.sejoli-panel-card--param-tracking .sejoli-panel-param-tracking-hint {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--sejoli-panel-text-muted, #555);
    background: var(--sejoli-panel-surface-subtle, rgba(0, 0, 0, 0.04));
    border-radius: var(--sejoli-panel-radius-md, 8px);
    border: 1px solid var(--sejoli-panel-border, rgba(0, 0, 0, 0.08));
}

.sejoli-panel-card--param-tracking .sejoli-panel-param-tracking-hint p {
    margin: 0;
}

.sejoli-panel-param-tracking-hint--ready {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.07);
}

.sejoli-panel-param-tracking-form--locked .sejoli-panel-param-tracking__subhead,
.sejoli-panel-param-tracking-form--locked .sejoli-panel-param-tracking__grid,
.sejoli-panel-param-tracking-form--locked .sejoli-panel-param-tracking__info {
    opacity: 0.88;
}

.sejoli-panel-param-tracking-form--locked .sejoli-panel-submit:disabled {
    opacity: 0.5;
}

.sejoli-panel-param-tracking-status {
    margin: 0 0 0.75rem;
}

.sejoli-panel-param-tracking-status--success {
    color: var(--sejoli-panel-success-text, #166534);
}

.sejoli-panel-param-tracking-status--warn {
    color: var(--sejoli-panel-warn, #b45309);
}

.sejoli-panel-param-tracking-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sejoli-panel-param-tracking__subhead {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sejoli-panel-text, #111);
}

.sejoli-panel-param-tracking__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
}

.sejoli-panel-param-tracking__grid--acquisition {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.25rem;
    row-gap: 0.35rem;
    grid-template-areas:
        'acq-platform-label acq-id-label'
        'acq-platform-control acq-id-control'
        '. acq-id-help';
}

.sejoli-panel-param-tracking__acq-label--platform {
    grid-area: acq-platform-label;
}

.sejoli-panel-param-tracking__acq-label--id {
    grid-area: acq-id-label;
}

.sejoli-panel-param-tracking__acq-control--platform {
    grid-area: acq-platform-control;
    min-width: 0;
}

.sejoli-panel-param-tracking__acq-control--id {
    grid-area: acq-id-control;
    min-width: 0;
}

.sejoli-panel-param-tracking__acq-id-help {
    grid-area: acq-id-help;
    margin: 0;
    align-self: start;
}

.sejoli-panel-param-tracking__acq-control .select2-container {
    margin-top: 0;
}

.sejoli-panel-param-tracking-form label.sejoli-panel-param-tracking__acq-label {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sejoli-panel-text-muted, #444);
}

@media (max-width: 720px) {
    .sejoli-panel-param-tracking__grid {
        grid-template-columns: 1fr;
    }

    .sejoli-panel-param-tracking__grid--acquisition {
        grid-template-areas:
            'acq-platform-label'
            'acq-platform-control'
            'acq-id-label'
            'acq-id-control'
            'acq-id-help';
    }
}

.sejoli-panel-param-tracking__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sejoli-panel-param-tracking__field--full {
    grid-column: 1 / -1;
}

.sejoli-panel-param-tracking__field > span:first-child {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sejoli-panel-text-muted, #444);
}

.sejoli-panel-param-tracking__help {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--sejoli-panel-text-muted, #666);
}

.sejoli-panel-param-tracking__info.sejoli-panel-info-message {
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--sejoli-panel-text-muted, #1e3a5f);
    background: var(--sejoli-panel-info-bg, rgba(59, 130, 246, 0.12));
    border: 1px solid var(--sejoli-panel-info-border, rgba(59, 130, 246, 0.25));
    border-radius: var(--sejoli-panel-radius-md, 8px);
}

.sejoli-panel-param-tracking__info p {
    margin: 0;
}

.sejoli-panel-card--param-tracking .select2-container {
    width: 100% !important;
}