html,
body {
    height: 100%;
}

:root {
    --solar-bg: #111418;
    --solar-bg-soft: #171b20;
    --solar-surface: rgba(30, 35, 42, .86);
    --solar-surface-strong: #20262e;
    --solar-border: rgba(255, 255, 255, .075);
    --solar-border-soft: rgba(255, 255, 255, .045);
    --solar-text: #f6f7f9;
    --solar-muted: #aab4c0;
    --solar-green: #2bd08f;
    --solar-yellow: #ffc423;
    --solar-yellow-soft: rgba(255, 196, 35, .15);
    --solar-shadow: 0 18px 50px rgba(0, 0, 0, .24);
    --sidebar-collapsed-width: 78px;
    --sidebar-expanded-width: 256px;
    --sidebar-effect-duration: .5s;
}

html[data-app-theme="light"] {
    --solar-bg: #f4f7fb;
    --solar-bg-soft: #e9eef5;
    --solar-surface: rgba(255, 255, 255, .92);
    --solar-surface-strong: #ffffff;
    --solar-border: rgba(20, 31, 46, .12);
    --solar-border-soft: rgba(20, 31, 46, .08);
    --solar-text: #17202d;
    --solar-muted: #647386;
    --solar-green: #0f9f6e;
    --solar-yellow: #d49200;
    --solar-yellow-soft: rgba(212, 146, 0, .14);
    --solar-shadow: 0 18px 45px rgba(31, 45, 61, .10);
}

html[data-app-theme="neon"] {
    --solar-bg: #070b16;
    --solar-bg-soft: #0c1224;
    --solar-surface: rgba(12, 18, 36, .88);
    --solar-surface-strong: #101a32;
    --solar-border: rgba(72, 241, 255, .16);
    --solar-border-soft: rgba(72, 241, 255, .10);
    --solar-text: #f6fbff;
    --solar-muted: #9fb4d1;
    --solar-green: #2bffb2;
    --solar-yellow: #f7ff3c;
    --solar-yellow-soft: rgba(247, 255, 60, .16);
    --solar-shadow: 0 22px 60px rgba(0, 255, 255, .08);
}

body {
    background:
        radial-gradient(circle at top right, rgba(255, 196, 35, .08), transparent 32rem),
        radial-gradient(circle at bottom left, rgba(85, 128, 111, .12), transparent 28rem),
        var(--solar-bg);
    color: var(--solar-text);
    font-size: 15px;
}

.app-sidebar {
    --cui-sidebar-bg: #11161c;
    --cui-sidebar-color: rgba(255, 255, 255, .72);
    --cui-sidebar-nav-link-active-bg: var(--solar-yellow-soft);
    --cui-sidebar-nav-link-active-color: #fff;
    --cui-sidebar-nav-link-hover-bg: rgba(255, 255, 255, .055);
    --cui-sidebar-nav-link-hover-color: #fff;
    background: #11161c !important;
    background-color: #11161c !important;
    border-right: 1px solid var(--solar-border-soft);
    box-shadow: 16px 0 40px rgba(0, 0, 0, .18);
}

.sidebar-header {
    border-bottom: 1px solid var(--solar-border-soft);
    min-height: 76px;
    padding: 16px 18px;
}

.sidebar-brand {
    align-items: center;
    display: inline-flex;
    gap: 10px;
    min-height: 44px;
    overflow: hidden;
    padding: 4px 0;
    width: 100%;
}

.sidebar-logo-icon,
.sidebar-logo-full {
    display: block;
    height: auto;
    object-fit: contain;
    width: auto;
}

.sidebar-logo-icon {
    flex: 0 0 34px;
    height: 34px;
    width: 34px;
}

.sidebar-logo-full {
    flex: 0 0 auto;
    max-height: 40px;
    max-width: 184px;
}

.sidebar-nav {
    gap: 4px;
    padding: 14px 12px;
}

.sidebar-nav .nav-link {
    border-radius: 12px;
    min-height: 44px;
}

.settings-nav-button {
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    width: 100%;
}

.sidebar-nav .nav-link.active {
    box-shadow: inset 3px 0 0 var(--solar-yellow);
}

.nav-icon {
    align-items: center;
    display: inline-flex;
    font-size: 1rem;
    height: 1rem;
    justify-content: center;
    line-height: 1;
    margin-right: .75rem;
    width: 1rem;
}

.nav-label {
    white-space: nowrap;
}

.wrapper {
    background: transparent;
    color: var(--solar-text);
    min-width: 0;
}

.app-header {
    background: rgba(17, 20, 24, .78);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--solar-border-soft);
    min-height: 68px;
}

.app-header-inner {
    align-items: center;
    display: flex;
    min-height: 68px;
}

.header-logo-link {
    align-items: center;
    display: none;
    min-width: 0;
    text-decoration: none;
}

.header-logo {
    display: block;
    height: auto;
    max-height: 38px;
    max-width: min(260px, 44vw);
    width: auto;
}

.theme-logo-on-light {
    display: none !important;
}

html[data-app-theme="light"] .theme-logo-on-dark {
    display: none !important;
}

html[data-app-theme="light"] .theme-logo-on-light {
    display: block !important;
}

html:not([data-app-theme="light"]) .theme-logo-on-light {
    display: none !important;
}

.app-sidebar-toggler {
    border-radius: 12px;
    color: #fff;
    height: 38px;
    width: 38px;
}

.app-sidebar-toggler:hover {
    background: rgba(255, 255, 255, .08);
}

.app-sidebar-backdrop {
    background: rgba(0, 0, 0, .55);
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity .18s ease;
    z-index: 1029;
}

.sidebar-toggle-icon,
.sidebar-toggle-icon::before,
.sidebar-toggle-icon::after {
    background: currentColor;
    border-radius: 999px;
    display: block;
    height: 2px;
    width: 20px;
}

.sidebar-toggle-icon {
    position: relative;
    transition: background-color .18s ease;
}

.sidebar-toggle-icon::before,
.sidebar-toggle-icon::after {
    content: "";
    left: 0;
    position: absolute;
    transition: top .18s ease, transform .18s ease;
}

.sidebar-toggle-icon::before {
    top: -6px;
}

.sidebar-toggle-icon::after {
    top: 6px;
}

.app-sidebar-toggler.is-open .sidebar-toggle-icon {
    background: transparent;
}

.app-sidebar-toggler.is-open .sidebar-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.app-sidebar-toggler.is-open .sidebar-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

.user-chip {
    background: var(--solar-surface);
    border: 1px solid var(--solar-border);
    border-radius: 999px;
    color: #d9dee7;
    padding: 6px 12px;
}

.app-container {
    padding-bottom: 32px;
    padding-top: 28px;
}

.app-footer {
    background: transparent;
    border-top: 1px solid var(--solar-border-soft);
    color: var(--solar-muted);
    min-height: 52px;
}

.footer-bottom {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    line-height: 1.45;
    text-align: center;
    width: 100%;
}

.footer-bottom p,
.footer-bottom span {
    margin: 0;
}

.footer-policy-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.footer-bottom a {
    color: var(--solar-yellow);
    font-weight: 700;
    text-decoration: none;
}

.footer-bottom a:hover {
    color: #ffd967;
    text-decoration: underline;
}

.page-heading {
    align-items: flex-start;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 22px;
}

.page-heading h1 {
    color: #fff;
    font-size: 28px;
    font-weight: 720;
    letter-spacing: 0;
    margin: 0 0 6px;
}

.page-heading p {
    color: var(--solar-muted);
    margin: 0;
}

.heading-actions,
.form-actions {
    display: flex;
    gap: 10px;
}

.metric-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 22px;
}

.metric-card,
.content-panel,
.login-card {
    background: var(--solar-surface);
    border: 1px solid var(--solar-border);
    border-radius: 18px;
    box-shadow: var(--solar-shadow);
}

