/*
 * Professional backend UI v4
 *
 * A conservative visual layer for the agent, admin and user consoles.
 * Business markup and behavior remain untouched. The responsive v2 sheet is
 * retained as a structural fallback; everything below only refines visuals.
 */
@import url("./backend-glass-responsive-v2.css?v=20260718-structural1");

:root {
    /* Primitive palette */
    --ll-white: #ffffff;
    --ll-gray-25: #fcfcfd;
    --ll-gray-50: #f7f8fc;
    --ll-gray-100: #f2f4f7;
    --ll-gray-200: #e7e9f0;
    --ll-gray-300: #d6dae4;
    --ll-gray-400: #98a2b3;
    --ll-gray-500: #667085;
    --ll-gray-700: #344054;
    --ll-gray-900: #1f2430;

    --ll-purple-50: #f7f5ff;
    --ll-purple-100: #efecff;
    --ll-purple-200: #ddd7ff;
    --ll-purple-600: #6d5ce7;
    --ll-purple-700: #5b4acb;
    --ll-purple-800: #4938ac;

    --ll-green-50: #ecfdf3;
    --ll-green-700: #167a50;
    --ll-amber-50: #fffaeb;
    --ll-amber-700: #8a5700;
    --ll-red-50: #fff1f3;
    --ll-red-700: #c1375a;
    --ll-blue-50: #eff6ff;
    --ll-blue-700: #356edc;

    /* Layout scale */
    --ll-space-1: 4px;
    --ll-space-2: 8px;
    --ll-space-3: 12px;
    --ll-space-4: 16px;
    --ll-space-5: 20px;
    --ll-space-6: 24px;
    --ll-space-8: 32px;
    --ll-radius-sm: 6px;
    --ll-radius-md: 8px;
    --ll-radius-lg: 12px;
    --ll-radius-xl: 16px;
    --ll-radius-full: 999px;
    --ll-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --ll-shadow-sm: 0 4px 14px rgba(16, 24, 40, .07);
    --ll-shadow-md: 0 12px 30px rgba(16, 24, 40, .10);
    --ll-shadow-dialog: 0 24px 64px rgba(16, 24, 40, .18);

    /* Semantic tokens */
    --ll-color-page: var(--ll-gray-50);
    --ll-color-surface: var(--ll-white);
    --ll-color-surface-subtle: var(--ll-gray-25);
    --ll-color-surface-hover: var(--ll-purple-50);
    --ll-color-text: var(--ll-gray-900);
    --ll-color-text-secondary: var(--ll-gray-700);
    --ll-color-text-muted: var(--ll-gray-500);
    --ll-color-border: var(--ll-gray-200);
    --ll-color-border-strong: var(--ll-gray-300);
    --ll-color-brand: var(--ll-purple-600);
    --ll-color-brand-hover: var(--ll-purple-700);
    --ll-color-brand-active: var(--ll-purple-800);
    --ll-color-brand-subtle: var(--ll-purple-100);
    --ll-color-focus: rgba(109, 92, 231, .24);

    /* Component tokens */
    --ll-card-bg: var(--ll-color-surface);
    --ll-card-border: var(--ll-color-border);
    --ll-card-radius: var(--ll-radius-lg);
    --ll-card-shadow: var(--ll-shadow-xs);
    --ll-card-shadow-hover: var(--ll-shadow-sm);
    --ll-control-bg: var(--ll-white);
    --ll-control-border: var(--ll-gray-300);
    --ll-control-radius: var(--ll-radius-md);
    --ll-control-height: 40px;
    --ll-button-height: 40px;
    --ll-button-radius: var(--ll-radius-md);

    /* Compatibility aliases used by older page-local styles */
    --ll-ink: var(--ll-color-text);
    --ll-ink-soft: var(--ll-color-text-secondary);
    --ll-muted: var(--ll-color-text-muted);
    --ll-violet: var(--ll-color-brand);
    --ll-violet-deep: var(--ll-color-brand-hover);
    --ll-violet-light: var(--ll-purple-200);
    --ll-line: var(--ll-color-border);
    --ll-line-soft: var(--ll-color-border);
    --ll-glass: var(--ll-white);
    --ll-glass-strong: var(--ll-white);
    --ll-danger: var(--ll-red-700);
    --ll-danger-bg: var(--ll-red-50);
    --ll-success: var(--ll-green-700);
    --ll-success-bg: var(--ll-green-50);
    --ll-warning: var(--ll-amber-700);
    --ll-warning-bg: var(--ll-amber-50);
    --ll-shadow: var(--ll-shadow-dialog);
    --ll-shadow-soft: var(--ll-shadow-sm);
    --ll-radius: var(--ll-radius-md);
    --ll-primary-gradient: linear-gradient(135deg, var(--ll-purple-600), var(--ll-purple-700));
    --ll-primary-gradient-hover: linear-gradient(135deg, var(--ll-purple-700), var(--ll-purple-800));
}

