/* =============================================================================
   YapiEx — Tasarım Sistemi Giriş Dosyası
   Çıktı: ../wwwroot/css/yapiex.css   (npm run css / dotnet build)

   KATMAN SIRASI ÖNEMLİDİR:
     1. tailwind base      — preflight
     2. ds-tokens          — token'lar + gövde/odak/scrollbar (preflight'ı ezer)
     3. tailwind components
     4. ds-components      — ds-* bileşen sınıfları
        app-chrome        — Blazor kabuğu (hata şeridi, güvenli alan)
     5. tailwind utilities — utility'ler ds-*'ın üzerine yazabilir (DESIGN.md)

   Prototipte tokens.css tek parçaydı ve CDN'den sonra yüklendiği için ds-*
   utility'leri eziyordu; DESIGN.md'nin açıkça istediği davranış bunun tersi
   ("tek seferlik ayarlamaları Tailwind utility'siyle üstüne yaz"). Bölme bu
   yüzden yapıldı.
============================================================================= */
*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}
::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com *//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Inter, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: JetBrains Mono, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}/* =============================================================================
   YapiEx — Tasarım Token'ları ve Taban Katman
   Kaynak: redesign_prototypes/assets/yapiex-tokens.css (1-206. satırlar)

   Bu dosya Tailwind'in `base` katmanından SONRA içe aktarılır (Design/yapiex.css),
   böylece preflight'ın sıfırladığı gövde/odak/scrollbar stillerini geri alır.
   ds-* bileşen sınıfları kardeş dosyada: layers/ds-components.css
============================================================================= */

/* ---------------------------------------------------------------------------
   1. TOKEN'LAR
--------------------------------------------------------------------------- */
:root {
    /* Eylem — Mürekkep İndigosu */
    --ds-action: #4f46e5;
    --ds-action-hover: #6366f1;
    --ds-action-tint: #eef2ff;
    --ds-action-ink: #4338ca;

    /* Yüzeyler — Masa / Kağıt / Oyuk */
    --ds-page: #f8fafc;
    --ds-surface: #ffffff;
    --ds-inset: #f1f5f9;
    --ds-hairline: #e2e8f0;

    /* Mürekkep */
    --ds-ink: #0f172a;         /* başlık */
    --ds-ink-body: #1e293b;    /* gövde */
    --ds-ink-muted: #64748b;   /* ikincil metin — kağıt üzerinde 4.8:1 */
    --ds-ink-muted-inset: #475569; /* oyuk zeminde ikincil metin: #64748b orada 4.34'e düşer */
    --ds-ink-faint: #94a3b8;   /* ikon, ayraç, devre dışı — metin için kullanma */

    /* Durum sözlüğü */
    --ds-ok: #047857;
    --ds-ok-tint: #ecfdf5;
    --ds-ok-line: #a7f3d0;
    --ds-risk: #b45309;
    --ds-risk-tint: #fffbeb;
    --ds-risk-line: #fde68a;
    --ds-alert: #be123c;
    --ds-alert-tint: #fff1f2;
    --ds-alert-line: #fecdd3;
    /* Kategori paleti — tür ayrımı, durum değil (DESIGN.md · Kategori Paleti).
       Yeşil, amber ve gül burada yoktur. Metin 10px/800; zemin üstünde en
       düşük 5.02:1 (mor). */
    --ds-cat-indigo-bg: #eef2ff;
    --ds-cat-indigo-ink: #4338ca;
    --ds-cat-violet-bg: #faf5ff;
    --ds-cat-violet-ink: #9333ea;
    --ds-cat-cyan-bg: #ecfeff;
    --ds-cat-cyan-ink: #0e7490;
    --ds-cat-teal-bg: #f0fdfa;
    --ds-cat-teal-ink: #0f766e;
    --ds-cat-fuchsia-bg: #fdf4ff;
    --ds-cat-fuchsia-ink: #a21caf;

    /* Biçim */
    --ds-r-chip: 8px;
    --ds-r-control: 12px;
    --ds-r-box: 16px;
    --ds-r-panel: 24px;
    --ds-r-pill: 9999px;

    /* Gölge */
    --ds-shadow-resting: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --ds-shadow-raised: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --ds-shadow-action: 0 4px 6px -1px rgb(79 70 229 / 0.2);
    --ds-shadow-overlay: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    /* Hareket */
    --ds-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ds-t-state: 200ms;
    --ds-t-card: 250ms;
    --ds-t-progress: 600ms;
}

.dark {
    /* Eylem rengi iki temada da aynıdır: ds-* katmanı ile Tailwind `brand-600`
       utility'si birbirinden ayrılırsa ekranda iki farklı indigo belirir. */
    --ds-action: #4f46e5;
    --ds-action-hover: #6366f1;
    --ds-action-tint: #1e1b4b;
    --ds-action-ink: #a5b4fc;

    --ds-page: #020617;
    --ds-surface: #0f172a;
    --ds-inset: #1e293b;
    --ds-hairline: #1e293b;

    --ds-ink: #f8fafc;
    --ds-ink-body: #e2e8f0;
    --ds-ink-muted: #94a3b8;
    --ds-ink-muted-inset: #94a3b8; /* koyu temada oyuk zemin zaten 5.7:1 veriyor */
    --ds-ink-faint: #64748b;

    --ds-ok: #6ee7b7;
    --ds-ok-tint: #022c22;
    --ds-ok-line: #065f46;
    --ds-risk: #fcd34d;
    --ds-risk-tint: #451a03;
    --ds-risk-line: #92400e;
    --ds-alert: #fda4af;
    --ds-alert-tint: #4c0519;
    --ds-alert-line: #9f1239;

    /* Kategori zemini: 950 tonu gece kağıdının üstünde yarı saydam (DESIGN.md);
       metin 300 tonu, en düşük 8.52:1 (indigo). */
    --ds-cat-indigo-bg: #16193a;
    --ds-cat-indigo-ink: #a5b4fc;
    --ds-cat-violet-bg: #250f47;
    --ds-cat-violet-ink: #d8b4fe;
    --ds-cat-cyan-bg: #0b2537;
    --ds-cat-cyan-ink: #67e8f9;
    --ds-cat-teal-bg: #09232c;
    --ds-cat-teal-ink: #5eead4;
    --ds-cat-fuchsia-bg: #2c0d3c;
    --ds-cat-fuchsia-ink: #f0abfc;

    --ds-shadow-resting: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --ds-shadow-raised: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
    --ds-shadow-action: 0 4px 6px -1px rgb(99 102 241 / 0.35);
    --ds-shadow-overlay: 0 25px 50px -12px rgb(0 0 0 / 0.7);
}

/* ---------------------------------------------------------------------------
   2. TABAN KATMAN
   Tarayıcının bizim çizmediğimiz yüzeyleri de sisteme ait olmalı.
--------------------------------------------------------------------------- */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-moz-selection {
    background: var(--ds-action);
    color: #ffffff;
}

::selection {
    background: var(--ds-action);
    color: #ffffff;
}

input,
textarea,
[contenteditable] {
    caret-color: var(--ds-action);
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: var(--ds-r-pill);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--ds-ink-faint);
}
.dark ::-webkit-scrollbar-thumb {
    background: #334155;
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}
* {
    scrollbar-color: #cbd5e1 transparent;
}
.dark * {
    scrollbar-color: #334155 transparent;
}

/* Klavye odağı her zaman görünür ve her zaman eylem renginde */
:focus-visible {
    outline: 2px solid var(--ds-action);
    outline-offset: 2px;
}

/* Rakamlar hizalanır — tablo ve para sütunlarının okunabilirliği buna bağlı */
.font-mono,
.ds-mono,
[class*='font-mono'] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Bağlantı alt çizgisi harflerin altına yapışmaz */
a {
    text-underline-offset: 3px;
}

/* Erişilebilirlik düzeltmesi — ölçümle bulundu.
   Sayfalardaki ikincil metin `text-slate-400` (#94a3b8) ile yazılmış; beyaz kart
   üstünde kontrast 2.56:1 çıkıyor (WCAG tabanı 4.5:1) ve bu metinler çoğunlukla
   9-10 piksel. Sahada güneş altında okunmuyor. Açık temada erişilebilir tona
   çekiyoruz; koyu temada aynı ton 6.9:1 verdiği için dokunmuyoruz.
   Kasıtlı olarak daha soluk bir öğe gerekiyorsa .ds-ink-faint kullanılır. */
html:not(.dark) .text-slate-400 {
    color: var(--ds-ink-muted);
}
.ds-ink-faint {
    color: var(--ds-ink-faint) !important;
}

/* ---------------------------------------------------------------------------
   3. PAYLAŞILAN YARDIMCILAR
--------------------------------------------------------------------------- */
.ui-transition {
    transition: all var(--ds-t-state) var(--ds-ease);
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* İnce kaydırma çubuğu — yatay kayan tablolar ve uzun modal gövdeleri.
   Kaynak: ruhsat_detay_*.html · .custom-scrollbar. Firefox için
   scrollbar-width / scrollbar-color, diğerleri için ::-webkit-scrollbar. */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}
.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 9999px;
}

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

.container {
    width: 100%;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}

/* =============================================================================
   YapiEx — ds-* Bileşen Katmanı
   Kaynak: redesign_prototypes/assets/yapiex-tokens.css (207-792. satırlar)

   Tailwind'in `components` ve `utilities` katmanları arasına yerleşir
   (Design/yapiex.css), böylece DESIGN.md'nin dediği gibi tek seferlik
   ayarlamalar Tailwind utility'siyle bu sınıfların üzerine yazılabilir.

   Her sınıfın Blazor karşılığı: Components/Ds/*.razor
============================================================================= */

/* ---------------------------------------------------------------------------
   4. ds-* BİLEŞEN KATMANI
--------------------------------------------------------------------------- */

/* --- Buton ---------------------------------------------------------------- */
.ds-btn-primary,
.ds-btn-secondary,
.ds-btn-ghost,
.ds-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 20px;
    padding: 10px 16px;
    border: none;
    border-radius: var(--ds-r-control);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--ds-t-state) var(--ds-ease),
                box-shadow var(--ds-t-state) var(--ds-ease),
                color var(--ds-t-state) var(--ds-ease);
}
.ds-btn-primary > svg,
.ds-btn-secondary > svg,
.ds-btn-ghost > svg,
.ds-btn-danger > svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.ds-btn-primary {
    background: var(--ds-action);
    color: #ffffff;
    box-shadow: var(--ds-shadow-action);
}
.ds-btn-primary:hover {
    background: var(--ds-action-hover);
    box-shadow: var(--ds-shadow-raised);
}
.ds-btn-primary:active {
    transform: translateY(1px);
}

.ds-btn-secondary {
    background: var(--ds-inset);
    color: var(--ds-ink-body);
}
.ds-btn-secondary:hover {
    background: var(--ds-hairline);
    color: var(--ds-ink);
}

.ds-btn-ghost {
    background: transparent;
    color: var(--ds-ink-muted);
    padding: 8px 12px;
}
.ds-btn-ghost:hover {
    background: var(--ds-inset);
    color: var(--ds-ink);
}

.ds-btn-danger {
    background: var(--ds-alert);
    color: #ffffff;
}
.dark .ds-btn-danger {
    color: #4c0519;
}
.ds-btn-danger:hover {
    box-shadow: var(--ds-shadow-raised);
}

.ds-btn-primary[disabled],
.ds-btn-secondary[disabled],
.ds-btn-ghost[disabled],
.ds-btn-danger[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* Satır içi ikon düğmesi (tablo eylemleri) */
.ds-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--ds-r-chip);
    background: var(--ds-inset);
    color: var(--ds-ink-muted);
    cursor: pointer;
    transition: background var(--ds-t-state) var(--ds-ease),
                color var(--ds-t-state) var(--ds-ease);
}
.ds-icon-btn > svg {
    width: 14px;
    height: 14px;
}
.ds-icon-btn:hover {
    background: var(--ds-hairline);
    color: var(--ds-ink);
}
.ds-icon-btn-danger:hover {
    background: var(--ds-alert-tint);
    color: var(--ds-alert);
}
/* Pasif ikon düğmesi: .ds-btn-*[disabled] ile aynı dil. Neden pasif olduğu
   düğmenin adında (title / aria-label) yazar; hover rengi değişmez. */
.ds-icon-btn[disabled],
.ds-icon-btn[disabled]:hover {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--ds-inset);
    color: var(--ds-ink-muted);
}
/* Kartın üzerine gelince beliren düğme (fotoğraf kaldır). Yalnız fareli
   cihazda gizlenir: dokunmatikte üzerine gelme yok, düğme hep görünür. */
@media (hover: hover) {
    .group:not(:hover) .ds-hover-reveal:not(:focus-visible) {
        opacity: 0;
    }
}

/* Uyarı panelinden gidilen satır kısa süre amber vurgulanır (yapiex.scrollToElement). */
.ds-flash {
    animation: ds-flash 1.6s var(--ds-ease);
}
@keyframes ds-flash {
    0%, 40% { background: var(--ds-risk-tint); }
    100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .ds-flash {
        animation: none;
        outline: 2px solid var(--ds-risk);
    }
}