.content-panel,
.login-card,
.tutorial-step,
.tutorial-note,
.tutorial-status-item {
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.metric-card {
    color: var(--solar-text);
    display: block;
    overflow: hidden;
    padding: 22px;
    position: relative;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.metric-card::after {
    background: linear-gradient(135deg, rgba(255, 196, 35, .28), transparent 62%);
    content: "";
    height: 80px;
    position: absolute;
    right: -24px;
    top: -24px;
    width: 80px;
}

.metric-card:hover {
    background: rgba(34, 40, 48, .95);
    border-color: rgba(255, 196, 35, .24);
    transform: translateY(-2px);
}

.metric-card span {
    color: var(--solar-muted);
    display: block;
    margin-bottom: 8px;
}

.metric-card strong {
    color: var(--solar-yellow);
    display: block;
    font-size: 34px;
}

.metric-card small {
    color: var(--solar-muted);
    display: block;
    font-size: 13px;
    margin-top: 8px;
    padding-right: 42px;
}

.dashboard-metrics .metric-card strong {
    font-size: 30px;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.metric-icon {
    bottom: 20px;
    color: rgba(255, 196, 35, .28);
    font-size: 28px;
    position: absolute;
    right: 22px;
}

.content-panel {
    padding: 22px;
}

.form-panel {
    max-width: 980px;
}

.performance-period-form .heading-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 0;
}

.performance-chart-tabs {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
}

.performance-chart-tabs .btn {
    min-height: 34px;
    padding: 7px 13px;
}

.performance-chart-tabs .btn.is-active {
    box-shadow: 0 12px 26px rgba(255, 196, 35, .14);
    transform: translateY(-1px);
}

.simulation-live-calculator {
    background:
        linear-gradient(135deg, rgba(247, 183, 0, .12), rgba(22, 199, 132, .08)),
        var(--solar-surface-strong);
    border: 1px solid rgba(247, 183, 0, .20);
    border-radius: 16px;
    display: grid;
    gap: 18px;
    margin: 8px 0 18px;
    padding: 18px;
}

.simulation-live-copy span {
    color: var(--solar-yellow);
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.simulation-live-copy strong {
    color: var(--solar-text);
    display: block;
    font-size: 18px;
    line-height: 1.25;
}

.simulation-live-copy p {
    color: var(--solar-muted);
    margin: 6px 0 0;
}

.simulation-live-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
}

.simulation-live-item {
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--solar-border-soft);
    border-radius: 14px;
    min-width: 0;
    padding: 14px;
}

.simulation-live-item span {
    color: var(--solar-muted);
    display: block;
    font-size: 12px;
    margin-bottom: 6px;
}

.simulation-live-item strong {
    color: var(--solar-text);
    display: block;
    font-size: 23px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    line-height: 1.08;
    max-width: 100%;
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: normal;
}

.simulation-live-item.is-primary {
    background: linear-gradient(135deg, rgba(247, 183, 0, .18), rgba(22, 199, 132, .10));
    border-color: rgba(247, 183, 0, .30);
    box-shadow: 0 14px 34px rgba(247, 183, 0, .08);
}

.simulation-live-item.is-savings {
    background: linear-gradient(135deg, rgba(22, 199, 132, .13), rgba(247, 183, 0, .06));
    border-color: rgba(22, 199, 132, .24);
}

.simulation-live-item.is-savings strong,
.simulation-live-item.is-balance.is-positive strong {
    color: #69e3a6;
}

.simulation-live-item.is-payback {
    background: linear-gradient(135deg, rgba(78, 159, 255, .12), rgba(22, 199, 132, .06));
    border-color: rgba(78, 159, 255, .24);
}

.simulation-live-item.is-payback strong {
    color: #9fc8ff;
}

.simulation-live-item.is-balance.is-negative {
    border-color: rgba(255, 111, 111, .28);
}

.simulation-live-item.is-balance.is-negative strong {
    color: #ff9b9b;
}

.panel-title h2 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 18px;
}

.dashboard-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    margin-bottom: 22px;
}

.dashboard-grid-primary {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .8fr);
}

.dashboard-panel {
    min-width: 0;
}

.dashboard-panel-wide {
    min-width: 0;
}

.team-performance-top-layout {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .8fr);
}

