/* ===== RESET ===== */
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;tab-size:4}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
img,svg,button{display:block;font:inherit}
input,select,textarea{font:inherit;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border-style:solid;border-width:0;border-color:transparent;background:transparent;color:inherit}
input[type="radio"],input[type="checkbox"]{width:auto;display:inline-block;border:none;background:none}
table{border-collapse:collapse;border-spacing:0}
ul,ol{list-style:none}

/* ===== DISPLAY ===== */
.block{display:block}
.inline{display:inline}
.inline-block{display:inline-block}
.inline-flex{display:inline-flex}
.flex{display:flex}
.grid{display:grid}
.hidden{display:none}
.table{display:table}
.contents{display:contents}

/* ===== FLEX ===== */
.flex-row{flex-direction:row}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1 1 0%}
.flex-shrink-0{flex-shrink:0}
.items-start{align-items:flex-start}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.items-stretch{align-items:stretch}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-end{justify-content:flex-end}
.justify-start{justify-content:flex-start}
.self-start{align-self:flex-start}
.self-center{align-self:center}
.self-end{align-self:flex-end}

/* ===== GRID ===== */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.col-span-1{grid-column:span 1/span 1}
.col-span-2{grid-column:span 2/span 2}
.col-span-3{grid-column:span 3/span 3}
.col-span-4{grid-column:span 4/span 4}
.col-span-6{grid-column:span 6/span 6}
.col-span-12{grid-column:span 12/span 12}
.gap-1{gap:.25rem}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.gap-10{gap:2.5rem}
.gap-12{gap:3rem}

/* ===== SPACING ===== */
.m-0{margin:0}
.m-1{margin:.25rem}
.m-2{margin:.5rem}
.m-3{margin:.75rem}
.m-4{margin:1rem}
.m-5{margin:1.25rem}
.m-6{margin:1.5rem}
.m-8{margin:2rem}
.mx-auto{margin-left:auto;margin-right:auto}
.mx-0{margin-left:0;margin-right:0}
.mx-2{margin-left:.5rem;margin-right:.5rem}
.mx-3{margin-left:.75rem;margin-right:.75rem}
.mx-4{margin-left:1rem;margin-right:1rem}
.my-0{margin-top:0;margin-bottom:0}
.my-1{margin-top:.25rem;margin-bottom:.25rem}
.my-2{margin-top:.5rem;margin-bottom:.5rem}
.my-4{margin-top:1rem;margin-bottom:1rem}
.my-6{margin-top:1.5rem;margin-bottom:1.5rem}
.my-8{margin-top:2rem;margin-bottom:2rem}
.ml-0{margin-left:0}
.ml-1{margin-left:.25rem}
.ml-2{margin-left:.5rem}
.ml-3{margin-left:.75rem}
.ml-4{margin-left:1rem}
.ml-auto{margin-left:auto}
.mr-0{margin-right:0}
.mr-1{margin-right:.25rem}
.mr-2{margin-right:.5rem}
.mr-3{margin-right:.75rem}
.mr-4{margin-right:1rem}
.mr-auto{margin-right:auto}
.mt-0{margin-top:0}
.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-10{margin-top:2.5rem}
.mt-12{margin-top:3rem}
.mt-16{margin-top:4rem}
.mt-20{margin-top:5rem}
.mt-24{margin-top:6rem}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:.25rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-10{margin-bottom:2.5rem}
.mb-12{margin-bottom:3rem}
.mb-16{margin-bottom:4rem}
.-mt-1{margin-top:-.25rem}
.-mt-2{margin-top:-.5rem}
.-mt-4{margin-top:-1rem}
.-ml-1{margin-left:-.25rem}
.-ml-2{margin-left:-.5rem}

/* Space between children */
.space-y-0>*+*{margin-top:0}
.space-y-1>*+*{margin-top:.25rem}
.space-y-2>*+*{margin-top:.5rem}
.space-y-3>*+*{margin-top:.75rem}
.space-y-4>*+*{margin-top:1rem}
.space-y-5>*+*{margin-top:1.25rem}
.space-y-6>*+*{margin-top:1.5rem}
.space-y-8>*+*{margin-top:2rem}
.space-x-1>*+*{margin-left:.25rem}
.space-x-2>*+*{margin-left:.5rem}
.space-x-3>*+*{margin-left:.75rem}
.space-x-4>*+*{margin-left:1rem}
.space-x-5>*+*{margin-left:1.25rem}
.space-x-6>*+*{margin-left:1.5rem}
.space-x-8>*+*{margin-left:2rem}
.space-x-reverse>:not(:first-child){margin-left:0;margin-right:.25rem}