html {
    color-scheme: light;
    background: var(--ll-color-page);
}

body.ll-professional-ui {
    margin: 0;
    color: var(--ll-color-text) !important;
    background: linear-gradient(180deg, var(--ll-purple-50) 0, var(--ll-color-page) 190px) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.ll-professional-ui::before,
body.ll-professional-ui::after {
    content: none !important;
    display: none !important;
}

body.ll-professional-ui a {
    color: var(--ll-color-brand-hover);
    text-underline-offset: 2px;
}

/* Header and navigation */
body.ll-professional-ui .header,
body.ll-professional-ui header.header,
body.ll-professional-ui .topbar,
body.ll-professional-ui .admin-header {
    color: var(--ll-color-text) !important;
    border-color: var(--ll-color-border) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: var(--ll-shadow-xs) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.ll-professional-ui .sidebar,
body.ll-professional-ui aside.sidebar,
body.ll-professional-ui .side-nav,
body.ll-professional-ui .admin-sidebar {
    color: var(--ll-color-text-secondary) !important;
    border-color: var(--ll-color-border) !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: var(--ll-shadow-xs) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.ll-professional-ui .sidebar a,
body.ll-professional-ui .side-nav a,
body.ll-professional-ui .admin-sidebar a {
    color: var(--ll-color-text-secondary) !important;
    margin: 3px 10px;
    border-radius: var(--ll-radius-md);
    font-weight: 600;
    box-shadow: none !important;
    transform: none !important;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease !important;
}

body.ll-professional-ui .sidebar a:hover,
body.ll-professional-ui .side-nav a:hover,
body.ll-professional-ui .admin-sidebar a:hover {
    color: var(--ll-color-brand-hover) !important;
    background: var(--ll-color-surface-hover) !important;
    border-left-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

body.ll-professional-ui .sidebar a.active,
body.ll-professional-ui .side-nav a.active,
body.ll-professional-ui .admin-sidebar a.active {
    color: var(--ll-color-brand-hover) !important;
    background: var(--ll-color-brand-subtle) !important;
    border-left-color: var(--ll-color-brand) !important;
    box-shadow: none !important;
    transform: none !important;
}

body.ll-professional-ui .main-content,
body.ll-professional-ui .content,
body.ll-professional-ui .admin-content,
body.ll-professional-ui main,
body.ll-professional-ui .page-content,
body.ll-professional-ui .container {
    background: transparent !important;
}

/* Surfaces */
body.ll-professional-ui .card,
body.ll-professional-ui .stat-card,
body.ll-professional-ui .dashboard-card,
body.ll-professional-ui .agent-info,
body.ll-professional-ui .announcement-card,
body.ll-professional-ui .feature-card,
body.ll-professional-ui .module-card,
body.ll-professional-ui .pricing-card,
body.ll-professional-ui .package-card,
body.ll-professional-ui .settings-card,
body.ll-professional-ui .form-card,
body.ll-professional-ui .table-card,
body.ll-professional-ui .section,
body.ll-professional-ui .panel,
body.ll-professional-ui .box,
body.ll-professional-ui .summary-item,
body.ll-professional-ui .invite-note {
    color: var(--ll-color-text);
    border: 1px solid var(--ll-card-border) !important;
    border-radius: var(--ll-card-radius) !important;
    background: var(--ll-card-bg) !important;
    box-shadow: var(--ll-card-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

/* Hard safety rail for pages restored from the browser back-forward cache. */
.ll-hover-glass {
    overflow: visible !important;
}

.ll-hover-glass::after,
.ll-hover-glass:hover::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    mix-blend-mode: normal !important;
}

.ll-hover-glass:hover {
    border-color: var(--ll-card-border) !important;
    box-shadow: var(--ll-card-shadow) !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

@media (hover: hover) and (pointer: fine) {
    body.ll-professional-ui .feature-card:hover,
    body.ll-professional-ui .app-type-card:hover,
    body.ll-professional-ui .style-card:hover,
    body.ll-professional-ui a.card:hover,
    body.ll-professional-ui [role="button"].card:hover,
    body.ll-professional-ui .card[data-href]:hover,
    body.ll-professional-ui .card[onclick]:hover {
        color: var(--ll-color-text) !important;
        border-color: var(--ll-purple-200) !important;
        background: var(--ll-color-surface-hover) !important;
        box-shadow: var(--ll-card-shadow-hover) !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
}

body.ll-professional-ui .stat-card .number,
body.ll-professional-ui .summary-item .num,
body.ll-professional-ui .metric-card .number,
body.ll-professional-ui .num {
    color: var(--ll-color-brand-hover) !important;
    font-weight: 750;
}

body.ll-professional-ui .summary-item,
body.ll-professional-ui .summary-item.green,
body.ll-professional-ui .summary-item.blue,
body.ll-professional-ui .summary-item.orange,
body.ll-professional-ui .summary-item.red {
    color: var(--ll-color-text) !important;
    background: var(--ll-white) !important;
}

/* Data tables. The shared script deliberately skips editable article content. */
body.ll-professional-ui .ll-mobile-table {
    overflow: hidden;
    border: 1px solid var(--ll-color-border);
    border-radius: var(--ll-radius-lg);
    background: var(--ll-white);
    box-shadow: var(--ll-shadow-xs);
}

body.ll-professional-ui .ll-mobile-table > table {
    width: 100%;
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--ll-white) !important;
    box-shadow: none !important;
}

body.ll-professional-ui .ll-mobile-table thead,
body.ll-professional-ui .ll-mobile-table th {
    color: var(--ll-color-text-secondary) !important;
    background: var(--ll-gray-50) !important;
    font-size: 13px;
    font-weight: 600;
}

body.ll-professional-ui .ll-mobile-table th,
body.ll-professional-ui .ll-mobile-table td {
    border-color: var(--ll-color-border) !important;
}

body.ll-professional-ui .ll-mobile-table tbody tr:hover td {
    background: var(--ll-purple-50) !important;
}

/* Forms */
body.ll-professional-ui input[type="text"],
body.ll-professional-ui input[type="password"],
body.ll-professional-ui input[type="email"],
body.ll-professional-ui input[type="number"],
body.ll-professional-ui input[type="url"],
body.ll-professional-ui input[type="date"],
body.ll-professional-ui input[type="datetime-local"],
body.ll-professional-ui input[type="search"],
body.ll-professional-ui select,
body.ll-professional-ui textarea,
body.ll-professional-ui .form-control {
    color: var(--ll-color-text) !important;
    border: 1px solid var(--ll-control-border) !important;
    border-radius: var(--ll-control-radius) !important;
    background: var(--ll-control-bg) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}

body.ll-professional-ui input::placeholder,
body.ll-professional-ui textarea::placeholder {
    color: var(--ll-color-text-muted);
    opacity: .82;
}

body.ll-professional-ui input:focus,
body.ll-professional-ui select:focus,
body.ll-professional-ui textarea:focus,
body.ll-professional-ui .form-control:focus {
    outline: none !important;
    color: var(--ll-color-text) !important;
    border-color: var(--ll-color-brand) !important;
    background: var(--ll-white) !important;
    box-shadow: 0 0 0 3px var(--ll-color-focus) !important;
}

/* Buttons: no movement, filters or opacity tricks on hover. */
body.ll-professional-ui button:not(.ll-mobile-nav-scrim):not(.ll-mobile-nav-toggle):not(.ll-mobile-nav-close),
body.ll-professional-ui .btn,
body.ll-professional-ui .action-btn,
body.ll-professional-ui .copy-btn,
body.ll-professional-ui .logout-btn,
body.ll-professional-ui .recharge-mini-btn,
body.ll-professional-ui .feature-btn,
body.ll-professional-ui input[type="submit"],
body.ll-professional-ui input[type="button"] {
    min-height: var(--ll-button-height);
    border-radius: var(--ll-button-radius) !important;
    box-shadow: var(--ll-shadow-xs) !important;
    font-weight: 600;
    filter: none !important;
    transform: none !important;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}

body.ll-professional-ui .btn-secondary,
body.ll-professional-ui .secondary,
body.ll-professional-ui .copy-btn,
body.ll-professional-ui .logout-btn,
body.ll-professional-ui .recharge-mini-btn {
    color: var(--ll-color-text-secondary) !important;
    border-color: var(--ll-color-border-strong) !important;
    background: var(--ll-white) !important;
}

body.ll-professional-ui .btn-primary,
body.ll-professional-ui .action-btn,
body.ll-professional-ui .feature-btn,
body.ll-professional-ui .submit-btn,
body.ll-professional-ui button[type="submit"],
body.ll-professional-ui input[type="submit"] {
    color: #fff !important;
    border-color: transparent !important;
    background: var(--ll-primary-gradient) !important;
}

body.ll-professional-ui .btn-success {
    color: #fff !important;
    border-color: transparent !important;
    background: var(--ll-green-700) !important;
}

body.ll-professional-ui .btn-danger,
body.ll-professional-ui .danger,
body.ll-professional-ui button.delete,
body.ll-professional-ui a.delete {
    color: #fff !important;
    border-color: transparent !important;
    background: var(--ll-red-700) !important;
}

@media (hover: hover) and (pointer: fine) {
    body.ll-professional-ui button:not(:disabled):not(.ll-mobile-nav-scrim):not(.ll-mobile-nav-toggle):not(.ll-mobile-nav-close):hover,
    body.ll-professional-ui .btn:not(:disabled):hover,
    body.ll-professional-ui .action-btn:not(:disabled):hover,
    body.ll-professional-ui .copy-btn:not(:disabled):hover,
    body.ll-professional-ui .feature-btn:hover,
    body.ll-professional-ui input[type="submit"]:not(:disabled):hover,
    body.ll-professional-ui input[type="button"]:not(:disabled):hover {
        box-shadow: var(--ll-shadow-sm) !important;
        filter: none !important;
        transform: none !important;
    }

    body.ll-professional-ui .btn-primary:hover,
    body.ll-professional-ui .action-btn:hover,
    body.ll-professional-ui .feature-btn:hover,
    body.ll-professional-ui .submit-btn:hover,
    body.ll-professional-ui button[type="submit"]:not(:disabled):hover,
    body.ll-professional-ui input[type="submit"]:not(:disabled):hover {
        background: var(--ll-primary-gradient-hover) !important;
    }
}

body.ll-professional-ui button:disabled,
body.ll-professional-ui input:disabled,
body.ll-professional-ui select:disabled,
body.ll-professional-ui textarea:disabled,
body.ll-professional-ui [aria-disabled="true"] {
    cursor: not-allowed !important;
    opacity: .55;
    box-shadow: none !important;
}

/* Tabs and selectable cards */
body.ll-professional-ui .tabs,
body.ll-professional-ui .page-tabs,
body.ll-professional-ui .edit-tabs {
    border-bottom-color: var(--ll-color-border) !important;
}

body.ll-professional-ui .tabs a.active,
body.ll-professional-ui .page-tabs a.active,
body.ll-professional-ui .tab.active,
body.ll-professional-ui .edit-tabs .edit-tab.active {
    color: var(--ll-color-brand-hover) !important;
    border-bottom-color: var(--ll-color-brand) !important;
    background: var(--ll-purple-50) !important;
    box-shadow: inset 0 -2px 0 var(--ll-color-brand) !important;
}

body.ll-professional-ui .app-type-card {
    border-color: var(--ll-color-border) !important;
    background: var(--ll-white) !important;
    box-shadow: var(--ll-shadow-xs) !important;
}

body.ll-professional-ui .app-type-card:has(input:checked),
body.ll-professional-ui .style-card.active,
body.ll-professional-ui .amount-btn.active,
body.ll-professional-ui .pay-option.active {
    color: var(--ll-color-brand-hover) !important;
    border-color: var(--ll-purple-200) !important;
    background: var(--ll-purple-50) !important;
    box-shadow: 0 0 0 2px rgba(109, 92, 231, .10) !important;
}

/* Semantic feedback */
body.ll-professional-ui .success,
body.ll-professional-ui .alert-success,
body.ll-professional-ui .badge-success,
body.ll-professional-ui .status-success,
body.ll-professional-ui .status-active,
body.ll-professional-ui .status-paid,
body.ll-professional-ui .toast-success {
    color: var(--ll-green-700) !important;
    border-color: rgba(22, 122, 80, .18) !important;
    background: var(--ll-green-50) !important;
}

body.ll-professional-ui .warning,
body.ll-professional-ui .alert-warning,
body.ll-professional-ui .badge-warning,
body.ll-professional-ui .status-pending,
body.ll-professional-ui .status-review {
    color: var(--ll-amber-700) !important;
    border-color: rgba(138, 87, 0, .18) !important;
    background: var(--ll-amber-50) !important;
}

body.ll-professional-ui .error,
body.ll-professional-ui .alert-danger,
body.ll-professional-ui .alert-error,
body.ll-professional-ui .badge-danger,
body.ll-professional-ui .status-banned,
body.ll-professional-ui .status-failed {
    color: var(--ll-red-700) !important;
    border-color: rgba(193, 55, 90, .18) !important;
    background: var(--ll-red-50) !important;
}

body.ll-professional-ui .badge,
body.ll-professional-ui .tag,
body.ll-professional-ui .status,
body.ll-professional-ui .product-status {
    border-radius: var(--ll-radius-full) !important;
    box-shadow: none !important;
}

/* Dialog surfaces. Modal masks remain masks, not glass cards. */
body.ll-professional-ui .modal:not(.note-modal) {
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(16, 24, 40, .48) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.ll-professional-ui .modal-content,
body.ll-professional-ui .modal-box,
body.ll-professional-ui .popup,
body.ll-professional-ui .dialog,
body.ll-professional-ui .note-modal .note-modal-content {
    color: var(--ll-color-text) !important;
    border: 1px solid var(--ll-color-border) !important;
    border-radius: var(--ll-radius-xl) !important;
    background: var(--ll-white) !important;
    box-shadow: var(--ll-shadow-dialog) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.ll-professional-ui hr {
    border: 0;
    border-top: 1px solid var(--ll-color-border);
}

/* Keyboard access */
body.ll-professional-ui a:focus-visible,
body.ll-professional-ui button:focus-visible,
body.ll-professional-ui input:focus-visible,
body.ll-professional-ui select:focus-visible,
body.ll-professional-ui textarea:focus-visible,
body.ll-professional-ui [tabindex]:focus-visible {
    outline: 3px solid var(--ll-color-focus) !important;
    outline-offset: 2px;
}

@media (max-width: 1180px) {
    :root {
        --ll-control-height: 44px;
        --ll-button-height: 44px;
    }

    body.ll-professional-ui .sidebar,
    body.ll-professional-ui .side-nav,
    body.ll-professional-ui .admin-sidebar {
        background: var(--ll-white) !important;
        box-shadow: 18px 0 48px rgba(16, 24, 40, .16) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.ll-professional-ui .ll-mobile-nav-toggle {
        color: var(--ll-color-brand-hover);
        border: 1px solid var(--ll-color-border);
        background: var(--ll-white);
        box-shadow: var(--ll-shadow-sm);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.ll-professional-ui input,
    body.ll-professional-ui select,
    body.ll-professional-ui textarea {
        font-size: 16px !important;
    }

    body.ll-professional-ui .ll-mobile-table {
        overflow-x: auto;
        overflow-y: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (forced-colors: active) {
    body.ll-professional-ui :focus-visible {
        outline: 2px solid CanvasText !important;
    }
}

/*
 * Agent console shared shell v1
 * Normalizes every authenticated agent page without touching business markup.
 */
body.ll-professional-ui.ll-agent-shell-v1 {
    --ll-agent-sidebar-width: 148px;
    min-width: 0;
    background: #f7f8fd !important;
}

body.ll-agent-shell-v1 > .header,
body.ll-agent-shell-v1 > header.header {
    position: sticky !important;
    top: 0;
    z-index: 105;
    width: calc(100% - var(--ll-agent-sidebar-width)) !important;
    min-height: 76px !important;
    height: 76px !important;
    margin: 0 0 0 var(--ll-agent-sidebar-width) !important;
    padding: 0 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px;
    color: #101426 !important;
    border: 0 !important;
    border-bottom: 1px solid #e9eaf3 !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: none !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

body.ll-agent-shell-v1 .ll-agent-page-heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.ll-agent-shell-v1 .ll-agent-eyebrow {
    display: block;
    color: #6f4bf3;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.ll-agent-shell-v1 > .header h1,
body.ll-agent-shell-v1 > header.header h1 {
    margin: 1px 0 0 !important;
    color: #101426 !important;
    font-size: 24px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    letter-spacing: -.035em;
}

body.ll-agent-shell-v1 > .header .user-info,
body.ll-agent-shell-v1 > header.header .user-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #4f556a !important;
    font-size: 11px !important;
    font-weight: 700;
}

body.ll-agent-shell-v1 .ll-agent-header-avatar {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: grid !important;
    place-items: center;
    overflow: hidden;
    color: #fff !important;
    border-radius: 50%;
    background: linear-gradient(145deg, #9872ff, #6340df);
    box-shadow: 0 6px 14px rgba(92, 59, 204, .24);
    font-size: 10px !important;
    font-weight: 800;
}

body.ll-agent-shell-v1 > .header .logout-btn,
body.ll-agent-shell-v1 > header.header .logout-btn {
    min-height: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 11px !important;
    color: #4b5062 !important;
    border: 1px solid #e9eaf3 !important;
    border-radius: 7px !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 10px !important;
}

body.ll-agent-shell-v1 > .container {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 76px) !important;
    margin: 0 !important;
    padding: 0 0 0 var(--ll-agent-sidebar-width) !important;
    display: block !important;
    background: transparent !important;
}

body.ll-agent-shell-v1 .sidebar.ll-agent-unified-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 120 !important;
    width: var(--ll-agent-sidebar-width) !important;
    min-width: var(--ll-agent-sidebar-width) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 24px 14px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    color: #5e6477 !important;
    border: 0 !important;
    border-right: 1px solid #e9eaf3 !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.ll-agent-shell-v1 .sidebar .ll-agent-brand {
    min-height: 36px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 4px 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: #101426 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    white-space: nowrap;
}

body.ll-agent-shell-v1 .ll-agent-brand-mark {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 8px;
    background: linear-gradient(145deg, #9c75ff, #6041e7);
    box-shadow: 0 7px 18px rgba(105, 74, 234, .28);
}

body.ll-agent-shell-v1 .ll-agent-brand-copy {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.ll-agent-shell-v1 .ll-agent-brand-copy small {
    display: block;
    margin-top: 1px;
    color: #a0a4b8;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .02em;
}

body.ll-agent-shell-v1 .sidebar .ll-agent-nav {
    width: 100%;
    display: grid !important;
    gap: 6px !important;
}

body.ll-agent-shell-v1 .sidebar .ll-agent-nav > .ll-agent-nav-link,
body.ll-agent-shell-v1 .sidebar > .ll-agent-nav-link {
    width: auto !important;
    min-height: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: #5e6477 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap;
}

body.ll-agent-shell-v1 .sidebar .ll-agent-nav > .ll-agent-nav-link:hover,
body.ll-agent-shell-v1 .sidebar > .ll-agent-nav-link:hover {
    color: #6f4bf3 !important;
    background: #f7f4ff !important;
    transform: translateX(2px) !important;
}

body.ll-agent-shell-v1 .sidebar .ll-agent-nav > .ll-agent-nav-link.active,
body.ll-agent-shell-v1 .sidebar > .ll-agent-nav-link.active {
    color: #6f4bf3 !important;
    background: #f1edff !important;
    transform: none !important;
}

body.ll-agent-shell-v1 .ll-agent-nav-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    display: grid;
    place-items: center;
}

body.ll-agent-shell-v1 .ll-agent-nav-icon svg {
    width: 15px;
    height: 15px;
}

body.ll-agent-shell-v1 .ll-agent-upgrade {
    margin-top: auto;
    padding: 18px 10px;
    color: #101426;
    border: 1px solid #ece9fb;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff, #faf8ff);
    box-shadow: 0 8px 22px rgba(83, 60, 170, .08);
    text-align: center;
}

body.ll-agent-shell-v1 .ll-agent-crown {
    width: 38px;
    height: 38px;
    margin: 0 auto 9px;
    display: grid;
    place-items: center;
    color: #6f4bf3;
    border-radius: 50%;
    background: #f0eaff;
    font-size: 20px;
}

body.ll-agent-shell-v1 .ll-agent-upgrade strong,
body.ll-agent-shell-v1 .ll-agent-upgrade small {
    display: block;
}

body.ll-agent-shell-v1 .ll-agent-upgrade strong { font-size: 11px; }
body.ll-agent-shell-v1 .ll-agent-upgrade small { margin: 3px 0 10px; color: #979caf; font-size: 8px; }

body.ll-agent-shell-v1 .ll-agent-upgrade a {
    min-height: 27px;
    margin: 0 !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: linear-gradient(135deg, #8a65ff, #6541e6) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
}

body.ll-agent-shell-v1 .ll-agent-account {
    padding: 14px 3px 0;
    color: #9a9fb0;
    font-size: 9px;
    line-height: 1.8;
}

body.ll-agent-shell-v1 .ll-agent-account span { display: block; }

body.ll-agent-shell-v1 .ll-agent-unified-main {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: calc(100vh - 76px) !important;
    margin: 0 !important;
    padding: 18px 28px 36px !important;
    color: #101426;
    background: #f7f8fd !important;
}

body.ll-agent-shell-v1 .ll-agent-unified-main > :first-child { margin-top: 0 !important; }

@media (max-width: 1080px) and (min-width: 761px) {
    body.ll-professional-ui.ll-agent-shell-v1 { --ll-agent-sidebar-width: 128px; }

    body.ll-agent-shell-v1 .sidebar.ll-agent-unified-sidebar {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (max-width: 760px) {
    body.ll-professional-ui.ll-agent-shell-v1 { --ll-agent-sidebar-width: 220px; }

    body.ll-agent-shell-v1 > .header,
    body.ll-agent-shell-v1 > header.header {
        width: 100% !important;
        min-height: 66px !important;
        height: 66px !important;
        margin-left: 0 !important;
        padding: 0 16px 0 64px !important;
    }

    body.ll-agent-shell-v1 > .header h1,
    body.ll-agent-shell-v1 > header.header h1 { font-size: 19px !important; }

    body.ll-agent-shell-v1 > .container {
        min-height: calc(100vh - 66px) !important;
        padding-left: 0 !important;
    }

    body.ll-agent-shell-v1 .sidebar.ll-agent-unified-sidebar {
        width: var(--ll-agent-sidebar-width) !important;
        min-width: var(--ll-agent-sidebar-width) !important;
        transform: translateX(-104%) !important;
        transition: transform .22s ease !important;
        box-shadow: 18px 0 48px rgba(16, 24, 40, .16) !important;
    }

    body.ll-agent-shell-v1 .sidebar.ll-agent-unified-sidebar.ll-mobile-open,
    body.ll-agent-shell-v1 .sidebar.ll-agent-unified-sidebar.open { transform: translateX(0) !important; }

    body.ll-agent-shell-v1 .ll-agent-unified-main {
        min-height: calc(100vh - 66px) !important;
        padding: 16px !important;
    }

    body.ll-agent-shell-v1 .ll-mobile-nav-toggle {
        position: fixed !important;
        top: 14px !important;
        left: 14px !important;
        z-index: 2147483646 !important;
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #6f4bf3 !important;
        border: 1px solid #e4defd !important;
        border-radius: 8px !important;
        background: #fff !important;
        box-shadow: 0 5px 14px rgba(78, 53, 176, .12) !important;
    }

    body.ll-agent-shell-v1 .ll-mobile-nav-toggle span {
        width: 17px !important;
        height: 2px !important;
        display: block !important;
        border-radius: 999px !important;
        background: currentColor !important;
    }
}

@media (max-width: 560px) {
    body.ll-agent-shell-v1 > .header .user-info span:not(.ll-agent-header-avatar),
    body.ll-agent-shell-v1 > header.header .user-info span:not(.ll-agent-header-avatar) { display: none !important; }

    body.ll-agent-shell-v1 > .header .logout-btn,
    body.ll-agent-shell-v1 > header.header .logout-btn { padding: 0 8px !important; font-size: 9px !important; }
}