.team-performance-chart-side {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.chart-frame {
    min-height: 260px;
    position: relative;
}

.chart-frame-lg {
    min-height: 330px;
}

.chart-frame-sm {
    min-height: 280px;
}

.chart-frame-xs {
    display: block;
    min-height: 132px;
}

.chart-frame-modal {
    min-height: 430px;
}

.chart-frame canvas {
    height: 100% !important;
    width: 100% !important;
}

.top-pie-card {
    background:
        linear-gradient(135deg, rgba(255, 196, 35, .08), rgba(43, 208, 143, .04)),
        var(--solar-surface-strong);
    border: 1px solid var(--solar-border);
    border-radius: 16px;
    color: var(--solar-text);
    cursor: pointer;
    padding: 14px;
    text-align: left;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    width: 100%;
}

.top-pie-card:hover,
.top-pie-card:focus {
    background:
        linear-gradient(135deg, rgba(255, 196, 35, .12), rgba(43, 208, 143, .07)),
        var(--solar-surface);
    border-color: rgba(255, 196, 35, .28);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
    transform: translateY(-1px);
}

.top-pie-card-title {
    align-items: center;
    color: var(--solar-muted);
    display: flex;
    font-size: 13px;
    font-weight: 700;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 10px;
}

.top-pie-card-title i {
    color: var(--solar-yellow);
    font-size: 13px;
}

.performance-modal-chart-layout {
    margin: 0 auto;
    max-width: 760px;
    min-height: 0;
    width: 100%;
}

.dashboard-table-wrap {
    overflow-x: auto;
}

.dashboard-table {
    min-width: 680px;
}

.dashboard-table td strong,
.dashboard-table td span {
    display: block;
}

.dashboard-table td span {
    color: var(--solar-muted);
    font-size: 12px;
    margin-top: 4px;
}

.tutorial-heading {
    align-items: center;
}

.tutorial-profile-badge {
    background: var(--solar-surface);
    border: 1px solid var(--solar-border);
    border-radius: 14px;
    box-shadow: var(--solar-shadow);
    min-width: 180px;
    padding: 12px 14px;
}

.tutorial-profile-badge span,
.tutorial-eyebrow {
    color: var(--solar-muted);
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.tutorial-profile-badge strong {
    color: var(--solar-yellow);
    display: block;
    font-size: 17px;
    margin-top: 2px;
}

.tutorial-hero {
    align-items: center;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 22px;
}

.tutorial-hero h2 {
    color: var(--solar-text);
    font-size: 24px;
    font-weight: 760;
    line-height: 1.2;
    margin: 8px 0 10px;
}

.tutorial-hero p {
    color: var(--solar-muted);
    margin: 0;
    max-width: 760px;
}

.tutorial-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.tutorial-quick-actions .btn {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.tutorial-layout {
    align-items: flex-start;
    display: grid;
    gap: 18px;
    grid-template-columns: 240px minmax(0, 1fr);
}

.tutorial-index {
    position: sticky;
    top: 92px;
}

.tutorial-index h2 {
    color: var(--solar-text);
    font-size: 16px;
    margin: 0 0 12px;
}

.tutorial-index a {
    border-radius: 10px;
    color: var(--solar-muted);
    display: block;
    font-weight: 700;
    padding: 9px 10px;
    text-decoration: none;
}

.tutorial-index a:hover,
.tutorial-index a:focus {
    background: var(--solar-yellow-soft);
    color: var(--solar-text);
}

.tutorial-content {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.tutorial-section {
    scroll-margin-top: 94px;
}

.tutorial-step-list {
    display: grid;
    gap: 12px;
}

.tutorial-step {
    align-items: flex-start;
    background: var(--solar-surface-strong);
    border: 1px solid var(--solar-border-soft);
    border-radius: 14px;
    display: flex;
    gap: 14px;
    padding: 16px;
}

.tutorial-step-icon {
    align-items: center;
    background: var(--solar-yellow-soft);
    border: 1px solid rgba(255, 196, 35, .18);
    border-radius: 12px;
    color: var(--solar-yellow);
    display: inline-flex;
    flex: 0 0 44px;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.tutorial-step h3,
.tutorial-note h3 {
    color: var(--solar-text);
    font-size: 16px;
    margin: 0 0 6px;
}

.tutorial-step p,
.tutorial-note p {
    color: var(--solar-muted);
    margin: 0;
}

.tutorial-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tutorial-note {
    background: var(--solar-surface-strong);
    border: 1px solid var(--solar-border-soft);
    border-radius: 14px;
    padding: 16px;
}

.tutorial-note ul {
    color: var(--solar-muted);
    margin: 0;
    padding-left: 18px;
}

.tutorial-note li + li {
    margin-top: 5px;
}

.tutorial-status-list {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tutorial-status-item {
    background: var(--solar-surface-strong);
    border: 1px solid var(--solar-border-soft);
    border-left: 3px solid var(--solar-yellow);
    border-radius: 12px;
    padding: 14px;
}

.tutorial-status-item strong,
.tutorial-status-item span {
    display: block;
}

.tutorial-status-item strong {
    color: var(--solar-text);
    margin-bottom: 4px;
}

.tutorial-status-item span {
    color: var(--solar-muted);
}

.tutorial-check-list {
    display: grid;
    gap: 10px;
}

.tutorial-check-list p {
    align-items: flex-start;
    color: var(--solar-muted);
    display: flex;
    gap: 10px;
    margin: 0;
}

.tutorial-check-list i {
    color: var(--solar-green);
    margin-top: 3px;
}

.btn {
    border-radius: 12px;
    min-height: 38px;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.btn-primary {
    background: linear-gradient(135deg, #ffcf33, #f2aa00);
    border-color: transparent;
    color: #15191f;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(245, 183, 0, .18);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #ffd95c, #ffb300);
    border-color: transparent;
    color: #15191f;
}

.btn-outline-primary {
    border-color: rgba(255, 196, 35, .55);
    color: var(--solar-yellow);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--solar-yellow);
    border-color: var(--solar-yellow);
    color: #15191f;
}

.btn-outline-secondary,
.btn-outline-light {
    border-color: rgba(255, 255, 255, .18);
    color: #dce2ea;
}

.btn-outline-secondary:hover,
.btn-outline-light:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}

.btn-outline-danger {
    border-color: rgba(255, 120, 120, .42);
    color: #ff9b9b;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-danger {
    background: #d94343;
    border-color: #d94343;
    color: #fff;
}

.grid-view {
    overflow-x: auto;
    width: 100%;
}

.table-toolbar {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.table-search-form {
    align-items: center;
    display: flex;
    gap: 10px;
    max-width: 620px;
    width: 100%;
}

.table-search-control {
    flex: 1 1 auto;
    min-width: 240px;
    position: relative;
}

.table-search-icon {
    color: var(--solar-muted);
    font-size: .95rem;
    left: 15px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.table-search-input {
    min-height: 42px;
    padding-left: 42px;
}

.table-search-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.simulation-customer-search {
    position: relative;
}

.customer-search-control {
    position: relative;
}

.customer-search-icon {
    color: var(--solar-muted);
    font-size: .95rem;
    left: 15px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.customer-search-input {
    padding-left: 42px;
    padding-right: 44px;
}

.customer-search-clear {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--solar-muted);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    z-index: 2;
}

.customer-search-clear:hover,
.customer-search-clear:focus {
    background: rgba(255, 255, 255, .08);
    color: var(--solar-text);
}

.customer-search-results {
    background: var(--solar-surface-strong);
    border: 1px solid var(--solar-border);
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
    left: 0;
    margin-top: 8px;
    max-height: 240px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px;
    position: absolute;
    right: 0;
    scrollbar-gutter: stable;
    z-index: 12;
}

.customer-search-option {
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--solar-text);
    display: block;
    padding: 10px 12px;
    text-align: left;
    width: 100%;
}

.customer-search-option:hover,
.customer-search-option:focus {
    background: var(--solar-yellow-soft);
}

.customer-search-option strong,
.customer-search-option span,
.customer-search-selected strong,
.customer-search-selected small {
    display: block;
    overflow-wrap: anywhere;
}

.customer-search-option span,
.customer-search-selected small,
.customer-search-message {
    color: var(--solar-muted);
    font-size: 12px;
    margin-top: 3px;
}

.customer-search-message {
    padding: 10px 12px;
}

.customer-search-selected {
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--solar-border-soft);
    border-radius: 12px;
    margin-top: 10px;
    padding: 10px 12px;
}

.customer-search-selected.is-empty {
    display: none;
}

.customer-search-selected span {
    color: var(--solar-yellow);
    display: block;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 2px;
}

.table {
    --cui-table-bg: transparent;
    --cui-table-color: #d9dee7;
    --cui-table-border-color: var(--solar-border-soft);
    margin-bottom: 0;
    min-width: 720px;
    vertical-align: middle;
}

.table > :not(caption) > * > * {
    padding: .86rem .9rem;
}

.table thead th {
    color: var(--solar-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.table tbody tr {
    transition: background .14s ease;
}

.table tbody tr:hover {
    background: rgba(255, 255, 255, .035);
}

.table a {
    color: var(--solar-yellow);
    font-weight: 600;
}

.grid-view .pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
    margin: 18px 0 0;
    padding: 0;
}

.grid-view .pagination > li {
    list-style: none;
}

.grid-view .pagination > li > a,
.grid-view .pagination > li > span,
.grid-view .pagination .page-link {
    align-items: center;
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--solar-border);
    border-radius: 10px;
    color: var(--solar-muted);
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    justify-content: center;
    line-height: 1;
    min-height: 38px;
    min-width: 38px;
    padding: 0 12px;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.grid-view .pagination > li > a:hover,
.grid-view .pagination > li > a:focus,
.grid-view .pagination .page-link:hover,
.grid-view .pagination .page-link:focus {
    background: var(--solar-yellow-soft);
    border-color: rgba(255, 196, 35, .36);
    color: var(--solar-text);
    box-shadow: 0 10px 22px rgba(247, 183, 0, .10);
    transform: translateY(-1px);
}

.grid-view .pagination > .active > a,
.grid-view .pagination > .active > span,
.grid-view .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--solar-yellow), #ffb300);
    border-color: transparent;
    color: #15191f;
    box-shadow: 0 12px 26px rgba(247, 183, 0, .16);
}

.grid-view .pagination > .disabled > span,
.grid-view .pagination > .disabled > a,
.grid-view .pagination .page-item.disabled .page-link {
    background: rgba(255, 255, 255, .025);
    border-color: var(--solar-border-soft);
    color: rgba(170, 180, 192, .42);
    cursor: not-allowed;
    opacity: 1;
    pointer-events: none;
}

.table-actions {
    white-space: nowrap;
}

.table-actions .btn {
    margin: 2px;
}

.action-icon-btn {
    align-items: center;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    padding: 0;
    width: 34px;
}

.action-icon-btn i {
    font-size: .95rem;
    line-height: 1;
}

.audit-json {
    max-height: 26rem;
    overflow: auto;
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: rgba(9, 14, 20, .48);
    color: var(--app-text);
    font-size: .8rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

html[data-app-theme="light"] .audit-json {
    background: #f8fafc;
}

html[data-app-theme="neon"] .audit-json {
    border-color: rgba(0, 229, 255, .42);
    box-shadow: 0 0 18px rgba(0, 229, 255, .08);
}

.app-modal {
    background: #20262e;
    border: 1px solid var(--solar-border);
    border-radius: 18px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .36);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow: hidden;
}

.modal.show {
    overflow: hidden;
}

.modal .modal-dialog {
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
}

.modal-dialog-centered {
    min-height: calc(100vh - 48px);
    min-height: calc(100dvh - 48px);
}

.app-modal .modal-header {
    border-bottom-color: var(--solar-border-soft);
    flex: 0 0 auto;
}

.app-modal .modal-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 22px;
}

.app-modal .modal-body:not(:has(.modal-form-panel)) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px;
    scrollbar-gutter: stable;
}

.app-modal .modal-body:has(.modal-form-panel) {
    padding: 0;
}

.app-modal .app-modal-actions {
    background: rgba(17, 20, 24, .42);
    border-top: 1px solid var(--solar-border-soft);
    flex: 0 0 auto;
    gap: 10px;
    justify-content: flex-end;
    margin: 22px -22px -22px;
    padding: 16px 22px;
}

.app-modal > .app-modal-actions,
.app-modal > .modal-footer {
    flex: 0 0 auto;
    margin: 0;
}

.settings-modal .app-modal-actions {
    padding: 20px 26px 22px;
}

.settings-modal .modal-body {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.settings-modal .app-modal-actions .btn {
    margin: 4px;
}

.app-modal .btn-close {
    filter: invert(1) grayscale(100%);
}

.modal-form-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin: 0;
    min-height: 0;
}

.modal-form-panel form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.modal-form-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px;
    scrollbar-gutter: stable;
}

.modal-form-panel .app-modal-actions {
    margin: 0;
    padding: 16px 22px;
}

.form-section {
    border: 1px solid var(--solar-border-soft);
    border-radius: 14px;
    margin-bottom: 18px;
    padding: 16px;
}

.form-section-title {
    color: var(--solar-text);
    font-size: 16px;
    font-weight: 760;
    margin: 0 0 14px;
}

[data-person-section].is-hidden {
    display: none;
}

.document-current-link {
    display: block;
    font-weight: 700;
    margin-top: 4px;
}

.modal-loading {
    color: var(--solar-muted);
    padding: 22px 0;
    text-align: center;
}

.modal-confirm {
    color: var(--solar-text);
}

.settings-section + .settings-section {
    border-top: 1px solid var(--solar-border-soft);
    margin-top: 18px;
    padding-top: 18px;
}

.settings-section-title {
    color: var(--solar-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.settings-theme-list,
.settings-language-list {
    display: grid;
    gap: 12px;
}

.settings-theme-option,
.settings-language-option {
    align-items: center;
    background: var(--solar-surface-strong);
    border: 1px solid var(--solar-border);
    border-radius: 14px;
    color: var(--solar-text);
    display: flex;
    gap: 12px;
    min-height: 76px;
    padding: 14px;
    text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
    width: 100%;
}

.settings-theme-option:hover,
.settings-theme-option:focus,
.settings-language-option:hover,
.settings-language-option:focus {
    border-color: rgba(255, 196, 35, .36);
    outline: 0;
    transform: translateY(-1px);
}

.settings-theme-option.is-active,
.settings-language-option.is-active {
    border-color: var(--solar-yellow);
    box-shadow: 0 0 0 1px var(--solar-yellow-soft), var(--solar-shadow);
}

.settings-theme-icon {
    align-items: center;
    background: var(--solar-yellow-soft);
    border: 1px solid rgba(255, 196, 35, .20);
    border-radius: 12px;
    color: var(--solar-yellow);
    display: inline-flex;
    flex: 0 0 44px;
    font-size: 18px;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.settings-flag-icon {
    align-items: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--solar-border);
    border-radius: 12px;
    display: inline-flex;
    flex: 0 0 50px;
    height: 38px;
    justify-content: center;
    overflow: hidden;
    padding: 3px;
    width: 50px;
}

.settings-flag-icon img {
    border-radius: 8px;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.settings-theme-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.settings-theme-copy strong,
.settings-theme-copy small {
    display: block;
}

.settings-theme-copy strong {
    color: var(--solar-text);
    font-size: 15px;
    line-height: 1.2;
}

.settings-theme-copy small {
    color: var(--solar-muted);
    font-size: 13px;
    line-height: 1.35;
    margin-top: 4px;
}

.settings-theme-switch {
    border: 1px solid var(--solar-border);
    border-radius: 999px;
    color: var(--solar-muted);
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    min-width: 46px;
    padding: 7px 10px;
    text-align: center;
}

.settings-theme-option.is-active .settings-theme-switch,
.settings-language-option.is-active .settings-theme-switch {
    background: var(--solar-yellow);
    border-color: transparent;
    color: #15191f;
}

.form-control,
.form-select {
    background-color: rgba(17, 20, 24, .78);
    border-color: rgba(255, 255, 255, .12);
    border-radius: 12px;
    color: var(--solar-text);
    min-height: 42px;
}

.form-control:focus,
.form-select:focus {
    background-color: rgba(17, 20, 24, .9);
    border-color: var(--solar-yellow);
    box-shadow: 0 0 0 .2rem rgba(255, 196, 35, .16);
    color: #fff;
}

textarea.form-control {
    min-height: 110px;
}

.help-block,
.invalid-feedback,
.form-text {
    color: #f0a0a0;
}

.breadcrumb {
    --cui-breadcrumb-divider-color: #7f8b9a;
    --cui-breadcrumb-active-color: #b7c0cc;
    font-size: 13px;
}

.app-breadcrumb a {
    color: var(--solar-yellow);
}

.guest-shell {
    align-items: center;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 196, 35, .18), transparent 24rem),
        radial-gradient(circle at 88% 76%, rgba(79, 118, 101, .14), transparent 28rem),
        var(--solar-bg);
    display: flex;
    min-height: 100vh;
    padding: 32px;
}

.login-shell {
    align-items: center;
    display: grid;
    gap: 42px;
    grid-template-columns: minmax(0, 1fr) 420px;
    margin: 0 auto;
    max-width: 1180px;
    min-width: 0;
    width: 100%;
}

.login-logo {
    display: block;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .28));
    height: auto;
    max-width: 460px;
    width: 100%;
}

.login-copy p {
    color: #d5dbe3;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
    margin-top: 20px;
    max-width: 520px;
}

.login-card {
    padding: 30px;
}

.login-card h2 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 20px;
}

