:root {

  --aj-teal-50:  #EFF9F6;
  --aj-teal-100: #D6F0E8;
  --aj-teal-200: #AFE2D4;
  --aj-teal-300: #7FCDBA;
  --aj-teal-400: #4EB29D;
  --aj-teal-500: #2F9683;
  --aj-teal-600: #1F7A6B;
  --aj-teal-700: #1A6156;
  --aj-teal-800: #175046;
  --aj-teal-900: #14413A;
  --aj-teal-950: #082621;

  --aj-sand-50:  #FDF7EC;
  --aj-sand-100: #FAEBCE;
  --aj-sand-200: #F3D79C;
  --aj-sand-300: #E8BC63;
  --aj-sand-400: #D9A03A;
  --aj-sand-500: #BF8422;
  --aj-sand-600: #9C6A18;
  --aj-sand-700: #7C5314;
  --aj-sand-800: #5F3F11;

  --aj-neutral-0:   #FFFFFF;
  --aj-neutral-25:  #FBFCFC;
  --aj-neutral-50:  #F6F8F8;
  --aj-neutral-100: #EDF1F1;
  --aj-neutral-200: #DCE3E3;
  --aj-neutral-300: #C2CDCD;
  --aj-neutral-400: #94A3A3;
  --aj-neutral-500: #6B7A7A;
  --aj-neutral-550: #657373;
  --aj-neutral-600: #526060;
  --aj-neutral-700: #3E4A4A;
  --aj-neutral-800: #2A3333;
  --aj-neutral-900: #1A2121;
  --aj-neutral-950: #0F1414;

  --aj-success-50:  #EDF7EE;  --aj-success-200: #A5D6A8;
  --aj-success-600: #2E7D32;  --aj-success-700: #1B5E20;
  --aj-success-900: #16301A;
  --aj-warning-50:  #FEF6EC;  --aj-warning-200: #F5C88F;
  --aj-warning-600: #B45309;  --aj-warning-700: #8A3F07;
  --aj-warning-900: #3A2A10;
  --aj-danger-50:   #FDEDED;  --aj-danger-200:  #F0AAAA;
  --aj-danger-600:  #C62828;  --aj-danger-700:  #A01B1B;
  --aj-danger-900:  #3A1414;
  --aj-info-50:     #EDF2FE;  --aj-info-200:    #A9BFF5;
  --aj-info-600:    #1D4ED8;  --aj-info-700:    #1743B0;
  --aj-info-900:    #14213F;

  --aj-color-bg:             var(--aj-neutral-50);
  --aj-color-bg-surface:     var(--aj-neutral-0);
  --aj-color-bg-surface-2:   var(--aj-neutral-50);
  --aj-color-bg-surface-3:   var(--aj-neutral-100);

  --aj-color-fg:             var(--aj-neutral-800);
  --aj-color-fg-muted:       var(--aj-neutral-600);
  --aj-color-fg-subtle:      var(--aj-neutral-550);

  --aj-color-border-subtle:  var(--aj-neutral-200);
  --aj-color-border-input:   var(--aj-neutral-500);
  --aj-color-border-strong:  var(--aj-neutral-600);

  --aj-color-accent:         var(--aj-teal-600);
  --aj-color-accent-hover:   var(--aj-teal-500);
  --aj-color-accent-active:  var(--aj-teal-800);
  --aj-color-accent-fg:      var(--aj-neutral-0);
  --aj-color-accent-text:    var(--aj-teal-700);
  --aj-color-accent-soft:    var(--aj-teal-50);
  --aj-color-accent-soft-bd: var(--aj-teal-200);
  --aj-color-accent-deep:    var(--aj-teal-900);

  --aj-color-gold:           var(--aj-sand-600);
  --aj-color-gold-mark:      var(--aj-sand-300);
  --aj-color-gold-text:      var(--aj-sand-700);
  --aj-color-gold-soft:      var(--aj-sand-50);
  --aj-color-gold-bd:        var(--aj-sand-200);

  --aj-color-success:        var(--aj-success-600);
  --aj-color-success-fg:     var(--aj-neutral-0);
  --aj-color-success-text:   var(--aj-success-700);
  --aj-color-success-soft:   var(--aj-success-50);
  --aj-color-success-bd:     var(--aj-success-200);

  --aj-color-warning:        var(--aj-warning-600);
  --aj-color-warning-fg:     var(--aj-neutral-0);
  --aj-color-warning-text:   var(--aj-warning-700);
  --aj-color-warning-soft:   var(--aj-warning-50);
  --aj-color-warning-bd:     var(--aj-warning-200);

  --aj-color-danger:         var(--aj-danger-600);
  --aj-color-danger-fg:      var(--aj-neutral-0);
  --aj-color-danger-text:    var(--aj-danger-700);
  --aj-color-danger-soft:    var(--aj-danger-50);
  --aj-color-danger-bd:      var(--aj-danger-200);

  --aj-color-info:           var(--aj-info-600);
  --aj-color-info-fg:        var(--aj-neutral-0);
  --aj-color-info-text:      var(--aj-info-700);
  --aj-color-info-soft:      var(--aj-info-50);
  --aj-color-info-bd:        var(--aj-info-200);

  --aj-shadow-1: 0 1px 2px rgb(15 20 20 / .05), 0 1px 3px rgb(15 20 20 / .07);
  --aj-shadow-2: 0 2px 4px -1px rgb(15 20 20 / .05), 0 8px 20px -6px rgb(15 20 20 / .10);
  --aj-shadow-3: 0 8px 16px -4px rgb(15 20 20 / .10), 0 16px 32px -8px rgb(15 20 20 / .14);
  --aj-shadow-top: 0 -1px 0 rgb(15 20 20 / .06), 0 -8px 24px rgb(15 20 20 / .05);

  --aj-space-1: 4px;   --aj-space-2: 8px;   --aj-space-3: 12px;
  --aj-space-4: 16px;  --aj-space-5: 20px;  --aj-space-6: 24px;
  --aj-space-8: 32px;  --aj-space-10: 40px; --aj-space-12: 48px;
  --aj-space-16: 64px;

  --aj-radius-sm: 6px;  --aj-radius-md: 10px; --aj-radius-lg: 14px;
  --aj-radius-xl: 20px; --aj-radius-full: 999px;

  --aj-text-xs:   0.750rem;
  --aj-text-sm:   0.875rem;
  --aj-text-base: 1.0625rem;
  --aj-text-md:   1.1875rem;
  --aj-text-lg:   1.375rem;
  --aj-text-xl:   1.625rem;
  --aj-text-2xl:  2rem;
  --aj-text-3xl:  2.5rem;

  --aj-leading-body: 1.75;
  --aj-leading-tight: 1.35;

  --aj-dur-fast: 120ms; --aj-dur-base: 200ms; --aj-dur-slow: 320ms;
  --aj-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --aj-ease-out:      cubic-bezier(0, 0, .2, 1);
  --aj-ease-in:       cubic-bezier(.4, 0, 1, 1);

  --aj-appbar-h: 56px;
  --aj-tabbar-h: 64px;
  --aj-tap: 44px;
  --aj-tap-row: 40px;

  --aj-font-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --aj-font-la: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
}

