:root {
  --brand-primary: #3d5a99;
  --brand-primary-rgb: 61, 90, 153;
  --brand-secondary: #6b7280;
  --brand-accent: #8a6d3b;
  --brand-surface: #ffffff;
  --brand-surface-alt: #f4f5f7;
  --brand-border: #e2e5eb;
  --brand-text: #1b2230;
  --brand-text-muted: #6c7484;
  --brand-success: #1e7f52;
  --brand-warning: #b8860b;
  --brand-danger: #b3261e;
  --brand-info: #2b6f8a;
  --brand-radius: .5rem;
  --brand-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --brand-font-display: var(--brand-font-body);
  --brand-font-size: .9375rem;
  --brand-heading-weight: 600;
  --brand-heading-tracking: normal;
  --brand-sidebar-width: 16rem;
  --brand-density: 1;
  --app-header-height: 3.5rem;
  --app-tabbar-height: 3.25rem;
}

:root,
[data-bs-theme=light] {
  color-scheme: light;
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: var(--brand-primary-rgb);
  --bs-secondary: var(--brand-secondary);
  --app-accent: var(--brand-accent);
  --app-surface: var(--brand-surface);
  --app-surface-alt: var(--brand-surface-alt);
  --bs-body-bg: var(--brand-surface);
  --bs-border-color: var(--brand-border);
  --bs-body-color: var(--brand-text);
  --bs-secondary-color: var(--brand-text-muted);
  --bs-emphasis-color: color-mix(in srgb, var(--brand-text) 80%, #000);
  --bs-success: var(--brand-success);
  --bs-warning: var(--brand-warning);
  --bs-danger: var(--brand-danger);
  --bs-info: var(--brand-info);
  --app-primary-hover: color-mix(in srgb, var(--bs-primary) 86%, #000);
  --app-primary-active: color-mix(in srgb, var(--bs-primary) 74%, #000);
  --app-primary-soft: color-mix(in srgb, var(--bs-primary) 10%, var(--app-surface));
  --app-primary-softer: color-mix(in srgb, var(--bs-primary) 5%, var(--app-surface));
  --app-primary-ink: color-mix(in srgb, var(--bs-primary) 78%, #000);
  --app-on-primary: #fff;
  --app-accent-hover: color-mix(in srgb, var(--app-accent) 86%, #000);
  --app-accent-active: color-mix(in srgb, var(--app-accent) 74%, #000);
  --app-on-accent: #fff;
  --app-surface-hover: color-mix(in srgb, var(--brand-text) 4%, var(--app-surface));
  --app-border-strong: color-mix(in srgb, var(--bs-border-color) 60%, var(--brand-text));
  --app-semantic-mix: #000;
  --app-semantic-bg-pct: 10%;
  --app-scrim: color-mix(in srgb, var(--app-surface) 82%, transparent);
}

[data-bs-theme=dark] {
  color-scheme: dark;
  --bs-primary: var(--brand-primary-dark, color-mix(in srgb, var(--brand-primary) 58%, #fff));
  --bs-primary-rgb: var(--brand-primary-rgb);
  --bs-secondary: color-mix(in srgb, var(--brand-secondary) 65%, #fff);
  --app-accent: color-mix(in srgb, var(--brand-accent) 62%, #fff);
  --app-surface: var(--brand-surface-dark, color-mix(in srgb, var(--brand-primary) 7%, #191c21));
  --app-surface-alt: var(--brand-surface-alt-dark, color-mix(in srgb, var(--brand-primary) 6%, #101318));
  --bs-body-bg: var(--app-surface);
  --bs-border-color: color-mix(in srgb, #fff 13%, var(--app-surface));
  --bs-body-color: #e6eaf0;
  --bs-secondary-color: #97a1b0;
  --bs-emphasis-color: #fff;
  --bs-success: color-mix(in srgb, var(--brand-success) 55%, #fff);
  --bs-warning: color-mix(in srgb, var(--brand-warning) 60%, #fff);
  --bs-danger: color-mix(in srgb, var(--brand-danger) 55%, #fff);
  --bs-info: color-mix(in srgb, var(--brand-info) 55%, #fff);
  --app-primary-hover: color-mix(in srgb, var(--bs-primary) 85%, #fff);
  --app-primary-active: color-mix(in srgb, var(--bs-primary) 72%, #fff);
  --app-primary-soft: color-mix(in srgb, var(--bs-primary) 20%, var(--app-surface));
  --app-primary-softer: color-mix(in srgb, var(--bs-primary) 10%, var(--app-surface));
  --app-primary-ink: color-mix(in srgb, var(--bs-primary) 88%, #fff);
  --app-on-primary: #0c0f13;
  --app-accent-hover: color-mix(in srgb, var(--app-accent) 85%, #fff);
  --app-accent-active: color-mix(in srgb, var(--app-accent) 72%, #fff);
  --app-on-accent: #0c0f13;
  --app-surface-hover: color-mix(in srgb, #fff 6%, var(--app-surface));
  --app-border-strong: color-mix(in srgb, #fff 30%, var(--app-surface));
  --app-semantic-mix: #fff;
  --app-semantic-bg-pct: 16%;
  --app-scrim: color-mix(in srgb, var(--app-surface) 78%, transparent);
}

:root {
  --bs-border-radius: var(--brand-radius);
  --bs-border-radius-sm: calc(var(--brand-radius) * .6);
  --bs-border-radius-lg: calc(var(--brand-radius) * 1.4);
  --bs-border-radius-xl: calc(var(--brand-radius) * 2);
  --bs-border-radius-pill: 50rem;
  --bs-body-font-family: var(--brand-font-body);
  --bs-body-font-size: var(--brand-font-size);
  --bs-body-line-height: 1.55;
  --app-font-display: var(--brand-font-display);
  --app-density: var(--brand-density);
  --app-sidebar-width: var(--brand-sidebar-width);
  --app-cell-y: calc(.6rem * var(--app-density));
  --app-cell-x: calc(.9rem * var(--app-density));
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--app-primary-hover);
  --bs-focus-ring-color: color-mix(in srgb, var(--bs-primary) 32%, transparent);
  --bs-focus-ring-width: .25rem;
}

body {
  background-color: var(--app-surface-alt);
  color: var(--bs-body-color);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--app-font-display);
  font-weight: var(--brand-heading-weight);
  letter-spacing: var(--brand-heading-tracking);
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-color: var(--app-on-primary);
  --bs-btn-hover-bg: var(--app-primary-hover);
  --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-hover-color: var(--app-on-primary);
  --bs-btn-active-bg: var(--app-primary-active);
  --bs-btn-active-border-color: var(--app-primary-active);
  --bs-btn-active-color: var(--app-on-primary);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--app-on-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--app-on-primary);
  --bs-btn-active-bg: var(--app-primary-active);
  --bs-btn-active-border-color: var(--app-primary-active);
  --bs-btn-active-color: var(--app-on-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-secondary {
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 86%, var(--app-semantic-mix));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 86%, var(--app-semantic-mix));
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 74%, var(--app-semantic-mix));
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 74%, var(--app-semantic-mix));
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

.btn-accent {
  --bs-btn-bg: var(--app-accent);
  --bs-btn-border-color: var(--app-accent);
  --bs-btn-color: var(--app-on-accent);
  --bs-btn-hover-bg: var(--app-accent-hover);
  --bs-btn-hover-border-color: var(--app-accent-hover);
  --bs-btn-hover-color: var(--app-on-accent);
  --bs-btn-active-bg: var(--app-accent-active);
  --bs-btn-active-border-color: var(--app-accent-active);
  --bs-btn-active-color: var(--app-on-accent);
}

.btn-surface {
  --bs-btn-bg: var(--app-surface);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--app-surface-hover);
  --bs-btn-hover-border-color: var(--app-border-strong);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--app-surface-hover);
  --bs-btn-active-border-color: var(--app-border-strong);
  --bs-btn-active-color: var(--bs-body-color);
}

.btn-link {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-hover-color: var(--app-primary-hover);
}

.form-control,
.form-select {
  background-color: var(--app-surface);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
  padding: var(--app-cell-y) var(--app-cell-x);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--app-surface);
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.form-control::placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}

.form-label {
  color: var(--bs-body-color);
  font-weight: 500;
}

.form-text {
  color: var(--bs-secondary-color);
}

.form-check-input {
  background-color: var(--app-surface);
  border-color: var(--app-border-strong);
}

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.input-group-text {
  background-color: var(--app-surface-alt);
  border-color: var(--bs-border-color);
  color: var(--bs-secondary-color);
}

.card {
  --bs-card-bg: var(--app-surface);
  --bs-card-border-color: var(--bs-border-color);
  --bs-card-color: var(--bs-body-color);
  --bs-card-cap-bg: var(--app-surface);
  --bs-card-spacer-y: calc(1.1rem * var(--app-density));
  --bs-card-spacer-x: calc(1.25rem * var(--app-density));
}

.card-header {
  border-bottom-color: var(--bs-border-color);
  font-weight: var(--brand-heading-weight);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--app-surface);
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: var(--app-primary-softer);
  --bs-dropdown-link-hover-color: var(--app-primary-ink);
  --bs-dropdown-link-active-bg: var(--bs-primary);
  --bs-dropdown-link-active-color: var(--app-on-primary);
  --bs-dropdown-item-padding-y: calc(.45rem * var(--app-density));
}

.modal-content {
  --bs-modal-bg: var(--app-surface);
  --bs-modal-border-color: var(--bs-border-color);
  --bs-modal-color: var(--bs-body-color);
}

.modal-header, .modal-footer {
  border-color: var(--bs-border-color);
}

.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
  --bs-offcanvas-bg: var(--app-surface);
  --bs-offcanvas-color: var(--bs-body-color);
  --bs-offcanvas-border-color: var(--bs-border-color);
  --bs-offcanvas-width: var(--app-sidebar-width);
}

.offcanvas-header {
  border-bottom: 1px solid var(--bs-border-color);
}

.toast {
  --bs-toast-bg: var(--app-surface);
  --bs-toast-border-color: var(--bs-border-color);
  --bs-toast-color: var(--bs-body-color);
  --bs-toast-header-bg: var(--app-surface);
  --bs-toast-header-color: var(--bs-secondary-color);
  --bs-toast-border-radius: var(--bs-border-radius);
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--bs-border-color);
  --bs-nav-tabs-link-active-color: var(--bs-primary);
  --bs-nav-tabs-link-active-bg: var(--app-surface);
  --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--app-surface);
  --bs-nav-link-color: var(--bs-secondary-color);
  --bs-nav-link-hover-color: var(--bs-primary);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--bs-primary);
  --bs-nav-pills-link-active-color: var(--app-on-primary);
  --bs-nav-pills-border-radius: var(--bs-border-radius-sm);
  --bs-nav-link-color: var(--bs-body-color);
  --bs-nav-link-hover-color: var(--bs-primary);
}

.navbar {
  --bs-navbar-color: var(--bs-secondary-color);
  --bs-navbar-hover-color: var(--bs-primary);
  --bs-navbar-active-color: var(--bs-primary);
  --bs-navbar-brand-color: var(--bs-body-color);
  --bs-navbar-brand-hover-color: var(--bs-body-color);
}

.breadcrumb {
  --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
}

.pagination {
  --bs-pagination-color: var(--bs-body-color);
  --bs-pagination-bg: var(--app-surface);
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-hover-bg: var(--app-primary-softer);
  --bs-pagination-hover-color: var(--app-primary-ink);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-active-color: var(--app-on-primary);
  --bs-pagination-focus-bg: var(--app-primary-softer);
  --bs-pagination-focus-color: var(--app-primary-ink);
}

.table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-hover-bg: var(--app-primary-softer);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-striped-bg: var(--app-surface-hover);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-active-bg: var(--app-primary-soft);
  --bs-table-cell-padding-y: var(--app-cell-y);
  --bs-table-cell-padding-x: var(--app-cell-x);
}

.table > thead {
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.table > thead th {
  background-color: var(--app-surface-alt);
  font-weight: 600;
}

.list-group {
  --bs-list-group-bg: var(--app-surface);
  --bs-list-group-color: var(--bs-body-color);
  --bs-list-group-border-color: var(--bs-border-color);
  --bs-list-group-action-hover-bg: var(--app-surface-hover);
  --bs-list-group-action-hover-color: var(--bs-body-color);
  --bs-list-group-active-bg: var(--bs-primary);
  --bs-list-group-active-border-color: var(--bs-primary);
  --bs-list-group-active-color: var(--app-on-primary);
  --bs-list-group-item-padding-y: calc(.7rem * var(--app-density));
}

.badge {
  --bs-badge-border-radius: var(--bs-border-radius-sm);
}

.text-bg-primary {
  background-color: var(--bs-primary) !important;
  color: var(--app-on-primary) !important;
}

.text-bg-accent {
  background-color: var(--app-accent) !important;
  color: var(--app-on-accent) !important;
}

.badge-soft-primary {
  background-color: var(--app-primary-soft);
  color: var(--app-primary-ink);
}

.badge-soft-success {
  background-color: color-mix(in srgb, var(--bs-success) var(--app-semantic-bg-pct), var(--app-surface));
  color: color-mix(in srgb, var(--bs-success) 80%, var(--app-semantic-mix));
}

.badge-soft-warning {
  background-color: color-mix(in srgb, var(--bs-warning) var(--app-semantic-bg-pct), var(--app-surface));
  color: color-mix(in srgb, var(--bs-warning) 80%, var(--app-semantic-mix));
}

.badge-soft-danger {
  background-color: color-mix(in srgb, var(--bs-danger) var(--app-semantic-bg-pct), var(--app-surface));
  color: color-mix(in srgb, var(--bs-danger) 80%, var(--app-semantic-mix));
}

.badge-soft-info {
  background-color: color-mix(in srgb, var(--bs-info) var(--app-semantic-bg-pct), var(--app-surface));
  color: color-mix(in srgb, var(--bs-info) 80%, var(--app-semantic-mix));
}

.alert-primary {
  --bs-alert-bg: var(--app-primary-soft);
  --bs-alert-color: var(--app-primary-ink);
  --bs-alert-border-color: color-mix(in srgb, var(--bs-primary) 25%, var(--app-surface));
  --bs-alert-link-color: var(--app-primary-ink);
}

.alert-success {
  --bs-alert-bg: color-mix(in srgb, var(--bs-success) var(--app-semantic-bg-pct), var(--app-surface));
  --bs-alert-color: color-mix(in srgb, var(--bs-success) 82%, var(--app-semantic-mix));
  --bs-alert-border-color: color-mix(in srgb, var(--bs-success) 28%, var(--app-surface));
  --bs-alert-link-color: color-mix(in srgb, var(--bs-success) 82%, var(--app-semantic-mix));
}

.alert-warning {
  --bs-alert-bg: color-mix(in srgb, var(--bs-warning) var(--app-semantic-bg-pct), var(--app-surface));
  --bs-alert-color: color-mix(in srgb, var(--bs-warning) 82%, var(--app-semantic-mix));
  --bs-alert-border-color: color-mix(in srgb, var(--bs-warning) 28%, var(--app-surface));
  --bs-alert-link-color: color-mix(in srgb, var(--bs-warning) 82%, var(--app-semantic-mix));
}

.alert-danger {
  --bs-alert-bg: color-mix(in srgb, var(--bs-danger) var(--app-semantic-bg-pct), var(--app-surface));
  --bs-alert-color: color-mix(in srgb, var(--bs-danger) 82%, var(--app-semantic-mix));
  --bs-alert-border-color: color-mix(in srgb, var(--bs-danger) 28%, var(--app-surface));
  --bs-alert-link-color: color-mix(in srgb, var(--bs-danger) 82%, var(--app-semantic-mix));
}

.alert-info {
  --bs-alert-bg: color-mix(in srgb, var(--bs-info) var(--app-semantic-bg-pct), var(--app-surface));
  --bs-alert-color: color-mix(in srgb, var(--bs-info) 82%, var(--app-semantic-mix));
  --bs-alert-border-color: color-mix(in srgb, var(--bs-info) 28%, var(--app-surface));
  --bs-alert-link-color: color-mix(in srgb, var(--bs-info) 82%, var(--app-semantic-mix));
}

.progress {
  --bs-progress-bg: var(--app-surface-alt);
  --bs-progress-bar-bg: var(--bs-primary);
  --bs-progress-border-radius: var(--bs-border-radius-pill);
}

.accordion {
  --bs-accordion-bg: var(--app-surface);
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-btn-color: var(--bs-body-color);
  --bs-accordion-active-bg: var(--app-primary-softer);
  --bs-accordion-active-color: var(--app-primary-ink);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.spinner-border, .spinner-grow {
  color: var(--bs-primary);
}

.app-shell {
  display: grid;
  grid-template-columns: var(--app-sidebar-width) 1fr;
  min-height: 100vh;
  min-height: 100svh;
}

@media (max-width: 991.98px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
}
.app-sidebar {
  background-color: var(--app-surface);
}

@media (min-width: 992px) {
  .app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--bs-border-color);
  }
}
.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-header {
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--app-header-height);
  padding: 0.5rem 1.25rem;
  background-color: var(--app-surface);
  border-bottom: 1px solid var(--bs-border-color);
}

[data-app-header=fixed] .app-header {
  position: sticky;
  top: 0;
  background-color: var(--app-scrim);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}

@supports not (backdrop-filter: blur(1px)) {
  [data-app-header=fixed] .app-header {
    background-color: var(--app-surface);
  }
}
.app-content {
  padding: 1.25rem;
  flex: 1 1 auto;
}

.app-nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: calc(0.55rem * var(--app-density)) 0.875rem;
  margin-bottom: 2px;
  border-radius: var(--bs-border-radius-sm);
  color: var(--bs-secondary-color);
  text-decoration: none;
  font-weight: 500;
}

.app-nav-link:hover {
  background-color: var(--app-surface-hover);
  color: var(--bs-body-color);
}

.app-nav-link.active {
  background-color: var(--app-primary-soft);
  color: var(--app-primary-ink);
}

.app-toast-stack {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (max-width: 991.98px) {
  .app-toast-stack {
    left: 1rem;
    bottom: calc(var(--app-tabbar-height) + 1rem + env(safe-area-inset-bottom, 0px));
  }
}
.app-tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  align-items: stretch;
  background-color: var(--app-scrim);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--bs-border-color);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@supports not (backdrop-filter: blur(1px)) {
  .app-tabbar {
    background-color: var(--app-surface);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .app-tabbar {
    background-color: var(--app-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (min-width: 992px) {
  .app-tabbar {
    display: none;
  }
}
.app-tabbar__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--app-tabbar-height);
  padding: 0.3rem 0.25rem;
  border: 0;
  background: none;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--bs-secondary-color);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.app-tabbar__item svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

.app-tabbar__item.active {
  color: var(--bs-primary);
}

.app-tabbar__item:active {
  opacity: 0.55;
}

.app-tabbar__item:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -3px;
}

.app-tabbar__badge {
  position: absolute;
  transform: translate(0.7rem, -0.55rem);
  min-width: 1.05rem;
  padding: 0 0.25rem;
  border-radius: 50rem;
  background-color: var(--bs-danger);
  color: #fff;
  font-size: 0.625rem;
  line-height: 1.05rem;
  text-align: center;
}

@media (max-width: 991.98px) {
  .app-shell:has(.app-tabbar) .app-content {
    padding-bottom: calc(var(--app-tabbar-height) + 1.25rem + env(safe-area-inset-bottom, 0px));
  }
}
:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}