.detail-view th {
    color: #b7c0cc;
    width: 280px;
}

.detail-view td {
    color: #f3f4f7;
}

html[data-app-theme="light"] body {
    background:
        radial-gradient(circle at top right, rgba(212, 146, 0, .10), transparent 32rem),
        radial-gradient(circle at bottom left, rgba(15, 159, 110, .10), transparent 28rem),
        var(--solar-bg);
    color: var(--solar-text);
}

html[data-app-theme="light"] .app-sidebar {
    --cui-sidebar-bg: #ffffff;
    --cui-sidebar-color: rgba(23, 32, 45, .76);
    --cui-sidebar-nav-link-active-bg: rgba(212, 146, 0, .14);
    --cui-sidebar-nav-link-active-color: #17202d;
    --cui-sidebar-nav-link-active-icon-color: #17202d;
    --cui-sidebar-nav-link-hover-bg: rgba(23, 32, 45, .06);
    --cui-sidebar-nav-link-hover-color: #17202d;
    --cui-sidebar-nav-link-hover-icon-color: #17202d;
    --cui-sidebar-nav-link-icon-color: #647386;
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: 16px 0 40px rgba(31, 45, 61, .08);
}

html[data-app-theme="light"] body.sidebar-desktop-expanded .sidebar.sidebar-fixed.app-sidebar {
    box-shadow: 22px 0 54px rgba(31, 45, 61, .12);
}

html[data-app-theme="light"] .app-header {
    background: rgba(255, 255, 255, .86);
    border-bottom-color: rgba(20, 31, 46, .08);
    box-shadow: 0 10px 28px rgba(31, 45, 61, .04);
}

html[data-app-theme="light"] .app-sidebar-toggler {
    color: #17202d;
}

html[data-app-theme="light"] .app-sidebar-toggler:hover {
    background: rgba(23, 32, 45, .08);
}

html[data-app-theme="light"] .sidebar-nav .nav-link {
    background: transparent;
    color: #526173;
}

html[data-app-theme="light"] .sidebar-nav .nav-link:hover,
html[data-app-theme="light"] .sidebar-nav .nav-link:focus {
    background: linear-gradient(90deg, rgba(212, 146, 0, .12), rgba(15, 159, 110, .06));
    color: #17202d;
    box-shadow: inset 3px 0 0 rgba(212, 146, 0, .72);
}

html[data-app-theme="light"] .sidebar-nav .nav-link.active {
    background: linear-gradient(90deg, rgba(212, 146, 0, .18), rgba(255, 255, 255, .72));
    color: #17202d;
    box-shadow: inset 3px 0 0 var(--solar-yellow), 0 10px 24px rgba(212, 146, 0, .10);
}

html[data-app-theme="light"] .sidebar-nav .nav-link .nav-icon {
    color: #647386 !important;
}

html[data-app-theme="light"] .sidebar-nav .nav-link:hover .nav-icon,
html[data-app-theme="light"] .sidebar-nav .nav-link:focus .nav-icon,
html[data-app-theme="light"] .sidebar-nav .nav-link.active .nav-icon {
    color: #17202d !important;
}

html[data-app-theme="light"] .user-chip,
html[data-app-theme="light"] .metric-card,
html[data-app-theme="light"] .content-panel,
html[data-app-theme="light"] .login-card,
html[data-app-theme="light"] .app-modal {
    color: var(--solar-text);
}

html[data-app-theme="light"] .metric-card:hover {
    background: #ffffff;
    border-color: rgba(212, 146, 0, .28);
    box-shadow: 0 18px 42px rgba(31, 45, 61, .14);
}

html[data-app-theme="light"] .content-panel:hover,
html[data-app-theme="light"] .tutorial-step:hover,
html[data-app-theme="light"] .tutorial-note:hover,
html[data-app-theme="light"] .tutorial-status-item:hover {
    border-color: rgba(212, 146, 0, .18);
    box-shadow: 0 14px 34px rgba(31, 45, 61, .08);
}

