/* 2026-09-24: admin panel mobile heading left spacing */
@media (max-width: 575.98px) {
  .content-wrapper .page-heading {
    margin-left: .25rem !important;
    margin-right: 0 !important;
  }
}


/* 2026-09-21: user panel mobile spacing refinements */
@media (max-width: 575.98px) {
  body.user-panel .content-wrapper .page-heading {
    margin-left: .25rem !important;
    margin-right: 0 !important;
  }
  body.user-panel .home-dashboard-shell .home-metrics-row {
    margin-bottom: .75rem !important;
  }
}
:root { --panel-primary: #3b82f6; --panel-primary-dark: #2563eb; --panel-primary-soft: #eef5ff; --panel-ink: #172033; --panel-muted: #667085; --panel-border: #e3eaf4; --panel-surface: #ffffff; --panel-bg: #f4f7fb; --panel-success: #0f9f77; --panel-shadow: 0 12px 34px rgba(30, 64, 175, .07); }

body, .layout-page, .content-wrapper { background: var(--panel-bg); }

.layout-menu { box-shadow: rgba(15, 35, 64, 0.12) 12px 0px 38px; background: linear-gradient(rgb(16, 35, 63) 0%, rgb(11, 23, 42) 100%) !important; }

.brand-mark { background: linear-gradient(135deg, rgb(96, 165, 250), rgb(37, 99, 235)); box-shadow: rgba(37, 99, 235, 0.28) 0px 8px 22px; }

.layout-menu .menu-item.active > .menu-link { box-shadow: rgb(147, 197, 253) 3px 0px inset, rgba(37, 99, 235, 0.24) 0px 8px 22px; color: rgb(255, 255, 255) !important; background: linear-gradient(135deg, rgb(59, 130, 246), rgb(37, 99, 235)) !important; }

.layout-menu .menu-link:hover { background: rgba(96, 165, 250, 0.12) !important; }

.layout-navbar { border-color: rgba(219, 229, 242, 0.95); backdrop-filter: blur(14px); border-radius: 14px !important; background: rgba(255, 255, 255, 0.94) !important; box-shadow: rgba(30, 64, 175, 0.06) 0px 10px 30px !important; }

.profile-trigger { border-radius: 10px; }

.profile-trigger:hover { background: rgb(239, 246, 255); }

.profile-trigger .avatar { background: linear-gradient(135deg, rgb(96, 165, 250), rgb(37, 99, 235)); }

.card, .category-card, .product-card, .catalog-toolbar { border-color: var(--panel-border); border-radius: 14px; box-shadow: var(--panel-shadow); }

.card:hover, .category-card:hover, .product-card:hover { border-color: rgb(201, 218, 243); box-shadow: rgba(30, 64, 175, 0.09) 0px 16px 38px; }

.metric-icon, .section-title-icon, .category-icon { color: rgb(37, 99, 235); background: rgb(234, 243, 255); border-radius: 11px; }

.metric-card.is-green { --metric-color: #0f9f77; --metric-tint: #e9f9f4; }

.metric-card.is-blue { --metric-color: #2563eb; --metric-tint: #eaf3ff; }

.metric-card.is-orange { --metric-color: #7c6ee6; --metric-tint: #f0efff; }

.metric-card.is-red { --metric-color: #d45463; --metric-tint: #ffedf0; }

.btn { border-radius: 10px; }

.btn-primary, .auth-form-wrap .btn-primary { border-color: rgb(59, 130, 246); background: linear-gradient(135deg, rgb(79, 156, 249), rgb(37, 99, 235)); box-shadow: rgba(37, 99, 235, 0.2) 0px 8px 20px; }

.btn-primary:hover, .auth-form-wrap .btn-primary:hover { border-color: rgb(29, 78, 216); background: linear-gradient(135deg, rgb(59, 130, 246), rgb(29, 78, 216)); transform: translateY(-1px); }

.form-control, .form-select, .select2-container--default .select2-selection--single { background-color: rgb(251, 253, 255); border-color: rgb(214, 225, 239) !important; border-radius: 10px !important; }

.form-control:focus, .form-select:focus { border-color: rgb(96, 165, 250) !important; box-shadow: rgba(59, 130, 246, 0.11) 0px 0px 0px 4px !important; }

.form-check-input:checked { border-color: rgb(59, 130, 246); background-color: rgb(59, 130, 246); }

.category-card:hover { border-color: rgb(139, 184, 242); }

.product-category { border-color: rgb(207, 226, 255); color: rgb(29, 78, 216); background: rgb(239, 246, 255); }

.product-buy, .page-item.active .page-link { border-color: rgb(37, 99, 235); background: rgb(37, 99, 235); }

.product-buy:hover { border-color: rgb(29, 78, 216); background: rgb(29, 78, 216); }

.page-link { color: rgb(37, 99, 235); }

.quick-order-step-number { background: rgb(59, 130, 246); }

.quick-order-price { color: rgb(37, 99, 235) !important; }

.theme-toggle:hover { border-color: rgb(96, 165, 250); background: rgb(239, 246, 255); }

.auth-page, html[data-panel-theme="dark"] .auth-page { background: linear-gradient(135deg, rgb(237, 244, 252) 0%, rgb(248, 251, 255) 100%) !important; }

.auth-shell { border-color: rgb(220, 231, 245); border-radius: 18px; box-shadow: rgba(29, 78, 216, 0.13) 0px 26px 70px; }

.auth-showcase { background: linear-gradient(145deg, rgb(16, 43, 76) 0%, rgb(23, 75, 122) 56%, rgb(59, 130, 246) 100%) !important; }

.auth-showcase::before, .auth-showcase::after { display: block; border-color: rgba(255, 255, 255, 0.12); }

.auth-brand .brand-mark { background: rgba(255, 255, 255, 0.16); }

.auth-message .eyebrow { border-color: rgba(191, 219, 254, 0.35); color: rgb(219, 234, 254); background: rgba(255, 255, 255, 0.08); }

.auth-features i { color: rgb(147, 197, 253); }

.auth-form-eyebrow { color: rgb(37, 99, 235); }

.auth-page .form-check-input:checked, html[data-panel-theme="dark"] .auth-page .form-check-input:checked { border-color: rgb(59, 130, 246); background-color: rgb(59, 130, 246); }

html[data-panel-theme="dark"] { --panel-primary: #60a5fa; --panel-primary-dark: #3b82f6; --panel-primary-soft: #172b48; --panel-ink: #edf4ff; --panel-muted: #9eb0c7; --panel-border: #2a3c54; --panel-surface: #172235; --panel-bg: #0d1624; --panel-success: #42d6aa; --panel-shadow: 0 10px 30px rgba(0,0,0,.20); }

html[data-panel-theme="dark"] .layout-menu { background: linear-gradient(rgb(9, 20, 36) 0%, rgb(7, 16, 29) 100%) !important; }

html[data-panel-theme="dark"] .layout-navbar, html[data-panel-theme="dark"] .card, html[data-panel-theme="dark"] .card-header, html[data-panel-theme="dark"] .card-body, html[data-panel-theme="dark"] .catalog-toolbar, html[data-panel-theme="dark"] .category-card, html[data-panel-theme="dark"] .product-card, html[data-panel-theme="dark"] .modal-content, html[data-panel-theme="dark"] .dropdown-menu, html[data-panel-theme="dark"] .offcanvas, html[data-panel-theme="dark"] .list-group, html[data-panel-theme="dark"] .list-group-item, html[data-panel-theme="dark"] .quick-search-results { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .bg-light, html[data-panel-theme="dark"] .bg-white, html[data-panel-theme="dark"] .table-light, html[data-panel-theme="dark"] .table thead th, html[data-panel-theme="dark"] .table-hover > tbody > tr:hover > * { color: var(--panel-ink) !important; background-color: rgb(29, 42, 62) !important; }

html[data-panel-theme="dark"] .form-control, html[data-panel-theme="dark"] .form-select, html[data-panel-theme="dark"] .select2-selection, html[data-panel-theme="dark"] .select2-dropdown, html[data-panel-theme="dark"] .select2-search__field, html[data-panel-theme="dark"] .input-group-text { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: rgb(17, 28, 44) !important; }

html[data-panel-theme="dark"] .select2-results__option--highlighted, html[data-panel-theme="dark"] .form-check-input:checked, html[data-panel-theme="dark"] .pagination .page-item.active .page-link { color: rgb(255, 255, 255) !important; border-color: rgb(59, 130, 246) !important; background: rgb(59, 130, 246) !important; }

html[data-panel-theme="dark"] .profile-trigger:hover, html[data-panel-theme="dark"] .dropdown-item:hover, html[data-panel-theme="dark"] .nav-tabs .nav-link:hover { background: rgb(29, 42, 62) !important; }

.layout-navbar-fixed .layout-page::before { display: none !important; content: none !important; }

@media (max-width: 575.98px) {
  .auth-page { min-height: 100dvh !important; padding: 0px !important; background: rgb(255, 255, 255) !important; }
  .auth-shell { width: 100% !important; min-height: 100dvh !important; margin: 0px !important; border: 0px !important; border-radius: 0px !important; box-shadow: none !important; background: rgb(255, 255, 255) !important; }
}

:root { --panel-primary: #6558e8; --panel-primary-dark: #4f46c8; --panel-primary-soft: #eeecff; --panel-ink: #20213a; --panel-muted: #74758c; --panel-border: #e9e9f3; --panel-surface: #ffffff; --panel-bg: #f7f7fc; --panel-success: #20a779; --panel-shadow: 0 14px 40px rgba(36, 37, 71, .07); }

body { color: var(--panel-ink); background: var(--panel-bg); font-family: Inter, "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

.layout-page, .content-wrapper { background: var(--panel-bg); }

.layout-menu { border-right: 1px solid rgba(255, 255, 255, 0.08); box-shadow: rgba(24, 23, 47, 0.12) 12px 0px 40px; background: linear-gradient(rgb(37, 35, 62) 0%, rgb(23, 23, 42) 100%) !important; }

.layout-menu .app-brand { height: 86px; padding: 0px 1.5rem; }

.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; flex: 0 0 auto; border-radius: 12px; color: rgb(255, 255, 255); font-size: 18px; font-weight: 800; background: linear-gradient(135deg, rgb(125, 112, 255), rgb(87, 72, 223)); box-shadow: rgba(101, 88, 232, 0.35) 0px 8px 22px; }

.brand-copy { min-width: 0px; color: rgb(255, 255, 255); line-height: 1.15; }

.brand-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.98rem; }

.brand-copy small { display: block; margin-top: 5px; color: rgb(170, 169, 191); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }

.layout-menu .menu-inner { padding: 0.5rem 0.8rem 1rem !important; }

.layout-menu .menu-item { margin: 0.2rem 0px; }

.layout-menu .menu-link { min-height: 46px; border-radius: 12px; font-weight: 500; transition: color 0.2s, background 0.2s, transform 0.2s; color: rgb(185, 184, 202) !important; }

.layout-menu .menu-link:hover { transform: translateX(2px); color: rgb(255, 255, 255) !important; background: rgba(255, 255, 255, 0.07) !important; }

.layout-menu .menu-item.active > .menu-link { box-shadow: rgba(54, 44, 166, 0.32) 0px 8px 24px; color: rgb(255, 255, 255) !important; background: linear-gradient(135deg, rgb(104, 91, 233), rgb(87, 72, 216)) !important; }

.layout-menu .menu-icon { color: inherit !important; }

.layout-navbar { min-height: 70px; border: 1px solid rgba(232, 232, 242, 0.9); backdrop-filter: blur(16px); margin-top: 1.1rem !important; border-radius: 18px !important; background: rgba(255, 255, 255, 0.92) !important; box-shadow: rgba(42, 43, 76, 0.06) 0px 10px 32px !important; }

.navbar-welcome small { display: block; color: var(--panel-muted); font-size: 0.75rem; }

.navbar-welcome strong { color: var(--panel-ink); font-size: 0.93rem; }

.profile-trigger { align-items: center; gap: 0.75rem; border-radius: 13px; display: flex !important; padding: 0.35rem 0.5rem !important; }

.profile-trigger:hover { background: rgb(245, 244, 251); }

.profile-trigger .avatar { display: grid; place-items: center; color: rgb(255, 255, 255); font-weight: 700; background: linear-gradient(135deg, rgb(118, 105, 239), rgb(81, 69, 199)); }

.page-heading { margin: 0.65rem 0px 1.7rem; }

.page-heading h4 { margin: 0px; color: var(--panel-ink); font-size: 1.55rem; letter-spacing: -0.035em; }

.page-heading p { margin: 0.45rem 0px 0px; color: var(--panel-muted); }

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

.metric-card { position: relative; overflow: hidden; height: 100%; }

.metric-card::after { content: ""; position: absolute; right: -32px; bottom: -42px; width: 110px; height: 110px; border-radius: 50%; background: var(--metric-tint, #f0efff); }

.metric-card .card-body { position: relative; z-index: 1; padding: 1.45rem; }

.metric-label { margin-bottom: 0.65rem; color: var(--panel-muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

.metric-value { margin: 0px; color: var(--panel-ink); font-size: 1.75rem; font-weight: 750; letter-spacing: -0.04em; }

.metric-note { display: block; margin-top: 0.38rem; color: var(--panel-muted); font-size: 0.78rem; }

.metric-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: var(--metric-color, var(--panel-primary)); background: var(--metric-tint, var(--panel-primary-soft)); font-size: 1.35rem; }

.metric-card.is-green { --metric-color: #15966d; --metric-tint: #e7f8f1; }

.metric-card.is-blue { --metric-color: #3281dc; --metric-tint: #eaf4ff; }

.metric-card.is-orange { --metric-color: #d98324; --metric-tint: #fff4e6; }

.metric-card.is-red { --metric-color: #d45463; --metric-tint: #ffedf0; }

.order-card .card-body { padding: 1.55rem; }

.section-title { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.4rem; }

.section-title-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--panel-primary); background: var(--panel-primary-soft); font-size: 1.2rem; }

.section-title h5 { margin: 0px; color: var(--panel-ink); font-size: 1.06rem; }

.section-title p { margin: 0.2rem 0px 0px; color: var(--panel-muted); font-size: 0.8rem; }

.form-label { margin-bottom: 0.5rem; color: rgb(80, 81, 106); font-size: 0.82rem; font-weight: 650; }

.form-control, .form-select, .select2-container--default .select2-selection--single { min-height: 46px; background-color: rgb(251, 251, 254); border: 1px solid rgb(223, 223, 235) !important; border-radius: 12px !important; box-shadow: none !important; }

.form-control:focus, .form-select:focus { background: rgb(255, 255, 255); border-color: rgb(139, 128, 236) !important; box-shadow: rgba(101, 88, 232, 0.1) 0px 0px 0px 4px !important; }

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

.btn { min-height: 44px; border-radius: 12px; font-weight: 650; }

.btn-primary { border-color: var(--panel-primary); background: linear-gradient(135deg, rgb(112, 100, 237), rgb(85, 71, 209)); box-shadow: rgba(101, 88, 232, 0.22) 0px 9px 22px; }

.btn-primary:hover { border-color: var(--panel-primary-dark); background: linear-gradient(135deg, rgb(98, 85, 221), rgb(73, 61, 189)); transform: translateY(-1px); }

.alert { border: 0px; border-radius: 14px; }

.catalog-toolbar { padding: 1rem; margin-bottom: 1.35rem; }

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

.product-card { display: flex; min-width: 0px; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; }

.product-card:hover { transform: translateY(-3px); box-shadow: rgba(36, 37, 71, 0.11) 0px 18px 46px; }

.product-card .card-body { display: flex; padding: 1.25rem; flex: 1 1 0%; flex-direction: column; }

.product-category { display: inline-flex; align-self: flex-start; margin-bottom: 0.85rem; padding: 0.35rem 0.65rem; border-radius: 999px; color: var(--panel-primary); background: var(--panel-primary-soft); font-size: 0.68rem; font-weight: 700; }

.product-name { min-height: 2.75rem; margin: 0px 0px 0.55rem; color: var(--panel-ink); font-size: 1rem; line-height: 1.4; }

.product-description { display: -webkit-box; overflow: hidden; margin: 0px 0px 1rem; color: var(--panel-muted); font-size: 0.78rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

.product-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--panel-border); }

.product-price { color: var(--panel-ink); font-size: 1.2rem; font-weight: 750; letter-spacing: -0.03em; }

.product-delivery { display: flex; align-items: center; gap: 0.3rem; color: var(--panel-success); font-size: 0.7rem; font-weight: 650; }

.product-buy { margin-top: 0.9rem; }

.catalog-empty { padding: 3rem 1rem; text-align: center; }

.catalog-empty i { display: block; margin-bottom: 0.75rem; color: var(--panel-muted); font-size: 2.5rem; }

.product-modal-description { max-height: 180px; overflow-y: auto; padding: 0.9rem; border-radius: 12px; color: var(--panel-muted); background: var(--panel-bg); font-size: 0.82rem; line-height: 1.6; white-space: pre-line; }

.pagination { gap: 0.3rem; margin-top: 1.5rem; }

.page-link { border: 0px; color: var(--panel-primary); border-radius: 9px !important; }

.page-item.active .page-link { background: var(--panel-primary); }

.auth-page { min-height: 100vh; padding: 24px; background: rgb(246, 245, 251); }

.auth-shell { display: grid; width: min(1080px, 100%); min-height: 650px; margin: auto; overflow: hidden; border: 1px solid rgb(232, 231, 239); border-radius: 28px; background: rgb(255, 255, 255); box-shadow: rgba(31, 30, 60, 0.13) 0px 28px 80px; grid-template-columns: 1.08fr 0.92fr; }

.auth-showcase { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 3rem; color: rgb(255, 255, 255); background: linear-gradient(145deg, rgb(38, 36, 65) 0%, rgb(74, 63, 193) 65%, rgb(112, 100, 237) 100%); }

.auth-showcase::before, .auth-showcase::after { content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; }

.auth-showcase::before { top: -150px; right: -130px; width: 420px; height: 420px; }

.auth-showcase::after { right: 35px; bottom: -190px; width: 360px; height: 360px; }

.auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.85rem; font-weight: 700; }

.auth-brand .brand-mark { background: rgba(255, 255, 255, 0.16); box-shadow: none; backdrop-filter: blur(12px); }

.auth-message { position: relative; z-index: 1; max-width: 470px; }

.auth-message .eyebrow { display: inline-flex; margin-bottom: 1rem; padding: 0.45rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; color: rgb(222, 219, 255); background: rgba(255, 255, 255, 0.08); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.auth-message h1 { margin: 0px 0px 1rem; color: rgb(255, 255, 255); font-size: clamp(2.15rem, 4vw, 3.4rem); line-height: 1.07; letter-spacing: -0.055em; }

.auth-message p { max-width: 410px; margin: 0px; color: rgb(217, 215, 239); font-size: 1rem; line-height: 1.7; }

.auth-footnote { position: relative; z-index: 1; color: rgb(197, 194, 223); font-size: 0.78rem; }

.auth-form-panel { display: flex; align-items: center; padding: 3.8rem; }

.auth-form-wrap { width: 100%; max-width: 380px; margin: auto; }

.auth-form-wrap h2 { margin: 0px 0px 0.55rem; color: var(--panel-ink); font-size: 1.7rem; letter-spacing: -0.035em; }

.auth-form-wrap > p { margin-bottom: 2rem; color: var(--panel-muted); line-height: 1.6; }

.auth-form-wrap .btn { min-height: 50px; }

@media (max-width: 991.98px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .auth-shell { max-width: 570px; grid-template-columns: 1fr; }
  .auth-showcase { min-height: 260px; padding: 2rem; }
  .auth-message h1 { font-size: 2.25rem; }
  .auth-message p, .auth-footnote { display: none; }
  .auth-form-panel { padding: 2.4rem 2rem; }
  .navbar-welcome { display: none; }
}

@media (max-width: 575.98px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .auth-page { padding: 0px; }
  .auth-shell { min-height: 100vh; border: 0px; border-radius: 0px; }
  .auth-showcase { min-height: 215px; }
  .auth-form-panel { padding: 2rem 1.35rem; }
  .container-p-y { padding-top: 1.15rem !important; }
  .page-heading h4 { font-size: 1.35rem; }
}

:root { --panel-primary: #3b82f6; --panel-primary-dark: #b45309; --panel-primary-soft: #fff7ed; --panel-ink: #172033; --panel-muted: #667085; --panel-border: #e4e7ec; --panel-surface: #ffffff; --panel-bg: #f5f6f8; --panel-success: #15803d; --panel-shadow: 0 1px 2px rgba(16, 24, 40, .04); }

body { background: var(--panel-bg); color: var(--panel-ink); }

.layout-page, .content-wrapper { background: var(--panel-bg); }

.layout-menu { border-right: 0px; box-shadow: none; background: rgb(17, 24, 39) !important; }

.layout-menu .app-brand { height: 76px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

.brand-mark { border-radius: 8px; background: rgb(59, 130, 246); box-shadow: none; }

.brand-copy small { color: rgb(148, 163, 184); }

.layout-menu .menu-inner { padding: 1rem 0.75rem !important; }

.layout-menu .menu-link { min-height: 42px; border-radius: 7px; font-size: 0.84rem; transition: color 0.15s, background 0.15s; color: rgb(174, 184, 200) !important; }

.layout-menu .menu-link:hover { transform: none; color: rgb(255, 255, 255) !important; background: rgba(255, 255, 255, 0.06) !important; }

.layout-menu .menu-item.active > .menu-link { box-shadow: rgb(96, 165, 250) 3px 0px inset; color: rgb(255, 255, 255) !important; background: rgb(38, 50, 71) !important; }

.layout-menu .menu-header-text { color: rgb(113, 128, 150) !important; letter-spacing: 0.08em; }

.layout-navbar { min-height: 64px; border: 1px solid var(--panel-border); backdrop-filter: none; margin-top: 1rem !important; border-radius: 9px !important; background: rgb(255, 255, 255) !important; box-shadow: var(--panel-shadow) !important; }

.profile-trigger { border-radius: 7px; }

.profile-trigger:hover { background: rgb(242, 244, 247); }

.profile-trigger .avatar { background: rgb(36, 48, 68); }

.page-heading { margin: 0.6rem 0px 1.4rem; }

.page-heading h4 { font-size: 1.42rem; letter-spacing: -0.02em; }

.page-heading p { margin-top: 0.35rem; font-size: 0.84rem; }

.card { border: 1px solid var(--panel-border); border-radius: 10px; box-shadow: var(--panel-shadow); }

.metric-card::after { display: none; }

.metric-card .card-body { padding: 1.25rem; }

.metric-label { color: rgb(102, 112, 133); font-size: 0.7rem; letter-spacing: 0.04em; }

.metric-value { font-size: 1.65rem; letter-spacing: -0.025em; }

.metric-icon { width: 42px; height: 42px; border-radius: 8px; color: rgb(180, 83, 9); background: rgb(255, 247, 237); }

.metric-card.is-green, .metric-card.is-blue, .metric-card.is-orange, .metric-card.is-red { --metric-color: #344054; --metric-tint: #f2f4f7; }

.order-card .card-body { padding: 1.4rem; }

.section-title-icon { border-radius: 8px; color: rgb(180, 83, 9); background: rgb(255, 247, 237); }

.form-control, .form-select, .select2-container--default .select2-selection--single { min-height: 44px; background: rgb(255, 255, 255); border-color: rgb(208, 213, 221) !important; border-radius: 7px !important; }

.form-control:focus, .form-select:focus { border-color: rgb(59, 130, 246) !important; box-shadow: rgba(217, 119, 6, 0.1) 0px 0px 0px 3px !important; }

.btn { min-height: 42px; border-radius: 7px; }

.btn-primary { border-color: rgb(59, 130, 246); background: rgb(59, 130, 246); box-shadow: none; }

.btn-primary:hover { border-color: rgb(180, 83, 9); background: rgb(180, 83, 9); transform: none; }

.catalog-toolbar { border-radius: 9px; box-shadow: none; }

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

.category-card { display: flex; min-height: 86px; align-items: center; gap: 0.85rem; padding: 1rem; border: 1px solid var(--panel-border); border-radius: 9px; color: var(--panel-ink); background: var(--panel-surface); transition: border-color 0.15s, box-shadow 0.15s; }

.category-card:hover { border-color: rgb(59, 130, 246); color: var(--panel-ink); box-shadow: rgba(16, 24, 40, 0.06) 0px 4px 12px; }

.category-icon { display: grid; width: 42px; height: 42px; place-items: center; flex: 0 0 auto; border-radius: 8px; color: rgb(180, 83, 9); background: var(--panel-primary-soft); font-size: 1.25rem; }

.category-copy { min-width: 0px; }

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

.category-copy strong { overflow: hidden; color: var(--panel-ink); font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; }

.category-copy small { margin-top: 0.3rem; color: var(--panel-muted); font-size: 0.7rem; }

.category-arrow { margin-left: auto; color: var(--panel-muted); font-size: 1.25rem; }

.catalog-grid { gap: 0.85rem; }

.product-card { border-radius: 9px; box-shadow: none; }

.product-card:hover { border-color: rgb(208, 213, 221); transform: none; box-shadow: rgba(16, 24, 40, 0.06) 0px 4px 12px; }

.product-category { border: 1px solid rgb(254, 215, 170); border-radius: 5px; color: rgb(154, 52, 18); background: rgb(255, 247, 237); }

.product-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; }

.product-card-head .product-category { margin-bottom: 0px; }

.product-logo { display: grid; width: 44px; height: 44px; place-items: center; flex: 0 0 auto; border: 1px solid var(--panel-border); border-radius: 8px; background: rgb(255, 255, 255); }

.product-logo img { width: 25px; height: 25px; object-fit: contain; }

.product-logo i { color: rgb(71, 84, 103); font-size: 1.35rem; }

.product-meta { border-color: rgb(234, 236, 240); }

.product-buy { background: rgb(23, 32, 51); border-color: rgb(23, 32, 51); }

.product-buy:hover { background: rgb(39, 54, 79); border-color: rgb(39, 54, 79); }

.page-item.active .page-link { background: rgb(23, 32, 51); }

.page-link { color: rgb(52, 64, 84); }

.auth-page { background: rgb(238, 240, 243); }

.auth-shell { border-color: rgb(223, 227, 232); border-radius: 12px; box-shadow: rgba(16, 24, 40, 0.12) 0px 18px 55px; }

.auth-showcase { background: rgb(17, 24, 39); }

.auth-showcase::before, .auth-showcase::after { display: none; }

.auth-brand .brand-mark { background: rgb(59, 130, 246); }

.auth-message .eyebrow { border: 1px solid rgb(59, 70, 88); border-radius: 5px; color: rgb(251, 191, 36); background: transparent; }

.auth-message h1 { letter-spacing: -0.035em; }

.auth-features { display: grid; gap: 0.65rem; margin-top: 1.6rem; }

.auth-features span { display: flex; align-items: center; gap: 0.55rem; color: rgb(213, 219, 229); font-size: 0.8rem; }

.auth-features i { color: rgb(96, 165, 250); font-size: 1rem; }

.auth-form-eyebrow { display: block; margin-bottom: 0.65rem; color: rgb(180, 83, 9); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.auth-security-note { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 1.35rem; color: rgb(102, 112, 133); font-size: 0.72rem; }

.theme-toggle { display: grid; width: 38px; height: 38px; padding: 0px; place-items: center; border: 1px solid var(--panel-border); border-radius: 7px; color: var(--panel-ink); background: var(--panel-surface); font-size: 1.1rem; transition: border-color 0.15s, background 0.15s; }

.theme-toggle:hover { border-color: rgb(59, 130, 246); background: var(--panel-primary-soft); }

.auth-theme-toggle { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 10; }

html[data-panel-theme="dark"] { color-scheme: dark; --panel-primary: #60a5fa; --panel-primary-dark: #3b82f6; --panel-primary-soft: #172b48; --panel-ink: #f1f5f9; --panel-muted: #9aa6b6; --panel-border: #303a48; --panel-surface: #1a2029; --panel-bg: #10141b; --panel-success: #4ade80; --panel-shadow: 0 1px 2px rgba(0, 0, 0, .22); }

html[data-panel-theme="dark"] body, html[data-panel-theme="dark"] .layout-page, html[data-panel-theme="dark"] .content-wrapper { background: var(--panel-bg); color: var(--panel-ink); }

html[data-panel-theme="dark"] .layout-menu { background: rgb(11, 15, 21) !important; }

html[data-panel-theme="dark"] .layout-navbar, html[data-panel-theme="dark"] .card, html[data-panel-theme="dark"] .modal-content, html[data-panel-theme="dark"] .dropdown-menu { border-color: var(--panel-border); color: var(--panel-ink); background: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .navbar-welcome strong, html[data-panel-theme="dark"] .page-heading h4, html[data-panel-theme="dark"] .metric-value, html[data-panel-theme="dark"] .section-title h5, html[data-panel-theme="dark"] .product-name, html[data-panel-theme="dark"] .product-price, html[data-panel-theme="dark"] .modal-title { color: var(--panel-ink); }

html[data-panel-theme="dark"] .profile-trigger:hover { background: rgb(37, 45, 56); }

html[data-panel-theme="dark"] .form-control, html[data-panel-theme="dark"] .form-select, html[data-panel-theme="dark"] .select2-container--default .select2-selection--single, html[data-panel-theme="dark"] .input-group-text { color: var(--panel-ink); background-color: rgb(21, 27, 35); border-color: var(--panel-border) !important; }

html[data-panel-theme="dark"] .form-control:disabled, html[data-panel-theme="dark"] .form-control[readonly] { color: rgb(141, 153, 169); background: rgb(19, 24, 32); }

html[data-panel-theme="dark"] .form-control::placeholder { color: rgb(111, 123, 140); }

html[data-panel-theme="dark"] .product-modal-description { background: rgb(17, 23, 31); }

html[data-panel-theme="dark"] .product-category { border-color: rgb(36, 76, 120); color: rgb(147, 197, 253); background: rgb(23, 43, 72); }

html[data-panel-theme="dark"] .product-logo { background: rgb(248, 250, 252); }

html[data-panel-theme="dark"] .product-logo img { filter: none; }

html[data-panel-theme="dark"] .product-buy { border-color: rgb(59, 130, 246); background: rgb(59, 130, 246); }

html[data-panel-theme="dark"] .dropdown-divider, html[data-panel-theme="dark"] .product-meta { border-color: var(--panel-border); }

html[data-panel-theme="dark"] .dropdown-item { color: var(--panel-ink); }

html[data-panel-theme="dark"] .dropdown-item:hover { background: rgb(37, 45, 56); }

html[data-panel-theme="dark"] .auth-page { background: rgb(13, 17, 23); }

html[data-panel-theme="dark"] .auth-shell { border-color: rgb(43, 52, 65); background: var(--panel-surface); }

html[data-panel-theme="dark"] .auth-form-wrap h2 { color: var(--panel-ink); }

html[data-panel-theme="light"] body, html[data-panel-theme="light"] .layout-page, html[data-panel-theme="light"] .content-wrapper { color: rgb(29, 41, 57); }

html[data-panel-theme="light"] h1, html[data-panel-theme="light"] h2, html[data-panel-theme="light"] h3, html[data-panel-theme="light"] h4, html[data-panel-theme="light"] h5, html[data-panel-theme="light"] h6, html[data-panel-theme="light"] .card-title, html[data-panel-theme="light"] .modal-title { color: rgb(23, 32, 51); }

html[data-panel-theme="light"] p, html[data-panel-theme="light"] small, html[data-panel-theme="light"] .text-muted { color: rgb(102, 112, 133) !important; }

html[data-panel-theme="light"] .page-heading p, html[data-panel-theme="light"] .metric-note, html[data-panel-theme="light"] .product-description, html[data-panel-theme="light"] .section-title p { color: rgb(102, 112, 133); }

html[data-panel-theme="light"] .form-label, html[data-panel-theme="light"] label { color: rgb(52, 64, 84); }

html[data-panel-theme="light"] .form-control, html[data-panel-theme="light"] .form-select, html[data-panel-theme="light"] .select2-selection, html[data-panel-theme="light"] .select2-selection__rendered { color: rgb(29, 41, 57) !important; }

html[data-panel-theme="light"] .form-control::placeholder { color: rgb(152, 162, 179); opacity: 1; }

html[data-panel-theme="light"] .form-control:disabled, html[data-panel-theme="light"] .form-control[readonly] { color: rgb(71, 84, 103); background: rgb(242, 244, 247); opacity: 1; }

html[data-panel-theme="light"] .table { color: rgb(52, 64, 84); }

html[data-panel-theme="light"] .table > :not(caption) > * > * { border-color: rgb(234, 236, 240); color: rgb(52, 64, 84); }

html[data-panel-theme="light"] .table thead th { color: rgb(71, 84, 103); background: rgb(249, 250, 251); }

html[data-panel-theme="light"] .dropdown-menu { color: rgb(52, 64, 84); background: rgb(255, 255, 255); }

html[data-panel-theme="light"] .dropdown-item { color: rgb(52, 64, 84); }

html[data-panel-theme="light"] .dropdown-item:hover { color: rgb(23, 32, 51); background: rgb(242, 244, 247); }

html[data-panel-theme="light"] .pagination .page-link { color: rgb(52, 64, 84); background: rgb(255, 255, 255); }

html[data-panel-theme="light"] .pagination .page-item.active .page-link { color: rgb(255, 255, 255); background: rgb(23, 32, 51); }

html[data-panel-theme="light"] .alert { color: rgb(52, 64, 84); }

html[data-panel-theme="light"] .product-modal-description { color: rgb(71, 84, 103); }

html[data-panel-theme="light"] .auth-form-wrap > p { color: rgb(102, 112, 133); }

html[data-panel-theme="light"] .auth-form-wrap .form-check-label { color: rgb(71, 84, 103); }

html[data-panel-theme="light"] .navbar-welcome small { color: rgb(102, 112, 133); }

.auth-page { padding: 32px; background: rgb(238, 241, 244) !important; }

.auth-shell { width: min(1040px, 100%); min-height: 620px; border-radius: 10px; }

.auth-showcase { padding: 2.8rem; background: rgb(17, 24, 39) !important; }

.auth-form-panel { padding: 3.5rem; background: rgb(255, 255, 255); }

.auth-form-wrap { max-width: 360px; }

.auth-form-wrap h2 { font-size: 1.65rem; }

.auth-form-wrap .form-control { background: rgb(255, 255, 255); }

.auth-form-wrap .btn-primary { background: rgb(59, 130, 246); border-color: rgb(59, 130, 246); }

.auth-form-wrap .btn-primary:hover { background: rgb(180, 83, 9); border-color: rgb(180, 83, 9); }

@media (max-width: 991.98px) {
  .category-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}

@media (max-width: 575.98px) {
  .category-grid { grid-template-columns: 1fr; }
}

html[data-panel-theme="dark"] { --bs-body-bg: var(--panel-bg); --bs-body-color: var(--panel-ink); --bs-border-color: var(--panel-border); }

html[data-panel-theme="dark"] body, html[data-panel-theme="dark"] .layout-wrapper, html[data-panel-theme="dark"] .layout-container, html[data-panel-theme="dark"] .layout-page, html[data-panel-theme="dark"] .content-wrapper, html[data-panel-theme="dark"] .content-backdrop, html[data-panel-theme="dark"] .container-xxl { color: var(--panel-ink); background-color: var(--panel-bg); }

html[data-panel-theme="dark"] .card, html[data-panel-theme="dark"] .card-header, html[data-panel-theme="dark"] .card-body, html[data-panel-theme="dark"] .catalog-toolbar, html[data-panel-theme="dark"] .category-card, html[data-panel-theme="dark"] .product-card, html[data-panel-theme="dark"] .list-group, html[data-panel-theme="dark"] .list-group-item, html[data-panel-theme="dark"] .modal-content, html[data-panel-theme="dark"] .modal-header, html[data-panel-theme="dark"] .modal-body, html[data-panel-theme="dark"] .modal-footer, html[data-panel-theme="dark"] .dropdown-menu, html[data-panel-theme="dark"] .offcanvas, html[data-panel-theme="dark"] .quick-search-results { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .bg-light, html[data-panel-theme="dark"] .bg-white, html[data-panel-theme="dark"] .table-light, html[data-panel-theme="dark"] .list-group-item-action:hover, html[data-panel-theme="dark"] .list-group-item-action:focus { color: var(--panel-ink) !important; background-color: rgb(32, 40, 51) !important; }

html[data-panel-theme="dark"] .table, html[data-panel-theme="dark"] .table > :not(caption) > * > *, html[data-panel-theme="dark"] .table thead th, html[data-panel-theme="dark"] .table tbody td { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: transparent !important; }

html[data-panel-theme="dark"] .table thead th { background-color: rgb(32, 40, 51) !important; }

html[data-panel-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgb(32, 40, 51) !important; }

html[data-panel-theme="dark"] h1, html[data-panel-theme="dark"] h2, html[data-panel-theme="dark"] h3, html[data-panel-theme="dark"] h4, html[data-panel-theme="dark"] h5, html[data-panel-theme="dark"] h6, html[data-panel-theme="dark"] .card-title, html[data-panel-theme="dark"] .category-copy strong, html[data-panel-theme="dark"] label, html[data-panel-theme="dark"] .form-label { color: var(--panel-ink) !important; }

html[data-panel-theme="dark"] p, html[data-panel-theme="dark"] small, html[data-panel-theme="dark"] .text-muted, html[data-panel-theme="dark"] .form-text { color: var(--panel-muted) !important; }

html[data-panel-theme="dark"] .form-control, html[data-panel-theme="dark"] .form-select, html[data-panel-theme="dark"] .select2-selection, html[data-panel-theme="dark"] .select2-dropdown, html[data-panel-theme="dark"] .select2-search__field, html[data-panel-theme="dark"] .input-group-text { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: rgb(21, 27, 35) !important; }

html[data-panel-theme="dark"] .select2-results__option { color: var(--panel-ink); background: var(--panel-surface); }

html[data-panel-theme="dark"] .select2-results__option--highlighted { color: rgb(255, 255, 255); background: rgb(59, 130, 246); }

html[data-panel-theme="dark"] .form-check-input { border-color: rgb(83, 96, 113); background-color: rgb(21, 27, 35); }

html[data-panel-theme="dark"] .form-check-input:checked { border-color: rgb(59, 130, 246); background-color: rgb(59, 130, 246); }

html[data-panel-theme="dark"] .pagination .page-link { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .pagination .page-item.active .page-link { color: rgb(255, 255, 255) !important; background-color: rgb(59, 130, 246) !important; }

html[data-panel-theme="dark"] .btn-label-secondary, html[data-panel-theme="dark"] .btn-outline-secondary { border-color: rgb(70, 82, 100); color: rgb(214, 221, 232); background-color: transparent; }

html[data-panel-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }

html[data-panel-theme="dark"] .dropdown-divider, html[data-panel-theme="dark"] .border-top { border-color: var(--panel-border) !important; }

html[data-panel-theme="dark"] .nav-tabs { border-bottom-color: var(--panel-border) !important; }

html[data-panel-theme="dark"] .nav-tabs .nav-link { border-color: transparent !important; color: var(--panel-muted) !important; }

html[data-panel-theme="dark"] .nav-tabs .nav-link:hover, html[data-panel-theme="dark"] .nav-tabs .nav-link:focus { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: rgb(32, 40, 51) !important; }

html[data-panel-theme="dark"] .nav-tabs .nav-link.active, html[data-panel-theme="dark"] .tab-content { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: var(--panel-surface) !important; }

.quick-search-results { border: 1px solid var(--panel-border); border-radius: 7px; background: var(--panel-surface); }

.quick-search-results .list-group-item { border-color: var(--panel-border); color: var(--panel-ink); background: var(--panel-surface); }

.auth-page, html[data-panel-theme="dark"] .auth-page { color-scheme: light; color: rgb(52, 64, 84); background: rgb(238, 241, 244) !important; }

.auth-page .auth-shell, html[data-panel-theme="dark"] .auth-page .auth-shell { border-color: rgb(223, 227, 232) !important; color: rgb(52, 64, 84) !important; background: rgb(255, 255, 255) !important; }

.auth-page .auth-form-panel, html[data-panel-theme="dark"] .auth-page .auth-form-panel { color: rgb(52, 64, 84) !important; background: rgb(255, 255, 255) !important; }

.auth-page .auth-form-wrap h2, html[data-panel-theme="dark"] .auth-page .auth-form-wrap h2 { color: rgb(23, 32, 51) !important; }

.auth-page .auth-form-wrap > p, .auth-page .auth-security-note, html[data-panel-theme="dark"] .auth-page .auth-form-wrap > p, html[data-panel-theme="dark"] .auth-page .auth-security-note { color: rgb(102, 112, 133) !important; }

.auth-page .form-label, .auth-page .form-check-label, html[data-panel-theme="dark"] .auth-page .form-label, html[data-panel-theme="dark"] .auth-page .form-check-label { color: rgb(52, 64, 84) !important; }

.auth-page .form-control, html[data-panel-theme="dark"] .auth-page .form-control { border-color: rgb(208, 213, 221) !important; color: rgb(29, 41, 57) !important; background: rgb(255, 255, 255) !important; }

.auth-page .form-control::placeholder, html[data-panel-theme="dark"] .auth-page .form-control::placeholder { color: rgb(152, 162, 179) !important; }

.auth-page .form-check-input, html[data-panel-theme="dark"] .auth-page .form-check-input { border-color: rgb(184, 192, 204); background-color: rgb(255, 255, 255); }

.auth-page .form-check-input:checked, html[data-panel-theme="dark"] .auth-page .form-check-input:checked { border-color: rgb(59, 130, 246); background-color: rgb(59, 130, 246); }

@media (max-width: 575.98px) {
  .auth-page { padding: 0px !important; }
  .layout-navbar { margin-inline: 0.75rem !important; }
  .card-header, .card-body { padding-inline: 1rem; }
}

.layout-menu .menu-inner-shadow, html[data-panel-theme="light"] .layout-menu .menu-inner-shadow, html[data-panel-theme="dark"] .layout-menu .menu-inner-shadow { display: none !important; background: transparent !important; box-shadow: none !important; }

.layout-menu .brand-copy small, html[data-panel-theme="light"] .layout-menu .brand-copy small, html[data-panel-theme="dark"] .layout-menu .brand-copy small { color: rgb(148, 163, 184) !important; }

.auth-form-wrap { max-width: 420px; }

@media (max-width: 575.98px) {
  html:has(.auth-page), body:has(.auth-page), .auth-page, .auth-shell, .auth-form-panel { background: rgb(255, 255, 255) !important; }
  html:has(.auth-page), body:has(.auth-page) { min-height: 100%; }
  .auth-form-panel { width: 100%; padding: 2rem 1rem !important; }
  .auth-form-wrap { width: 100%; max-width: 420px; }
  .auth-form-wrap .form-control { min-height: 50px; }
  .auth-form-wrap .btn { min-height: 54px; }
}

.quick-order-card .card-body { padding: 1.5rem; }

.quick-order-title { margin-bottom: 1.25rem; }

.quick-order-step { display: flex; align-items: flex-start; gap: 0.85rem; }

.quick-order-step-number { display: grid; width: 28px; height: 28px; place-items: center; flex: 0 0 28px; margin-top: 1.85rem; border-radius: 50%; color: rgb(255, 255, 255); background: rgb(59, 130, 246); font-size: 0.75rem; font-weight: 700; }

.quick-order-search .input-group-text { border-right: 0px !important; }

.quick-order-search .form-control { border-left: 0px !important; }

.quick-order-hint { display: block; margin-top: 0.45rem; color: var(--panel-muted); }

.quick-order-alternative { margin: 1rem 0px 0px 2.6rem; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel-surface); }

.quick-order-alternative summary { padding: 0.8rem 1rem; color: var(--panel-ink); cursor: pointer; font-size: 0.82rem; font-weight: 650; }

.quick-order-alternative-body { padding: 0px 1rem 1rem; }

.quick-order-summary { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--panel-border); }

.quick-order-required-fields { margin: 1rem 0px 0px 2.6rem; }

.quick-order-price { color: rgb(180, 83, 9) !important; font-weight: 700; }

html[data-panel-theme="dark"] .quick-order-alternative { border-color: var(--panel-border); background: var(--panel-surface); }

@media (max-width: 575.98px) {
  .quick-order-card .card-body { padding: 1rem; }
  .quick-order-step { gap: 0.65rem; }
  .quick-order-step-number { width: 24px; height: 24px; flex-basis: 24px; }
  .quick-order-alternative, .quick-order-required-fields { margin-left: 0px; }
}

.quick-order-alternative-open { border: 0px !important; background: transparent !important; }

.quick-order-alternative-open .quick-order-alternative-body { padding: 0px !important; }

.quick-order-step { display: block !important; }

.quick-order-summary { padding-top: 0px !important; border-top: 0px !important; }

.quick-order-search { position: relative; }

.quick-order-search-icon { position: absolute; top: 50%; left: 1rem; z-index: 2; color: var(--panel-muted); font-size: 1.1rem; pointer-events: none; transform: translateY(-50%); }

.quick-order-search .form-control { padding-left: 2.75rem !important; border: 1px solid rgb(208, 213, 221) !important; border-radius: 7px !important; }

html[data-panel-theme="dark"] .quick-order-search .form-control { border-color: var(--panel-border) !important; }

.quick-order-alternative-open { width: 100% !important; margin: 1rem 0px 0px !important; }

.quick-order-alternative-open .select2-container--default .select2-selection--single { display: flex !important; align-items: center !important; }

.quick-order-alternative-open .select2-container--default .select2-selection--single .select2-selection__rendered { min-height: inherit; width: 100%; display: flex !important; align-items: center !important; padding-top: 0px !important; padding-bottom: 0px !important; line-height: normal !important; }

.quick-order-alternative-open .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50% !important; transform: translateY(-50%); }

.quick-order-price { font-weight: 400 !important; }

.quick-order-required-fields { width: 100% !important; max-width: none !important; margin: 1rem 0px 0px !important; }

:root { --panel-primary: #3b82f6; --panel-primary-dark: #2563eb; --panel-primary-soft: #eef5ff; --panel-ink: #172033; --panel-muted: #667085; --panel-border: #e3eaf4; --panel-surface: #ffffff; --panel-bg: #f4f7fb; --panel-success: #0f9f77; --panel-shadow: 0 12px 34px rgba(30, 64, 175, .07); }

body, .layout-page, .content-wrapper { background: var(--panel-bg); }

.layout-menu { box-shadow: rgba(15, 35, 64, 0.12) 12px 0px 38px; background: linear-gradient(rgb(16, 35, 63) 0%, rgb(11, 23, 42) 100%) !important; }

.brand-mark { background: linear-gradient(135deg, rgb(96, 165, 250), rgb(37, 99, 235)); box-shadow: rgba(37, 99, 235, 0.28) 0px 8px 22px; }

.layout-menu .menu-item.active > .menu-link { box-shadow: rgb(147, 197, 253) 3px 0px inset, rgba(37, 99, 235, 0.24) 0px 8px 22px; color: rgb(255, 255, 255) !important; background: linear-gradient(135deg, rgb(59, 130, 246), rgb(37, 99, 235)) !important; }

.layout-menu .menu-link:hover { background: rgba(96, 165, 250, 0.12) !important; }

.layout-navbar { border-color: rgba(219, 229, 242, 0.95); backdrop-filter: blur(14px); border-radius: 14px !important; background: rgba(255, 255, 255, 0.94) !important; box-shadow: rgba(30, 64, 175, 0.06) 0px 10px 30px !important; }

.profile-trigger { border-radius: 10px; }

.profile-trigger:hover { background: rgb(239, 246, 255); }

.profile-trigger .avatar { background: linear-gradient(135deg, rgb(96, 165, 250), rgb(37, 99, 235)); }

.card, .category-card, .product-card, .catalog-toolbar { border-color: var(--panel-border); border-radius: 14px; box-shadow: var(--panel-shadow); }

.card:hover, .category-card:hover, .product-card:hover { border-color: rgb(201, 218, 243); box-shadow: rgba(30, 64, 175, 0.09) 0px 16px 38px; }

.metric-icon, .section-title-icon, .category-icon { color: rgb(37, 99, 235); background: rgb(234, 243, 255); border-radius: 11px; }

.metric-card.is-green { --metric-color: #0f9f77; --metric-tint: #e9f9f4; }

.metric-card.is-blue { --metric-color: #2563eb; --metric-tint: #eaf3ff; }

.metric-card.is-orange { --metric-color: #7c6ee6; --metric-tint: #f0efff; }

.metric-card.is-red { --metric-color: #d45463; --metric-tint: #ffedf0; }

.btn { border-radius: 10px; }

.btn-primary, .auth-form-wrap .btn-primary { border-color: rgb(59, 130, 246); background: linear-gradient(135deg, rgb(79, 156, 249), rgb(37, 99, 235)); box-shadow: rgba(37, 99, 235, 0.2) 0px 8px 20px; }

.btn-primary:hover, .auth-form-wrap .btn-primary:hover { border-color: rgb(29, 78, 216); background: linear-gradient(135deg, rgb(59, 130, 246), rgb(29, 78, 216)); transform: translateY(-1px); }

.form-control, .form-select, .select2-container--default .select2-selection--single { background-color: rgb(251, 253, 255); border-color: rgb(214, 225, 239) !important; border-radius: 10px !important; }

.form-control:focus, .form-select:focus { border-color: rgb(96, 165, 250) !important; box-shadow: rgba(59, 130, 246, 0.11) 0px 0px 0px 4px !important; }

.form-check-input:checked { border-color: rgb(59, 130, 246); background-color: rgb(59, 130, 246); }

.category-card:hover { border-color: rgb(139, 184, 242); }

.product-category { border-color: rgb(207, 226, 255); color: rgb(29, 78, 216); background: rgb(239, 246, 255); }

.product-buy, .page-item.active .page-link { border-color: rgb(37, 99, 235); background: rgb(37, 99, 235); }

.product-buy:hover { border-color: rgb(29, 78, 216); background: rgb(29, 78, 216); }

.page-link { color: rgb(37, 99, 235); }

.quick-order-step-number { background: rgb(59, 130, 246); }

.quick-order-price { color: rgb(37, 99, 235) !important; }

.theme-toggle:hover { border-color: rgb(96, 165, 250); background: rgb(239, 246, 255); }

.auth-page, html[data-panel-theme="dark"] .auth-page { background: linear-gradient(135deg, rgb(237, 244, 252) 0%, rgb(248, 251, 255) 100%) !important; }

.auth-shell { border-color: rgb(220, 231, 245); border-radius: 18px; box-shadow: rgba(29, 78, 216, 0.13) 0px 26px 70px; }

.auth-showcase { background: linear-gradient(145deg, rgb(16, 43, 76) 0%, rgb(23, 75, 122) 56%, rgb(59, 130, 246) 100%) !important; }

.auth-showcase::before, .auth-showcase::after { display: block; border-color: rgba(255, 255, 255, 0.12); }

.auth-brand .brand-mark { background: rgba(255, 255, 255, 0.16); }

.auth-message .eyebrow { border-color: rgba(191, 219, 254, 0.35); color: rgb(219, 234, 254); background: rgba(255, 255, 255, 0.08); }

.auth-features i { color: rgb(147, 197, 253); }

.auth-form-eyebrow { color: rgb(37, 99, 235); }

.auth-page .form-check-input:checked, html[data-panel-theme="dark"] .auth-page .form-check-input:checked { border-color: rgb(59, 130, 246); background-color: rgb(59, 130, 246); }

html[data-panel-theme="dark"] { --panel-primary: #60a5fa; --panel-primary-dark: #3b82f6; --panel-primary-soft: #172b48; --panel-ink: #edf4ff; --panel-muted: #9eb0c7; --panel-border: #2a3c54; --panel-surface: #172235; --panel-bg: #0d1624; --panel-success: #42d6aa; --panel-shadow: 0 10px 30px rgba(0,0,0,.20); }

html[data-panel-theme="dark"] .layout-menu { background: linear-gradient(rgb(9, 20, 36) 0%, rgb(7, 16, 29) 100%) !important; }

html[data-panel-theme="dark"] .layout-navbar, html[data-panel-theme="dark"] .card, html[data-panel-theme="dark"] .card-header, html[data-panel-theme="dark"] .card-body, html[data-panel-theme="dark"] .catalog-toolbar, html[data-panel-theme="dark"] .category-card, html[data-panel-theme="dark"] .product-card, html[data-panel-theme="dark"] .modal-content, html[data-panel-theme="dark"] .dropdown-menu, html[data-panel-theme="dark"] .offcanvas, html[data-panel-theme="dark"] .list-group, html[data-panel-theme="dark"] .list-group-item, html[data-panel-theme="dark"] .quick-search-results { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .bg-light, html[data-panel-theme="dark"] .bg-white, html[data-panel-theme="dark"] .table-light, html[data-panel-theme="dark"] .table thead th, html[data-panel-theme="dark"] .table-hover > tbody > tr:hover > * { color: var(--panel-ink) !important; background-color: rgb(29, 42, 62) !important; }

html[data-panel-theme="dark"] .form-control, html[data-panel-theme="dark"] .form-select, html[data-panel-theme="dark"] .select2-selection, html[data-panel-theme="dark"] .select2-dropdown, html[data-panel-theme="dark"] .select2-search__field, html[data-panel-theme="dark"] .input-group-text { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: rgb(17, 28, 44) !important; }

html[data-panel-theme="dark"] .select2-results__option--highlighted, html[data-panel-theme="dark"] .form-check-input:checked, html[data-panel-theme="dark"] .pagination .page-item.active .page-link { color: rgb(255, 255, 255) !important; border-color: rgb(59, 130, 246) !important; background: rgb(59, 130, 246) !important; }

html[data-panel-theme="dark"] .profile-trigger:hover, html[data-panel-theme="dark"] .dropdown-item:hover, html[data-panel-theme="dark"] .nav-tabs .nav-link:hover { background: rgb(29, 42, 62) !important; }

.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner > .menu-item.active::before { display: none !important; content: none !important; }

.metric-value { color: rgb(52, 64, 84); font-weight: 600; letter-spacing: -0.02em; }

html[data-panel-theme="dark"] .metric-value { color: rgb(219, 231, 245) !important; font-weight: 600; }

.metric-value { color: rgb(95, 111, 133); font-weight: 500; }

html[data-panel-theme="dark"] .metric-value { color: rgb(199, 212, 228) !important; font-weight: 500; }

.avatar-fixed-icon { place-items: center; display: grid !important; }

.avatar-fixed-icon .bx { font-size: 1.25rem; line-height: 1; }

.avatar-fixed-icon { overflow: visible; border-radius: 50% !important; }

.product-logo img { width: 32px; height: 32px; object-fit: contain; filter: none !important; }

.auth-message > p { font-weight: 500; text-shadow: rgba(0, 0, 0, 0.18) 0px 1px 1px; color: rgb(219, 234, 254) !important; opacity: 1 !important; }

html[data-panel-theme="dark"] .layout-navbar, html[data-panel-theme="dark"] .metric-card, html[data-panel-theme="dark"] .order-card, html[data-panel-theme="dark"] .quick-order-card, html[data-panel-theme="dark"] .card, html[data-panel-theme="dark"] .card-header, html[data-panel-theme="dark"] .card-body, html[data-panel-theme="dark"] .catalog-toolbar, html[data-panel-theme="dark"] .category-card, html[data-panel-theme="dark"] .product-card, html[data-panel-theme="dark"] .quick-order-alternative, html[data-panel-theme="dark"] .quick-order-required-fields, html[data-panel-theme="dark"] .quick-order-summary { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .metric-icon, html[data-panel-theme="dark"] .section-title-icon, html[data-panel-theme="dark"] .category-icon { color: rgb(147, 197, 253) !important; background: rgb(23, 43, 72) !important; }

html[data-panel-theme="dark"] .metric-label, html[data-panel-theme="dark"] .metric-note, html[data-panel-theme="dark"] .quick-order-hint, html[data-panel-theme="dark"] .section-title p { color: var(--panel-muted) !important; }

html[data-panel-theme="dark"] .quick-order-alternative summary, html[data-panel-theme="dark"] .quick-order-price, html[data-panel-theme="dark"] .metric-value { color: var(--panel-ink) !important; }

html[data-panel-theme="dark"] .table-responsive, html[data-panel-theme="dark"] .accordion-item, html[data-panel-theme="dark"] .accordion-button, html[data-panel-theme="dark"] .tab-content { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .accordion-button:not(.collapsed) { color: rgb(191, 219, 254) !important; background-color: rgb(29, 42, 62) !important; }

html[data-panel-theme="dark"] .theme-toggle { border-color: var(--panel-border) !important; color: rgb(234, 242, 255) !important; background: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .theme-toggle:hover, html[data-panel-theme="dark"] .theme-toggle:focus, html[data-panel-theme="dark"] .theme-toggle:focus-visible { border-color: rgb(96, 165, 250) !important; color: rgb(255, 255, 255) !important; background: rgb(36, 58, 87) !important; box-shadow: rgba(96, 165, 250, 0.18) 0px 0px 0px 3px !important; outline: none !important; }

html[data-panel-theme="dark"] .theme-toggle i, html[data-panel-theme="dark"] .theme-toggle svg { color: currentcolor !important; fill: currentcolor; }

.auth-message > p { font-weight: 500; text-shadow: rgba(0, 0, 0, 0.18) 0px 1px 1px; color: rgb(219, 234, 254) !important; opacity: 1 !important; }

html[data-panel-theme="dark"] .layout-navbar, html[data-panel-theme="dark"] .metric-card, html[data-panel-theme="dark"] .order-card, html[data-panel-theme="dark"] .quick-order-card, html[data-panel-theme="dark"] .card, html[data-panel-theme="dark"] .card-header, html[data-panel-theme="dark"] .card-body, html[data-panel-theme="dark"] .catalog-toolbar, html[data-panel-theme="dark"] .category-card, html[data-panel-theme="dark"] .product-card, html[data-panel-theme="dark"] .quick-order-alternative, html[data-panel-theme="dark"] .quick-order-required-fields, html[data-panel-theme="dark"] .quick-order-summary { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .metric-icon, html[data-panel-theme="dark"] .section-title-icon, html[data-panel-theme="dark"] .category-icon { color: rgb(147, 197, 253) !important; background: rgb(23, 43, 72) !important; }

html[data-panel-theme="dark"] .metric-label, html[data-panel-theme="dark"] .metric-note, html[data-panel-theme="dark"] .quick-order-hint, html[data-panel-theme="dark"] .section-title p { color: var(--panel-muted) !important; }

html[data-panel-theme="dark"] .quick-order-alternative summary, html[data-panel-theme="dark"] .quick-order-price, html[data-panel-theme="dark"] .metric-value { color: var(--panel-ink) !important; }

html[data-panel-theme="dark"] .table-responsive, html[data-panel-theme="dark"] .accordion-item, html[data-panel-theme="dark"] .accordion-button, html[data-panel-theme="dark"] .tab-content { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .accordion-button:not(.collapsed) { color: rgb(191, 219, 254) !important; background-color: rgb(29, 42, 62) !important; }

html[data-panel-theme="dark"] .theme-toggle { border-color: var(--panel-border) !important; color: rgb(234, 242, 255) !important; background: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .theme-toggle:hover, html[data-panel-theme="dark"] .theme-toggle:focus, html[data-panel-theme="dark"] .theme-toggle:focus-visible { border-color: rgb(96, 165, 250) !important; color: rgb(255, 255, 255) !important; background: rgb(36, 58, 87) !important; box-shadow: rgba(96, 165, 250, 0.18) 0px 0px 0px 3px !important; outline: none !important; }

html[data-panel-theme="dark"] .theme-toggle i, html[data-panel-theme="dark"] .theme-toggle svg { color: currentcolor !important; fill: currentcolor; }

:root { --panel-primary: #3b82f6; --panel-primary-dark: #2563eb; --panel-primary-soft: #eef5ff; --panel-ink: #172033; --panel-muted: #667085; --panel-border: #e3eaf4; --panel-surface: #ffffff; --panel-bg: #f4f7fb; --panel-success: #0f9f77; --panel-shadow: 0 12px 34px rgba(30, 64, 175, .07); }

body, .layout-page, .content-wrapper { background: var(--panel-bg); }

.layout-menu { box-shadow: rgba(15, 35, 64, 0.12) 12px 0px 38px; background: linear-gradient(rgb(16, 35, 63) 0%, rgb(11, 23, 42) 100%) !important; }

.brand-mark { background: linear-gradient(135deg, rgb(96, 165, 250), rgb(37, 99, 235)); box-shadow: rgba(37, 99, 235, 0.28) 0px 8px 22px; }

.layout-menu .menu-item.active > .menu-link { box-shadow: rgb(147, 197, 253) 3px 0px inset, rgba(37, 99, 235, 0.24) 0px 8px 22px; color: rgb(255, 255, 255) !important; background: linear-gradient(135deg, rgb(59, 130, 246), rgb(37, 99, 235)) !important; }

.layout-menu .menu-link:hover { background: rgba(96, 165, 250, 0.12) !important; }

.layout-navbar { border-color: rgba(219, 229, 242, 0.95); backdrop-filter: blur(14px); border-radius: 14px !important; background: rgba(255, 255, 255, 0.94) !important; box-shadow: rgba(30, 64, 175, 0.06) 0px 10px 30px !important; }

.profile-trigger { border-radius: 10px; }

.profile-trigger:hover { background: rgb(239, 246, 255); }

.profile-trigger .avatar { background: linear-gradient(135deg, rgb(96, 165, 250), rgb(37, 99, 235)); }

.card, .category-card, .product-card, .catalog-toolbar { border-color: var(--panel-border); border-radius: 14px; box-shadow: var(--panel-shadow); }

.card:hover, .category-card:hover, .product-card:hover { border-color: rgb(201, 218, 243); box-shadow: rgba(30, 64, 175, 0.09) 0px 16px 38px; }

.metric-icon, .section-title-icon, .category-icon { color: rgb(37, 99, 235); background: rgb(234, 243, 255); border-radius: 11px; }

.metric-card.is-green { --metric-color: #0f9f77; --metric-tint: #e9f9f4; }

.metric-card.is-blue { --metric-color: #2563eb; --metric-tint: #eaf3ff; }

.metric-card.is-orange { --metric-color: #7c6ee6; --metric-tint: #f0efff; }

.metric-card.is-red { --metric-color: #d45463; --metric-tint: #ffedf0; }

.btn { border-radius: 10px; }

.btn-primary, .auth-form-wrap .btn-primary { border-color: rgb(59, 130, 246); background: linear-gradient(135deg, rgb(79, 156, 249), rgb(37, 99, 235)); box-shadow: rgba(37, 99, 235, 0.2) 0px 8px 20px; }

.btn-primary:hover, .auth-form-wrap .btn-primary:hover { border-color: rgb(29, 78, 216); background: linear-gradient(135deg, rgb(59, 130, 246), rgb(29, 78, 216)); transform: translateY(-1px); }

.form-control, .form-select, .select2-container--default .select2-selection--single { background-color: rgb(251, 253, 255); border-color: rgb(214, 225, 239) !important; border-radius: 10px !important; }

.form-control:focus, .form-select:focus { border-color: rgb(96, 165, 250) !important; box-shadow: rgba(59, 130, 246, 0.11) 0px 0px 0px 4px !important; }

.form-check-input:checked { border-color: rgb(59, 130, 246); background-color: rgb(59, 130, 246); }

.category-card:hover { border-color: rgb(139, 184, 242); }

.product-category { border-color: rgb(207, 226, 255); color: rgb(29, 78, 216); background: rgb(239, 246, 255); }

.product-buy, .page-item.active .page-link { border-color: rgb(37, 99, 235); background: rgb(37, 99, 235); }

.product-buy:hover { border-color: rgb(29, 78, 216); background: rgb(29, 78, 216); }

.page-link { color: rgb(37, 99, 235); }

.quick-order-step-number { background: rgb(59, 130, 246); }

.quick-order-price { color: rgb(37, 99, 235) !important; }

.theme-toggle:hover { border-color: rgb(96, 165, 250); background: rgb(239, 246, 255); }

.auth-page, html[data-panel-theme="dark"] .auth-page { background: linear-gradient(135deg, rgb(237, 244, 252) 0%, rgb(248, 251, 255) 100%) !important; }

.auth-shell { border-color: rgb(220, 231, 245); border-radius: 18px; box-shadow: rgba(29, 78, 216, 0.13) 0px 26px 70px; }

.auth-showcase { background: linear-gradient(145deg, rgb(16, 43, 76) 0%, rgb(23, 75, 122) 56%, rgb(59, 130, 246) 100%) !important; }

.auth-showcase::before, .auth-showcase::after { display: block; border-color: rgba(255, 255, 255, 0.12); }

.auth-brand .brand-mark { background: rgba(255, 255, 255, 0.16); }

.auth-message .eyebrow { border-color: rgba(191, 219, 254, 0.35); color: rgb(219, 234, 254); background: rgba(255, 255, 255, 0.08); }

.auth-features i { color: rgb(147, 197, 253); }

.auth-form-eyebrow { color: rgb(37, 99, 235); }

.auth-page .form-check-input:checked, html[data-panel-theme="dark"] .auth-page .form-check-input:checked { border-color: rgb(59, 130, 246); background-color: rgb(59, 130, 246); }

html[data-panel-theme="dark"] { --panel-primary: #60a5fa; --panel-primary-dark: #3b82f6; --panel-primary-soft: #172b48; --panel-ink: #edf4ff; --panel-muted: #9eb0c7; --panel-border: #2a3c54; --panel-surface: #172235; --panel-bg: #0d1624; --panel-success: #42d6aa; --panel-shadow: 0 10px 30px rgba(0,0,0,.20); }

html[data-panel-theme="dark"] .layout-menu { background: linear-gradient(rgb(9, 20, 36) 0%, rgb(7, 16, 29) 100%) !important; }

html[data-panel-theme="dark"] .layout-navbar, html[data-panel-theme="dark"] .card, html[data-panel-theme="dark"] .card-header, html[data-panel-theme="dark"] .card-body, html[data-panel-theme="dark"] .catalog-toolbar, html[data-panel-theme="dark"] .category-card, html[data-panel-theme="dark"] .product-card, html[data-panel-theme="dark"] .modal-content, html[data-panel-theme="dark"] .dropdown-menu, html[data-panel-theme="dark"] .offcanvas, html[data-panel-theme="dark"] .list-group, html[data-panel-theme="dark"] .list-group-item, html[data-panel-theme="dark"] .quick-search-results { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .bg-light, html[data-panel-theme="dark"] .bg-white, html[data-panel-theme="dark"] .table-light, html[data-panel-theme="dark"] .table thead th, html[data-panel-theme="dark"] .table-hover > tbody > tr:hover > * { color: var(--panel-ink) !important; background-color: rgb(29, 42, 62) !important; }

html[data-panel-theme="dark"] .form-control, html[data-panel-theme="dark"] .form-select, html[data-panel-theme="dark"] .select2-selection, html[data-panel-theme="dark"] .select2-dropdown, html[data-panel-theme="dark"] .select2-search__field, html[data-panel-theme="dark"] .input-group-text { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: rgb(17, 28, 44) !important; }

html[data-panel-theme="dark"] .select2-results__option--highlighted, html[data-panel-theme="dark"] .form-check-input:checked, html[data-panel-theme="dark"] .pagination .page-item.active .page-link { color: rgb(255, 255, 255) !important; border-color: rgb(59, 130, 246) !important; background: rgb(59, 130, 246) !important; }

html[data-panel-theme="dark"] .profile-trigger:hover, html[data-panel-theme="dark"] .dropdown-item:hover, html[data-panel-theme="dark"] .nav-tabs .nav-link:hover { background: rgb(29, 42, 62) !important; }

.layout-navbar-fixed .layout-page::before { display: none !important; content: none !important; }

@media (max-width: 575.98px) {
  .auth-page { min-height: 100dvh !important; padding: 0px !important; background: rgb(255, 255, 255) !important; }
  .auth-shell { width: 100% !important; min-height: 100dvh !important; margin: 0px !important; border: 0px !important; border-radius: 0px !important; box-shadow: none !important; background: rgb(255, 255, 255) !important; }
}

:root { --panel-primary: #6558e8; --panel-primary-dark: #4f46c8; --panel-primary-soft: #eeecff; --panel-ink: #20213a; --panel-muted: #74758c; --panel-border: #e9e9f3; --panel-surface: #ffffff; --panel-bg: #f7f7fc; --panel-success: #20a779; --panel-shadow: 0 14px 40px rgba(36, 37, 71, .07); }

body { color: var(--panel-ink); background: var(--panel-bg); font-family: Inter, "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

.layout-page, .content-wrapper { background: var(--panel-bg); }

.layout-menu { border-right: 1px solid rgba(255, 255, 255, 0.08); box-shadow: rgba(24, 23, 47, 0.12) 12px 0px 40px; background: linear-gradient(rgb(37, 35, 62) 0%, rgb(23, 23, 42) 100%) !important; }

.layout-menu .app-brand { height: 86px; padding: 0px 1.5rem; }

.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; flex: 0 0 auto; border-radius: 12px; color: rgb(255, 255, 255); font-size: 18px; font-weight: 800; background: linear-gradient(135deg, rgb(125, 112, 255), rgb(87, 72, 223)); box-shadow: rgba(101, 88, 232, 0.35) 0px 8px 22px; }

.brand-copy { min-width: 0px; color: rgb(255, 255, 255); line-height: 1.15; }

.brand-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.98rem; }

.brand-copy small { display: block; margin-top: 5px; color: rgb(170, 169, 191); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }

.layout-menu .menu-inner { padding: 0.5rem 0.8rem 1rem !important; }

.layout-menu .menu-item { margin: 0.2rem 0px; }

.layout-menu .menu-link { min-height: 46px; border-radius: 12px; font-weight: 500; transition: color 0.2s, background 0.2s, transform 0.2s; color: rgb(185, 184, 202) !important; }

.layout-menu .menu-link:hover { transform: translateX(2px); color: rgb(255, 255, 255) !important; background: rgba(255, 255, 255, 0.07) !important; }

.layout-menu .menu-item.active > .menu-link { box-shadow: rgba(54, 44, 166, 0.32) 0px 8px 24px; color: rgb(255, 255, 255) !important; background: linear-gradient(135deg, rgb(104, 91, 233), rgb(87, 72, 216)) !important; }

.layout-menu .menu-icon { color: inherit !important; }

.layout-navbar { min-height: 70px; border: 1px solid rgba(232, 232, 242, 0.9); backdrop-filter: blur(16px); margin-top: 1.1rem !important; border-radius: 18px !important; background: rgba(255, 255, 255, 0.92) !important; box-shadow: rgba(42, 43, 76, 0.06) 0px 10px 32px !important; }

.navbar-welcome small { display: block; color: var(--panel-muted); font-size: 0.75rem; }

.navbar-welcome strong { color: var(--panel-ink); font-size: 0.93rem; }

.profile-trigger { align-items: center; gap: 0.75rem; border-radius: 13px; display: flex !important; padding: 0.35rem 0.5rem !important; }

.profile-trigger:hover { background: rgb(245, 244, 251); }

.profile-trigger .avatar { display: grid; place-items: center; color: rgb(255, 255, 255); font-weight: 700; background: linear-gradient(135deg, rgb(118, 105, 239), rgb(81, 69, 199)); }

.page-heading { margin: 0.65rem 0px 1.7rem; }

.page-heading h4 { margin: 0px; color: var(--panel-ink); font-size: 1.55rem; letter-spacing: -0.035em; }

.page-heading p { margin: 0.45rem 0px 0px; color: var(--panel-muted); }

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

.metric-card { position: relative; overflow: hidden; height: 100%; }

.metric-card::after { content: ""; position: absolute; right: -32px; bottom: -42px; width: 110px; height: 110px; border-radius: 50%; background: var(--metric-tint, #f0efff); }

.metric-card .card-body { position: relative; z-index: 1; padding: 1.45rem; }

.metric-label { margin-bottom: 0.65rem; color: var(--panel-muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

.metric-value { margin: 0px; color: var(--panel-ink); font-size: 1.75rem; font-weight: 750; letter-spacing: -0.04em; }

.metric-note { display: block; margin-top: 0.38rem; color: var(--panel-muted); font-size: 0.78rem; }

.metric-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: var(--metric-color, var(--panel-primary)); background: var(--metric-tint, var(--panel-primary-soft)); font-size: 1.35rem; }

.metric-card.is-green { --metric-color: #15966d; --metric-tint: #e7f8f1; }

.metric-card.is-blue { --metric-color: #3281dc; --metric-tint: #eaf4ff; }

.metric-card.is-orange { --metric-color: #d98324; --metric-tint: #fff4e6; }

.metric-card.is-red { --metric-color: #d45463; --metric-tint: #ffedf0; }

.order-card .card-body { padding: 1.55rem; }

.section-title { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.4rem; }

.section-title-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--panel-primary); background: var(--panel-primary-soft); font-size: 1.2rem; }

.section-title h5 { margin: 0px; color: var(--panel-ink); font-size: 1.06rem; }

.section-title p { margin: 0.2rem 0px 0px; color: var(--panel-muted); font-size: 0.8rem; }

.form-label { margin-bottom: 0.5rem; color: rgb(80, 81, 106); font-size: 0.82rem; font-weight: 650; }

.form-control, .form-select, .select2-container--default .select2-selection--single { min-height: 46px; background-color: rgb(251, 251, 254); border: 1px solid rgb(223, 223, 235) !important; border-radius: 12px !important; box-shadow: none !important; }

.form-control:focus, .form-select:focus { background: rgb(255, 255, 255); border-color: rgb(139, 128, 236) !important; box-shadow: rgba(101, 88, 232, 0.1) 0px 0px 0px 4px !important; }

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

.btn { min-height: 44px; border-radius: 12px; font-weight: 650; }

.btn-primary { border-color: var(--panel-primary); background: linear-gradient(135deg, rgb(112, 100, 237), rgb(85, 71, 209)); box-shadow: rgba(101, 88, 232, 0.22) 0px 9px 22px; }

.btn-primary:hover { border-color: var(--panel-primary-dark); background: linear-gradient(135deg, rgb(98, 85, 221), rgb(73, 61, 189)); transform: translateY(-1px); }

.alert { border: 0px; border-radius: 14px; }

.catalog-toolbar { padding: 1rem; margin-bottom: 1.35rem; }

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

.product-card { display: flex; min-width: 0px; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; }

.product-card:hover { transform: translateY(-3px); box-shadow: rgba(36, 37, 71, 0.11) 0px 18px 46px; }

.product-card .card-body { display: flex; padding: 1.25rem; flex: 1 1 0%; flex-direction: column; }

.product-category { display: inline-flex; align-self: flex-start; margin-bottom: 0.85rem; padding: 0.35rem 0.65rem; border-radius: 999px; color: var(--panel-primary); background: var(--panel-primary-soft); font-size: 0.68rem; font-weight: 700; }

.product-name { min-height: 2.75rem; margin: 0px 0px 0.55rem; color: var(--panel-ink); font-size: 1rem; line-height: 1.4; }

.product-description { display: -webkit-box; overflow: hidden; margin: 0px 0px 1rem; color: var(--panel-muted); font-size: 0.78rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

.product-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--panel-border); }

.product-price { color: var(--panel-ink); font-size: 1.2rem; font-weight: 750; letter-spacing: -0.03em; }

.product-delivery { display: flex; align-items: center; gap: 0.3rem; color: var(--panel-success); font-size: 0.7rem; font-weight: 650; }

.product-buy { margin-top: 0.9rem; }

.catalog-empty { padding: 3rem 1rem; text-align: center; }

.catalog-empty i { display: block; margin-bottom: 0.75rem; color: var(--panel-muted); font-size: 2.5rem; }

.product-modal-description { max-height: 180px; overflow-y: auto; padding: 0.9rem; border-radius: 12px; color: var(--panel-muted); background: var(--panel-bg); font-size: 0.82rem; line-height: 1.6; white-space: pre-line; }

.pagination { gap: 0.3rem; margin-top: 1.5rem; }

.page-link { border: 0px; color: var(--panel-primary); border-radius: 9px !important; }

.page-item.active .page-link { background: var(--panel-primary); }

.auth-page { min-height: 100vh; padding: 24px; background: rgb(246, 245, 251); }

.auth-shell { display: grid; width: min(1080px, 100%); min-height: 650px; margin: auto; overflow: hidden; border: 1px solid rgb(232, 231, 239); border-radius: 28px; background: rgb(255, 255, 255); box-shadow: rgba(31, 30, 60, 0.13) 0px 28px 80px; grid-template-columns: 1.08fr 0.92fr; }

.auth-showcase { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 3rem; color: rgb(255, 255, 255); background: linear-gradient(145deg, rgb(38, 36, 65) 0%, rgb(74, 63, 193) 65%, rgb(112, 100, 237) 100%); }

.auth-showcase::before, .auth-showcase::after { content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; }

.auth-showcase::before { top: -150px; right: -130px; width: 420px; height: 420px; }

.auth-showcase::after { right: 35px; bottom: -190px; width: 360px; height: 360px; }

.auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.85rem; font-weight: 700; }

.auth-brand .brand-mark { background: rgba(255, 255, 255, 0.16); box-shadow: none; backdrop-filter: blur(12px); }

.auth-message { position: relative; z-index: 1; max-width: 470px; }

.auth-message .eyebrow { display: inline-flex; margin-bottom: 1rem; padding: 0.45rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; color: rgb(222, 219, 255); background: rgba(255, 255, 255, 0.08); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.auth-message h1 { margin: 0px 0px 1rem; color: rgb(255, 255, 255); font-size: clamp(2.15rem, 4vw, 3.4rem); line-height: 1.07; letter-spacing: -0.055em; }

.auth-message p { max-width: 410px; margin: 0px; color: rgb(217, 215, 239); font-size: 1rem; line-height: 1.7; }

.auth-footnote { position: relative; z-index: 1; color: rgb(197, 194, 223); font-size: 0.78rem; }

.auth-form-panel { display: flex; align-items: center; padding: 3.8rem; }

.auth-form-wrap { width: 100%; max-width: 380px; margin: auto; }

.auth-form-wrap h2 { margin: 0px 0px 0.55rem; color: var(--panel-ink); font-size: 1.7rem; letter-spacing: -0.035em; }

.auth-form-wrap > p { margin-bottom: 2rem; color: var(--panel-muted); line-height: 1.6; }

.auth-form-wrap .btn { min-height: 50px; }

@media (max-width: 991.98px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .auth-shell { max-width: 570px; grid-template-columns: 1fr; }
  .auth-showcase { min-height: 260px; padding: 2rem; }
  .auth-message h1 { font-size: 2.25rem; }
  .auth-message p, .auth-footnote { display: none; }
  .auth-form-panel { padding: 2.4rem 2rem; }
  .navbar-welcome { display: none; }
}

@media (max-width: 575.98px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .auth-page { padding: 0px; }
  .auth-shell { min-height: 100vh; border: 0px; border-radius: 0px; }
  .auth-showcase { min-height: 215px; }
  .auth-form-panel { padding: 2rem 1.35rem; }
  .container-p-y { padding-top: 1.15rem !important; }
  .page-heading h4 { font-size: 1.35rem; }
}

:root { --panel-primary: #3b82f6; --panel-primary-dark: #b45309; --panel-primary-soft: #fff7ed; --panel-ink: #172033; --panel-muted: #667085; --panel-border: #e4e7ec; --panel-surface: #ffffff; --panel-bg: #f5f6f8; --panel-success: #15803d; --panel-shadow: 0 1px 2px rgba(16, 24, 40, .04); }

body { background: var(--panel-bg); color: var(--panel-ink); }

.layout-page, .content-wrapper { background: var(--panel-bg); }

.layout-menu { border-right: 0px; box-shadow: none; background: rgb(17, 24, 39) !important; }

.layout-menu .app-brand { height: 76px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

.brand-mark { border-radius: 8px; background: rgb(59, 130, 246); box-shadow: none; }

.brand-copy small { color: rgb(148, 163, 184); }

.layout-menu .menu-inner { padding: 1rem 0.75rem !important; }

.layout-menu .menu-link { min-height: 42px; border-radius: 7px; font-size: 0.84rem; transition: color 0.15s, background 0.15s; color: rgb(174, 184, 200) !important; }

.layout-menu .menu-link:hover { transform: none; color: rgb(255, 255, 255) !important; background: rgba(255, 255, 255, 0.06) !important; }

.layout-menu .menu-item.active > .menu-link { box-shadow: rgb(96, 165, 250) 3px 0px inset; color: rgb(255, 255, 255) !important; background: rgb(38, 50, 71) !important; }

.layout-menu .menu-header-text { color: rgb(113, 128, 150) !important; letter-spacing: 0.08em; }

.layout-navbar { min-height: 64px; border: 1px solid var(--panel-border); backdrop-filter: none; margin-top: 1rem !important; border-radius: 9px !important; background: rgb(255, 255, 255) !important; box-shadow: var(--panel-shadow) !important; }

.profile-trigger { border-radius: 7px; }

.profile-trigger:hover { background: rgb(242, 244, 247); }

.profile-trigger .avatar { background: rgb(36, 48, 68); }

.page-heading { margin: 0.6rem 0px 1.4rem; }

.page-heading h4 { font-size: 1.42rem; letter-spacing: -0.02em; }

.page-heading p { margin-top: 0.35rem; font-size: 0.84rem; }

.card { border: 1px solid var(--panel-border); border-radius: 10px; box-shadow: var(--panel-shadow); }

.metric-card::after { display: none; }

.metric-card .card-body { padding: 1.25rem; }

.metric-label { color: rgb(102, 112, 133); font-size: 0.7rem; letter-spacing: 0.04em; }

.metric-value { font-size: 1.65rem; letter-spacing: -0.025em; }

.metric-icon { width: 42px; height: 42px; border-radius: 8px; color: rgb(180, 83, 9); background: rgb(255, 247, 237); }

.metric-card.is-green, .metric-card.is-blue, .metric-card.is-orange, .metric-card.is-red { --metric-color: #344054; --metric-tint: #f2f4f7; }

.order-card .card-body { padding: 1.4rem; }

.section-title-icon { border-radius: 8px; color: rgb(180, 83, 9); background: rgb(255, 247, 237); }

.form-control, .form-select, .select2-container--default .select2-selection--single { min-height: 44px; background: rgb(255, 255, 255); border-color: rgb(208, 213, 221) !important; border-radius: 7px !important; }

.form-control:focus, .form-select:focus { border-color: rgb(59, 130, 246) !important; box-shadow: rgba(217, 119, 6, 0.1) 0px 0px 0px 3px !important; }

.btn { min-height: 42px; border-radius: 7px; }

.btn-primary { border-color: rgb(59, 130, 246); background: rgb(59, 130, 246); box-shadow: none; }

.btn-primary:hover { border-color: rgb(180, 83, 9); background: rgb(180, 83, 9); transform: none; }

.catalog-toolbar { border-radius: 9px; box-shadow: none; }

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

.category-card { display: flex; min-height: 86px; align-items: center; gap: 0.85rem; padding: 1rem; border: 1px solid var(--panel-border); border-radius: 9px; color: var(--panel-ink); background: var(--panel-surface); transition: border-color 0.15s, box-shadow 0.15s; }

.category-card:hover { border-color: rgb(59, 130, 246); color: var(--panel-ink); box-shadow: rgba(16, 24, 40, 0.06) 0px 4px 12px; }

.category-icon { display: grid; width: 42px; height: 42px; place-items: center; flex: 0 0 auto; border-radius: 8px; color: rgb(180, 83, 9); background: var(--panel-primary-soft); font-size: 1.25rem; }

.category-copy { min-width: 0px; }

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

.category-copy strong { overflow: hidden; color: var(--panel-ink); font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; }

.category-copy small { margin-top: 0.3rem; color: var(--panel-muted); font-size: 0.7rem; }

.category-arrow { margin-left: auto; color: var(--panel-muted); font-size: 1.25rem; }

.catalog-grid { gap: 0.85rem; }

.product-card { border-radius: 9px; box-shadow: none; }

.product-card:hover { border-color: rgb(208, 213, 221); transform: none; box-shadow: rgba(16, 24, 40, 0.06) 0px 4px 12px; }

.product-category { border: 1px solid rgb(254, 215, 170); border-radius: 5px; color: rgb(154, 52, 18); background: rgb(255, 247, 237); }

.product-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; }

.product-card-head .product-category { margin-bottom: 0px; }

.product-logo { display: grid; width: 44px; height: 44px; place-items: center; flex: 0 0 auto; border: 1px solid var(--panel-border); border-radius: 8px; background: rgb(255, 255, 255); }

.product-logo img { width: 25px; height: 25px; object-fit: contain; }

.product-logo i { color: rgb(71, 84, 103); font-size: 1.35rem; }

.product-meta { border-color: rgb(234, 236, 240); }

.product-buy { background: rgb(23, 32, 51); border-color: rgb(23, 32, 51); }

.product-buy:hover { background: rgb(39, 54, 79); border-color: rgb(39, 54, 79); }

.page-item.active .page-link { background: rgb(23, 32, 51); }

.page-link { color: rgb(52, 64, 84); }

.auth-page { background: rgb(238, 240, 243); }

.auth-shell { border-color: rgb(223, 227, 232); border-radius: 12px; box-shadow: rgba(16, 24, 40, 0.12) 0px 18px 55px; }

.auth-showcase { background: rgb(17, 24, 39); }

.auth-showcase::before, .auth-showcase::after { display: none; }

.auth-brand .brand-mark { background: rgb(59, 130, 246); }

.auth-message .eyebrow { border: 1px solid rgb(59, 70, 88); border-radius: 5px; color: rgb(251, 191, 36); background: transparent; }

.auth-message h1 { letter-spacing: -0.035em; }

.auth-features { display: grid; gap: 0.65rem; margin-top: 1.6rem; }

.auth-features span { display: flex; align-items: center; gap: 0.55rem; color: rgb(213, 219, 229); font-size: 0.8rem; }

.auth-features i { color: rgb(96, 165, 250); font-size: 1rem; }

.auth-form-eyebrow { display: block; margin-bottom: 0.65rem; color: rgb(180, 83, 9); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.auth-security-note { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 1.35rem; color: rgb(102, 112, 133); font-size: 0.72rem; }

.theme-toggle { display: grid; width: 38px; height: 38px; padding: 0px; place-items: center; border: 1px solid var(--panel-border); border-radius: 7px; color: var(--panel-ink); background: var(--panel-surface); font-size: 1.1rem; transition: border-color 0.15s, background 0.15s; }

.theme-toggle:hover { border-color: rgb(59, 130, 246); background: var(--panel-primary-soft); }

.auth-theme-toggle { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 10; }

html[data-panel-theme="dark"] { color-scheme: dark; --panel-primary: #60a5fa; --panel-primary-dark: #3b82f6; --panel-primary-soft: #172b48; --panel-ink: #f1f5f9; --panel-muted: #9aa6b6; --panel-border: #303a48; --panel-surface: #1a2029; --panel-bg: #10141b; --panel-success: #4ade80; --panel-shadow: 0 1px 2px rgba(0, 0, 0, .22); }

html[data-panel-theme="dark"] body, html[data-panel-theme="dark"] .layout-page, html[data-panel-theme="dark"] .content-wrapper { background: var(--panel-bg); color: var(--panel-ink); }

html[data-panel-theme="dark"] .layout-menu { background: rgb(11, 15, 21) !important; }

html[data-panel-theme="dark"] .layout-navbar, html[data-panel-theme="dark"] .card, html[data-panel-theme="dark"] .modal-content, html[data-panel-theme="dark"] .dropdown-menu { border-color: var(--panel-border); color: var(--panel-ink); background: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .navbar-welcome strong, html[data-panel-theme="dark"] .page-heading h4, html[data-panel-theme="dark"] .metric-value, html[data-panel-theme="dark"] .section-title h5, html[data-panel-theme="dark"] .product-name, html[data-panel-theme="dark"] .product-price, html[data-panel-theme="dark"] .modal-title { color: var(--panel-ink); }

html[data-panel-theme="dark"] .profile-trigger:hover { background: rgb(37, 45, 56); }

html[data-panel-theme="dark"] .form-control, html[data-panel-theme="dark"] .form-select, html[data-panel-theme="dark"] .select2-container--default .select2-selection--single, html[data-panel-theme="dark"] .input-group-text { color: var(--panel-ink); background-color: rgb(21, 27, 35); border-color: var(--panel-border) !important; }

html[data-panel-theme="dark"] .form-control:disabled, html[data-panel-theme="dark"] .form-control[readonly] { color: rgb(141, 153, 169); background: rgb(19, 24, 32); }

html[data-panel-theme="dark"] .form-control::placeholder { color: rgb(111, 123, 140); }

html[data-panel-theme="dark"] .product-modal-description { background: rgb(17, 23, 31); }

html[data-panel-theme="dark"] .product-category { border-color: rgb(36, 76, 120); color: rgb(147, 197, 253); background: rgb(23, 43, 72); }

html[data-panel-theme="dark"] .product-logo { background: rgb(248, 250, 252); }

html[data-panel-theme="dark"] .product-logo img { filter: none; }

html[data-panel-theme="dark"] .product-buy { border-color: rgb(59, 130, 246); background: rgb(59, 130, 246); }

html[data-panel-theme="dark"] .dropdown-divider, html[data-panel-theme="dark"] .product-meta { border-color: var(--panel-border); }

html[data-panel-theme="dark"] .dropdown-item { color: var(--panel-ink); }

html[data-panel-theme="dark"] .dropdown-item:hover { background: rgb(37, 45, 56); }

html[data-panel-theme="dark"] .auth-page { background: rgb(13, 17, 23); }

html[data-panel-theme="dark"] .auth-shell { border-color: rgb(43, 52, 65); background: var(--panel-surface); }

html[data-panel-theme="dark"] .auth-form-wrap h2 { color: var(--panel-ink); }

html[data-panel-theme="light"] body, html[data-panel-theme="light"] .layout-page, html[data-panel-theme="light"] .content-wrapper { color: rgb(29, 41, 57); }

html[data-panel-theme="light"] h1, html[data-panel-theme="light"] h2, html[data-panel-theme="light"] h3, html[data-panel-theme="light"] h4, html[data-panel-theme="light"] h5, html[data-panel-theme="light"] h6, html[data-panel-theme="light"] .card-title, html[data-panel-theme="light"] .modal-title { color: rgb(23, 32, 51); }

html[data-panel-theme="light"] p, html[data-panel-theme="light"] small, html[data-panel-theme="light"] .text-muted { color: rgb(102, 112, 133) !important; }

html[data-panel-theme="light"] .page-heading p, html[data-panel-theme="light"] .metric-note, html[data-panel-theme="light"] .product-description, html[data-panel-theme="light"] .section-title p { color: rgb(102, 112, 133); }

html[data-panel-theme="light"] .form-label, html[data-panel-theme="light"] label { color: rgb(52, 64, 84); }

html[data-panel-theme="light"] .form-control, html[data-panel-theme="light"] .form-select, html[data-panel-theme="light"] .select2-selection, html[data-panel-theme="light"] .select2-selection__rendered { color: rgb(29, 41, 57) !important; }

html[data-panel-theme="light"] .form-control::placeholder { color: rgb(152, 162, 179); opacity: 1; }

html[data-panel-theme="light"] .form-control:disabled, html[data-panel-theme="light"] .form-control[readonly] { color: rgb(71, 84, 103); background: rgb(242, 244, 247); opacity: 1; }

html[data-panel-theme="light"] .table { color: rgb(52, 64, 84); }

html[data-panel-theme="light"] .table > :not(caption) > * > * { border-color: rgb(234, 236, 240); color: rgb(52, 64, 84); }

html[data-panel-theme="light"] .table thead th { color: rgb(71, 84, 103); background: rgb(249, 250, 251); }

html[data-panel-theme="light"] .dropdown-menu { color: rgb(52, 64, 84); background: rgb(255, 255, 255); }

html[data-panel-theme="light"] .dropdown-item { color: rgb(52, 64, 84); }

html[data-panel-theme="light"] .dropdown-item:hover { color: rgb(23, 32, 51); background: rgb(242, 244, 247); }

html[data-panel-theme="light"] .pagination .page-link { color: rgb(52, 64, 84); background: rgb(255, 255, 255); }

html[data-panel-theme="light"] .pagination .page-item.active .page-link { color: rgb(255, 255, 255); background: rgb(23, 32, 51); }

html[data-panel-theme="light"] .alert { color: rgb(52, 64, 84); }

html[data-panel-theme="light"] .product-modal-description { color: rgb(71, 84, 103); }

html[data-panel-theme="light"] .auth-form-wrap > p { color: rgb(102, 112, 133); }

html[data-panel-theme="light"] .auth-form-wrap .form-check-label { color: rgb(71, 84, 103); }

html[data-panel-theme="light"] .navbar-welcome small { color: rgb(102, 112, 133); }

.auth-page { padding: 32px; background: rgb(238, 241, 244) !important; }

.auth-shell { width: min(1040px, 100%); min-height: 620px; border-radius: 10px; }

.auth-showcase { padding: 2.8rem; background: rgb(17, 24, 39) !important; }

.auth-form-panel { padding: 3.5rem; background: rgb(255, 255, 255); }

.auth-form-wrap { max-width: 360px; }

.auth-form-wrap h2 { font-size: 1.65rem; }

.auth-form-wrap .form-control { background: rgb(255, 255, 255); }

.auth-form-wrap .btn-primary { background: rgb(59, 130, 246); border-color: rgb(59, 130, 246); }

.auth-form-wrap .btn-primary:hover { background: rgb(180, 83, 9); border-color: rgb(180, 83, 9); }

@media (max-width: 991.98px) {
  .category-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}

@media (max-width: 575.98px) {
  .category-grid { grid-template-columns: 1fr; }
}

html[data-panel-theme="dark"] { --bs-body-bg: var(--panel-bg); --bs-body-color: var(--panel-ink); --bs-border-color: var(--panel-border); }

html[data-panel-theme="dark"] body, html[data-panel-theme="dark"] .layout-wrapper, html[data-panel-theme="dark"] .layout-container, html[data-panel-theme="dark"] .layout-page, html[data-panel-theme="dark"] .content-wrapper, html[data-panel-theme="dark"] .content-backdrop, html[data-panel-theme="dark"] .container-xxl { color: var(--panel-ink); background-color: var(--panel-bg); }

html[data-panel-theme="dark"] .card, html[data-panel-theme="dark"] .card-header, html[data-panel-theme="dark"] .card-body, html[data-panel-theme="dark"] .catalog-toolbar, html[data-panel-theme="dark"] .category-card, html[data-panel-theme="dark"] .product-card, html[data-panel-theme="dark"] .list-group, html[data-panel-theme="dark"] .list-group-item, html[data-panel-theme="dark"] .modal-content, html[data-panel-theme="dark"] .modal-header, html[data-panel-theme="dark"] .modal-body, html[data-panel-theme="dark"] .modal-footer, html[data-panel-theme="dark"] .dropdown-menu, html[data-panel-theme="dark"] .offcanvas, html[data-panel-theme="dark"] .quick-search-results { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .bg-light, html[data-panel-theme="dark"] .bg-white, html[data-panel-theme="dark"] .table-light, html[data-panel-theme="dark"] .list-group-item-action:hover, html[data-panel-theme="dark"] .list-group-item-action:focus { color: var(--panel-ink) !important; background-color: rgb(32, 40, 51) !important; }

html[data-panel-theme="dark"] .table, html[data-panel-theme="dark"] .table > :not(caption) > * > *, html[data-panel-theme="dark"] .table thead th, html[data-panel-theme="dark"] .table tbody td { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: transparent !important; }

html[data-panel-theme="dark"] .table thead th { background-color: rgb(32, 40, 51) !important; }

html[data-panel-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgb(32, 40, 51) !important; }

html[data-panel-theme="dark"] h1, html[data-panel-theme="dark"] h2, html[data-panel-theme="dark"] h3, html[data-panel-theme="dark"] h4, html[data-panel-theme="dark"] h5, html[data-panel-theme="dark"] h6, html[data-panel-theme="dark"] .card-title, html[data-panel-theme="dark"] .category-copy strong, html[data-panel-theme="dark"] label, html[data-panel-theme="dark"] .form-label { color: var(--panel-ink) !important; }

html[data-panel-theme="dark"] p, html[data-panel-theme="dark"] small, html[data-panel-theme="dark"] .text-muted, html[data-panel-theme="dark"] .form-text { color: var(--panel-muted) !important; }

html[data-panel-theme="dark"] .form-control, html[data-panel-theme="dark"] .form-select, html[data-panel-theme="dark"] .select2-selection, html[data-panel-theme="dark"] .select2-dropdown, html[data-panel-theme="dark"] .select2-search__field, html[data-panel-theme="dark"] .input-group-text { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: rgb(21, 27, 35) !important; }

html[data-panel-theme="dark"] .select2-results__option { color: var(--panel-ink); background: var(--panel-surface); }

html[data-panel-theme="dark"] .select2-results__option--highlighted { color: rgb(255, 255, 255); background: rgb(59, 130, 246); }

html[data-panel-theme="dark"] .form-check-input { border-color: rgb(83, 96, 113); background-color: rgb(21, 27, 35); }

html[data-panel-theme="dark"] .form-check-input:checked { border-color: rgb(59, 130, 246); background-color: rgb(59, 130, 246); }

html[data-panel-theme="dark"] .pagination .page-link { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .pagination .page-item.active .page-link { color: rgb(255, 255, 255) !important; background-color: rgb(59, 130, 246) !important; }

html[data-panel-theme="dark"] .btn-label-secondary, html[data-panel-theme="dark"] .btn-outline-secondary { border-color: rgb(70, 82, 100); color: rgb(214, 221, 232); background-color: transparent; }

html[data-panel-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }

html[data-panel-theme="dark"] .dropdown-divider, html[data-panel-theme="dark"] .border-top { border-color: var(--panel-border) !important; }

html[data-panel-theme="dark"] .nav-tabs { border-bottom-color: var(--panel-border) !important; }

html[data-panel-theme="dark"] .nav-tabs .nav-link { border-color: transparent !important; color: var(--panel-muted) !important; }

html[data-panel-theme="dark"] .nav-tabs .nav-link:hover, html[data-panel-theme="dark"] .nav-tabs .nav-link:focus { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: rgb(32, 40, 51) !important; }

html[data-panel-theme="dark"] .nav-tabs .nav-link.active, html[data-panel-theme="dark"] .tab-content { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: var(--panel-surface) !important; }

.quick-search-results { border: 1px solid var(--panel-border); border-radius: 7px; background: var(--panel-surface); }

.quick-search-results .list-group-item { border-color: var(--panel-border); color: var(--panel-ink); background: var(--panel-surface); }

.auth-page, html[data-panel-theme="dark"] .auth-page { color-scheme: light; color: rgb(52, 64, 84); background: rgb(238, 241, 244) !important; }

.auth-page .auth-shell, html[data-panel-theme="dark"] .auth-page .auth-shell { border-color: rgb(223, 227, 232) !important; color: rgb(52, 64, 84) !important; background: rgb(255, 255, 255) !important; }

.auth-page .auth-form-panel, html[data-panel-theme="dark"] .auth-page .auth-form-panel { color: rgb(52, 64, 84) !important; background: rgb(255, 255, 255) !important; }

.auth-page .auth-form-wrap h2, html[data-panel-theme="dark"] .auth-page .auth-form-wrap h2 { color: rgb(23, 32, 51) !important; }

.auth-page .auth-form-wrap > p, .auth-page .auth-security-note, html[data-panel-theme="dark"] .auth-page .auth-form-wrap > p, html[data-panel-theme="dark"] .auth-page .auth-security-note { color: rgb(102, 112, 133) !important; }

.auth-page .form-label, .auth-page .form-check-label, html[data-panel-theme="dark"] .auth-page .form-label, html[data-panel-theme="dark"] .auth-page .form-check-label { color: rgb(52, 64, 84) !important; }

.auth-page .form-control, html[data-panel-theme="dark"] .auth-page .form-control { border-color: rgb(208, 213, 221) !important; color: rgb(29, 41, 57) !important; background: rgb(255, 255, 255) !important; }

.auth-page .form-control::placeholder, html[data-panel-theme="dark"] .auth-page .form-control::placeholder { color: rgb(152, 162, 179) !important; }

.auth-page .form-check-input, html[data-panel-theme="dark"] .auth-page .form-check-input { border-color: rgb(184, 192, 204); background-color: rgb(255, 255, 255); }

.auth-page .form-check-input:checked, html[data-panel-theme="dark"] .auth-page .form-check-input:checked { border-color: rgb(59, 130, 246); background-color: rgb(59, 130, 246); }

@media (max-width: 575.98px) {
  .auth-page { padding: 0px !important; }
  .layout-navbar { margin-inline: 0.75rem !important; }
  .card-header, .card-body { padding-inline: 1rem; }
}

.layout-menu .menu-inner-shadow, html[data-panel-theme="light"] .layout-menu .menu-inner-shadow, html[data-panel-theme="dark"] .layout-menu .menu-inner-shadow { display: none !important; background: transparent !important; box-shadow: none !important; }

.layout-menu .brand-copy small, html[data-panel-theme="light"] .layout-menu .brand-copy small, html[data-panel-theme="dark"] .layout-menu .brand-copy small { color: rgb(148, 163, 184) !important; }

.auth-form-wrap { max-width: 420px; }

@media (max-width: 575.98px) {
  html:has(.auth-page), body:has(.auth-page), .auth-page, .auth-shell, .auth-form-panel { background: rgb(255, 255, 255) !important; }
  html:has(.auth-page), body:has(.auth-page) { min-height: 100%; }
  .auth-form-panel { width: 100%; padding: 2rem 1rem !important; }
  .auth-form-wrap { width: 100%; max-width: 420px; }
  .auth-form-wrap .form-control { min-height: 50px; }
  .auth-form-wrap .btn { min-height: 54px; }
}

.quick-order-card .card-body { padding: 1.5rem; }

.quick-order-title { margin-bottom: 1.25rem; }

.quick-order-step { display: flex; align-items: flex-start; gap: 0.85rem; }

.quick-order-step-number { display: grid; width: 28px; height: 28px; place-items: center; flex: 0 0 28px; margin-top: 1.85rem; border-radius: 50%; color: rgb(255, 255, 255); background: rgb(59, 130, 246); font-size: 0.75rem; font-weight: 700; }

.quick-order-search .input-group-text { border-right: 0px !important; }

.quick-order-search .form-control { border-left: 0px !important; }

.quick-order-hint { display: block; margin-top: 0.45rem; color: var(--panel-muted); }

.quick-order-alternative { margin: 1rem 0px 0px 2.6rem; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel-surface); }

.quick-order-alternative summary { padding: 0.8rem 1rem; color: var(--panel-ink); cursor: pointer; font-size: 0.82rem; font-weight: 650; }

.quick-order-alternative-body { padding: 0px 1rem 1rem; }

.quick-order-summary { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--panel-border); }

.quick-order-required-fields { margin: 1rem 0px 0px 2.6rem; }

.quick-order-price { color: rgb(180, 83, 9) !important; font-weight: 700; }

html[data-panel-theme="dark"] .quick-order-alternative { border-color: var(--panel-border); background: var(--panel-surface); }

@media (max-width: 575.98px) {
  .quick-order-card .card-body { padding: 1rem; }
  .quick-order-step { gap: 0.65rem; }
  .quick-order-step-number { width: 24px; height: 24px; flex-basis: 24px; }
  .quick-order-alternative, .quick-order-required-fields { margin-left: 0px; }
}

.quick-order-alternative-open { border: 0px !important; background: transparent !important; }

.quick-order-alternative-open .quick-order-alternative-body { padding: 0px !important; }

.quick-order-step { display: block !important; }

.quick-order-summary { padding-top: 0px !important; border-top: 0px !important; }

.quick-order-search { position: relative; }

.quick-order-search-icon { position: absolute; top: 50%; left: 1rem; z-index: 2; color: var(--panel-muted); font-size: 1.1rem; pointer-events: none; transform: translateY(-50%); }

.quick-order-search .form-control { padding-left: 2.75rem !important; border: 1px solid rgb(208, 213, 221) !important; border-radius: 7px !important; }

html[data-panel-theme="dark"] .quick-order-search .form-control { border-color: var(--panel-border) !important; }

.quick-order-alternative-open { width: 100% !important; margin: 1rem 0px 0px !important; }

.quick-order-alternative-open .select2-container--default .select2-selection--single { display: flex !important; align-items: center !important; }

.quick-order-alternative-open .select2-container--default .select2-selection--single .select2-selection__rendered { min-height: inherit; width: 100%; display: flex !important; align-items: center !important; padding-top: 0px !important; padding-bottom: 0px !important; line-height: normal !important; }

.quick-order-alternative-open .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50% !important; transform: translateY(-50%); }

.quick-order-price { font-weight: 400 !important; }

.quick-order-required-fields { width: 100% !important; max-width: none !important; margin: 1rem 0px 0px !important; }

:root { --panel-primary: #3b82f6; --panel-primary-dark: #2563eb; --panel-primary-soft: #eef5ff; --panel-ink: #172033; --panel-muted: #667085; --panel-border: #e3eaf4; --panel-surface: #ffffff; --panel-bg: #f4f7fb; --panel-success: #0f9f77; --panel-shadow: 0 12px 34px rgba(30, 64, 175, .07); }

body, .layout-page, .content-wrapper { background: var(--panel-bg); }

.layout-menu { box-shadow: rgba(15, 35, 64, 0.12) 12px 0px 38px; background: linear-gradient(rgb(16, 35, 63) 0%, rgb(11, 23, 42) 100%) !important; }

.brand-mark { background: linear-gradient(135deg, rgb(96, 165, 250), rgb(37, 99, 235)); box-shadow: rgba(37, 99, 235, 0.28) 0px 8px 22px; }

.layout-menu .menu-item.active > .menu-link { box-shadow: rgb(147, 197, 253) 3px 0px inset, rgba(37, 99, 235, 0.24) 0px 8px 22px; color: rgb(255, 255, 255) !important; background: linear-gradient(135deg, rgb(59, 130, 246), rgb(37, 99, 235)) !important; }

.layout-menu .menu-link:hover { background: rgba(96, 165, 250, 0.12) !important; }

.layout-navbar { border-color: rgba(219, 229, 242, 0.95); backdrop-filter: blur(14px); border-radius: 14px !important; background: rgba(255, 255, 255, 0.94) !important; box-shadow: rgba(30, 64, 175, 0.06) 0px 10px 30px !important; }

.profile-trigger { border-radius: 10px; }

.profile-trigger:hover { background: rgb(239, 246, 255); }

.profile-trigger .avatar { background: linear-gradient(135deg, rgb(96, 165, 250), rgb(37, 99, 235)); }

.card, .category-card, .product-card, .catalog-toolbar { border-color: var(--panel-border); border-radius: 14px; box-shadow: var(--panel-shadow); }

.card:hover, .category-card:hover, .product-card:hover { border-color: rgb(201, 218, 243); box-shadow: rgba(30, 64, 175, 0.09) 0px 16px 38px; }

.metric-icon, .section-title-icon, .category-icon { color: rgb(37, 99, 235); background: rgb(234, 243, 255); border-radius: 11px; }

.metric-card.is-green { --metric-color: #0f9f77; --metric-tint: #e9f9f4; }

.metric-card.is-blue { --metric-color: #2563eb; --metric-tint: #eaf3ff; }

.metric-card.is-orange { --metric-color: #7c6ee6; --metric-tint: #f0efff; }

.metric-card.is-red { --metric-color: #d45463; --metric-tint: #ffedf0; }

.btn { border-radius: 10px; }

.btn-primary, .auth-form-wrap .btn-primary { border-color: rgb(59, 130, 246); background: linear-gradient(135deg, rgb(79, 156, 249), rgb(37, 99, 235)); box-shadow: rgba(37, 99, 235, 0.2) 0px 8px 20px; }

.btn-primary:hover, .auth-form-wrap .btn-primary:hover { border-color: rgb(29, 78, 216); background: linear-gradient(135deg, rgb(59, 130, 246), rgb(29, 78, 216)); transform: translateY(-1px); }

.form-control, .form-select, .select2-container--default .select2-selection--single { background-color: rgb(251, 253, 255); border-color: rgb(214, 225, 239) !important; border-radius: 10px !important; }

.form-control:focus, .form-select:focus { border-color: rgb(96, 165, 250) !important; box-shadow: rgba(59, 130, 246, 0.11) 0px 0px 0px 4px !important; }

.form-check-input:checked { border-color: rgb(59, 130, 246); background-color: rgb(59, 130, 246); }

.category-card:hover { border-color: rgb(139, 184, 242); }

.product-category { border-color: rgb(207, 226, 255); color: rgb(29, 78, 216); background: rgb(239, 246, 255); }

.product-buy, .page-item.active .page-link { border-color: rgb(37, 99, 235); background: rgb(37, 99, 235); }

.product-buy:hover { border-color: rgb(29, 78, 216); background: rgb(29, 78, 216); }

.page-link { color: rgb(37, 99, 235); }

.quick-order-step-number { background: rgb(59, 130, 246); }

.quick-order-price { color: rgb(37, 99, 235) !important; }

.theme-toggle:hover { border-color: rgb(96, 165, 250); background: rgb(239, 246, 255); }

.auth-page, html[data-panel-theme="dark"] .auth-page { background: linear-gradient(135deg, rgb(237, 244, 252) 0%, rgb(248, 251, 255) 100%) !important; }

.auth-shell { border-color: rgb(220, 231, 245); border-radius: 18px; box-shadow: rgba(29, 78, 216, 0.13) 0px 26px 70px; }

.auth-showcase { background: linear-gradient(145deg, rgb(16, 43, 76) 0%, rgb(23, 75, 122) 56%, rgb(59, 130, 246) 100%) !important; }

.auth-showcase::before, .auth-showcase::after { display: block; border-color: rgba(255, 255, 255, 0.12); }

.auth-brand .brand-mark { background: rgba(255, 255, 255, 0.16); }

.auth-message .eyebrow { border-color: rgba(191, 219, 254, 0.35); color: rgb(219, 234, 254); background: rgba(255, 255, 255, 0.08); }

.auth-features i { color: rgb(147, 197, 253); }

.auth-form-eyebrow { color: rgb(37, 99, 235); }

.auth-page .form-check-input:checked, html[data-panel-theme="dark"] .auth-page .form-check-input:checked { border-color: rgb(59, 130, 246); background-color: rgb(59, 130, 246); }

html[data-panel-theme="dark"] { --panel-primary: #60a5fa; --panel-primary-dark: #3b82f6; --panel-primary-soft: #172b48; --panel-ink: #edf4ff; --panel-muted: #9eb0c7; --panel-border: #2a3c54; --panel-surface: #172235; --panel-bg: #0d1624; --panel-success: #42d6aa; --panel-shadow: 0 10px 30px rgba(0,0,0,.20); }

html[data-panel-theme="dark"] .layout-menu { background: linear-gradient(rgb(9, 20, 36) 0%, rgb(7, 16, 29) 100%) !important; }

html[data-panel-theme="dark"] .layout-navbar, html[data-panel-theme="dark"] .card, html[data-panel-theme="dark"] .card-header, html[data-panel-theme="dark"] .card-body, html[data-panel-theme="dark"] .catalog-toolbar, html[data-panel-theme="dark"] .category-card, html[data-panel-theme="dark"] .product-card, html[data-panel-theme="dark"] .modal-content, html[data-panel-theme="dark"] .dropdown-menu, html[data-panel-theme="dark"] .offcanvas, html[data-panel-theme="dark"] .list-group, html[data-panel-theme="dark"] .list-group-item, html[data-panel-theme="dark"] .quick-search-results { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .bg-light, html[data-panel-theme="dark"] .bg-white, html[data-panel-theme="dark"] .table-light, html[data-panel-theme="dark"] .table thead th, html[data-panel-theme="dark"] .table-hover > tbody > tr:hover > * { color: var(--panel-ink) !important; background-color: rgb(29, 42, 62) !important; }

html[data-panel-theme="dark"] .form-control, html[data-panel-theme="dark"] .form-select, html[data-panel-theme="dark"] .select2-selection, html[data-panel-theme="dark"] .select2-dropdown, html[data-panel-theme="dark"] .select2-search__field, html[data-panel-theme="dark"] .input-group-text { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: rgb(17, 28, 44) !important; }

html[data-panel-theme="dark"] .select2-results__option--highlighted, html[data-panel-theme="dark"] .form-check-input:checked, html[data-panel-theme="dark"] .pagination .page-item.active .page-link { color: rgb(255, 255, 255) !important; border-color: rgb(59, 130, 246) !important; background: rgb(59, 130, 246) !important; }

html[data-panel-theme="dark"] .profile-trigger:hover, html[data-panel-theme="dark"] .dropdown-item:hover, html[data-panel-theme="dark"] .nav-tabs .nav-link:hover { background: rgb(29, 42, 62) !important; }

.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner > .menu-item.active::before { display: none !important; content: none !important; }

.metric-value { color: rgb(52, 64, 84); font-weight: 600; letter-spacing: -0.02em; }

html[data-panel-theme="dark"] .metric-value { color: rgb(219, 231, 245) !important; font-weight: 600; }

.metric-value { color: rgb(95, 111, 133); font-weight: 500; }

html[data-panel-theme="dark"] .metric-value { color: rgb(199, 212, 228) !important; font-weight: 500; }

.avatar-fixed-icon { place-items: center; display: grid !important; }

.avatar-fixed-icon .bx { font-size: 1.25rem; line-height: 1; }

.avatar-fixed-icon { overflow: visible; border-radius: 50% !important; }

.product-logo img { width: 32px; height: 32px; object-fit: contain; filter: none !important; }


html[data-panel-theme="light"] .auth-page .auth-showcase .auth-message > p,
html[data-panel-theme="dark"] .auth-page .auth-showcase .auth-message > p {
  color: #dbeafe !important;
}
:root { --panel-primary: #3b82f6; --panel-primary-dark: #2563eb; --panel-primary-soft: #eef5ff; --panel-ink: #172033; --panel-muted: #667085; --panel-border: #e3eaf4; --panel-surface: #ffffff; --panel-bg: #f4f7fb; --panel-success: #0f9f77; --panel-shadow: 0 12px 34px rgba(30, 64, 175, .07); }

body, .layout-page, .content-wrapper { background: var(--panel-bg); }

.layout-menu { box-shadow: rgba(15, 35, 64, 0.12) 12px 0px 38px; background: linear-gradient(rgb(16, 35, 63) 0%, rgb(11, 23, 42) 100%) !important; }

.brand-mark { background: linear-gradient(135deg, rgb(96, 165, 250), rgb(37, 99, 235)); box-shadow: rgba(37, 99, 235, 0.28) 0px 8px 22px; }

.layout-menu .menu-item.active > .menu-link { box-shadow: rgb(147, 197, 253) 3px 0px inset, rgba(37, 99, 235, 0.24) 0px 8px 22px; color: rgb(255, 255, 255) !important; background: linear-gradient(135deg, rgb(59, 130, 246), rgb(37, 99, 235)) !important; }

.layout-menu .menu-link:hover { background: rgba(96, 165, 250, 0.12) !important; }

.layout-navbar { border-color: rgba(219, 229, 242, 0.95); backdrop-filter: blur(14px); border-radius: 14px !important; background: rgba(255, 255, 255, 0.94) !important; box-shadow: rgba(30, 64, 175, 0.06) 0px 10px 30px !important; }

.profile-trigger { border-radius: 10px; }

.profile-trigger:hover { background: rgb(239, 246, 255); }

.profile-trigger .avatar { background: linear-gradient(135deg, rgb(96, 165, 250), rgb(37, 99, 235)); }

.card, .category-card, .product-card, .catalog-toolbar { border-color: var(--panel-border); border-radius: 14px; box-shadow: var(--panel-shadow); }

.card:hover, .category-card:hover, .product-card:hover { border-color: rgb(201, 218, 243); box-shadow: rgba(30, 64, 175, 0.09) 0px 16px 38px; }

.metric-icon, .section-title-icon, .category-icon { color: rgb(37, 99, 235); background: rgb(234, 243, 255); border-radius: 11px; }

.metric-card.is-green { --metric-color: #0f9f77; --metric-tint: #e9f9f4; }

.metric-card.is-blue { --metric-color: #2563eb; --metric-tint: #eaf3ff; }

.metric-card.is-orange { --metric-color: #7c6ee6; --metric-tint: #f0efff; }

.metric-card.is-red { --metric-color: #d45463; --metric-tint: #ffedf0; }

.btn { border-radius: 10px; }

.btn-primary, .auth-form-wrap .btn-primary { border-color: rgb(59, 130, 246); background: linear-gradient(135deg, rgb(79, 156, 249), rgb(37, 99, 235)); box-shadow: rgba(37, 99, 235, 0.2) 0px 8px 20px; }

.btn-primary:hover, .auth-form-wrap .btn-primary:hover { border-color: rgb(29, 78, 216); background: linear-gradient(135deg, rgb(59, 130, 246), rgb(29, 78, 216)); transform: translateY(-1px); }

.form-control, .form-select, .select2-container--default .select2-selection--single { background-color: rgb(251, 253, 255); border-color: rgb(214, 225, 239) !important; border-radius: 10px !important; }

.form-control:focus, .form-select:focus { border-color: rgb(96, 165, 250) !important; box-shadow: rgba(59, 130, 246, 0.11) 0px 0px 0px 4px !important; }

.form-check-input:checked { border-color: rgb(59, 130, 246); background-color: rgb(59, 130, 246); }

.category-card:hover { border-color: rgb(139, 184, 242); }

.product-category { border-color: rgb(207, 226, 255); color: rgb(29, 78, 216); background: rgb(239, 246, 255); }

.product-buy, .page-item.active .page-link { border-color: rgb(37, 99, 235); background: rgb(37, 99, 235); }

.product-buy:hover { border-color: rgb(29, 78, 216); background: rgb(29, 78, 216); }

.page-link { color: rgb(37, 99, 235); }

.quick-order-step-number { background: rgb(59, 130, 246); }

.quick-order-price { color: rgb(37, 99, 235) !important; }

.theme-toggle:hover { border-color: rgb(96, 165, 250); background: rgb(239, 246, 255); }

.auth-page, html[data-panel-theme="dark"] .auth-page { background: linear-gradient(135deg, rgb(237, 244, 252) 0%, rgb(248, 251, 255) 100%) !important; }

.auth-shell { border-color: rgb(220, 231, 245); border-radius: 18px; box-shadow: rgba(29, 78, 216, 0.13) 0px 26px 70px; }

.auth-showcase { background: linear-gradient(145deg, rgb(16, 43, 76) 0%, rgb(23, 75, 122) 56%, rgb(59, 130, 246) 100%) !important; }

.auth-showcase::before, .auth-showcase::after { display: block; border-color: rgba(255, 255, 255, 0.12); }

.auth-brand .brand-mark { background: rgba(255, 255, 255, 0.16); }

.auth-message .eyebrow { border-color: rgba(191, 219, 254, 0.35); color: rgb(219, 234, 254); background: rgba(255, 255, 255, 0.08); }

.auth-features i { color: rgb(147, 197, 253); }

.auth-form-eyebrow { color: rgb(37, 99, 235); }

.auth-page .form-check-input:checked, html[data-panel-theme="dark"] .auth-page .form-check-input:checked { border-color: rgb(59, 130, 246); background-color: rgb(59, 130, 246); }

html[data-panel-theme="dark"] { --panel-primary: #60a5fa; --panel-primary-dark: #3b82f6; --panel-primary-soft: #172b48; --panel-ink: #edf4ff; --panel-muted: #9eb0c7; --panel-border: #2a3c54; --panel-surface: #172235; --panel-bg: #0d1624; --panel-success: #42d6aa; --panel-shadow: 0 10px 30px rgba(0,0,0,.20); }

html[data-panel-theme="dark"] .layout-menu { background: linear-gradient(rgb(9, 20, 36) 0%, rgb(7, 16, 29) 100%) !important; }

html[data-panel-theme="dark"] .layout-navbar, html[data-panel-theme="dark"] .card, html[data-panel-theme="dark"] .card-header, html[data-panel-theme="dark"] .card-body, html[data-panel-theme="dark"] .catalog-toolbar, html[data-panel-theme="dark"] .category-card, html[data-panel-theme="dark"] .product-card, html[data-panel-theme="dark"] .modal-content, html[data-panel-theme="dark"] .dropdown-menu, html[data-panel-theme="dark"] .offcanvas, html[data-panel-theme="dark"] .list-group, html[data-panel-theme="dark"] .list-group-item, html[data-panel-theme="dark"] .quick-search-results { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .bg-light, html[data-panel-theme="dark"] .bg-white, html[data-panel-theme="dark"] .table-light, html[data-panel-theme="dark"] .table thead th, html[data-panel-theme="dark"] .table-hover > tbody > tr:hover > * { color: var(--panel-ink) !important; background-color: rgb(29, 42, 62) !important; }

html[data-panel-theme="dark"] .form-control, html[data-panel-theme="dark"] .form-select, html[data-panel-theme="dark"] .select2-selection, html[data-panel-theme="dark"] .select2-dropdown, html[data-panel-theme="dark"] .select2-search__field, html[data-panel-theme="dark"] .input-group-text { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: rgb(17, 28, 44) !important; }

html[data-panel-theme="dark"] .select2-results__option--highlighted, html[data-panel-theme="dark"] .form-check-input:checked, html[data-panel-theme="dark"] .pagination .page-item.active .page-link { color: rgb(255, 255, 255) !important; border-color: rgb(59, 130, 246) !important; background: rgb(59, 130, 246) !important; }

html[data-panel-theme="dark"] .profile-trigger:hover, html[data-panel-theme="dark"] .dropdown-item:hover, html[data-panel-theme="dark"] .nav-tabs .nav-link:hover { background: rgb(29, 42, 62) !important; }

.layout-navbar-fixed .layout-page::before { display: none !important; content: none !important; }

@media (max-width: 575.98px) {
  .auth-page { min-height: 100dvh !important; padding: 0px !important; background: rgb(255, 255, 255) !important; }
  .auth-shell { width: 100% !important; min-height: 100dvh !important; margin: 0px !important; border: 0px !important; border-radius: 0px !important; box-shadow: none !important; background: rgb(255, 255, 255) !important; }
}

:root { --panel-primary: #6558e8; --panel-primary-dark: #4f46c8; --panel-primary-soft: #eeecff; --panel-ink: #20213a; --panel-muted: #74758c; --panel-border: #e9e9f3; --panel-surface: #ffffff; --panel-bg: #f7f7fc; --panel-success: #20a779; --panel-shadow: 0 14px 40px rgba(36, 37, 71, .07); }

body { color: var(--panel-ink); background: var(--panel-bg); font-family: Inter, "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

.layout-page, .content-wrapper { background: var(--panel-bg); }

.layout-menu { border-right: 1px solid rgba(255, 255, 255, 0.08); box-shadow: rgba(24, 23, 47, 0.12) 12px 0px 40px; background: linear-gradient(rgb(37, 35, 62) 0%, rgb(23, 23, 42) 100%) !important; }

.layout-menu .app-brand { height: 86px; padding: 0px 1.5rem; }

.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; flex: 0 0 auto; border-radius: 12px; color: rgb(255, 255, 255); font-size: 18px; font-weight: 800; background: linear-gradient(135deg, rgb(125, 112, 255), rgb(87, 72, 223)); box-shadow: rgba(101, 88, 232, 0.35) 0px 8px 22px; }

.brand-copy { min-width: 0px; color: rgb(255, 255, 255); line-height: 1.15; }

.brand-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.98rem; }

.brand-copy small { display: block; margin-top: 5px; color: rgb(170, 169, 191); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }

.layout-menu .menu-inner { padding: 0.5rem 0.8rem 1rem !important; }

.layout-menu .menu-item { margin: 0.2rem 0px; }

.layout-menu .menu-link { min-height: 46px; border-radius: 12px; font-weight: 500; transition: color 0.2s, background 0.2s, transform 0.2s; color: rgb(185, 184, 202) !important; }

.layout-menu .menu-link:hover { transform: translateX(2px); color: rgb(255, 255, 255) !important; background: rgba(255, 255, 255, 0.07) !important; }

.layout-menu .menu-item.active > .menu-link { box-shadow: rgba(54, 44, 166, 0.32) 0px 8px 24px; color: rgb(255, 255, 255) !important; background: linear-gradient(135deg, rgb(104, 91, 233), rgb(87, 72, 216)) !important; }

.layout-menu .menu-icon { color: inherit !important; }

.layout-navbar { min-height: 70px; border: 1px solid rgba(232, 232, 242, 0.9); backdrop-filter: blur(16px); margin-top: 1.1rem !important; border-radius: 18px !important; background: rgba(255, 255, 255, 0.92) !important; box-shadow: rgba(42, 43, 76, 0.06) 0px 10px 32px !important; }

.navbar-welcome small { display: block; color: var(--panel-muted); font-size: 0.75rem; }

.navbar-welcome strong { color: var(--panel-ink); font-size: 0.93rem; }

.profile-trigger { align-items: center; gap: 0.75rem; border-radius: 13px; display: flex !important; padding: 0.35rem 0.5rem !important; }

.profile-trigger:hover { background: rgb(245, 244, 251); }

.profile-trigger .avatar { display: grid; place-items: center; color: rgb(255, 255, 255); font-weight: 700; background: linear-gradient(135deg, rgb(118, 105, 239), rgb(81, 69, 199)); }

.page-heading { margin: 0.65rem 0px 1.7rem; }

.page-heading h4 { margin: 0px; color: var(--panel-ink); font-size: 1.55rem; letter-spacing: -0.035em; }

.page-heading p { margin: 0.45rem 0px 0px; color: var(--panel-muted); }

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

.metric-card { position: relative; overflow: hidden; height: 100%; }

.metric-card::after { content: ""; position: absolute; right: -32px; bottom: -42px; width: 110px; height: 110px; border-radius: 50%; background: var(--metric-tint, #f0efff); }

.metric-card .card-body { position: relative; z-index: 1; padding: 1.45rem; }

.metric-label { margin-bottom: 0.65rem; color: var(--panel-muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

.metric-value { margin: 0px; color: var(--panel-ink); font-size: 1.75rem; font-weight: 750; letter-spacing: -0.04em; }

.metric-note { display: block; margin-top: 0.38rem; color: var(--panel-muted); font-size: 0.78rem; }

.metric-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: var(--metric-color, var(--panel-primary)); background: var(--metric-tint, var(--panel-primary-soft)); font-size: 1.35rem; }

.metric-card.is-green { --metric-color: #15966d; --metric-tint: #e7f8f1; }

.metric-card.is-blue { --metric-color: #3281dc; --metric-tint: #eaf4ff; }

.metric-card.is-orange { --metric-color: #d98324; --metric-tint: #fff4e6; }

.metric-card.is-red { --metric-color: #d45463; --metric-tint: #ffedf0; }

.order-card .card-body { padding: 1.55rem; }

.section-title { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.4rem; }

.section-title-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--panel-primary); background: var(--panel-primary-soft); font-size: 1.2rem; }

.section-title h5 { margin: 0px; color: var(--panel-ink); font-size: 1.06rem; }

.section-title p { margin: 0.2rem 0px 0px; color: var(--panel-muted); font-size: 0.8rem; }

.form-label { margin-bottom: 0.5rem; color: rgb(80, 81, 106); font-size: 0.82rem; font-weight: 650; }

.form-control, .form-select, .select2-container--default .select2-selection--single { min-height: 46px; background-color: rgb(251, 251, 254); border: 1px solid rgb(223, 223, 235) !important; border-radius: 12px !important; box-shadow: none !important; }

.form-control:focus, .form-select:focus { background: rgb(255, 255, 255); border-color: rgb(139, 128, 236) !important; box-shadow: rgba(101, 88, 232, 0.1) 0px 0px 0px 4px !important; }

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

.btn { min-height: 44px; border-radius: 12px; font-weight: 650; }

.btn-primary { border-color: var(--panel-primary); background: linear-gradient(135deg, rgb(112, 100, 237), rgb(85, 71, 209)); box-shadow: rgba(101, 88, 232, 0.22) 0px 9px 22px; }

.btn-primary:hover { border-color: var(--panel-primary-dark); background: linear-gradient(135deg, rgb(98, 85, 221), rgb(73, 61, 189)); transform: translateY(-1px); }

.alert { border: 0px; border-radius: 14px; }

.catalog-toolbar { padding: 1rem; margin-bottom: 1.35rem; }

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

.product-card { display: flex; min-width: 0px; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; }

.product-card:hover { transform: translateY(-3px); box-shadow: rgba(36, 37, 71, 0.11) 0px 18px 46px; }

.product-card .card-body { display: flex; padding: 1.25rem; flex: 1 1 0%; flex-direction: column; }

.product-category { display: inline-flex; align-self: flex-start; margin-bottom: 0.85rem; padding: 0.35rem 0.65rem; border-radius: 999px; color: var(--panel-primary); background: var(--panel-primary-soft); font-size: 0.68rem; font-weight: 700; }

.product-name { min-height: 2.75rem; margin: 0px 0px 0.55rem; color: var(--panel-ink); font-size: 1rem; line-height: 1.4; }

.product-description { display: -webkit-box; overflow: hidden; margin: 0px 0px 1rem; color: var(--panel-muted); font-size: 0.78rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

.product-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--panel-border); }

.product-price { color: var(--panel-ink); font-size: 1.2rem; font-weight: 750; letter-spacing: -0.03em; }

.product-delivery { display: flex; align-items: center; gap: 0.3rem; color: var(--panel-success); font-size: 0.7rem; font-weight: 650; }

.product-buy { margin-top: 0.9rem; }

.catalog-empty { padding: 3rem 1rem; text-align: center; }

.catalog-empty i { display: block; margin-bottom: 0.75rem; color: var(--panel-muted); font-size: 2.5rem; }

.product-modal-description { max-height: 180px; overflow-y: auto; padding: 0.9rem; border-radius: 12px; color: var(--panel-muted); background: var(--panel-bg); font-size: 0.82rem; line-height: 1.6; white-space: pre-line; }

.pagination { gap: 0.3rem; margin-top: 1.5rem; }

.page-link { border: 0px; color: var(--panel-primary); border-radius: 9px !important; }

.page-item.active .page-link { background: var(--panel-primary); }

.auth-page { min-height: 100vh; padding: 24px; background: rgb(246, 245, 251); }

.auth-shell { display: grid; width: min(1080px, 100%); min-height: 650px; margin: auto; overflow: hidden; border: 1px solid rgb(232, 231, 239); border-radius: 28px; background: rgb(255, 255, 255); box-shadow: rgba(31, 30, 60, 0.13) 0px 28px 80px; grid-template-columns: 1.08fr 0.92fr; }

.auth-showcase { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 3rem; color: rgb(255, 255, 255); background: linear-gradient(145deg, rgb(38, 36, 65) 0%, rgb(74, 63, 193) 65%, rgb(112, 100, 237) 100%); }

.auth-showcase::before, .auth-showcase::after { content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; }

.auth-showcase::before { top: -150px; right: -130px; width: 420px; height: 420px; }

.auth-showcase::after { right: 35px; bottom: -190px; width: 360px; height: 360px; }

.auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.85rem; font-weight: 700; }

.auth-brand .brand-mark { background: rgba(255, 255, 255, 0.16); box-shadow: none; backdrop-filter: blur(12px); }

.auth-message { position: relative; z-index: 1; max-width: 470px; }

.auth-message .eyebrow { display: inline-flex; margin-bottom: 1rem; padding: 0.45rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; color: rgb(222, 219, 255); background: rgba(255, 255, 255, 0.08); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.auth-message h1 { margin: 0px 0px 1rem; color: rgb(255, 255, 255); font-size: clamp(2.15rem, 4vw, 3.4rem); line-height: 1.07; letter-spacing: -0.055em; }

.auth-message p { max-width: 410px; margin: 0px; color: rgb(217, 215, 239); font-size: 1rem; line-height: 1.7; }

.auth-footnote { position: relative; z-index: 1; color: rgb(197, 194, 223); font-size: 0.78rem; }

.auth-form-panel { display: flex; align-items: center; padding: 3.8rem; }

.auth-form-wrap { width: 100%; max-width: 380px; margin: auto; }

.auth-form-wrap h2 { margin: 0px 0px 0.55rem; color: var(--panel-ink); font-size: 1.7rem; letter-spacing: -0.035em; }

.auth-form-wrap > p { margin-bottom: 2rem; color: var(--panel-muted); line-height: 1.6; }

.auth-form-wrap .btn { min-height: 50px; }

@media (max-width: 991.98px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .auth-shell { max-width: 570px; grid-template-columns: 1fr; }
  .auth-showcase { min-height: 260px; padding: 2rem; }
  .auth-message h1 { font-size: 2.25rem; }
  .auth-message p, .auth-footnote { display: none; }
  .auth-form-panel { padding: 2.4rem 2rem; }
  .navbar-welcome { display: none; }
}

@media (max-width: 575.98px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .auth-page { padding: 0px; }
  .auth-shell { min-height: 100vh; border: 0px; border-radius: 0px; }
  .auth-showcase { min-height: 215px; }
  .auth-form-panel { padding: 2rem 1.35rem; }
  .container-p-y { padding-top: 1.15rem !important; }
  .page-heading h4 { font-size: 1.35rem; }
}

:root { --panel-primary: #3b82f6; --panel-primary-dark: #b45309; --panel-primary-soft: #fff7ed; --panel-ink: #172033; --panel-muted: #667085; --panel-border: #e4e7ec; --panel-surface: #ffffff; --panel-bg: #f5f6f8; --panel-success: #15803d; --panel-shadow: 0 1px 2px rgba(16, 24, 40, .04); }

body { background: var(--panel-bg); color: var(--panel-ink); }

.layout-page, .content-wrapper { background: var(--panel-bg); }

.layout-menu { border-right: 0px; box-shadow: none; background: rgb(17, 24, 39) !important; }

.layout-menu .app-brand { height: 76px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

.brand-mark { border-radius: 8px; background: rgb(59, 130, 246); box-shadow: none; }

.brand-copy small { color: rgb(148, 163, 184); }

.layout-menu .menu-inner { padding: 1rem 0.75rem !important; }

.layout-menu .menu-link { min-height: 42px; border-radius: 7px; font-size: 0.84rem; transition: color 0.15s, background 0.15s; color: rgb(174, 184, 200) !important; }

.layout-menu .menu-link:hover { transform: none; color: rgb(255, 255, 255) !important; background: rgba(255, 255, 255, 0.06) !important; }

.layout-menu .menu-item.active > .menu-link { box-shadow: rgb(96, 165, 250) 3px 0px inset; color: rgb(255, 255, 255) !important; background: rgb(38, 50, 71) !important; }

.layout-menu .menu-header-text { color: rgb(113, 128, 150) !important; letter-spacing: 0.08em; }

.layout-navbar { min-height: 64px; border: 1px solid var(--panel-border); backdrop-filter: none; margin-top: 1rem !important; border-radius: 9px !important; background: rgb(255, 255, 255) !important; box-shadow: var(--panel-shadow) !important; }

.profile-trigger { border-radius: 7px; }

.profile-trigger:hover { background: rgb(242, 244, 247); }

.profile-trigger .avatar { background: rgb(36, 48, 68); }

.page-heading { margin: 0.6rem 0px 1.4rem; }

.page-heading h4 { font-size: 1.42rem; letter-spacing: -0.02em; }

.page-heading p { margin-top: 0.35rem; font-size: 0.84rem; }

.card { border: 1px solid var(--panel-border); border-radius: 10px; box-shadow: var(--panel-shadow); }

.metric-card::after { display: none; }

.metric-card .card-body { padding: 1.25rem; }

.metric-label { color: rgb(102, 112, 133); font-size: 0.7rem; letter-spacing: 0.04em; }

.metric-value { font-size: 1.65rem; letter-spacing: -0.025em; }

.metric-icon { width: 42px; height: 42px; border-radius: 8px; color: rgb(180, 83, 9); background: rgb(255, 247, 237); }

.metric-card.is-green, .metric-card.is-blue, .metric-card.is-orange, .metric-card.is-red { --metric-color: #344054; --metric-tint: #f2f4f7; }

.order-card .card-body { padding: 1.4rem; }

.section-title-icon { border-radius: 8px; color: rgb(180, 83, 9); background: rgb(255, 247, 237); }

.form-control, .form-select, .select2-container--default .select2-selection--single { min-height: 44px; background: rgb(255, 255, 255); border-color: rgb(208, 213, 221) !important; border-radius: 7px !important; }

.form-control:focus, .form-select:focus { border-color: rgb(59, 130, 246) !important; box-shadow: rgba(217, 119, 6, 0.1) 0px 0px 0px 3px !important; }

.btn { min-height: 42px; border-radius: 7px; }

.btn-primary { border-color: rgb(59, 130, 246); background: rgb(59, 130, 246); box-shadow: none; }

.btn-primary:hover { border-color: rgb(180, 83, 9); background: rgb(180, 83, 9); transform: none; }

.catalog-toolbar { border-radius: 9px; box-shadow: none; }

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

.category-card { display: flex; min-height: 86px; align-items: center; gap: 0.85rem; padding: 1rem; border: 1px solid var(--panel-border); border-radius: 9px; color: var(--panel-ink); background: var(--panel-surface); transition: border-color 0.15s, box-shadow 0.15s; }

.category-card:hover { border-color: rgb(59, 130, 246); color: var(--panel-ink); box-shadow: rgba(16, 24, 40, 0.06) 0px 4px 12px; }

.category-icon { display: grid; width: 42px; height: 42px; place-items: center; flex: 0 0 auto; border-radius: 8px; color: rgb(180, 83, 9); background: var(--panel-primary-soft); font-size: 1.25rem; }

.category-copy { min-width: 0px; }

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

.category-copy strong { overflow: hidden; color: var(--panel-ink); font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; }

.category-copy small { margin-top: 0.3rem; color: var(--panel-muted); font-size: 0.7rem; }

.category-arrow { margin-left: auto; color: var(--panel-muted); font-size: 1.25rem; }

.catalog-grid { gap: 0.85rem; }

.product-card { border-radius: 9px; box-shadow: none; }

.product-card:hover { border-color: rgb(208, 213, 221); transform: none; box-shadow: rgba(16, 24, 40, 0.06) 0px 4px 12px; }

.product-category { border: 1px solid rgb(254, 215, 170); border-radius: 5px; color: rgb(154, 52, 18); background: rgb(255, 247, 237); }

.product-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; }

.product-card-head .product-category { margin-bottom: 0px; }

.product-logo { display: grid; width: 44px; height: 44px; place-items: center; flex: 0 0 auto; border: 1px solid var(--panel-border); border-radius: 8px; background: rgb(255, 255, 255); }

.product-logo img { width: 25px; height: 25px; object-fit: contain; }

.product-logo i { color: rgb(71, 84, 103); font-size: 1.35rem; }

.product-meta { border-color: rgb(234, 236, 240); }

.product-buy { background: rgb(23, 32, 51); border-color: rgb(23, 32, 51); }

.product-buy:hover { background: rgb(39, 54, 79); border-color: rgb(39, 54, 79); }

.page-item.active .page-link { background: rgb(23, 32, 51); }

.page-link { color: rgb(52, 64, 84); }

.auth-page { background: rgb(238, 240, 243); }

.auth-shell { border-color: rgb(223, 227, 232); border-radius: 12px; box-shadow: rgba(16, 24, 40, 0.12) 0px 18px 55px; }

.auth-showcase { background: rgb(17, 24, 39); }

.auth-showcase::before, .auth-showcase::after { display: none; }

.auth-brand .brand-mark { background: rgb(59, 130, 246); }

.auth-message .eyebrow { border: 1px solid rgb(59, 70, 88); border-radius: 5px; color: rgb(251, 191, 36); background: transparent; }

.auth-message h1 { letter-spacing: -0.035em; }

.auth-features { display: grid; gap: 0.65rem; margin-top: 1.6rem; }

.auth-features span { display: flex; align-items: center; gap: 0.55rem; color: rgb(213, 219, 229); font-size: 0.8rem; }

.auth-features i { color: rgb(96, 165, 250); font-size: 1rem; }

.auth-form-eyebrow { display: block; margin-bottom: 0.65rem; color: rgb(180, 83, 9); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.auth-security-note { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 1.35rem; color: rgb(102, 112, 133); font-size: 0.72rem; }

.theme-toggle { display: grid; width: 38px; height: 38px; padding: 0px; place-items: center; border: 1px solid var(--panel-border); border-radius: 7px; color: var(--panel-ink); background: var(--panel-surface); font-size: 1.1rem; transition: border-color 0.15s, background 0.15s; }

.theme-toggle:hover { border-color: rgb(59, 130, 246); background: var(--panel-primary-soft); }

.auth-theme-toggle { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 10; }

html[data-panel-theme="dark"] { color-scheme: dark; --panel-primary: #60a5fa; --panel-primary-dark: #3b82f6; --panel-primary-soft: #172b48; --panel-ink: #f1f5f9; --panel-muted: #9aa6b6; --panel-border: #303a48; --panel-surface: #1a2029; --panel-bg: #10141b; --panel-success: #4ade80; --panel-shadow: 0 1px 2px rgba(0, 0, 0, .22); }

html[data-panel-theme="dark"] body, html[data-panel-theme="dark"] .layout-page, html[data-panel-theme="dark"] .content-wrapper { background: var(--panel-bg); color: var(--panel-ink); }

html[data-panel-theme="dark"] .layout-menu { background: rgb(11, 15, 21) !important; }

html[data-panel-theme="dark"] .layout-navbar, html[data-panel-theme="dark"] .card, html[data-panel-theme="dark"] .modal-content, html[data-panel-theme="dark"] .dropdown-menu { border-color: var(--panel-border); color: var(--panel-ink); background: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .navbar-welcome strong, html[data-panel-theme="dark"] .page-heading h4, html[data-panel-theme="dark"] .metric-value, html[data-panel-theme="dark"] .section-title h5, html[data-panel-theme="dark"] .product-name, html[data-panel-theme="dark"] .product-price, html[data-panel-theme="dark"] .modal-title { color: var(--panel-ink); }

html[data-panel-theme="dark"] .profile-trigger:hover { background: rgb(37, 45, 56); }

html[data-panel-theme="dark"] .form-control, html[data-panel-theme="dark"] .form-select, html[data-panel-theme="dark"] .select2-container--default .select2-selection--single, html[data-panel-theme="dark"] .input-group-text { color: var(--panel-ink); background-color: rgb(21, 27, 35); border-color: var(--panel-border) !important; }

html[data-panel-theme="dark"] .form-control:disabled, html[data-panel-theme="dark"] .form-control[readonly] { color: rgb(141, 153, 169); background: rgb(19, 24, 32); }

html[data-panel-theme="dark"] .form-control::placeholder { color: rgb(111, 123, 140); }

html[data-panel-theme="dark"] .product-modal-description { background: rgb(17, 23, 31); }

html[data-panel-theme="dark"] .product-category { border-color: rgb(36, 76, 120); color: rgb(147, 197, 253); background: rgb(23, 43, 72); }

html[data-panel-theme="dark"] .product-logo { background: rgb(248, 250, 252); }

html[data-panel-theme="dark"] .product-logo img { filter: none; }

html[data-panel-theme="dark"] .product-buy { border-color: rgb(59, 130, 246); background: rgb(59, 130, 246); }

html[data-panel-theme="dark"] .dropdown-divider, html[data-panel-theme="dark"] .product-meta { border-color: var(--panel-border); }

html[data-panel-theme="dark"] .dropdown-item { color: var(--panel-ink); }

html[data-panel-theme="dark"] .dropdown-item:hover { background: rgb(37, 45, 56); }

html[data-panel-theme="dark"] .auth-page { background: rgb(13, 17, 23); }

html[data-panel-theme="dark"] .auth-shell { border-color: rgb(43, 52, 65); background: var(--panel-surface); }

html[data-panel-theme="dark"] .auth-form-wrap h2 { color: var(--panel-ink); }

html[data-panel-theme="light"] body, html[data-panel-theme="light"] .layout-page, html[data-panel-theme="light"] .content-wrapper { color: rgb(29, 41, 57); }

html[data-panel-theme="light"] h1, html[data-panel-theme="light"] h2, html[data-panel-theme="light"] h3, html[data-panel-theme="light"] h4, html[data-panel-theme="light"] h5, html[data-panel-theme="light"] h6, html[data-panel-theme="light"] .card-title, html[data-panel-theme="light"] .modal-title { color: rgb(23, 32, 51); }

html[data-panel-theme="light"] p, html[data-panel-theme="light"] small, html[data-panel-theme="light"] .text-muted { color: rgb(102, 112, 133) !important; }

html[data-panel-theme="light"] .page-heading p, html[data-panel-theme="light"] .metric-note, html[data-panel-theme="light"] .product-description, html[data-panel-theme="light"] .section-title p { color: rgb(102, 112, 133); }

html[data-panel-theme="light"] .form-label, html[data-panel-theme="light"] label { color: rgb(52, 64, 84); }

html[data-panel-theme="light"] .form-control, html[data-panel-theme="light"] .form-select, html[data-panel-theme="light"] .select2-selection, html[data-panel-theme="light"] .select2-selection__rendered { color: rgb(29, 41, 57) !important; }

html[data-panel-theme="light"] .form-control::placeholder { color: rgb(152, 162, 179); opacity: 1; }

html[data-panel-theme="light"] .form-control:disabled, html[data-panel-theme="light"] .form-control[readonly] { color: rgb(71, 84, 103); background: rgb(242, 244, 247); opacity: 1; }

html[data-panel-theme="light"] .table { color: rgb(52, 64, 84); }

html[data-panel-theme="light"] .table > :not(caption) > * > * { border-color: rgb(234, 236, 240); color: rgb(52, 64, 84); }

html[data-panel-theme="light"] .table thead th { color: rgb(71, 84, 103); background: rgb(249, 250, 251); }

html[data-panel-theme="light"] .dropdown-menu { color: rgb(52, 64, 84); background: rgb(255, 255, 255); }

html[data-panel-theme="light"] .dropdown-item { color: rgb(52, 64, 84); }

html[data-panel-theme="light"] .dropdown-item:hover { color: rgb(23, 32, 51); background: rgb(242, 244, 247); }

html[data-panel-theme="light"] .pagination .page-link { color: rgb(52, 64, 84); background: rgb(255, 255, 255); }

html[data-panel-theme="light"] .pagination .page-item.active .page-link { color: rgb(255, 255, 255); background: rgb(23, 32, 51); }

html[data-panel-theme="light"] .alert { color: rgb(52, 64, 84); }

html[data-panel-theme="light"] .product-modal-description { color: rgb(71, 84, 103); }

html[data-panel-theme="light"] .auth-form-wrap > p { color: rgb(102, 112, 133); }

html[data-panel-theme="light"] .auth-form-wrap .form-check-label { color: rgb(71, 84, 103); }

html[data-panel-theme="light"] .navbar-welcome small { color: rgb(102, 112, 133); }

.auth-page { padding: 32px; background: rgb(238, 241, 244) !important; }

.auth-shell { width: min(1040px, 100%); min-height: 620px; border-radius: 10px; }

.auth-showcase { padding: 2.8rem; background: rgb(17, 24, 39) !important; }

.auth-form-panel { padding: 3.5rem; background: rgb(255, 255, 255); }

.auth-form-wrap { max-width: 360px; }

.auth-form-wrap h2 { font-size: 1.65rem; }

.auth-form-wrap .form-control { background: rgb(255, 255, 255); }

.auth-form-wrap .btn-primary { background: rgb(59, 130, 246); border-color: rgb(59, 130, 246); }

.auth-form-wrap .btn-primary:hover { background: rgb(180, 83, 9); border-color: rgb(180, 83, 9); }

@media (max-width: 991.98px) {
  .category-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}

@media (max-width: 575.98px) {
  .category-grid { grid-template-columns: 1fr; }
}

html[data-panel-theme="dark"] { --bs-body-bg: var(--panel-bg); --bs-body-color: var(--panel-ink); --bs-border-color: var(--panel-border); }

html[data-panel-theme="dark"] body, html[data-panel-theme="dark"] .layout-wrapper, html[data-panel-theme="dark"] .layout-container, html[data-panel-theme="dark"] .layout-page, html[data-panel-theme="dark"] .content-wrapper, html[data-panel-theme="dark"] .content-backdrop, html[data-panel-theme="dark"] .container-xxl { color: var(--panel-ink); background-color: var(--panel-bg); }

html[data-panel-theme="dark"] .card, html[data-panel-theme="dark"] .card-header, html[data-panel-theme="dark"] .card-body, html[data-panel-theme="dark"] .catalog-toolbar, html[data-panel-theme="dark"] .category-card, html[data-panel-theme="dark"] .product-card, html[data-panel-theme="dark"] .list-group, html[data-panel-theme="dark"] .list-group-item, html[data-panel-theme="dark"] .modal-content, html[data-panel-theme="dark"] .modal-header, html[data-panel-theme="dark"] .modal-body, html[data-panel-theme="dark"] .modal-footer, html[data-panel-theme="dark"] .dropdown-menu, html[data-panel-theme="dark"] .offcanvas, html[data-panel-theme="dark"] .quick-search-results { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .bg-light, html[data-panel-theme="dark"] .bg-white, html[data-panel-theme="dark"] .table-light, html[data-panel-theme="dark"] .list-group-item-action:hover, html[data-panel-theme="dark"] .list-group-item-action:focus { color: var(--panel-ink) !important; background-color: rgb(32, 40, 51) !important; }

html[data-panel-theme="dark"] .table, html[data-panel-theme="dark"] .table > :not(caption) > * > *, html[data-panel-theme="dark"] .table thead th, html[data-panel-theme="dark"] .table tbody td { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: transparent !important; }

html[data-panel-theme="dark"] .table thead th { background-color: rgb(32, 40, 51) !important; }

html[data-panel-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgb(32, 40, 51) !important; }

html[data-panel-theme="dark"] h1, html[data-panel-theme="dark"] h2, html[data-panel-theme="dark"] h3, html[data-panel-theme="dark"] h4, html[data-panel-theme="dark"] h5, html[data-panel-theme="dark"] h6, html[data-panel-theme="dark"] .card-title, html[data-panel-theme="dark"] .category-copy strong, html[data-panel-theme="dark"] label, html[data-panel-theme="dark"] .form-label { color: var(--panel-ink) !important; }

html[data-panel-theme="dark"] p, html[data-panel-theme="dark"] small, html[data-panel-theme="dark"] .text-muted, html[data-panel-theme="dark"] .form-text { color: var(--panel-muted) !important; }

html[data-panel-theme="dark"] .form-control, html[data-panel-theme="dark"] .form-select, html[data-panel-theme="dark"] .select2-selection, html[data-panel-theme="dark"] .select2-dropdown, html[data-panel-theme="dark"] .select2-search__field, html[data-panel-theme="dark"] .input-group-text { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: rgb(21, 27, 35) !important; }

html[data-panel-theme="dark"] .select2-results__option { color: var(--panel-ink); background: var(--panel-surface); }

html[data-panel-theme="dark"] .select2-results__option--highlighted { color: rgb(255, 255, 255); background: rgb(59, 130, 246); }

html[data-panel-theme="dark"] .form-check-input { border-color: rgb(83, 96, 113); background-color: rgb(21, 27, 35); }

html[data-panel-theme="dark"] .form-check-input:checked { border-color: rgb(59, 130, 246); background-color: rgb(59, 130, 246); }

html[data-panel-theme="dark"] .pagination .page-link { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .pagination .page-item.active .page-link { color: rgb(255, 255, 255) !important; background-color: rgb(59, 130, 246) !important; }

html[data-panel-theme="dark"] .btn-label-secondary, html[data-panel-theme="dark"] .btn-outline-secondary { border-color: rgb(70, 82, 100); color: rgb(214, 221, 232); background-color: transparent; }

html[data-panel-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }

html[data-panel-theme="dark"] .dropdown-divider, html[data-panel-theme="dark"] .border-top { border-color: var(--panel-border) !important; }

html[data-panel-theme="dark"] .nav-tabs { border-bottom-color: var(--panel-border) !important; }

html[data-panel-theme="dark"] .nav-tabs .nav-link { border-color: transparent !important; color: var(--panel-muted) !important; }

html[data-panel-theme="dark"] .nav-tabs .nav-link:hover, html[data-panel-theme="dark"] .nav-tabs .nav-link:focus { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: rgb(32, 40, 51) !important; }

html[data-panel-theme="dark"] .nav-tabs .nav-link.active, html[data-panel-theme="dark"] .tab-content { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: var(--panel-surface) !important; }

.quick-search-results { border: 1px solid var(--panel-border); border-radius: 7px; background: var(--panel-surface); }

.quick-search-results .list-group-item { border-color: var(--panel-border); color: var(--panel-ink); background: var(--panel-surface); }

.auth-page, html[data-panel-theme="dark"] .auth-page { color-scheme: light; color: rgb(52, 64, 84); background: rgb(238, 241, 244) !important; }

.auth-page .auth-shell, html[data-panel-theme="dark"] .auth-page .auth-shell { border-color: rgb(223, 227, 232) !important; color: rgb(52, 64, 84) !important; background: rgb(255, 255, 255) !important; }

.auth-page .auth-form-panel, html[data-panel-theme="dark"] .auth-page .auth-form-panel { color: rgb(52, 64, 84) !important; background: rgb(255, 255, 255) !important; }

.auth-page .auth-form-wrap h2, html[data-panel-theme="dark"] .auth-page .auth-form-wrap h2 { color: rgb(23, 32, 51) !important; }

.auth-page .auth-form-wrap > p, .auth-page .auth-security-note, html[data-panel-theme="dark"] .auth-page .auth-form-wrap > p, html[data-panel-theme="dark"] .auth-page .auth-security-note { color: rgb(102, 112, 133) !important; }

.auth-page .form-label, .auth-page .form-check-label, html[data-panel-theme="dark"] .auth-page .form-label, html[data-panel-theme="dark"] .auth-page .form-check-label { color: rgb(52, 64, 84) !important; }

.auth-page .form-control, html[data-panel-theme="dark"] .auth-page .form-control { border-color: rgb(208, 213, 221) !important; color: rgb(29, 41, 57) !important; background: rgb(255, 255, 255) !important; }

.auth-page .form-control::placeholder, html[data-panel-theme="dark"] .auth-page .form-control::placeholder { color: rgb(152, 162, 179) !important; }

.auth-page .form-check-input, html[data-panel-theme="dark"] .auth-page .form-check-input { border-color: rgb(184, 192, 204); background-color: rgb(255, 255, 255); }

.auth-page .form-check-input:checked, html[data-panel-theme="dark"] .auth-page .form-check-input:checked { border-color: rgb(59, 130, 246); background-color: rgb(59, 130, 246); }

@media (max-width: 575.98px) {
  .auth-page { padding: 0px !important; }
  .layout-navbar { margin-inline: 0.75rem !important; }
  .card-header, .card-body { padding-inline: 1rem; }
}

.layout-menu .menu-inner-shadow, html[data-panel-theme="light"] .layout-menu .menu-inner-shadow, html[data-panel-theme="dark"] .layout-menu .menu-inner-shadow { display: none !important; background: transparent !important; box-shadow: none !important; }

.layout-menu .brand-copy small, html[data-panel-theme="light"] .layout-menu .brand-copy small, html[data-panel-theme="dark"] .layout-menu .brand-copy small { color: rgb(148, 163, 184) !important; }

.auth-form-wrap { max-width: 420px; }

@media (max-width: 575.98px) {
  html:has(.auth-page), body:has(.auth-page), .auth-page, .auth-shell, .auth-form-panel { background: rgb(255, 255, 255) !important; }
  html:has(.auth-page), body:has(.auth-page) { min-height: 100%; }
  .auth-form-panel { width: 100%; padding: 2rem 1rem !important; }
  .auth-form-wrap { width: 100%; max-width: 420px; }
  .auth-form-wrap .form-control { min-height: 50px; }
  .auth-form-wrap .btn { min-height: 54px; }
}

.quick-order-card .card-body { padding: 1.5rem; }

.quick-order-title { margin-bottom: 1.25rem; }

.quick-order-step { display: flex; align-items: flex-start; gap: 0.85rem; }

.quick-order-step-number { display: grid; width: 28px; height: 28px; place-items: center; flex: 0 0 28px; margin-top: 1.85rem; border-radius: 50%; color: rgb(255, 255, 255); background: rgb(59, 130, 246); font-size: 0.75rem; font-weight: 700; }

.quick-order-search .input-group-text { border-right: 0px !important; }

.quick-order-search .form-control { border-left: 0px !important; }

.quick-order-hint { display: block; margin-top: 0.45rem; color: var(--panel-muted); }

.quick-order-alternative { margin: 1rem 0px 0px 2.6rem; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel-surface); }

.quick-order-alternative summary { padding: 0.8rem 1rem; color: var(--panel-ink); cursor: pointer; font-size: 0.82rem; font-weight: 650; }

.quick-order-alternative-body { padding: 0px 1rem 1rem; }

.quick-order-summary { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--panel-border); }

.quick-order-required-fields { margin: 1rem 0px 0px 2.6rem; }

.quick-order-price { color: rgb(180, 83, 9) !important; font-weight: 700; }

html[data-panel-theme="dark"] .quick-order-alternative { border-color: var(--panel-border); background: var(--panel-surface); }

@media (max-width: 575.98px) {
  .quick-order-card .card-body { padding: 1rem; }
  .quick-order-step { gap: 0.65rem; }
  .quick-order-step-number { width: 24px; height: 24px; flex-basis: 24px; }
  .quick-order-alternative, .quick-order-required-fields { margin-left: 0px; }
}

.quick-order-alternative-open { border: 0px !important; background: transparent !important; }

.quick-order-alternative-open .quick-order-alternative-body { padding: 0px !important; }

.quick-order-step { display: block !important; }

.quick-order-summary { padding-top: 0px !important; border-top: 0px !important; }

.quick-order-search { position: relative; }

.quick-order-search-icon { position: absolute; top: 50%; left: 1rem; z-index: 2; color: var(--panel-muted); font-size: 1.1rem; pointer-events: none; transform: translateY(-50%); }

.quick-order-search .form-control { padding-left: 2.75rem !important; border: 1px solid rgb(208, 213, 221) !important; border-radius: 7px !important; }

html[data-panel-theme="dark"] .quick-order-search .form-control { border-color: var(--panel-border) !important; }

.quick-order-alternative-open { width: 100% !important; margin: 1rem 0px 0px !important; }

.quick-order-alternative-open .select2-container--default .select2-selection--single { display: flex !important; align-items: center !important; }

.quick-order-alternative-open .select2-container--default .select2-selection--single .select2-selection__rendered { min-height: inherit; width: 100%; display: flex !important; align-items: center !important; padding-top: 0px !important; padding-bottom: 0px !important; line-height: normal !important; }

.quick-order-alternative-open .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50% !important; transform: translateY(-50%); }

.quick-order-price { font-weight: 400 !important; }

.quick-order-required-fields { width: 100% !important; max-width: none !important; margin: 1rem 0px 0px !important; }

:root { --panel-primary: #3b82f6; --panel-primary-dark: #2563eb; --panel-primary-soft: #eef5ff; --panel-ink: #172033; --panel-muted: #667085; --panel-border: #e3eaf4; --panel-surface: #ffffff; --panel-bg: #f4f7fb; --panel-success: #0f9f77; --panel-shadow: 0 12px 34px rgba(30, 64, 175, .07); }

body, .layout-page, .content-wrapper { background: var(--panel-bg); }

.layout-menu { box-shadow: rgba(15, 35, 64, 0.12) 12px 0px 38px; background: linear-gradient(rgb(16, 35, 63) 0%, rgb(11, 23, 42) 100%) !important; }

.brand-mark { background: linear-gradient(135deg, rgb(96, 165, 250), rgb(37, 99, 235)); box-shadow: rgba(37, 99, 235, 0.28) 0px 8px 22px; }

.layout-menu .menu-item.active > .menu-link { box-shadow: rgb(147, 197, 253) 3px 0px inset, rgba(37, 99, 235, 0.24) 0px 8px 22px; color: rgb(255, 255, 255) !important; background: linear-gradient(135deg, rgb(59, 130, 246), rgb(37, 99, 235)) !important; }

.layout-menu .menu-link:hover { background: rgba(96, 165, 250, 0.12) !important; }

.layout-navbar { border-color: rgba(219, 229, 242, 0.95); backdrop-filter: blur(14px); border-radius: 14px !important; background: rgba(255, 255, 255, 0.94) !important; box-shadow: rgba(30, 64, 175, 0.06) 0px 10px 30px !important; }

.profile-trigger { border-radius: 10px; }

.profile-trigger:hover { background: rgb(239, 246, 255); }

.profile-trigger .avatar { background: linear-gradient(135deg, rgb(96, 165, 250), rgb(37, 99, 235)); }

.card, .category-card, .product-card, .catalog-toolbar { border-color: var(--panel-border); border-radius: 14px; box-shadow: var(--panel-shadow); }

.card:hover, .category-card:hover, .product-card:hover { border-color: rgb(201, 218, 243); box-shadow: rgba(30, 64, 175, 0.09) 0px 16px 38px; }

.metric-icon, .section-title-icon, .category-icon { color: rgb(37, 99, 235); background: rgb(234, 243, 255); border-radius: 11px; }

.metric-card.is-green { --metric-color: #0f9f77; --metric-tint: #e9f9f4; }

.metric-card.is-blue { --metric-color: #2563eb; --metric-tint: #eaf3ff; }

.metric-card.is-orange { --metric-color: #7c6ee6; --metric-tint: #f0efff; }

.metric-card.is-red { --metric-color: #d45463; --metric-tint: #ffedf0; }

.btn { border-radius: 10px; }

.btn-primary, .auth-form-wrap .btn-primary { border-color: rgb(59, 130, 246); background: linear-gradient(135deg, rgb(79, 156, 249), rgb(37, 99, 235)); box-shadow: rgba(37, 99, 235, 0.2) 0px 8px 20px; }

.btn-primary:hover, .auth-form-wrap .btn-primary:hover { border-color: rgb(29, 78, 216); background: linear-gradient(135deg, rgb(59, 130, 246), rgb(29, 78, 216)); transform: translateY(-1px); }

.form-control, .form-select, .select2-container--default .select2-selection--single { background-color: rgb(251, 253, 255); border-color: rgb(214, 225, 239) !important; border-radius: 10px !important; }

.form-control:focus, .form-select:focus { border-color: rgb(96, 165, 250) !important; box-shadow: rgba(59, 130, 246, 0.11) 0px 0px 0px 4px !important; }

.form-check-input:checked { border-color: rgb(59, 130, 246); background-color: rgb(59, 130, 246); }

.category-card:hover { border-color: rgb(139, 184, 242); }

.product-category { border-color: rgb(207, 226, 255); color: rgb(29, 78, 216); background: rgb(239, 246, 255); }

.product-buy, .page-item.active .page-link { border-color: rgb(37, 99, 235); background: rgb(37, 99, 235); }

.product-buy:hover { border-color: rgb(29, 78, 216); background: rgb(29, 78, 216); }

.page-link { color: rgb(37, 99, 235); }

.quick-order-step-number { background: rgb(59, 130, 246); }

.quick-order-price { color: rgb(37, 99, 235) !important; }

.theme-toggle:hover { border-color: rgb(96, 165, 250); background: rgb(239, 246, 255); }

.auth-page, html[data-panel-theme="dark"] .auth-page { background: linear-gradient(135deg, rgb(237, 244, 252) 0%, rgb(248, 251, 255) 100%) !important; }

.auth-shell { border-color: rgb(220, 231, 245); border-radius: 18px; box-shadow: rgba(29, 78, 216, 0.13) 0px 26px 70px; }

.auth-showcase { background: linear-gradient(145deg, rgb(16, 43, 76) 0%, rgb(23, 75, 122) 56%, rgb(59, 130, 246) 100%) !important; }

.auth-showcase::before, .auth-showcase::after { display: block; border-color: rgba(255, 255, 255, 0.12); }

.auth-brand .brand-mark { background: rgba(255, 255, 255, 0.16); }

.auth-message .eyebrow { border-color: rgba(191, 219, 254, 0.35); color: rgb(219, 234, 254); background: rgba(255, 255, 255, 0.08); }

.auth-features i { color: rgb(147, 197, 253); }

.auth-form-eyebrow { color: rgb(37, 99, 235); }

.auth-page .form-check-input:checked, html[data-panel-theme="dark"] .auth-page .form-check-input:checked { border-color: rgb(59, 130, 246); background-color: rgb(59, 130, 246); }

html[data-panel-theme="dark"] { --panel-primary: #60a5fa; --panel-primary-dark: #3b82f6; --panel-primary-soft: #172b48; --panel-ink: #edf4ff; --panel-muted: #9eb0c7; --panel-border: #2a3c54; --panel-surface: #172235; --panel-bg: #0d1624; --panel-success: #42d6aa; --panel-shadow: 0 10px 30px rgba(0,0,0,.20); }

html[data-panel-theme="dark"] .layout-menu { background: linear-gradient(rgb(9, 20, 36) 0%, rgb(7, 16, 29) 100%) !important; }

html[data-panel-theme="dark"] .layout-navbar, html[data-panel-theme="dark"] .card, html[data-panel-theme="dark"] .card-header, html[data-panel-theme="dark"] .card-body, html[data-panel-theme="dark"] .catalog-toolbar, html[data-panel-theme="dark"] .category-card, html[data-panel-theme="dark"] .product-card, html[data-panel-theme="dark"] .modal-content, html[data-panel-theme="dark"] .dropdown-menu, html[data-panel-theme="dark"] .offcanvas, html[data-panel-theme="dark"] .list-group, html[data-panel-theme="dark"] .list-group-item, html[data-panel-theme="dark"] .quick-search-results { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: var(--panel-surface) !important; }

html[data-panel-theme="dark"] .bg-light, html[data-panel-theme="dark"] .bg-white, html[data-panel-theme="dark"] .table-light, html[data-panel-theme="dark"] .table thead th, html[data-panel-theme="dark"] .table-hover > tbody > tr:hover > * { color: var(--panel-ink) !important; background-color: rgb(29, 42, 62) !important; }

html[data-panel-theme="dark"] .form-control, html[data-panel-theme="dark"] .form-select, html[data-panel-theme="dark"] .select2-selection, html[data-panel-theme="dark"] .select2-dropdown, html[data-panel-theme="dark"] .select2-search__field, html[data-panel-theme="dark"] .input-group-text { border-color: var(--panel-border) !important; color: var(--panel-ink) !important; background-color: rgb(17, 28, 44) !important; }

html[data-panel-theme="dark"] .select2-results__option--highlighted, html[data-panel-theme="dark"] .form-check-input:checked, html[data-panel-theme="dark"] .pagination .page-item.active .page-link { color: rgb(255, 255, 255) !important; border-color: rgb(59, 130, 246) !important; background: rgb(59, 130, 246) !important; }

html[data-panel-theme="dark"] .profile-trigger:hover, html[data-panel-theme="dark"] .dropdown-item:hover, html[data-panel-theme="dark"] .nav-tabs .nav-link:hover { background: rgb(29, 42, 62) !important; }

.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner > .menu-item.active::before { display: none !important; content: none !important; }

.metric-value { color: rgb(52, 64, 84); font-weight: 600; letter-spacing: -0.02em; }

html[data-panel-theme="dark"] .metric-value { color: rgb(219, 231, 245) !important; font-weight: 600; }

.metric-value { color: rgb(95, 111, 133); font-weight: 500; }

html[data-panel-theme="dark"] .metric-value { color: rgb(199, 212, 228) !important; font-weight: 500; }

.avatar-fixed-icon { place-items: center; display: grid !important; }

.avatar-fixed-icon .bx { font-size: 1.25rem; line-height: 1; }

.avatar-fixed-icon { overflow: visible; border-radius: 50% !important; }

.product-logo img { width: 32px; height: 32px; object-fit: contain; filter: none !important; }



/* 2026-09-21: readability and dark-mode consistency fixes */
.auth-message > p {
  color: #dbeafe !important;
  font-weight: 500;
  opacity: 1 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}

html[data-panel-theme="dark"] .layout-navbar,
html[data-panel-theme="dark"] .metric-card,
html[data-panel-theme="dark"] .order-card,
html[data-panel-theme="dark"] .quick-order-card,
html[data-panel-theme="dark"] .card,
html[data-panel-theme="dark"] .card-header,
html[data-panel-theme="dark"] .card-body,
html[data-panel-theme="dark"] .catalog-toolbar,
html[data-panel-theme="dark"] .category-card,
html[data-panel-theme="dark"] .product-card,
html[data-panel-theme="dark"] .quick-order-alternative,
html[data-panel-theme="dark"] .quick-order-required-fields,
html[data-panel-theme="dark"] .quick-order-summary {
  border-color: var(--panel-border) !important;
  color: var(--panel-ink) !important;
  background-color: var(--panel-surface) !important;
}

html[data-panel-theme="dark"] .metric-icon,
html[data-panel-theme="dark"] .section-title-icon,
html[data-panel-theme="dark"] .category-icon {
  color: #93c5fd !important;
  background: #172b48 !important;
}

html[data-panel-theme="dark"] .metric-label,
html[data-panel-theme="dark"] .metric-note,
html[data-panel-theme="dark"] .quick-order-hint,
html[data-panel-theme="dark"] .section-title p {
  color: var(--panel-muted) !important;
}

html[data-panel-theme="dark"] .quick-order-alternative summary,
html[data-panel-theme="dark"] .quick-order-price,
html[data-panel-theme="dark"] .metric-value {
  color: var(--panel-ink) !important;
}

html[data-panel-theme="dark"] .table-responsive,
html[data-panel-theme="dark"] .accordion-item,
html[data-panel-theme="dark"] .accordion-button,
html[data-panel-theme="dark"] .tab-content {
  border-color: var(--panel-border) !important;
  color: var(--panel-ink) !important;
  background-color: var(--panel-surface) !important;
}

html[data-panel-theme="dark"] .accordion-button:not(.collapsed) {
  color: #bfdbfe !important;
  background-color: #1d2a3e !important;
}

html[data-panel-theme="dark"] .theme-toggle {
  border-color: var(--panel-border) !important;
  color: #eaf2ff !important;
  background: var(--panel-surface) !important;
}

html[data-panel-theme="dark"] .theme-toggle:hover,
html[data-panel-theme="dark"] .theme-toggle:focus,
html[data-panel-theme="dark"] .theme-toggle:focus-visible {
  border-color: #60a5fa !important;
  color: #ffffff !important;
  background: #243a57 !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .18) !important;
  outline: none !important;
}

html[data-panel-theme="dark"] .theme-toggle i,
html[data-panel-theme="dark"] .theme-toggle svg {
  color: currentColor !important;
  fill: currentColor;
}



/* 2026-09-21: readability and dark-mode consistency fixes */
.auth-message > p {
  color: #dbeafe !important;
  font-weight: 500;
  opacity: 1 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}

html[data-panel-theme="dark"] .layout-navbar,
html[data-panel-theme="dark"] .metric-card,
html[data-panel-theme="dark"] .order-card,
html[data-panel-theme="dark"] .quick-order-card,
html[data-panel-theme="dark"] .card,
html[data-panel-theme="dark"] .card-header,
html[data-panel-theme="dark"] .card-body,
html[data-panel-theme="dark"] .catalog-toolbar,
html[data-panel-theme="dark"] .category-card,
html[data-panel-theme="dark"] .product-card,
html[data-panel-theme="dark"] .quick-order-alternative,
html[data-panel-theme="dark"] .quick-order-required-fields,
html[data-panel-theme="dark"] .quick-order-summary {
  border-color: var(--panel-border) !important;
  color: var(--panel-ink) !important;
  background-color: var(--panel-surface) !important;
}

html[data-panel-theme="dark"] .metric-icon,
html[data-panel-theme="dark"] .section-title-icon,
html[data-panel-theme="dark"] .category-icon {
  color: #93c5fd !important;
  background: #172b48 !important;
}

html[data-panel-theme="dark"] .metric-label,
html[data-panel-theme="dark"] .metric-note,
html[data-panel-theme="dark"] .quick-order-hint,
html[data-panel-theme="dark"] .section-title p {
  color: var(--panel-muted) !important;
}

html[data-panel-theme="dark"] .quick-order-alternative summary,
html[data-panel-theme="dark"] .quick-order-price,
html[data-panel-theme="dark"] .metric-value {
  color: var(--panel-ink) !important;
}

html[data-panel-theme="dark"] .table-responsive,
html[data-panel-theme="dark"] .accordion-item,
html[data-panel-theme="dark"] .accordion-button,
html[data-panel-theme="dark"] .tab-content {
  border-color: var(--panel-border) !important;
  color: var(--panel-ink) !important;
  background-color: var(--panel-surface) !important;
}

html[data-panel-theme="dark"] .accordion-button:not(.collapsed) {
  color: #bfdbfe !important;
  background-color: #1d2a3e !important;
}

html[data-panel-theme="dark"] .theme-toggle {
  border-color: var(--panel-border) !important;
  color: #eaf2ff !important;
  background: var(--panel-surface) !important;
}

html[data-panel-theme="dark"] .theme-toggle:hover,
html[data-panel-theme="dark"] .theme-toggle:focus,
html[data-panel-theme="dark"] .theme-toggle:focus-visible {
  border-color: #60a5fa !important;
  color: #ffffff !important;
  background: #243a57 !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .18) !important;
  outline: none !important;
}

html[data-panel-theme="dark"] .theme-toggle i,
html[data-panel-theme="dark"] .theme-toggle svg {
  color: currentColor !important;
  fill: currentColor;
}



/* === Soft Premium Blue Theme · 2026-09-20 === */
:root {
  --panel-primary: #3b82f6;
  --panel-primary-dark: #2563eb;
  --panel-primary-soft: #eef5ff;
  --panel-ink: #172033;
  --panel-muted: #667085;
  --panel-border: #e3eaf4;
  --panel-surface: #ffffff;
  --panel-bg: #f4f7fb;
  --panel-success: #0f9f77;
  --panel-shadow: 0 12px 34px rgba(30, 64, 175, .07);
}

body,
.layout-page,
.content-wrapper { background: var(--panel-bg); }

.layout-menu {
  background: linear-gradient(180deg, #10233f 0%, #0b172a 100%) !important;
  box-shadow: 12px 0 38px rgba(15, 35, 64, .12);
}
.brand-mark {
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  box-shadow: 0 8px 22px rgba(37, 99, 235, .28);
}
.layout-menu .menu-item.active > .menu-link {
  color: #fff !important;
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  box-shadow: inset 3px 0 #93c5fd, 0 8px 22px rgba(37, 99, 235, .24);
}
.layout-menu .menu-link:hover { background: rgba(96,165,250,.12) !important; }

.layout-navbar {
  border-color: rgba(219, 229, 242, .95);
  border-radius: 14px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 10px 30px rgba(30,64,175,.06) !important;
  backdrop-filter: blur(14px);
}
.profile-trigger { border-radius: 10px; }
.profile-trigger:hover { background: #eff6ff; }
.profile-trigger .avatar { background: linear-gradient(135deg, #60a5fa, #2563eb); }

.card,
.category-card,
.product-card,
.catalog-toolbar {
  border-color: var(--panel-border);
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
}
.card:hover,
.category-card:hover,
.product-card:hover {
  border-color: #c9daf3;
  box-shadow: 0 16px 38px rgba(30,64,175,.09);
}

.metric-icon,
.section-title-icon,
.category-icon {
  color: #2563eb;
  background: #eaf3ff;
  border-radius: 11px;
}
.metric-card.is-green { --metric-color:#0f9f77; --metric-tint:#e9f9f4; }
.metric-card.is-blue { --metric-color:#2563eb; --metric-tint:#eaf3ff; }
.metric-card.is-orange { --metric-color:#7c6ee6; --metric-tint:#f0efff; }
.metric-card.is-red { --metric-color:#d45463; --metric-tint:#ffedf0; }

.btn { border-radius: 10px; }
.btn-primary,
.auth-form-wrap .btn-primary {
  border-color: #3b82f6;
  background: linear-gradient(135deg, #4f9cf9, #2563eb);
  box-shadow: 0 8px 20px rgba(37,99,235,.20);
}
.btn-primary:hover,
.auth-form-wrap .btn-primary:hover {
  border-color: #1d4ed8;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  transform: translateY(-1px);
}
.form-control,
.form-select,
.select2-container--default .select2-selection--single {
  border-color: #d6e1ef !important;
  border-radius: 10px !important;
  background-color: #fbfdff;
}
.form-control:focus,
.form-select:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 4px rgba(59,130,246,.11) !important;
}
.form-check-input:checked {
  border-color: #3b82f6;
  background-color: #3b82f6;
}

.category-card:hover { border-color: #8bb8f2; }
.product-category {
  border-color: #cfe2ff;
  color: #1d4ed8;
  background: #eff6ff;
}
.product-buy,
.page-item.active .page-link {
  border-color: #2563eb;
  background: #2563eb;
}
.product-buy:hover { border-color: #1d4ed8; background: #1d4ed8; }
.page-link { color: #2563eb; }
.quick-order-step-number { background: #3b82f6; }
.quick-order-price { color: #2563eb !important; }
.theme-toggle:hover { border-color: #60a5fa; background: #eff6ff; }

.auth-page,
html[data-panel-theme="dark"] .auth-page {
  background: linear-gradient(135deg, #edf4fc 0%, #f8fbff 100%) !important;
}
.auth-shell {
  border-color: #dce7f5;
  border-radius: 18px;
  box-shadow: 0 26px 70px rgba(29,78,216,.13);
}
.auth-showcase {
  background: linear-gradient(145deg, #102b4c 0%, #174b7a 56%, #3b82f6 100%) !important;
}
.auth-showcase::before,
.auth-showcase::after { display: block; border-color: rgba(255,255,255,.12); }
.auth-brand .brand-mark { background: rgba(255,255,255,.16); }
.auth-message .eyebrow {
  border-color: rgba(191,219,254,.35);
  color: #dbeafe;
  background: rgba(255,255,255,.08);
}
.auth-features i { color: #93c5fd; }
.auth-form-eyebrow { color: #2563eb; }
.auth-page .form-check-input:checked,
html[data-panel-theme="dark"] .auth-page .form-check-input:checked {
  border-color: #3b82f6;
  background-color: #3b82f6;
}

html[data-panel-theme="dark"] {
  --panel-primary: #60a5fa;
  --panel-primary-dark: #3b82f6;
  --panel-primary-soft: #172b48;
  --panel-ink: #edf4ff;
  --panel-muted: #9eb0c7;
  --panel-border: #2a3c54;
  --panel-surface: #172235;
  --panel-bg: #0d1624;
  --panel-success: #42d6aa;
  --panel-shadow: 0 10px 30px rgba(0,0,0,.20);
}
html[data-panel-theme="dark"] .layout-menu {
  background: linear-gradient(180deg, #091424 0%, #07101d 100%) !important;
}
html[data-panel-theme="dark"] .layout-navbar,
html[data-panel-theme="dark"] .card,
html[data-panel-theme="dark"] .card-header,
html[data-panel-theme="dark"] .card-body,
html[data-panel-theme="dark"] .catalog-toolbar,
html[data-panel-theme="dark"] .category-card,
html[data-panel-theme="dark"] .product-card,
html[data-panel-theme="dark"] .modal-content,
html[data-panel-theme="dark"] .dropdown-menu,
html[data-panel-theme="dark"] .offcanvas,
html[data-panel-theme="dark"] .list-group,
html[data-panel-theme="dark"] .list-group-item,
html[data-panel-theme="dark"] .quick-search-results {
  border-color: var(--panel-border) !important;
  color: var(--panel-ink) !important;
  background-color: var(--panel-surface) !important;
}
html[data-panel-theme="dark"] .bg-light,
html[data-panel-theme="dark"] .bg-white,
html[data-panel-theme="dark"] .table-light,
html[data-panel-theme="dark"] .table thead th,
html[data-panel-theme="dark"] .table-hover > tbody > tr:hover > * {
  color: var(--panel-ink) !important;
  background-color: #1d2a3e !important;
}
html[data-panel-theme="dark"] .form-control,
html[data-panel-theme="dark"] .form-select,
html[data-panel-theme="dark"] .select2-selection,
html[data-panel-theme="dark"] .select2-dropdown,
html[data-panel-theme="dark"] .select2-search__field,
html[data-panel-theme="dark"] .input-group-text {
  border-color: var(--panel-border) !important;
  color: var(--panel-ink) !important;
  background-color: #111c2c !important;
}
html[data-panel-theme="dark"] .select2-results__option--highlighted,
html[data-panel-theme="dark"] .form-check-input:checked,
html[data-panel-theme="dark"] .pagination .page-item.active .page-link {
  color: #fff !important;
  border-color: #3b82f6 !important;
  background: #3b82f6 !important;
}
html[data-panel-theme="dark"] .profile-trigger:hover,
html[data-panel-theme="dark"] .dropdown-item:hover,
html[data-panel-theme="dark"] .nav-tabs .nav-link:hover {
  background: #1d2a3e !important;
}


/* Cross-page fixed-header and mobile auth corrections */
.layout-navbar-fixed .layout-page::before {
  display: none !important;
  content: none !important;
}

@media (max-width: 575.98px) {
  .auth-page {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .auth-shell {
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }
}
:root {
  --panel-primary: #6558e8;
  --panel-primary-dark: #4f46c8;
  --panel-primary-soft: #eeecff;
  --panel-ink: #20213a;
  --panel-muted: #74758c;
  --panel-border: #e9e9f3;
  --panel-surface: #ffffff;
  --panel-bg: #f7f7fc;
  --panel-success: #20a779;
  --panel-shadow: 0 14px 40px rgba(36, 37, 71, .07);
}

body {
  color: var(--panel-ink);
  background: var(--panel-bg);
  font-family: Inter, "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.layout-page,
.content-wrapper { background: var(--panel-bg); }

.layout-menu {
  border-right: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, #25233e 0%, #17172a 100%) !important;
  box-shadow: 12px 0 40px rgba(24, 23, 47, .12);
}

.layout-menu .app-brand {
  height: 86px;
  padding: 0 1.5rem;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  background: linear-gradient(135deg, #7d70ff, #5748df);
  box-shadow: 0 8px 22px rgba(101, 88, 232, .35);
}

.brand-copy { min-width: 0; color: #fff; line-height: 1.15; }
.brand-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .98rem; }
.brand-copy small { display: block; margin-top: 5px; color: #aaa9bf; font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }

.layout-menu .menu-inner { padding: .5rem .8rem 1rem !important; }
.layout-menu .menu-item { margin: .2rem 0; }
.layout-menu .menu-link {
  min-height: 46px;
  border-radius: 12px;
  color: #b9b8ca !important;
  font-weight: 500;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.layout-menu .menu-link:hover { color: #fff !important; background: rgba(255,255,255,.07) !important; transform: translateX(2px); }
.layout-menu .menu-item.active > .menu-link { color: #fff !important; background: linear-gradient(135deg, #685be9, #5748d8) !important; box-shadow: 0 8px 24px rgba(54, 44, 166, .32); }
.layout-menu .menu-icon { color: inherit !important; }

.layout-navbar {
  min-height: 70px;
  margin-top: 1.1rem !important;
  border: 1px solid rgba(232,232,242,.9);
  border-radius: 18px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 10px 32px rgba(42, 43, 76, .06) !important;
  backdrop-filter: blur(16px);
}

.navbar-welcome small { display: block; color: var(--panel-muted); font-size: .75rem; }
.navbar-welcome strong { color: var(--panel-ink); font-size: .93rem; }
.profile-trigger { display: flex !important; align-items: center; gap: .75rem; padding: .35rem .5rem !important; border-radius: 13px; }
.profile-trigger:hover { background: #f5f4fb; }
.profile-trigger .avatar { display: grid; place-items: center; color: #fff; font-weight: 700; background: linear-gradient(135deg, #7669ef, #5145c7); }

.page-heading { margin: .65rem 0 1.7rem; }
.page-heading h4 { margin: 0; color: var(--panel-ink); font-size: 1.55rem; letter-spacing: -.035em; }
.page-heading p { margin: .45rem 0 0; color: var(--panel-muted); }

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

.metric-card { position: relative; overflow: hidden; height: 100%; }
.metric-card::after { content: ""; position: absolute; right: -32px; bottom: -42px; width: 110px; height: 110px; border-radius: 50%; background: var(--metric-tint, #f0efff); }
.metric-card .card-body { position: relative; z-index: 1; padding: 1.45rem; }
.metric-label { margin-bottom: .65rem; color: var(--panel-muted); font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.metric-value { margin: 0; color: var(--panel-ink); font-size: 1.75rem; font-weight: 750; letter-spacing: -.04em; }
.metric-note { display: block; margin-top: .38rem; color: var(--panel-muted); font-size: .78rem; }
.metric-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: var(--metric-color, var(--panel-primary)); background: var(--metric-tint, var(--panel-primary-soft)); font-size: 1.35rem; }
.metric-card.is-green { --metric-color: #15966d; --metric-tint: #e7f8f1; }
.metric-card.is-blue { --metric-color: #3281dc; --metric-tint: #eaf4ff; }
.metric-card.is-orange { --metric-color: #d98324; --metric-tint: #fff4e6; }
.metric-card.is-red { --metric-color: #d45463; --metric-tint: #ffedf0; }

.order-card .card-body { padding: 1.55rem; }
.section-title { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.4rem; }
.section-title-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--panel-primary); background: var(--panel-primary-soft); font-size: 1.2rem; }
.section-title h5 { margin: 0; color: var(--panel-ink); font-size: 1.06rem; }
.section-title p { margin: .2rem 0 0; color: var(--panel-muted); font-size: .8rem; }

.form-label { margin-bottom: .5rem; color: #50516a; font-size: .82rem; font-weight: 650; }
.form-control, .form-select, .select2-container--default .select2-selection--single {
  min-height: 46px;
  border: 1px solid #dfdfeb !important;
  border-radius: 12px !important;
  background-color: #fbfbfe;
  box-shadow: none !important;
}
.form-control:focus, .form-select:focus { border-color: #8b80ec !important; background: #fff; box-shadow: 0 0 0 4px rgba(101,88,232,.10) !important; }
textarea.form-control { min-height: 120px; }
.btn { min-height: 44px; border-radius: 12px; font-weight: 650; }
.btn-primary { border-color: var(--panel-primary); background: linear-gradient(135deg, #7064ed, #5547d1); box-shadow: 0 9px 22px rgba(101,88,232,.22); }
.btn-primary:hover { border-color: var(--panel-primary-dark); background: linear-gradient(135deg, #6255dd, #493dbd); transform: translateY(-1px); }
.alert { border: 0; border-radius: 14px; }

.catalog-toolbar { padding: 1rem; margin-bottom: 1.35rem; }
.catalog-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-card { display: flex; min-width: 0; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 18px 46px rgba(36, 37, 71, .11); }
.product-card .card-body { display: flex; padding: 1.25rem; flex: 1; flex-direction: column; }
.product-category { display: inline-flex; align-self: flex-start; margin-bottom: .85rem; padding: .35rem .65rem; border-radius: 999px; color: var(--panel-primary); background: var(--panel-primary-soft); font-size: .68rem; font-weight: 700; }
.product-name { min-height: 2.75rem; margin: 0 0 .55rem; color: var(--panel-ink); font-size: 1rem; line-height: 1.4; }
.product-description { display: -webkit-box; overflow: hidden; margin: 0 0 1rem; color: var(--panel-muted); font-size: .78rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.product-meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--panel-border); }
.product-price { color: var(--panel-ink); font-size: 1.2rem; font-weight: 750; letter-spacing: -.03em; }
.product-delivery { display: flex; align-items: center; gap: .3rem; color: var(--panel-success); font-size: .7rem; font-weight: 650; }
.product-buy { margin-top: .9rem; }
.catalog-empty { padding: 3rem 1rem; text-align: center; }
.catalog-empty i { display: block; margin-bottom: .75rem; color: var(--panel-muted); font-size: 2.5rem; }
.product-modal-description { max-height: 180px; overflow-y: auto; padding: .9rem; border-radius: 12px; color: var(--panel-muted); background: var(--panel-bg); font-size: .82rem; line-height: 1.6; white-space: pre-line; }
.pagination { gap: .3rem; margin-top: 1.5rem; }
.page-link { border: 0; border-radius: 9px !important; color: var(--panel-primary); }
.page-item.active .page-link { background: var(--panel-primary); }

.auth-page { min-height: 100vh; padding: 24px; background: #f6f5fb; }
.auth-shell { display: grid; width: min(1080px, 100%); min-height: 650px; margin: auto; overflow: hidden; border: 1px solid #e8e7ef; border-radius: 28px; background: #fff; box-shadow: 0 28px 80px rgba(31, 30, 60, .13); grid-template-columns: 1.08fr .92fr; }
.auth-showcase { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 3rem; color: #fff; background: linear-gradient(145deg, #262441 0%, #4a3fc1 65%, #7064ed 100%); }
.auth-showcase::before, .auth-showcase::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.auth-showcase::before { top: -150px; right: -130px; width: 420px; height: 420px; }
.auth-showcase::after { right: 35px; bottom: -190px; width: 360px; height: 360px; }
.auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: .85rem; font-weight: 700; }
.auth-brand .brand-mark { background: rgba(255,255,255,.16); box-shadow: none; backdrop-filter: blur(12px); }
.auth-message { position: relative; z-index: 1; max-width: 470px; }
.auth-message .eyebrow { display: inline-flex; margin-bottom: 1rem; padding: .45rem .75rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #dedbff; background: rgba(255,255,255,.08); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.auth-message h1 { margin: 0 0 1rem; color: #fff; font-size: clamp(2.15rem, 4vw, 3.4rem); line-height: 1.07; letter-spacing: -.055em; }
.auth-message p { max-width: 410px; margin: 0; color: #d9d7ef; font-size: 1rem; line-height: 1.7; }
.auth-footnote { position: relative; z-index: 1; color: #c5c2df; font-size: .78rem; }
.auth-form-panel { display: flex; align-items: center; padding: 3.8rem; }
.auth-form-wrap { width: 100%; max-width: 380px; margin: auto; }
.auth-form-wrap h2 { margin: 0 0 .55rem; color: var(--panel-ink); font-size: 1.7rem; letter-spacing: -.035em; }
.auth-form-wrap > p { margin-bottom: 2rem; color: var(--panel-muted); line-height: 1.6; }
.auth-form-wrap .btn { min-height: 50px; }

@media (max-width: 991.98px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-shell { max-width: 570px; grid-template-columns: 1fr; }
  .auth-showcase { min-height: 260px; padding: 2rem; }
  .auth-message h1 { font-size: 2.25rem; }
  .auth-message p, .auth-footnote { display: none; }
  .auth-form-panel { padding: 2.4rem 2rem; }
  .navbar-welcome { display: none; }
}

@media (max-width: 575.98px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .auth-page { padding: 0; }
  .auth-shell { min-height: 100vh; border: 0; border-radius: 0; }
  .auth-showcase { min-height: 215px; }
  .auth-form-panel { padding: 2rem 1.35rem; }
  .container-p-y { padding-top: 1.15rem !important; }
  .page-heading h4 { font-size: 1.35rem; }
}

/* Professional interface refresh */
:root {
  --panel-primary: #3b82f6;
  --panel-primary-dark: #b45309;
  --panel-primary-soft: #fff7ed;
  --panel-ink: #172033;
  --panel-muted: #667085;
  --panel-border: #e4e7ec;
  --panel-surface: #ffffff;
  --panel-bg: #f5f6f8;
  --panel-success: #15803d;
  --panel-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

body { background: var(--panel-bg); color: var(--panel-ink); }
.layout-page, .content-wrapper { background: var(--panel-bg); }

.layout-menu {
  border-right: 0;
  background: #111827 !important;
  box-shadow: none;
}
.layout-menu .app-brand { height: 76px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark {
  border-radius: 8px;
  background: #3b82f6;
  box-shadow: none;
}
.brand-copy small { color: #94a3b8; }
.layout-menu .menu-inner { padding: 1rem .75rem !important; }
.layout-menu .menu-link {
  min-height: 42px;
  border-radius: 7px;
  color: #aeb8c8 !important;
  font-size: .84rem;
  transition: color .15s ease, background .15s ease;
}
.layout-menu .menu-link:hover { color: #fff !important; background: rgba(255,255,255,.06) !important; transform: none; }
.layout-menu .menu-item.active > .menu-link {
  color: #fff !important;
  background: #263247 !important;
  box-shadow: inset 3px 0 #60a5fa;
}
.layout-menu .menu-header-text { color: #718096 !important; letter-spacing: .08em; }

.layout-navbar {
  min-height: 64px;
  margin-top: 1rem !important;
  border: 1px solid var(--panel-border);
  border-radius: 9px !important;
  background: #fff !important;
  box-shadow: var(--panel-shadow) !important;
  backdrop-filter: none;
}
.profile-trigger { border-radius: 7px; }
.profile-trigger:hover { background: #f2f4f7; }
.profile-trigger .avatar { background: #243044; }

.page-heading { margin: .6rem 0 1.4rem; }
.page-heading h4 { font-size: 1.42rem; letter-spacing: -.02em; }
.page-heading p { margin-top: .35rem; font-size: .84rem; }

.card {
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  box-shadow: var(--panel-shadow);
}
.metric-card::after { display: none; }
.metric-card .card-body { padding: 1.25rem; }
.metric-label { color: #667085; font-size: .7rem; letter-spacing: .04em; }
.metric-value { font-size: 1.65rem; letter-spacing: -.025em; }
.metric-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: #b45309;
  background: #fff7ed;
}
.metric-card.is-green, .metric-card.is-blue, .metric-card.is-orange, .metric-card.is-red {
  --metric-color: #344054;
  --metric-tint: #f2f4f7;
}
.order-card .card-body { padding: 1.4rem; }
.section-title-icon { border-radius: 8px; color: #b45309; background: #fff7ed; }

.form-control, .form-select, .select2-container--default .select2-selection--single {
  min-height: 44px;
  border-color: #d0d5dd !important;
  border-radius: 7px !important;
  background: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(217,119,6,.10) !important;
}
.btn { min-height: 42px; border-radius: 7px; }
.btn-primary {
  border-color: #3b82f6;
  background: #3b82f6;
  box-shadow: none;
}
.btn-primary:hover { border-color: #b45309; background: #b45309; transform: none; }

.catalog-toolbar { border-radius: 9px; box-shadow: none; }
.category-grid { display: grid; gap: .8rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.category-card { display: flex; min-height: 86px; align-items: center; gap: .85rem; padding: 1rem; border: 1px solid var(--panel-border); border-radius: 9px; color: var(--panel-ink); background: var(--panel-surface); transition: border-color .15s ease, box-shadow .15s ease; }
.category-card:hover { border-color: #3b82f6; color: var(--panel-ink); box-shadow: 0 4px 12px rgba(16,24,40,.06); }
.category-icon { display: grid; width: 42px; height: 42px; place-items: center; flex: 0 0 auto; border-radius: 8px; color: #b45309; background: var(--panel-primary-soft); font-size: 1.25rem; }
.category-copy { min-width: 0; }
.category-copy strong, .category-copy small { display: block; }
.category-copy strong { overflow: hidden; color: var(--panel-ink); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.category-copy small { margin-top: .3rem; color: var(--panel-muted); font-size: .7rem; }
.category-arrow { margin-left: auto; color: var(--panel-muted); font-size: 1.25rem; }
.catalog-grid { gap: .85rem; }
.product-card { border-radius: 9px; box-shadow: none; }
.product-card:hover { border-color: #d0d5dd; transform: none; box-shadow: 0 4px 12px rgba(16,24,40,.06); }
.product-category { border: 1px solid #fed7aa; border-radius: 5px; color: #9a3412; background: #fff7ed; }
.product-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.product-card-head .product-category { margin-bottom: 0; }
.product-logo { display: grid; width: 44px; height: 44px; place-items: center; flex: 0 0 auto; border: 1px solid var(--panel-border); border-radius: 8px; background: #fff; }
.product-logo img { width: 25px; height: 25px; object-fit: contain; }
.product-logo i { color: #475467; font-size: 1.35rem; }
.product-meta { border-color: #eaecf0; }
.product-buy { background: #172033; border-color: #172033; }
.product-buy:hover { background: #27364f; border-color: #27364f; }
.page-item.active .page-link { background: #172033; }
.page-link { color: #344054; }

.auth-page { background: #eef0f3; }
.auth-shell {
  border-color: #dfe3e8;
  border-radius: 12px;
  box-shadow: 0 18px 55px rgba(16,24,40,.12);
}
.auth-showcase { background: #111827; }
.auth-showcase::before, .auth-showcase::after { display: none; }
.auth-brand .brand-mark { background: #3b82f6; }
.auth-message .eyebrow { border: 1px solid #3b4658; border-radius: 5px; color: #fbbf24; background: transparent; }
.auth-message h1 { letter-spacing: -.035em; }
.auth-features { display: grid; gap: .65rem; margin-top: 1.6rem; }
.auth-features span { display: flex; align-items: center; gap: .55rem; color: #d5dbe5; font-size: .8rem; }
.auth-features i { color: #60a5fa; font-size: 1rem; }
.auth-form-eyebrow { display: block; margin-bottom: .65rem; color: #b45309; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.auth-security-note { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: 1.35rem; color: #667085; font-size: .72rem; }

.theme-toggle {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--panel-border);
  border-radius: 7px;
  color: var(--panel-ink);
  background: var(--panel-surface);
  font-size: 1.1rem;
  transition: border-color .15s ease, background .15s ease;
}
.theme-toggle:hover { border-color: #3b82f6; background: var(--panel-primary-soft); }
.auth-theme-toggle { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 10; }

html[data-panel-theme="dark"] {
  color-scheme: dark;
  --panel-primary: #60a5fa;
  --panel-primary-dark: #3b82f6;
  --panel-primary-soft: #172b48;
  --panel-ink: #f1f5f9;
  --panel-muted: #9aa6b6;
  --panel-border: #303a48;
  --panel-surface: #1a2029;
  --panel-bg: #10141b;
  --panel-success: #4ade80;
  --panel-shadow: 0 1px 2px rgba(0, 0, 0, .22);
}
html[data-panel-theme="dark"] body,
html[data-panel-theme="dark"] .layout-page,
html[data-panel-theme="dark"] .content-wrapper { background: var(--panel-bg); color: var(--panel-ink); }
html[data-panel-theme="dark"] .layout-menu { background: #0b0f15 !important; }
html[data-panel-theme="dark"] .layout-navbar,
html[data-panel-theme="dark"] .card,
html[data-panel-theme="dark"] .modal-content,
html[data-panel-theme="dark"] .dropdown-menu { border-color: var(--panel-border); background: var(--panel-surface) !important; color: var(--panel-ink); }
html[data-panel-theme="dark"] .navbar-welcome strong,
html[data-panel-theme="dark"] .page-heading h4,
html[data-panel-theme="dark"] .metric-value,
html[data-panel-theme="dark"] .section-title h5,
html[data-panel-theme="dark"] .product-name,
html[data-panel-theme="dark"] .product-price,
html[data-panel-theme="dark"] .modal-title { color: var(--panel-ink); }
html[data-panel-theme="dark"] .profile-trigger:hover { background: #252d38; }
html[data-panel-theme="dark"] .form-control,
html[data-panel-theme="dark"] .form-select,
html[data-panel-theme="dark"] .select2-container--default .select2-selection--single,
html[data-panel-theme="dark"] .input-group-text {
  border-color: var(--panel-border) !important;
  color: var(--panel-ink);
  background-color: #151b23;
}
html[data-panel-theme="dark"] .form-control:disabled,
html[data-panel-theme="dark"] .form-control[readonly] { color: #8d99a9; background: #131820; }
html[data-panel-theme="dark"] .form-control::placeholder { color: #6f7b8c; }
html[data-panel-theme="dark"] .product-modal-description { background: #11171f; }
html[data-panel-theme="dark"] .product-category { border-color: #244c78; color: #93c5fd; background: #172b48; }
html[data-panel-theme="dark"] .product-logo { background: #f8fafc; }
html[data-panel-theme="dark"] .product-logo img { filter: none; }
html[data-panel-theme="dark"] .product-buy { border-color: #3b82f6; background: #3b82f6; }
html[data-panel-theme="dark"] .dropdown-divider,
html[data-panel-theme="dark"] .product-meta { border-color: var(--panel-border); }
html[data-panel-theme="dark"] .dropdown-item { color: var(--panel-ink); }
html[data-panel-theme="dark"] .dropdown-item:hover { background: #252d38; }
html[data-panel-theme="dark"] .auth-page { background: #0d1117; }
html[data-panel-theme="dark"] .auth-shell { border-color: #2b3441; background: var(--panel-surface); }
html[data-panel-theme="dark"] .auth-form-wrap h2 { color: var(--panel-ink); }

/* Light theme contrast corrections */
html[data-panel-theme="light"] body,
html[data-panel-theme="light"] .layout-page,
html[data-panel-theme="light"] .content-wrapper { color: #1d2939; }
html[data-panel-theme="light"] h1,
html[data-panel-theme="light"] h2,
html[data-panel-theme="light"] h3,
html[data-panel-theme="light"] h4,
html[data-panel-theme="light"] h5,
html[data-panel-theme="light"] h6,
html[data-panel-theme="light"] .card-title,
html[data-panel-theme="light"] .modal-title { color: #172033; }
html[data-panel-theme="light"] p,
html[data-panel-theme="light"] small,
html[data-panel-theme="light"] .text-muted { color: #667085 !important; }
html[data-panel-theme="light"] .page-heading p,
html[data-panel-theme="light"] .metric-note,
html[data-panel-theme="light"] .product-description,
html[data-panel-theme="light"] .section-title p { color: #667085; }
html[data-panel-theme="light"] .form-label,
html[data-panel-theme="light"] label { color: #344054; }
html[data-panel-theme="light"] .form-control,
html[data-panel-theme="light"] .form-select,
html[data-panel-theme="light"] .select2-selection,
html[data-panel-theme="light"] .select2-selection__rendered { color: #1d2939 !important; }
html[data-panel-theme="light"] .form-control::placeholder { color: #98a2b3; opacity: 1; }
html[data-panel-theme="light"] .form-control:disabled,
html[data-panel-theme="light"] .form-control[readonly] { color: #475467; background: #f2f4f7; opacity: 1; }
html[data-panel-theme="light"] .table { color: #344054; }
html[data-panel-theme="light"] .table > :not(caption) > * > * { border-color: #eaecf0; color: #344054; }
html[data-panel-theme="light"] .table thead th { color: #475467; background: #f9fafb; }
html[data-panel-theme="light"] .dropdown-menu { color: #344054; background: #fff; }
html[data-panel-theme="light"] .dropdown-item { color: #344054; }
html[data-panel-theme="light"] .dropdown-item:hover { color: #172033; background: #f2f4f7; }
html[data-panel-theme="light"] .pagination .page-link { color: #344054; background: #fff; }
html[data-panel-theme="light"] .pagination .page-item.active .page-link { color: #fff; background: #172033; }
html[data-panel-theme="light"] .alert { color: #344054; }
html[data-panel-theme="light"] .product-modal-description { color: #475467; }
html[data-panel-theme="light"] .auth-form-wrap > p { color: #667085; }
html[data-panel-theme="light"] .auth-form-wrap .form-check-label { color: #475467; }
html[data-panel-theme="light"] .navbar-welcome small { color: #667085; }

.auth-page { padding: 32px; background: #eef1f4 !important; }
.auth-shell { width: min(1040px, 100%); min-height: 620px; border-radius: 10px; }
.auth-showcase { padding: 2.8rem; background: #111827 !important; }
.auth-form-panel { padding: 3.5rem; background: #fff; }
.auth-form-wrap { max-width: 360px; }
.auth-form-wrap h2 { font-size: 1.65rem; }
.auth-form-wrap .form-control { background: #fff; }
.auth-form-wrap .btn-primary { background: #3b82f6; border-color: #3b82f6; }
.auth-form-wrap .btn-primary:hover { background: #b45309; border-color: #b45309; }

@media (max-width: 991.98px) { .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .category-grid { grid-template-columns: 1fr; } }

/* Theme consistency fixes — loaded after page and vendor styles */
html[data-panel-theme="dark"] {
  --bs-body-bg: var(--panel-bg);
  --bs-body-color: var(--panel-ink);
  --bs-border-color: var(--panel-border);
}

html[data-panel-theme="dark"] body,
html[data-panel-theme="dark"] .layout-wrapper,
html[data-panel-theme="dark"] .layout-container,
html[data-panel-theme="dark"] .layout-page,
html[data-panel-theme="dark"] .content-wrapper,
html[data-panel-theme="dark"] .content-backdrop,
html[data-panel-theme="dark"] .container-xxl { color: var(--panel-ink); background-color: var(--panel-bg); }

html[data-panel-theme="dark"] .card,
html[data-panel-theme="dark"] .card-header,
html[data-panel-theme="dark"] .card-body,
html[data-panel-theme="dark"] .catalog-toolbar,
html[data-panel-theme="dark"] .category-card,
html[data-panel-theme="dark"] .product-card,
html[data-panel-theme="dark"] .list-group,
html[data-panel-theme="dark"] .list-group-item,
html[data-panel-theme="dark"] .modal-content,
html[data-panel-theme="dark"] .modal-header,
html[data-panel-theme="dark"] .modal-body,
html[data-panel-theme="dark"] .modal-footer,
html[data-panel-theme="dark"] .dropdown-menu,
html[data-panel-theme="dark"] .offcanvas,
html[data-panel-theme="dark"] .quick-search-results {
  border-color: var(--panel-border) !important;
  color: var(--panel-ink) !important;
  background-color: var(--panel-surface) !important;
}

html[data-panel-theme="dark"] .bg-light,
html[data-panel-theme="dark"] .bg-white,
html[data-panel-theme="dark"] .table-light,
html[data-panel-theme="dark"] .list-group-item-action:hover,
html[data-panel-theme="dark"] .list-group-item-action:focus { color: var(--panel-ink) !important; background-color: #202833 !important; }

html[data-panel-theme="dark"] .table,
html[data-panel-theme="dark"] .table > :not(caption) > * > *,
html[data-panel-theme="dark"] .table thead th,
html[data-panel-theme="dark"] .table tbody td {
  border-color: var(--panel-border) !important;
  color: var(--panel-ink) !important;
  background-color: transparent !important;
}
html[data-panel-theme="dark"] .table thead th { background-color: #202833 !important; }
html[data-panel-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: #202833 !important; }

html[data-panel-theme="dark"] h1,
html[data-panel-theme="dark"] h2,
html[data-panel-theme="dark"] h3,
html[data-panel-theme="dark"] h4,
html[data-panel-theme="dark"] h5,
html[data-panel-theme="dark"] h6,
html[data-panel-theme="dark"] .card-title,
html[data-panel-theme="dark"] .category-copy strong,
html[data-panel-theme="dark"] label,
html[data-panel-theme="dark"] .form-label { color: var(--panel-ink) !important; }
html[data-panel-theme="dark"] p,
html[data-panel-theme="dark"] small,
html[data-panel-theme="dark"] .text-muted,
html[data-panel-theme="dark"] .form-text { color: var(--panel-muted) !important; }

html[data-panel-theme="dark"] .form-control,
html[data-panel-theme="dark"] .form-select,
html[data-panel-theme="dark"] .select2-selection,
html[data-panel-theme="dark"] .select2-dropdown,
html[data-panel-theme="dark"] .select2-search__field,
html[data-panel-theme="dark"] .input-group-text {
  border-color: var(--panel-border) !important;
  color: var(--panel-ink) !important;
  background-color: #151b23 !important;
}
html[data-panel-theme="dark"] .select2-results__option { color: var(--panel-ink); background: var(--panel-surface); }
html[data-panel-theme="dark"] .select2-results__option--highlighted { color: #fff; background: #3b82f6; }
html[data-panel-theme="dark"] .form-check-input { border-color: #536071; background-color: #151b23; }
html[data-panel-theme="dark"] .form-check-input:checked { border-color: #3b82f6; background-color: #3b82f6; }

html[data-panel-theme="dark"] .pagination .page-link {
  border-color: var(--panel-border) !important;
  color: var(--panel-ink) !important;
  background-color: var(--panel-surface) !important;
}
html[data-panel-theme="dark"] .pagination .page-item.active .page-link { color: #fff !important; background-color: #3b82f6 !important; }
html[data-panel-theme="dark"] .btn-label-secondary,
html[data-panel-theme="dark"] .btn-outline-secondary { border-color: #465264; color: #d6dde8; background-color: transparent; }
html[data-panel-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }
html[data-panel-theme="dark"] .dropdown-divider,
html[data-panel-theme="dark"] .border-top { border-color: var(--panel-border) !important; }

html[data-panel-theme="dark"] .nav-tabs { border-bottom-color: var(--panel-border) !important; }
html[data-panel-theme="dark"] .nav-tabs .nav-link {
  border-color: transparent !important;
  color: var(--panel-muted) !important;
}
html[data-panel-theme="dark"] .nav-tabs .nav-link:hover,
html[data-panel-theme="dark"] .nav-tabs .nav-link:focus {
  border-color: var(--panel-border) !important;
  color: var(--panel-ink) !important;
  background-color: #202833 !important;
}
html[data-panel-theme="dark"] .nav-tabs .nav-link.active,
html[data-panel-theme="dark"] .tab-content {
  border-color: var(--panel-border) !important;
  color: var(--panel-ink) !important;
  background-color: var(--panel-surface) !important;
}

.quick-search-results { border: 1px solid var(--panel-border); border-radius: 7px; background: var(--panel-surface); }
.quick-search-results .list-group-item { border-color: var(--panel-border); color: var(--panel-ink); background: var(--panel-surface); }

/* Login is intentionally always light, regardless of a stored panel theme. */
.auth-page,
html[data-panel-theme="dark"] .auth-page { color-scheme: light; color: #344054; background: #eef1f4 !important; }
.auth-page .auth-shell,
html[data-panel-theme="dark"] .auth-page .auth-shell { border-color: #dfe3e8 !important; color: #344054 !important; background: #fff !important; }
.auth-page .auth-form-panel,
html[data-panel-theme="dark"] .auth-page .auth-form-panel { color: #344054 !important; background: #fff !important; }
.auth-page .auth-form-wrap h2,
html[data-panel-theme="dark"] .auth-page .auth-form-wrap h2 { color: #172033 !important; }
.auth-page .auth-form-wrap > p,
.auth-page .auth-security-note,
html[data-panel-theme="dark"] .auth-page .auth-form-wrap > p,
html[data-panel-theme="dark"] .auth-page .auth-security-note { color: #667085 !important; }
.auth-page .form-label,
.auth-page .form-check-label,
html[data-panel-theme="dark"] .auth-page .form-label,
html[data-panel-theme="dark"] .auth-page .form-check-label { color: #344054 !important; }
.auth-page .form-control,
html[data-panel-theme="dark"] .auth-page .form-control { border-color: #d0d5dd !important; color: #1d2939 !important; background: #fff !important; }
.auth-page .form-control::placeholder,
html[data-panel-theme="dark"] .auth-page .form-control::placeholder { color: #98a2b3 !important; }
.auth-page .form-check-input,
html[data-panel-theme="dark"] .auth-page .form-check-input { border-color: #b8c0cc; background-color: #fff; }
.auth-page .form-check-input:checked,
html[data-panel-theme="dark"] .auth-page .form-check-input:checked { border-color: #3b82f6; background-color: #3b82f6; }

@media (max-width: 575.98px) {
  .auth-page { padding: 0 !important; }
  .layout-navbar { margin-inline: .75rem !important; }
  .card-header, .card-body { padding-inline: 1rem; }
}


/* Prevent the sidebar scroll shadow from creating a white strip */
.layout-menu .menu-inner-shadow,
html[data-panel-theme="light"] .layout-menu .menu-inner-shadow,
html[data-panel-theme="dark"] .layout-menu .menu-inner-shadow {
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* Keep the sidebar panel label identical in both themes */
.layout-menu .brand-copy small,
html[data-panel-theme="light"] .layout-menu .brand-copy small,
html[data-panel-theme="dark"] .layout-menu .brand-copy small {
  color: #94a3b8 !important;
}


/* Mobile login: full-white viewport and a roomier form */
.auth-form-wrap {
  max-width: 420px;
}

@media (max-width: 575.98px) {
  html:has(.auth-page),
  body:has(.auth-page),
  .auth-page,
  .auth-shell,
  .auth-form-panel {
    background: #ffffff !important;
  }

  html:has(.auth-page),
  body:has(.auth-page) {
    min-height: 100%;
  }

  .auth-form-panel {
    width: 100%;
    padding: 2rem 1rem !important;
  }

  .auth-form-wrap {
    width: 100%;
    max-width: 420px;
  }

  .auth-form-wrap .form-control {
    min-height: 50px;
  }

  .auth-form-wrap .btn {
    min-height: 54px;
  }
}


/* Simplified quick-order flow */
.quick-order-card .card-body {
  padding: 1.5rem;
}
.quick-order-title {
  margin-bottom: 1.25rem;
}
.quick-order-step {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
}
.quick-order-step-number {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  flex: 0 0 28px;
  margin-top: 1.85rem;
  border-radius: 50%;
  color: #fff;
  background: #3b82f6;
  font-size: .75rem;
  font-weight: 700;
}
.quick-order-search .input-group-text {
  border-right: 0 !important;
}
.quick-order-search .form-control {
  border-left: 0 !important;
}
.quick-order-hint {
  display: block;
  margin-top: .45rem;
  color: var(--panel-muted);
}
.quick-order-alternative {
  margin: 1rem 0 0 2.6rem;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--panel-surface);
}
.quick-order-alternative summary {
  padding: .8rem 1rem;
  color: var(--panel-ink);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 650;
}
.quick-order-alternative-body {
  padding: 0 1rem 1rem;
}
.quick-order-summary {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--panel-border);
}
.quick-order-required-fields {
  margin: 1rem 0 0 2.6rem;
}
.quick-order-price {
  color: #b45309 !important;
  font-weight: 700;
}
html[data-panel-theme="dark"] .quick-order-alternative {
  border-color: var(--panel-border);
  background: var(--panel-surface);
}
@media (max-width: 575.98px) {
  .quick-order-card .card-body {
    padding: 1rem;
  }
  .quick-order-step {
    gap: .65rem;
  }
  .quick-order-step-number {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }
  .quick-order-alternative,
  .quick-order-required-fields {
    margin-left: 0;
  }
}


/* Category selectors stay visible without an extra disclosure control */
.quick-order-alternative-open {
  border: 0 !important;
  background: transparent !important;
}
.quick-order-alternative-open .quick-order-alternative-body {
  padding: 0 !important;
}


/* Quick-order cleanup: no step badges, divider, or overlapping search controls */
.quick-order-step {
  display: block !important;
}
.quick-order-summary {
  padding-top: 0 !important;
  border-top: 0 !important;
}
.quick-order-search {
  position: relative;
}
.quick-order-search-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  z-index: 2;
  color: var(--panel-muted);
  font-size: 1.1rem;
  pointer-events: none;
  transform: translateY(-50%);
}
.quick-order-search .form-control {
  padding-left: 2.75rem !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 7px !important;
}
html[data-panel-theme="dark"] .quick-order-search .form-control {
  border-color: var(--panel-border) !important;
}


/* Align always-visible category selectors with the product search */
.quick-order-alternative-open {
  width: 100% !important;
  margin: 1rem 0 0 !important;
}


/* Center quick-order select text and normalize price weight */
.quick-order-alternative-open .select2-container--default .select2-selection--single {
  display: flex !important;
  align-items: center !important;
}
.quick-order-alternative-open .select2-container--default .select2-selection--single .select2-selection__rendered {
  display: flex !important;
  align-items: center !important;
  min-height: inherit;
  width: 100%;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: normal !important;
}
.quick-order-alternative-open .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50% !important;
  transform: translateY(-50%);
}
.quick-order-price {
  font-weight: 400 !important;
}


/* Make conditional quick-order fields span the full card width */
.quick-order-required-fields {
  width: 100% !important;
  max-width: none !important;
  margin: 1rem 0 0 !important;
}


/* === Soft Premium Blue Theme · 2026-09-20 === */
:root {
  --panel-primary: #3b82f6;
  --panel-primary-dark: #2563eb;
  --panel-primary-soft: #eef5ff;
  --panel-ink: #172033;
  --panel-muted: #667085;
  --panel-border: #e3eaf4;
  --panel-surface: #ffffff;
  --panel-bg: #f4f7fb;
  --panel-success: #0f9f77;
  --panel-shadow: 0 12px 34px rgba(30, 64, 175, .07);
}

body,
.layout-page,
.content-wrapper { background: var(--panel-bg); }

.layout-menu {
  background: linear-gradient(180deg, #10233f 0%, #0b172a 100%) !important;
  box-shadow: 12px 0 38px rgba(15, 35, 64, .12);
}
.brand-mark {
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  box-shadow: 0 8px 22px rgba(37, 99, 235, .28);
}
.layout-menu .menu-item.active > .menu-link {
  color: #fff !important;
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  box-shadow: inset 3px 0 #93c5fd, 0 8px 22px rgba(37, 99, 235, .24);
}
.layout-menu .menu-link:hover { background: rgba(96,165,250,.12) !important; }

.layout-navbar {
  border-color: rgba(219, 229, 242, .95);
  border-radius: 14px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 10px 30px rgba(30,64,175,.06) !important;
  backdrop-filter: blur(14px);
}
.profile-trigger { border-radius: 10px; }
.profile-trigger:hover { background: #eff6ff; }
.profile-trigger .avatar { background: linear-gradient(135deg, #60a5fa, #2563eb); }

.card,
.category-card,
.product-card,
.catalog-toolbar {
  border-color: var(--panel-border);
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
}
.card:hover,
.category-card:hover,
.product-card:hover {
  border-color: #c9daf3;
  box-shadow: 0 16px 38px rgba(30,64,175,.09);
}

.metric-icon,
.section-title-icon,
.category-icon {
  color: #2563eb;
  background: #eaf3ff;
  border-radius: 11px;
}
.metric-card.is-green { --metric-color:#0f9f77; --metric-tint:#e9f9f4; }
.metric-card.is-blue { --metric-color:#2563eb; --metric-tint:#eaf3ff; }
.metric-card.is-orange { --metric-color:#7c6ee6; --metric-tint:#f0efff; }
.metric-card.is-red { --metric-color:#d45463; --metric-tint:#ffedf0; }

.btn { border-radius: 10px; }
.btn-primary,
.auth-form-wrap .btn-primary {
  border-color: #3b82f6;
  background: linear-gradient(135deg, #4f9cf9, #2563eb);
  box-shadow: 0 8px 20px rgba(37,99,235,.20);
}
.btn-primary:hover,
.auth-form-wrap .btn-primary:hover {
  border-color: #1d4ed8;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  transform: translateY(-1px);
}
.form-control,
.form-select,
.select2-container--default .select2-selection--single {
  border-color: #d6e1ef !important;
  border-radius: 10px !important;
  background-color: #fbfdff;
}
.form-control:focus,
.form-select:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 4px rgba(59,130,246,.11) !important;
}
.form-check-input:checked {
  border-color: #3b82f6;
  background-color: #3b82f6;
}

.category-card:hover { border-color: #8bb8f2; }
.product-category {
  border-color: #cfe2ff;
  color: #1d4ed8;
  background: #eff6ff;
}
.product-buy,
.page-item.active .page-link {
  border-color: #2563eb;
  background: #2563eb;
}
.product-buy:hover { border-color: #1d4ed8; background: #1d4ed8; }
.page-link { color: #2563eb; }
.quick-order-step-number { background: #3b82f6; }
.quick-order-price { color: #2563eb !important; }
.theme-toggle:hover { border-color: #60a5fa; background: #eff6ff; }

.auth-page,
html[data-panel-theme="dark"] .auth-page {
  background: linear-gradient(135deg, #edf4fc 0%, #f8fbff 100%) !important;
}
.auth-shell {
  border-color: #dce7f5;
  border-radius: 18px;
  box-shadow: 0 26px 70px rgba(29,78,216,.13);
}
.auth-showcase {
  background: linear-gradient(145deg, #102b4c 0%, #174b7a 56%, #3b82f6 100%) !important;
}
.auth-showcase::before,
.auth-showcase::after { display: block; border-color: rgba(255,255,255,.12); }
.auth-brand .brand-mark { background: rgba(255,255,255,.16); }
.auth-message .eyebrow {
  border-color: rgba(191,219,254,.35);
  color: #dbeafe;
  background: rgba(255,255,255,.08);
}
.auth-features i { color: #93c5fd; }
.auth-form-eyebrow { color: #2563eb; }
.auth-page .form-check-input:checked,
html[data-panel-theme="dark"] .auth-page .form-check-input:checked {
  border-color: #3b82f6;
  background-color: #3b82f6;
}

html[data-panel-theme="dark"] {
  --panel-primary: #60a5fa;
  --panel-primary-dark: #3b82f6;
  --panel-primary-soft: #172b48;
  --panel-ink: #edf4ff;
  --panel-muted: #9eb0c7;
  --panel-border: #2a3c54;
  --panel-surface: #172235;
  --panel-bg: #0d1624;
  --panel-success: #42d6aa;
  --panel-shadow: 0 10px 30px rgba(0,0,0,.20);
}
html[data-panel-theme="dark"] .layout-menu {
  background: linear-gradient(180deg, #091424 0%, #07101d 100%) !important;
}
html[data-panel-theme="dark"] .layout-navbar,
html[data-panel-theme="dark"] .card,
html[data-panel-theme="dark"] .card-header,
html[data-panel-theme="dark"] .card-body,
html[data-panel-theme="dark"] .catalog-toolbar,
html[data-panel-theme="dark"] .category-card,
html[data-panel-theme="dark"] .product-card,
html[data-panel-theme="dark"] .modal-content,
html[data-panel-theme="dark"] .dropdown-menu,
html[data-panel-theme="dark"] .offcanvas,
html[data-panel-theme="dark"] .list-group,
html[data-panel-theme="dark"] .list-group-item,
html[data-panel-theme="dark"] .quick-search-results {
  border-color: var(--panel-border) !important;
  color: var(--panel-ink) !important;
  background-color: var(--panel-surface) !important;
}
html[data-panel-theme="dark"] .bg-light,
html[data-panel-theme="dark"] .bg-white,
html[data-panel-theme="dark"] .table-light,
html[data-panel-theme="dark"] .table thead th,
html[data-panel-theme="dark"] .table-hover > tbody > tr:hover > * {
  color: var(--panel-ink) !important;
  background-color: #1d2a3e !important;
}
html[data-panel-theme="dark"] .form-control,
html[data-panel-theme="dark"] .form-select,
html[data-panel-theme="dark"] .select2-selection,
html[data-panel-theme="dark"] .select2-dropdown,
html[data-panel-theme="dark"] .select2-search__field,
html[data-panel-theme="dark"] .input-group-text {
  border-color: var(--panel-border) !important;
  color: var(--panel-ink) !important;
  background-color: #111c2c !important;
}
html[data-panel-theme="dark"] .select2-results__option--highlighted,
html[data-panel-theme="dark"] .form-check-input:checked,
html[data-panel-theme="dark"] .pagination .page-item.active .page-link {
  color: #fff !important;
  border-color: #3b82f6 !important;
  background: #3b82f6 !important;
}
html[data-panel-theme="dark"] .profile-trigger:hover,
html[data-panel-theme="dark"] .dropdown-item:hover,
html[data-panel-theme="dark"] .nav-tabs .nav-link:hover {
  background: #1d2a3e !important;
}


/* Remove the extra right-side active menu indicator */
.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner > .menu-item.active::before {
  display: none !important;
  content: none !important;
}


/* Softer dashboard metric numbers */
.metric-value {
  color: #344054;
  font-weight: 600;
  letter-spacing: -0.02em;
}
html[data-panel-theme="dark"] .metric-value {
  color: #dbe7f5 !important;
  font-weight: 600;
}


/* Lighter dashboard metric numbers */
.metric-value {
  color: #5f6f85;
  font-weight: 500;
}
html[data-panel-theme="dark"] .metric-value {
  color: #c7d4e4 !important;
  font-weight: 500;
}


/* Shared fixed profile character */
.avatar-fixed-icon {
  display: grid !important;
  place-items: center;
}
.avatar-fixed-icon .bx {
  font-size: 1.25rem;
  line-height: 1;
}


/* Circular shared profile avatar */
.avatar-fixed-icon {
  border-radius: 50% !important;
  overflow: visible;
}


/* Original-color product brand logos */
.product-logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: none !important;
}

/* 2026-09-21: theme toggle transient interaction state */
.theme-toggle:hover,
html[data-panel-theme="dark"] .theme-toggle:hover{border-color:var(--panel-border)!important;background:var(--panel-surface)!important;box-shadow:none!important}
.theme-toggle:focus:not(:focus-visible),
html[data-panel-theme="dark"] .theme-toggle:focus:not(:focus-visible){outline:none!important;box-shadow:none!important;border-color:var(--panel-border)!important;background:var(--panel-surface)!important}
.theme-toggle:active,
html[data-panel-theme="dark"] .theme-toggle:active{border-color:#60a5fa!important;background:#243a57!important;box-shadow:0 0 0 3px rgba(96,165,250,.18)!important}
.theme-toggle:focus-visible{outline:2px solid #60a5fa!important;outline-offset:2px!important;box-shadow:none!important}

/* 2026-09-21: global card overflow containment */
html,body{max-width:100%;overflow-x:hidden}
.layout-wrapper,.layout-container,.layout-page,.content-wrapper,main,
.container,.container-fluid,.container-xxl{min-width:0;max-width:100%}
.content-wrapper .container-xxl{width:100%}
.row{min-width:0}
.row>*{min-width:0;max-width:100%}
.card,.metric-card,.order-card,.mini-stat,.quick-order-card,
.category-card,.product-card,.catalog-toolbar,.payment-detail-panel,
.quick-order-alternative,.quick-order-required-fields,.quick-order-summary{
  width:100%;max-width:100%;min-width:0;box-sizing:border-box
}
.card-header,.card-body,.card-footer,
.category-card>*,.product-card>*,.catalog-toolbar>*,
.payment-detail-panel>*,.quick-order-card>*{
  min-width:0;max-width:100%;box-sizing:border-box
}
.card .d-flex,.card .input-group,.card .btn-group,
.payment-detail-panel .d-flex{min-width:0;max-width:100%}
.card img,.card svg,.card video,
.category-card img,.product-card img{max-width:100%;height:auto}
.card .table-responsive,.card-body .table-responsive{
  display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch
}
.card table{max-width:100%}
.card p,.card span,.card strong,.card a,
.category-copy,.product-card,.crypto-address-box p{
  overflow-wrap:anywhere;word-break:break-word
}
.crypto-address-box{width:100%;max-width:100%;min-width:0}
@media (max-width:575.98px){
  .content-wrapper>.container-xxl,.content-wrapper>.container-fluid{
    width:100%;max-width:100%;padding-left:.75rem!important;padding-right:.75rem!important
  }
  .card-header,.card-body,.card-footer{max-width:100%;padding-left:1rem;padding-right:1rem}
}

/* 2026-09-21: prevent dark card shadows from appearing outside card bounds */
html[data-panel-theme="dark"] .card,
html[data-panel-theme="dark"] .metric-card,
html[data-panel-theme="dark"] .order-card,
html[data-panel-theme="dark"] .mini-stat,
html[data-panel-theme="dark"] .quick-order-card,
html[data-panel-theme="dark"] .category-card,
html[data-panel-theme="dark"] .product-card,
html[data-panel-theme="dark"] .catalog-toolbar,
html[data-panel-theme="dark"] .payment-detail-panel,
html[data-panel-theme="dark"] .crypto-wallet-card{
  box-shadow:none!important
}
html[data-panel-theme="dark"] .card:hover,
html[data-panel-theme="dark"] .category-card:hover,
html[data-panel-theme="dark"] .product-card:hover{
  box-shadow:none!important
}


/* 2026-09-22: mobile login heading white */
@media (max-width: 991.98px) {
  html[data-panel-theme] .auth-page .auth-showcase .auth-message h1 {
    color: #ffffff !important;
  }
}


/* 2026-09-22: desktop-equivalent mobile login layout */
@media (max-width: 575.98px) {
  html:has(.auth-page),
  body:has(.auth-page) {
    background: #edf4fc !important;
  }

  .auth-page {
    min-height: 100dvh !important;
    padding: 14px !important;
    background: linear-gradient(135deg, #edf4fc 0%, #f8fbff 100%) !important;
  }

  .auth-page .auth-shell {
    display: grid !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: auto !important;
    overflow: hidden !important;
    border: 1px solid #dce7f5 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 45px rgba(29, 78, 216, .13) !important;
    grid-template-columns: 1fr !important;
  }

  .auth-page .auth-showcase {
    display: flex !important;
    min-height: 0 !important;
    padding: 1.75rem 1.35rem !important;
    color: #ffffff !important;
    background: linear-gradient(145deg, #102b4c 0%, #174b7a 56%, #3b82f6 100%) !important;
  }

  .auth-page .auth-brand {
    margin-bottom: 2rem !important;
  }

  .auth-page .auth-message {
    margin: 0 !important;
  }

  .auth-page .auth-showcase .auth-message h1 {
    display: block !important;
    margin: .85rem 0 .75rem !important;
    color: #ffffff !important;
    font-size: clamp(2rem, 10vw, 2.8rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.04em !important;
  }

  .auth-page .auth-showcase .auth-message > p {
    margin-bottom: 1.25rem !important;
    color: #dbeafe !important;
    font-size: .95rem !important;
    line-height: 1.6 !important;
  }

  .auth-page .auth-features {
    display: grid !important;
    gap: .65rem !important;
  }

  .auth-page .auth-footnote {
    margin-top: 2rem !important;
    color: #dbeafe !important;
  }

  .auth-page .auth-form-panel {
    width: 100% !important;
    padding: 2rem 1.35rem !important;
    color: #344054 !important;
    background: #ffffff !important;
  }

  .auth-page .auth-form-wrap {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }
}


/* 2026-09-22: compact mobile login vertical spacing */
@media (max-width: 575.98px) {
  .auth-page {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .auth-page .auth-shell {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    grid-auto-rows: max-content !important;
  }

  .auth-page .auth-showcase {
    min-height: 0 !important;
    height: auto !important;
  }

  .auth-page .auth-form-panel {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 1.5rem 1.35rem !important;
  }

  .auth-page .auth-form-wrap {
    margin: 0 auto !important;
  }
}


/* 2026-09-22: remove remaining mobile login edge and bottom gaps */
@media (max-width: 575.98px) {
  html:has(.auth-page),
  body:has(.auth-page) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  .auth-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .auth-page .auth-shell {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    grid-template-rows: auto auto !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
  }

  .auth-page .auth-form-panel {
    min-height: 0 !important;
    height: auto !important;
    align-self: start !important;
    flex: 0 0 auto !important;
    padding-bottom: 1.25rem !important;
  }

  .auth-page .auth-security-note {
    margin-bottom: 0 !important;
  }
}



/* 2026-09-22: premium login showcase refresh — left panel only */
.auth-showcase {
  isolation: isolate;
  padding: 3.35rem 3.4rem;
  color: #fff;
  background:
    radial-gradient(circle at 86% 10%, rgba(59,130,246,.34) 0, rgba(59,130,246,0) 34%),
    radial-gradient(circle at 4% 94%, rgba(14,165,233,.2) 0, rgba(14,165,233,0) 32%),
    linear-gradient(145deg, #071a35 0%, #0b2f61 46%, #1054a3 100%) !important;
}
.auth-showcase::before,
.auth-showcase::after {
  display: block !important;
  pointer-events: none;
  z-index: 0;
}
.auth-showcase::before {
  top: -210px;
  right: -190px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(147,197,253,.18);
  box-shadow:
    0 0 0 74px rgba(96,165,250,.035),
    0 0 0 148px rgba(96,165,250,.025);
}
.auth-showcase::after {
  right: auto;
  bottom: -250px;
  left: -225px;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(125,211,252,.14);
  box-shadow: 0 0 0 68px rgba(56,189,248,.025);
}
.auth-showcase > * {
  position: relative;
  z-index: 1;
}
.auth-brand {
  gap: 1rem;
}
.auth-brand .brand-mark {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 34px rgba(2,12,27,.24);
  backdrop-filter: blur(14px);
}
.auth-brand .brand-mark img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.auth-brand .brand-copy strong {
  color: #fff;
  font-size: 1.03rem;
  font-weight: 750;
  letter-spacing: -.015em;
}
.auth-brand .brand-copy small {
  margin-top: .28rem;
  color: #93c5fd;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.auth-message {
  max-width: 500px;
}
.auth-message .eyebrow {
  margin-bottom: 1.25rem;
  padding: .5rem .75rem;
  border: 1px solid rgba(147,197,253,.22);
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(255,255,255,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.auth-message h1 {
  max-width: 470px;
  margin-bottom: 1.15rem;
  color: #fff !important;
  font-size: clamp(2.65rem, 4.3vw, 4rem);
  font-weight: 760;
  line-height: .99;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.auth-message p {
  max-width: 455px;
  color: rgba(239,246,255,.82) !important;
  font-size: .96rem;
  line-height: 1.75;
}
.auth-features {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.75rem;
}
.auth-features span {
  min-height: 36px;
  padding: .48rem .7rem;
  border: 1px solid rgba(147,197,253,.16);
  border-radius: 10px;
  color: #eff6ff;
  background: rgba(6,28,59,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  font-size: .72rem;
  font-weight: 650;
  backdrop-filter: blur(10px);
}
.auth-features i {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  color: #bfdbfe;
  background: rgba(59,130,246,.35);
  font-size: .78rem;
}
.auth-footnote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(219,234,254,.7);
  font-size: .72rem;
}
.auth-footnote::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: .45rem;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 5px rgba(52,211,153,.1);
}
@media (max-width: 991.98px) {
  .auth-showcase { padding: 2.35rem 2.4rem; }
  .auth-message h1 { font-size: 2.55rem; }
  .auth-features { margin-top: 1.25rem; }
}



/* 2026-09-22: auth showcase v2 — clearly differentiated premium layout */
.auth-showcase {
  padding: 3rem !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(59,130,246,.55), transparent 32%),
    radial-gradient(circle at 8% 92%, rgba(6,182,212,.28), transparent 34%),
    linear-gradient(150deg, #04152f 0%, #082e61 48%, #1261bf 100%) !important;
}
.auth-brand {
  width: fit-content;
  padding: .72rem .9rem .72rem .72rem;
  border: 1px solid rgba(191,219,254,.2);
  border-radius: 18px;
  background: rgba(3,22,48,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 40px rgba(1,10,25,.18);
  backdrop-filter: blur(14px);
}
.auth-brand .brand-mark {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.06)) !important;
}
.auth-message {
  max-width: 515px !important;
  padding: 2rem 2rem 1.8rem;
  border: 1px solid rgba(191,219,254,.18);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(5,27,58,.43), rgba(9,48,98,.2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 70px rgba(1,12,30,.22);
  backdrop-filter: blur(18px);
}
.auth-message .eyebrow {
  color: #dbeafe !important;
  background: rgba(37,99,235,.28) !important;
}
.auth-message h1 {
  font-size: clamp(2.65rem, 4vw, 3.7rem) !important;
  line-height: 1.02 !important;
  text-shadow: 0 8px 28px rgba(1,10,28,.2);
}
.auth-message h1 span,
.auth-message h1 .accent {
  color: #93c5fd !important;
}
.auth-message p {
  max-width: 440px !important;
  color: rgba(239,246,255,.86) !important;
}
.auth-features {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .65rem !important;
}
.auth-features span {
  min-height: 68px !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center;
  gap: .45rem !important;
  padding: .72rem .8rem !important;
  border: 1px solid rgba(147,197,253,.18) !important;
  border-radius: 13px !important;
  background: rgba(7,35,72,.36) !important;
}
.auth-features i {
  width: 24px !important;
  height: 24px !important;
  background: linear-gradient(135deg,#2563eb,#38bdf8) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(37,99,235,.28);
}
.auth-footnote {
  width: 100%;
  padding: .72rem .9rem;
  border: 1px solid rgba(147,197,253,.14);
  border-radius: 12px;
  background: rgba(3,22,48,.22);
  backdrop-filter: blur(12px);
}
@media (max-width: 991.98px) {
  .auth-showcase { padding: 2rem !important; }
  .auth-message { padding: 1.55rem !important; }
  .auth-features span { min-height: 58px !important; }
}



/* 2026-09-22: login brand-side premium redesign v3 */
.auth-page .brand-side {
  isolation: isolate;
  padding: 46px 48px !important;
  background:
    radial-gradient(circle at 88% 9%, rgba(59,130,246,.52) 0, rgba(59,130,246,0) 34%),
    radial-gradient(circle at 4% 94%, rgba(6,182,212,.25) 0, rgba(6,182,212,0) 35%),
    linear-gradient(150deg, #03152f 0%, #082d60 50%, #1264c9 100%) !important;
}
.auth-page .brand-side::before {
  width: 520px !important;
  height: 520px !important;
  top: -250px !important;
  right: -220px !important;
  border-color: rgba(191,219,254,.17) !important;
  box-shadow: 0 0 0 80px rgba(96,165,250,.035), 0 0 0 160px rgba(96,165,250,.022);
}
.auth-page .brand-side::after {
  width: 360px !important;
  height: 360px !important;
  left: -230px !important;
  bottom: -225px !important;
  border-color: rgba(103,232,249,.16) !important;
  box-shadow: 0 0 0 65px rgba(34,211,238,.025);
}
.auth-page .brand-side .brand {
  width: fit-content;
  padding: 10px 14px 10px 10px;
  border: 1px solid rgba(191,219,254,.2);
  border-radius: 18px;
  background: rgba(2,20,45,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 44px rgba(0,9,24,.16);
  backdrop-filter: blur(16px);
}
.auth-page .brand-side .brand-logo {
  width: 56px !important;
  height: 56px !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.07)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16),0 12px 28px rgba(0,12,32,.2) !important;
}
.auth-page .brand-side .hero {
  max-width: 510px;
  margin: 24px 0 !important;
  padding: 28px 28px 25px;
  border: 1px solid rgba(191,219,254,.19);
  border-radius: 24px;
  background: linear-gradient(145deg,rgba(2,23,52,.48),rgba(12,65,126,.22));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 28px 75px rgba(0,10,28,.2);
  backdrop-filter: blur(18px);
}
.auth-page .brand-side .hero h1 {
  margin-bottom: 18px !important;
  font-size: clamp(44px,4.2vw,60px) !important;
  font-weight: 760 !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
  text-shadow: 0 10px 30px rgba(0,8,26,.22);
}
.auth-page .brand-side .hero h1 span {
  color: #93c5fd !important;
}
.auth-page .brand-side .hero > p {
  max-width: 430px;
  color: rgba(239,246,255,.84) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}
.auth-page .brand-side .simple-points {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 9px !important;
  margin-top: 22px !important;
}
.auth-page .brand-side .simple-points span {
  min-height: 70px;
  padding: 11px 10px;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center;
  gap: 7px !important;
  border: 1px solid rgba(147,197,253,.17);
  border-radius: 13px;
  background: rgba(2,27,60,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}
.auth-page .brand-side .simple-points i {
  width: 25px !important;
  height: 25px !important;
  background: linear-gradient(135deg,#2563eb,#38bdf8) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(37,99,235,.3);
}
.auth-page .brand-side .brand-footer {
  padding: 10px 13px;
  border: 1px solid rgba(147,197,253,.14);
  border-radius: 12px;
  background: rgba(2,20,45,.24);
  backdrop-filter: blur(12px);
}
@media (max-width: 991.98px) {
  .auth-page .brand-side { padding: 30px !important; }
  .auth-page .brand-side .hero { padding: 23px !important; }
  .auth-page .brand-side .hero h1 { font-size: 42px !important; }
}



/* 2026-09-22: simple professional brand panel v4 */
.auth-page .brand-side {
  padding: 52px 54px !important;
  background:
    radial-gradient(circle at 88% 10%, rgba(59,130,246,.32), transparent 34%),
    linear-gradient(145deg,#061a36 0%,#0a3a77 58%,#1670d8 100%) !important;
}
.auth-page .brand-side .brand {
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.auth-page .brand-side .brand-logo {
  width: 60px !important;
  height: 60px !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 17px !important;
  background: rgba(255,255,255,.13) !important;
  box-shadow: 0 14px 34px rgba(0,11,30,.18) !important;
}
.auth-page .brand-side .hero {
  position: relative;
  max-width: 470px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.auth-page .brand-side .hero::before {
  content: "BAYİ PANELİ";
  display: inline-flex;
  margin-bottom: 25px;
  padding: 7px 13px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.08);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
}
.auth-page .brand-side .hero::after {
  content: "";
  position: absolute;
  top: 10px;
  right: -64px;
  width: 78px;
  height: 98px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 17px;
  background: linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.055));
  box-shadow: -38px 44px 0 -1px rgba(255,255,255,.075),-38px 44px 0 0 rgba(255,255,255,.18),18px 62px 0 -1px rgba(255,255,255,.075),18px 62px 0 0 rgba(255,255,255,.18);
  transform: rotate(7deg);
}
.auth-page .brand-side .hero h1 {
  max-width: 410px !important;
  margin: 0 0 17px !important;
  color: #fff !important;
  font-size: clamp(48px,4.3vw,62px) !important;
  font-weight: 760 !important;
  line-height: 1.04 !important;
  letter-spacing: -.055em !important;
  text-shadow: none !important;
}
.auth-page .brand-side .hero h1 span {
  color: #fff !important;
}
.auth-page .brand-side .hero > p {
  max-width: 430px !important;
  margin: 0 !important;
  color: rgba(239,246,255,.8) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}
.auth-page .brand-side .simple-points {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-top: 25px !important;
}
.auth-page .brand-side .simple-points span {
  min-height: 0 !important;
  padding: 0 !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
}
.auth-page .brand-side .simple-points i {
  width: 18px !important;
  height: 18px !important;
  background: #93c5fd !important;
  color: #06346a !important;
  box-shadow: none !important;
  font-size: 12px !important;
}
.auth-page .brand-side .brand-footer {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}
@media (max-width: 991.98px) {
  .auth-page .brand-side { padding: 32px !important; }
  .auth-page .brand-side .hero h1 { font-size: 44px !important; }
  .auth-page .brand-side .hero::after { opacity: .55; right: -20px; }
}



/* 2026-09-22: compact professional brand panel v5 */
.auth-page .brand-side {
  padding: 42px 46px !important;
}
.auth-page .brand-side .brand {
  gap: 11px !important;
}
.auth-page .brand-side .brand-logo {
  width: 46px !important;
  height: 46px !important;
  border-radius: 13px !important;
}
.auth-page .brand-side .brand-logo img {
  width: 28px !important;
  height: 28px !important;
}
.auth-page .brand-side .brand strong {
  font-size: 16px !important;
}
.auth-page .brand-side .brand span {
  margin-top: 3px !important;
  font-size: 9px !important;
  letter-spacing: .16em !important;
}
.auth-page .brand-side .hero {
  max-width: 420px !important;
}
.auth-page .brand-side .hero::before {
  margin-bottom: 17px !important;
  padding: 5px 10px !important;
  font-size: 9px !important;
}
.auth-page .brand-side .hero::after {
  top: 16px !important;
  right: -34px !important;
  width: 54px !important;
  height: 70px !important;
  border-radius: 13px !important;
  opacity: .55 !important;
  box-shadow: -27px 32px 0 -1px rgba(255,255,255,.055),-27px 32px 0 0 rgba(255,255,255,.13),13px 43px 0 -1px rgba(255,255,255,.055),13px 43px 0 0 rgba(255,255,255,.13) !important;
}
.auth-page .brand-side .hero h1 {
  max-width: 355px !important;
  margin-bottom: 13px !important;
  font-size: clamp(34px,3.2vw,43px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
}
.auth-page .brand-side .hero > p {
  max-width: 390px !important;
  font-size: 13px !important;
  line-height: 1.62 !important;
}
.auth-page .brand-side .simple-points {
  gap: 7px !important;
  margin-top: 18px !important;
}
.auth-page .brand-side .simple-points span {
  gap: 7px !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}
.auth-page .brand-side .simple-points i {
  width: 16px !important;
  height: 16px !important;
  font-size: 10px !important;
}
.auth-page .brand-side .brand-footer {
  font-size: 10px !important;
}
@media (max-width: 991.98px) {
  .auth-page .brand-side { padding: 27px !important; }
  .auth-page .brand-side .hero h1 { font-size: 34px !important; }
}



/* 2026-09-22: final clean professional login v6 */
.auth-page {
  min-height: 100vh !important;
  padding: 24px !important;
  background: #eef3f8 !important;
}
.auth-page .login-card {
  width: min(980px,100%) !important;
  min-height: 580px !important;
  height: auto !important;
  grid-template-columns: 42% 58% !important;
  border: 1px solid #dfe7f0 !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 24px 70px rgba(15,39,70,.12) !important;
}
.auth-page .brand-side {
  padding: 40px !important;
  background: linear-gradient(150deg,#071c39 0%,#0b3d79 62%,#1467c4 100%) !important;
}
.auth-page .brand-side::before {
  width: 400px !important;
  height: 400px !important;
  top: -235px !important;
  right: -230px !important;
  box-shadow: none !important;
}
.auth-page .brand-side::after {
  width: 280px !important;
  height: 280px !important;
  left: -190px !important;
  bottom: -190px !important;
  box-shadow: none !important;
}
.auth-page .brand-side .brand-logo {
  width: 44px !important;
  height: 44px !important;
}
.auth-page .brand-side .brand-logo img {
  width: 27px !important;
  height: 27px !important;
}
.auth-page .brand-side .brand strong { font-size: 15px !important; }
.auth-page .brand-side .brand span { font-size: 8px !important; }
.auth-page .brand-side .hero {
  max-width: 340px !important;
}
.auth-page .brand-side .hero::before {
  margin-bottom: 15px !important;
  padding: 5px 9px !important;
  font-size: 8px !important;
}
.auth-page .brand-side .hero::after {
  display: none !important;
}
.auth-page .brand-side .hero h1 {
  max-width: 320px !important;
  margin-bottom: 12px !important;
  font-size: 34px !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
}
.auth-page .brand-side .hero > p {
  max-width: 330px !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
}
.auth-page .brand-side .simple-points {
  margin-top: 17px !important;
  gap: 7px !important;
}
.auth-page .brand-side .simple-points span { font-size: 10px !important; }
.auth-page .brand-side .brand-footer { font-size: 9px !important; }

.auth-page .form-side {
  padding: 48px 58px !important;
  background: #fff !important;
}
.auth-page .form-wrap {
  width: 100% !important;
  max-width: 380px !important;
  margin: auto !important;
}
.auth-page .form-wrap .eyebrow {
  margin-bottom: 9px !important;
  color: #2563eb !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: .14em !important;
}
.auth-page .form-wrap h2 {
  margin: 0 0 9px !important;
  color: #132238 !important;
  font-size: 29px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -.035em !important;
}
.auth-page .form-wrap .intro {
  margin-bottom: 28px !important;
  color: #718096 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
.auth-page .form-wrap .group {
  margin-bottom: 17px !important;
}
.auth-page .form-wrap .group > label {
  margin-bottom: 7px !important;
  color: #344054 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}
.auth-page .form-wrap .field {
  height: 48px !important;
  border: 1px solid #d7e0ea !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}
.auth-page .form-wrap .field:focus-within {
  border-color: #3b82f6 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.11) !important;
}
.auth-page .form-wrap .field input {
  color: #172033 !important;
  font-size: 13px !important;
}
.auth-page .form-wrap .field i {
  color: #8291a5 !important;
  font-size: 16px !important;
}
.auth-page .form-wrap .toggle,
.auth-page .form-wrap .options {
  font-size: 10px !important;
}
.auth-page .form-wrap .options {
  margin: 2px 0 20px !important;
}
.auth-page .form-wrap .submit {
  min-height: 50px !important;
  height: 50px !important;
  border-radius: 10px !important;
  background: #2563eb !important;
  box-shadow: 0 10px 24px rgba(37,99,235,.18) !important;
  font-size: 13px !important;
}
.auth-page .form-wrap .submit:hover {
  background: #1d4ed8 !important;
}
.auth-page .form-wrap .secure-note {
  margin-top: 14px !important;
  font-size: 9px !important;
}
@media (max-width: 991.98px) {
  .auth-page .login-card { width: min(560px,100%) !important; grid-template-columns: 1fr !important; }
  .auth-page .brand-side { padding: 28px !important; }
  .auth-page .form-side { padding: 34px !important; }
}



/* 2026-09-22: hard reset clean left panel v7 */
.auth-page .brand-side {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  align-items: stretch !important;
  justify-content: initial !important;
  gap: 0 !important;
  padding: 42px !important;
  overflow: hidden !important;
  color: #fff !important;
  background: linear-gradient(155deg,#071a35 0%,#0a376f 60%,#1265bd 100%) !important;
}
.auth-page .brand-side::before,
.auth-page .brand-side::after {
  display: none !important;
}
.auth-page .brand-side .brand {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  width: auto !important;
  align-items: center !important;
  gap: 11px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.auth-page .brand-side .brand-logo {
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  place-items: center !important;
  flex: 0 0 44px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.1) !important;
  box-shadow: none !important;
}
.auth-page .brand-side .brand-logo img {
  width: 27px !important;
  height: 27px !important;
}
.auth-page .brand-side .brand strong {
  display: block !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.auth-page .brand-side .brand span {
  display: block !important;
  margin-top: 3px !important;
  color: #a9c9ee !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
}
.auth-page .brand-side .hero {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  max-width: 330px !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.auth-page .brand-side .hero::before {
  content: "BAYİ PANELİ" !important;
  display: inline-flex !important;
  margin: 0 0 15px !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;
  color: #dbeafe !important;
  background: rgba(255,255,255,.06) !important;
  font-size: 8px !important;
  font-weight: 750 !important;
  letter-spacing: .13em !important;
}
.auth-page .brand-side .hero::after {
  display: none !important;
  content: none !important;
}
.auth-page .brand-side .hero h1 {
  width: auto !important;
  max-width: 310px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: 33px !important;
  font-weight: 700 !important;
  line-height: 1.09 !important;
  letter-spacing: -.035em !important;
  text-shadow: none !important;
}
.auth-page .brand-side .hero h1 span {
  color: #fff !important;
}
.auth-page .brand-side .hero > p {
  max-width: 320px !important;
  margin: 0 !important;
  color: #bed2ea !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
}
.auth-page .brand-side .simple-points {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  margin: 17px 0 0 !important;
  padding: 0 !important;
}
.auth-page .brand-side .simple-points span {
  display: flex !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: row !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #edf6ff !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}
.auth-page .brand-side .simple-points i {
  display: grid !important;
  width: 16px !important;
  height: 16px !important;
  place-items: center !important;
  flex: 0 0 16px !important;
  border-radius: 50% !important;
  color: #0b407d !important;
  background: #93c5fd !important;
  box-shadow: none !important;
  font-size: 10px !important;
}
.auth-page .brand-side .brand-footer {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #91b4da !important;
  background: transparent !important;
  font-size: 9px !important;
  backdrop-filter: none !important;
}
@media (max-width: 991.98px) {
  .auth-page .brand-side {
    min-height: 310px !important;
    padding: 27px !important;
  }
  .auth-page .brand-side .hero {
    max-width: 100% !important;
  }
  .auth-page .brand-side .brand-footer {
    margin-top: 24px !important;
  }
}



/* 2026-09-22: enlarge left content only v8 */
.auth-page .brand-side .brand-logo {
  width: 50px !important;
  height: 50px !important;
  flex-basis: 50px !important;
}
.auth-page .brand-side .brand-logo img {
  width: 31px !important;
  height: 31px !important;
}
.auth-page .brand-side .brand strong {
  font-size: 17px !important;
}
.auth-page .brand-side .brand span {
  font-size: 9px !important;
}
.auth-page .brand-side .hero::before {
  font-size: 9px !important;
}
.auth-page .brand-side .hero h1 {
  max-width: 330px !important;
  font-size: 38px !important;
}
.auth-page .brand-side .hero > p {
  max-width: 335px !important;
  font-size: 13.5px !important;
}
.auth-page .brand-side .simple-points span {
  font-size: 11.5px !important;
}
.auth-page .brand-side .simple-points i {
  width: 18px !important;
  height: 18px !important;
  flex-basis: 18px !important;
  font-size: 11px !important;
}
.auth-page .brand-side .brand-footer {
  font-size: 10px !important;
}



/* 2026-09-23: enlarge left content one more step v9 */
.auth-page .brand-side .brand-logo {
  width: 54px !important;
  height: 54px !important;
  flex-basis: 54px !important;
}
.auth-page .brand-side .brand-logo img {
  width: 34px !important;
  height: 34px !important;
}
.auth-page .brand-side .brand strong {
  font-size: 18px !important;
}
.auth-page .brand-side .brand span {
  font-size: 10px !important;
}
.auth-page .brand-side .hero::before {
  font-size: 10px !important;
}
.auth-page .brand-side .hero h1 {
  max-width: 350px !important;
  font-size: 41px !important;
}
.auth-page .brand-side .hero > p {
  max-width: 350px !important;
  font-size: 14.5px !important;
}
.auth-page .brand-side .simple-points span {
  font-size: 12.5px !important;
}
.auth-page .brand-side .simple-points i {
  width: 20px !important;
  height: 20px !important;
  flex-basis: 20px !important;
  font-size: 12px !important;
}
.auth-page .brand-side .brand-footer {
  font-size: 10.5px !important;
}



/* 2026-09-23: layered blue gradient background v9 */
.auth-page .brand-side {
  background:
    radial-gradient(circle at 88% 12%, rgba(56,189,248,.28) 0%, rgba(56,189,248,0) 36%),
    radial-gradient(circle at 12% 88%, rgba(37,99,235,.30) 0%, rgba(37,99,235,0) 38%),
    linear-gradient(145deg,#04162f 0%,#082d61 42%,#0b4d98 70%,#1673d1 100%) !important;
}



/* 2026-09-23: remove logo box v10 */
.auth-page .brand-side .brand-logo {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}



/* 2026-09-23: login form alignment, messages and focus cleanup v11 */
.auth-page .form-wrap .field:focus-within {
  border-color: #d7e0ea !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  outline: none !important;
}
.auth-page .form-wrap .field input:focus,
.auth-page .form-wrap .field input:focus-visible {
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.auth-page .form-wrap .options {
  width: 100% !important;
}
.auth-page .form-wrap .remember {
  margin-left: 16px !important;
}
.auth-page .form-wrap .error-box {
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 10px 12px !important;
  border: 1px solid #f3b7bd !important;
  border-radius: 9px !important;
  color: #a92738 !important;
  background: #fff5f6 !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  text-align: left !important;
}
.auth-page .form-wrap .error-box ul {
  margin: 0 !important;
  padding: 0 0 0 17px !important;
}
.auth-page .form-wrap .error-box li {
  margin: 0 !important;
  padding: 0 !important;
}
.auth-page .form-wrap .error-box li + li {
  margin-top: 4px !important;
}
.auth-page .form-wrap #login label.error,
.auth-page .form-wrap #login .invalid-feedback,
.auth-page .form-wrap #login .help-block {
  display: block !important;
  width: 100% !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  color: #c43243 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-align: left !important;
}
.auth-page .form-wrap #login input.error,
.auth-page .form-wrap #login input.is-invalid {
  color: #172033 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}



/* 2026-09-23: definitive form alignment and validation fix v12 */
.auth-page .form-wrap .field,
.auth-page .form-wrap .field:hover,
.auth-page .form-wrap .field:focus,
.auth-page .form-wrap .field:focus-within {
  border-color: #d7e0ea !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.auth-page .form-wrap .field input,
.auth-page .form-wrap .field input:hover,
.auth-page .form-wrap .field input:active,
.auth-page .form-wrap .field input:focus,
.auth-page .form-wrap .field input:focus-visible,
.auth-page .form-wrap .field input:-webkit-autofill {
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  -webkit-box-shadow: none !important;
}
.auth-page .form-wrap .options {
  box-sizing: border-box !important;
  width: 100% !important;
  padding-left: 48px !important;
}
.auth-page .form-wrap .remember {
  margin-left: 0 !important;
}
.auth-page .form-wrap .group {
  position: relative !important;
}
.auth-page .form-wrap .field label.error {
  position: absolute !important;
  top: calc(100% + 5px) !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #c43243 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  white-space: normal !important;
}
.auth-page .form-wrap .group:has(label.error) {
  margin-bottom: 34px !important;
}
.auth-page .form-wrap .group > label.error,
.auth-page .form-wrap #login .invalid-feedback,
.auth-page .form-wrap #login .help-block {
  display: block !important;
  width: 100% !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  color: #c43243 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  white-space: normal !important;
}
.auth-page .form-wrap .error-box {
  display: block !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 10px 12px !important;
  overflow: visible !important;
  border: 1px solid #f0b7be !important;
  border-radius: 8px !important;
  color: #a92738 !important;
  background: #fff6f7 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  text-align: left !important;
  white-space: normal !important;
}



/* 2026-09-23: fix invalid-feedback overlap v13 */
.auth-page .form-wrap .field {
  position: relative !important;
}
.auth-page .form-wrap .field > .invalid-feedback,
.auth-page .form-wrap .field > .help-block {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #c43243 !important;
  background: transparent !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  white-space: normal !important;
}
.auth-page .form-wrap .group:has(.invalid-feedback),
.auth-page .form-wrap .group:has(.help-block),
.auth-page .form-wrap .group:has(label.error) {
  margin-bottom: 36px !important;
}
.auth-page .form-wrap .options {
  margin-top: 0 !important;
}



/* 2026-09-23: restore complete input borders v14 */
.auth-page .form-wrap .field {
  border: 1px solid #d7e0ea !important;
  overflow: visible !important;
}
.auth-page .form-wrap .field input,
.auth-page .form-wrap .field input.is-invalid {
  box-sizing: border-box !important;
  height: 46px !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.auth-page .form-wrap .field:has(input.is-invalid) {
  border: 1px solid #d7e0ea !important;
}



/* 2026-09-23: final login balance and spacing v15 */
@media (min-width: 992px) {
  .auth-page .login-card {
    grid-template-columns: 1fr 1fr !important;
  }
}
.auth-page .form-wrap .options {
  padding-left: 0 !important;
}
.auth-page .brand-side .hero::before {
  margin-bottom: 20px !important;
}
.auth-page .brand-side .hero h1 {
  margin-bottom: 17px !important;
}
.auth-page .brand-side .simple-points {
  margin-top: 23px !important;
  gap: 10px !important;
}



/* 2026-09-23: premium brand typography v16 */
.auth-page .brand-side .brand > div:last-child {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
}
.auth-page .brand-side .brand strong {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 750 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.12) !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
.auth-page .brand-side .brand span {
  margin-top: 0 !important;
  color: #c8ddf5 !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: .16em !important;
  text-shadow: none !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
}



/* 2026-09-23: unified mobile page background v16 */
@media (max-width: 991.98px) {
  html,
  body,
  body.auth-page,
  .auth-page,
  .auth-page .login-card,
  .auth-page .form-side {
    background: #eef4fb !important;
  }
  html,
  body {
    min-height: 100% !important;
  }
  .auth-page {
    min-height: 100dvh !important;
  }
}



/* 2026-09-23: clean sharp brand typography v17 */
.auth-page .brand-side .brand > div:last-child {
  display: block !important;
}
.auth-page .brand-side .brand strong {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
.auth-page .brand-side .brand span {
  display: block !important;
  margin-top: 4px !important;
  color: #c8d9ee !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: .11em !important;
  text-shadow: none !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}



/* 2026-09-23: replace mobile white backgrounds with #edf4fc v18 */
@media (max-width: 991.98px) {
  html,
  body,
  body.auth-page,
  .auth-page,
  .auth-page .login-card,
  .auth-page .form-side,
  .auth-page .form-wrap {
    background-color: #edf4fc !important;
  }
  .auth-page .form-wrap .field:focus-within {
    background-color: #edf4fc !important;
  }
}



/* 2026-09-23: balance brand text with logo v18 */
.auth-page .brand-side .brand strong {
  font-size: 20px !important;
  line-height: 1.2 !important;
}
.auth-page .brand-side .brand span {
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  letter-spacing: .105em !important;
}



/* 2026-09-23: definitive mobile background and brand alignment v19 */
.auth-page .brand-side .brand {
  align-items: center !important;
}
.auth-page .brand-side .brand > div:last-child {
  position: relative !important;
  top: 3px !important;
  align-self: center !important;
}
@media (max-width: 991.98px) {
  html,
  body,
  body.auth-page,
  .auth-page,
  .auth-page::before,
  .auth-page::after,
  .auth-page .login-card,
  .auth-page .login-card::before,
  .auth-page .login-card::after,
  .auth-page .form-side,
  .auth-page .form-side::before,
  .auth-page .form-side::after,
  .auth-page .form-wrap {
    background: #edf4fc !important;
    background-color: #edf4fc !important;
  }
}



/* 2026-09-23: keep form white, color only mobile page background v19 */
@media (max-width: 991.98px) {
  html,
  body,
  body.auth-page,
  .auth-page {
    background: #edf4fc !important;
    background-color: #edf4fc !important;
  }
  .auth-page .login-card,
  .auth-page .form-side {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
  .auth-page .login-card::before,
  .auth-page .login-card::after,
  .auth-page .form-side::before,
  .auth-page .form-side::after,
  .auth-page .form-wrap {
    background: transparent !important;
    background-color: transparent !important;
  }
  .auth-page .form-wrap .field,
  .auth-page .form-wrap .field:focus-within {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
  }
}