:root[data-theme="dark"] {
  --aj-color-bg:             var(--aj-neutral-950);
  --aj-color-bg-surface:     var(--aj-neutral-900);
  --aj-color-bg-surface-2:   #232C2C;
  --aj-color-bg-surface-3:   var(--aj-neutral-800);

  --aj-color-fg:             var(--aj-neutral-100);
  --aj-color-fg-muted:       var(--aj-neutral-400);
  --aj-color-fg-subtle:      #7E8E8E;

  --aj-color-border-subtle:  var(--aj-neutral-700);
  --aj-color-border-input:   var(--aj-neutral-400);
  --aj-color-border-strong:  var(--aj-neutral-300);

  --aj-color-accent:         var(--aj-teal-300);
  --aj-color-accent-hover:   var(--aj-teal-400);
  --aj-color-accent-active:  var(--aj-teal-200);
  --aj-color-accent-fg:      var(--aj-neutral-950);
  --aj-color-accent-text:    var(--aj-teal-300);
  --aj-color-accent-soft:    var(--aj-teal-900);
  --aj-color-accent-soft-bd: var(--aj-teal-600);
  --aj-color-accent-deep:    var(--aj-teal-900);

  --aj-color-gold:           var(--aj-sand-300);
  --aj-color-gold-text:      var(--aj-sand-300);
  --aj-color-gold-soft:      #33260E;
  --aj-color-gold-bd:        var(--aj-sand-700);

  --aj-color-success:        var(--aj-success-200);
  --aj-color-success-fg:     var(--aj-neutral-950);
  --aj-color-success-text:   var(--aj-success-200);
  --aj-color-success-soft:   var(--aj-success-900);
  --aj-color-success-bd:     var(--aj-success-600);

  --aj-color-warning:        var(--aj-warning-200);
  --aj-color-warning-fg:     var(--aj-neutral-950);
  --aj-color-warning-text:   var(--aj-warning-200);
  --aj-color-warning-soft:   var(--aj-warning-900);
  --aj-color-warning-bd:     var(--aj-warning-700);

  --aj-color-danger:         var(--aj-danger-200);
  --aj-color-danger-fg:      var(--aj-neutral-950);
  --aj-color-danger-text:    var(--aj-danger-200);
  --aj-color-danger-soft:    var(--aj-danger-900);
  --aj-color-danger-bd:      var(--aj-danger-600);

  --aj-color-info:           var(--aj-info-200);
  --aj-color-info-fg:        var(--aj-neutral-950);
  --aj-color-info-text:      var(--aj-info-200);
  --aj-color-info-soft:      var(--aj-info-900);
  --aj-color-info-bd:        var(--aj-info-600);

  --aj-shadow-1: 0 1px 2px rgb(0 0 0 / .40);
  --aj-shadow-2: 0 8px 24px -8px rgb(0 0 0 / .60);
  --aj-shadow-3: 0 16px 40px -12px rgb(0 0 0 / .70);
  --aj-shadow-top: 0 -1px 0 rgb(255 255 255 / .06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --aj-color-bg:             var(--aj-neutral-950);
  --aj-color-bg-surface:     var(--aj-neutral-900);
  --aj-color-bg-surface-2:   #232C2C;
  --aj-color-bg-surface-3:   var(--aj-neutral-800);

  --aj-color-fg:             var(--aj-neutral-100);
  --aj-color-fg-muted:       var(--aj-neutral-400);
  --aj-color-fg-subtle:      #7E8E8E;

  --aj-color-border-subtle:  var(--aj-neutral-700);
  --aj-color-border-input:   var(--aj-neutral-400);
  --aj-color-border-strong:  var(--aj-neutral-300);

  --aj-color-accent:         var(--aj-teal-300);
  --aj-color-accent-hover:   var(--aj-teal-400);
  --aj-color-accent-active:  var(--aj-teal-200);
  --aj-color-accent-fg:      var(--aj-neutral-950);
  --aj-color-accent-text:    var(--aj-teal-300);
  --aj-color-accent-soft:    var(--aj-teal-900);
  --aj-color-accent-soft-bd: var(--aj-teal-600);
  --aj-color-accent-deep:    var(--aj-teal-900);

  --aj-color-gold:           var(--aj-sand-300);
  --aj-color-gold-text:      var(--aj-sand-300);
  --aj-color-gold-soft:      #33260E;
  --aj-color-gold-bd:        var(--aj-sand-700);

  --aj-color-success:        var(--aj-success-200);
  --aj-color-success-fg:     var(--aj-neutral-950);
  --aj-color-success-text:   var(--aj-success-200);
  --aj-color-success-soft:   var(--aj-success-900);
  --aj-color-success-bd:     var(--aj-success-600);

  --aj-color-warning:        var(--aj-warning-200);
  --aj-color-warning-fg:     var(--aj-neutral-950);
  --aj-color-warning-text:   var(--aj-warning-200);
  --aj-color-warning-soft:   var(--aj-warning-900);
  --aj-color-warning-bd:     var(--aj-warning-700);

  --aj-color-danger:         var(--aj-danger-200);
  --aj-color-danger-fg:      var(--aj-neutral-950);
  --aj-color-danger-text:    var(--aj-danger-200);
  --aj-color-danger-soft:    var(--aj-danger-900);
  --aj-color-danger-bd:      var(--aj-danger-600);

  --aj-color-info:           var(--aj-info-200);
  --aj-color-info-fg:        var(--aj-neutral-950);
  --aj-color-info-text:      var(--aj-info-200);
  --aj-color-info-soft:      var(--aj-info-900);
  --aj-color-info-bd:        var(--aj-info-600);

  --aj-shadow-1: 0 1px 2px rgb(0 0 0 / .40);
  --aj-shadow-2: 0 8px 24px -8px rgb(0 0 0 / .60);
  --aj-shadow-3: 0 16px 40px -12px rgb(0 0 0 / .70);
  --aj-shadow-top: 0 -1px 0 rgb(255 255 255 / .06);
}
}