html[data-app-theme="light"] .tutorial-index a:hover,
html[data-app-theme="light"] .tutorial-index a:focus {
    background: linear-gradient(90deg, rgba(212, 146, 0, .14), rgba(15, 159, 110, .08));
    color: #17202d;
}

html[data-app-theme="light"] .page-heading h1,
html[data-app-theme="light"] .panel-title h2,
html[data-app-theme="light"] .login-card h2,
html[data-app-theme="light"] .modal-title {
    color: var(--solar-text);
}

html[data-app-theme="light"] .login-copy p,
html[data-app-theme="light"] .detail-view td {
    color: #314055;
}

html[data-app-theme="light"] .detail-view th {
    color: var(--solar-muted);
}

html[data-app-theme="light"] .footer-bottom a:hover {
    color: #a86d00;
}

html[data-app-theme="light"] .btn-outline-secondary,
html[data-app-theme="light"] .btn-outline-light {
    border-color: rgba(23, 32, 45, .18);
    color: #17202d;
}

html[data-app-theme="light"] .btn-outline-secondary:hover,
html[data-app-theme="light"] .btn-outline-light:hover {
    background: #eef3f8;
    border-color: rgba(23, 32, 45, .28);
    color: #17202d;
    box-shadow: 0 10px 24px rgba(31, 45, 61, .08);
}

html[data-app-theme="light"] .btn-primary:hover,
html[data-app-theme="light"] .btn-primary:focus,
html[data-app-theme="light"] .btn-outline-primary:hover,
html[data-app-theme="light"] .btn-outline-primary:focus {
    box-shadow: 0 12px 26px rgba(212, 146, 0, .18);
    transform: translateY(-1px);
}

html[data-app-theme="light"] .performance-chart-tabs .btn-outline-primary {
    border-color: rgba(212, 146, 0, .34);
    color: #9a6700;
}

html[data-app-theme="light"] .performance-chart-tabs .btn.is-active {
    box-shadow: 0 12px 26px rgba(212, 146, 0, .14);
}

html[data-app-theme="light"] .top-pie-card {
    background: #f8fafc;
    border-color: rgba(20, 31, 46, .10);
    color: var(--solar-text);
}

html[data-app-theme="light"] .top-pie-card:hover,
html[data-app-theme="light"] .top-pie-card:focus {
    background:
        linear-gradient(135deg, rgba(212, 146, 0, .10), rgba(15, 159, 110, .06)),
        #ffffff;
    border-color: rgba(212, 146, 0, .25);
    box-shadow: 0 14px 34px rgba(31, 45, 61, .10);
}

html[data-app-theme="light"] .top-pie-card-title i {
    color: #a86d00;
}

html[data-app-theme="light"] .table {
    --cui-table-color: #2a3444;
    --cui-table-border-color: var(--solar-border-soft);
}

html[data-app-theme="light"] .table tbody tr:hover {
    background: rgba(212, 146, 0, .055);
}

html[data-app-theme="light"] .grid-view .pagination > li > a,
html[data-app-theme="light"] .grid-view .pagination > li > span,
html[data-app-theme="light"] .grid-view .pagination .page-link {
    background: #f8fafc;
    border-color: rgba(20, 31, 46, .10);
    color: #647386;
}

html[data-app-theme="light"] .grid-view .pagination > li > a:hover,
html[data-app-theme="light"] .grid-view .pagination > li > a:focus,
html[data-app-theme="light"] .grid-view .pagination .page-link:hover,
html[data-app-theme="light"] .grid-view .pagination .page-link:focus {
    background: rgba(212, 146, 0, .10);
    border-color: rgba(212, 146, 0, .28);
    color: #17202d;
    box-shadow: 0 10px 22px rgba(31, 45, 61, .08);
}

html[data-app-theme="light"] .grid-view .pagination > .disabled > span,
html[data-app-theme="light"] .grid-view .pagination > .disabled > a,
html[data-app-theme="light"] .grid-view .pagination .page-item.disabled .page-link {
    background: #f1f5f9;
    color: rgba(100, 115, 134, .48);
}

html[data-app-theme="light"] .app-modal {
    background: #ffffff;
    border-color: rgba(20, 31, 46, .10);
    box-shadow: 0 28px 70px rgba(31, 45, 61, .18);
}