/* ===== PADDING ===== */
.p-0{padding:0}
.p-1{padding:.25rem}
.p-2{padding:.5rem}
.p-3{padding:.75rem}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.p-10{padding:2.5rem}
.p-12{padding:3rem}
.px-0{padding-left:0;padding-right:0}
.px-1{padding-left:.25rem;padding-right:.25rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.px-10{padding-left:2.5rem;padding-right:2.5rem}
.py-0{padding-top:0;padding-bottom:0}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.pt-0{padding-top:0}
.pt-1{padding-top:.25rem}
.pt-2{padding-top:.5rem}
.pt-4{padding-top:1rem}
.pt-5{padding-top:1.25rem}
.pt-6{padding-top:1.5rem}
.pt-8{padding-top:2rem}
.pb-0{padding-bottom:0}
.pb-1{padding-bottom:.25rem}
.pb-2{padding-bottom:.5rem}
.pb-4{padding-bottom:1rem}
.pb-5{padding-bottom:1.25rem}
.pb-6{padding-bottom:1.5rem}
.pb-8{padding-bottom:2rem}
.pl-0{padding-left:0}
.pl-1{padding-left:.25rem}
.pl-2{padding-left:.5rem}
.pl-3{padding-left:.75rem}
.pl-4{padding-left:1rem}
.pl-5{padding-left:1.25rem}
.pl-6{padding-left:1.5rem}
.pr-0{padding-right:0}
.pr-1{padding-right:.25rem}
.pr-2{padding-right:.5rem}
.pr-3{padding-right:.75rem}
.pr-4{padding-right:1rem}
.pr-5{padding-right:1.25rem}
.pr-6{padding-right:1.5rem}

/* ===== SIZING ===== */
.w-0{width:0}
.w-1{width:.25rem}
.w-2{width:.5rem}
.w-3{width:.75rem}
.w-4{width:1rem}
.w-5{width:1.25rem}
.w-6{width:1.5rem}
.w-8{width:2rem}
.w-10{width:2.5rem}
.w-12{width:3rem}
.w-16{width:4rem}
.w-20{width:5rem}
.w-24{width:6rem}
.w-32{width:8rem}
.w-40{width:10rem}
.w-48{width:12rem}
.w-56{width:14rem}
.w-64{width:16rem}
.w-auto{width:auto}
.w-full{width:100%}
.w-screen{width:100vw}
.w-1\/2{width:50%}
.w-1\/3{width:33.333333%}
.w-2\/3{width:66.666667%}
.w-1\/4{width:25%}
.w-3\/4{width:75%}
.w-1\/5{width:20%}
.w-2\/5{width:40%}
.w-3\/5{width:60%}
.w-4\/5{width:80%}
.w-1\/6{width:16.666667%}
.w-5\/6{width:83.333333%}
.min-w-0{min-width:0}
.min-w-full{min-width:100%}
.min-w-min{min-width:min-content}
.min-w-max{min-width:max-content}
.max-w-none{max-width:none}
.max-w-xs{max-width:20rem}
.max-w-sm{max-width:24rem}
.max-w-md{max-width:28rem}
.max-w-lg{max-width:32rem}
.max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}
.max-w-5xl{max-width:64rem}
.max-w-6xl{max-width:72rem}
.max-w-7xl{max-width:80rem}
.max-w-full{max-width:100%}
.max-w-prose{max-width:65ch}
.h-0{height:0}
.h-1{height:.25rem}
.h-2{height:.5rem}
.h-3{height:.75rem}
.h-4{height:1rem}
.h-5{height:1.25rem}
.h-6{height:1.5rem}
.h-8{height:2rem}
.h-10{height:2.5rem}
.h-12{height:3rem}
.h-16{height:4rem}
.h-20{height:5rem}
.h-24{height:6rem}
.h-32{height:8rem}
.h-40{height:10rem}
.h-48{height:12rem}
.h-56{height:14rem}
.h-64{height:16rem}
.h-80{height:20rem}
.h-96{height:24rem}
.h-auto{height:auto}
.h-full{height:100%}
.h-screen{height:100vh}
.min-h-0{min-height:0}
.min-h-full{min-height:100%}
.min-h-screen{min-height:100vh}
.min-h-\[60vh\]{min-height:60vh}
.min-h-\[80vh\]{min-height:80vh}
.max-h-full{max-height:100%}
.max-h-screen{max-height:100vh}

/* ===== FONT ===== */
.font-sans{font-family:system-ui,-apple-system,sans-serif}
.font-serif{font-family:Georgia,Cambria,'Times New Roman',Times,serif}
.font-mono{font-family:MENLO,Consolas,Monaco,'Liberation Mono',monospace}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-5xl{font-size:3rem;line-height:1}
.font-thin{font-weight:100}
.font-extralight{font-weight:200}
.font-light{font-weight:300}
.font-normal{font-weight:400}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.font-black{font-weight:900}
.uppercase{text-transform:uppercase}
.lowercase{text-transform:lowercase}
.capitalize{text-transform:capitalize}
.normal-case{text-transform:none}
.italic{font-style:italic}
.not-italic{font-style:normal}
.tracking-tight{letter-spacing:-.025em}
.tracking-normal{letter-spacing:0}
.tracking-wide{letter-spacing:.025em}
.tracking-wider{letter-spacing:.05em}
.tracking-widest{letter-spacing:.1em}

/* ===== LINE HEIGHT ===== */
.leading-3{line-height:.75rem}
.leading-4{line-height:1rem}
.leading-5{line-height:1.25rem}
.leading-6{line-height:1.5rem}
.leading-7{line-height:1.75rem}
.leading-8{line-height:2rem}
.leading-9{line-height:2.25rem}
.leading-10{line-height:2.5rem}
.leading-none{line-height:1}
.leading-tight{line-height:1.25}
.leading-snug{line-height:1.375}
.leading-normal{line-height:1.5}
.leading-relaxed{line-height:1.625}
.leading-loose{line-height:2}