:root,
[dir="ltr"] { --aj-dir:  1; }
[dir="rtl"] { --aj-dir: -1; }

@font-face {
  font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("./fonts/plex-ar-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+061C;
}
@font-face {
  font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("./fonts/plex-ar-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+061C;
}
@font-face {
  font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("./fonts/plex-ar-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+061C;
}
@font-face {
  font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("./fonts/plex-ar-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+061C;
}

@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("./fonts/plex-la-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2212, U+20AC, U+20C0;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("./fonts/plex-la-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2212, U+20AC, U+20C0;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("./fonts/plex-la-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2212, U+20AC, U+20C0;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("./fonts/plex-la-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2212, U+20AC, U+20C0;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  scroll-padding-block-end: calc(var(--aj-tabbar-h) + var(--aj-space-4));
}

body {
  margin: 0;
  font-family: var(--aj-font-ar);
  font-size: var(--aj-text-base);
  line-height: var(--aj-leading-body);
  color: var(--aj-color-fg);
  background: var(--aj-color-bg);
  -webkit-font-smoothing: antialiased;

  font-synthesis-weight: none;
  font-synthesis-style: none;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--aj-color-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: clamp(1.75rem, 5vw, var(--aj-text-3xl)); line-height: 1.25; font-weight: 600; }
h2 { font-size: var(--aj-text-2xl); line-height: var(--aj-leading-tight); font-weight: 600; }
h3 { font-size: var(--aj-text-xl); line-height: 1.4;  font-weight: 600; }
h4 { font-size: var(--aj-text-lg); line-height: 1.45; font-weight: 600; }

:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--aj-color-bg), 0 0 0 5px var(--aj-color-accent);
  border-radius: var(--aj-radius-sm);
}
.aj-card:focus-visible,
.aj-choice:focus-visible,
.aj-row:focus-visible { border-radius: var(--aj-radius-lg); }

::selection { background: var(--aj-color-accent-soft); color: var(--aj-color-accent-text); }
::placeholder { color: var(--aj-color-fg-subtle); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  :root { --aj-dur-fast: 1ms; --aj-dur-base: 1ms; --aj-dur-slow: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

.aj-num { font-variant-numeric: tabular-nums lining-nums; }

.aj-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.aj-bdi { unicode-bidi: isolate; }

.aj-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.aj-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

[dir="rtl"] .aj-icon-flip { transform: scaleX(-1); }

.aj-money { direction: ltr; unicode-bidi: isolate; display: inline-flex; align-items: baseline; gap: .25em; font-variant-numeric: tabular-nums lining-nums; }
.aj-riyal { inline-size: .82em; block-size: .82em; align-self: center; }
.aj-riyal-text { display: none; }

.aj-stack { display: flex; flex-direction: column; }
.aj-cluster { display: flex; align-items: center; flex-wrap: wrap; }
.aj-grow { flex-grow: 1; min-width: 0; }
.aj-shrink-0 { flex-shrink: 0; }

@media print {

  a[href]::after, abbr[title]::after { content: none !important; }

  :root {
    --aj-color-bg: #fff; --aj-color-bg-surface: #fff; --aj-color-bg-surface-2: #fff;
    --aj-color-bg-surface-3: #fff;
    --aj-color-fg: #000; --aj-color-fg-muted: #333; --aj-color-fg-subtle: #444;
    --aj-color-border-subtle: #999; --aj-color-border-input: #666;
    --aj-shadow-1: none; --aj-shadow-2: none; --aj-shadow-3: none; --aj-shadow-top: none;
  }

  @page { size: A4; margin: 18mm 14mm; }

  body { font-size: 11pt; line-height: 1.6; background: #fff; }

  .aj-appbar, .aj-tabbar, .aj-sidenav, .aj-toast-region, .aj-skip,
  .aj-actions, .aj-no-print, button, .aj-btn, nav { display: none !important; }

  .aj-print-only, .aj-print-header { display: block !important; }

  thead { display: table-header-group; }
  tr, .aj-card, .aj-timeline li { break-inside: avoid; }
  h1, h2, h3, h4 { break-after: avoid; }

  .aj-riyal { display: none; }
  .aj-riyal-text { display: inline; }

  .aj-badge {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    border: 1pt solid currentColor;
  }
}

.aj-print-only, .aj-print-header { display: none; }

@media (forced-colors: active) {
  .aj-btn, .aj-card, .aj-choice, .aj-field-input { border: 1px solid ButtonBorder; }
  .aj-riyal { display: none; }
  .aj-riyal-text { display: inline; }
  :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; box-shadow: none; }
}

.aj-skip {
  position: absolute; inset-block-start: var(--aj-space-2);
  inset-inline-start: var(--aj-space-2); z-index: 100;
  padding: var(--aj-space-2) var(--aj-space-4);
  font-weight: 600; color: var(--aj-color-accent-fg);
  background: var(--aj-color-accent); border-radius: var(--aj-radius-md);
  transform: translateY(-200%);
}
.aj-skip:focus-visible { transform: none; }

.aj-appbar {
  position: sticky; inset-block-start: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--aj-space-3);
  min-block-size: var(--aj-appbar-h);
  padding: var(--aj-space-3) var(--aj-space-4);
  background: var(--aj-color-bg-surface);
  border-block-end: 1px solid var(--aj-color-border-subtle);
}
.aj-appbar[data-scrolled] { box-shadow: var(--aj-shadow-1); }
.aj-appbar__title { font-size: var(--aj-text-md); font-weight: 600; }

.aj-brand { display: flex; align-items: center; gap: var(--aj-space-3); flex-grow: 1; min-width: 0; }
.aj-brand__mark { inline-size: 34px; block-size: 34px; flex-shrink: 0; }
.aj-brand__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.aj-brand__name { font-size: 1rem; font-weight: 600; }
.aj-brand__sub  { font-size: var(--aj-text-sm); color: var(--aj-color-fg-subtle); }

.aj-iconbtn {
  display: flex; align-items: center; justify-content: center;
  inline-size: var(--aj-tap); block-size: var(--aj-tap); flex-shrink: 0;
  color: var(--aj-color-fg); border-radius: var(--aj-radius-md);
  transition: background var(--aj-dur-fast) var(--aj-ease-standard);
}
.aj-iconbtn:hover { background: var(--aj-color-bg-surface-3); }
.aj-iconbtn--row { inline-size: var(--aj-tap-row); block-size: var(--aj-tap-row); }
.aj-iconbtn--accent { color: var(--aj-color-accent-text); background: var(--aj-color-accent-soft); }
.aj-iconbtn--gold {
  color: var(--aj-color-gold-text); background: var(--aj-color-gold-soft);
  border: 1px solid var(--aj-color-gold-bd);
}
.aj-iconbtn--muted { color: var(--aj-color-fg-muted); background: var(--aj-color-bg-surface-3); }

.aj-iconbtn__badge {
  position: absolute; inset-block-start: 6px; inset-inline-start: 6px;
  display: flex; align-items: center; justify-content: center;
  min-inline-size: 19px; block-size: 19px; padding-inline: 5px;
  font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums lining-nums;
  color: #FFFFFF; background: var(--aj-danger-600);
  border: 2px solid var(--aj-color-bg-surface); border-radius: var(--aj-radius-full);
}
.aj-iconbtn--badged { position: relative; }

.aj-childswitch {
  display: flex; gap: var(--aj-space-1); padding: var(--aj-space-1);
  background: var(--aj-color-bg-surface-3); border-radius: var(--aj-radius-full);
}
.aj-childswitch__item {
  display: flex; align-items: center; gap: var(--aj-space-2);
  min-block-size: 36px; padding-inline: var(--aj-space-3);
  font-size: var(--aj-text-sm); font-weight: 500;
  color: var(--aj-color-fg-muted); border-radius: var(--aj-radius-full);
  transition: background var(--aj-dur-fast) var(--aj-ease-standard);
}
.aj-childswitch__item[aria-checked="true"] {
  color: var(--aj-color-accent-text); font-weight: 600;
  background: var(--aj-color-bg-surface); box-shadow: var(--aj-shadow-1);
}

.aj-tabbar {
  position: sticky; inset-block-end: 0; z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding-block: var(--aj-space-2) var(--aj-space-4);
  padding-block-end: max(var(--aj-space-4), env(safe-area-inset-bottom));
  padding-inline: var(--aj-space-1);
  background: var(--aj-color-bg-surface);
  border-block-start: 1px solid var(--aj-color-border-subtle);
  box-shadow: var(--aj-shadow-top);
}
.aj-tabbar__item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--aj-space-1);
  min-block-size: var(--aj-tap); padding: var(--aj-space-1);
  font-size: .72rem; color: var(--aj-color-fg-subtle);
}
.aj-tabbar__item[aria-current="page"] { color: var(--aj-color-accent-text); font-weight: 600; }
.aj-tabbar__dot {
  position: absolute; inset-block-start: 2px; inset-inline-start: calc(50% + 4px);
  inline-size: 9px; block-size: 9px; background: var(--aj-danger-600);
  border: 2px solid var(--aj-color-bg-surface); border-radius: var(--aj-radius-full);
}
@media (min-width: 905px) { .aj-tabbar { display: none; } }

.aj-sidenav {
  display: none; flex-direction: column; gap: var(--aj-space-2);
  inline-size: 250px; flex-shrink: 0;
  padding: var(--aj-space-6) var(--aj-space-4);
  background: var(--aj-color-bg-surface);
  border-inline-end: 1px solid var(--aj-color-border-subtle);
}
@media (min-width: 905px) { .aj-sidenav { display: flex; } }
.aj-sidenav__item {
  display: flex; align-items: center; gap: var(--aj-space-3);
  min-block-size: var(--aj-tap); padding: var(--aj-space-3) var(--aj-space-4);
  color: var(--aj-color-fg-muted); border-radius: var(--aj-radius-lg);
}
.aj-sidenav__item:hover { background: var(--aj-color-bg-surface-3); text-decoration: none; }
.aj-sidenav__item[aria-current="page"] {
  color: var(--aj-color-accent-text); font-weight: 600; background: var(--aj-color-accent-soft);
}
.aj-sidenav__count { margin-inline-start: auto; }
.aj-sidenav__sep { block-size: 1px; background: var(--aj-color-border-subtle); margin-block: var(--aj-space-1); }
.aj-sidenav__foot { margin-block-start: auto; }

.aj-pagehead { display: flex; flex-direction: column; gap: var(--aj-space-1); }
.aj-pagehead__sub { font-size: var(--aj-text-sm); color: var(--aj-color-fg-subtle); }

.aj-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--aj-space-2); font-size: var(--aj-text-sm); color: var(--aj-color-fg-subtle); }
.aj-breadcrumb li { list-style: none; display: flex; align-items: center; gap: var(--aj-space-2); }

