@layer properties;@layer theme, base, components, utilities;@layer theme{:root, :host{--font-sans: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50: oklch(97.1% 0.013 17.38);--color-red-100: oklch(93.6% 0.032 17.717);--color-red-700: oklch(50.5% 0.213 27.518);--color-amber-100: oklch(96.2% 0.059 95.617);--color-amber-600: oklch(66.6% 0.179 58.318);--color-amber-700: oklch(55.5% 0.163 48.998);--color-amber-900: oklch(41.4% 0.112 45.904);--color-emerald-50: oklch(97.9% 0.021 166.113);--color-emerald-700: oklch(50.8% 0.118 165.612);--color-emerald-800: oklch(43.2% 0.095 166.913);--color-rose-50: #fdf2f8;--color-rose-700: #be185d;--color-rose-800: #9d174d;--color-rose-900: #831843;--color-slate-50: oklch(98.4% 0.003 247.858);--color-slate-100: oklch(96.8% 0.007 247.896);--color-slate-200: oklch(92.9% 0.013 255.508);--color-slate-300: oklch(86.9% 0.022 252.894);--color-slate-400: oklch(70.4% 0.04 256.788);--color-slate-500: oklch(55.4% 0.046 257.417);--color-slate-600: oklch(44.6% 0.043 257.281);--color-slate-700: oklch(37.2% 0.044 257.287);--color-slate-800: oklch(27.9% 0.041 260.031);--color-slate-900: oklch(20.8% 0.042 265.755);--color-gray-200: oklch(92.8% 0.006 264.531);--color-white: #fff;--spacing: 0.25rem;--container-md: 28rem;--text-xs: 0.75rem;--text-xs--line-height: calc(1 / 0.75);--text-sm: 0.875rem;--text-sm--line-height: calc(1.25 / 0.875);--text-base: 1rem;--text-base--line-height: calc(1.5 / 1);--text-lg: 1.125rem;--text-lg--line-height: calc(1.75 / 1.125);--text-2xl: 1.5rem;--text-2xl--line-height: calc(2 / 1.5);--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--leading-snug: 1.375;--leading-relaxed: 1.625;--radius-md: 0.375rem;--radius-lg: 0.5rem;--radius-xl: 0.75rem;--radius-2xl: 1rem;--ease-out: cubic-bezier(0, 0, 0.2, 1);--default-transition-duration: 150ms;--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);--default-font-family: var(--font-sans);--default-mono-font-family: var(--font-mono)}
}
@layer base{*, ::after, ::before, ::backdrop, ::file-selector-button{box-sizing: border-box;margin: 0;padding: 0;border: 0 solid}
html, :host{line-height: 1.5;-webkit-text-size-adjust: 100%;tab-size: 4;font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings: var(--default-font-feature-settings, normal);font-variation-settings: var(--default-font-variation-settings, normal);-webkit-tap-highlight-color: transparent}
hr{height: 0;color: inherit;border-top-width: 1px}
abbr:where([title]){-webkit-text-decoration: underline dotted;text-decoration: underline dotted}
h1, h2, h3, h4, h5, h6{font-size: inherit;font-weight: inherit}
a{color: inherit;-webkit-text-decoration: inherit;text-decoration: inherit}
b, strong{font-weight: bolder}
code, kbd, samp, pre{font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings: var(--default-mono-font-feature-settings, normal);font-variation-settings: var(--default-mono-font-variation-settings, normal);font-size: 1em}
small{font-size: 80%}
sub, sup{font-size: 75%;line-height: 0;position: relative;vertical-align: baseline}
sub{bottom: -0.25em}
sup{top: -0.5em}
table{text-indent: 0;border-color: inherit;border-collapse: collapse}
:-moz-focusring:where(:not(iframe)){outline: auto}
progress{vertical-align: baseline}
summary{display: list-item}
ol, ul, menu{list-style: none}
img, svg, video, canvas, audio, iframe, embed, object{display: block;vertical-align: middle}
img, video{max-width: 100%;height: auto}
button, input, select, optgroup, textarea, ::file-selector-button{font: inherit;font-feature-settings: inherit;font-variation-settings: inherit;letter-spacing: inherit;color: inherit;border-radius: 0;background-color: transparent;opacity: 1}
:where(select:is([multiple], [size])) optgroup{font-weight: bolder}
:where(select:is([multiple], [size])) optgroup option{padding-inline-start: 20px}
::file-selector-button{margin-inline-end: 4px}
::placeholder{opacity: 1}
@supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px){::placeholder{color: currentcolor;@supports (color: color-mix(in lab, red, red)){color: color-mix(in oklab, currentcolor 50%, transparent)}
}
}
textarea{resize: vertical}
::-webkit-search-decoration{-webkit-appearance: none}
::-webkit-date-and-time-value{min-height: 1lh;text-align: inherit}
::-webkit-datetime-edit{display: inline-flex}
::-webkit-datetime-edit-fields-wrapper{padding: 0}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field{padding-block: 0}
::-webkit-calendar-picker-indicator{line-height: 1}
:-moz-ui-invalid{box-shadow: none}
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button{appearance: button}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button{height: auto}
[hidden]:where(:not([hidden="until-found"])){display: none !important}
}
@layer utilities{.invisible{visibility: hidden}
.visible{visibility: visible}
.sr-only{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip-path: inset(50%);white-space: nowrap;border-width: 0}
.absolute{position: absolute}
.fixed{position: fixed}
.relative{position: relative}
.static{position: static}
.sticky{position: sticky}
.inset-0{inset: 0px}
.inset-x-0{inset-inline: 0px}
.start-2{inset-inline-start: calc(var(--spacing) * 2)}
.end-2{inset-inline-end: calc(var(--spacing) * 2)}
.top-0{top: 0px}
.bottom-0{bottom: 0px}
.bottom-2{bottom: calc(var(--spacing) * 2)}
.z-30{z-index: 30}
.col-span-2{grid-column: span 2 / span 2}
.mx-auto{margin-inline: auto}
.ms-auto{margin-inline-start: auto}
.\!mt-0{margin-top: 0px !important}
.mt-0\.5{margin-top: calc(var(--spacing) * 0.5)}
.mt-1{margin-top: var(--spacing)}
.mt-2{margin-top: calc(var(--spacing) * 2)}
.mt-3{margin-top: calc(var(--spacing) * 3)}
.mt-4{margin-top: calc(var(--spacing) * 4)}
.mt-5{margin-top: calc(var(--spacing) * 5)}
.mt-6{margin-top: calc(var(--spacing) * 6)}
.\!mb-0{margin-bottom: 0px !important}
.mb-1{margin-bottom: var(--spacing)}
.mb-1\.5{margin-bottom: calc(var(--spacing) * 1.5)}
.mb-2{margin-bottom: calc(var(--spacing) * 2)}
.mb-3{margin-bottom: calc(var(--spacing) * 3)}
.mb-4{margin-bottom: calc(var(--spacing) * 4)}
.block{display: block}
.flex{display: flex}
.grid{display: grid}
.hidden{display: none}
.inline-grid{display: inline-grid}
.\!size-10{width: calc(var(--spacing) * 10) !important;height: calc(var(--spacing) * 10) !important}
.size-3{width: calc(var(--spacing) * 3);height: calc(var(--spacing) * 3)}
.size-4{width: calc(var(--spacing) * 4);height: calc(var(--spacing) * 4)}
.size-5{width: calc(var(--spacing) * 5);height: calc(var(--spacing) * 5)}
.size-6{width: calc(var(--spacing) * 6);height: calc(var(--spacing) * 6)}
.size-8{width: calc(var(--spacing) * 8);height: calc(var(--spacing) * 8)}
.size-10{width: calc(var(--spacing) * 10);height: calc(var(--spacing) * 10)}
.size-12{width: calc(var(--spacing) * 12);height: calc(var(--spacing) * 12)}
.size-16{width: calc(var(--spacing) * 16);height: calc(var(--spacing) * 16)}
.size-20{width: calc(var(--spacing) * 20);height: calc(var(--spacing) * 20)}
.size-24{width: calc(var(--spacing) * 24);height: calc(var(--spacing) * 24)}
.\!h-9{height: calc(var(--spacing) * 9) !important}
.\!h-10{height: calc(var(--spacing) * 10) !important}
.h-2{height: calc(var(--spacing) * 2)}
.h-7{height: calc(var(--spacing) * 7)}
.h-11{height: calc(var(--spacing) * 11)}
.h-14{height: calc(var(--spacing) * 14)}
.h-16{height: calc(var(--spacing) * 16)}
.h-\[46px\]{height: 46px}
.h-\[72px\]{height: 72px}
.h-full{height: 100%}
.min-h-dvh{min-height: 100dvh}
.\!w-32{width: calc(var(--spacing) * 32) !important}
.\!w-40{width: calc(var(--spacing) * 40) !important}
.w-14{width: calc(var(--spacing) * 14)}
.w-fit{width: fit-content}
.w-full{width: 100%}
.max-w-\[340px\]{max-width: 340px}
.max-w-\[1400px\]{max-width: 1400px}
.max-w-md{max-width: var(--container-md)}
.min-w-0{min-width: 0px}
.flex-1{flex: 1}
.shrink-0{flex-shrink: 0}
.cursor-pointer{cursor: pointer}
.grid-cols-2{grid-template-columns: repeat(2, minmax(0, 1fr))}
.grid-cols-3{grid-template-columns: repeat(3, minmax(0, 1fr))}
.flex-col{flex-direction: column}
.flex-wrap{flex-wrap: wrap}
.place-items-center{place-items: center}
.items-center{align-items: center}
.items-start{align-items: flex-start}
.items-stretch{align-items: stretch}
.justify-between{justify-content: space-between}
.justify-center{justify-content: center}
.gap-0\.5{gap: calc(var(--spacing) * 0.5)}
.gap-1{gap: var(--spacing)}
.gap-1\.5{gap: calc(var(--spacing) * 1.5)}
.gap-2{gap: calc(var(--spacing) * 2)}
.gap-3{gap: calc(var(--spacing) * 3)}
.gap-4{gap: calc(var(--spacing) * 4)}
:where(.space-y-2 > :not(:last-child)){--tw-space-y-reverse: 0;margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}
:where(.space-y-4 > :not(:last-child)){--tw-space-y-reverse: 0;margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}
.gap-x-8{column-gap: calc(var(--spacing) * 8)}
:where(.divide-y > :not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style: var(--tw-border-style);border-top-style: var(--tw-border-style);border-top-width: calc(1px * var(--tw-divide-y-reverse));border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)))}
:where(.divide-slate-100 > :not(:last-child)){border-color: var(--color-slate-100)}
.truncate{overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.overflow-hidden{overflow: hidden}
.rounded-2xl{border-radius: var(--radius-2xl)}
.rounded-full{border-radius: calc(infinity * 1px)}
.rounded-lg{border-radius: var(--radius-lg)}
.rounded-md{border-radius: var(--radius-md)}
.rounded-xl{border-radius: var(--radius-xl)}
.border{border-style: var(--tw-border-style);border-width: 1px}
.border-2{border-style: var(--tw-border-style);border-width: 2px}
.border-e{border-inline-end-style: var(--tw-border-style);border-inline-end-width: 1px}
.border-t{border-top-style: var(--tw-border-style);border-top-width: 1px}
.border-b{border-bottom-style: var(--tw-border-style);border-bottom-width: 1px}
.border-dashed{--tw-border-style: dashed;border-style: dashed}
.border-slate-100{border-color: var(--color-slate-100)}
.border-slate-200{border-color: var(--color-slate-200)}
.border-slate-300{border-color: var(--color-slate-300)}
.border-slate-900{border-color: var(--color-slate-900)}
.bg-\[\#F6F4F1\]{background-color: #F6F4F1}
.bg-amber-100{background-color: var(--color-amber-100)}
.bg-amber-600{background-color: var(--color-amber-600)}
.bg-emerald-50{background-color: var(--color-emerald-50)}
.bg-rose-50{background-color: var(--color-rose-50)}
.bg-rose-700{background-color: var(--color-rose-700)}
.bg-slate-50{background-color: var(--color-slate-50)}
.bg-slate-100{background-color: var(--color-slate-100)}
.bg-slate-200\/70{background-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 70%, transparent);@supports (color: color-mix(in lab, red, red)){background-color: color-mix(in oklab, var(--color-slate-200) 70%, transparent)}
}
.bg-slate-900{background-color: var(--color-slate-900)}
.bg-transparent{background-color: transparent}
.bg-white{background-color: var(--color-white)}
.bg-white\/95{background-color: color-mix(in srgb, #fff 95%, transparent);@supports (color: color-mix(in lab, red, red)){background-color: color-mix(in oklab, var(--color-white) 95%, transparent)}
}
.object-cover{object-fit: cover}
.p-1{padding: var(--spacing)}
.p-1\.5{padding: calc(var(--spacing) * 1.5)}
.p-3{padding: calc(var(--spacing) * 3)}
.p-5{padding: calc(var(--spacing) * 5)}
.\!px-3{padding-inline: calc(var(--spacing) * 3) !important}
.px-1{padding-inline: var(--spacing)}
.px-2{padding-inline: calc(var(--spacing) * 2)}
.px-2\.5{padding-inline: calc(var(--spacing) * 2.5)}
.px-3{padding-inline: calc(var(--spacing) * 3)}
.px-3\.5{padding-inline: calc(var(--spacing) * 3.5)}
.px-4{padding-inline: calc(var(--spacing) * 4)}
.px-6{padding-inline: calc(var(--spacing) * 6)}
.py-1{padding-block: var(--spacing)}
.py-2{padding-block: calc(var(--spacing) * 2)}
.py-2\.5{padding-block: calc(var(--spacing) * 2.5)}
.py-3{padding-block: calc(var(--spacing) * 3)}
.py-4{padding-block: calc(var(--spacing) * 4)}
.py-20{padding-block: calc(var(--spacing) * 20)}
.pt-1\.5{padding-top: calc(var(--spacing) * 1.5)}
.pt-2{padding-top: calc(var(--spacing) * 2)}
.pt-3{padding-top: calc(var(--spacing) * 3)}
.pt-4{padding-top: calc(var(--spacing) * 4)}
.pb-28{padding-bottom: calc(var(--spacing) * 28)}
.pb-\[env\(safe-area-inset-bottom\)\]{padding-bottom: env(safe-area-inset-bottom)}
.text-center{text-align: center}
.text-end{text-align: end}
.text-start{text-align: start}
.font-sans{font-family: var(--font-sans)}
.text-2xl{font-size: var(--text-2xl);line-height: var(--tw-leading, var(--text-2xl--line-height))}
.text-base{font-size: var(--text-base);line-height: var(--tw-leading, var(--text-base--line-height))}
.text-lg{font-size: var(--text-lg);line-height: var(--tw-leading, var(--text-lg--line-height))}
.text-sm{font-size: var(--text-sm);line-height: var(--tw-leading, var(--text-sm--line-height))}
.text-xs{font-size: var(--text-xs);line-height: var(--tw-leading, var(--text-xs--line-height))}
.\!text-\[15px\]{font-size: 15px !important}
.text-\[16px\]{font-size: 16px}
.leading-relaxed{--tw-leading: var(--leading-relaxed);line-height: var(--leading-relaxed)}
.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight: var(--font-weight-bold)}
.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight: var(--font-weight-medium)}
.font-normal{--tw-font-weight: var(--font-weight-normal);font-weight: var(--font-weight-normal)}
.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight: var(--font-weight-semibold)}
.break-all{word-break: break-all}
.whitespace-nowrap{white-space: nowrap}
.\!text-amber-700{color: var(--color-amber-700) !important}
.\!text-emerald-700{color: var(--color-emerald-700) !important}
.\!text-red-700{color: var(--color-red-700) !important}
.text-amber-700{color: var(--color-amber-700)}
.text-amber-900{color: var(--color-amber-900)}
.text-emerald-800{color: var(--color-emerald-800)}
.text-rose-700{color: var(--color-rose-700)}
.text-slate-400{color: var(--color-slate-400)}
.text-slate-500{color: var(--color-slate-500)}
.text-slate-600{color: var(--color-slate-600)}
.text-slate-700{color: var(--color-slate-700)}
.text-slate-900{color: var(--color-slate-900)}
.text-white{color: var(--color-white)}
.uppercase{text-transform: uppercase}
.line-through{text-decoration-line: line-through}
.underline{text-decoration-line: underline}
.decoration-slate-300{text-decoration-color: var(--color-slate-300)}
.underline-offset-4{text-underline-offset: 4px}
.antialiased{-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}
.opacity-0{opacity: 0%}
.opacity-40{opacity: 40%}
.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
.ring-2{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
.ring-slate-900{--tw-ring-color: var(--color-slate-900)}
.ring-offset-2{--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}
.backdrop-blur{--tw-backdrop-blur: blur(8px);-webkit-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: 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, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));transition-duration: var(--tw-duration, var(--default-transition-duration))}
.transition-\[width\]{transition-property: width;transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));transition-duration: var(--tw-duration, var(--default-transition-duration))}
.ease-out{--tw-ease: var(--ease-out);transition-timing-function: var(--ease-out)}
.outline-none{--tw-outline-style: none;outline-style: none}
.peer-checked\:border-rose-700:is(:where(.peer):checked ~ *){border-color: var(--color-rose-700)}
.peer-checked\:bg-rose-50:is(:where(.peer):checked ~ *){background-color: var(--color-rose-50)}
.peer-focus-visible\:ring-4:is(:where(.peer):focus-visible ~ *){--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
.peer-focus-visible\:ring-rose-700\/25:is(:where(.peer):focus-visible ~ *){--tw-ring-color: color-mix(in srgb, #be185d 25%, transparent);@supports (color: color-mix(in lab, red, red)){--tw-ring-color: color-mix(in oklab, var(--color-rose-700) 25%, transparent)}
}
.focus-within\:border-rose-700:focus-within{border-color: var(--color-rose-700)}
.focus-within\:ring-4:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
.focus-within\:ring-rose-700\/15:focus-within{--tw-ring-color: color-mix(in srgb, #be185d 15%, transparent);@supports (color: color-mix(in lab, red, red)){--tw-ring-color: color-mix(in oklab, var(--color-rose-700) 15%, transparent)}
}
@media (hover: hover){.hover\:scale-105:hover{--tw-scale-x: 105%;--tw-scale-y: 105%;--tw-scale-z: 105%;scale: var(--tw-scale-x) var(--tw-scale-y)}
.hover\:border-slate-400:hover{border-color: var(--color-slate-400)}
.hover\:border-slate-500:hover{border-color: var(--color-slate-500)}
.hover\:\!text-red-700:hover{color: var(--color-red-700) !important}
}
.focus-visible\:ring-4:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
.focus-visible\:ring-rose-700\/25:focus-visible{--tw-ring-color: color-mix(in srgb, #be185d 25%, transparent);@supports (color: color-mix(in lab, red, red)){--tw-ring-color: color-mix(in oklab, var(--color-rose-700) 25%, transparent)}
}
.focus-visible\:outline-none:focus-visible{--tw-outline-style: none;outline-style: none}
@media (width >= 40rem){.sm\:col-span-1{grid-column: span 1 / span 1}
.sm\:mt-0{margin-top: 0px}
.sm\:inline{display: inline}
.sm\:w-64{width: calc(var(--spacing) * 64)}
.sm\:flex-none{flex: none}
.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\:gap-3{gap: calc(var(--spacing) * 3)}
.sm\:px-4{padding-inline: calc(var(--spacing) * 4)}
}
@media (width >= 48rem){.md\:ms-0{margin-inline-start: 0px}
.md\:inline-flex{display: inline-flex}
}
@media (width >= 64rem){.lg\:sticky{position: sticky}
.lg\:top-\[72px\]{top: 72px}
.lg\:\!block{display: block !important}
.lg\:flex{display: flex}
.lg\:grid{display: grid}
.lg\:hidden{display: none}
.lg\:grid-cols-\[minmax\(0\,1fr\)_420px\]{grid-template-columns: minmax(0,1fr) 420px}
.lg\:gap-8{gap: calc(var(--spacing) * 8)}
.lg\:self-start{align-self: flex-start}
.lg\:pb-10{padding-bottom: calc(var(--spacing) * 10)}
}
}
@layer base{*, ::after, ::before, ::backdrop, ::file-selector-button{border-color: var(--color-gray-200, currentColor)}
button:not(:disabled), [role="button"]:not(:disabled){cursor: pointer}
input::placeholder, textarea::placeholder{color: var(--color-slate-400)}
}
@layer components{.k-card{border-radius: var(--radius-2xl);border-style: var(--tw-border-style);border-width: 1px;border-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 80%, transparent);@supports (color: color-mix(in lab, red, red)){border-color: color-mix(in oklab, var(--color-slate-200) 80%, transparent)}
background-color: var(--color-white);padding: calc(var(--spacing) * 4);--tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(16,24,40,.04));box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);@media (width >= 40rem){padding: calc(var(--spacing) * 5)}
}
.k-h{font-size: var(--text-base);line-height: var(--tw-leading, var(--text-base--line-height));--tw-leading: var(--leading-relaxed);line-height: var(--leading-relaxed);--tw-font-weight: var(--font-weight-bold);font-weight: var(--font-weight-bold);color: var(--color-slate-900)}
.k-sub{font-size: var(--text-sm);line-height: var(--tw-leading, var(--text-sm--line-height));--tw-leading: var(--leading-relaxed);line-height: var(--leading-relaxed);color: var(--color-slate-500)}
.k-label{margin-bottom: calc(var(--spacing) * 1.5);display: block;font-size: var(--text-sm);line-height: var(--tw-leading, var(--text-sm--line-height));--tw-leading: var(--leading-relaxed);line-height: var(--leading-relaxed);--tw-font-weight: var(--font-weight-semibold);font-weight: var(--font-weight-semibold);color: var(--color-slate-700)}
.k-hint{margin-top: calc(var(--spacing) * 1.5);font-size: var(--text-xs);line-height: var(--tw-leading, var(--text-xs--line-height));--tw-leading: var(--leading-relaxed);line-height: var(--leading-relaxed);color: var(--color-slate-500)}
.k-input{height: calc(var(--spacing) * 11);width: 100%;border-radius: var(--radius-xl);border-style: var(--tw-border-style);border-width: 1px;border-color: var(--color-slate-300);background-color: var(--color-white);padding-inline: calc(var(--spacing) * 3.5);font-size: 16px;color: var(--color-slate-900);transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));transition-duration: var(--tw-duration, var(--default-transition-duration));--tw-outline-style: none;outline-style: none;&:focus{border-color: var(--color-rose-700)}
&:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
&:focus{--tw-ring-color: color-mix(in srgb, #be185d 15%, transparent);@supports (color: color-mix(in lab, red, red)){--tw-ring-color: color-mix(in oklab, var(--color-rose-700) 15%, transparent)}
}
}
.k-textarea{width: 100%;border-radius: var(--radius-xl);border-style: var(--tw-border-style);border-width: 1px;border-color: var(--color-slate-300);background-color: var(--color-white);padding-inline: calc(var(--spacing) * 3.5);padding-block: calc(var(--spacing) * 2.5);font-size: 16px;--tw-leading: var(--leading-relaxed);line-height: var(--leading-relaxed);color: var(--color-slate-900);transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));transition-duration: var(--tw-duration, var(--default-transition-duration));--tw-outline-style: none;outline-style: none;&:focus{border-color: var(--color-rose-700)}
&:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
&:focus{--tw-ring-color: color-mix(in srgb, #be185d 15%, transparent);@supports (color: color-mix(in lab, red, red)){--tw-ring-color: color-mix(in oklab, var(--color-rose-700) 15%, transparent)}
}
}
.k-btn{display: inline-flex;height: calc(var(--spacing) * 11);cursor: pointer;align-items: center;justify-content: center;gap: calc(var(--spacing) * 2);border-radius: var(--radius-xl);padding-inline: calc(var(--spacing) * 4);font-size: var(--text-sm);line-height: var(--tw-leading, var(--text-sm--line-height));--tw-font-weight: var(--font-weight-semibold);font-weight: var(--font-weight-semibold);transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));transition-duration: var(--tw-duration, var(--default-transition-duration));-webkit-user-select: none;user-select: none;&:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
&:focus-visible{--tw-ring-color: color-mix(in srgb, #be185d 25%, transparent);@supports (color: color-mix(in lab, red, red)){--tw-ring-color: color-mix(in oklab, var(--color-rose-700) 25%, transparent)}
}
&:focus-visible{--tw-outline-style: none;outline-style: none}
&:disabled{cursor: not-allowed}
&:disabled{opacity: 50%}
}
.k-primary{background-color: var(--color-rose-700);color: var(--color-white);&:hover{@media (hover: hover){background-color: var(--color-rose-800)}
}
&:active{background-color: var(--color-rose-900)}
}
.k-ghost{background-color: var(--color-slate-100);color: var(--color-slate-800);&:hover{@media (hover: hover){background-color: var(--color-slate-200)}
}
}
.k-outline{border-style: var(--tw-border-style);border-width: 1px;border-color: var(--color-slate-300);background-color: var(--color-white);color: var(--color-slate-800);&:hover{@media (hover: hover){background-color: var(--color-slate-50)}
}
}
.k-danger{background-color: var(--color-red-50);color: var(--color-red-700);&:hover{@media (hover: hover){background-color: var(--color-red-100)}
}
}
.k-icon{display: inline-grid;width: calc(var(--spacing) * 11);height: calc(var(--spacing) * 11);cursor: pointer;place-items: center;border-radius: var(--radius-xl);color: var(--color-slate-600);transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));transition-duration: var(--tw-duration, var(--default-transition-duration));&:hover{@media (hover: hover){background-color: var(--color-slate-100)}
}
&:hover{@media (hover: hover){color: var(--color-slate-900)}
}
&:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
&:focus-visible{--tw-ring-color: color-mix(in srgb, #be185d 25%, transparent);@supports (color: color-mix(in lab, red, red)){--tw-ring-color: color-mix(in oklab, var(--color-rose-700) 25%, transparent)}
}
&:focus-visible{--tw-outline-style: none;outline-style: none}
&:disabled{cursor: not-allowed}
&:disabled{opacity: 30%}
}
.k-seg{display: flex;gap: var(--spacing);border-radius: var(--radius-xl);background-color: var(--color-slate-100);padding: var(--spacing)}
.k-seg label{flex: 1}
.k-seg span{display: flex;height: calc(var(--spacing) * 10);cursor: pointer;align-items: center;justify-content: center;border-radius: var(--radius-lg);padding-inline: calc(var(--spacing) * 2);text-align: center;font-size: var(--text-sm);line-height: var(--tw-leading, var(--text-sm--line-height));--tw-leading: var(--leading-snug);line-height: var(--leading-snug);--tw-font-weight: var(--font-weight-semibold);font-weight: var(--font-weight-semibold);color: var(--color-slate-600);transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));transition-duration: var(--tw-duration, var(--default-transition-duration))}
.k-seg input:checked + span{background-color: var(--color-white);color: var(--color-slate-900);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
.k-seg input:focus-visible + span{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color: color-mix(in srgb, #be185d 25%, transparent);@supports (color: color-mix(in lab, red, red)){--tw-ring-color: color-mix(in oklab, var(--color-rose-700) 25%, transparent)}
}
.k-row{display: flex;min-height: 48px;align-items: center;justify-content: space-between;gap: calc(var(--spacing) * 3);padding-block: var(--spacing)}
}
@property --tw-space-y-reverse{syntax: "*";inherits: false;initial-value: 0}
@property --tw-divide-y-reverse{syntax: "*";inherits: false;initial-value: 0}
@property --tw-border-style{syntax: "*";inherits: false;initial-value: solid}
@property --tw-leading{syntax: "*";inherits: false}
@property --tw-font-weight{syntax: "*";inherits: false}
@property --tw-shadow{syntax: "*";inherits: false;initial-value: 0 0 #0000}
@property --tw-shadow-color{syntax: "*";inherits: false}
@property --tw-shadow-alpha{syntax: "<percentage>";inherits: false;initial-value: 100%}
@property --tw-inset-shadow{syntax: "*";inherits: false;initial-value: 0 0 #0000}
@property --tw-inset-shadow-color{syntax: "*";inherits: false}
@property --tw-inset-shadow-alpha{syntax: "<percentage>";inherits: false;initial-value: 100%}
@property --tw-ring-color{syntax: "*";inherits: false}
@property --tw-ring-shadow{syntax: "*";inherits: false;initial-value: 0 0 #0000}
@property --tw-inset-ring-color{syntax: "*";inherits: false}
@property --tw-inset-ring-shadow{syntax: "*";inherits: false;initial-value: 0 0 #0000}
@property --tw-ring-inset{syntax: "*";inherits: false}
@property --tw-ring-offset-width{syntax: "<length>";inherits: false;initial-value: 0px}
@property --tw-ring-offset-color{syntax: "*";inherits: false;initial-value: #fff}
@property --tw-ring-offset-shadow{syntax: "*";inherits: false;initial-value: 0 0 #0000}
@property --tw-backdrop-blur{syntax: "*";inherits: false}
@property --tw-backdrop-brightness{syntax: "*";inherits: false}
@property --tw-backdrop-contrast{syntax: "*";inherits: false}
@property --tw-backdrop-grayscale{syntax: "*";inherits: false}
@property --tw-backdrop-hue-rotate{syntax: "*";inherits: false}
@property --tw-backdrop-invert{syntax: "*";inherits: false}
@property --tw-backdrop-opacity{syntax: "*";inherits: false}
@property --tw-backdrop-saturate{syntax: "*";inherits: false}
@property --tw-backdrop-sepia{syntax: "*";inherits: false}
@property --tw-ease{syntax: "*";inherits: false}
@property --tw-scale-x{syntax: "*";inherits: false;initial-value: 1}
@property --tw-scale-y{syntax: "*";inherits: false;initial-value: 1}
@property --tw-scale-z{syntax: "*";inherits: false;initial-value: 1}
@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*, ::before, ::after, ::backdrop{--tw-space-y-reverse: 0;--tw-divide-y-reverse: 0;--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-backdrop-blur: initial;--tw-backdrop-brightness: initial;--tw-backdrop-contrast: initial;--tw-backdrop-grayscale: initial;--tw-backdrop-hue-rotate: initial;--tw-backdrop-invert: initial;--tw-backdrop-opacity: initial;--tw-backdrop-saturate: initial;--tw-backdrop-sepia: initial;--tw-ease: initial;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1}
}
}