html[data-app-theme="light"] .app-modal .modal-header {
    background: linear-gradient(135deg, #ffffff, #f5f8fb);
    border-bottom-color: rgba(20, 31, 46, .08);
}

html[data-app-theme="light"] .app-modal .modal-body {
    background: #ffffff;
}

html[data-app-theme="light"] .app-modal .app-modal-actions {
    background: linear-gradient(180deg, #f8fafc, #eef3f8);
    border-top-color: rgba(20, 31, 46, .08);
}

html[data-app-theme="light"] .app-modal .btn-close {
    filter: none;
}

html[data-app-theme="light"] .settings-flag-icon {
    background: #ffffff;
}

html[data-app-theme="light"] .settings-section + .settings-section {
    border-top-color: rgba(20, 31, 46, .08);
}

html[data-app-theme="light"] .settings-theme-option,
html[data-app-theme="light"] .settings-language-option {
    background: #f8fafc;
    border-color: rgba(20, 31, 46, .10);
}

html[data-app-theme="light"] .settings-theme-option:hover,
html[data-app-theme="light"] .settings-theme-option:focus,
html[data-app-theme="light"] .settings-language-option:hover,
html[data-app-theme="light"] .settings-language-option:focus {
    background: #ffffff;
    border-color: rgba(212, 146, 0, .30);
    box-shadow: 0 14px 30px rgba(31, 45, 61, .10);
}

html[data-app-theme="light"] .settings-theme-option.is-active,
html[data-app-theme="light"] .settings-language-option.is-active {
    background: linear-gradient(135deg, rgba(212, 146, 0, .12), rgba(15, 159, 110, .06));
    border-color: rgba(212, 146, 0, .42);
    box-shadow: 0 0 0 1px rgba(212, 146, 0, .12), 0 16px 36px rgba(31, 45, 61, .10);
}

html[data-app-theme="light"] .settings-theme-icon {
    background: rgba(212, 146, 0, .12);
    border-color: rgba(212, 146, 0, .18);
    color: #b77900;
}

html[data-app-theme="light"] .form-control,
html[data-app-theme="light"] .form-select {
    background-color: #ffffff;
    border-color: var(--solar-border);
    color: var(--solar-text);
}

html[data-app-theme="light"] .form-control:focus,
html[data-app-theme="light"] .form-select:focus {
    background-color: #ffffff;
    color: var(--solar-text);
}

html[data-app-theme="light"] .customer-search-results {
    background: #ffffff;
    border-color: rgba(20, 31, 46, .10);
    box-shadow: 0 18px 42px rgba(31, 45, 61, .14);
}

html[data-app-theme="light"] .customer-search-option:hover,
html[data-app-theme="light"] .customer-search-option:focus {
    background: linear-gradient(90deg, rgba(212, 146, 0, .12), rgba(15, 159, 110, .06));
}

html[data-app-theme="light"] .customer-search-clear:hover,
html[data-app-theme="light"] .customer-search-clear:focus {
    background: rgba(23, 32, 45, .08);
}

html[data-app-theme="light"] .customer-search-selected {
    background: #f8fafc;
    border-color: rgba(20, 31, 46, .08);
}

html[data-app-theme="light"] .form-section {
    background: rgba(248, 250, 252, .70);
    border-color: rgba(20, 31, 46, .08);
}

html[data-app-theme="light"] .simulation-live-calculator {
    background:
        linear-gradient(135deg, rgba(212, 146, 0, .10), rgba(15, 159, 110, .07)),
        #ffffff;
    border-color: rgba(212, 146, 0, .20);
}

html[data-app-theme="light"] .simulation-live-item {
    background: #f8fafc;
    border-color: rgba(20, 31, 46, .08);
}

html[data-app-theme="light"] .simulation-live-item.is-primary {
    background: linear-gradient(135deg, rgba(212, 146, 0, .13), rgba(15, 159, 110, .07));
    border-color: rgba(212, 146, 0, .28);
    box-shadow: 0 14px 28px rgba(31, 45, 61, .08);
}

html[data-app-theme="light"] .simulation-live-item.is-savings {
    background: linear-gradient(135deg, rgba(15, 159, 110, .12), rgba(212, 146, 0, .05));
    border-color: rgba(15, 159, 110, .20);
}

html[data-app-theme="light"] .simulation-live-item.is-savings strong,
html[data-app-theme="light"] .simulation-live-item.is-balance.is-positive strong {
    color: #087a51;
}

html[data-app-theme="light"] .simulation-live-item.is-payback {
    background: linear-gradient(135deg, rgba(37, 99, 235, .09), rgba(15, 159, 110, .05));
    border-color: rgba(37, 99, 235, .18);
}

html[data-app-theme="light"] .simulation-live-item.is-payback strong {
    color: #1d4ed8;
}

html[data-app-theme="light"] .simulation-live-item.is-balance.is-negative {
    border-color: rgba(220, 38, 38, .22);
}

html[data-app-theme="light"] .simulation-live-item.is-balance.is-negative strong {
    color: #b91c1c;
}

html[data-app-theme="light"] .breadcrumb {
    --cui-breadcrumb-divider-color: #8794a6;
    --cui-breadcrumb-active-color: #526173;
}

html[data-app-theme="neon"] body {
    background:
        radial-gradient(circle at 12% 12%, rgba(72, 241, 255, .12), transparent 30rem),
        radial-gradient(circle at 88% 18%, rgba(247, 255, 60, .10), transparent 26rem),
        radial-gradient(circle at 28% 92%, rgba(43, 255, 178, .10), transparent 30rem),
        var(--solar-bg);
}

html[data-app-theme="neon"] .app-sidebar {
    --cui-sidebar-bg: #08101f;
    --cui-sidebar-nav-link-active-bg: rgba(247, 255, 60, .12);
    --cui-sidebar-nav-link-active-color: #f6fbff;
    --cui-sidebar-nav-link-active-icon-color: #f7ff3c;
    --cui-sidebar-nav-link-hover-bg: rgba(72, 241, 255, .08);
    --cui-sidebar-nav-link-hover-color: #f6fbff;
    --cui-sidebar-nav-link-hover-icon-color: #48f1ff;
    --cui-sidebar-nav-link-icon-color: #9fb4d1;
    background: #08101f !important;
    background-color: #08101f !important;
    box-shadow: 18px 0 54px rgba(0, 255, 255, .08);
}

html[data-app-theme="neon"] .app-header {
    background: rgba(7, 11, 22, .78);
    border-bottom-color: rgba(72, 241, 255, .14);
}

html[data-app-theme="neon"] .sidebar-nav .nav-link.active {
    box-shadow: inset 3px 0 0 var(--solar-yellow), 0 0 22px rgba(72, 241, 255, .10);
}

html[data-app-theme="neon"] .sidebar-nav .nav-link {
    color: #9fb4d1;
}

html[data-app-theme="neon"] .sidebar-nav .nav-link .nav-icon {
    color: #8eeef7 !important;
    filter: drop-shadow(0 0 8px rgba(72, 241, 255, .18));
}

html[data-app-theme="neon"] .sidebar-nav .nav-link:hover,
html[data-app-theme="neon"] .sidebar-nav .nav-link:focus {
    background: linear-gradient(90deg, rgba(72, 241, 255, .12), rgba(247, 255, 60, .045));
    border-color: rgba(72, 241, 255, .16);
    color: #f6fbff;
    box-shadow: inset 3px 0 0 #48f1ff, 0 0 20px rgba(72, 241, 255, .12);
}

html[data-app-theme="neon"] .sidebar-nav .nav-link:hover .nav-icon,
html[data-app-theme="neon"] .sidebar-nav .nav-link:focus .nav-icon,
html[data-app-theme="neon"] .sidebar-nav .nav-link.active .nav-icon {
    color: var(--solar-yellow) !important;
    filter: drop-shadow(0 0 10px rgba(247, 255, 60, .32));
}

html[data-app-theme="neon"] .metric-card::after {
    background: linear-gradient(135deg, rgba(247, 255, 60, .24), rgba(43, 255, 178, .12), transparent 65%);
}

html[data-app-theme="neon"] .metric-card:hover {
    background: rgba(16, 26, 50, .96);
    border-color: rgba(72, 241, 255, .32);
    box-shadow: 0 0 0 1px rgba(72, 241, 255, .08), 0 18px 60px rgba(72, 241, 255, .14);
}

html[data-app-theme="neon"] .content-panel:hover,
html[data-app-theme="neon"] .tutorial-step:hover,
html[data-app-theme="neon"] .tutorial-note:hover,
html[data-app-theme="neon"] .tutorial-status-item:hover {
    border-color: rgba(72, 241, 255, .26);
    box-shadow: 0 0 0 1px rgba(72, 241, 255, .06), 0 18px 50px rgba(72, 241, 255, .10);
}

html[data-app-theme="neon"] .tutorial-index a:hover,
html[data-app-theme="neon"] .tutorial-index a:focus {
    background: linear-gradient(90deg, rgba(72, 241, 255, .14), rgba(247, 255, 60, .08));
    box-shadow: 0 0 22px rgba(72, 241, 255, .08);
    color: #f6fbff;
}

html[data-app-theme="neon"] .metric-icon {
    color: rgba(72, 241, 255, .24);
}

html[data-app-theme="neon"] .btn-primary {
    box-shadow: 0 0 22px rgba(247, 255, 60, .14), 0 10px 22px rgba(43, 255, 178, .08);
}

html[data-app-theme="neon"] .btn-primary:hover,
html[data-app-theme="neon"] .btn-primary:focus,
html[data-app-theme="neon"] .btn-outline-primary:hover,
html[data-app-theme="neon"] .btn-outline-primary:focus {
    box-shadow: 0 0 24px rgba(247, 255, 60, .18), 0 14px 32px rgba(72, 241, 255, .10);
    transform: translateY(-1px);
}

html[data-app-theme="neon"] .performance-chart-tabs .btn-outline-primary {
    border-color: rgba(72, 241, 255, .36);
    color: #9ffcff;
}

html[data-app-theme="neon"] .performance-chart-tabs .btn.is-active {
    box-shadow: 0 0 26px rgba(247, 255, 60, .16), 0 14px 32px rgba(72, 241, 255, .10);
}

html[data-app-theme="neon"] .top-pie-card {
    background:
        radial-gradient(circle at 12% 0, rgba(72, 241, 255, .10), transparent 12rem),
        rgba(8, 16, 31, .92);
    border-color: rgba(72, 241, 255, .20);
    box-shadow: 0 16px 40px rgba(0, 255, 255, .06);
}

html[data-app-theme="neon"] .top-pie-card:hover,
html[data-app-theme="neon"] .top-pie-card:focus {
    background:
        radial-gradient(circle at 12% 0, rgba(72, 241, 255, .15), transparent 12rem),
        rgba(12, 24, 45, .96);
    border-color: rgba(72, 241, 255, .34);
    box-shadow: 0 0 0 1px rgba(72, 241, 255, .08), 0 18px 46px rgba(72, 241, 255, .12);
}

html[data-app-theme="neon"] .top-pie-card-title i {
    color: #48f1ff;
    filter: drop-shadow(0 0 8px rgba(72, 241, 255, .32));
}

html[data-app-theme="neon"] .btn-outline-secondary:hover,
html[data-app-theme="neon"] .btn-outline-light:hover {
    background: rgba(72, 241, 255, .08);
    border-color: rgba(72, 241, 255, .32);
    box-shadow: 0 0 20px rgba(72, 241, 255, .08);
    color: #f6fbff;
}

html[data-app-theme="neon"] .app-modal,
html[data-app-theme="neon"] .content-panel,
html[data-app-theme="neon"] .metric-card,
html[data-app-theme="neon"] .login-card {
    box-shadow: 0 20px 60px rgba(0, 255, 255, .08);
}

html[data-app-theme="neon"] .app-modal {
    background:
        radial-gradient(circle at 10% 0, rgba(72, 241, 255, .12), transparent 18rem),
        radial-gradient(circle at 96% 12%, rgba(247, 255, 60, .08), transparent 16rem),
        #08101f;
    border-color: rgba(72, 241, 255, .22);
    box-shadow: 0 0 0 1px rgba(72, 241, 255, .08), 0 30px 90px rgba(0, 255, 255, .14);
}

html[data-app-theme="neon"] .app-modal .modal-header {
    background: rgba(7, 11, 22, .42);
    border-bottom-color: rgba(72, 241, 255, .16);
}

html[data-app-theme="neon"] .app-modal .app-modal-actions {
    background: linear-gradient(180deg, rgba(7, 11, 22, .36), rgba(72, 241, 255, .06));
    border-top-color: rgba(72, 241, 255, .16);
}

html[data-app-theme="neon"] .form-control,
html[data-app-theme="neon"] .form-select {
    background-color: rgba(7, 11, 22, .78);
    border-color: rgba(72, 241, 255, .18);
}

html[data-app-theme="neon"] .form-control:focus,
html[data-app-theme="neon"] .form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(72, 241, 255, .12);
}

html[data-app-theme="neon"] .customer-search-results {
    background: #08101f;
    border-color: rgba(72, 241, 255, .22);
    box-shadow: 0 0 34px rgba(72, 241, 255, .12);
}

html[data-app-theme="neon"] .customer-search-option:hover,
html[data-app-theme="neon"] .customer-search-option:focus {
    background: linear-gradient(90deg, rgba(72, 241, 255, .12), rgba(247, 255, 60, .06));
}

html[data-app-theme="neon"] .customer-search-clear:hover,
html[data-app-theme="neon"] .customer-search-clear:focus {
    background: rgba(72, 241, 255, .08);
    color: #48f1ff;
}

html[data-app-theme="neon"] .customer-search-selected {
    background: rgba(7, 11, 22, .68);
    border-color: rgba(72, 241, 255, .16);
}

html[data-app-theme="neon"] .form-section {
    background: rgba(7, 11, 22, .34);
    border-color: rgba(72, 241, 255, .14);
}

html[data-app-theme="neon"] .simulation-live-calculator {
    background:
        radial-gradient(circle at top left, rgba(72, 241, 255, .14), transparent 18rem),
        linear-gradient(135deg, rgba(247, 255, 60, .10), rgba(43, 255, 178, .07)),
        rgba(7, 11, 22, .82);
    border-color: rgba(72, 241, 255, .22);
    box-shadow: 0 0 34px rgba(72, 241, 255, .08);
}

html[data-app-theme="neon"] .simulation-live-copy span {
    color: #48f1ff;
    text-shadow: 0 0 12px rgba(72, 241, 255, .34);
}

html[data-app-theme="neon"] .simulation-live-item {
    background: rgba(7, 11, 22, .68);
    border-color: rgba(72, 241, 255, .16);
}

html[data-app-theme="neon"] .simulation-live-item.is-primary {
    background: linear-gradient(135deg, rgba(72, 241, 255, .12), rgba(247, 255, 60, .09));
    border-color: rgba(247, 255, 60, .30);
    box-shadow: 0 0 28px rgba(72, 241, 255, .10);
}

html[data-app-theme="neon"] .simulation-live-item.is-primary strong {
    color: #f8ffad;
    text-shadow: 0 0 14px rgba(247, 255, 60, .18);
}

html[data-app-theme="neon"] .simulation-live-item.is-savings {
    background: linear-gradient(135deg, rgba(43, 255, 178, .12), rgba(247, 255, 60, .06));
    border-color: rgba(43, 255, 178, .24);
    box-shadow: 0 0 24px rgba(43, 255, 178, .07);
}

html[data-app-theme="neon"] .simulation-live-item.is-savings strong,
html[data-app-theme="neon"] .simulation-live-item.is-balance.is-positive strong {
    color: #8dffd5;
    text-shadow: 0 0 14px rgba(43, 255, 178, .22);
}

html[data-app-theme="neon"] .simulation-live-item.is-payback {
    background: linear-gradient(135deg, rgba(72, 241, 255, .12), rgba(43, 255, 178, .05));
    border-color: rgba(72, 241, 255, .24);
    box-shadow: 0 0 24px rgba(72, 241, 255, .08);
}

html[data-app-theme="neon"] .simulation-live-item.is-payback strong {
    color: #abf8ff;
    text-shadow: 0 0 14px rgba(72, 241, 255, .24);
}

html[data-app-theme="neon"] .simulation-live-item.is-balance.is-negative {
    border-color: rgba(255, 92, 161, .30);
}

html[data-app-theme="neon"] .simulation-live-item.is-balance.is-negative strong {
    color: #ff9bc8;
    text-shadow: 0 0 14px rgba(255, 92, 161, .24);
}

html[data-app-theme="neon"] .grid-view .pagination > li > a,
html[data-app-theme="neon"] .grid-view .pagination > li > span,
html[data-app-theme="neon"] .grid-view .pagination .page-link {
    background: rgba(7, 11, 22, .74);
    border-color: rgba(72, 241, 255, .16);
    color: #9fb4d1;
}

html[data-app-theme="neon"] .grid-view .pagination > li > a:hover,
html[data-app-theme="neon"] .grid-view .pagination > li > a:focus,
html[data-app-theme="neon"] .grid-view .pagination .page-link:hover,
html[data-app-theme="neon"] .grid-view .pagination .page-link:focus {
    background: rgba(72, 241, 255, .10);
    border-color: rgba(72, 241, 255, .34);
    color: #f6fbff;
    box-shadow: 0 0 22px rgba(72, 241, 255, .12);
}

html[data-app-theme="neon"] .grid-view .pagination > .active > a,
html[data-app-theme="neon"] .grid-view .pagination > .active > span,
html[data-app-theme="neon"] .grid-view .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #48f1ff, #f7ff3c);
    color: #07101e;
    box-shadow: 0 0 24px rgba(72, 241, 255, .16);
}