.aj-breadcrumb li + li::before { content: ""; inline-size: 4px; block-size: 4px; background: currentColor; border-radius: 50%; opacity: .5; }

.aj-app { display: flex; flex-direction: column; min-block-size: 100dvh; background: var(--aj-color-bg); }
.aj-body { display: flex; flex-grow: 1; align-items: stretch; }
.aj-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--aj-space-5); padding: var(--aj-space-5) var(--aj-space-4) var(--aj-space-6); }
@media (min-width: 905px) { .aj-main { padding: var(--aj-space-6) var(--aj-space-8); } }

.aj-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--aj-space-2);
  min-block-size: var(--aj-tap); padding-inline: var(--aj-space-5);
  font-size: 1rem; font-weight: 600; line-height: 1.2;
  border-radius: var(--aj-radius-md); border: 1.5px solid transparent;
  transition: background var(--aj-dur-fast) var(--aj-ease-standard),
              border-color var(--aj-dur-fast) var(--aj-ease-standard),
              color var(--aj-dur-fast) var(--aj-ease-standard);
}
.aj-btn:hover { text-decoration: none; }
.aj-btn[disabled], .aj-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }

.aj-btn--primary   { color: var(--aj-color-accent-fg); background: var(--aj-color-accent); box-shadow: var(--aj-shadow-2); }
.aj-btn--primary:hover:not([disabled])  { background: var(--aj-color-accent-hover); }
.aj-btn--primary:active:not([disabled]) { background: var(--aj-color-accent-active); }