/* ===== TEXT COLOR ===== */
.text-inherit{color:inherit}
.text-current{color:currentColor}
.text-transparent{color:transparent}
.text-black{color:#000}
.text-white{color:#fff}
.text-gray-50{color:#f9fafb}
.text-gray-100{color:#f3f4f6}
.text-gray-200{color:#e5e7eb}
.text-gray-300{color:#d1d5db}
.text-gray-400{color:#9ca3af}
.text-gray-500{color:#6b7280}
.text-gray-600{color:#4b5563}
.text-gray-700{color:#374151}
.text-gray-800{color:#1f2937}
.text-gray-900{color:#111827}
.text-red-50{color:#fef2f2}
.text-red-100{color:#fee2e2}
.text-red-200{color:#fecaca}
.text-red-300{color:#fca5a5}
.text-red-400{color:#f87171}
.text-red-500{color:#ef4444}
.text-red-600{color:#dc2626}
.text-red-700{color:#b91c1c}
.text-red-800{color:#991b1b}
.text-red-900{color:#7f1d1d}
.text-green-50{color:#f0fdf4}
.text-green-100{color:#dcfce7}
.text-green-200{color:#bbf7d0}
.text-green-300{color:#86efac}
.text-green-400{color:#4ade80}
.text-green-500{color:#22c55e}
.text-green-600{color:#16a34a}
.text-green-700{color:#15803d}
.text-green-800{color:#166534}
.text-green-900{color:#14532d}
.text-yellow-50{color:#fefce8}
.text-yellow-100{color:#fef9c3}
.text-yellow-200{color:#fef08a}
.text-yellow-300{color:#fde047}
.text-yellow-400{color:#facc15}
.text-yellow-500{color:#eab308}
.text-yellow-600{color:#ca8a04}
.text-yellow-700{color:#a16207}
.text-yellow-800{color:#854d0e}
.text-yellow-900{color:#713f12}
.text-blue-50{color:#eff6ff}
.text-blue-100{color:#dbeafe}
.text-blue-200{color:#bfdbfe}
.text-blue-300{color:#93c5fd}
.text-blue-400{color:#60a5fa}
.text-blue-500{color:#3b82f6}
.text-blue-600{color:#2563eb}
.text-blue-700{color:#1d4ed8}
.text-blue-800{color:#1e40af}
.text-blue-900{color:#1e3a8a}
.text-indigo-50{color:#eef2ff}
.text-indigo-100{color:#e0e7ff}
.text-indigo-200{color:#c7d2fe}
.text-indigo-300{color:#a5b4fc}
.text-indigo-400{color:#818cf8}
.text-indigo-500{color:#6366f1}
.text-indigo-600{color:#4f46e5}
.text-indigo-700{color:#4338ca}
.text-indigo-800{color:#3730a3}
.text-indigo-900{color:#312e81}

/* ===== BACKGROUND COLOR ===== */
.bg-transparent{background-color:transparent}
.bg-current{background-color:currentColor}
.bg-black{background-color:#000}
.bg-white{background-color:#fff}
.bg-gray-50{background-color:#f9fafb}
.bg-gray-100{background-color:#f3f4f6}
.bg-gray-200{background-color:#e5e7eb}
.bg-gray-300{background-color:#d1d5db}
.bg-gray-400{background-color:#9ca3af}
.bg-gray-500{background-color:#6b7280}
.bg-gray-600{background-color:#4b5563}
.bg-gray-700{background-color:#374151}
.bg-gray-800{background-color:#1f2937}
.bg-gray-900{background-color:#111827}
.bg-red-50{background-color:#fef2f2}
.bg-red-100{background-color:#fee2e2}
.bg-red-200{background-color:#fecaca}
.bg-red-300{background-color:#fca5a5}
.bg-red-400{background-color:#f87171}
.bg-red-500{background-color:#ef4444}
.bg-red-600{background-color:#dc2626}
.bg-red-700{background-color:#b91c1c}
.bg-red-800{background-color:#991b1b}
.bg-red-900{background-color:#7f1d1d}
.bg-green-50{background-color:#f0fdf4}
.bg-green-100{background-color:#dcfce7}
.bg-green-200{background-color:#bbf7d0}
.bg-green-300{background-color:#86efac}
.bg-green-400{background-color:#4ade80}
.bg-green-500{background-color:#22c55e}
.bg-green-600{background-color:#16a34a}
.bg-green-700{background-color:#15803d}
.bg-green-800{background-color:#166534}
.bg-green-900{background-color:#14532d}
.bg-yellow-50{background-color:#fefce8}
.bg-yellow-100{background-color:#fef9c3}
.bg-yellow-200{background-color:#fef08a}
.bg-yellow-300{background-color:#fde047}
.bg-yellow-400{background-color:#facc15}
.bg-yellow-500{background-color:#eab308}
.bg-yellow-600{background-color:#ca8a04}
.bg-yellow-700{background-color:#a16207}
.bg-yellow-800{background-color:#854d0e}
.bg-yellow-900{background-color:#713f12}
.bg-blue-50{background-color:#eff6ff}
.bg-blue-100{background-color:#dbeafe}
.bg-blue-200{background-color:#bfdbfe}
.bg-blue-300{background-color:#93c5fd}
.bg-blue-400{background-color:#60a5fa}
.bg-blue-500{background-color:#3b82f6}
.bg-blue-600{background-color:#2563eb}
.bg-blue-700{background-color:#1d4ed8}
.bg-blue-800{background-color:#1e40af}
.bg-blue-900{background-color:#1e3a8a}
.bg-indigo-50{background-color:#eef2ff}
.bg-indigo-100{background-color:#e0e7ff}
.bg-indigo-200{background-color:#c7d2fe}
.bg-indigo-300{background-color:#a5b4fc}
.bg-indigo-400{background-color:#818cf8}
.bg-indigo-500{background-color:#6366f1}
.bg-indigo-600{background-color:#4f46e5}
.bg-indigo-700{background-color:#4338ca}
.bg-indigo-800{background-color:#3730a3}
.bg-indigo-900{background-color:#312e81}

/* ===== BORDER ===== */
.border{border-width:1px;border-style:solid}
.border-0{border-width:0}
.border-2{border-width:2px}
.border-4{border-width:4px}
.border-8{border-width:8px}
.border-t{border-top-width:1px;border-top-style:solid}
.border-r{border-right-width:1px;border-right-style:solid}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-l{border-left-width:1px;border-left-style:solid}
.border-t-0{border-top-width:0}
.border-r-0{border-right-width:0}
.border-b-0{border-bottom-width:0}
.border-l-0{border-left-width:0}
.border-t-2{border-top-width:2px;border-top-style:solid}
.border-b-2{border-bottom-width:2px;border-bottom-style:solid}
.border-solid{border-style:solid}
.border-dashed{border-style:dashed}
.border-dotted{border-style:dotted}
.border-double{border-style:double}
.border-none{border-style:none}
.border-gray-100{border-color:#f3f4f6}
.border-gray-200{border-color:#e5e7eb}
.border-gray-300{border-color:#d1d5db}
.border-gray-400{border-color:#9ca3af}
.border-gray-500{border-color:#6b7280}
.border-gray-600{border-color:#4b5563}
.border-gray-700{border-color:#374151}
.border-gray-800{border-color:#1f2937}
.border-gray-900{border-color:#111827}
.border-red-100{border-color:#fee2e2}
.border-red-200{border-color:#fecaca}
.border-red-300{border-color:#fca5a5}
.border-red-400{border-color:#f87171}
.border-red-500{border-color:#ef4444}
.border-green-100{border-color:#dcfce7}
.border-green-200{border-color:#bbf7d0}
.border-green-300{border-color:#86efac}
.border-green-400{border-color:#4ade80}
.border-green-500{border-color:#22c55e}
.border-yellow-100{border-color:#fef9c3}
.border-yellow-200{border-color:#fef08a}
.border-yellow-300{border-color:#fde047}
.border-yellow-400{border-color:#facc15}
.border-yellow-500{border-color:#eab308}
.border-blue-100{border-color:#dbeafe}
.border-blue-200{border-color:#bfdbfe}
.border-blue-300{border-color:#93c5fd}
.border-blue-400{border-color:#60a5fa}
.border-blue-500{border-color:#3b82f6}
.border-indigo-100{border-color:#e0e7ff}
.border-indigo-200{border-color:#c7d2fe}
.border-indigo-300{border-color:#a5b4fc}
.border-indigo-400{border-color:#818cf8}
.border-indigo-500{border-color:#6366f1}

/* ===== BORDER RADIUS ===== */
.rounded{border-radius:.25rem}
.rounded-sm{border-radius:.125rem}
.rounded-md{border-radius:.375rem}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-3xl{border-radius:1.5rem}
.rounded-full{border-radius:9999px}
.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}
.rounded-t-sm{border-top-left-radius:.125rem;border-top-right-radius:.125rem}
.rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem}
.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}
.rounded-t-xl{border-top-left-radius:.75rem;border-top-right-radius:.75rem}
.rounded-t-2xl{border-top-left-radius:1rem;border-top-right-radius:1rem}
.rounded-b{border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}
.rounded-b-sm{border-bottom-left-radius:.125rem;border-bottom-right-radius:.125rem}
.rounded-b-md{border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem}
.rounded-b-lg{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}
.rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}
.rounded-l{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}
.rounded-tl{border-top-left-radius:.25rem}
.rounded-tr{border-top-right-radius:.25rem}
.rounded-br{border-bottom-right-radius:.25rem}
.rounded-bl{border-bottom-left-radius:.25rem}
.rounded-tl-lg{border-top-left-radius:.5rem}
.rounded-tr-lg{border-top-right-radius:.5rem}
.rounded-br-lg{border-bottom-right-radius:.5rem}
.rounded-bl-lg{border-bottom-left-radius:.5rem}

/* ===== SHADOW ===== */
.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}
.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.shadow-inner{box-shadow:inset 0 2px 4px 0 rgba(0,0,0,.05)}
.shadow-none{box-shadow:0 0 #0000}
.shadow-colored{box-shadow:0 10px 15px -3px var(--tw-ring-color,rgba(99,102,241,.3)),0 4px 6px -4px var(--tw-ring-color,rgba(99,102,241,.3))}

/* ===== OPACITY ===== */
.opacity-0{opacity:0}
.opacity-5{opacity:.05}
.opacity-10{opacity:.1}
.opacity-20{opacity:.2}
.opacity-25{opacity:.25}
.opacity-30{opacity:.3}
.opacity-40{opacity:.4}
.opacity-50{opacity:.5}
.opacity-60{opacity:.6}
.opacity-70{opacity:.7}
.opacity-75{opacity:.75}
.opacity-80{opacity:.8}
.opacity-90{opacity:.9}
.opacity-95{opacity:.95}
.opacity-100{opacity:1}

/* ===== OVERFLOW ===== */
.overflow-auto{overflow:auto}
.overflow-hidden{overflow:hidden}
.overflow-visible{overflow:visible}
.overflow-scroll{overflow:scroll}
.overflow-x-auto{overflow-x:auto}
.overflow-x-hidden{overflow-x:hidden}
.overflow-y-auto{overflow-y:auto}
.overflow-y-hidden{overflow-y:hidden}
.overflow-x-scroll{overflow-x:scroll}
.overflow-y-scroll{overflow-y:scroll}

/* ===== POSITION ===== */
.static{position:static}
.fixed{position:fixed}
.absolute{position:absolute}
.relative{position:relative}
.sticky{position:sticky}
.inset-0{top:0;right:0;bottom:0;left:0}
.inset-x-0{left:0;right:0}
.inset-y-0{top:0;bottom:0}
.top-0{top:0}
.right-0{right:0}
.bottom-0{bottom:0}
.left-0{left:0}
.z-0{z-index:0}
.z-10{z-index:10}
.z-20{z-index:20}
.z-30{z-index:30}
.z-40{z-index:40}
.z-50{z-index:50}
.-z-10{z-index:-10}

/* ===== CURSOR ===== */
.cursor-auto{cursor:auto}
.cursor-default{cursor:default}
.cursor-pointer{cursor:pointer}
.cursor-wait{cursor:wait}
.cursor-text{cursor:text}
.cursor-move{cursor:move}
.cursor-not-allowed{cursor:not-allowed}
.cursor-none{cursor:none}

/* ===== TRANSITION ===== */
.transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.transition-colors{transition-property:background-color,border-color,color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.duration-75{transition-duration:75ms}
.duration-100{transition-duration:100ms}
.duration-150{transition-duration:150ms}
.duration-200{transition-duration:200ms}
.duration-300{transition-duration:300ms}
.duration-500{transition-duration:500ms}
.duration-700{transition-duration:700ms}
.duration-1000{transition-duration:1000ms}
.ease-linear{transition-timing-function:linear}
.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}
.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}
.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}
.delay-75{transition-delay:75ms}
.delay-100{transition-delay:100ms}
.delay-150{transition-delay:150ms}
.delay-200{transition-delay:200ms}
.delay-300{transition-delay:300ms}

/* ===== HOVER ===== */
.hover\:bg-gray-50:hover{background-color:#f9fafb}
.hover\:bg-gray-100:hover{background-color:#f3f4f6}
.hover\:bg-gray-200:hover{background-color:#e5e7eb}
.hover\:bg-gray-300:hover{background-color:#d1d5db}
.hover\:bg-gray-700:hover{background-color:#374151}
.hover\:bg-gray-800:hover{background-color:#1f2937}
.hover\:bg-gray-900:hover{background-color:#111827}
.hover\:bg-red-50:hover{background-color:#fef2f2}
.hover\:bg-red-100:hover{background-color:#fee2e2}
.hover\:bg-red-500:hover{background-color:#ef4444}
.hover\:bg-red-600:hover{background-color:#dc2626}
.hover\:bg-red-700:hover{background-color:#b91c1c}
.hover\:bg-green-50:hover{background-color:#f0fdf4}
.hover\:bg-green-100:hover{background-color:#dcfce7}
.hover\:bg-green-500:hover{background-color:#22c55e}
.hover\:bg-green-600:hover{background-color:#16a34a}
.hover\:bg-green-700:hover{background-color:#15803d}
.hover\:bg-yellow-50:hover{background-color:#fefce8}
.hover\:bg-yellow-100:hover{background-color:#fef9c3}
.hover\:bg-yellow-500:hover{background-color:#eab308}
.hover\:bg-yellow-600:hover{background-color:#ca8a04}
.hover\:bg-yellow-700:hover{background-color:#a16207}
.hover\:bg-blue-50:hover{background-color:#eff6ff}
.hover\:bg-blue-100:hover{background-color:#dbeafe}
.hover\:bg-blue-500:hover{background-color:#3b82f6}
.hover\:bg-blue-600:hover{background-color:#2563eb}
.hover\:bg-blue-700:hover{background-color:#1d4ed8}
.hover\:bg-indigo-50:hover{background-color:#eef2ff}
.hover\:bg-indigo-100:hover{background-color:#e0e7ff}
.hover\:bg-indigo-500:hover{background-color:#6366f1}
.hover\:bg-indigo-600:hover{background-color:#4f46e5}
.hover\:bg-indigo-700:hover{background-color:#4338ca}
.hover\:bg-indigo-800:hover{background-color:#3730a3}
.hover\:text-gray-500:hover{color:#6b7280}
.hover\:text-gray-600:hover{color:#4b5563}
.hover\:text-gray-700:hover{color:#374151}
.hover\:text-gray-800:hover{color:#1f2937}
.hover\:text-gray-900:hover{color:#111827}
.hover\:text-red-500:hover{color:#ef4444}
.hover\:text-red-600:hover{color:#dc2626}
.hover\:text-red-700:hover{color:#b91c1c}
.hover\:text-red-800:hover{color:#991b1b}
.hover\:text-red-900:hover{color:#7f1d1d}
.hover\:text-green-600:hover{color:#16a34a}
.hover\:text-green-700:hover{color:#15803d}
.hover\:text-yellow-500:hover{color:#eab308}
.hover\:text-yellow-600:hover{color:#ca8a04}
.hover\:text-yellow-700:hover{color:#a16207}
.hover\:text-blue-500:hover{color:#3b82f6}
.hover\:text-blue-600:hover{color:#2563eb}
.hover\:text-blue-700:hover{color:#1d4ed8}
.hover\:text-indigo-500:hover{color:#6366f1}
.hover\:text-indigo-600:hover{color:#4f46e5}
.hover\:text-indigo-700:hover{color:#4338ca}
.hover\:text-indigo-800:hover{color:#3730a3}
.hover\:text-indigo-900:hover{color:#312e81}
.hover\:text-white:hover{color:#fff}
.hover\:border-gray-300:hover{border-color:#d1d5db}
.hover\:border-gray-400:hover{border-color:#9ca3af}
.hover\:border-green-300:hover{border-color:#86efac}
.hover\:border-green-400:hover{border-color:#4ade80}
.hover\:border-green-500:hover{border-color:#22c55e}
.hover\:border-red-300:hover{border-color:#fca5a5}
.hover\:border-red-400:hover{border-color:#f87171}
.hover\:border-yellow-300:hover{border-color:#fde047}
.hover\:border-yellow-400:hover{border-color:#facc15}
.hover\:border-blue-300:hover{border-color:#93c5fd}
.hover\:border-blue-400:hover{border-color:#60a5fa}
.hover\:border-indigo-300:hover{border-color:#a5b4fc}
.hover\:border-indigo-400:hover{border-color:#818cf8}

/* ===== FOCUS ===== */
.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.focus\:ring-0:focus{box-shadow:0 0 0 0 transparent}
.focus\:ring-1:focus{box-shadow:0 0 0 1px rgba(99,102,241,.5)}
.focus\:ring-2:focus{box-shadow:0 0 0 2px rgba(99,102,241,.5)}
.focus\:ring-4:focus{box-shadow:0 0 0 4px rgba(99,102,241,.5)}
.focus\:ring:focus{box-shadow:0 0 0 2px rgba(99,102,241,.5)}
.focus\:ring-indigo-500:focus{box-shadow:0 0 0 3px rgba(99,102,241,.3)}
.focus\:ring-red-500:focus{box-shadow:0 0 0 3px rgba(239,68,68,.3)}
.focus\:ring-green-500:focus{box-shadow:0 0 0 3px rgba(34,197,94,.3)}
.focus\:ring-yellow-500:focus{box-shadow:0 0 0 3px rgba(234,179,8,.3)}
.focus\:ring-blue-500:focus{box-shadow:0 0 0 3px rgba(59,130,246,.3)}
.focus\:border:focus{border-color:currentColor}
.focus\:border-gray-300:focus{border-color:#d1d5db}
.focus\:border-gray-400:focus{border-color:#9ca3af}
.focus\:border-gray-500:focus{border-color:#6b7280}
.focus\:border-red-300:focus{border-color:#fca5a5}
.focus\:border-red-500:focus{border-color:#ef4444}
.focus\:border-green-300:focus{border-color:#86efac}
.focus\:border-green-500:focus{border-color:#22c55e}
.focus\:border-yellow-300:focus{border-color:#fde047}
.focus\:border-yellow-500:focus{border-color:#eab308}
.focus\:border-blue-300:focus{border-color:#93c5fd}
.focus\:border-blue-500:focus{border-color:#3b82f6}
.focus\:border-indigo-300:focus{border-color:#a5b4fc}
.focus\:border-indigo-500:focus{border-color:#6366f1}
.focus\:bg-gray-100:focus{background-color:#f3f4f6}
.focus\:bg-gray-200:focus{background-color:#e5e7eb}
.focus\:bg-gray-700:focus{background-color:#374151}
.focus\:bg-gray-800:focus{background-color:#1f2937}
.focus\:bg-red-100:focus{background-color:#fee2e2}
.focus\:bg-red-500:focus{background-color:#ef4444}
.focus\:bg-green-100:focus{background-color:#dcfce7}
.focus\:bg-green-500:focus{background-color:#22c55e}
.focus\:bg-yellow-100:focus{background-color:#fef9c3}
.focus\:bg-yellow-500:focus{background-color:#eab308}
.focus\:bg-blue-100:focus{background-color:#dbeafe}
.focus\:bg-blue-500:focus{background-color:#3b82f6}
.focus\:bg-indigo-100:focus{background-color:#e0e7ff}
.focus\:bg-indigo-500:focus{background-color:#6366f1}
.focus\:text-white:focus{color:#fff}

/* ===== TEXT ALIGN ===== */
.text-left{text-align:left}
.text-center{text-align:center}
.text-right{text-align:right}

/* ===== VERTICAL ALIGN ===== */
.align-baseline{vertical-align:baseline}
.align-top{vertical-align:top}
.align-middle{vertical-align:middle}
.align-bottom{vertical-align:bottom}
.align-text-top{vertical-align:text-top}
.align-text-bottom{vertical-align:text-bottom}

/* ===== TABLE ===== */
.table-auto{table-layout:auto}
.table-fixed{table-layout:fixed}
.table-cell{display:table-cell}
.table-row{display:table-row}
.table-column{display:table-column}
.table-header-group{display:table-header-group}
.table-row-group{display:table-row-group}
.table-footer-group{display:table-footer-group}
.table-caption{display:table-caption}
.border-collapse{border-collapse:collapse}
.border-separate{border-separate:separate}
.border-spacing-0{border-spacing:0}
.border-spacing-1{border-spacing:.25rem}
.border-spacing-2{border-spacing:.5rem}
.border-spacing-3{border-spacing:.75rem}
.border-spacing-4{border-spacing:1rem}
.divide-y>*+*{border-top-width:1px;border-top-style:solid}
.divide-y-2>*+*{border-top-width:2px;border-top-style:solid}
.divide-x>*+*{border-left-width:1px;border-left-style:solid}
.divide-gray-100>*+*{border-color:#f3f4f6}
.divide-gray-200>*+*{border-color:#e5e7eb}
.divide-gray-300>*+*{border-color:#d1d5db}
.divide-gray-400>*+*{border-color:#9ca3af}
.divide-gray-500>*+*{border-color:#6b7280}
.divide-gray-600>*+*{border-color:#4b5563}
.divide-gray-700>*+*{border-color:#374151}
.divide-gray-800>*+*{border-color:#1f2937}
.divide-gray-900>*+*{border-color:#111827}

/* ===== WHITE SPACE ===== */
.whitespace-normal{white-space:normal}
.whitespace-nowrap{white-space:nowrap}
.whitespace-pre{white-space:pre}
.whitespace-pre-line{white-space:pre-line}
.whitespace-pre-wrap{white-space:pre-wrap}

/* ===== TEXT OVERFLOW ===== */
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}
.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.line-clamp-none{-webkit-line-clamp:unset}

/* ===== BREAK ===== */
.break-normal{overflow-wrap:normal;word-break:normal}
.break-words{overflow-wrap:break-word}
.break-all{word-break:break-all}
.break-keep{word-break:keep-all}

/* ===== RING ===== */
.ring-0{box-shadow:0 0 0 0 transparent}
.ring-1{box-shadow:0 0 0 1px rgba(99,102,241,.5)}
.ring-2{box-shadow:0 0 0 2px rgba(99,102,241,.5)}
.ring-4{box-shadow:0 0 0 4px rgba(99,102,241,.5)}
.ring-8{box-shadow:0 0 0 8px rgba(99,102,241,.5)}
.ring-inset{box-shadow:inset 0 0 0 1px rgba(99,102,241,.5)}

/* ===== TABLE LAYOUT HELPERS ===== */
.min-w-0{min-width:0}

/* ===== RESPONSIVE ===== */
@media (min-width:640px) {
  .sm\:block{display:block}
  .sm\:flex{display:flex}
  .sm\:inline-flex{display:inline-flex}
  .sm\:grid{display:grid}
  .sm\:hidden{display:none}
  .sm\:contents{display:contents}
  .sm\:flex-row{flex-direction:row}
  .sm\:flex-col{flex-direction:column}
  .sm\:flex-wrap{flex-wrap:wrap}
  .sm\:flex-1{flex:1 1 0%}
  .sm\:items-start{align-items:flex-start}
  .sm\:items-center{align-items:center}
  .sm\:items-end{align-items:flex-end}
  .sm\:justify-center{justify-content:center}
  .sm\:justify-between{justify-content:space-between}
  .sm\:justify-end{justify-content:flex-end}
  .sm\:gap-4{gap:1rem}
  .sm\:gap-6{gap:1.5rem}
  .sm\:space-x-0>*+*{margin-left:0}
  .sm\:space-x-2>*+*{margin-left:.5rem}
  .sm\:space-x-3>*+*{margin-left:.75rem}
  .sm\:space-x-4>*+*{margin-left:1rem}
  .sm\:space-x-6>*+*{margin-left:1.5rem}
  .sm\:space-y-0>*+*{margin-top:0}
  .sm\:space-y-2>*+*{margin-top:.5rem}
  .sm\:space-y-4>*+*{margin-top:1rem}
  .sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sm\:px-4{padding-left:1rem;padding-right:1rem}
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:px-8{padding-left:2rem;padding-right:2rem}
  .sm\:py-4{padding-top:1rem;padding-bottom:1rem}
  .sm\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}
  .sm\:py-8{padding-top:2rem;padding-bottom:2rem}
  .sm\:text-left{text-align:left}
  .sm\:text-center{text-align:center}
}

@media (min-width:768px) {
  .md\:block{display:block}
  .md\:flex{display:flex}
  .md\:inline-flex{display:inline-flex}
  .md\:grid{display:grid}
  .md\:hidden{display:none}
  .md\:contents{display:contents}
  .md\:flex-row{flex-direction:row}
  .md\:flex-col{flex-direction:column}
  .md\:flex-wrap{flex-wrap:wrap}
  .md\:flex-1{flex:1 1 0%}
  .md\:items-start{align-items:flex-start}
  .md\:items-center{align-items:center}
  .md\:items-end{align-items:flex-end}
  .md\:justify-center{justify-content:center}
  .md\:justify-between{justify-content:space-between}
  .md\:justify-end{justify-content:flex-end}
  .md\:gap-4{gap:1rem}
  .md\:gap-6{gap:1.5rem}
  .md\:gap-8{gap:2rem}
  .md\:space-x-0>*+*{margin-left:0}
  .md\:space-x-2>*+*{margin-left:.5rem}
  .md\:space-x-3>*+*{margin-left:.75rem}
  .md\:space-x-4>*+*{margin-left:1rem}
  .md\:space-x-6>*+*{margin-left:1.5rem}
  .md\:space-x-8>*+*{margin-left:2rem}
  .md\:space-y-0>*+*{margin-top:0}
  .md\:space-y-4>*+*{margin-top:1rem}
  .md\:space-y-6>*+*{margin-top:1.5rem}
  .md\:space-y-8>*+*{margin-top:2rem}
  .md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .md\:col-span-1{grid-column:span 1/span 1}
  .md\:col-span-2{grid-column:span 2/span 2}
  .md\:col-span-3{grid-column:span 3/span 3}
  .md\:col-span-4{grid-column:span 4/span 4}
  .md\:col-span-6{grid-column:span 6/span 6}
  .md\:col-span-12{grid-column:span 12/span 12}
  .md\:px-4{padding-left:1rem;padding-right:1rem}
  .md\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .md\:px-8{padding-left:2rem;padding-right:2rem}
  .md\:py-4{padding-top:1rem;padding-bottom:1rem}
  .md\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}
  .md\:py-8{padding-top:2rem;padding-bottom:2rem}
  .md\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}
  .md\:py-12{padding-top:3rem;padding-bottom:3rem}
  .md\:w-auto{width:auto}
  .md\:w-full{width:100%}
  .md\:max-w-sm{max-width:24rem}
  .md\:max-w-md{max-width:28rem}
  .md\:max-w-lg{max-width:32rem}
  .md\:max-w-xl{max-width:36rem}
  .md\:max-w-2xl{max-width:42rem}
  .md\:text-left{text-align:left}
  .md\:text-center{text-align:center}
}

@media (min-width:1024px) {
  .lg\:block{display:block}
  .lg\:flex{display:flex}
  .lg\:inline-flex{display:inline-flex}
  .lg\:grid{display:grid}
  .lg\:hidden{display:none}
  .lg\:contents{display:contents}
  .lg\:flex-row{flex-direction:row}
  .lg\:flex-col{flex-direction:column}
  .lg\:flex-wrap{flex-wrap:wrap}
  .lg\:flex-1{flex:1 1 0%}
  .lg\:items-start{align-items:flex-start}
  .lg\:items-center{align-items:center}
  .lg\:items-end{align-items:flex-end}
  .lg\:justify-center{justify-content:center}
  .lg\:justify-between{justify-content:space-between}
  .lg\:justify-end{justify-content:flex-end}
  .lg\:gap-4{gap:1rem}
  .lg\:gap-6{gap:1.5rem}
  .lg\:gap-8{gap:2rem}
  .lg\:space-x-0>*+*{margin-left:0}
  .lg\:space-x-2>*+*{margin-left:.5rem}
  .lg\:space-x-4>*+*{margin-left:1rem}
  .lg\:space-x-6>*+*{margin-left:1.5rem}
  .lg\:space-x-8>*+*{margin-left:2rem}
  .lg\:space-y-0>*+*{margin-top:0}
  .lg\:space-y-4>*+*{margin-top:1rem}
  .lg\:space-y-6>*+*{margin-top:1.5rem}
  .lg\:space-y-8>*+*{margin-top:2rem}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .lg\:col-span-1{grid-column:span 1/span 1}
  .lg\:col-span-2{grid-column:span 2/span 2}
  .lg\:col-span-3{grid-column:span 3/span 3}
  .lg\:col-span-4{grid-column:span 4/span 4}
  .lg\:col-span-6{grid-column:span 6/span 6}
  .lg\:col-span-12{grid-column:span 12/span 12}
  .lg\:px-4{padding-left:1rem;padding-right:1rem}
  .lg\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .lg\:px-8{padding-left:2rem;padding-right:2rem}
  .lg\:py-4{padding-top:1rem;padding-bottom:1rem}
  .lg\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}
  .lg\:py-8{padding-top:2rem;padding-bottom:2rem}
  .lg\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}
  .lg\:py-12{padding-top:3rem;padding-bottom:3rem}
  .lg\:w-auto{width:auto}
  .lg\:w-full{width:100%}
  .lg\:max-w-sm{max-width:24rem}
  .lg\:max-w-md{max-width:28rem}
  .lg\:max-w-lg{max-width:32rem}
  .lg\:max-w-xl{max-width:36rem}
  .lg\:max-w-2xl{max-width:42rem}
  .lg\:max-w-4xl{max-width:56rem}
  .lg\:max-w-7xl{max-width:80rem}
  .lg\:text-left{text-align:left}
  .lg\:text-center{text-align:center}
}

@media (min-width:1280px) {
  .xl\:block{display:block}
  .xl\:flex{display:flex}
  .xl\:grid{display:grid}
  .xl\:hidden{display:none}
  .xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* ===== ARBITRARY ===== */
.\!hidden{display:none !important}
.\!block{display:block !important}
.\!flex{display:flex !important}

/* ===== APP CUSTOM ===== */
.pl-8{padding-left:2rem}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ===== MISSING UTILITIES ===== */
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.focus\:bg-white:focus{background-color:#fff}
.focus\:ring-emerald-500:focus{box-shadow:0 0 0 3px rgba(16,185,129,0.3)}
.focus\:border-emerald-500:focus{border-color:#10b981}
.focus\:ring-blue-500:focus{box-shadow:0 0 0 3px rgba(59,130,246,0.3)}
.focus\:border-blue-500:focus{border-color:#3b82f6}
.left-4{left:1rem}
.left-3{left:.75rem}
.top-1\/2{top:50%}
.-translate-y-1\/2{transform:translateY(-50%)}
.pointer-events-none{pointer-events:none}
.focus\:ring-transparent:focus{box-shadow:0 0 0 0 transparent}

/* ===== PAGE ANIMATIONS ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeInUp 0.3s ease-out both; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ===== SIDEBAR POLISH ===== */
.sidebar { width: 200px; min-height: 100vh; position: fixed; left: 0; top: 0; z-index: 40; background: #fff; border-right: 1px solid #e5e7eb; }
.sidebar-link {
  display: flex; align-items: center; padding: 0.5625rem 0.875rem; border-radius: 0.5rem;
  font-size: 0.8125rem; font-weight: 500; transition: all 0.15s ease; margin-bottom: 2px;
  color: #64748b; position: relative; border-left: 3px solid transparent;
}
.sidebar-link:hover { background-color: #f1f5f9; color: #1e293b; }
.sidebar-link-active {
  background-color: #eef2ff; color: #4f46e5; font-weight: 600;
  border-left-color: #4f46e5; border-radius: 0 0.5rem 0.5rem 0;
}
.sidebar-link-active:hover { background-color: #e0e7ff; color: #4338ca; }

/* ===== MAIN CONTENT ===== */
.main-content { margin-left: 200px; }
.content-fade { animation: fadeInUp 0.3s ease-out both; }

/* ===== RESPONSIVE SIDEBAR ===== */
@media (max-width: 1023px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 50;
  }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
}


/* ===== CARD HOVER LIFT ===== */
.card-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 25px -5px rgba(0,0,0,0.1), 0 4px 10px -5px rgba(0,0,0,0.04); }

/* ===== TABLE POLISH ===== */
.table-header { background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); }
.table-row-even { background-color: #ffffff; }
.table-row-odd { background-color: #f9fafb; }
.table-row:hover { background-color: #eef2ff !important; }

/* ===== ALERT STYLES ===== */
.alert-success {
  background-color: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
  border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.alert-error {
  background-color: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
  border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem;
  display: flex; align-items: center; gap: 0.5rem;
}

/* ===== NAVBAR POLISH ===== */
.navbar { box-shadow: 0 1px 3px 0 rgba(0,0,0,.05), 0 1px 2px -1px rgba(0,0,0,.05); }

/* ===== MODAL ANIMATIONS ===== */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 50; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.2s ease;
}
.modal-overlay.active { display: flex; opacity: 1; }
.modal-overlay .modal,
.modal-overlay > div {
  transform: scale(0.95); transition: transform 0.2s ease;
}
.modal-overlay.active .modal,
.modal-overlay.active > div {
  transform: scale(1);
}

/* ===== BUTTON STYLES ===== */
.btn-primary {
  background: linear-gradient(135deg, #0B3C68, #0082C8);
  color: white; font-weight: 600; border-radius: 0.75rem;
  padding: 0.625rem 1.25rem; font-size: 0.875rem;
  transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0,130,200,.3);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #0082C8, #00A896);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,130,200,.35);
}
.btn-primary:active { transform: translateY(0); }

.btn-success {
  background: linear-gradient(135deg, #059669, #10b981);
  color: white; font-weight: 600; border-radius: 0.75rem;
  padding: 0.625rem 1.25rem; font-size: 0.875rem;
  transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(16,185,129,.3);
}
.btn-success:hover {
  box-shadow: 0 4px 12px rgba(16,185,129,.35); transform: translateY(-1px);
}

.btn-secondary {
  background: #f1f5f9; color: #475569; font-weight: 500;
  border-radius: 0.75rem; padding: 0.625rem 1.25rem; font-size: 0.875rem;
  transition: all 0.15s ease;
}
.btn-secondary:hover { background: #e2e8f0; }

.btn-danger {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: white; font-weight: 600; border-radius: 0.75rem;
  padding: 0.625rem 1.25rem; font-size: 0.875rem;
  transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(220,38,38,.3);
}
.btn-danger:hover {
  box-shadow: 0 4px 12px rgba(220,38,38,.35); transform: translateY(-1px);
}

/* ===== STATUS BADGES ===== */
.badge { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-yellow { background: #fef9c3; color: #854d0e; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-purple { background: #f3e8ff; color: #6b21a8; }
.badge-gray { background: #f3f4f6; color: #374151; }

/* ===== INPUT POLISH ===== */
.input-base {
  width: 100%; padding: 0.625rem 1rem; border: 1px solid #e5e7eb;
  border-radius: 0.75rem; font-size: 0.875rem; background: #f9fafb;
  transition: all 0.15s ease; outline: none;
}
.input-base:focus {
  background: #fff; border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.input-base::placeholder { color: #9ca3af; }

/* ===== FLOATING ORBS (login bg) ===== */
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.95); }
}
.orb {
  position: absolute; border-radius: 50%; filter: blur(80px);
  animation: orbFloat 20s ease-in-out infinite;
}
.orb-1 { width: 400px; height: 400px; background: rgba(255,183,3,0.15); top: -10%; right: -5%; animation-delay: 0s; }
.orb-2 { width: 300px; height: 300px; background: rgba(0,168,150,0.12); bottom: -5%; left: -5%; animation-delay: -7s; }
.orb-3 { width: 250px; height: 250px; background: rgba(0,130,200,0.1); top: 40%; left: 30%; animation-delay: -14s; }

/* ===== LOGIN LOADING ===== */
.btn-loading { pointer-events: none; opacity: 0.7; }
.btn-loading::after {
  content: ''; display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: white;
  border-radius: 50%; animation: spin 0.6s linear infinite;
  margin-left: 8px; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== SUBTLE BG PATTERN ===== */
body.bg-gray-100 {
  background-color: #f3f4f6;
  background-image: radial-gradient(circle at 20% 50%, rgba(99,102,241,.03) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(0,130,200,.03) 0%, transparent 50%);
}

/* ===== TOAST CONTAINER ===== */
.toast-container { position: fixed; bottom: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; }

/* ===== SCREEN READER ONLY ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* ===== PASSWORD TOGGLE ===== */
.password-wrapper { position: relative; }
.password-wrapper input { padding-right: 2.75rem; }
.password-toggle {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: #9ca3af; padding: 0.25rem;
  display: flex; align-items: center; justify-content: center; transition: color 0.15s;
}
.password-toggle:hover { color: #4b5563; }

/* ===== PASSWORD STRENGTH ===== */
.password-strength { display: flex; gap: 4px; margin-top: 0.375rem; }
.password-strength-bar { height: 3px; flex: 1; border-radius: 2px; background: #e5e7eb; transition: background 0.2s; }
.password-strength-text { font-size: 0.7rem; margin-top: 2px; font-weight: 500; }

/* ===== LOADING SKELETON ===== */
.skeleton { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 0.5rem; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ===== SEARCH BAR CONSISTENT ===== */
.search-bar { display: flex; align-items: center; gap: 0.5rem; }
.search-bar input { flex: 1; }

/* ===== EMPTY STATE ===== */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; color: #9ca3af; text-align: center; }
.empty-state svg { width: 3rem; height: 3rem; margin-bottom: 0.75rem; }
.empty-state p { font-size: 0.875rem; }

/* ===== TABLE RESPONSIVE ===== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 100%; }
@media (max-width: 768px) {
  .table-responsive { display: none; }
  .card-list { display: block !important; }
}
.card-list { display: none; }