/* layer: preflights */
*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
/* layer: shortcuts */
.main-title{margin-bottom:0.5rem;text-align:center;font-size:1.875rem;line-height:2.25rem;--un-text-opacity:1;color:rgb(17 24 39 / var(--un-text-opacity)) /* #111827 */;font-weight:700;}
.subtitle{margin-bottom:2rem;text-align:center;font-size:1.125rem;line-height:1.75rem;--un-text-opacity:1;color:rgb(75 85 99 / var(--un-text-opacity)) /* #4b5563 */;}
.flex-center{display:flex;align-items:center;justify-content:center;}
.sidebar{position:fixed;top:0;left:-400px;width:300px;height:100vh;background:#434343;color:white;transition:left 0.3s ease;z-index:2000;padding:60px 20px 20px;}
.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);opacity:0;visibility:hidden;transition:all 0.3s ease;z-index:1500;}
.btn-close{position:absolute;top:15px;right:15px;background:none;border:none;color:white;font-size:30px;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;}
/* layer: default */
.grid{display:grid;}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
.mx-auto{margin-left:auto;margin-right:auto;}
.mb-2{margin-bottom:0.5rem;}
.mb-3{margin-bottom:0.75rem;}
.mb-4{margin-bottom:1rem;}
.mb-6{margin-bottom:1.5rem;}
.mb-8{margin-bottom:2rem;}
.ml-1{margin-left:0.25rem;}
.mr-2{margin-right:0.5rem;}
.mr-3{margin-right:0.75rem;}
.mt-6{margin-top:1.5rem;}
.hidden{display:none;}
.h-16{height:4rem;}
.h-2{height:0.5rem;}
.h-4{height:1rem;}
.h-full{height:100%;}
.w-16{width:4rem;}
.w-2{width:0.5rem;}
.w-4{width:1rem;}
.w-full{width:100%;}
.flex{display:flex;}
.inline-flex{display:inline-flex;}
.flex-1{flex:1 1 0%;}
.flex-col{flex-direction:column;}
.items-center{align-items:center;}
.justify-center{justify-content:center;}
.gap-4{gap:1rem;}
.gap-6{gap:1.5rem;}
.space-y-2>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.5rem * var(--un-space-y-reverse));}
.space-y-3>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.75rem * var(--un-space-y-reverse));}
.space-y-4>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1rem * var(--un-space-y-reverse));}
.space-y-6>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1.5rem * var(--un-space-y-reverse));}
.border{border-width:1px;}
.border-l-4{border-left-width:4px;}
.border-amber-500{--un-border-opacity:1;border-color:rgb(245 158 11 / var(--un-border-opacity));}
.border-blue-500{--un-border-opacity:1;border-color:rgb(59 130 246 / var(--un-border-opacity));}
.border-green-500{--un-border-opacity:1;border-color:rgb(34 197 94 / var(--un-border-opacity));}
.border-purple-500{--un-border-opacity:1;border-color:rgb(168 85 247 / var(--un-border-opacity));}
.rounded{border-radius:0.25rem;}
.rounded-full{border-radius:9999px;}
.rounded-lg{border-radius:0.5rem;}
.bg-amber-50{--un-bg-opacity:1;background-color:rgb(255 251 235 / var(--un-bg-opacity)) /* #fffbeb */;}
.bg-amber-500{--un-bg-opacity:1;background-color:rgb(245 158 11 / var(--un-bg-opacity)) /* #f59e0b */;}
.bg-blue-50{--un-bg-opacity:1;background-color:rgb(239 246 255 / var(--un-bg-opacity)) /* #eff6ff */;}
.bg-gray-600{--un-bg-opacity:1;background-color:rgb(75 85 99 / var(--un-bg-opacity)) /* #4b5563 */;}
.bg-green-50{--un-bg-opacity:1;background-color:rgb(240 253 244 / var(--un-bg-opacity)) /* #f0fdf4 */;}
.bg-green-500{--un-bg-opacity:1;background-color:rgb(34 197 94 / var(--un-bg-opacity)) /* #22c55e */;}
.bg-purple-50{--un-bg-opacity:1;background-color:rgb(250 245 255 / var(--un-bg-opacity)) /* #faf5ff */;}
.bg-purple-500{--un-bg-opacity:1;background-color:rgb(168 85 247 / var(--un-bg-opacity)) /* #a855f7 */;}
.bg-purple-600{--un-bg-opacity:1;background-color:rgb(147 51 234 / var(--un-bg-opacity)) /* #9333ea */;}
.bg-white{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity)) /* #fff */;}
.hover\:bg-gray-700:hover{--un-bg-opacity:1;background-color:rgb(55 65 81 / var(--un-bg-opacity)) /* #374151 */;}
.hover\:bg-gray-800:hover{--un-bg-opacity:1;background-color:rgb(31 41 55 / var(--un-bg-opacity)) /* #1f2937 */;}
.hover\:bg-purple-700:hover{--un-bg-opacity:1;background-color:rgb(126 34 206 / var(--un-bg-opacity)) /* #7e22ce */;}
.p-4{padding:1rem;}
.px-6{padding-left:1.5rem;padding-right:1.5rem;}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
.text-center{text-align:center;}
.text-sm{font-size:0.875rem;line-height:1.25rem;}
.text-xl{font-size:1.25rem;line-height:1.75rem;}
.text-amber-600{--un-text-opacity:1;color:rgb(217 119 6 / var(--un-text-opacity)) /* #d97706 */;}
.text-amber-800{--un-text-opacity:1;color:rgb(146 64 14 / var(--un-text-opacity)) /* #92400e */;}
.text-blue-600{--un-text-opacity:1;color:rgb(37 99 235 / var(--un-text-opacity)) /* #2563eb */;}
.text-blue-700{--un-text-opacity:1;color:rgb(29 78 216 / var(--un-text-opacity)) /* #1d4ed8 */;}
.text-gray-600{--un-text-opacity:1;color:rgb(75 85 99 / var(--un-text-opacity)) /* #4b5563 */;}
.text-gray-700{--un-text-opacity:1;color:rgb(55 65 81 / var(--un-text-opacity)) /* #374151 */;}
.text-gray-800{--un-text-opacity:1;color:rgb(31 41 55 / var(--un-text-opacity)) /* #1f2937 */;}
.text-green-600{--un-text-opacity:1;color:rgb(22 163 74 / var(--un-text-opacity)) /* #16a34a */;}
.text-green-800{--un-text-opacity:1;color:rgb(22 101 52 / var(--un-text-opacity)) /* #166534 */;}
.text-purple-600{--un-text-opacity:1;color:rgb(147 51 234 / var(--un-text-opacity)) /* #9333ea */;}
.text-purple-800{--un-text-opacity:1;color:rgb(107 33 168 / var(--un-text-opacity)) /* #6b21a8 */;}
.text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}
.hover\:text-amber-800:hover{--un-text-opacity:1;color:rgb(146 64 14 / var(--un-text-opacity)) /* #92400e */;}
.hover\:text-blue-800:hover{--un-text-opacity:1;color:rgb(30 64 175 / var(--un-text-opacity)) /* #1e40af */;}
.hover\:text-green-800:hover{--un-text-opacity:1;color:rgb(22 101 52 / var(--un-text-opacity)) /* #166534 */;}
.hover\:text-purple-800:hover{--un-text-opacity:1;color:rgb(107 33 168 / var(--un-text-opacity)) /* #6b21a8 */;}
.font-bold{font-weight:700;}
.font-medium{font-weight:500;}
.font-semibold{font-weight:600;}
.underline{text-decoration-line:underline;}
.hover\:shadow-lg:hover{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.ease{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}
.body-def{font-family:Arial,sans-serif;line-height:1.6;color:#333;background-color:#f4f4f4;}
.btn-primary{background:linear-gradient(135deg, #667eea, #764ba2);color:linear-gradient(135deg, #667eea, #764ba2);padding:2rem 0;text-align:center;}
.text-gradient{background:linear-gradient(45deg, #f093fb, #f5576c);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.nav{background-color:#434343;padding:1rem 0;}
.nav-a{background-color:#434343;color:white;text-decoration:none;padding:0.5rem 1rem;margin:0 0.5rem;border-radius:4px;transition:background-color 0.3s ease;}
.reset-spacing{margin:0;padding:0;box-sizing:border-box;}
.main-def{max-width:1900px;margin:2rem auto;padding:0 1rem;}
.card{background:white;padding:2rem;margin-bottom:2rem;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,0.1);}
.sidebar-open{left:0;}
.overlay-active{opacity:1;visibility:visible;}
@media (min-width: 640px){
.sm\:flex-row{flex-direction:row;}
}
@media (min-width: 768px){
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.md\:h-20{height:5rem;}
.md\:w-20{width:5rem;}
}