.aj-btn--secondary { color: var(--aj-color-accent-text); background: transparent; border-color: var(--aj-color-accent); }
.aj-btn--secondary:hover:not([disabled]) { background: var(--aj-color-accent-soft); }

.aj-btn--soft  { color: var(--aj-color-accent-text); background: var(--aj-color-accent-soft); }
.aj-btn--ghost { color: var(--aj-color-fg-muted); background: transparent; }
.aj-btn--ghost:hover:not([disabled]) { background: var(--aj-color-bg-surface-3); }

.aj-btn--warning { color: var(--aj-color-warning-text); background: transparent; border-color: var(--aj-color-warning); }
.aj-btn--warning:hover:not([disabled]) { background: var(--aj-color-warning-soft); }
.aj-btn--danger  { color: var(--aj-color-danger-fg); background: var(--aj-color-danger); }

.aj-btn--lg    { min-block-size: 56px; font-size: var(--aj-text-md); padding-inline: var(--aj-space-6); border-radius: var(--aj-radius-lg); }
.aj-btn--sm    { min-block-size: var(--aj-tap-row); font-size: var(--aj-text-sm); padding-inline: var(--aj-space-3); }
.aj-btn--block { display: flex; inline-size: 100%; }

.aj-btn[data-busy] { pointer-events: none; opacity: .8; }
.aj-btn[data-busy] .aj-btn__label { visibility: hidden; }
.aj-btn[data-busy]::after {
  content: ""; position: absolute;
  inline-size: 1.1em; block-size: 1.1em;
  border: 2px solid currentColor; border-block-start-color: transparent;
  border-radius: 50%; animation: aj-spin 700ms linear infinite;
}
.aj-btn { position: relative; }
@keyframes aj-spin { to { transform: rotate(360deg); } }

.aj-field { display: flex; flex-direction: column; gap: var(--aj-space-2); }
.aj-field__label { font-size: .94rem; font-weight: 500; color: var(--aj-color-fg); }
.aj-field__label .aj-req { color: var(--aj-color-danger-text); margin-inline-start: 2px; }

.aj-field__wrap { position: relative; display: flex; align-items: center; }
.aj-field__icon {
  position: absolute; inset-inline-start: var(--aj-space-4);
  display: flex; color: var(--aj-color-fg-subtle); pointer-events: none;
}
.aj-field__wrap:has(.aj-field__icon) .aj-field__input { padding-inline-start: var(--aj-space-12); }

.aj-field__input {
  inline-size: 100%; min-block-size: 56px;
  padding-inline: var(--aj-space-4); padding-block: var(--aj-space-2);
  color: var(--aj-color-fg); background: var(--aj-color-bg-surface);
  border: 1.5px solid var(--aj-color-border-input);
  border-radius: var(--aj-radius-lg); outline: none;
  transition: border-color var(--aj-dur-fast) var(--aj-ease-standard),
              box-shadow var(--aj-dur-fast) var(--aj-ease-standard);
}
.aj-field__input:hover { border-color: var(--aj-color-border-strong); }
.aj-field__input:focus-visible {
  border-color: var(--aj-color-accent);
  box-shadow: 0 0 0 3px var(--aj-color-accent-soft);
}
.aj-field__input[readonly], .aj-field__input[disabled] {
  color: var(--aj-color-fg-muted); background: var(--aj-color-bg-surface-2);
  border-color: var(--aj-color-border-subtle);
}
.aj-field__input[aria-invalid="true"] { border-color: var(--aj-color-danger); }
.aj-field__input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px var(--aj-color-danger-soft); }

.aj-field__input--id {
  direction: ltr; text-align: start;
  font-size: var(--aj-text-md); font-weight: 500; letter-spacing: 1.5px;
  font-variant-numeric: tabular-nums lining-nums;
}

.aj-field__help  { display: flex; align-items: flex-start; gap: var(--aj-space-2); font-size: var(--aj-text-sm); line-height: 1.55; color: var(--aj-color-fg-subtle); }
.aj-field__help svg { flex-shrink: 0; margin-block-start: 3px; }
.aj-field__error { display: flex; align-items: flex-start; gap: var(--aj-space-2); font-size: var(--aj-text-sm); line-height: 1.55; color: var(--aj-color-danger-text); font-weight: 500; }
.aj-field__error svg { flex-shrink: 0; margin-block-start: 3px; }

.aj-select {
  inline-size: 100%; min-block-size: 56px;
  padding-inline: var(--aj-space-4) var(--aj-space-10); padding-block: var(--aj-space-2);
  color: var(--aj-color-fg); background: var(--aj-color-bg-surface);
  border: 1.5px solid var(--aj-color-border-input); border-radius: var(--aj-radius-lg);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(var(--aj-space-5) - 3px) calc(50% + 2px), var(--aj-space-5) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
[dir="rtl"] .aj-select { background-position-x: calc(var(--aj-space-5) - 3px), var(--aj-space-5); }

.aj-otp { display: flex; gap: var(--aj-space-2); direction: ltr; justify-content: center; }
.aj-otp__box {
  inline-size: 48px; block-size: 58px;
  font-size: var(--aj-text-xl); font-weight: 600; text-align: center;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--aj-color-fg); background: var(--aj-color-bg-surface);
  border: 1.5px solid var(--aj-color-border-input);
  border-radius: var(--aj-radius-md); outline: none;
}
.aj-otp__box:focus-visible { border-color: var(--aj-color-accent); box-shadow: 0 0 0 3px var(--aj-color-accent-soft); }
.aj-otp__box[data-filled] { border-color: var(--aj-color-accent); }

