/*!
 * MOTOX Provider Portal - layout & brand layer.
 * Loaded after vuexy core.css (Bootstrap components, [dir=rtl] aware) and brand/motox-palette.css.
 * Tokens = the MOTOX apps (user/lib/core/theme/app_colors.dart). Logical properties only (RTL + LTR).
 */
@font-face { font-family: 'Cairo'; font-weight: 400; font-display: swap; src: url('../brand/fonts/Cairo-400.ttf') format('truetype'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: 'Cairo'; font-weight: 500; font-display: swap; src: url('../brand/fonts/Cairo-500.ttf') format('truetype'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: 'Cairo'; font-weight: 600; font-display: swap; src: url('../brand/fonts/Cairo-600.ttf') format('truetype'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: 'Cairo'; font-weight: 700; font-display: swap; src: url('../brand/fonts/Cairo-700.ttf') format('truetype'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../brand/fonts/Inter-400.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../brand/fonts/Inter-500.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../brand/fonts/Inter-600.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('../brand/fonts/Inter-700.ttf') format('truetype'); }

:root {
  --px-primary: #ff6f00;
  --px-primary-rgb: 255, 111, 0;
  --px-primary-hover: #e66400;
  --px-primary-soft: #fff4eb;
  --px-primary-light: #fce7cc;
  --px-navy: #021433;
  --px-bg: #f9fafb;
  --px-surface: #fff;
  --px-surface-2: #f9fafb;
  --px-surface-3: #f2f4f7;
  --px-border: #eaecf0;
  --px-input: #d0d5dd;
  --px-heading: #101828;
  --px-text: #475467;
  --px-strong: #344054;
  --px-muted: #667085;
  --px-success: #079455;
  --px-danger: #d92d20;
  --px-warning: #b54708;
  --px-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --px-shadow-md: 0 8px 24px -6px rgba(16, 24, 40, .12);
  --px-radius: .5rem;
  --px-radius-lg: .75rem;
  --px-font: 'Inter', 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --px-sidebar: 264px;
  --px-topbar: 64px;
  --bs-font-sans-serif: var(--px-font);
  --bs-body-font-family: var(--px-font);
  --bs-body-bg: var(--px-bg);
  --bs-body-color: var(--px-text);
  --bs-primary: var(--px-primary);
  --bs-primary-rgb: var(--px-primary-rgb);
  --bs-link-color: var(--px-primary);
  --bs-border-color: var(--px-border);
  --bs-border-radius: var(--px-radius);
}

html, body { min-height: 100%; }
body { margin: 0; font-family: var(--px-font); background: var(--px-bg); color: var(--px-text); font-size: .9375rem; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--px-heading); font-weight: 600; font-family: var(--px-font); }
a { color: var(--px-primary); text-decoration: none; }
a:hover { color: var(--px-primary-hover); }
.btn, .form-control, .form-select, .dropdown-menu, .modal, .table { font-family: var(--px-font); }
::selection { background: rgba(var(--px-primary-rgb), .2); }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ------------------------------------------------------------ buttons & forms */
.btn { border-radius: var(--px-radius); font-weight: 500; }
.btn-primary { --bs-btn-bg: var(--px-primary); --bs-btn-border-color: var(--px-primary); --bs-btn-hover-bg: var(--px-primary-hover); --bs-btn-hover-border-color: var(--px-primary-hover); --bs-btn-active-bg: var(--px-primary-hover); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; background-color: var(--px-primary); border-color: var(--px-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--px-primary-hover) !important; border-color: var(--px-primary-hover) !important; color: #fff !important; }
.btn-soft { background: var(--px-primary-soft); color: var(--px-primary); border: 1px solid transparent; }
.btn-soft:hover { background: var(--px-primary-light); color: var(--px-primary-hover); }
.btn-outline-secondary { --bs-btn-color: var(--px-strong); --bs-btn-border-color: var(--px-input); --bs-btn-hover-bg: var(--px-surface-3); --bs-btn-hover-color: var(--px-heading); --bs-btn-hover-border-color: var(--px-input); }
.btn-icon { width: 2.375rem; height: 2.375rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn .ti { font-size: 1.1rem; vertical-align: -2px; }
.btn.is-loading { pointer-events: none; opacity: .75; }
.btn.is-loading::after { content: ''; display: inline-block; width: .9rem; height: .9rem; margin-inline-start: .5rem; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: px-spin .7s linear infinite; vertical-align: -2px; }
@keyframes px-spin { to { transform: rotate(360deg); } }
.form-control, .form-select { border-color: var(--px-input); border-radius: var(--px-radius); min-height: 2.5rem; }
.form-control:focus, .form-select:focus { border-color: var(--px-primary); box-shadow: 0 0 0 3px rgba(var(--px-primary-rgb), .15); }
.form-label { color: var(--px-strong); font-weight: 500; font-size: .875rem; margin-bottom: .35rem; }
.form-text { color: var(--px-muted); }
.form-check-input:checked { background-color: var(--px-primary); border-color: var(--px-primary); }
.form-check-input:focus { border-color: var(--px-primary); box-shadow: 0 0 0 3px rgba(var(--px-primary-rgb), .15); }
.invalid-feedback { display: block; }

/* ------------------------------------------------------------ shell */
.px-shell { min-height: 100vh; }
.px-sidebar {
  position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--px-sidebar); z-index: 1040;
  background: var(--px-surface); border-inline-end: 1px solid var(--px-border); display: flex; flex-direction: column;
  transition: transform .25s ease;
}
.px-brand { height: var(--px-topbar); display: flex; align-items: center; gap: .6rem; padding-inline: 1.25rem; border-bottom: 1px solid var(--px-border); }
.px-brand img { height: 28px; width: auto; }
.px-brand .px-brand-tag { font-size: .7rem; font-weight: 600; color: var(--px-primary); background: var(--px-primary-soft); border-radius: 1rem; padding: .1rem .55rem; letter-spacing: .02em; }
.px-profile { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--px-border); }
.px-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--px-primary-soft); color: var(--px-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; overflow: hidden; flex-shrink: 0; border: 1px solid var(--px-border); }
.px-avatar img { width: 100%; height: 100%; object-fit: cover; }
.px-profile .name { color: var(--px-heading); font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-profile .type { font-size: .78rem; color: var(--px-muted); }
.px-nav { flex: 1; overflow-y: auto; padding: .5rem .75rem 1rem; }
.px-nav-title { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--px-muted); padding: 1rem .75rem .35rem; }
html[dir=rtl] .px-nav-title { letter-spacing: 0; text-transform: none; font-size: .78rem; }
.px-nav a { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-radius: var(--px-radius); color: var(--px-strong); font-weight: 500; font-size: .9rem; }
.px-nav a .ti { font-size: 1.25rem; color: var(--px-muted); }
.px-nav a:hover { background: var(--px-surface-3); color: var(--px-heading); }
.px-nav a.active { background: var(--px-primary-soft); color: var(--px-primary); }
.px-nav a.active .ti { color: var(--px-primary); }
.px-nav a .badge { margin-inline-start: auto; }
.px-sidebar-foot { padding: .75rem; border-top: 1px solid var(--px-border); }

.px-main { margin-inline-start: var(--px-sidebar); min-height: 100vh; display: flex; flex-direction: column; }
.px-topbar {
  position: sticky; top: 0; z-index: 1030; height: var(--px-topbar); background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--px-border); display: flex; align-items: center; gap: .75rem; padding-inline: 1.5rem;
}
.px-topbar .px-title { font-weight: 600; color: var(--px-heading); font-size: 1.05rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-topbar .px-tools { margin-inline-start: auto; display: flex; align-items: center; gap: .35rem; }
.px-tool { position: relative; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--px-strong); background: transparent; border: 0; }
.px-tool:hover { background: var(--px-surface-3); color: var(--px-heading); }
.px-tool .ti { font-size: 1.35rem; }
.px-dot { position: absolute; top: 4px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--px-danger); color: #fff; font-size: .68rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.px-lang { font-weight: 600; font-size: .85rem; border: 1px solid var(--px-border); border-radius: 2rem; padding: .3rem .8rem; color: var(--px-strong); }
.px-lang:hover { border-color: var(--px-primary); color: var(--px-primary); }
.px-content { padding: 1.5rem; flex: 1; width: 100%; max-width: 1400px; }
.px-footer { padding: 1rem 1.5rem 1.25rem; color: var(--px-muted); font-size: .8rem; }
.px-burger { display: none; }
.px-overlay { display: none; }
.px-bottom-nav { display: none; }

@media (max-width: 991.98px) {
  .px-sidebar { transform: translateX(-100%); box-shadow: var(--px-shadow-md); }
  html[dir=rtl] .px-sidebar { transform: translateX(100%); }
  body.px-menu-open .px-sidebar { transform: none; }
  body.px-menu-open .px-overlay { display: block; position: fixed; inset: 0; background: rgba(16, 24, 40, .45); z-index: 1035; }
  .px-main { margin-inline-start: 0; }
  .px-burger { display: inline-flex; }
  .px-topbar { padding-inline: .75rem; }
  .px-content { padding: 1rem 1rem calc(5.5rem + env(safe-area-inset-bottom)); }
  .px-footer { display: none; }
  .px-bottom-nav {
    display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 1030; background: #fff; border-top: 1px solid var(--px-border);
    padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
  }
  .px-bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .7rem; font-weight: 500; color: var(--px-muted); padding: .25rem 0; position: relative; }
  .px-bottom-nav a .ti { font-size: 1.4rem; }
  .px-bottom-nav a.active { color: var(--px-primary); }
  .px-bottom-nav .px-dot { top: 0; inset-inline-end: calc(50% - 22px); }
  .px-hide-mobile { display: none !important; }
}