/* --- Form alanı ----------------------------------------------------------- */
.ds-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ds-field-label {
    font-size: 14px;
    font-weight: 800;
    line-height: 20px;
    color: var(--ds-ink-body);
}
.ds-field-input,
.ds-field-select,
.ds-field-textarea {
    width: 100%;
    background: var(--ds-inset);
    color: var(--ds-ink);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    padding: 10px 14px;
    border: 1px solid var(--ds-hairline);
    border-radius: var(--ds-r-control);
    outline: none;
    transition: background var(--ds-t-state) var(--ds-ease),
                box-shadow var(--ds-t-state) var(--ds-ease);
}
.ds-field-textarea {
    font-weight: 500;
    resize: vertical;
    min-height: 72px;
}
.ds-field-input::-moz-placeholder, .ds-field-textarea::-moz-placeholder {
    color: var(--ds-ink-muted);
    font-weight: 500;
}
.ds-field-input::placeholder,
.ds-field-textarea::placeholder {
    color: var(--ds-ink-muted);
    font-weight: 500;
}
.ds-field-input:hover,
.ds-field-select:hover,
.ds-field-textarea:hover {
    background: var(--ds-hairline);
}
.ds-field-input:focus,
.ds-field-select:focus,
.ds-field-textarea:focus {
    background: var(--ds-surface);
    box-shadow: 0 0 0 2px var(--ds-action);
    outline: none;
}
.ds-field-error .ds-field-input,
.ds-field-error .ds-field-select,
.ds-field-error .ds-field-textarea {
    border-color: var(--ds-alert);
}
.ds-field-error .ds-field-input:focus {
    box-shadow: 0 0 0 2px var(--ds-alert);
}
.ds-field-message {
    font-size: 10px;
    font-weight: 800;
    line-height: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ds-alert);
}

/* Yoğun alan — modal formları (12px yazı, 10px iç boşluk). ds-field-input'un
   küçük hâli: aynı zemin, çizgi ve odak halkası; yazı kalınlığı ve rengi
   alanın kendi utility'sinden gelir (font-bold, font-mono…). */
.ds-field-compact {
    width: 100%;
    padding: 10px;
    background: var(--ds-inset);
    border: 1px solid var(--ds-hairline);
    border-radius: var(--ds-r-control);
    outline: none;
    transition: background var(--ds-t-state) var(--ds-ease),
                box-shadow var(--ds-t-state) var(--ds-ease);
}
.ds-field-compact:focus {
    background: var(--ds-surface);
    box-shadow: 0 0 0 2px var(--ds-action);
    outline: none;
}
.ds-field-compact:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Ön denetimde hatalı bulunan alan (FormError FieldId, yapiex.js markInvalid):
   kırmızı çerçeve, odakta da kalır ki kullanıcı neyi düzelteceğini görsün;
   mesaj alanın hemen altında. Kullanıcı yazmaya başlayınca kalkar. */
.ds-field-input[aria-invalid="true"],
.ds-field-select[aria-invalid="true"],
.ds-field-textarea[aria-invalid="true"],
.ds-field-compact[aria-invalid="true"],
.ds-field-input[aria-invalid="true"]:focus,
.ds-field-select[aria-invalid="true"]:focus,
.ds-field-textarea[aria-invalid="true"]:focus,
.ds-field-compact[aria-invalid="true"]:focus {
    background: var(--ds-alert-tint);
    box-shadow: 0 0 0 2px var(--ds-alert);
}
.ds-field-error-text {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-alert);
}

/* --- Panel ---------------------------------------------------------------- */
.ds-panel {
    background: var(--ds-surface);
    border: 1px solid var(--ds-hairline);
    border-radius: var(--ds-r-panel);
    padding: 24px;
    box-shadow: var(--ds-shadow-resting);
}
.ds-panel-lg {
    padding: 32px;
}
.ds-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--ds-hairline);
    padding-bottom: 16px;
    margin-bottom: 16px;
}
/* Telefonda sığmayan eylemler başlığın altına iner; başlık 0 tabandan büyüdüğü
   için sığan eylemler yanında kalır. Önceden eylemler sayfayı yana taşırıyordu. */
@media (max-width: 639px) {
    .ds-panel-head { flex-wrap: wrap; }
    .ds-panel-head > :first-child { flex: 1 1 0; }
    .ds-panel-actions { max-width: 100%; }
}
.ds-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 24px;
    color: var(--ds-ink);
}
.ds-panel-title > svg {
    width: 18px;
    height: 18px;
    color: var(--ds-action);
    flex: none;
}
.ds-panel-sub {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: var(--ds-ink-muted);
}

/* --- KPI kutusu ----------------------------------------------------------- */
.ds-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-hairline);
    border-radius: var(--ds-r-panel);
    padding: 20px;
    box-shadow: var(--ds-shadow-resting);
}
.ds-stat-label {
    font-size: 10px;
    font-weight: 800;
    line-height: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ds-ink-muted);
}
.ds-stat-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 20px;
    font-weight: 900;
    line-height: 28px;
    color: var(--ds-ink);
    font-variant-numeric: tabular-nums;
}
.ds-stat-note {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: var(--ds-ink-muted);
}
.ds-stat-ok    { background: var(--ds-ok-tint);    border-color: var(--ds-ok-line); }
.ds-stat-risk  { background: var(--ds-risk-tint);  border-color: var(--ds-risk-line); }
.ds-stat-alert { background: var(--ds-alert-tint); border-color: var(--ds-alert-line); }
.ds-stat-ok    .ds-stat-label, .ds-stat-ok    .ds-stat-value, .ds-stat-ok    .ds-stat-note { color: var(--ds-ok); }
.ds-stat-risk  .ds-stat-label, .ds-stat-risk  .ds-stat-value, .ds-stat-risk  .ds-stat-note { color: var(--ds-risk); }
.ds-stat-alert .ds-stat-label, .ds-stat-alert .ds-stat-value, .ds-stat-alert .ds-stat-note { color: var(--ds-alert); }

/* --- Durum rozeti --------------------------------------------------------- */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border: 1px solid transparent;
    border-radius: var(--ds-r-pill);
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ds-badge-ok    { background: var(--ds-ok-tint);    color: var(--ds-ok); }
.ds-badge-risk  { background: var(--ds-risk-tint);  color: var(--ds-risk); }
.ds-badge-alert { background: var(--ds-alert-tint); color: var(--ds-alert); }
.ds-badge-idle  { background: var(--ds-inset);      color: var(--ds-ink-muted-inset); }
.ds-badge-solid { background: var(--ds-alert);      color: #ffffff; }
.dark .ds-badge-solid { color: #4c0519; }
.ds-badge-ghost { background: transparent; color: var(--ds-ink-muted); border-color: var(--ds-hairline); }

/* Katı (solid) önem rozetleri — önem derecesi için */
/* Açık temada --ds-risk koyu kehribar (#b45309); üzerine koyu metin 2.98
   kontrast veriyordu. Beyaz 5.02'ye çıkarıyor. Koyu temada zemin açık sarı
   olduğu için metin yeniden koyulaşır. */
.ds-badge-solid-risk { background: var(--ds-risk); color: #ffffff; }
.dark .ds-badge-solid-risk { color: #451a03; }
.ds-badge-solid-ok   { background: var(--ds-ok);   color: #ffffff; }
.dark .ds-badge-solid-ok { color: #022c22; }
/* Kategori rozeti — durum değil, tür ayrımı için (firma türleri gibi) */
.ds-badge-solid-action { background: var(--ds-action); color: #ffffff; }

/* --- Kategori çipi --------------------------------------------------------
   DESIGN.md · Kategori Paleti / Sınıf Rengi Kuralı. Tür ayrımı yapar, durum
   bildirmez: çip biçimi (8px köşe, cümle düzeni) onu hap biçimli, BÜYÜK
   HARF durum rozetinden biçimiyle ayırır. */
.ds-cat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: var(--ds-r-chip);
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ds-cat-slate   { background: var(--ds-inset); color: var(--ds-ink-muted-inset); }
.ds-cat-indigo  { background: var(--ds-cat-indigo-bg);  color: var(--ds-cat-indigo-ink); }
.ds-cat-violet  { background: var(--ds-cat-violet-bg);  color: var(--ds-cat-violet-ink); }
.ds-cat-cyan    { background: var(--ds-cat-cyan-bg);    color: var(--ds-cat-cyan-ink); }
.ds-cat-teal    { background: var(--ds-cat-teal-bg);    color: var(--ds-cat-teal-ink); }
.ds-cat-fuchsia { background: var(--ds-cat-fuchsia-bg); color: var(--ds-cat-fuchsia-ink); }


/* ---------------------------------------------------------------------------
   DURUM YÜZEYLERİ
   JS'ten dinamik atanan sınıflar Tailwind CDN'e bağlı kalamaz: yalnız JS
   dizesinde geçen bir utility hiç üretilmez ve öğe stilsiz kalır. Dinamik
   durum stilleri bu statik katmandan gelir ve temaya token'larla uyar.
--------------------------------------------------------------------------- */
.ds-state {
    border: 1px solid transparent;
}
.ds-state-ok    { background: var(--ds-ok-tint);     border-color: var(--ds-ok-line);    color: var(--ds-ok); }
.ds-state-info  { background: var(--ds-action-tint); border-color: var(--ds-action);     color: var(--ds-action-ink); }
.ds-state-risk  { background: var(--ds-risk-tint);   border-color: var(--ds-risk-line);  color: var(--ds-risk); }
.ds-state-alert { background: var(--ds-alert-tint);  border-color: var(--ds-alert-line); color: var(--ds-alert); }

/* Yalnız metin rengi taşıyan durum sınıfları */
.ds-ink-ok    { color: var(--ds-ok); }
.ds-ink-info  { color: var(--ds-action-ink); }
.ds-ink-risk  { color: var(--ds-risk); }
.ds-ink-alert { color: var(--ds-alert); }

/* Renk tek başına anlam taşımaz — rozetin önündeki nokta durumu tekrarlar */
.ds-badge-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--ds-r-pill);
    background: currentColor;
    flex: none;
}

/* --- Veri tablosu --------------------------------------------------------- */
.ds-table-wrap {
    /* Konumlu kap: hücrelerdeki sr-only etiketler (position: absolute) kabın
       kırpma alanında kalsın. Konumsuz kapta görünür alanın dışındaki etiket
       sayfanın kendisini yatay kaydırıyordu. */
    position: relative;
    overflow-x: auto;
}
.ds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.ds-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ds-ink-muted);
    border-bottom: 1px solid var(--ds-hairline);
    white-space: nowrap;
}
.ds-table td {
    padding: 12px 16px;
    font-weight: 500;
    line-height: 16px;
    color: var(--ds-ink-body);
    border-bottom: 1px solid var(--ds-hairline);
    vertical-align: top;
}
.ds-table tbody tr {
    transition: background var(--ds-t-state) var(--ds-ease);
}
.ds-table tbody tr:hover {
    background: var(--ds-inset);
}
.ds-table td strong {
    display: block;
    font-weight: 700;
    color: var(--ds-ink);
}
.ds-table td small {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--ds-ink-muted);
}
.ds-table .ds-mono {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
}
.ds-table .ds-num {
    text-align: right;
}

/* --- Sekme şeridi --------------------------------------------------------- */
.ds-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.ds-tabs::-webkit-scrollbar {
    display: none;
}
.ds-tab {
    flex: none;
    white-space: nowrap;
    padding: 12px 10px;
    border: none;
    border-radius: var(--ds-r-box);
    background: transparent;
    color: var(--ds-ink-muted);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    cursor: pointer;
    transition: background var(--ds-t-state) var(--ds-ease),
                color var(--ds-t-state) var(--ds-ease);
}
.ds-tab:hover {
    background: var(--ds-inset);
    color: var(--ds-ink);
}
.ds-tab-active,
.ds-tab-active:hover {
    background: var(--ds-action);
    color: #ffffff;
    box-shadow: var(--ds-shadow-raised);
}

/* Şerit taşınca kenarda ok ve solma (DsTabs). Kaydırma çubuğu gizli olduğu
   için sağda/solda sekme kaldığı başka türlü belli olmuyor. Hangi tarafta
   sekme kaldığını yapiex.js syncTabStrip data-prev / data-next ile söyler;
   ikisi de yoksa (şerit sığıyor) ne ok ne solma görünür. */
.ds-tabs-frame {
    position: relative;
}
/* Taşan şerit fareyle tutulup sürüklenir (yapiex.js bindTabStripDrag): boş
   alanda tutma eli, sürüklerken kapalı el; sekmenin üstünde el işareti kalır. */
.ds-tabs-frame[data-prev] .ds-tabs,
.ds-tabs-frame[data-next] .ds-tabs {
    cursor: grab;
}
.ds-tabs-frame[data-dragging] .ds-tabs,
.ds-tabs-frame[data-dragging] .ds-tab {
    cursor: grabbing;
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
}
.ds-tabs-frame[data-next] .ds-tabs {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}
.ds-tabs-frame[data-prev] .ds-tabs {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 56px);
    mask-image: linear-gradient(to right, transparent, #000 56px);
}
.ds-tabs-frame[data-prev][data-next] .ds-tabs {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
.ds-tabs-arrow {
    position: absolute;
    top: calc(50% - 4px);
    z-index: 1;
    display: none;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--ds-hairline);
    border-radius: 9999px;
    background: var(--ds-surface);
    color: var(--ds-ink-muted);
    box-shadow: var(--ds-shadow-raised);
    transform: translateY(-50%);
    cursor: pointer;
}
.ds-tabs-arrow:hover {
    color: var(--ds-ink);
}
.ds-tabs-arrow-prev {
    left: -4px;
}
.ds-tabs-arrow-next {
    right: -4px;
}
.ds-tabs-frame[data-prev] .ds-tabs-arrow-prev,
.ds-tabs-frame[data-next] .ds-tabs-arrow-next {
    display: grid;
}

/* --- Üst çubuk eylem yuvası ----------------------------------------------- */
/* AppHeader.EylemBolumu'na sayfanın koyduğu düğmeler. Dar ekranda sığmazsa
   sayfayı yana itmek yerine yuvanın içinde kayar. Taşma kaydırması odak
   halkasını ve gölgeyi kırpmasın diye 4px iç boşluk, dış boşlukla geri alınır. */
.ds-header-actions {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow-x: auto;
    padding: 4px;
    margin: -4px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.ds-header-actions::-webkit-scrollbar {
    display: none;
}
.ds-header-actions:empty {
    display: none;
}
.ds-header-actions > * {
    flex: none;
}
/* Telefonda ikonlu düğmeler yalnız ikon kalır; metin görünmez ama erişilebilir
   adda durur (font-size 0). Sayfaların tek tek yazdığı "hidden sm:inline"
   kuralının ortak hali. */
@media (max-width: 639px) {
    .ds-header-actions :is(.ds-btn-primary, .ds-btn-secondary, .ds-btn-ghost, .ds-btn-danger):has(> svg) {
        font-size: 0;
        gap: 0;
        padding-inline: 14px;
    }
}

/* --- Modal ---------------------------------------------------------------- */
.ds-modal-scrim {
    position: fixed;
    inset: 0;
    /* Modal sayfa içinde, çoğu zaman space-y-* kabında çizilir; Tailwind
       kardeşe margin-top verir ve sabit arka plan aşağı kayıp üst çubuğu
       açıkta bırakır. Kardeş seçicisi daha öncelikli olduğu için !important. */
    margin: 0 !important;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgb(2 6 23 / 0.6);
    backdrop-filter: blur(4px);
}
.ds-modal {
    width: 100%;
    max-width: 512px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--ds-surface);
    border: 1px solid var(--ds-hairline);
    border-radius: var(--ds-r-panel);
    padding: 24px;
    box-shadow: var(--ds-shadow-overlay);
}
/* Başlık üste yapışır (alttaki şerit gibi): uzun formda kaydırınca kapatma
   düğmesi görünür kalır. Negatif üst boşluk kabuğun iç boşluğunu (24px)
   başlığa devreder; yapışıkken altından kayan içerik kenarda görünmez.
   z-index içerikteki konumlu öğelerin (seçici kutuları) üstünde, açılır
   listelerin (z-30) altında: üstteki bir alanın listesi başlığa taşabilir. */
.ds-modal-head {
    position: sticky;
    top: -24px;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--ds-hairline);
    padding-top: 24px;
    padding-bottom: 12px;
    margin-top: -24px;
    background: var(--ds-surface);
}
.ds-modal-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 24px;
    color: var(--ds-ink);
}
.ds-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--ds-r-pill);
    background: var(--ds-inset);
    color: var(--ds-ink-muted);
    cursor: pointer;
    transition: color var(--ds-t-state) var(--ds-ease),
                background var(--ds-t-state) var(--ds-ease);
}
.ds-modal-close > svg {
    width: 16px;
    height: 16px;
}
.ds-modal-close:hover {
    background: var(--ds-alert-tint);
    color: var(--ds-alert);
}
/* Uzun formda şerit alta yapışır: kaydırırken Kaydet görünür kalır. Negatif
   alt boşluk kabuğun iç boşluğunu (24px) şeride devreder; yapışıkken de
   düğmeler kenardan aynı uzaklıkta durur. Yapışma sınırı kabuğun iç
   boşluğunun içinden ölçülür, bottom da o yüzden -24px. */