.aj-choice {
  display: flex; align-items: center; gap: var(--aj-space-3);
  inline-size: 100%; padding: var(--aj-space-4);
  text-align: start; color: var(--aj-color-fg);
  background: var(--aj-color-bg-surface);
  border: 1.5px solid var(--aj-color-border-subtle);
  border-radius: var(--aj-radius-lg);
  transition: border-color var(--aj-dur-fast) var(--aj-ease-standard);
}
.aj-choice:hover { border-color: var(--aj-color-border-strong); }
.aj-choice[aria-checked="true"] {
  border-color: var(--aj-color-accent); border-width: 2px;
  box-shadow: 0 0 0 3px var(--aj-color-accent-soft);
}
.aj-choice__body { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; min-width: 0; }
.aj-choice__label { font-size: var(--aj-text-sm); color: var(--aj-color-fg-subtle); }
.aj-choice__value { font-size: var(--aj-text-md); font-weight: 600; letter-spacing: .6px; }
.aj-choice__tick {
  display: flex; align-items: center; justify-content: center;
  inline-size: 26px; block-size: 26px; flex-shrink: 0;
  border: 2px solid var(--aj-color-border-input); border-radius: var(--aj-radius-full);
}
.aj-choice[aria-checked="true"] .aj-choice__tick {
  color: var(--aj-color-accent-fg); background: var(--aj-color-accent);
  border-color: var(--aj-color-accent);
}
.aj-choice__tick svg { opacity: 0; }
.aj-choice[aria-checked="true"] .aj-choice__tick svg { opacity: 1; }

.aj-upload {
  display: flex; flex-direction: column; align-items: center; gap: var(--aj-space-3);
  padding: var(--aj-space-6) var(--aj-space-4); text-align: center;
  color: var(--aj-color-fg-muted); background: var(--aj-color-bg-surface-2);
  border: 1.5px dashed var(--aj-color-border-input);
  border-radius: var(--aj-radius-lg);
}
.aj-upload[data-dragover] { border-color: var(--aj-color-accent); background: var(--aj-color-accent-soft); }
.aj-upload__file {
  display: flex; align-items: center; gap: var(--aj-space-3);
  inline-size: 100%; padding: var(--aj-space-3);
  background: var(--aj-color-bg-surface);
  border: 1px solid var(--aj-color-border-subtle); border-radius: var(--aj-radius-md);
}
.aj-upload__name { font-size: var(--aj-text-sm); font-weight: 500; }
.aj-upload__size { font-size: var(--aj-text-sm); color: var(--aj-color-fg-subtle); }

.aj-choice:has(input:checked) {
  border-color: var(--aj-color-accent);
  background: var(--aj-color-accent-soft);
}

.aj-choice:has(input:focus-visible) {
  outline: var(--aj-focus-width) solid var(--aj-color-focus);
  outline-offset: 2px;
}

.aj-chip:has(input) {
  user-select: none;
  border: 1px solid var(--aj-color-border);
  transition: background var(--aj-motion-fast), border-color var(--aj-motion-fast);
}

.aj-chip:has(input:checked) {
  border-color: var(--aj-color-accent);
  background: var(--aj-color-accent-soft);
  color: var(--aj-color-accent-text);
  font-weight: 500;
}

.aj-chip:has(input:checked)::before {
  content: "¹3";
  margin-inline-end: 4px;
  font-weight: 700;
}

.aj-chip:has(input:focus-visible) {
  outline: var(--aj-focus-width) solid var(--aj-color-focus);
  outline-offset: 2px;
}

[data-aj-full] .aj-chip:not(:has(input:checked)) {
  opacity: .45;
}

.aj-card {
  container-type: inline-size;
  padding: var(--aj-space-5);
  background: var(--aj-color-bg-surface);
  border: 1px solid var(--aj-color-border-subtle);
  border-radius: var(--aj-radius-lg);
  box-shadow: var(--aj-shadow-1);
}
.aj-card--flush { padding: 0; overflow: hidden; }
.aj-card--outlined { box-shadow: none; }
.aj-card--soft { background: var(--aj-color-bg-surface-2); box-shadow: none; }

.aj-card--interactive { position: relative; transition: box-shadow var(--aj-dur-base) var(--aj-ease-standard); }
.aj-card--interactive:hover { box-shadow: var(--aj-shadow-2); }
.aj-card__stretch::after { content: ""; position: absolute; inset: 0; }

.aj-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--aj-space-3); }
.aj-card__title { font-size: var(--aj-text-lg); font-weight: 600; }

.aj-row {
  display: flex; align-items: center; gap: var(--aj-space-3);
  inline-size: 100%; padding: var(--aj-space-4);
  text-align: start; color: var(--aj-color-fg);
}
.aj-row--card {
  background: var(--aj-color-bg-surface);
  border: 1px solid var(--aj-color-border-subtle);
  border-radius: var(--aj-radius-lg); box-shadow: var(--aj-shadow-1);
}
.aj-row__lead { display: flex; flex-shrink: 0; color: var(--aj-color-fg-subtle); }
.aj-row__body { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; min-width: 0; }
.aj-row__label { font-size: var(--aj-text-sm); color: var(--aj-color-fg-subtle); }
.aj-row__value { font-size: 1rem; font-weight: 500; }
.aj-row__value--lg { font-size: var(--aj-text-md); }
.aj-row--warn { background: var(--aj-color-warning-soft); }
.aj-row--warn .aj-row__lead { color: var(--aj-color-warning); }
.aj-row--warn .aj-row__label,
.aj-row--warn .aj-row__value { color: var(--aj-color-warning-text); }

.aj-row__sep { block-size: 1px; background: var(--aj-color-border-subtle); margin-inline-start: 50px; }

.aj-stat {
  display: flex; flex-direction: column; gap: var(--aj-space-2);
  min-block-size: 96px; padding: var(--aj-space-5);
  background: var(--aj-color-bg-surface);
  border: 1px solid var(--aj-color-border-subtle);
  border-radius: var(--aj-radius-lg); box-shadow: var(--aj-shadow-1);
}
.aj-stat__label { font-size: var(--aj-text-sm); color: var(--aj-color-fg-subtle); }
.aj-stat__value { font-size: var(--aj-text-2xl); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; line-height: 1.2; }
.aj-stat__note  { font-size: var(--aj-text-sm); color: var(--aj-color-fg-muted); }
.aj-stat--hero  { background: var(--aj-color-accent-soft); border-color: var(--aj-color-accent-soft-bd); }
.aj-stat[data-unavailable] { opacity: .85; }
.aj-stat[data-unavailable] .aj-stat__note { color: var(--aj-color-fg-subtle); }
@container (max-width: 18rem) {
  .aj-stat__value { font-size: var(--aj-text-xl); }
}