/* ------------------------------------------------------------ page parts */
.px-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.px-page-head h1 { font-size: 1.4rem; margin: 0; }
.px-page-head .px-sub { color: var(--px-muted); margin: .2rem 0 0; font-size: .9rem; }
.px-page-head .px-actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.breadcrumb { --bs-breadcrumb-divider: '/'; margin-bottom: .35rem; font-size: .8rem; }
.breadcrumb a { color: var(--px-muted); }
.breadcrumb-item.active { color: var(--px-strong); }

.card { background: var(--px-surface); border: 1px solid var(--px-border); border-radius: var(--px-radius-lg); box-shadow: var(--px-shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--px-border); padding: 1rem 1.25rem; }
.card-header h5, .card-header h6 { margin: 0; }
.card-body { padding: 1.25rem; }
.px-card-link { color: inherit; display: block; }
.px-card-link:hover { color: inherit; border-color: var(--px-primary); }

.px-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.px-stat { background: var(--px-surface); border: 1px solid var(--px-border); border-radius: var(--px-radius-lg); padding: 1rem 1.1rem; display: flex; gap: .85rem; align-items: center; color: inherit; box-shadow: var(--px-shadow); transition: border-color .15s, transform .15s; }
a.px-stat:hover { border-color: var(--px-primary); color: inherit; transform: translateY(-1px); }
.px-stat .px-stat-icon { width: 44px; height: 44px; border-radius: .65rem; background: var(--px-primary-soft); color: var(--px-primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.px-stat .px-stat-icon .ti { font-size: 1.4rem; }
.px-stat .px-stat-value { font-size: 1.35rem; font-weight: 700; color: var(--px-heading); line-height: 1.15; }
.px-stat .px-stat-label { font-size: .8rem; color: var(--px-muted); }

.px-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; background: var(--px-surface-2); border: 1px solid var(--px-border); border-radius: var(--px-radius-lg); padding: .35rem; }
.px-strip a { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem; border-radius: var(--px-radius); color: var(--px-heading); font-weight: 500; font-size: .875rem; text-align: center; }
.px-strip a:hover { background: #fff; }
.px-strip .ti { color: var(--px-primary); font-size: 1.1rem; }

.px-banner { display: flex; gap: .75rem; padding: 1rem 1.1rem; border-radius: var(--px-radius-lg); border: 1px solid #fedf89; background: #fffaeb; color: #93370d; margin-bottom: 1.25rem; }
.px-banner .ti { font-size: 1.5rem; color: var(--px-warning); flex-shrink: 0; }
.px-banner strong { color: var(--px-warning); display: block; }

.px-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.px-search { position: relative; flex: 1 1 220px; max-width: 360px; }
.px-search .ti { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: .75rem; color: var(--px-muted); }
.px-search input { padding-inline-start: 2.25rem; }
.px-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.px-chip { border: 1px solid var(--px-border); background: #fff; border-radius: 2rem; padding: .3rem .85rem; font-size: .82rem; font-weight: 500; color: var(--px-strong); white-space: nowrap; }
.px-chip:hover { border-color: var(--px-primary); color: var(--px-primary); }
.px-chip.active { background: var(--px-primary); border-color: var(--px-primary); color: #fff; }

.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .75rem 1rem; border-bottom-color: var(--px-border); vertical-align: middle; }
.table thead th { font-size: .75rem; font-weight: 600; color: var(--px-muted); background: var(--px-surface-2); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
html[dir=rtl] .table thead th { text-transform: none; letter-spacing: 0; font-size: .8rem; }
.table tbody tr:hover { background: var(--px-surface-2); }
.px-table-wrap { overflow-x: auto; }
.px-actions-cell { white-space: nowrap; text-align: end; }

/* Lists rendered as cards on phones */
.px-list { display: grid; gap: .85rem; }
.px-item { background: var(--px-surface); border: 1px solid var(--px-border); border-radius: var(--px-radius-lg); padding: 1rem 1.1rem; box-shadow: var(--px-shadow); }
.px-item-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem 1rem; }
.px-item-title { font-weight: 600; color: var(--px-heading); margin: 0; }
.px-item-meta { color: var(--px-muted); font-size: .84rem; display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .25rem; }
.px-item-meta .ti { color: var(--px-muted); margin-inline-end: .2rem; }
.px-item-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }
.px-item-end { margin-inline-start: auto; text-align: end; }
.px-kv { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: .45rem 1rem; font-size: .9rem; }
.px-kv dt { color: var(--px-muted); font-weight: 500; }
.px-kv dd { margin: 0; color: var(--px-heading); }

.px-empty { text-align: center; padding: 3rem 1rem; color: var(--px-muted); }
.px-empty .px-empty-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--px-primary-soft); color: var(--px-primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: .85rem; }
.px-empty .px-empty-icon .ti { font-size: 1.9rem; }
.px-empty h6 { color: var(--px-heading); margin-bottom: .25rem; }
.px-no-results { display: none; }

.px-steps { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; margin-bottom: 1rem; }
.px-step { display: flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border-radius: 2rem; border: 1px solid var(--px-border); background: #fff; color: var(--px-strong); font-weight: 500; font-size: .85rem; white-space: nowrap; }
.px-step .num { width: 22px; height: 22px; border-radius: 50%; background: var(--px-surface-3); display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; }
.px-step.done .num { background: var(--px-success); color: #fff; }
.px-step.active { border-color: var(--px-primary); color: var(--px-primary); background: var(--px-primary-soft); }
.px-step.active .num { background: var(--px-primary); color: #fff; }

.px-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.px-timeline li { position: relative; padding-inline-start: 1.6rem; padding-bottom: 1rem; }
.px-timeline li::before { content: ''; position: absolute; inset-inline-start: 6px; top: 6px; bottom: -6px; width: 2px; background: var(--px-border); }
.px-timeline li:last-child::before { display: none; }
.px-timeline li::after { content: ''; position: absolute; inset-inline-start: 1px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--px-primary); box-shadow: 0 0 0 3px var(--px-primary-soft); }
.px-progress { display: flex; gap: 4px; }
.px-progress span { flex: 1; height: 6px; border-radius: 3px; background: var(--px-surface-3); }
.px-progress span.on { background: var(--px-primary); }

.px-thumb { width: 64px; height: 48px; border-radius: .4rem; object-fit: cover; background: var(--px-surface-3); flex-shrink: 0; }
.px-thumb-lg { width: 100%; aspect-ratio: 16/10; border-radius: var(--px-radius); object-fit: cover; background: var(--px-surface-3); }
.px-gallery { display: flex; flex-wrap: wrap; gap: .5rem; }
.px-gallery label { position: relative; }
.px-gallery img { width: 96px; height: 72px; object-fit: cover; border-radius: .4rem; border: 1px solid var(--px-border); }

/* Chat */
.px-chat { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - var(--px-topbar) - 7rem); min-height: 420px; overflow: hidden; padding: 0; }
.px-threads { border-inline-end: 1px solid var(--px-border); overflow-y: auto; }
.px-thread { display: flex; gap: .7rem; padding: .85rem 1rem; border-bottom: 1px solid var(--px-border); color: inherit; align-items: center; }
.px-thread:hover, .px-thread.active { background: var(--px-primary-soft); color: inherit; }
.px-thread .t-name { font-weight: 600; color: var(--px-heading); font-size: .9rem; }
.px-thread .t-last { font-size: .8rem; color: var(--px-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.px-conv { display: flex; flex-direction: column; min-width: 0; }
.px-conv-head { padding: .85rem 1rem; border-bottom: 1px solid var(--px-border); display: flex; align-items: center; gap: .7rem; }
.px-msgs { flex: 1; overflow-y: auto; padding: 1rem; background: var(--px-surface-2); display: flex; flex-direction: column; gap: .5rem; }
.px-msg { max-width: 75%; padding: .55rem .85rem; border-radius: 1rem; background: #fff; border: 1px solid var(--px-border); color: var(--px-heading); white-space: pre-wrap; word-break: break-word; align-self: flex-start; font-size: .9rem; }
.px-msg.me { align-self: flex-end; background: var(--px-primary); border-color: var(--px-primary); color: #fff; }
.px-msg.bot { background: var(--px-surface-3); }
.px-msg time { display: block; font-size: .68rem; opacity: .7; margin-top: .2rem; }
.px-msg img { max-width: 220px; border-radius: .5rem; display: block; margin-bottom: .25rem; }
.px-compose { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--px-border); background: #fff; }
@media (max-width: 767.98px) {
  .px-chat { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .px-chat.has-active .px-threads { display: none; }
  .px-chat:not(.has-active) .px-conv { display: none; }
  .px-msgs { min-height: 50vh; max-height: 60vh; }
}

/* Toasts */
.px-toasts { position: fixed; top: 1rem; inset-inline-end: 1rem; z-index: 2000; display: grid; gap: .5rem; width: min(380px, calc(100vw - 2rem)); }
.px-toast { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--px-radius-lg); background: #fff; border: 1px solid var(--px-border); box-shadow: var(--px-shadow-md); color: var(--px-heading); font-size: .9rem; animation: px-in .2s ease; }
.px-toast .ti { font-size: 1.3rem; flex-shrink: 0; }
.px-toast.success { border-inline-start: 4px solid var(--px-success); }
.px-toast.success .ti { color: var(--px-success); }
.px-toast.error { border-inline-start: 4px solid var(--px-danger); }
.px-toast.error .ti { color: var(--px-danger); }
.px-toast .px-toast-close { margin-inline-start: auto; background: none; border: 0; color: var(--px-muted); padding: 0; }
@keyframes px-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Auth */
.px-auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.px-auth-cover { background: radial-gradient(120% 90% at 0% 0%, #ff8a2a 0%, #ff6f00 40%, #f54900 100%); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.px-auth-cover h1 { color: #fff; font-size: 2.2rem; font-weight: 700; line-height: 1.2; }
.px-auth-cover p { color: rgba(255, 255, 255, .9); font-size: 1.05rem; }
.px-auth-cover .px-x { position: absolute; inset-inline-end: -80px; bottom: -60px; width: 420px; opacity: .12; }
.px-auth-cover ul { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .65rem; }
.px-auth-cover li { display: flex; align-items: center; gap: .6rem; font-weight: 500; }
.px-auth-cover li .ti { background: rgba(255, 255, 255, .2); border-radius: .5rem; padding: .35rem; font-size: 1.15rem; }
.px-auth-badge { display: inline-flex; background: #fff; border-radius: .75rem; padding: .55rem .9rem; }
.px-auth-badge img { height: 30px; }
.px-auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; background: #fff; }
.px-auth-box { width: 100%; max-width: 400px; }
.px-auth-types { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1.5rem; }
.px-auth-types span { font-size: .75rem; background: rgba(255, 255, 255, .18); border-radius: 1rem; padding: .2rem .65rem; }
@media (max-width: 991.98px) {
  .px-auth { grid-template-columns: 1fr; }
  .px-auth-cover { display: none; }
}

/* Misc */
.px-qr svg { width: 100%; height: auto; max-width: 240px; }
.px-switch { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-radius: var(--px-radius-lg); border: 1px solid var(--px-border); background: #fff; }
.px-switch.on { border-color: #abefc6; background: #ecfdf3; }
.px-switch .form-check-input { width: 3rem; height: 1.6rem; margin: 0; cursor: pointer; }
.px-switch.on .form-check-input { background-color: var(--px-success); border-color: var(--px-success); }
.px-bar { height: 8px; border-radius: 4px; background: var(--px-surface-3); overflow: hidden; }
.px-bar span { display: block; height: 100%; background: var(--px-primary); border-radius: 4px; }
.px-chart { display: flex; align-items: flex-end; gap: .6rem; height: 160px; padding-top: .5rem; }
.px-chart .col-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .3rem; min-width: 0; }
.px-chart .col-bar span { width: 100%; max-width: 42px; background: var(--px-primary); border-radius: .35rem .35rem 0 0; min-height: 2px; }
.px-chart .col-bar small { font-size: .7rem; color: var(--px-muted); white-space: nowrap; }
.px-chart .col-bar b { font-size: .72rem; color: var(--px-heading); font-weight: 600; }
.badge { font-weight: 500; }
.modal-content { border-radius: var(--px-radius-lg); border: 0; }
.dropdown-menu { border-radius: var(--px-radius-lg); border: 1px solid var(--px-border); box-shadow: var(--px-shadow-md); }
.cursor-pointer { cursor: pointer; }
.min-w-0 { min-width: 0; }