.ds-modal-foot {
    position: sticky;
    bottom: -24px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--ds-hairline);
    padding-top: 12px;
    padding-bottom: 24px;
    margin-top: 16px;
    margin-bottom: -24px;
    background: var(--ds-surface);
}

/* --- Boş durum ------------------------------------------------------------ */
.ds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 24px;
    text-align: center;
    color: var(--ds-ink-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}
.ds-empty > svg {
    width: 24px;
    height: 24px;
    color: var(--ds-ink-faint);
}

/* --- Toast (DsToastHost) ----------------------------------------------------
   Bildirimler alt ortada üst üste dizilir; yenisi eskisini silmez. */
.ds-toast-stack {
    position: fixed;
    left: 50%;
    bottom: calc(24px + var(--ds-bottom-bar-h, 0px));
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: -moz-max-content;
    width: max-content;
    max-width: min(92vw, 420px);
    transform: translateX(-50%);
    pointer-events: none;
}
/* --- Altta yüzen kutular: çerez bildirimi, bildirimler ---------------------
   Günlük rapor gibi sayfaların altta sabit eylem çubuğu (ds-bottom-bar) var;
   yüksekliği --ds-bottom-bar-h ile duyurulur, yüzen kutular o kadar yukarı
   kalkar ki Kaydet düğmesini örtmesin. Çubuk dar ekranda düğmeler alta
   indiği için iki satırdır. */
body:has(.ds-bottom-bar) {
    --ds-bottom-bar-h: 72px;
}
@media (max-width: 639px) {
    body:has(.ds-bottom-bar) {
        --ds-bottom-bar-h: 128px;
    }
}
/* Çerez bildirimi (CookieNotice, altta ortalı). Açıkken bildirimler onun
   üstünde çıkar; yoksa iki kutu üst üste biner. Bildirim geniş ekranda
   ~82px, dar ekranda düğme alta indiği için ~140-170px. */
.ds-cookie-notice {
    bottom: calc(12px + var(--ds-bottom-bar-h, 0px));
}
body:has(.ds-cookie-notice) .ds-toast-stack {
    bottom: calc(112px + var(--ds-bottom-bar-h, 0px));
}
@media (max-width: 639px) {
    body:has(.ds-cookie-notice) .ds-toast-stack {
        bottom: calc(200px + var(--ds-bottom-bar-h, 0px));
    }
}
/* Asistan robotu (AssistantPanel): görsel arka plansızdır; gölge kutuya değil
   görselin kendi çizgisine düşsün diye drop-shadow. */
.ds-assistant-mascot {
    filter: drop-shadow(0 6px 10px rgb(15 23 42 / 0.35));
}
/* Boş sohbette karşılayan robot: açılışta bir kez el sallar gibi sallanır. */
.ds-assistant-wave {
    transform-origin: 50% 90%;
    animation: ds-assistant-wave 1.6s ease-in-out 0.2s 1;
}
@keyframes ds-assistant-wave {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-5deg); }
    40% { transform: rotate(4deg); }
    60% { transform: rotate(-3deg); }
    80% { transform: rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
    .ds-assistant-wave {
        animation: none;
    }
}
/* Asistan düğmesi sağ altta sabit durur: sayfanın son satırı (tablo, açıklama) onun
   altında kalmasın diye içeriğin sonuna düğme kadar boşluk eklenir. */
body:has(.ds-assistant-fab) main::after {
    content: "";
    display: block;
    height: 72px;
}
.ds-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 8px 8px 8px 18px;
    border-radius: var(--ds-r-panel);
    background: #0f172a;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    box-shadow: var(--ds-shadow-overlay);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: auto;
    transition: opacity var(--ds-t-state) var(--ds-ease),
                transform var(--ds-t-state) var(--ds-ease);
}
.dark .ds-toast {
    background: #1e293b;
    border: 1px solid #334155;
}
.ds-toast-in {
    opacity: 1;
    transform: translateY(0);
}
.ds-toast > svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: #6ee7b7;
}
.ds-toast-alert > svg {
    color: #fda4af;
}
.ds-toast-close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--ds-r-pill);
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}
.ds-toast-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
.ds-toast-close > svg {
    width: 14px;
    height: 14px;
}

/* ---------------------------------------------------------------------------
   5. SAHA İSTİSNASI (DESIGN.md · Saha İstisnası Kuralı)
   Telefon genişliğinde gövde 14px'e, dokunma hedefleri 44px'e çıkar.
--------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .ds-table td,
    .ds-panel-sub,
    .ds-empty {
        font-size: 14px;
        line-height: 20px;
    }
    .ds-btn-primary,
    .ds-btn-secondary,
    .ds-btn-danger,
    .ds-tab {
        min-height: 44px;
    }
    .ds-icon-btn,
    .ds-modal-close,
    .ds-toast-close {
        width: 44px;
        height: 44px;
    }
    .ds-field-input,
    .ds-field-select,
    .ds-field-textarea {
        min-height: 44px;
        font-size: 16px; /* iOS'ta odaklanınca sayfayı yakınlaştırmasın */
    }
    .ds-panel {
        padding: 20px;
    }
}
/* =============================================================================
   YapiEx — Uygulama Kabuğu
   Tasarım sisteminin parçası olmayan, ama Blazor'un her sayfaya bastığı
   parçalar: hata şeridi, hata sınırı, iOS güvenli alan.

   Prototipte karşılığı yoktu (statik HTML'de Blazor kabuğu yok); token'lar
   ds-tokens.css'ten alınır ki bu parçalar da temayla birlikte dönsün.
============================================================================= */

/* --- Kök yüzey --------------------------------------------------------------
   Zemin rengi <body>'de yaşıyor, ama <body> içeriğin bittiği yerde biter:
   lastik-bant kaydırmada (iOS/macOS) ve içerik ekrandan kısa kaldığında
   altta <html>'in beyazı görünür. Koyu temada bu, ekranın dibinde beyaz bir
   şerit demek. Zemin köke de yazılır. */
html {
    background: var(--ds-page);
}

/* --- Onay kutusu ve seçenek imleci ------------------------------------------
   Tarayıcı onay kutusunda ok imleci gösterir; tıklanabildiği belli olsun diye
   el işareti. Kutuyu saran etiket de tıklanınca kutuyu değiştirdiği için
   aynı. Kilitli olanda yasak imleci. :where ile öncelik sıfır kalır, bileşen
   kendi imlecini verirse o geçer. */
:where(input[type="checkbox"], input[type="radio"], label:has(> input[type="checkbox"], > input[type="radio"])) {
    cursor: pointer;
}
:where(input[type="checkbox"], input[type="radio"]):disabled,
:where(label:has(> input[type="checkbox"]:disabled, > input[type="radio"]:disabled)) {
    cursor: not-allowed;
}

/* --- Alan grubu genişliği ----------------------------------------------------
   Tarayıcı <fieldset>'e min-width: min-content verir: içindeki geniş tablo ya
   da sarılmayan düğme sırası grubu kendi genişliğine açar, telefonda sayfa
   yana kayar (şantiye Yevmiyeler sekmesi 375 px ekranda 302 px taşıyordu).
   Grup da sıradan blok gibi kabına sığsın; geniş içerik kendi kaydırıcısında
   kalır. :where ile öncelik sıfır. */
:where(fieldset) {
    min-width: 0;
}

/* --- Bağlantı/hata şeridi (App.razor · index.html) ------------------------- */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 12px 16px;
    background: var(--ds-alert-tint);
    border-top: 1px solid var(--ds-alert-line);
    color: var(--ds-alert);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    box-shadow: var(--ds-shadow-overlay);
}
#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
    margin-left: 12px;
    color: var(--ds-alert);
    text-decoration: underline;
    cursor: pointer;
}

/* --- Bileşen hata sınırı --------------------------------------------------- */
.blazor-error-boundary {
    padding: 16px 20px;
    border: 1px solid var(--ds-alert-line);
    border-radius: var(--ds-r-box);
    background: var(--ds-alert-tint);
    color: var(--ds-alert);
    font-size: 12px;
    font-weight: 700;
}
.blazor-error-boundary::after {
    content: 'Bu bölüm yüklenirken bir hata oluştu.';
}

/* --- iOS durum çubuğu güvenli alanı (MAUI kabuğu) ------------------------- */
.status-bar-safe-area {
    display: none;
}
@supports (-webkit-touch-callout: none) {
    .status-bar-safe-area {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 60;
        width: 100%;
        height: env(safe-area-inset-top);
        background: var(--ds-surface);
    }
}