.aj-ring { --aj-ring-pct: 0; inline-size: 40px; block-size: 40px; flex-shrink: 0; }
.aj-ring__track { fill: none; stroke: var(--aj-color-bg-surface-3); stroke-width: 3.5; }
.aj-ring__fill {
  fill: none; stroke: var(--aj-color-accent); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 100.5;
  stroke-dashoffset: calc(100.5 - (100.5 * var(--aj-ring-pct) / 100));
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset var(--aj-dur-slow) var(--aj-ease-out);
}
.aj-ring--done .aj-ring__fill { stroke: var(--aj-color-success); }
.aj-ring__text { font-size: 12px; font-weight: 600; fill: var(--aj-color-fg); }

.aj-avatar {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  inline-size: 46px; block-size: 46px; flex-shrink: 0;
  font-size: var(--aj-text-md); font-weight: 600;
  border-radius: var(--aj-radius-lg);
}
.aj-avatar--sm { inline-size: 32px; block-size: 32px; font-size: var(--aj-text-sm); border-radius: var(--aj-radius-md); }
.aj-avatar--teal  { color: #1A6156; background: #D6F0E8; }
.aj-avatar--sand  { color: #7C5314; background: #FAEBCE; }
.aj-avatar--blue  { color: #1743B0; background: #EDF2FE; }
.aj-avatar--green { color: #1B5E20; background: #EDF7EE; }
.aj-avatar__dot {
  position: absolute; inset-block-start: -3px; inset-inline-start: -3px;
  inline-size: 14px; block-size: 14px;
  background: var(--aj-color-warning);
  border: 2.5px solid var(--aj-color-bg-surface); border-radius: var(--aj-radius-full);
}

.aj-badge {
  display: inline-flex; align-items: center; gap: var(--aj-space-1);
  padding: 2px var(--aj-space-2);
  font-size: .72rem; font-weight: 600; line-height: 1.5;
  border-radius: var(--aj-radius-full); border: 1px solid transparent;
}
.aj-badge--neutral { color: var(--aj-color-fg-muted);      background: var(--aj-color-bg-surface-3); }
.aj-badge--accent  { color: var(--aj-color-accent-text);   background: var(--aj-color-accent-soft);  border-color: var(--aj-color-accent-soft-bd); }
.aj-badge--success { color: var(--aj-color-success-text);  background: var(--aj-color-success-soft); border-color: var(--aj-color-success-bd); }
.aj-badge--warning { color: var(--aj-color-warning-text);  background: var(--aj-color-warning-soft); border-color: var(--aj-color-warning-bd); }
.aj-badge--danger  { color: var(--aj-color-danger-text);   background: var(--aj-color-danger-soft);  border-color: var(--aj-color-danger-bd); }
.aj-badge--info    { color: var(--aj-color-info-text);     background: var(--aj-color-info-soft);    border-color: var(--aj-color-info-bd); }

.aj-chip {
  display: inline-flex; align-items: center;
  padding: 3px var(--aj-space-2);
  font-size: .76rem; font-weight: 500;
  color: var(--aj-color-fg-muted); background: var(--aj-color-bg-surface-3);
  border-radius: var(--aj-radius-full);
}
.aj-chips { display: flex; flex-wrap: wrap; gap: var(--aj-space-1); }

.aj-filters { display: flex; flex-wrap: wrap; gap: var(--aj-space-2); }
.aj-filter {
  min-block-size: var(--aj-tap-row); padding-inline: var(--aj-space-4);
  font-size: var(--aj-text-sm); font-weight: 500;
  color: var(--aj-color-fg-muted); background: var(--aj-color-bg-surface-3);
  border-radius: var(--aj-radius-full);
}
.aj-filter[aria-pressed="true"] { color: var(--aj-color-accent-fg); background: var(--aj-color-accent); }

.aj-table { inline-size: 100%; border-collapse: collapse; }
.aj-table caption { text-align: start; font-weight: 600; padding-block-end: var(--aj-space-3); }
.aj-table th { text-align: start; font-weight: 500; font-size: var(--aj-text-sm); color: var(--aj-color-fg-subtle); padding: var(--aj-space-3) var(--aj-space-4); }
.aj-table td { padding: var(--aj-space-3) var(--aj-space-4); border-block-start: 1px solid var(--aj-color-border-subtle); }
.aj-table__scroll { overflow-x: auto; }

@container (max-width: 40rem) {
  .aj-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .aj-table--stack tr { display: flex; flex-direction: column; gap: var(--aj-space-1); padding: var(--aj-space-4); border-block-start: 1px solid var(--aj-color-border-subtle); }
  .aj-table--stack td { display: flex; justify-content: space-between; gap: var(--aj-space-4); padding: 0; border: 0; }
  .aj-table--stack td::before { content: attr(data-label); color: var(--aj-color-fg-subtle); font-size: var(--aj-text-sm); }
}

.aj-alert {
  display: flex; align-items: flex-start; gap: var(--aj-space-3);
  padding: var(--aj-space-4);
  border: 1px solid transparent; border-radius: var(--aj-radius-lg);
}
.aj-alert__icon { flex-shrink: 0; margin-block-start: 2px; }
.aj-alert__body { display: flex; flex-direction: column; gap: var(--aj-space-1); }
.aj-alert__title { font-weight: 600; }
.aj-alert__text { font-size: .94rem; line-height: 1.65; text-wrap: pretty; }
.aj-alert__actions { display: flex; flex-wrap: wrap; gap: var(--aj-space-2); margin-block-start: var(--aj-space-2); }

.aj-alert--accent  { color: var(--aj-color-accent-text);  background: var(--aj-color-accent-soft);  border-color: var(--aj-color-accent-soft-bd); }
.aj-alert--success { color: var(--aj-color-success-text); background: var(--aj-color-success-soft); border-color: var(--aj-color-success-bd); }
.aj-alert--warning { color: var(--aj-color-warning-text); background: var(--aj-color-warning-soft); border-color: var(--aj-color-warning-bd); }
.aj-alert--danger  { color: var(--aj-color-danger-text);  background: var(--aj-color-danger-soft);  border-color: var(--aj-color-danger-bd); }
.aj-alert--info    { color: var(--aj-color-info-text);    background: var(--aj-color-info-soft);    border-color: var(--aj-color-info-bd); }
.aj-alert--gold    { color: var(--aj-color-gold-text);    background: var(--aj-color-gold-soft);    border-color: var(--aj-color-gold-bd); }
.aj-alert--plain   { color: var(--aj-color-fg-muted);     background: var(--aj-color-bg-surface);   border-color: var(--aj-color-border-subtle); }

.aj-actionrail { display: flex; flex-direction: column; gap: var(--aj-space-3); }

.aj-toast-region {
  position: fixed; z-index: 60;
  inset-inline: var(--aj-space-4);
  inset-block-end: calc(var(--aj-tabbar-h) + var(--aj-space-4));
  display: flex; flex-direction: column; gap: var(--aj-space-2);
  pointer-events: none;
}
@media (min-width: 905px) {
  .aj-toast-region { inset-inline-start: auto; inset-block-end: var(--aj-space-6); inline-size: 380px; }
}
.aj-toast {
  display: flex; align-items: center; gap: var(--aj-space-3);
  padding: var(--aj-space-3) var(--aj-space-4);
  background: var(--aj-color-bg-surface);
  border: 1px solid var(--aj-color-border-subtle);
  border-radius: var(--aj-radius-lg); box-shadow: var(--aj-shadow-3);
  pointer-events: auto;

  transform: translateX(calc(120% * var(--aj-dir)));
  animation: aj-toast-in var(--aj-dur-base) var(--aj-ease-out) forwards;
}
@keyframes aj-toast-in { to { transform: translateX(0); } }
.aj-toast--success { color: var(--aj-color-success-text); background: var(--aj-color-success-soft); border-color: var(--aj-color-success-bd); }
.aj-toast--danger  { color: var(--aj-color-danger-text);  background: var(--aj-color-danger-soft);  border-color: var(--aj-color-danger-bd); }
.aj-toast__text { flex-grow: 1; font-weight: 500; }

.aj-dialog {
  inline-size: min(440px, calc(100vw - 2 * var(--aj-space-4)));
  padding: var(--aj-space-6);
  color: var(--aj-color-fg); background: var(--aj-color-bg-surface);
  border: 1px solid var(--aj-color-border-subtle);
  border-radius: var(--aj-radius-xl); box-shadow: var(--aj-shadow-3);
}
.aj-dialog::backdrop { background: rgb(15 20 20 / .45); }
.aj-dialog__title { font-size: var(--aj-text-lg); font-weight: 600; margin-block-end: var(--aj-space-2); }
.aj-dialog__actions { display: flex; gap: var(--aj-space-2); margin-block-start: var(--aj-space-5); }
.aj-dialog__actions .aj-btn { flex-grow: 1; }

.aj-sheet {
  inline-size: 100%; max-inline-size: 100%;
  margin-block-start: auto; margin-inline: auto;
  border-start-start-radius: var(--aj-radius-xl);
  border-start-end-radius: var(--aj-radius-xl);
  border-end-start-radius: 0; border-end-end-radius: 0;
}

.aj-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--aj-space-3);
  padding: var(--aj-space-10) var(--aj-space-5); text-align: center;
  color: var(--aj-color-fg-muted);
}
.aj-empty__icon {
  display: flex; align-items: center; justify-content: center;
  inline-size: 68px; block-size: 68px;
  color: var(--aj-color-fg-subtle); background: var(--aj-color-bg-surface-3);
  border-radius: var(--aj-radius-xl);
}
.aj-empty__title { font-size: var(--aj-text-md); font-weight: 600; color: var(--aj-color-fg); }

.aj-skeleton {
  background: linear-gradient(90deg,
    var(--aj-color-bg-surface-3) 25%,
    var(--aj-color-bg-surface-2) 37%,
    var(--aj-color-bg-surface-3) 63%);
  background-size: 400% 100%;
  border-radius: var(--aj-radius-sm);
  animation: aj-shimmer 1.4s ease-in-out infinite;
}
@keyframes aj-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.aj-skeleton--text { block-size: 1em; }
.aj-skeleton--line { block-size: 12px; }
.aj-skeleton--avatar { inline-size: 46px; block-size: 46px; border-radius: var(--aj-radius-lg); }

.aj-stepper { display: flex; flex-direction: column; gap: var(--aj-space-2); }
.aj-stepper__track { display: flex; align-items: center; gap: var(--aj-space-3); }
.aj-stepper__dot {
  display: flex; align-items: center; justify-content: center;
  inline-size: 34px; block-size: 34px; flex-shrink: 0;
  font-weight: 600; font-variant-numeric: tabular-nums lining-nums;
  color: var(--aj-color-fg-muted); background: var(--aj-color-bg-surface-3);
  border-radius: var(--aj-radius-full);
}
.aj-stepper__dot--done { color: var(--aj-color-success-fg); background: var(--aj-color-success); }
.aj-stepper__dot--now  { color: var(--aj-color-accent-fg);  background: var(--aj-color-accent); box-shadow: 0 0 0 4px var(--aj-color-accent-soft); }
.aj-stepper__line { flex-grow: 1; block-size: 2.5px; background: var(--aj-color-bg-surface-3); border-radius: 2px; }
.aj-stepper__line--done { background: var(--aj-color-success); }
.aj-stepper__labels { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--aj-space-3); }
.aj-stepper__label { font-size: .78rem; line-height: 1.4; color: var(--aj-color-fg-subtle); }
.aj-stepper__label--done { color: var(--aj-color-success-text); font-weight: 500; }
.aj-stepper__label--now  { color: var(--aj-color-accent-text);  font-weight: 600; }
.aj-stepper__labels > :last-child { text-align: end; }

.aj-timeline { display: flex; flex-direction: column; }
.aj-timeline li { position: relative; display: flex; gap: var(--aj-space-3); padding-block-end: var(--aj-space-5); list-style: none; }
.aj-timeline li:last-child { padding-block-end: 0; }
.aj-timeline__dot {
  inline-size: 12px; block-size: 12px; flex-shrink: 0; margin-block-start: 6px;
  background: var(--aj-color-bg-surface-3); border-radius: var(--aj-radius-full);
}
.aj-timeline__dot--done { background: var(--aj-color-success); }
.aj-timeline__dot--now  { background: var(--aj-color-accent); box-shadow: 0 0 0 3px var(--aj-color-accent-soft); }
.aj-timeline li:not(:last-child)::before {
  content: ""; position: absolute;
  inset-inline-start: 5px; inset-block: 20px 0;
  inline-size: 2px; background: var(--aj-color-border-subtle);
}
.aj-timeline__body { display: flex; flex-direction: column; gap: 2px; }
.aj-timeline__title { font-weight: 500; }
.aj-timeline__meta { display: flex; justify-content: space-between; gap: var(--aj-space-3); font-size: var(--aj-text-sm); color: var(--aj-color-fg-subtle); }