html[data-app-theme="neon"] .grid-view .pagination > .disabled > span,
html[data-app-theme="neon"] .grid-view .pagination > .disabled > a,
html[data-app-theme="neon"] .grid-view .pagination .page-item.disabled .page-link {
    background: rgba(7, 11, 22, .44);
    border-color: rgba(72, 241, 255, .08);
    color: rgba(159, 180, 209, .40);
}

html[data-app-theme="neon"] .settings-theme-option:hover,
html[data-app-theme="neon"] .settings-theme-option:focus,
html[data-app-theme="neon"] .settings-theme-option.is-active,
html[data-app-theme="neon"] .settings-language-option:hover,
html[data-app-theme="neon"] .settings-language-option:focus,
html[data-app-theme="neon"] .settings-language-option.is-active {
    border-color: rgba(72, 241, 255, .46);
}

html[data-app-theme="neon"] .settings-theme-option,
html[data-app-theme="neon"] .settings-language-option {
    background: rgba(7, 11, 22, .62);
    border-color: rgba(72, 241, 255, .16);
}

html[data-app-theme="neon"] .settings-theme-option:hover,
html[data-app-theme="neon"] .settings-theme-option:focus,
html[data-app-theme="neon"] .settings-language-option:hover,
html[data-app-theme="neon"] .settings-language-option:focus {
    background: rgba(12, 24, 46, .88);
    box-shadow: 0 0 26px rgba(72, 241, 255, .10);
}

html[data-app-theme="neon"] .settings-theme-option.is-active,
html[data-app-theme="neon"] .settings-language-option.is-active {
    background: linear-gradient(135deg, rgba(72, 241, 255, .12), rgba(247, 255, 60, .08));
    box-shadow: 0 0 0 1px rgba(72, 241, 255, .14), 0 0 28px rgba(72, 241, 255, .12);
}

html[data-app-theme="neon"] .settings-theme-icon {
    background: rgba(72, 241, 255, .10);
    border-color: rgba(72, 241, 255, .20);
    color: #48f1ff;
    text-shadow: 0 0 12px rgba(72, 241, 255, .34);
}

html[data-app-theme="neon"] .settings-theme-option.is-active .settings-theme-icon {
    background: rgba(247, 255, 60, .12);
    border-color: rgba(247, 255, 60, .22);
    color: var(--solar-yellow);
}

html[data-app-theme="neon"] .settings-flag-icon {
    box-shadow: 0 0 20px rgba(72, 241, 255, .08);
}

