/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@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-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-divide-y-reverse:0;--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-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:-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-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-amber-200:oklch(92.4% .12 95.746);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-500:oklch(76.9% .188 70.08);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-900:oklch(41.4% .112 45.904);--color-amber-950:oklch(27.9% .077 45.635);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-400:oklch(76.5% .177 163.223);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-800:oklch(43.2% .095 166.913);--color-emerald-900:oklch(37.8% .077 168.94);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-blue-900:oklch(37.9% .146 265.522);--color-blue-950:oklch(28.2% .091 267.935);--color-rose-100:oklch(94.1% .03 12.58);--color-rose-200:oklch(89.2% .058 10.001);--color-rose-500:oklch(64.5% .246 16.439);--color-rose-600:oklch(58.6% .253 17.585);--color-rose-900:oklch(41% .159 10.272);--color-rose-950:oklch(27.1% .105 12.094);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-neutral-50:oklch(98.5% 0 none);--color-neutral-100:oklch(97% 0 none);--color-neutral-200:oklch(92.2% 0 none);--color-neutral-300:oklch(87% 0 none);--color-neutral-400:oklch(70.8% 0 none);--color-neutral-500:oklch(55.6% 0 none);--color-neutral-600:oklch(43.9% 0 none);--color-neutral-700:oklch(37.1% 0 none);--color-neutral-800:oklch(26.9% 0 none);--color-neutral-900:oklch(20.5% 0 none);--color-neutral-950:oklch(14.5% 0 none);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .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-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--font-weight-light:300;--font-weight-medium:500;--font-weight-semibold:600;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;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;-webkit-text-decoration:inherit;-webkit-text-decoration: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{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.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{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}: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)){::placeholder{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{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-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]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.top-\[-1px\]{top:-1px}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.-z-10{z-index:calc(10 * -1)}.z-50{z-index:50}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.my-1\.5{margin-block:calc(var(--spacing) * 1.5)}.-mt-3{margin-top:calc(var(--spacing) * -3)}.-mt-5{margin-top:calc(var(--spacing) * -5)}.mt-1{margin-top:var(--spacing)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.-ml-px{margin-left:-1px}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.table{display:table}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-\[9px\]{width:9px;height:9px}.h-0{height:0}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-11{height:calc(var(--spacing) * 11)}.h-\[18px\]{height:18px}.h-\[23\.5px\]{height:23.5px}.h-\[56px\]{height:56px}.min-h-dvh{min-height:100dvh}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-3{width:calc(var(--spacing) * 3)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-\[18px\]{width:18px}.w-fit{width:fit-content}.w-full{width:100%}.w-px{width:1px}.max-w-7xl{max-width:var(--container-7xl)}.max-w-full{max-width:100%}.min-w-0{min-width:0}.min-w-5{min-width:calc(var(--spacing) * 5)}.min-w-6{min-width:calc(var(--spacing) * 6)}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-not-allowed\!{cursor:not-allowed!important}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-items-center{justify-items:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-12{gap:calc(var(--spacing) * 12)}:where(.divide-x>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px * var(--tw-divide-x-reverse));border-inline-end-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}: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-neutral-200>:not(:last-child)){border-color:var(--color-neutral-200)}.self-stretch{align-self:stretch}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.rounded-full{border-radius:2147483647px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}.rounded-l-md{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}.rounded-r-md{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}.rounded-b-lg{border-bottom-right-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-x{border-inline-style:var(--tw-border-style);border-inline-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-dotted{--tw-border-style:dotted;border-style:dotted}.border-emerald-900{border-color:var(--color-emerald-900)}.border-gray-300{border-color:var(--color-gray-300)}.border-neutral-100{border-color:var(--color-neutral-100)}.border-neutral-200{border-color:var(--color-neutral-200)}.border-neutral-300{border-color:var(--color-neutral-300)}.bg-amber-200{background-color:var(--color-amber-200)}.bg-amber-600{background-color:var(--color-amber-600)}.bg-black\/8{background-color:#00000014}@supports (color:color-mix(in lab, red, red)){.bg-black\/8{background-color:color-mix(in oklab, var(--color-black) 8%, transparent)}}.bg-black\/10{background-color:#0000001a}@supports (color:color-mix(in lab, red, red)){.bg-black\/10{background-color:color-mix(in oklab, var(--color-black) 10%, transparent)}}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-blue-700{background-color:var(--color-blue-700)}.bg-emerald-200{background-color:var(--color-emerald-200)}.bg-emerald-600{background-color:var(--color-emerald-600)}.bg-emerald-800{background-color:var(--color-emerald-800)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-neutral-50{background-color:var(--color-neutral-50)}.bg-neutral-600{background-color:var(--color-neutral-600)}.bg-rose-200{background-color:var(--color-rose-200)}.bg-rose-200\!{background-color:var(--color-rose-200)!important}.bg-rose-500{background-color:var(--color-rose-500)}.bg-rose-600{background-color:var(--color-rose-600)}.bg-white{background-color:var(--color-white)}.bg-white\/5{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.bg-white\/5{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.bg-white\/50{background-color:#ffffff80}@supports (color:color-mix(in lab, red, red)){.bg-white\/50{background-color:color-mix(in oklab, var(--color-white) 50%, transparent)}}.bg-white\/\[2\%\]{background-color:#ffffff05}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[2\%\]{background-color:color-mix(in oklab, var(--color-white) 2%, transparent)}}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-\[6px\]{padding-inline:6px}.py-0{padding-block:0}.py-1{padding-block:var(--spacing)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-4{padding-block:calc(var(--spacing) * 4)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pt-14{padding-top:calc(var(--spacing) * 14)}.pr-2\.5{padding-right:calc(var(--spacing) * 2.5)}.pb-0{padding-bottom:0}.pl-4{padding-left:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--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-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-xs\/none{font-size:var(--text-xs);line-height:1}.text-\[13px\]{font-size:13px}.leading-3{--tw-leading:calc(var(--spacing) * 3);line-height:calc(var(--spacing) * 3)}.leading-5{--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.break-words{overflow-wrap:break-word}.text-amber-900{color:var(--color-amber-900)}.text-blue-500{color:var(--color-blue-500)}.text-blue-900{color:var(--color-blue-900)}.text-emerald-500{color:var(--color-emerald-500)}.text-emerald-900{color:var(--color-emerald-900)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-neutral-100{color:var(--color-neutral-100)}.text-neutral-400{color:var(--color-neutral-400)}.text-neutral-500{color:var(--color-neutral-500)}.text-neutral-500\!{color:var(--color-neutral-500)!important}.text-neutral-600{color:var(--color-neutral-600)}.text-neutral-800{color:var(--color-neutral-800)}.text-neutral-900{color:var(--color-neutral-900)}.text-neutral-950{color:var(--color-neutral-950)}.text-rose-900{color:var(--color-rose-900)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.decoration-neutral-400{-webkit-text-decoration-color:var(--color-neutral-400);-webkit-text-decoration-color:var(--color-neutral-400);-webkit-text-decoration-color:var(--color-neutral-400);text-decoration-color:var(--color-neutral-400)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.scheme-light-dark{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){.scheme-light-dark{--lightningcss-light: ;--lightningcss-dark:initial}}.opacity-90{opacity:.9}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-gray-300{--tw-ring-color:var(--color-gray-300)}.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-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}@media (hover:hover){.group-hover\:text-blue-500:is(:where(.group):hover *),.group-hover\/exception\:text-blue-500:is(:where(.group\/exception):hover *){color:var(--color-blue-500)}}.odd\:bg-white\/2:nth-child(odd){background-color:#ffffff05}@supports (color:color-mix(in lab, red, red)){.odd\:bg-white\/2:nth-child(odd){background-color:color-mix(in oklab, var(--color-white) 2%, transparent)}}.even\:bg-white:nth-child(2n){background-color:var(--color-white)}@media (hover:hover){.hover\:border:hover{border-style:var(--tw-border-style);border-width:1px}.hover\:border-neutral-200:hover{border-color:var(--color-neutral-200)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-neutral-100:hover{background-color:var(--color-neutral-100)}.hover\:bg-neutral-200:hover{background-color:var(--color-neutral-200)}.hover\:bg-white\/50:hover{background-color:#ffffff80}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/50:hover{background-color:color-mix(in oklab, var(--color-white) 50%, transparent)}}.hover\:text-blue-500:hover{color:var(--color-blue-500)}.hover\:text-gray-400:hover{color:var(--color-gray-400)}.hover\:text-gray-700:hover{color:var(--color-gray-700)}.hover\:underline:hover{text-decoration-line:underline}}.focus\:border-blue-300:focus{border-color:var(--color-blue-300)}.focus\:ring:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + 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\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:bg-gray-100:active{background-color:var(--color-gray-100)}.active\:text-gray-500:active{color:var(--color-gray-500)}.active\:text-gray-700:active{color:var(--color-gray-700)}.active\:text-gray-800:active{color:var(--color-gray-800)}@media (width>=40rem){.sm\:mb-16{margin-bottom:calc(var(--spacing) * 16)}.sm\:flex{display:flex}.sm\:hidden{display:none}.sm\:flex-1{flex:1}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}.sm\:gap-2{gap:calc(var(--spacing) * 2)}.sm\:p-14{padding:calc(var(--spacing) * 14)}.sm\:py-0{padding-block:0}.sm\:pt-16{padding-top:calc(var(--spacing) * 16)}.sm\:pb-0{padding-bottom:0}}.rtl\:flex-row-reverse:where(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),[dir=rtl],[dir=rtl] *){flex-direction:row-reverse}@media (prefers-color-scheme:dark){:where(.dark\:divide-white\/5>:not(:last-child)){border-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){:where(.dark\:divide-white\/5>:not(:last-child)){border-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}:where(.dark\:divide-white\/10>:not(:last-child)){border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){:where(.dark\:divide-white\/10>:not(:last-child)){border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.dark\:border{border-style:var(--tw-border-style);border-width:1px}.dark\:border-none{--tw-border-style:none;border-style:none}.dark\:border-amber-500{border-color:var(--color-amber-500)}.dark\:border-amber-800{border-color:var(--color-amber-800)}.dark\:border-blue-600{border-color:var(--color-blue-600)}.dark\:border-blue-800{border-color:var(--color-blue-800)}.dark\:border-emerald-500{border-color:var(--color-emerald-500)}.dark\:border-emerald-600{border-color:var(--color-emerald-600)}.dark\:border-gray-600{border-color:var(--color-gray-600)}.dark\:border-neutral-500{border-color:var(--color-neutral-500)}.dark\:border-neutral-700{border-color:var(--color-neutral-700)}.dark\:border-neutral-800{border-color:var(--color-neutral-800)}.dark\:border-rose-500{border-color:var(--color-rose-500)}.dark\:border-rose-900{border-color:var(--color-rose-900)}.dark\:border-transparent{border-color:#0000}.dark\:border-white\/5{border-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.dark\:border-white\/5{border-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.dark\:border-white\/8{border-color:#ffffff14}@supports (color:color-mix(in lab, red, red)){.dark\:border-white\/8{border-color:color-mix(in oklab, var(--color-white) 8%, transparent)}}.dark\:border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.dark\:border-white\/10{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.dark\:border-white\/20{border-color:#fff3}@supports (color:color-mix(in lab, red, red)){.dark\:border-white\/20{border-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.dark\:border-white\/\[9\%\]{border-color:#ffffff17}@supports (color:color-mix(in lab, red, red)){.dark\:border-white\/\[9\%\]{border-color:color-mix(in oklab, var(--color-white) 9%, transparent)}}.dark\:bg-\[\#1a1a1a\]{background-color:#1a1a1a}.dark\:bg-amber-600{background-color:var(--color-amber-600)}.dark\:bg-amber-950{background-color:var(--color-amber-950)}.dark\:bg-blue-700{background-color:var(--color-blue-700)}.dark\:bg-blue-950{background-color:var(--color-blue-950)}.dark\:bg-emerald-600{background-color:var(--color-emerald-600)}.dark\:bg-emerald-900\/70{background-color:#004e3bb3}@supports (color:color-mix(in lab, red, red)){.dark\:bg-emerald-900\/70{background-color:color-mix(in oklab, var(--color-emerald-900) 70%, transparent)}}.dark\:bg-gray-700{background-color:var(--color-gray-700)}.dark\:bg-gray-800{background-color:var(--color-gray-800)}.dark\:bg-neutral-400{background-color:var(--color-neutral-400)}.dark\:bg-neutral-600{background-color:var(--color-neutral-600)}.dark\:bg-neutral-700{background-color:var(--color-neutral-700)}.dark\:bg-neutral-800{background-color:var(--color-neutral-800)}.dark\:bg-neutral-900{background-color:var(--color-neutral-900)}.dark\:bg-rose-600{background-color:var(--color-rose-600)}.dark\:bg-rose-900\!{background-color:var(--color-rose-900)!important}.dark\:bg-rose-950{background-color:var(--color-rose-950)}.dark\:bg-transparent{background-color:#0000}.dark\:bg-white{background-color:var(--color-white)}.dark\:bg-white\/1{background-color:#ffffff03}@supports (color:color-mix(in lab, red, red)){.dark\:bg-white\/1{background-color:color-mix(in oklab, var(--color-white) 1%, transparent)}}.dark\:bg-white\/2{background-color:#ffffff05}@supports (color:color-mix(in lab, red, red)){.dark\:bg-white\/2{background-color:color-mix(in oklab, var(--color-white) 2%, transparent)}}.dark\:bg-white\/3{background-color:#ffffff08}@supports (color:color-mix(in lab, red, red)){.dark\:bg-white\/3{background-color:color-mix(in oklab, var(--color-white) 3%, transparent)}}.dark\:bg-white\/5{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.dark\:bg-white\/5{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.dark\:bg-white\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.dark\:bg-white\/10{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.dark\:bg-white\/\[2\%\]{background-color:#ffffff05}@supports (color:color-mix(in lab, red, red)){.dark\:bg-white\/\[2\%\]{background-color:color-mix(in oklab, var(--color-white) 2%, transparent)}}.dark\:bg-white\/\[3\%\]{background-color:#ffffff08}@supports (color:color-mix(in lab, red, red)){.dark\:bg-white\/\[3\%\]{background-color:color-mix(in oklab, var(--color-white) 3%, transparent)}}.dark\:text-amber-300{color:var(--color-amber-300)}.dark\:text-blue-300{color:var(--color-blue-300)}.dark\:text-emerald-400{color:var(--color-emerald-400)}.dark\:text-emerald-500{color:var(--color-emerald-500)}.dark\:text-gray-200{color:var(--color-gray-200)}.dark\:text-gray-300{color:var(--color-gray-300)}.dark\:text-gray-400{color:var(--color-gray-400)}.dark\:text-gray-600{color:var(--color-gray-600)}.dark\:text-neutral-100{color:var(--color-neutral-100)}.dark\:text-neutral-200{color:var(--color-neutral-200)}.dark\:text-neutral-300{color:var(--color-neutral-300)}.dark\:text-neutral-400{color:var(--color-neutral-400)}.dark\:text-neutral-500{color:var(--color-neutral-500)}.dark\:text-neutral-600{color:var(--color-neutral-600)}.dark\:text-neutral-600\!{color:var(--color-neutral-600)!important}.dark\:text-neutral-900{color:var(--color-neutral-900)}.dark\:text-rose-100{color:var(--color-rose-100)}.dark\:text-white{color:var(--color-white)}.dark\:text-white\!{color:var(--color-white)!important}}@media (hover:hover){@media (prefers-color-scheme:dark){.group-hover\:dark\:text-emerald-500:is(:where(.group):hover *),.group-hover\/exception\:dark\:text-emerald-500:is(:where(.group\/exception):hover *){color:var(--color-emerald-500)}}}@media (prefers-color-scheme:dark){.odd\:dark\:bg-white\/4:nth-child(odd){background-color:#ffffff0a}@supports (color:color-mix(in lab, red, red)){.odd\:dark\:bg-white\/4:nth-child(odd){background-color:color-mix(in oklab, var(--color-white) 4%, transparent)}}.even\:dark\:bg-white\/2:nth-child(2n){background-color:#ffffff05}@supports (color:color-mix(in lab, red, red)){.even\:dark\:bg-white\/2:nth-child(2n){background-color:color-mix(in oklab, var(--color-white) 2%, transparent)}}@media (hover:hover){.dark\:hover\:border-none:hover{--tw-border-style:none;border-style:none}.dark\:hover\:bg-gray-900:hover{background-color:var(--color-gray-900)}.dark\:hover\:bg-white\/2:hover{background-color:#ffffff05}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-white\/2:hover{background-color:color-mix(in oklab, var(--color-white) 2%, transparent)}}.dark\:hover\:bg-white\/5:hover{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-white\/5:hover{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.dark\:hover\:bg-white\/10:hover{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-white\/10:hover{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}}}@media (hover:hover){@media (prefers-color-scheme:dark){.hover\:dark\:bg-white\/5:hover{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.hover\:dark\:bg-white\/5:hover{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}}}@media (prefers-color-scheme:dark){@media (hover:hover){.dark\:hover\:text-emerald-500:hover{color:var(--color-emerald-500)}.dark\:hover\:text-gray-200:hover{color:var(--color-gray-200)}.dark\:hover\:text-gray-300:hover{color:var(--color-gray-300)}}}@media (hover:hover){@media (prefers-color-scheme:dark){.hover\:dark\:text-white:hover{color:var(--color-white)}}}@media (prefers-color-scheme:dark){.dark\:focus\:border-blue-700:focus{border-color:var(--color-blue-700)}.dark\:focus\:border-blue-800:focus{border-color:var(--color-blue-800)}.dark\:active\:bg-gray-700:active{background-color:var(--color-gray-700)}.dark\:active\:text-gray-300:active{color:var(--color-gray-300)}}.\[\&_svg\]\:size-2\.5 svg{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.\[\&_svg\]\:\!text-white svg{color:var(--color-white)!important}@media (hover:hover){.hover\:\[\&_svg\]\:stroke-emerald-500:hover svg{stroke:var(--color-emerald-500)}}@media (prefers-color-scheme:dark){.dark\:\[\&_svg\]\:\!text-white svg{color:var(--color-white)!important}}}:root{--bg:#f6f8fb;--surface:#fff;--text:#10212b;--muted:#667782;--border:#dbe4e9;--brand:#0c7f91;--brand2:#15a9b9;--danger:#c53d4d;--warning:#b67511;--success:#187a55;--shadow:0 12px 34px #142c3814}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.app-shell{grid-template-columns:260px 1fr;min-height:100vh;display:grid}.sidebar{color:#dce9ed;background:#0d2029;height:100vh;padding:22px 16px;position:sticky;top:0;overflow:auto}.brand{align-items:center;gap:11px;padding:4px 8px 22px;font-weight:800;display:flex}.brand-mark{background:linear-gradient(135deg,var(--brand2),#7ce4dd);color:#08232b;border-radius:12px;place-items:center;width:37px;height:37px;display:grid}.nav-group{color:#7f9aa5;letter-spacing:.12em;text-transform:uppercase;margin:18px 0 8px;padding:0 10px;font-size:11px;font-weight:800}.nav-link{color:#bcd0d7;border-radius:10px;align-items:center;gap:10px;margin:2px 0;padding:10px 12px;font-size:14px;display:flex}.nav-link:hover,.nav-link.active{color:#fff;background:#17343f}.main{min-width:0}.topbar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:20;background:#ffffffe0;justify-content:space-between;align-items:center;height:68px;padding:0 28px;display:flex;position:sticky;top:0}.content{max-width:1600px;margin:auto;padding:28px}.eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--brand);font-size:11px;font-weight:800}h1{margin:5px 0 0;font-size:30px;line-height:1.1}h2{margin:0}.muted{color:var(--muted)}.page-header{justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px;display:flex}.actions{flex-wrap:wrap;align-items:center;gap:9px;display:flex}.grid{gap:16px;display:grid}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:16px}.card-header{border-bottom:1px solid var(--border);padding:18px 20px}.card-body,.metric{padding:20px}.metric-label{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:700}.metric-value{margin-top:8px;font-size:28px;font-weight:800}.btn{cursor:pointer;border:0;border-radius:10px;justify-content:center;align-items:center;padding:10px 14px;font-weight:750;transition:all .15s;display:inline-flex}.btn-primary{background:var(--brand);color:#fff}.btn-primary:hover{background:#086d7d}.btn-secondary{color:#11424c;background:#e8f2f4}.btn-danger{color:var(--danger);background:#ffe7ea}.btn-warning{color:#8b5809;background:#fff0d8}.btn-sm{padding:7px 10px;font-size:12px}.field{flex-direction:column;gap:7px;display:flex}.field label{color:#41535d;font-size:12px;font-weight:750}.input,.select,.textarea{width:100%;color:var(--text);background:#fff;border:1px solid #cbd8de;border-radius:10px;outline:none;padding:10px 12px}.input:focus,.select:focus,.textarea:focus{border-color:var(--brand2);box-shadow:0 0 0 3px #15a9b924}.textarea{resize:vertical;min-height:100px}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;display:grid}.form-actions{justify-content:flex-end;gap:10px;margin-top:20px;display:flex}.table-wrap{overflow:auto}.table{border-collapse:collapse;width:100%;font-size:13px}.table th{text-align:left;color:#52646d;border-bottom:1px solid var(--border);white-space:nowrap;background:#f3f7f8;padding:11px 13px}.table td{vertical-align:top;border-bottom:1px solid #e8eef1;padding:12px 13px}.table tr:hover td{background:#fbfdfd}.badge{color:#24505a;background:#e8f2f4;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:800;display:inline-flex}.badge-success{color:#126340;background:#dcf7eb}.badge-danger{color:#9b2635;background:#ffe2e6}.badge-warning{color:#855608;background:#fff0cf}.flash{border-radius:11px;margin-bottom:18px;padding:12px 14px}.flash-success{color:#12613e;background:#def7eb;border:1px solid #b6ead3}.flash-error{color:#8d2632;background:#ffe6e8;border:1px solid #f1bbc2}.wizard-steps{grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px;display:grid}.wizard-step{border:1px solid var(--border);text-align:left;cursor:pointer;background:#fff;border-radius:12px;padding:12px}.wizard-step.active{border-color:var(--brand);background:#effbfc}.wizard-step span{color:var(--muted);font-size:11px;display:block}.preview{background:#f8fcfd;border:1px dashed #abc3ca;border-radius:13px;place-items:center;min-height:220px;display:grid;overflow:hidden}.preview img,.preview iframe{object-fit:contain;border:0;width:100%;height:360px}.empty{text-align:center;padding:48px 24px}.split{grid-template-columns:minmax(0,1fr) 360px;gap:18px;display:grid}.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.mobile-nav{display:none}.details{border-top:1px solid var(--border);margin-top:16px;padding-top:16px}dialog{border:0;border-radius:16px;width:calc(100% - 32px);max-width:650px;padding:0;box-shadow:0 24px 80px #00000040}dialog::backdrop{background:#05141b94}@media (width<=1050px){.grid-4{grid-template-columns:repeat(2,1fr)}.split,.app-shell{grid-template-columns:1fr}.sidebar{display:none}.mobile-nav{display:block}.content{padding:20px}}@media (width<=700px){.grid-2,.grid-3,.grid-4,.form-grid{grid-template-columns:1fr}.page-header{flex-direction:column;align-items:flex-start}.wizard-steps{grid-template-columns:repeat(2,1fr)}.topbar{padding:0 16px}.content{padding:16px}h1{font-size:25px}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-divide-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@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:0}@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-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}

/* Usability and administration controls */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.toolbar-filters{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.toolbar-filters .field{min-width:160px}.record-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.btn-ghost{background:transparent;color:#31505b;border:1px solid var(--border)}.btn-ghost:hover{background:#f0f6f7}.btn:disabled,.btn[aria-disabled=true]{opacity:.52;cursor:not-allowed}.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid rgba(21,169,185,.32);outline-offset:2px}.icon-btn{width:36px;height:36px;padding:0;border-radius:9px}.danger-zone{padding:14px;border:1px solid #f0c4ca;background:#fff7f8;border-radius:12px}.danger-zone h3{margin:0 0 5px;color:#8e2634}.inline-editor{border:1px solid var(--border);border-radius:12px;background:#fbfdfd;padding:14px}.inline-editor summary{cursor:pointer;font-weight:800;color:#24505a;list-style:none}.inline-editor summary::-webkit-details-marker{display:none}.inline-editor[open] summary{margin-bottom:14px}.help{font-size:12px;line-height:1.45;color:var(--muted)}.status-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.status-dot{width:8px;height:8px;border-radius:999px;background:#93a4ab}.status-dot.active{background:var(--success)}.status-dot.locked,.status-dot.suspended{background:var(--warning)}.status-dot.disabled,.status-dot.removed{background:var(--danger)}.stat-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}.stat-tile{padding:15px 17px}.stat-tile strong{display:block;font-size:24px;margin-top:4px}.user-list{display:grid;gap:14px}.user-card{overflow:hidden}.user-card-header{padding:16px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid var(--border)}.user-identity{display:flex;align-items:center;gap:12px;min-width:0}.avatar{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#e4f4f6;color:#0b6674;font-weight:900;flex:none}.user-identity h2{font-size:17px}.user-identity p{margin:4px 0 0;overflow-wrap:anywhere}.role-chips{display:flex;gap:6px;flex-wrap:wrap}.role-chip{display:inline-flex;padding:5px 8px;border-radius:8px;background:#edf4f6;color:#35535e;font-size:11px;font-weight:750}.section-title{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#5b6d75;margin:0 0 12px}.form-note{padding:11px 12px;background:#f1f8f9;border-radius:10px;color:#46616a;font-size:12px}.table-actions{min-width:170px}.nowrap{white-space:nowrap}.text-danger{color:var(--danger)}.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.summary-item{padding:12px;border-radius:11px;background:#f6f9fa}.summary-item span{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.summary-item strong{display:block;margin-top:5px}.stack{display:flex;flex-direction:column;gap:10px}
@media(max-width:900px){.stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.summary-grid{grid-template-columns:1fr}.user-card-header{flex-direction:column}.record-actions{justify-content:flex-start}}
@media(max-width:560px){.stat-strip{grid-template-columns:1fr}.toolbar-filters,.toolbar-filters .field{width:100%;min-width:0}.toolbar-filters .btn{width:100%}.record-actions{width:100%}.record-actions form,.record-actions .btn{width:100%}}



/* Approval workflow builder */
.workflow-dialog{max-width:940px}.workflow-rules-header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:8px}.workflow-rules-header h3{margin:0}.workflow-rule-list{display:grid;gap:12px}.workflow-rule-row{border:1px solid var(--border);border-radius:13px;background:#f9fcfc;padding:14px}.workflow-rule-row-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.workflow-amount-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:12px}.workflow-rule-summary{line-height:1.55;margin:8px 0}@media(max-width:900px){.workflow-amount-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.workflow-rules-header{align-items:stretch;flex-direction:column}.workflow-rules-header .btn{width:100%}.workflow-amount-grid{grid-template-columns:1fr}}

/* Naspin Finance responsive UI/UX overhaul 1.2.0 */
:root {
    color-scheme: light;
    --bg: #f3f6f8;
    --bg-soft: #f8fafb;
    --surface: #ffffff;
    --surface-soft: #f5f8f9;
    --surface-raised: #ffffff;
    --text: #10242c;
    --text-strong: #071b23;
    --muted: #647780;
    --muted-2: #87979e;
    --border: #d9e3e7;
    --border-strong: #c4d3d8;
    --brand: #087f91;
    --brand-strong: #056b7b;
    --brand-soft: #e5f6f8;
    --brand-softer: #f1fafb;
    --accent: #19a9b8;
    --sidebar: #08242d;
    --sidebar-deep: #061a21;
    --sidebar-surface: #0d313c;
    --sidebar-text: #dce9ec;
    --sidebar-muted: #8eabb4;
    --danger: #c33d4d;
    --danger-strong: #9d2938;
    --danger-soft: #fff0f2;
    --warning: #a96b08;
    --warning-soft: #fff5df;
    --success: #167551;
    --success-soft: #e6f8f0;
    --info: #256f93;
    --info-soft: #e9f5fb;
    --shadow-xs: 0 1px 2px rgba(10, 35, 45, .04);
    --shadow-sm: 0 4px 14px rgba(15, 45, 56, .06);
    --shadow: 0 14px 38px rgba(15, 45, 56, .08);
    --shadow-lg: 0 24px 70px rgba(4, 25, 34, .18);
    --radius-sm: 9px;
    --radius: 14px;
    --radius-lg: 20px;
    --sidebar-width: 292px;
    --topbar-height: 76px;
    --content-width: 1560px;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.sidebar-open { overflow: hidden; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
img, svg { max-width: 100%; }
.icon { display: block; flex: 0 0 auto; }
::selection { background: rgba(25, 169, 184, .24); }

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--surface);
    color: var(--brand-strong);
    box-shadow: var(--shadow-lg);
    transform: translateY(-160%);
    transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }

/* Application shell */
.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}
.app-main { min-width: 0; }
.sidebar {
    position: sticky;
    top: 0;
    z-index: 60;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 0%, rgba(33, 176, 188, .16), transparent 30%),
        linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-deep) 100%);
    color: var(--sidebar-text);
    border-right: 1px solid rgba(255,255,255,.05);
}
.sidebar__header {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 14px;
}
.brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
}
.brand-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 14px;
    background: linear-gradient(145deg, #27c2c6, #82e8df);
    color: #04252d;
    font-size: 19px;
    font-weight: 950;
    box-shadow: 0 8px 24px rgba(17, 188, 190, .22), inset 0 1px 0 rgba(255,255,255,.5);
}
.brand-copy { min-width: 0; display: grid; line-height: 1.15; }
.brand-copy strong { font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.brand-copy small { margin-top: 4px; color: var(--sidebar-muted); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.sidebar-close {
    display: none;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 0;
    border-radius: 11px;
    background: rgba(255,255,255,.08);
    color: white;
    cursor: pointer;
}
.sidebar__company {
    margin: 0 14px 14px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    background: rgba(255,255,255,.045);
}
.company-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 10px;
    background: rgba(101, 222, 218, .13);
    color: #8ce5df;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
}
.sidebar__company-copy { min-width: 0; display: grid; }
.sidebar__company-copy strong { overflow: hidden; color: #f4fbfc; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__company-copy small { margin-top: 2px; color: var(--sidebar-muted); font-size: 10px; }
.sidebar-cta {
    min-height: 44px;
    margin: 0 14px 12px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 12px;
    background: linear-gradient(135deg, #13a5b4, #087f91);
    color: white;
    font-size: 13px;
    font-weight: 850;
    box-shadow: 0 10px 24px rgba(3, 119, 136, .28);
    transition: transform .16s ease, filter .16s ease;
}
.sidebar-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 10px 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.14) transparent;
}
.nav-section { margin: 4px 0; }
.nav-section__summary {
    min-height: 42px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 11px;
    color: var(--sidebar-muted);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background .16s ease, color .16s ease;
}
.nav-section__summary::-webkit-details-marker { display: none; }
.nav-section__summary:hover { background: rgba(255,255,255,.055); color: #f4fbfc; }
.nav-section__title { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.nav-section__chevron { transition: transform .18s ease; }
.nav-section[open] > .nav-section__summary { color: #d7e7eb; }
.nav-section[open] > .nav-section__summary .nav-section__chevron { transform: rotate(180deg); }
.nav-section__items { display: grid; gap: 2px; padding: 2px 0 8px; }
.nav-link {
    position: relative;
    min-height: 48px;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    color: #b6ccd2;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}
.nav-link:hover { background: rgba(255,255,255,.06); color: white; transform: translateX(2px); }
.nav-link.active {
    background: linear-gradient(90deg, rgba(25, 169, 184, .22), rgba(25, 169, 184, .08));
    color: white;
    box-shadow: inset 3px 0 0 #4dd1d1;
}
.nav-link__icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    background: rgba(255,255,255,.045);
    color: #8fb2ba;
}
.nav-link.active .nav-link__icon { background: rgba(82, 220, 218, .14); color: #7ae2de; }
.nav-link__copy { min-width: 0; display: grid; line-height: 1.2; }
.nav-link__copy strong { overflow: hidden; font-size: 12.5px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.nav-link__copy small { overflow: hidden; margin-top: 3px; color: #71909a; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.nav-link.active .nav-link__copy small { color: #9fc5cc; }
.nav-count {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    margin-left: auto;
    border-radius: 999px;
    background: #d9f6f3;
    color: #075f6b;
    font-size: 10px;
    font-weight: 900;
}
.sidebar__footer { padding: 13px 16px 16px; border-top: 1px solid rgba(255,255,255,.07); }
.sidebar__support { display: flex; align-items: center; gap: 9px; color: #abc0c6; }
.sidebar__support span { display: grid; line-height: 1.2; }
.sidebar__support strong { color: #dce8eb; font-size: 11px; }
.sidebar__support small { margin-top: 3px; font-size: 9px; }
.sidebar__version { margin-top: 11px; color: #587783; font-size: 9px; letter-spacing: .04em; }
.sidebar-backdrop { display: none; }

/* Top bar */
.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: var(--topbar-height);
    padding: 0 clamp(18px, 2.4vw, 34px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid rgba(206, 219, 224, .88);
    background: rgba(255,255,255,.91);
    backdrop-filter: blur(18px) saturate(140%);
}
.topbar__leading, .topbar__actions { min-width: 0; display: flex; align-items: center; gap: 12px; }
.topbar__menu {
    display: none;
    width: 42px;
    height: 42px;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
}
.topbar__context { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.topbar__context > * { white-space: nowrap; }
.topbar__context strong { overflow: hidden; max-width: 260px; color: var(--text-strong); font-size: 14px; text-overflow: ellipsis; }
.topbar__context small { display: none; color: var(--muted); font-size: 11px; }
.topbar__company { color: var(--muted); font-size: 13px; }
.topbar__separator { color: #b6c4c9; }
.topbar__quick-action {
    min-height: 40px;
    padding: 9px 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 11px;
    background: var(--brand);
    color: white;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 7px 18px rgba(8, 127, 145, .18);
}
.topbar__quick-action:hover { background: var(--brand-strong); }
.topbar__icon-button {
    position: relative;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: #36515b;
}
.topbar__icon-button:hover { border-color: #b4ced5; background: var(--brand-softer); color: var(--brand); }
.notification-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border: 2px solid white;
    border-radius: 999px;
    background: var(--danger);
    color: white;
    font-size: 8px;
    font-weight: 900;
}
.profile-menu { position: relative; }
.profile-menu__summary {
    min-height: 44px;
    max-width: 250px;
    padding: 4px 7px 4px 5px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 13px;
    cursor: pointer;
    list-style: none;
}
.profile-menu__summary::-webkit-details-marker { display: none; }
.profile-menu__summary:hover, .profile-menu[open] .profile-menu__summary { border-color: var(--border); background: var(--surface-soft); }
.user-avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 11px;
    background: linear-gradient(145deg, #d9f3f4, #edf9f9);
    color: #086879;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .04em;
}
.user-avatar--large { width: 44px; height: 44px; border-radius: 13px; font-size: 12px; }
.profile-menu__identity { min-width: 0; display: grid; line-height: 1.16; }
.profile-menu__identity strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu__identity small { overflow: hidden; max-width: 150px; margin-top: 3px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 90;
    width: min(320px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.profile-menu__header { padding: 17px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--border); }
.profile-menu__header > div { min-width: 0; display: grid; }
.profile-menu__header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu__header small { overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu__meta { padding: 10px 17px; display: flex; justify-content: space-between; gap: 14px; font-size: 11px; }
.profile-menu__meta span { color: var(--muted); }
.profile-menu__meta strong { text-align: right; }
.profile-menu__logout {
    width: 100%;
    min-height: 45px;
    padding: 11px 17px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--danger);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.profile-menu__logout:hover { background: var(--danger-soft); }

/* Main content */
.content {
    width: 100%;
    max-width: var(--content-width);
    min-height: calc(100vh - var(--topbar-height));
    margin: 0 auto;
    padding: clamp(20px, 2.6vw, 36px);
}
.eyebrow {
    color: var(--brand);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .17em;
    text-transform: uppercase;
}
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 6px 0 0; color: var(--text-strong); font-size: clamp(27px, 3vw, 38px); font-weight: 720; line-height: 1.08; letter-spacing: -.035em; }
h2 { margin: 0; color: var(--text-strong); font-size: 17px; line-height: 1.25; letter-spacing: -.015em; }
h3 { color: var(--text-strong); font-size: 14px; }
.muted { color: var(--muted); }
.page-header {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.page-header__copy { min-width: 0; max-width: 820px; }
.page-description { max-width: 760px; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.page-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 370px); gap: 18px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 11px; }
.actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.toolbar-filters { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.toolbar-filters .field { min-width: 160px; }
.record-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }

.card {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
a.card { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
a.card:hover { border-color: #b8d3d9; box-shadow: var(--shadow); transform: translateY(-2px); }
.card-header { padding: 17px 20px; border-bottom: 1px solid var(--border); }
.card-header p:last-child { margin-bottom: 0; }
.card-body { padding: 20px; }
.card-body + .card-body { border-top: 1px solid var(--border); }
.metric {
    position: relative;
    overflow: hidden;
    padding: 19px;
}
.metric::after {
    content: "";
    position: absolute;
    top: -35px;
    right: -35px;
    width: 110px;
    height: 110px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(19, 167, 181, .09), transparent 68%);
    pointer-events: none;
}
.metric__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.metric__icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.metric-label { color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.metric-value { margin-top: 8px; color: var(--text-strong); font-size: clamp(23px, 2.2vw, 31px); font-weight: 820; line-height: 1.15; letter-spacing: -.03em; }
.metric-note { margin-top: 6px; color: var(--muted); font-size: 10px; }
.metric--revenue .metric__icon, .metric--profit .metric__icon { background: var(--success-soft); color: var(--success); }
.metric--expense .metric__icon, .metric--payable .metric__icon { background: var(--danger-soft); color: var(--danger); }
.metric--receivable .metric__icon { background: var(--warning-soft); color: var(--warning); }

/* Buttons */
.btn {
    min-height: 42px;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 820;
    line-height: 1.1;
    cursor: pointer;
    transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--brand); color: white; box-shadow: 0 7px 17px rgba(8,127,145,.15); }
.btn-primary:hover { background: var(--brand-strong); }
.btn-secondary { background: var(--brand-soft); color: #0b5663; }
.btn-secondary:hover { background: #d7eef1; }
.btn-ghost { border-color: var(--border); background: var(--surface); color: #36535d; }
.btn-ghost:hover { border-color: #b5cbd1; background: var(--surface-soft); }
.btn-danger { background: var(--danger-soft); color: var(--danger-strong); }
.btn-danger:hover { background: #ffe1e5; }
.btn-warning { background: var(--warning-soft); color: #825306; }
.btn-warning:hover { background: #ffedc5; }
.btn-sm { min-height: 34px; padding: 7px 10px; border-radius: 9px; font-size: 10px; }
.icon-btn { width: 38px; height: 38px; padding: 0; }
.btn:disabled, .btn[aria-disabled="true"], .btn.is-loading { opacity: .56; cursor: not-allowed; transform: none; }
.btn.is-loading::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Forms */
.field { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.field label { color: #3f555e; font-size: 11px; font-weight: 800; }
.field label:has(+ :required)::after { content: " *"; color: var(--danger); }
.input, .select, .textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--border-strong);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input, .select { padding: 9px 12px; }
.textarea { min-height: 108px; padding: 11px 12px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: #9eb8c0; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(25,169,184,.13); }
.input:disabled, .select:disabled, .textarea:disabled { background: #edf2f4; color: #788890; cursor: not-allowed; }
.input::placeholder, .textarea::placeholder { color: #9aa9af; }
select.select { padding-right: 34px; }
input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; accent-color: var(--brand); vertical-align: -3px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.form-actions { margin-top: 19px; display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.help { color: var(--muted); font-size: 10.5px; line-height: 1.48; }
.form-note { padding: 11px 13px; border: 1px solid #d7eaed; border-radius: 11px; background: var(--brand-softer); color: #46636c; font-size: 11px; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* Tables */
.table-wrap { min-width: 0; overflow-x: auto; border-radius: inherit; scrollbar-width: thin; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 11px 13px;
    border-bottom: 1px solid var(--border);
    background: #f5f8f9;
    color: #566a72;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .065em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.table td { padding: 13px; border-bottom: 1px solid #e9eff1; vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover td { background: #fbfdfd; }
.table a:not(.btn) { color: #076f80; font-weight: 750; }
.table a:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px; }
.table-actions { min-width: 170px; }
.nowrap { white-space: nowrap; }

/* Statuses and alerts */
.badge {
    min-height: 23px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #e9f1f3;
    color: #36565f;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
}
.badge-success { background: var(--success-soft); color: #11613f; }
.badge-danger { background: var(--danger-soft); color: var(--danger-strong); }
.badge-warning { background: var(--warning-soft); color: #855607; }
.status-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.status-dot { width: 8px; height: 8px; border-radius: 999px; background: #93a4ab; }
.status-dot.active { background: var(--success); }
.status-dot.locked, .status-dot.suspended { background: var(--warning); }
.status-dot.disabled, .status-dot.removed { background: var(--danger); }
.text-danger { color: var(--danger); }
.flash {
    margin-bottom: 18px;
    padding: 13px 15px;
    display: grid;
    gap: 4px;
    border: 1px solid;
    border-radius: 13px;
    box-shadow: var(--shadow-xs);
    font-size: 12px;
}
.flash strong { font-size: 12px; }
.flash ul { margin: 3px 0 0; padding-left: 19px; }
.flash-success { border-color: #b8e8d3; background: var(--success-soft); color: #115f40; }
.flash-error { border-color: #efbdc4; background: var(--danger-soft); color: #922d3a; }
.flash-reference { margin-top: 4px; color: #866168; font-size: 10px; }

/* Empty and details */
.empty { padding: clamp(34px, 6vw, 60px) 22px; color: var(--muted); text-align: center; }
.empty h2 { margin-bottom: 7px; }
.details { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.summary-item { padding: 12px; border: 1px solid #e8eef0; border-radius: 12px; background: var(--surface-soft); }
.summary-item span { display: block; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.summary-item strong { display: block; margin-top: 5px; font-size: 12px; }

/* Wizard */
.wizard-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.wizard-step {
    min-height: 66px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.wizard-step:hover { border-color: #b4ced5; }
.wizard-step.active { border-color: var(--brand); background: var(--brand-softer); box-shadow: inset 0 0 0 1px rgba(8,127,145,.08); }
.wizard-step span { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.preview { min-height: 220px; display: grid; place-items: center; overflow: hidden; border: 1px dashed #a8c2c9; border-radius: 14px; background: #f8fcfd; }
.preview img, .preview iframe { width: 100%; height: 360px; border: 0; object-fit: contain; }

/* Dialogs and inline editors */
dialog {
    width: min(680px, calc(100% - 30px));
    max-height: min(88vh, 900px);
    padding: 0;
    overflow: auto;
    border: 1px solid rgba(202,216,221,.8);
    border-radius: 18px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}
dialog::backdrop { background: rgba(4, 20, 27, .58); backdrop-filter: blur(3px); }
.inline-editor { padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: #fbfdfd; }
.inline-editor summary { color: #24505a; font-weight: 800; cursor: pointer; list-style: none; }
.inline-editor summary::-webkit-details-marker { display: none; }
.inline-editor[open] summary { margin-bottom: 14px; }
.danger-zone { padding: 14px; border: 1px solid #efc2c8; border-radius: 13px; background: #fff8f9; }
.danger-zone h3 { margin: 0 0 5px; color: #8e2634; }

/* User management */
.stat-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat-tile { padding: 14px 16px; }
.stat-tile strong { display: block; margin-top: 4px; color: var(--text-strong); font-size: 23px; }
.user-list { display: grid; gap: 14px; }
.user-card { overflow: hidden; }
.user-card-header { padding: 16px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); }
.user-identity { min-width: 0; display: flex; align-items: center; gap: 12px; }
.avatar { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; background: var(--brand-soft); color: var(--brand-strong); font-weight: 900; }
.user-identity h2 { font-size: 16px; }
.user-identity p { margin: 4px 0 0; overflow-wrap: anywhere; }
.role-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.role-chip { padding: 5px 8px; display: inline-flex; border-radius: 8px; background: #edf4f6; color: #35535e; font-size: 9px; font-weight: 800; }
.section-title { margin: 0 0 12px; color: #5b6d75; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

/* Workflow builder */
.workflow-dialog { max-width: 960px; }
.workflow-rules-header { margin-top: 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.workflow-rules-header h3 { margin: 0; }
.workflow-rule-list { display: grid; gap: 12px; }
.workflow-rule-row { padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: #f9fcfc; }
.workflow-rule-row-header { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.workflow-amount-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; }
.workflow-rule-summary { margin: 8px 0; line-height: 1.55; }

/* Dashboard and settings helpers */
.dashboard-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
    padding: clamp(20px, 3vw, 30px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid #c9e3e7;
    border-radius: 20px;
    background: linear-gradient(135deg, #f4fcfc, #e7f6f8);
}
.dashboard-hero::after { content: ""; position: absolute; right: -90px; bottom: -120px; width: 320px; height: 320px; border-radius: 999px; background: radial-gradient(circle, rgba(28,169,181,.16), transparent 65%); }
.dashboard-hero__copy { position: relative; z-index: 1; max-width: 720px; }
.dashboard-hero__copy h2 { margin-top: 5px; font-size: clamp(22px, 2.5vw, 31px); }
.dashboard-hero__copy p { margin: 8px 0 0; color: var(--muted); }
.dashboard-hero__actions { position: relative; z-index: 1; display: flex; gap: 9px; flex-wrap: wrap; }
.quick-actions { display: grid; gap: 9px; }
.quick-action {
    min-height: 58px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    transition: border-color .15s ease, transform .15s ease;
}
.quick-action:hover { border-color: #afd0d6; transform: translateX(2px); }
.quick-action__icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; background: var(--brand-soft); color: var(--brand); }
.quick-action__copy { min-width: 0; display: grid; }
.quick-action__copy strong { font-size: 12px; }
.quick-action__copy small { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.quick-action > .icon { margin-left: auto; color: #8ca1a8; }
.settings-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.settings-card__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--brand-soft); color: var(--brand); }
.settings-card__footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; color: var(--brand); font-size: 11px; font-weight: 800; }
.notification-card--unread { border-color: #80c9d3; box-shadow: 0 0 0 1px rgba(25,169,184,.08), var(--shadow-sm); }
.approval-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.approval-timeline { display: grid; gap: 9px; }
.approval-step { position: relative; padding: 10px 12px 10px 38px; border-radius: 11px; background: var(--surface-soft); }
.approval-step::before { content: attr(data-step); position: absolute; left: 11px; top: 10px; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 999px; background: #dcebed; color: #385a63; font-size: 8px; font-weight: 900; }

/* Mobile bottom navigation */
.mobile-bottom-nav { display: none; }

/* Focus */
:focus-visible { outline: 3px solid rgba(25,169,184,.34); outline-offset: 2px; }
summary:focus-visible { border-radius: 10px; }

@media (max-width: 1279px) {
    :root { --sidebar-width: 256px; }
    .nav-link__copy small { display: none; }
    .nav-link { min-height: 43px; }
    .nav-link__icon { width: 30px; height: 30px; }
    .profile-menu__identity { display: none; }
}

@media (max-width: 1023px) {
    :root { --topbar-height: 68px; }
    .app-shell { display: block; }
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: min(318px, calc(100vw - 44px));
        transform: translateX(-105%);
        box-shadow: var(--shadow-lg);
        transition: transform .22s cubic-bezier(.2,.8,.2,1);
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-close { display: grid; }
    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 55;
        width: 100%;
        height: 100%;
        border: 0;
        background: rgba(4,20,27,.52);
        opacity: 0;
        pointer-events: none;
        display: block;
        transition: opacity .2s ease;
    }
    body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
    .topbar__menu { display: grid; }
    .topbar__context { display: grid; gap: 0; line-height: 1.15; }
    .topbar__context strong { max-width: 340px; }
    .topbar__context small { display: block; margin-top: 4px; }
    .topbar__company, .topbar__separator { display: none; }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split { grid-template-columns: 1fr; }
    .stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .workflow-amount-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    :root { --topbar-height: 62px; }
    body { font-size: 14px; padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
    .topbar { min-height: var(--topbar-height); padding: 0 13px; gap: 10px; }
    .topbar__leading { gap: 9px; }
    .topbar__menu { width: 39px; height: 39px; border-radius: 11px; }
    .topbar__context strong { max-width: min(43vw, 260px); font-size: 12px; }
    .topbar__context small { max-width: min(43vw, 260px); overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
    .topbar__quick-action, .topbar__icon-button { display: none; }
    .profile-menu__summary { padding: 2px; }
    .profile-menu__summary > .icon { display: none; }
    .user-avatar { width: 38px; height: 38px; }
    .profile-menu__panel { position: fixed; top: 68px; right: 12px; }
    .content { min-height: calc(100vh - var(--topbar-height)); padding: 18px 13px 22px; }
    .page-header { margin-bottom: 18px; align-items: stretch; flex-direction: column; gap: 13px; }
    .page-header__actions, .page-header__actions > *, .page-header__actions form { width: 100%; }
    .page-header__actions .btn { width: 100%; }
    .page-description { font-size: 12px; }
    h1 { font-size: 27px; }
    .grid-2, .grid-3, .grid-4, .form-grid, .summary-grid { grid-template-columns: 1fr; }
    .grid { gap: 13px; }
    .card { border-radius: 16px; }
    .card-header { padding: 15px 16px; }
    .card-body { padding: 16px; }
    .metric { padding: 16px; }
    .metric-value { font-size: 25px; }
    .dashboard-hero { padding: 19px; align-items: stretch; flex-direction: column; }
    .dashboard-hero__actions, .dashboard-hero__actions > * { width: 100%; }
    .dashboard-hero__actions .btn { width: 100%; }
    .toolbar { align-items: stretch; flex-direction: column; }
    .toolbar-filters, .toolbar-filters .field { width: 100%; min-width: 0; }
    .toolbar-filters .btn { width: 100%; }
    .record-actions { width: 100%; justify-content: flex-start; }
    .record-actions form { flex: 1 1 auto; }
    .record-actions .btn { min-width: 100px; }
    .form-actions { align-items: stretch; flex-direction: column-reverse; }
    .form-actions > *, .form-actions form, .form-actions .btn { width: 100%; }
    .actions:has(.input), .actions:has(.select) { align-items: stretch; flex-direction: column; }
    .actions:has(.input) .input, .actions:has(.select) .select, .actions:has(.input) .btn, .actions:has(.select) .btn { width: 100% !important; max-width: none !important; }
    .wizard-steps { display: flex; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
    .wizard-step { min-width: 158px; flex: 0 0 158px; scroll-snap-align: start; }
    .preview img, .preview iframe { height: 280px; }
    .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .user-card-header { align-items: stretch; flex-direction: column; }
    .workflow-rules-header { align-items: stretch; flex-direction: column; }
    .workflow-rules-header .btn { width: 100%; }
    .workflow-amount-grid { grid-template-columns: 1fr; }
    dialog {
        width: 100%;
        max-width: none;
        max-height: 92vh;
        margin: auto 0 0;
        border-width: 1px 0 0;
        border-radius: 20px 20px 0 0;
    }

    /* All module tables become readable record cards on phones. */
    .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; }
    .responsive-table thead { display: none; }
    .responsive-table { padding: 10px; background: var(--bg-soft); }
    .responsive-table tbody { display: grid; gap: 10px; }
    .responsive-table tbody tr {
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 13px;
        background: var(--surface);
        box-shadow: var(--shadow-xs);
    }
    .responsive-table tbody tr:hover td { background: transparent; }
    .responsive-table td {
        min-height: 42px;
        padding: 10px 12px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
        border-bottom: 1px solid #edf1f2;
        text-align: right;
    }
    .responsive-table td:last-child { border-bottom: 0; }
    .responsive-table td::before {
        content: attr(data-label);
        min-width: 90px;
        color: var(--muted);
        font-size: 8.5px;
        font-weight: 900;
        letter-spacing: .06em;
        text-align: left;
        text-transform: uppercase;
    }
    .responsive-table td[data-label="Actions"], .responsive-table td.table-actions { display: block; text-align: left; }
    .responsive-table td[data-label="Actions"]::before, .responsive-table td.table-actions::before { display: block; margin-bottom: 8px; }
    .responsive-table td .record-actions { justify-content: stretch; }
    .responsive-table td .record-actions form, .responsive-table td .record-actions .btn { flex: 1 1 auto; }
    .responsive-table .table-empty-row { border: 0; background: transparent; box-shadow: none; }
    .responsive-table .table-empty-row td { display: block; border: 0; text-align: center; }
    .responsive-table .table-empty-row td::before { display: none; }

    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 52;
        height: calc(66px + env(safe-area-inset-bottom));
        padding: 6px 8px env(safe-area-inset-bottom);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
        align-items: end;
        border-top: 1px solid rgba(205,219,224,.9);
        background: rgba(255,255,255,.95);
        backdrop-filter: blur(18px) saturate(140%);
        box-shadow: 0 -8px 30px rgba(10,35,45,.07);
    }
    .mobile-bottom-nav > a, .mobile-bottom-nav > button {
        position: relative;
        min-width: 0;
        height: 51px;
        padding: 5px 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 3px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: #657980;
        font-size: 8.5px;
        font-weight: 800;
        cursor: pointer;
    }
    .mobile-bottom-nav > .active { color: var(--brand); }
    .mobile-bottom-nav__primary { transform: translateY(-10px); }
    .mobile-bottom-nav__primary-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 14px; background: var(--brand); color: white; box-shadow: 0 9px 20px rgba(8,127,145,.28); }
    .mobile-bottom-nav__icon-wrap { position: relative; }
    .mobile-bottom-nav__icon-wrap i { position: absolute; top: -2px; right: -4px; width: 7px; height: 7px; border: 2px solid white; border-radius: 999px; background: var(--danger); }
}

@media (max-width: 440px) {
    .topbar__context strong, .topbar__context small { max-width: 46vw; }
    .stat-strip { grid-template-columns: 1fr; }
    .mobile-bottom-nav { padding-left: 3px; padding-right: 3px; }
    .mobile-bottom-nav > a, .mobile-bottom-nav > button { font-size: 8px; }
    .record-actions { flex-direction: column; align-items: stretch; }
    .record-actions form, .record-actions .btn { width: 100%; }
}

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

/* Authentication */
.auth-body { min-height: 100vh; padding: 0; background: #eef4f6; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 44%) minmax(0, 1fr); }
.auth-brand-panel {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    padding: clamp(28px, 4vw, 58px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        radial-gradient(circle at 20% 15%, rgba(47, 203, 200, .24), transparent 28%),
        radial-gradient(circle at 90% 80%, rgba(23, 150, 169, .19), transparent 32%),
        linear-gradient(150deg, #092a34, #061a21 70%);
    color: white;
}
.auth-brand-panel::after { content: ""; position: absolute; inset: auto -120px -170px auto; width: 430px; height: 430px; border: 1px solid rgba(130,232,223,.16); border-radius: 999px; box-shadow: 0 0 0 45px rgba(130,232,223,.025), 0 0 0 90px rgba(130,232,223,.018); }
.auth-brand-panel__content { position: relative; z-index: 1; max-width: 600px; }
.auth-brand-panel .brand { color: white; }
.auth-brand-panel__message { margin-top: clamp(70px, 13vh, 150px); }
.auth-brand-panel__message .eyebrow { color: #75ddd9; }
.auth-brand-panel__message h1 { max-width: 620px; color: white; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.02; }
.auth-brand-panel__message p { max-width: 570px; color: #aac2c9; font-size: 15px; line-height: 1.7; }
.auth-feature-list { margin-top: 38px; display: grid; gap: 12px; }
.auth-feature-list > div { max-width: 540px; padding: 12px; display: grid; grid-template-columns: 39px 1fr; column-gap: 11px; border: 1px solid rgba(255,255,255,.075); border-radius: 14px; background: rgba(255,255,255,.035); }
.auth-feature-list > div > span { grid-row: 1 / 3; width: 39px; height: 39px; display: grid; place-items: center; border-radius: 11px; background: rgba(93, 221, 217, .12); color: #78dfda; }
.auth-feature-list strong { font-size: 12px; }
.auth-feature-list small { margin-top: 3px; color: #87a5ae; font-size: 10px; }
.auth-brand-panel__footer { position: relative; z-index: 1; color: #64858f; font-size: 10px; letter-spacing: .06em; }
.auth-main { min-width: 0; min-height: 100vh; padding: clamp(24px, 5vw, 74px); display: grid; place-items: center; background: radial-gradient(circle at 90% 0%, #dff5f5, transparent 31%), #f5f8f9; }
.auth-card { width: min(470px, 100%); padding: clamp(25px, 4vw, 42px); border: 1px solid var(--border); border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: var(--shadow); }
.auth-card h1 { font-size: 35px; }
.auth-intro { margin: 9px 0 25px; color: var(--muted); font-size: 13px; }
.auth-form { display: grid; gap: 16px; }
.field-label-row { display: flex; justify-content: space-between; gap: 12px; }
.password-field { position: relative; }
.password-field .input { padding-right: 66px; }
.password-field button { position: absolute; top: 50%; right: 7px; min-width: 50px; min-height: 32px; padding: 5px 8px; border: 0; border-radius: 8px; background: var(--surface-soft); color: var(--brand-strong); font-size: 9px; font-weight: 850; cursor: pointer; transform: translateY(-50%); }
.remember-control { padding: 11px 12px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.remember-control input { margin-top: 2px; flex: 0 0 auto; }
.remember-control span { display: grid; line-height: 1.25; }
.remember-control strong { font-size: 11px; }
.remember-control small { margin-top: 3px; color: var(--muted); font-size: 9.5px; }
.auth-submit { width: 100%; margin-top: 2px; }
.auth-security-note { margin-top: 20px; padding-top: 17px; display: flex; align-items: flex-start; gap: 9px; border-top: 1px solid var(--border); color: var(--muted); font-size: 10px; line-height: 1.5; }
.auth-security-note .icon { color: var(--brand); }
.auth-mobile-brand { display: none; margin-bottom: 27px; align-items: center; gap: 11px; }
.auth-mobile-brand > span:last-child { display: grid; line-height: 1.15; }
.auth-mobile-brand strong { font-size: 14px; }
.auth-mobile-brand small { margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 900px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand-panel { display: none; }
    .auth-main { padding: 22px; }
    .auth-mobile-brand { display: flex; }
}
@media (max-width: 520px) {
    .auth-main { min-height: 100svh; padding: 0; place-items: stretch; }
    .auth-card { min-height: 100svh; padding: 27px 19px; border: 0; border-radius: 0; box-shadow: none; }
    .auth-card h1 { font-size: 31px; }
}
[x-cloak] { display: none !important; }
.wizard-guidance { margin-bottom: 16px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid #d5eaed; border-radius: 12px; background: var(--brand-softer); color: #3f6069; font-size: 11px; line-height: 1.5; }
.wizard-guidance .icon { margin-top: 1px; color: var(--brand); }
.field-hint { margin-top: -1px; color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.review-list { display: grid; gap: 0; border: 1px solid var(--border); border-radius: 13px; overflow: hidden; }
.review-row { padding: 11px 13px; display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--border); }
.review-row:last-child { border-bottom: 0; }
.review-row span { color: var(--muted); font-size: 10px; }
.review-row strong { text-align: right; font-size: 11px; }
@media (max-width: 560px) { .review-row { align-items: flex-start; flex-direction: column; gap: 4px; } .review-row strong { text-align: left; } }