/* --- Ön-render açılış ekranı ----------------------------------------------- */
.app-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    color: var(--ds-ink-muted);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.pointer-events-none {
    pointer-events: none;
}
.\!visible {
    visibility: visible !important;
}
.visible {
    visibility: visible;
}
.collapse {
    visibility: collapse;
}
.static {
    position: static;
}
.fixed {
    position: fixed;
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.sticky {
    position: sticky;
}
.inset-0 {
    inset: 0px;
}
.inset-x-0 {
    left: 0px;
    right: 0px;
}
.inset-x-3 {
    left: 0.75rem;
    right: 0.75rem;
}
.inset-x-4 {
    left: 1rem;
    right: 1rem;
}
.inset-y-0 {
    top: 0px;
    bottom: 0px;
}
.-bottom-6 {
    bottom: -1.5rem;
}
.-bottom-px {
    bottom: -1px;
}
.-left-32 {
    left: -8rem;
}
.-left-\[1\.3rem\] {
    left: -1.3rem;
}
.-right-1 {
    right: -0.25rem;
}
.-right-6 {
    right: -1.5rem;
}
.-top-1 {
    top: -0.25rem;
}
.-top-3 {
    top: -0.75rem;
}
.-top-32 {
    top: -8rem;
}
.-top-\[5px\] {
    top: -5px;
}
.-top-px {
    top: -1px;
}
.bottom-0 {
    bottom: 0px;
}
.bottom-0\.5 {
    bottom: 0.125rem;
}
.bottom-3 {
    bottom: 0.75rem;
}
.bottom-5 {
    bottom: 1.25rem;
}
.left-0 {
    left: 0px;
}
.left-0\.5 {
    left: 0.125rem;
}
.left-2 {
    left: 0.5rem;
}
.left-2\.5 {
    left: 0.625rem;
}
.left-3 {
    left: 0.75rem;
}
.left-3\.5 {
    left: 0.875rem;
}
.left-4 {
    left: 1rem;
}
.left-\[13px\] {
    left: 13px;
}
.right-0 {
    right: 0px;
}
.right-0\.5 {
    right: 0.125rem;
}
.right-1 {
    right: 0.25rem;
}
.right-2 {
    right: 0.5rem;
}
.right-3\.5 {
    right: 0.875rem;
}
.right-4 {
    right: 1rem;
}
.right-5 {
    right: 1.25rem;
}
.top-0 {
    top: 0px;
}
.top-0\.5 {
    top: 0.125rem;
}
.top-1 {
    top: 0.25rem;
}
.top-1\/2 {
    top: 50%;
}
.top-16 {
    top: 4rem;
}
.top-2 {
    top: 0.5rem;
}
.top-3 {
    top: 0.75rem;
}
.top-4 {
    top: 1rem;
}
.top-8 {
    top: 2rem;
}
.top-\[31px\] {
    top: 31px;
}
.top-full {
    top: 100%;
}
.-z-10 {
    z-index: -10;
}
.z-0 {
    z-index: 0;
}
.z-10 {
    z-index: 10;
}
.z-20 {
    z-index: 20;
}
.z-30 {
    z-index: 30;
}
.z-40 {
    z-index: 40;
}
.z-50 {
    z-index: 50;
}
.z-\[60\] {
    z-index: 60;
}
.col-span-1 {
    grid-column: span 1 / span 1;
}
.col-span-10 {
    grid-column: span 10 / span 10;
}
.col-span-12 {
    grid-column: span 12 / span 12;
}
.col-span-2 {
    grid-column: span 2 / span 2;
}
.col-span-3 {
    grid-column: span 3 / span 3;
}
.col-span-4 {
    grid-column: span 4 / span 4;
}
.col-span-5 {
    grid-column: span 5 / span 5;
}
.col-span-7 {
    grid-column: span 7 / span 7;
}
.col-span-8 {
    grid-column: span 8 / span 8;
}
.col-span-full {
    grid-column: 1 / -1;
}
.m-0 {
    margin: 0px;
}
.m-auto {
    margin: auto;
}
.-mx-1 {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
}
.-mx-4 {
    margin-left: -1rem;
    margin-right: -1rem;
}
.-my-2 {
    margin-top: -0.5rem;
    margin-bottom: -0.5rem;
}
.mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}
.mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}
.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}
.-ml-1 {
    margin-left: -0.25rem;
}
.-mt-0\.5 {
    margin-top: -0.125rem;
}
.-mt-2 {
    margin-top: -0.5rem;
}
.mb-0\.5 {
    margin-bottom: 0.125rem;
}
.mb-1 {
    margin-bottom: 0.25rem;
}
.mb-1\.5 {
    margin-bottom: 0.375rem;
}
.mb-2 {
    margin-bottom: 0.5rem;
}
.mb-3 {
    margin-bottom: 0.75rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
.mb-5 {
    margin-bottom: 1.25rem;
}
.ml-1 {
    margin-left: 0.25rem;
}
.ml-1\.5 {
    margin-left: 0.375rem;
}
.ml-2 {
    margin-left: 0.5rem;
}
.ml-auto {
    margin-left: auto;
}
.mr-1 {
    margin-right: 0.25rem;
}
.mr-1\.5 {
    margin-right: 0.375rem;
}
.mr-2 {
    margin-right: 0.5rem;
}
.mr-3 {
    margin-right: 0.75rem;
}
.mr-auto {
    margin-right: auto;
}
.mt-0\.5 {
    margin-top: 0.125rem;
}
.mt-1 {
    margin-top: 0.25rem;
}
.mt-1\.5 {
    margin-top: 0.375rem;
}
.mt-2 {
    margin-top: 0.5rem;
}
.mt-3 {
    margin-top: 0.75rem;
}
.mt-4 {
    margin-top: 1rem;
}
.mt-5 {
    margin-top: 1.25rem;
}
.mt-6 {
    margin-top: 1.5rem;
}
.mt-auto {
    margin-top: auto;
}
.mt-px {
    margin-top: 1px;
}
.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.block {
    display: block;
}
.inline-block {
    display: inline-block;
}
.inline {
    display: inline;
}
.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}
.table {
    display: table;
}
.grid {
    display: grid;
}
.\!hidden {
    display: none !important;
}
.hidden {
    display: none;
}
.aspect-\[4\/3\] {
    aspect-ratio: 4/3;
}
.aspect-video {
    aspect-ratio: 16 / 9;
}
.h-0\.5 {
    height: 0.125rem;
}
.h-1 {
    height: 0.25rem;
}
.h-1\.5 {
    height: 0.375rem;
}
.h-1\/2 {
    height: 50%;
}
.h-10 {
    height: 2.5rem;
}
.h-11 {
    height: 2.75rem;
}
.h-12 {
    height: 3rem;
}
.h-14 {
    height: 3.5rem;
}
.h-16 {
    height: 4rem;
}
.h-2 {
    height: 0.5rem;
}
.h-2\.5 {
    height: 0.625rem;
}
.h-20 {
    height: 5rem;
}
.h-24 {
    height: 6rem;
}
.h-28 {
    height: 7rem;
}
.h-3 {
    height: 0.75rem;
}
.h-3\.5 {
    height: 0.875rem;
}
.h-32 {
    height: 8rem;
}
.h-36 {
    height: 9rem;
}
.h-4 {
    height: 1rem;
}
.h-40 {
    height: 10rem;
}
.h-44 {
    height: 11rem;
}
.h-48 {
    height: 12rem;
}
.h-5 {
    height: 1.25rem;
}
.h-52 {
    height: 13rem;
}
.h-56 {
    height: 14rem;
}
.h-6 {
    height: 1.5rem;
}
.h-60 {
    height: 15rem;
}
.h-64 {
    height: 16rem;
}
.h-7 {
    height: 1.75rem;
}
.h-72 {
    height: 18rem;
}
.h-8 {
    height: 2rem;
}
.h-80 {
    height: 20rem;
}
.h-9 {
    height: 2.25rem;
}
.h-96 {
    height: 24rem;
}
.h-\[108px\] {
    height: 108px;
}
.h-\[120px\] {
    height: 120px;
}
.h-\[168px\] {
    height: 168px;
}
.h-\[180px\] {
    height: 180px;
}
.h-\[196px\] {
    height: 196px;
}
.h-\[240px\] {
    height: 240px;
}
.h-\[320px\] {
    height: 320px;
}
.h-\[420px\] {
    height: 420px;
}
.h-\[52px\] {
    height: 52px;
}
.h-full {
    height: 100%;
}
.max-h-40 {
    max-height: 10rem;
}
.max-h-48 {
    max-height: 12rem;
}
.max-h-56 {
    max-height: 14rem;
}
.max-h-60 {
    max-height: 15rem;
}
.max-h-64 {
    max-height: 16rem;
}
.max-h-72 {
    max-height: 18rem;
}
.max-h-80 {
    max-height: 20rem;
}
.max-h-\[26rem\] {
    max-height: 26rem;
}
.max-h-\[28rem\] {
    max-height: 28rem;
}
.max-h-\[480px\] {
    max-height: 480px;
}
.max-h-\[50vh\] {
    max-height: 50vh;
}
.max-h-\[60vh\] {
    max-height: 60vh;
}
.max-h-full {
    max-height: 100%;
}
.min-h-0 {
    min-height: 0px;
}
.min-h-60 {
    min-height: 15rem;
}
.min-h-\[1\.5rem\] {
    min-height: 1.5rem;
}
.min-h-\[10rem\] {
    min-height: 10rem;
}
.min-h-\[12rem\] {
    min-height: 12rem;
}
.min-h-\[2\.25rem\] {
    min-height: 2.25rem;
}
.min-h-\[2\.75rem\] {
    min-height: 2.75rem;
}
.min-h-\[220px\] {
    min-height: 220px;
}
.min-h-\[28px\] {
    min-height: 28px;
}
.min-h-\[2rem\] {
    min-height: 2rem;
}
.min-h-\[32px\] {
    min-height: 32px;
}
.min-h-\[36px\] {
    min-height: 36px;
}
.min-h-\[40px\] {
    min-height: 40px;
}
.min-h-\[44px\] {
    min-height: 44px;
}
.min-h-\[6\.5rem\] {
    min-height: 6.5rem;
}
.min-h-\[640px\] {
    min-height: 640px;
}
.min-h-screen {
    min-height: 100vh;
}
.\!w-24 {
    width: 6rem !important;
}
.w-0\.5 {
    width: 0.125rem;
}
.w-1\.5 {
    width: 0.375rem;
}
.w-1\/3 {
    width: 33.333333%;
}
.w-10 {
    width: 2.5rem;
}
.w-11 {
    width: 2.75rem;
}
.w-12 {
    width: 3rem;
}
.w-14 {
    width: 3.5rem;
}
.w-16 {
    width: 4rem;
}
.w-2 {
    width: 0.5rem;
}
.w-2\.5 {
    width: 0.625rem;
}
.w-20 {
    width: 5rem;
}
.w-24 {
    width: 6rem;
}
.w-28 {
    width: 7rem;
}
.w-3 {
    width: 0.75rem;
}
.w-3\.5 {
    width: 0.875rem;
}
.w-32 {
    width: 8rem;
}
.w-36 {
    width: 9rem;
}
.w-4 {
    width: 1rem;
}
.w-40 {
    width: 10rem;
}
.w-44 {
    width: 11rem;
}
.w-48 {
    width: 12rem;
}
.w-5 {
    width: 1.25rem;
}
.w-56 {
    width: 14rem;
}
.w-6 {
    width: 1.5rem;
}
.w-64 {
    width: 16rem;
}
.w-7 {
    width: 1.75rem;
}
.w-72 {
    width: 18rem;
}
.w-8 {
    width: 2rem;
}
.w-80 {
    width: 20rem;
}
.w-9 {
    width: 2.25rem;
}
.w-\[28rem\] {
    width: 28rem;
}
.w-\[420px\] {
    width: 420px;
}
.w-auto {
    width: auto;
}
.w-full {
    width: 100%;
}
.w-px {
    width: 1px;
}
.min-w-0 {
    min-width: 0px;
}
.min-w-10 {
    min-width: 2.5rem;
}
.min-w-32 {
    min-width: 8rem;
}
.min-w-4 {
    min-width: 1rem;
}
.min-w-44 {
    min-width: 11rem;
}
.min-w-56 {
    min-width: 14rem;
}
.min-w-\[1\.75rem\] {
    min-width: 1.75rem;
}
.min-w-\[1020px\] {
    min-width: 1020px;
}
.min-w-\[1040px\] {
    min-width: 1040px;
}
.min-w-\[10rem\] {
    min-width: 10rem;
}
.min-w-\[12rem\] {
    min-width: 12rem;
}
.min-w-\[14rem\] {
    min-width: 14rem;
}
.min-w-\[160px\] {
    min-width: 160px;
}
.min-w-\[16rem\] {
    min-width: 16rem;
}
.min-w-\[200px\] {
    min-width: 200px;
}
.min-w-\[240px\] {
    min-width: 240px;
}
.min-w-\[260px\] {
    min-width: 260px;
}
.min-w-\[40rem\] {
    min-width: 40rem;
}
.min-w-\[42rem\] {
    min-width: 42rem;
}
.min-w-\[44rem\] {
    min-width: 44rem;
}
.min-w-\[46rem\] {
    min-width: 46rem;
}
.min-w-\[48rem\] {
    min-width: 48rem;
}
.min-w-\[52rem\] {
    min-width: 52rem;
}
.min-w-\[56rem\] {
    min-width: 56rem;
}
.min-w-\[58rem\] {
    min-width: 58rem;
}
.min-w-\[60rem\] {
    min-width: 60rem;
}
.min-w-\[64rem\] {
    min-width: 64rem;
}
.min-w-\[72rem\] {
    min-width: 72rem;
}
.min-w-\[760px\] {
    min-width: 760px;
}
.min-w-\[76rem\] {
    min-width: 76rem;
}
.min-w-\[820px\] {
    min-width: 820px;
}
.min-w-\[860px\] {
    min-width: 860px;
}
.min-w-\[88px\] {
    min-width: 88px;
}
.min-w-\[8rem\] {
    min-width: 8rem;
}
.min-w-\[9\.5rem\] {
    min-width: 9.5rem;
}
.max-w-2xl {
    max-width: 42rem;
}
.max-w-3xl {
    max-width: 48rem;
}
.max-w-4xl {
    max-width: 56rem;
}
.max-w-5xl {
    max-width: 64rem;
}
.max-w-6xl {
    max-width: 72rem;
}
.max-w-7xl {
    max-width: 80rem;
}
.max-w-\[1200px\] {
    max-width: 1200px;
}
.max-w-\[12rem\] {
    max-width: 12rem;
}
.max-w-\[1400px\] {
    max-width: 1400px;
}
.max-w-\[14rem\] {
    max-width: 14rem;
}
.max-w-\[150px\] {
    max-width: 150px;
}
.max-w-\[1600px\] {
    max-width: 1600px;
}
.max-w-\[16rem\] {
    max-width: 16rem;
}
.max-w-\[18rem\] {
    max-width: 18rem;
}
.max-w-\[190px\] {
    max-width: 190px;
}
.max-w-\[20rem\] {
    max-width: 20rem;
}
.max-w-\[220px\] {
    max-width: 220px;
}
.max-w-\[22rem\] {
    max-width: 22rem;
}
.max-w-\[24rem\] {
    max-width: 24rem;
}
.max-w-\[26rem\] {
    max-width: 26rem;
}
.max-w-\[28rem\] {
    max-width: 28rem;
}
.max-w-\[30rem\] {
    max-width: 30rem;
}
.max-w-\[40\%\] {
    max-width: 40%;
}
.max-w-\[640px\] {
    max-width: 640px;
}
.max-w-\[7rem\] {
    max-width: 7rem;
}
.max-w-\[80\%\] {
    max-width: 80%;
}
.max-w-\[85\%\] {
    max-width: 85%;
}
.max-w-\[900px\] {
    max-width: 900px;
}
.max-w-full {
    max-width: 100%;
}
.max-w-lg {
    max-width: 32rem;
}
.max-w-md {
    max-width: 28rem;
}
.max-w-prose {
    max-width: 65ch;
}
.max-w-sm {
    max-width: 24rem;
}
.max-w-xl {
    max-width: 36rem;
}
.max-w-xs {
    max-width: 20rem;
}
.flex-1 {
    flex: 1 1 0%;
}
.flex-none {
    flex: none;
}
.shrink-0 {
    flex-shrink: 0;
}
.basis-full {
    flex-basis: 100%;
}
.border-collapse {
    border-collapse: collapse;
}
.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
    --tw-rotate: -90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {
    50% {
        opacity: .5;
    }
}
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.animate-spin {
    animation: spin 1s linear infinite;
}
.cursor-default {
    cursor: default;
}
.cursor-grab {
    cursor: grab;
}
.cursor-not-allowed {
    cursor: not-allowed;
}
.cursor-pointer {
    cursor: pointer;
}
.cursor-wait {
    cursor: wait;
}
.select-none {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
.select-all {
    -webkit-user-select: all;
       -moz-user-select: all;
            user-select: all;
}
.resize-none {
    resize: none;
}
.scroll-mt-24 {
    scroll-margin-top: 6rem;
}
.scroll-mt-4 {
    scroll-margin-top: 1rem;
}
.list-inside {
    list-style-position: inside;
}
.list-decimal {
    list-style-type: decimal;
}
.list-disc {
    list-style-type: disc;
}
.list-none {
    list-style-type: none;
}
.columns-3 {
    -moz-columns: 3;
         columns: 3;
}
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-\[110px_1fr\] {
    grid-template-columns: 110px 1fr;
}
.flex-row {
    flex-direction: row;
}
.flex-col {
    flex-direction: column;
}
.flex-col-reverse {
    flex-direction: column-reverse;
}
.flex-wrap {
    flex-wrap: wrap;
}
.content-start {
    align-content: flex-start;
}
.items-start {
    align-items: flex-start;
}
.items-end {
    align-items: flex-end;
}
.items-center {
    align-items: center;
}
.items-baseline {
    align-items: baseline;
}
.items-stretch {
    align-items: stretch;
}
.justify-start {
    justify-content: flex-start;
}
.justify-end {
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.gap-0\.5 {
    gap: 0.125rem;
}
.gap-1 {
    gap: 0.25rem;
}
.gap-1\.5 {
    gap: 0.375rem;
}
.gap-2 {
    gap: 0.5rem;
}
.gap-2\.5 {
    gap: 0.625rem;
}
.gap-3 {
    gap: 0.75rem;
}
.gap-3\.5 {
    gap: 0.875rem;
}
.gap-4 {
    gap: 1rem;
}
.gap-5 {
    gap: 1.25rem;
}
.gap-6 {
    gap: 1.5rem;
}
.gap-px {
    gap: 1px;
}
.gap-x-2 {
    -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
}
.gap-x-3 {
    -moz-column-gap: 0.75rem;
         column-gap: 0.75rem;
}
.gap-x-4 {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
}
.gap-x-5 {
    -moz-column-gap: 1.25rem;
         column-gap: 1.25rem;
}
.gap-x-6 {
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
}
.gap-y-0\.5 {
    row-gap: 0.125rem;
}
.gap-y-1 {
    row-gap: 0.25rem;
}
.gap-y-2 {
    row-gap: 0.5rem;
}
.gap-y-3 {
    row-gap: 0.75rem;
}
.gap-y-4 {
    row-gap: 1rem;
}
.-space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(-0.375rem * var(--tw-space-x-reverse));
    margin-left: calc(-0.375rem * calc(1 - var(--tw-space-x-reverse)));
}
.-space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.375rem * var(--tw-space-x-reverse));
    margin-left: calc(0.375rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-amber-100 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(254 243 199 / var(--tw-divide-opacity, 1));
}
.divide-emerald-100 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(209 250 229 / var(--tw-divide-opacity, 1));
}
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-divide-opacity, 1));
}
.divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1));
}
.self-start {
    align-self: flex-start;
}
.self-end {
    align-self: flex-end;
}
.self-center {
    align-self: center;
}
.overflow-auto {
    overflow: auto;
}
.overflow-hidden {
    overflow: hidden;
}
.overflow-x-auto {
    overflow-x: auto;
}
.overflow-y-auto {
    overflow-y: auto;
}
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.whitespace-normal {
    white-space: normal;
}
.whitespace-nowrap {
    white-space: nowrap;
}
.whitespace-pre-line {
    white-space: pre-line;
}
.whitespace-pre-wrap {
    white-space: pre-wrap;
}
.break-words {
    overflow-wrap: break-word;
}
.break-all {
    word-break: break-all;
}
.rounded {
    border-radius: 0.25rem;
}
.rounded-2xl {
    border-radius: 1rem;
}
.rounded-3xl {
    border-radius: 1.5rem;
}
.rounded-\[2\.5rem\] {
    border-radius: 2.5rem;
}
.rounded-\[2rem\] {
    border-radius: 2rem;
}
.rounded-full {
    border-radius: 9999px;
}
.rounded-lg {
    border-radius: 0.5rem;
}
.rounded-md {
    border-radius: 0.375rem;
}
.rounded-sm {
    border-radius: 0.125rem;
}
.rounded-xl {
    border-radius: 0.75rem;
}
.rounded-bl-md {
    border-bottom-left-radius: 0.375rem;
}
.rounded-br-md {
    border-bottom-right-radius: 0.375rem;
}
.rounded-tl-sm {
    border-top-left-radius: 0.125rem;
}
.rounded-tr-sm {
    border-top-right-radius: 0.125rem;
}
.\!border-2 {
    border-width: 2px !important;
}
.border {
    border-width: 1px;
}
.border-2 {
    border-width: 2px;
}
.border-b {
    border-bottom-width: 1px;
}
.border-b-2 {
    border-bottom-width: 2px;
}
.border-l {
    border-left-width: 1px;
}
.border-l-2 {
    border-left-width: 2px;
}
.border-r {
    border-right-width: 1px;
}
.border-t {
    border-top-width: 1px;
}
.border-t-2 {
    border-top-width: 2px;
}
.border-dashed {
    border-style: dashed;
}
.\!border-brand-500 {
    --tw-border-opacity: 1 !important;
    border-color: rgb(99 102 241 / var(--tw-border-opacity, 1)) !important;
}
.\!border-emerald-500 {
    --tw-border-opacity: 1 !important;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1)) !important;
}
.\!border-rose-500 {
    --tw-border-opacity: 1 !important;
    border-color: rgb(244 63 94 / var(--tw-border-opacity, 1)) !important;
}
.border-amber-200 {
    --tw-border-opacity: 1;
    border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-300 {
    --tw-border-opacity: 1;
    border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-amber-300\/30 {
    border-color: rgb(252 211 77 / 0.3);
}
.border-amber-400 {
    --tw-border-opacity: 1;
    border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.border-amber-500\/20 {
    border-color: rgb(245 158 11 / 0.2);
}
.border-amber-500\/30 {
    border-color: rgb(245 158 11 / 0.3);
}
.border-amber-500\/40 {
    border-color: rgb(245 158 11 / 0.4);
}
.border-brand-100 {
    --tw-border-opacity: 1;
    border-color: rgb(224 231 255 / var(--tw-border-opacity, 1));
}
.border-brand-200 {
    --tw-border-opacity: 1;
    border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}
.border-brand-300 {
    --tw-border-opacity: 1;
    border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}
.border-brand-400 {
    --tw-border-opacity: 1;
    border-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}
.border-brand-500 {
    --tw-border-opacity: 1;
    border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}
.border-brand-500\/20 {
    border-color: rgb(99 102 241 / 0.2);
}
.border-brand-500\/30 {
    border-color: rgb(99 102 241 / 0.3);
}
.border-brand-500\/40 {
    border-color: rgb(99 102 241 / 0.4);
}
.border-brand-500\/50 {
    border-color: rgb(99 102 241 / 0.5);
}
.border-brand-600 {
    --tw-border-opacity: 1;
    border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
}
.border-emerald-200 {
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-emerald-200\/70 {
    border-color: rgb(167 243 208 / 0.7);
}
.border-emerald-300 {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.border-emerald-400 {
    --tw-border-opacity: 1;
    border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.border-emerald-500 {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.border-emerald-500\/20 {
    border-color: rgb(16 185 129 / 0.2);
}
.border-emerald-500\/40 {
    border-color: rgb(16 185 129 / 0.4);
}
.border-orange-200 {
    --tw-border-opacity: 1;
    border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}
.border-orange-600 {
    --tw-border-opacity: 1;
    border-color: rgb(234 88 12 / var(--tw-border-opacity, 1));
}
.border-rose-200 {
    --tw-border-opacity: 1;
    border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
}
.border-rose-500 {
    --tw-border-opacity: 1;
    border-color: rgb(244 63 94 / var(--tw-border-opacity, 1));
}
.border-slate-100 {
    --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}
.border-slate-200 {
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.border-slate-200\/70 {
    border-color: rgb(226 232 240 / 0.7);
}
.border-slate-200\/80 {
    border-color: rgb(226 232 240 / 0.8);
}
.border-slate-200\/90 {
    border-color: rgb(226 232 240 / 0.9);
}
.border-slate-300 {
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.border-slate-400\/20 {
    border-color: rgb(148 163 184 / 0.2);
}
.border-slate-800 {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.border-transparent {
    border-color: transparent;
}
.border-white {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/10 {
    border-color: rgb(255 255 255 / 0.1);
}
.border-white\/20 {
    border-color: rgb(255 255 255 / 0.2);
}
.border-white\/25 {
    border-color: rgb(255 255 255 / 0.25);
}
.border-white\/30 {
    border-color: rgb(255 255 255 / 0.3);
}
.\!bg-amber-100 {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1)) !important;
}
.bg-\[var\(--ds-inset\)\] {
    background-color: var(--ds-inset);
}
.bg-amber-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(252 211 77 / var(--tw-bg-opacity, 1));
}
.bg-amber-400\/15 {
    background-color: rgb(251 191 36 / 0.15);
}
.bg-amber-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-50\/40 {
    background-color: rgb(255 251 235 / 0.4);
}
.bg-amber-50\/60 {
    background-color: rgb(255 251 235 / 0.6);
}
.bg-amber-50\/70 {
    background-color: rgb(255 251 235 / 0.7);
}
.bg-amber-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/10 {
    background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-amber-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}
.bg-black\/20 {
    background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/30 {
    background-color: rgb(0 0 0 / 0.3);
}
.bg-blue-50\/40 {
    background-color: rgb(239 246 255 / 0.4);
}
.bg-blue-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-brand-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.bg-brand-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(165 180 252 / var(--tw-bg-opacity, 1));
}
.bg-brand-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-brand-50\/30 {
    background-color: rgb(238 242 255 / 0.3);
}
.bg-brand-50\/40 {
    background-color: rgb(238 242 255 / 0.4);
}
.bg-brand-50\/50 {
    background-color: rgb(238 242 255 / 0.5);
}
.bg-brand-50\/60 {
    background-color: rgb(238 242 255 / 0.6);
}
.bg-brand-50\/70 {
    background-color: rgb(238 242 255 / 0.7);
}
.bg-brand-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}
.bg-brand-500\/10 {
    background-color: rgb(99 102 241 / 0.1);
}
.bg-brand-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.bg-brand-600\/30 {
    background-color: rgb(79 70 229 / 0.3);
}
.bg-brand-600\/90 {
    background-color: rgb(79 70 229 / 0.9);
}
.bg-emerald-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-emerald-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50\/40 {
    background-color: rgb(236 253 245 / 0.4);
}
.bg-emerald-50\/60 {
    background-color: rgb(236 253 245 / 0.6);
}
.bg-emerald-50\/70 {
    background-color: rgb(236 253 245 / 0.7);
}
.bg-emerald-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500\/10 {
    background-color: rgb(16 185 129 / 0.1);
}
.bg-emerald-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-emerald-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.bg-indigo-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.bg-orange-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
.bg-orange-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}
.bg-rose-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(251 113 133 / var(--tw-bg-opacity, 1));
}
.bg-rose-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.bg-rose-50\/30 {
    background-color: rgb(255 241 242 / 0.3);
}
.bg-rose-50\/40 {
    background-color: rgb(255 241 242 / 0.4);
}
.bg-rose-50\/60 {
    background-color: rgb(255 241 242 / 0.6);
}
.bg-rose-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}
.bg-rose-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
}
.bg-rose-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(190 18 60 / var(--tw-bg-opacity, 1));
}
.bg-slate-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.bg-slate-100\/80 {
    background-color: rgb(241 245 249 / 0.8);
}
.bg-slate-100\/90 {
    background-color: rgb(241 245 249 / 0.9);
}
.bg-slate-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.bg-slate-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
.bg-slate-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}
.bg-slate-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-slate-50\/40 {
    background-color: rgb(248 250 252 / 0.4);
}
.bg-slate-50\/50 {
    background-color: rgb(248 250 252 / 0.5);
}
.bg-slate-50\/60 {
    background-color: rgb(248 250 252 / 0.6);
}
.bg-slate-50\/70 {
    background-color: rgb(248 250 252 / 0.7);
}
.bg-slate-50\/80 {
    background-color: rgb(248 250 252 / 0.8);
}
.bg-slate-500\/10 {
    background-color: rgb(100 116 139 / 0.1);
}
.bg-slate-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
.bg-slate-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.bg-slate-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.bg-slate-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-slate-900\/70 {
    background-color: rgb(15 23 42 / 0.7);
}
.bg-slate-950 {
    --tw-bg-opacity: 1;
    background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}
.bg-slate-950\/90 {
    background-color: rgb(2 6 23 / 0.9);
}
.bg-teal-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1));
}
.bg-transparent {
    background-color: transparent;
}
.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
    background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/15 {
    background-color: rgb(255 255 255 / 0.15);
}
.bg-white\/20 {
    background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/60 {
    background-color: rgb(255 255 255 / 0.6);
}
.bg-white\/70 {
    background-color: rgb(255 255 255 / 0.7);
}
.bg-white\/80 {
    background-color: rgb(255 255 255 / 0.8);
}
.bg-white\/90 {
    background-color: rgb(255 255 255 / 0.9);
}
.bg-white\/95 {
    background-color: rgb(255 255 255 / 0.95);
}
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-brand-300 {
    --tw-gradient-from: #a5b4fc var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(165 180 252 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-600\/20 {
    --tw-gradient-from: rgb(79 70 229 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-950 {
    --tw-gradient-from: #020617 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-950\/80 {
    --tw-gradient-from: rgb(2 6 23 / 0.8) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-950\/90 {
    --tw-gradient-from: rgb(2 6 23 / 0.9) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-blue-200 {
    --tw-gradient-to: rgb(191 219 254 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #bfdbfe var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-slate-950\/35 {
    --tw-gradient-to: rgb(2 6 23 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(2 6 23 / 0.35) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-slate-950\/75 {
    --tw-gradient-to: rgb(2 6 23 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(2 6 23 / 0.75) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-transparent {
    --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-black\/20 {
    --tw-gradient-to: rgb(0 0 0 / 0.2) var(--tw-gradient-to-position);
}
.to-emerald-300 {
    --tw-gradient-to: #6ee7b7 var(--tw-gradient-to-position);
}
.to-slate-950\/10 {
    --tw-gradient-to: rgb(2 6 23 / 0.1) var(--tw-gradient-to-position);
}
.to-slate-950\/40 {
    --tw-gradient-to: rgb(2 6 23 / 0.4) var(--tw-gradient-to-position);
}
.to-transparent {
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.bg-clip-text {
    -webkit-background-clip: text;
            background-clip: text;
}
.fill-brand-500\/10 {
    fill: rgb(99 102 241 / 0.1);
}
.fill-brand-600 {
    fill: #4f46e5;
}
.fill-rose-500 {
    fill: #f43f5e;
}
.stroke-brand-600 {
    stroke: #4f46e5;
}
.stroke-rose-400 {
    stroke: #fb7185;
}
.object-contain {
    -o-object-fit: contain;
       object-fit: contain;
}
.object-cover {
    -o-object-fit: cover;
       object-fit: cover;
}
.\!p-0 {
    padding: 0px !important;
}
.p-0 {
    padding: 0px;
}
.p-0\.5 {
    padding: 0.125rem;
}
.p-1 {
    padding: 0.25rem;
}
.p-1\.5 {
    padding: 0.375rem;
}
.p-10 {
    padding: 2.5rem;
}
.p-12 {
    padding: 3rem;
}
.p-2 {
    padding: 0.5rem;
}
.p-2\.5 {
    padding: 0.625rem;
}
.p-3 {
    padding: 0.75rem;
}
.p-3\.5 {
    padding: 0.875rem;
}
.p-4 {
    padding: 1rem;
}
.p-5 {
    padding: 1.25rem;
}
.p-6 {
    padding: 1.5rem;
}
.p-8 {
    padding: 2rem;
}
.\!px-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}
.\!py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}
.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}
.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}
.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.\!pl-9 {
    padding-left: 2.25rem !important;
}
.pb-1 {
    padding-bottom: 0.25rem;
}
.pb-2 {
    padding-bottom: 0.5rem;
}
.pb-28 {
    padding-bottom: 7rem;
}
.pb-3 {
    padding-bottom: 0.75rem;
}
.pb-4 {
    padding-bottom: 1rem;
}
.pb-5 {
    padding-bottom: 1.25rem;
}
.pb-8 {
    padding-bottom: 2rem;
}
.pl-1 {
    padding-left: 0.25rem;
}
.pl-10 {
    padding-left: 2.5rem;
}
.pl-11 {
    padding-left: 2.75rem;
}
.pl-2 {
    padding-left: 0.5rem;
}
.pl-3 {
    padding-left: 0.75rem;
}
.pl-4 {
    padding-left: 1rem;
}
.pl-5 {
    padding-left: 1.25rem;
}
.pl-6 {
    padding-left: 1.5rem;
}
.pl-8 {
    padding-left: 2rem;
}
.pl-9 {
    padding-left: 2.25rem;
}
.pr-1 {
    padding-right: 0.25rem;
}
.pr-1\.5 {
    padding-right: 0.375rem;
}
.pr-11 {
    padding-right: 2.75rem;
}
.pr-16 {
    padding-right: 4rem;
}
.pr-2 {
    padding-right: 0.5rem;
}
.pr-2\.5 {
    padding-right: 0.625rem;
}
.pr-3 {
    padding-right: 0.75rem;
}
.pr-4 {
    padding-right: 1rem;
}
.pr-7 {
    padding-right: 1.75rem;
}
.ps-4 {
    padding-inline-start: 1rem;
}
.pt-1 {
    padding-top: 0.25rem;
}
.pt-1\.5 {
    padding-top: 0.375rem;
}
.pt-16 {
    padding-top: 4rem;
}
.pt-2 {
    padding-top: 0.5rem;
}
.pt-2\.5 {
    padding-top: 0.625rem;
}
.pt-3 {
    padding-top: 0.75rem;
}
.pt-4 {
    padding-top: 1rem;
}
.pt-5 {
    padding-top: 1.25rem;
}
.pt-6 {
    padding-top: 1.5rem;
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.align-top {
    vertical-align: top;
}
.align-middle {
    vertical-align: middle;
}
.font-mono {
    font-family: JetBrains Mono, monospace;
}
.font-sans {
    font-family: Inter, sans-serif;
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}
.text-\[10px\] {
    font-size: 10px;
}
.text-\[11px\] {
    font-size: 11px;
}
.text-\[12px\] {
    font-size: 12px;
}
.text-\[8px\] {
    font-size: 8px;
}
.text-\[9px\] {
    font-size: 9px;
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
.font-black {
    font-weight: 900;
}
.font-bold {
    font-weight: 700;
}
.font-extrabold {
    font-weight: 800;
}
.font-medium {
    font-weight: 500;
}
.font-normal {
    font-weight: 400;
}
.font-semibold {
    font-weight: 600;
}
.uppercase {
    text-transform: uppercase;
}
.normal-case {
    text-transform: none;
}
.italic {
    font-style: italic;
}
.leading-3 {
    line-height: .75rem;
}
.leading-5 {
    line-height: 1.25rem;
}
.leading-6 {
    line-height: 1.5rem;
}
.leading-7 {
    line-height: 1.75rem;
}
.leading-none {
    line-height: 1;
}
.leading-relaxed {
    line-height: 1.625;
}
.leading-snug {
    line-height: 1.375;
}
.leading-tight {
    line-height: 1.25;
}
.tracking-\[0\.4em\] {
    letter-spacing: 0.4em;
}
.tracking-normal {
    letter-spacing: 0em;
}
.tracking-tight {
    letter-spacing: -0.025em;
}
.tracking-wide {
    letter-spacing: 0.025em;
}
.tracking-wider {
    letter-spacing: 0.05em;
}
.tracking-widest {
    letter-spacing: 0.1em;
}
.\!text-amber-700 {
    --tw-text-opacity: 1 !important;
    color: rgb(180 83 9 / var(--tw-text-opacity, 1)) !important;
}
.\!text-rose-600 {
    --tw-text-opacity: 1 !important;
    color: rgb(225 29 72 / var(--tw-text-opacity, 1)) !important;
}
.text-amber-500 {
    --tw-text-opacity: 1;
    color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-600 {
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
    --tw-text-opacity: 1;
    color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800 {
    --tw-text-opacity: 1;
    color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-amber-900 {
    --tw-text-opacity: 1;
    color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.text-brand-300 {
    --tw-text-opacity: 1;
    color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}
.text-brand-400 {
    --tw-text-opacity: 1;
    color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.text-brand-500 {
    --tw-text-opacity: 1;
    color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.text-brand-600 {
    --tw-text-opacity: 1;
    color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-brand-700 {
    --tw-text-opacity: 1;
    color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-brand-800 {
    --tw-text-opacity: 1;
    color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}
.text-emerald-600 {
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-emerald-700 {
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-emerald-700\/70 {
    color: rgb(4 120 87 / 0.7);
}
.text-emerald-800 {
    --tw-text-opacity: 1;
    color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-emerald-800\/80 {
    color: rgb(6 95 70 / 0.8);
}
.text-emerald-900 {
    --tw-text-opacity: 1;
    color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
.text-emerald-900\/80 {
    color: rgb(6 78 59 / 0.8);
}
.text-indigo-600 {
    --tw-text-opacity: 1;
    color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-orange-800 {
    --tw-text-opacity: 1;
    color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}
.text-rose-200 {
    --tw-text-opacity: 1;
    color: rgb(254 205 211 / var(--tw-text-opacity, 1));
}
.text-rose-500 {
    --tw-text-opacity: 1;
    color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}
.text-rose-600 {
    --tw-text-opacity: 1;
    color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.text-rose-700 {
    --tw-text-opacity: 1;
    color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.text-rose-800 {
    --tw-text-opacity: 1;
    color: rgb(159 18 57 / var(--tw-text-opacity, 1));
}
.text-slate-100 {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.text-slate-200 {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.text-slate-300 {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-slate-400 {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500 {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-slate-600 {
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-slate-700 {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-slate-800 {
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.text-slate-900 {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-transparent {
    color: transparent;
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/80 {
    color: rgb(255 255 255 / 0.8);
}
.text-white\/90 {
    color: rgb(255 255 255 / 0.9);
}
.text-white\/\[0\.06\] {
    color: rgb(255 255 255 / 0.06);
}
.underline {
    text-decoration-line: underline;
}
.line-through {
    text-decoration-line: line-through;
}
.no-underline {
    text-decoration-line: none;
}
.accent-brand-600 {
    accent-color: #4f46e5;
}
.accent-emerald-600 {
    accent-color: #059669;
}
.accent-rose-600 {
    accent-color: #e11d48;
}
.opacity-0 {
    opacity: 0;
}
.opacity-40 {
    opacity: 0.4;
}
.opacity-50 {
    opacity: 0.5;
}
.opacity-60 {
    opacity: 0.6;
}
.opacity-70 {
    opacity: 0.7;
}
.opacity-75 {
    opacity: 0.75;
}
.opacity-80 {
    opacity: 0.8;
}
.opacity-90 {
    opacity: 0.9;
}
.opacity-\[0\.55\] {
    opacity: 0.55;
}
.mix-blend-luminosity {
    mix-blend-mode: luminosity;
}
.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-brand-600\/20 {
    --tw-shadow-color: rgb(79 70 229 / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-brand-600\/30 {
    --tw-shadow-color: rgb(79 70 229 / 0.3);
    --tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-amber-400 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(251 191 36 / var(--tw-ring-opacity, 1));
}
.ring-amber-400\/70 {
    --tw-ring-color: rgb(251 191 36 / 0.7);
}
.ring-brand-500 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}
.ring-brand-500\/20 {
    --tw-ring-color: rgb(99 102 241 / 0.2);
}
.ring-rose-400 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(251 113 133 / var(--tw-ring-opacity, 1));
}
.ring-rose-500 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(244 63 94 / var(--tw-ring-opacity, 1));
}
.ring-slate-200 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(226 232 240 / var(--tw-ring-opacity, 1));
}
.ring-slate-50 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(248 250 252 / var(--tw-ring-opacity, 1));
}
.ring-white {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.ring-offset-1 {
    --tw-ring-offset-width: 1px;
}
.blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-3xl {
    --tw-blur: blur(64px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale-\[0\.35\] {
    --tw-grayscale: grayscale(0.35);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-md {
    --tw-backdrop-blur: blur(12px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-\[transform\2c border-color\2c box-shadow\] {
    transition-property: transform,border-color,box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.duration-200 {
    transition-duration: 200ms;
}
.duration-300 {
    transition-duration: 300ms;
}
.duration-500 {
    transition-duration: 500ms;
}
.\[scrollbar-width\:thin\] {
    scrollbar-width: thin;
}
.first\:pt-0:first-child {
    padding-top: 0px;
}
.last\:border-b-0:last-child {
    border-bottom-width: 0px;
}
.last\:pb-0:last-child {
    padding-bottom: 0px;
}
.empty\:hidden:empty {
    display: none;
}
.focus-within\:bg-brand-50\/50:focus-within {
    background-color: rgb(238 242 255 / 0.5);
}
.focus-within\:opacity-100:focus-within {
    opacity: 1;
}
.hover\:-translate-y-0\.5:hover {
    --tw-translate-y: -0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-105:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-amber-500:hover {
    --tw-border-opacity: 1;
    border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.hover\:border-brand-200:hover {
    --tw-border-opacity: 1;
    border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}
.hover\:border-brand-300:hover {
    --tw-border-opacity: 1;
    border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}
.hover\:border-brand-400:hover {
    --tw-border-opacity: 1;
    border-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}
.hover\:border-brand-500:hover {
    --tw-border-opacity: 1;
    border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}
.hover\:border-brand-500\/60:hover {
    border-color: rgb(99 102 241 / 0.6);
}
.hover\:border-brand-600:hover {
    --tw-border-opacity: 1;
    border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
}
.hover\:border-emerald-600:hover {
    --tw-border-opacity: 1;
    border-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
}
.hover\:border-slate-200:hover {
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.hover\:border-slate-300:hover {
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.hover\:border-slate-400:hover {
    --tw-border-opacity: 1;
    border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}
.hover\:bg-amber-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-50\/40:hover {
    background-color: rgb(238 242 255 / 0.4);
}
.hover\:bg-brand-50\/60:hover {
    background-color: rgb(238 242 255 / 0.6);
}
.hover\:bg-brand-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-100\/40:hover {
    background-color: rgb(209 250 229 / 0.4);
}
.hover\:bg-emerald-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(6 95 70 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-100\/50:hover {
    background-color: rgb(241 245 249 / 0.5);
}
.hover\:bg-slate-100\/70:hover {
    background-color: rgb(241 245 249 / 0.7);
}
.hover\:bg-slate-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-50\/60:hover {
    background-color: rgb(248 250 252 / 0.6);
}
.hover\:bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/10:hover {
    background-color: rgb(255 255 255 / 0.1);
}
.hover\:bg-white\/20:hover {
    background-color: rgb(255 255 255 / 0.2);
}
.hover\:bg-white\/25:hover {
    background-color: rgb(255 255 255 / 0.25);
}
.hover\:bg-white\/50:hover {
    background-color: rgb(255 255 255 / 0.5);
}
.hover\:text-brand-600:hover {
    --tw-text-opacity: 1;
    color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.hover\:text-rose-600:hover {
    --tw-text-opacity: 1;
    color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.hover\:text-rose-700:hover {
    --tw-text-opacity: 1;
    color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-500:hover {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-600:hover {
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-700:hover {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-800:hover {
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-900:hover {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
    text-decoration-line: underline;
}
.hover\:opacity-100:hover {
    opacity: 1;
}
.hover\:shadow-md:hover {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:border-brand-500:focus {
    --tw-border-opacity: 1;
    border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}
.focus\:bg-white:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.focus\:ring-1:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-brand-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}
.focus-visible\:outline-none:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.focus-visible\:outline:focus-visible {
    outline-style: solid;
}
.focus-visible\:outline-2:focus-visible {
    outline-width: 2px;
}
.focus-visible\:outline-\[3px\]:focus-visible {
    outline-width: 3px;
}
.focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
}
.focus-visible\:outline-offset-\[3px\]:focus-visible {
    outline-offset: 3px;
}
.focus-visible\:outline-brand-500:focus-visible {
    outline-color: #6366f1;
}
.focus-visible\:outline-brand-600:focus-visible {
    outline-color: #4f46e5;
}
.focus-visible\:ring-2:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-brand-500:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}
.active\:scale-\[0\.99\]:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.disabled\:pointer-events-none:disabled {
    pointer-events: none;
}
.disabled\:cursor-default:disabled {
    cursor: default;
}
.disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
}
.disabled\:cursor-wait:disabled {
    cursor: wait;
}
.disabled\:opacity-30:disabled {
    opacity: 0.3;
}
.disabled\:opacity-40:disabled {
    opacity: 0.4;
}
.disabled\:opacity-50:disabled {
    opacity: 0.5;
}
.disabled\:opacity-60:disabled {
    opacity: 0.6;
}
.disabled\:hover\:bg-transparent:hover:disabled {
    background-color: transparent;
}
.group:hover .group-hover\:translate-x-0\.5 {
    --tw-translate-x: 0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-1 {
    --tw-translate-x: 0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-110 {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:text-amber-600 {
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-brand-600 {
    --tw-text-opacity: 1;
    color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-slate-500 {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:underline {
    text-decoration-line: underline;
}
.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}
.dark\:block:is(.dark *) {
    display: block;
}
.dark\:hidden:is(.dark *) {
    display: none;
}
.dark\:divide-amber-500\/20:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(245 158 11 / 0.2);
}
.dark\:divide-emerald-500\/20:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(16 185 129 / 0.2);
}
.dark\:divide-slate-800:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-divide-opacity, 1));
}
.dark\:divide-slate-800\/60:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(30 41 59 / 0.6);
}
.dark\:border-amber-500:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.dark\:border-amber-500\/30:is(.dark *) {
    border-color: rgb(245 158 11 / 0.3);
}
.dark\:border-amber-500\/40:is(.dark *) {
    border-color: rgb(245 158 11 / 0.4);
}
.dark\:border-amber-700:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(180 83 9 / var(--tw-border-opacity, 1));
}
.dark\:border-amber-800\/50:is(.dark *) {
    border-color: rgb(146 64 14 / 0.5);
}
.dark\:border-amber-900:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(120 53 15 / var(--tw-border-opacity, 1));
}
.dark\:border-brand-500\/20:is(.dark *) {
    border-color: rgb(99 102 241 / 0.2);
}
.dark\:border-brand-500\/30:is(.dark *) {
    border-color: rgb(99 102 241 / 0.3);
}
.dark\:border-brand-500\/40:is(.dark *) {
    border-color: rgb(99 102 241 / 0.4);
}
.dark\:border-brand-500\/50:is(.dark *) {
    border-color: rgb(99 102 241 / 0.5);
}
.dark\:border-brand-800:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 48 163 / var(--tw-border-opacity, 1));
}
.dark\:border-brand-900:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(49 46 129 / var(--tw-border-opacity, 1));
}
.dark\:border-emerald-500:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.dark\:border-emerald-500\/20:is(.dark *) {
    border-color: rgb(16 185 129 / 0.2);
}
.dark\:border-emerald-500\/30:is(.dark *) {
    border-color: rgb(16 185 129 / 0.3);
}
.dark\:border-emerald-800:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}
.dark\:border-emerald-900:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(6 78 59 / var(--tw-border-opacity, 1));
}
.dark\:border-orange-500\/30:is(.dark *) {
    border-color: rgb(249 115 22 / 0.3);
}
.dark\:border-rose-500\/30:is(.dark *) {
    border-color: rgb(244 63 94 / 0.3);
}
.dark\:border-slate-600:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.dark\:border-slate-700:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.dark\:border-slate-700\/80:is(.dark *) {
    border-color: rgb(51 65 85 / 0.8);
}
.dark\:border-slate-800:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.dark\:border-slate-800\/80:is(.dark *) {
    border-color: rgb(30 41 59 / 0.8);
}
.dark\:border-slate-900:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
}
.dark\:\!bg-amber-950:is(.dark *) {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(69 26 3 / var(--tw-bg-opacity, 1)) !important;
}
.dark\:bg-amber-500\/10:is(.dark *) {
    background-color: rgb(245 158 11 / 0.1);
}
.dark\:bg-amber-500\/20:is(.dark *) {
    background-color: rgb(245 158 11 / 0.2);
}
.dark\:bg-amber-500\/5:is(.dark *) {
    background-color: rgb(245 158 11 / 0.05);
}
.dark\:bg-amber-950:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(69 26 3 / var(--tw-bg-opacity, 1));
}
.dark\:bg-amber-950\/30:is(.dark *) {
    background-color: rgb(69 26 3 / 0.3);
}
.dark\:bg-amber-950\/50:is(.dark *) {
    background-color: rgb(69 26 3 / 0.5);
}
.dark\:bg-brand-400:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(129 140 248 / var(--tw-bg-opacity, 1));
}
.dark\:bg-brand-500\/10:is(.dark *) {
    background-color: rgb(99 102 241 / 0.1);
}
.dark\:bg-brand-500\/15:is(.dark *) {
    background-color: rgb(99 102 241 / 0.15);
}
.dark\:bg-brand-500\/20:is(.dark *) {
    background-color: rgb(99 102 241 / 0.2);
}
.dark\:bg-brand-500\/5:is(.dark *) {
    background-color: rgb(99 102 241 / 0.05);
}
.dark\:bg-brand-600\/10:is(.dark *) {
    background-color: rgb(79 70 229 / 0.1);
}
.dark\:bg-brand-950:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 27 75 / var(--tw-bg-opacity, 1));
}
.dark\:bg-brand-950\/20:is(.dark *) {
    background-color: rgb(30 27 75 / 0.2);
}
.dark\:bg-brand-950\/30:is(.dark *) {
    background-color: rgb(30 27 75 / 0.3);
}
.dark\:bg-brand-950\/60:is(.dark *) {
    background-color: rgb(30 27 75 / 0.6);
}
.dark\:bg-emerald-500\/10:is(.dark *) {
    background-color: rgb(16 185 129 / 0.1);
}
.dark\:bg-emerald-500\/15:is(.dark *) {
    background-color: rgb(16 185 129 / 0.15);
}
.dark\:bg-emerald-500\/20:is(.dark *) {
    background-color: rgb(16 185 129 / 0.2);
}
.dark\:bg-emerald-500\/5:is(.dark *) {
    background-color: rgb(16 185 129 / 0.05);
}
.dark\:bg-emerald-950\/20:is(.dark *) {
    background-color: rgb(2 44 34 / 0.2);
}
.dark\:bg-emerald-950\/40:is(.dark *) {
    background-color: rgb(2 44 34 / 0.4);
}
.dark\:bg-indigo-500\/10:is(.dark *) {
    background-color: rgb(99 102 241 / 0.1);
}
.dark\:bg-orange-500\/10:is(.dark *) {
    background-color: rgb(249 115 22 / 0.1);
}
.dark\:bg-rose-500\/10:is(.dark *) {
    background-color: rgb(244 63 94 / 0.1);
}
.dark\:bg-rose-950\/10:is(.dark *) {
    background-color: rgb(76 5 25 / 0.1);
}
.dark\:bg-slate-200:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.dark\:bg-slate-500:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
}
.dark\:bg-slate-600:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
.dark\:bg-slate-700:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.dark\:bg-slate-700\/60:is(.dark *) {
    background-color: rgb(51 65 85 / 0.6);
}
.dark\:bg-slate-800:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.dark\:bg-slate-800\/20:is(.dark *) {
    background-color: rgb(30 41 59 / 0.2);
}
.dark\:bg-slate-800\/30:is(.dark *) {
    background-color: rgb(30 41 59 / 0.3);
}
.dark\:bg-slate-800\/40:is(.dark *) {
    background-color: rgb(30 41 59 / 0.4);
}
.dark\:bg-slate-800\/50:is(.dark *) {
    background-color: rgb(30 41 59 / 0.5);
}
.dark\:bg-slate-800\/60:is(.dark *) {
    background-color: rgb(30 41 59 / 0.6);
}
.dark\:bg-slate-800\/80:is(.dark *) {
    background-color: rgb(30 41 59 / 0.8);
}
.dark\:bg-slate-900:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.dark\:bg-slate-900\/50:is(.dark *) {
    background-color: rgb(15 23 42 / 0.5);
}
.dark\:bg-slate-900\/60:is(.dark *) {
    background-color: rgb(15 23 42 / 0.6);
}
.dark\:bg-slate-900\/90:is(.dark *) {
    background-color: rgb(15 23 42 / 0.9);
}
.dark\:bg-slate-900\/95:is(.dark *) {
    background-color: rgb(15 23 42 / 0.95);
}
.dark\:bg-slate-950:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}
.dark\:bg-slate-950\/40:is(.dark *) {
    background-color: rgb(2 6 23 / 0.4);
}
.dark\:\!text-amber-300:is(.dark *) {
    --tw-text-opacity: 1 !important;
    color: rgb(252 211 77 / var(--tw-text-opacity, 1)) !important;
}
.dark\:text-amber-100:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.dark\:text-brand-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(199 210 254 / var(--tw-text-opacity, 1));
}
.dark\:text-brand-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}
.dark\:text-brand-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-100:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-100\/80:is(.dark *) {
    color: rgb(209 250 229 / 0.8);
}
.dark\:text-emerald-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-300\/80:is(.dark *) {
    color: rgb(110 231 183 / 0.8);
}
.dark\:text-emerald-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.dark\:text-orange-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(254 215 170 / var(--tw-text-opacity, 1));
}
.dark\:text-rose-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(254 205 211 / var(--tw-text-opacity, 1));
}
.dark\:text-rose-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.dark\:text-rose-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-100:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-500:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-600:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-700:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-800:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-900:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.dark\:text-white:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:ring-amber-500\/50:is(.dark *) {
    --tw-ring-color: rgb(245 158 11 / 0.5);
}
.dark\:ring-slate-700:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(51 65 85 / var(--tw-ring-opacity, 1));
}
.dark\:ring-slate-800:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(30 41 59 / var(--tw-ring-opacity, 1));
}
.dark\:ring-slate-900:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(15 23 42 / var(--tw-ring-opacity, 1));
}
.dark\:ring-offset-slate-900:is(.dark *) {
    --tw-ring-offset-color: #0f172a;
}
.dark\:focus-within\:bg-brand-500\/10:focus-within:is(.dark *) {
    background-color: rgb(99 102 241 / 0.1);
}
.dark\:hover\:border-brand-900:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(49 46 129 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-slate-400:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-slate-500:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-slate-600:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-slate-700:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.dark\:hover\:bg-brand-500\/10:hover:is(.dark *) {
    background-color: rgb(99 102 241 / 0.1);
}
.dark\:hover\:bg-brand-600:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-brand-600\/20:hover:is(.dark *) {
    background-color: rgb(79 70 229 / 0.2);
}
.dark\:hover\:bg-rose-500\/20:hover:is(.dark *) {
    background-color: rgb(244 63 94 / 0.2);
}
.dark\:hover\:bg-slate-700:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-slate-800:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-slate-800\/30:hover:is(.dark *) {
    background-color: rgb(30 41 59 / 0.3);
}
.dark\:hover\:bg-slate-800\/40:hover:is(.dark *) {
    background-color: rgb(30 41 59 / 0.4);
}
.dark\:hover\:bg-slate-800\/50:hover:is(.dark *) {
    background-color: rgb(30 41 59 / 0.5);
}
.dark\:hover\:bg-slate-800\/60:hover:is(.dark *) {
    background-color: rgb(30 41 59 / 0.6);
}
.dark\:hover\:bg-slate-800\/70:hover:is(.dark *) {
    background-color: rgb(30 41 59 / 0.7);
}
.dark\:hover\:bg-slate-900:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-slate-900\/50:hover:is(.dark *) {
    background-color: rgb(15 23 42 / 0.5);
}
.dark\:hover\:text-brand-300:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-brand-400:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-rose-400:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-slate-200:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-white:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:focus\:bg-slate-800:focus:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.dark\:focus\:bg-slate-900:focus:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.group:hover .dark\:group-hover\:text-brand-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.group:hover .dark\:group-hover\:text-slate-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
@media not all and (min-width: 768px) {
    .max-md\:h-10 {
        height: 2.5rem;
    }
    .max-md\:h-5 {
        height: 1.25rem;
    }
    .max-md\:h-6 {
        height: 1.5rem;
    }
    .max-md\:min-h-\[2\.5rem\] {
        min-height: 2.5rem;
    }
    .max-md\:min-h-\[2\.75rem\] {
        min-height: 2.75rem;
    }
    .max-md\:min-h-\[2rem\] {
        min-height: 2rem;
    }
    .max-md\:w-10 {
        width: 2.5rem;
    }
    .max-md\:w-5 {
        width: 1.25rem;
    }
    .max-md\:w-6 {
        width: 1.5rem;
    }
    .max-md\:min-w-\[2\.25rem\] {
        min-width: 2.25rem;
    }
    .max-md\:justify-center {
        justify-content: center;
    }
    .max-md\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}
@media not all and (min-width: 640px) {
    .max-sm\:order-first {
        order: -9999;
    }
    .max-sm\:col-span-2 {
        grid-column: span 2 / span 2;
    }
}
@media (min-width: 640px) {
    .sm\:absolute {
        position: absolute;
    }
    .sm\:inset-x-auto {
        left: auto;
        right: auto;
    }
    .sm\:inset-y-0 {
        top: 0px;
        bottom: 0px;
    }
    .sm\:left-auto {
        left: auto;
    }
    .sm\:right-0 {
        right: 0px;
    }
    .sm\:top-full {
        top: 100%;
    }
    .sm\:col-span-1 {
        grid-column: span 1 / span 1;
    }
    .sm\:col-span-12 {
        grid-column: span 12 / span 12;
    }
    .sm\:col-span-2 {
        grid-column: span 2 / span 2;
    }
    .sm\:col-span-3 {
        grid-column: span 3 / span 3;
    }
    .sm\:col-span-4 {
        grid-column: span 4 / span 4;
    }
    .sm\:col-span-5 {
        grid-column: span 5 / span 5;
    }
    .sm\:col-span-6 {
        grid-column: span 6 / span 6;
    }
    .sm\:col-span-7 {
        grid-column: span 7 / span 7;
    }
    .sm\:col-span-8 {
        grid-column: span 8 / span 8;
    }
    .sm\:mx-0 {
        margin-left: 0px;
        margin-right: 0px;
    }
    .sm\:ml-auto {
        margin-left: auto;
    }
    .sm\:mt-2 {
        margin-top: 0.5rem;
    }
    .sm\:block {
        display: block;
    }
    .sm\:inline {
        display: inline;
    }
    .sm\:flex {
        display: flex;
    }
    .sm\:inline-flex {
        display: inline-flex;
    }
    .sm\:table-cell {
        display: table-cell;
    }
    .sm\:contents {
        display: contents;
    }
    .sm\:hidden {
        display: none;
    }
    .sm\:max-h-96 {
        max-height: 24rem;
    }
    .sm\:min-h-0 {
        min-height: 0px;
    }
    .sm\:min-h-\[2\.25rem\] {
        min-height: 2.25rem;
    }
    .sm\:min-h-\[2rem\] {
        min-height: 2rem;
    }
    .sm\:w-1\/2 {
        width: 50%;
    }
    .sm\:w-40 {
        width: 10rem;
    }
    .sm\:w-56 {
        width: 14rem;
    }
    .sm\:w-64 {
        width: 16rem;
    }
    .sm\:w-72 {
        width: 18rem;
    }
    .sm\:w-80 {
        width: 20rem;
    }
    .sm\:w-96 {
        width: 24rem;
    }
    .sm\:w-\[440px\] {
        width: 440px;
    }
    .sm\:w-auto {
        width: auto;
    }
    .sm\:max-w-\[50\%\] {
        max-width: 50%;
    }
    .sm\:max-w-xs {
        max-width: 20rem;
    }
    .sm\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .sm\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .sm\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .sm\:grid-cols-\[14rem_1fr\] {
        grid-template-columns: 14rem 1fr;
    }
    .sm\:grid-cols-\[1fr_12rem_9rem\] {
        grid-template-columns: 1fr 12rem 9rem;
    }
    .sm\:grid-cols-\[1fr_7rem_11rem\] {
        grid-template-columns: 1fr 7rem 11rem;
    }
    .sm\:grid-cols-\[1fr_9rem\] {
        grid-template-columns: 1fr 9rem;
    }
    .sm\:grid-cols-\[1fr_auto_1fr\] {
        grid-template-columns: 1fr auto 1fr;
    }
    .sm\:grid-cols-\[7rem_9rem_1fr_auto\] {
        grid-template-columns: 7rem 9rem 1fr auto;
    }
    .sm\:grid-cols-\[auto_1fr\] {
        grid-template-columns: auto 1fr;
    }
    .sm\:flex-row {
        flex-direction: row;
    }
    .sm\:flex-col {
        flex-direction: column;
    }
    .sm\:flex-wrap {
        flex-wrap: wrap;
    }
    .sm\:items-start {
        align-items: flex-start;
    }
    .sm\:items-end {
        align-items: flex-end;
    }
    .sm\:items-center {
        align-items: center;
    }
    .sm\:justify-end {
        justify-content: flex-end;
    }
    .sm\:justify-between {
        justify-content: space-between;
    }
    .sm\:gap-2 {
        gap: 0.5rem;
    }
    .sm\:gap-3 {
        gap: 0.75rem;
    }
    .sm\:gap-5 {
        gap: 1.25rem;
    }
    .sm\:self-auto {
        align-self: auto;
    }
    .sm\:whitespace-nowrap {
        white-space: nowrap;
    }
    .sm\:rounded-2xl {
        border-radius: 1rem;
    }
    .sm\:border {
        border-width: 1px;
    }
    .sm\:border-l {
        border-left-width: 1px;
    }
    .sm\:border-slate-200 {
        --tw-border-opacity: 1;
        border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    }
    .sm\:p-10 {
        padding: 2.5rem;
    }
    .sm\:p-12 {
        padding: 3rem;
    }
    .sm\:p-4 {
        padding: 1rem;
    }
    .sm\:p-5 {
        padding: 1.25rem;
    }
    .sm\:p-6 {
        padding: 1.5rem;
    }
    .sm\:p-8 {
        padding: 2rem;
    }
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .sm\:py-1 {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
    .sm\:pl-3 {
        padding-left: 0.75rem;
    }
    .sm\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .sm\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .sm\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .sm\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .sm\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .dark\:sm\:border-slate-800:is(.dark *) {
        --tw-border-opacity: 1;
        border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    }
}
@media (min-width: 768px) {
    .md\:col-span-3 {
        grid-column: span 3 / span 3;
    }
    .md\:block {
        display: block;
    }
    .md\:inline {
        display: inline;
    }
    .md\:flex {
        display: flex;
    }
    .md\:\!inline-flex {
        display: inline-flex !important;
    }
    .md\:table-cell {
        display: table-cell;
    }
    .md\:hidden {
        display: none;
    }
    .md\:w-56 {
        width: 14rem;
    }
    .md\:w-80 {
        width: 20rem;
    }
    .md\:w-96 {
        width: 24rem;
    }
    .md\:w-auto {
        width: auto;
    }
    .md\:min-w-\[16rem\] {
        min-width: 16rem;
    }
    .md\:cursor-grab {
        cursor: grab;
    }
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .md\:flex-row {
        flex-direction: row;
    }
    .md\:flex-col {
        flex-direction: column;
    }
    .md\:items-start {
        align-items: flex-start;
    }
    .md\:items-end {
        align-items: flex-end;
    }
    .md\:items-center {
        align-items: center;
    }
    .md\:justify-between {
        justify-content: space-between;
    }
    .md\:divide-x > :not([hidden]) ~ :not([hidden]) {
        --tw-divide-x-reverse: 0;
        border-right-width: calc(1px * var(--tw-divide-x-reverse));
        border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
    }
    .md\:divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
        --tw-divide-opacity: 1;
        border-color: rgb(241 245 249 / var(--tw-divide-opacity, 1));
    }
    .md\:self-auto {
        align-self: auto;
    }
    .md\:border-l {
        border-left-width: 1px;
    }
    .md\:border-l-2 {
        border-left-width: 2px;
    }
    .md\:border-t-0 {
        border-top-width: 0px;
    }
    .md\:border-slate-200 {
        --tw-border-opacity: 1;
        border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    }
    .md\:p-7 {
        padding: 1.75rem;
    }
    .md\:pl-4 {
        padding-left: 1rem;
    }
    .md\:pl-6 {
        padding-left: 1.5rem;
    }
    .md\:pt-0 {
        padding-top: 0px;
    }
    .md\:active\:cursor-grabbing:active {
        cursor: grabbing;
    }
    .dark\:md\:divide-slate-800:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
        --tw-divide-opacity: 1;
        border-color: rgb(30 41 59 / var(--tw-divide-opacity, 1));
    }
    .md\:dark\:border-slate-800:is(.dark *) {
        --tw-border-opacity: 1;
        border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    }
}
@media (min-width: 1024px) {
    .lg\:absolute {
        position: absolute;
    }
    .lg\:inset-0 {
        inset: 0px;
    }
    .lg\:col-span-1 {
        grid-column: span 1 / span 1;
    }
    .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }
    .lg\:col-span-3 {
        grid-column: span 3 / span 3;
    }
    .lg\:col-span-4 {
        grid-column: span 4 / span 4;
    }
    .lg\:col-span-5 {
        grid-column: span 5 / span 5;
    }
    .lg\:col-span-6 {
        grid-column: span 6 / span 6;
    }
    .lg\:col-span-7 {
        grid-column: span 7 / span 7;
    }
    .lg\:col-span-8 {
        grid-column: span 8 / span 8;
    }
    .lg\:mx-auto {
        margin-left: auto;
        margin-right: auto;
    }
    .lg\:ml-0 {
        margin-left: 0px;
    }
    .lg\:ml-auto {
        margin-left: auto;
    }
    .lg\:block {
        display: block;
    }
    .lg\:inline {
        display: inline;
    }
    .lg\:flex {
        display: flex;
    }
    .lg\:inline-flex {
        display: inline-flex;
    }
    .lg\:contents {
        display: contents;
    }
    .lg\:hidden {
        display: none;
    }
    .lg\:min-h-\[32rem\] {
        min-height: 32rem;
    }
    .lg\:w-40 {
        width: 10rem;
    }
    .lg\:w-44 {
        width: 11rem;
    }
    .lg\:w-52 {
        width: 13rem;
    }
    .lg\:w-56 {
        width: 14rem;
    }
    .lg\:w-60 {
        width: 15rem;
    }
    .lg\:w-64 {
        width: 16rem;
    }
    .lg\:w-80 {
        width: 20rem;
    }
    .lg\:w-96 {
        width: 24rem;
    }
    .lg\:w-\[30rem\] {
        width: 30rem;
    }
    .lg\:w-auto {
        width: auto;
    }
    .lg\:cursor-grab {
        cursor: grab;
    }
    .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .lg\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .lg\:grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    .lg\:grid-cols-\[14rem_1fr\] {
        grid-template-columns: 14rem 1fr;
    }
    .lg\:grid-cols-\[18rem_1fr\] {
        grid-template-columns: 18rem 1fr;
    }
    .lg\:flex-row {
        flex-direction: row;
    }
    .lg\:items-start {
        align-items: flex-start;
    }
    .lg\:items-end {
        align-items: flex-end;
    }
    .lg\:items-center {
        align-items: center;
    }
    .lg\:justify-end {
        justify-content: flex-end;
    }
    .lg\:justify-between {
        justify-content: space-between;
    }
    .lg\:self-auto {
        align-self: auto;
    }
    .lg\:overflow-y-auto {
        overflow-y: auto;
    }
    .lg\:p-14 {
        padding: 3.5rem;
    }
    .lg\:p-8 {
        padding: 2rem;
    }
    .lg\:px-12 {
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .lg\:active\:cursor-grabbing:active {
        cursor: grabbing;
    }
}
@media (min-width: 1280px) {
    .xl\:col-span-2 {
        grid-column: span 2 / span 2;
    }
    .xl\:col-span-3 {
        grid-column: span 3 / span 3;
    }
    .xl\:-mr-2 {
        margin-right: -0.5rem;
    }
    .xl\:inline {
        display: inline;
    }
    .xl\:flex {
        display: flex;
    }
    .xl\:\!inline-flex {
        display: inline-flex !important;
    }
    .xl\:table-cell {
        display: table-cell;
    }
    .xl\:\!hidden {
        display: none !important;
    }
    .xl\:hidden {
        display: none;
    }
    .xl\:max-h-\[calc\(100dvh-6\.5rem\)\] {
        max-height: calc(100dvh - 6.5rem);
    }
    .xl\:min-h-0 {
        min-height: 0px;
    }
    .xl\:flex-1 {
        flex: 1 1 0%;
    }
    .xl\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .xl\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .xl\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .xl\:grid-cols-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
    .xl\:flex-col {
        flex-direction: column;
    }
    .xl\:overflow-y-auto {
        overflow-y: auto;
    }
    .xl\:overscroll-contain {
        overscroll-behavior: contain;
    }
    .xl\:pr-2 {
        padding-right: 0.5rem;
    }
    .xl\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}