@media (min-width: 992px) {
    .sidebar.sidebar-fixed.app-sidebar {
        bottom: 0;
        box-shadow: 14px 0 34px rgba(0, 0, 0, .18);
        left: 0;
        margin-left: 0 !important;
        margin-inline-start: 0 !important;
        max-width: var(--sidebar-collapsed-width) !important;
        min-width: var(--sidebar-collapsed-width) !important;
        overflow-x: hidden;
        overflow-y: auto;
        position: fixed;
        top: 0;
        transform: none !important;
        transition:
            width var(--sidebar-effect-duration) cubic-bezier(.16, 1, .3, 1),
            max-width var(--sidebar-effect-duration) cubic-bezier(.16, 1, .3, 1),
            min-width var(--sidebar-effect-duration) cubic-bezier(.16, 1, .3, 1),
            box-shadow var(--sidebar-effect-duration) ease;
        translate: 0 0 !important;
        visibility: visible !important;
        width: var(--sidebar-collapsed-width) !important;
        will-change: width, max-width, min-width;
        z-index: 1030;
    }

    body.sidebar-desktop-expanded .sidebar.sidebar-fixed.app-sidebar {
        box-shadow: 22px 0 54px rgba(0, 0, 0, .28);
        max-width: var(--sidebar-expanded-width) !important;
        min-width: var(--sidebar-expanded-width) !important;
        width: var(--sidebar-expanded-width) !important;
    }

    body:not(.sidebar-mobile-open) .wrapper {
        margin-left: var(--sidebar-collapsed-width) !important;
        padding-left: 0 !important;
        transition: margin-left var(--sidebar-effect-duration) cubic-bezier(.16, 1, .3, 1);
        width: auto;
    }

    body.sidebar-desktop-expanded .wrapper {
        margin-left: var(--sidebar-expanded-width) !important;
    }

    .app-sidebar-toggler {
        display: none;
    }

    .sidebar-header {
        overflow: hidden;
        padding-left: 16px;
        padding-right: 16px;
    }

    .sidebar-brand {
        overflow: visible;
        position: relative;
        width: 100%;
    }

    .sidebar-logo-icon {
        opacity: 1;
        transform: scale(1);
        transition:
            opacity var(--sidebar-effect-duration) ease,
            transform var(--sidebar-effect-duration) cubic-bezier(.16, 1, .3, 1);
    }

    .sidebar-logo-full {
        display: block;
        left: 0;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) translateX(-10px);
        transition:
            opacity var(--sidebar-effect-duration) ease .08s,
            transform var(--sidebar-effect-duration) cubic-bezier(.16, 1, .3, 1);
    }

    body.sidebar-desktop-expanded .sidebar-logo-icon {
        opacity: 0;
        transform: scale(.78);
    }

    body.sidebar-desktop-expanded .sidebar-logo-full {
        height: auto;
        max-height: 40px;
        max-width: 184px;
        opacity: 1;
        transform: translateY(-50%) translateX(0);
        width: auto;
    }

    .sidebar-nav .nav-link {
        align-items: center;
        justify-content: flex-start;
        margin-left: 0;
        margin-right: 0;
        overflow: hidden;
        padding-left: 18px;
        padding-right: 16px;
        transition:
            background .18s ease,
            color .18s ease,
            width var(--sidebar-effect-duration) cubic-bezier(.16, 1, .3, 1);
        white-space: nowrap;
        width: 52px;
    }

    body.sidebar-desktop-expanded .sidebar-nav .nav-link {
        width: 100%;
    }

    .nav-icon {
        flex: 0 0 1rem;
        margin-right: 0;
    }

    .nav-label {
        display: inline-block;
        margin-left: 0;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateX(-6px);
        transition:
            max-width var(--sidebar-effect-duration) cubic-bezier(.16, 1, .3, 1),
            margin-left var(--sidebar-effect-duration) cubic-bezier(.16, 1, .3, 1),
            opacity var(--sidebar-effect-duration) ease,
            transform var(--sidebar-effect-duration) cubic-bezier(.16, 1, .3, 1);
    }

    body.sidebar-desktop-expanded .nav-label {
        margin-left: .75rem;
        max-width: 150px;
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0s, 0s, .08s, .04s;
    }
}

@media (max-width: 991.98px) {
    .app-header-inner {
        gap: 10px;
    }

    .header-logo-link {
        display: inline-flex;
    }

    .app-container {
        padding-top: 22px;
    }

    .sidebar.sidebar-fixed {
        box-shadow: 18px 0 60px rgba(0, 0, 0, .38);
    }

    .sidebar.sidebar-fixed.app-sidebar {
        bottom: 0;
        display: block;
        left: 0;
        margin-left: 0 !important;
        margin-inline-start: 0 !important;
        max-width: min(82vw, 280px);
        position: fixed;
        top: 68px;
        translate: -100% 0 !important;
        transform: none !important;
        transition: translate .22s ease;
        visibility: visible !important;
        width: min(82vw, 280px) !important;
        z-index: 1030;
    }

    .app-sidebar .sidebar-header {
        display: none;
    }

    .sidebar.sidebar-fixed.app-sidebar.is-mobile-open {
        margin-left: 0 !important;
        margin-inline-start: 0 !important;
        translate: 0 0 !important;
        transform: none !important;
    }

    .app-sidebar-backdrop {
        top: 68px;
    }

    .app-sidebar-backdrop.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    body.sidebar-mobile-open {
        overflow: hidden;
    }

    .tutorial-layout,
    .tutorial-hero {
        grid-template-columns: 1fr;
    }

    .tutorial-index {
        position: static;
    }

    .tutorial-quick-actions {
        justify-content: flex-start;
    }

    .tutorial-grid {
        grid-template-columns: 1fr;
    }

    .simulation-live-grid {
        grid-template-columns: 1fr;
    }

    .team-performance-top-layout,
    .performance-modal-chart-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: 14px;
    }

    .app-modal,
    .modal .modal-dialog {
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
    }

    .modal-dialog-centered {
        min-height: calc(100vh - 16px);
        min-height: calc(100dvh - 16px);
    }

    .page-heading {
        display: block;
    }

    .page-heading h1 {
        font-size: 25px;
    }

    .heading-actions {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 16px;
        width: 100%;
    }

    .performance-period-form .heading-actions {
        margin-top: 0;
    }

    .heading-actions .btn,
    .form-actions .btn,
    .table-search-actions .btn,
    .tutorial-quick-actions .btn {
        width: 100%;
    }

    .performance-chart-tabs {
        align-items: stretch;
    }

    .performance-chart-tabs .btn {
        flex: 1 1 calc(50% - 10px);
    }

    .tutorial-profile-badge {
        margin-top: 16px;
        width: 100%;
    }

    .tutorial-status-list {
        grid-template-columns: 1fr;
    }

    .tutorial-step {
        padding: 14px;
    }

    .table-search-form {
        align-items: stretch;
        flex-direction: column;
        max-width: none;
    }

    .table-search-control {
        min-width: 0;
    }

    .table-search-actions {
        width: 100%;
    }

    .grid-view .pagination {
        justify-content: center;
    }

    .grid-view .pagination > li > a,
    .grid-view .pagination > li > span,
    .grid-view .pagination .page-link {
        min-height: 36px;
        min-width: 36px;
        padding: 0 10px;
    }

    .form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .app-modal .app-modal-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .app-modal .app-modal-actions .btn {
        width: auto;
    }

    .metric-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-grid,
    .dashboard-grid-primary {
        grid-template-columns: 1fr;
    }

    .chart-frame,
    .chart-frame-lg,
    .chart-frame-sm {
        min-height: 250px;
    }

    .metric-card,
    .content-panel,
    .login-card {
        border-radius: 16px;
    }

    .content-panel {
        padding: 16px;
    }

    .simulation-live-calculator {
        border-radius: 14px;
        padding: 14px;
    }

    .modal-form-scroll {
        padding: 16px;
    }

    .modal-form-panel .app-modal-actions {
        padding: 14px 16px;
    }

    .user-chip {
        display: none;
    }

    .app-footer {
        display: block;
        padding-bottom: 16px;
        padding-top: 16px;
    }

    .footer-bottom {
        align-items: center;
        gap: 4px;
    }

    .login-shell {
        display: block;
        margin: 0;
        max-width: calc(100vw - 32px);
        width: calc(100vw - 32px);
    }

    .login-copy {
        max-width: 100%;
        overflow: hidden;
        width: 100%;
    }

    .login-logo {
        max-width: min(300px, 100%);
    }

    .login-card {
        margin-top: 24px;
        max-width: 100%;
        padding: 22px;
        width: min(360px, calc(100vw - 32px));
    }

    .guest-shell {
        align-items: flex-start;
        padding: 24px 16px;
    }
}

@media (max-width: 420px) {
    .header-logo {
        max-height: 32px;
        max-width: 52vw;
    }

    .app-sidebar-toggler {
        flex: 0 0 38px;
    }
}