/* Arena dashboard utility classes — loaded by AdminPanelProvider for custom Filament pages where the panel's compiled Tailwind doesn't ship the utilities we need. */ .arena-helper-text { font-size: 0.75rem; color: rgb(107, 114, 128); } html.dark .arena-helper-text { color: rgb(156, 163, 175); } .arena-chip { display: inline-block; background-color: rgb(243, 244, 246); padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } html.dark .arena-chip { background-color: rgb(31, 41, 55); color: rgb(229, 231, 235); } .arena-code-block { margin-top: 0.5rem; overflow-x: auto; background-color: rgb(243, 244, 246); padding: 8px; border-radius: 4px; font-size: 0.75rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } html.dark .arena-code-block { background-color: rgb(31, 41, 55); color: rgb(229, 231, 235); } .arena-token-display { display: block; word-break: break-all; background-color: rgb(254, 243, 199); color: rgb(120, 53, 15); padding: 12px; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem; } html.dark .arena-token-display { background-color: rgba(120, 53, 15, 0.4); color: rgb(254, 243, 199); } .arena-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; } @media (min-width: 768px) { .arena-grid-2 { grid-template-columns: repeat(2, 1fr); } } .arena-mt-sm { margin-top: 0.5rem; } .arena-mt-md { margin-top: 1rem; } .arena-empty-state { padding: 3rem 0; text-align: center; font-size: 0.875rem; color: rgb(107, 114, 128); } html.dark .arena-empty-state { color: rgb(156, 163, 175); } .arena-table-wrap { overflow-x: auto; } .arena-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .arena-table thead tr, .arena-table tbody tr { border-bottom: 1px solid rgb(229, 231, 235); } html.dark .arena-table thead tr, html.dark .arena-table tbody tr { border-bottom-color: rgba(255, 255, 255, 0.1); } .arena-table th { padding: 12px 16px; text-align: left; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(107, 114, 128); } .arena-table td { padding: 12px 16px; color: rgb(55, 65, 81); vertical-align: top; } html.dark .arena-table th { color: rgb(156, 163, 175); } html.dark .arena-table td { color: rgb(209, 213, 219); } .arena-table .arena-align-right { text-align: right; } .arena-table .arena-cell-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; color: rgb(107, 114, 128); } .arena-table .arena-cell-nowrap { white-space: nowrap; } .arena-table .arena-cell-clamp-3 { max-width: 20rem; } .arena-cell-clamp-3 p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .arena-actions { display: inline-flex; gap: 8px; justify-content: flex-end; } /* ============================================================ Onboarding Designer utilities Filament 4/5 ships only the utilities its own .fi-* components use, not the general Tailwind layer that Filament 3 bundled. The onboarding-designer blade is built from generic utilities (bg-white, rounded-xl, h-4, ring-1, dark:*, hover:*, ...) which therefore have no backing CSS after the upgrade. These rules reproduce the Tailwind v4 defaults for exactly the classes that page uses. gray-* = Tailwind default gray; primary-* = panel --primary-N vars; .dark lives on . ============================================================ */ .absolute{position:absolute;} .bg-amber-50{background-color:#fffbeb;} .bg-gray-100{background-color:#f3f4f6;} .bg-gray-200{background-color:#e5e7eb;} .bg-gray-50{background-color:#f9fafb;} .bg-primary-500{background-color:var(--primary-500);} .bg-primary-500\/25{background-color:color-mix(in srgb, var(--primary-500) 25%, transparent);} .bg-primary-600{background-color:var(--primary-600);} .bg-red-50{background-color:#fef2f2;} .bg-slate-950{background-color:#020617;} .bg-white{background-color:#ffffff;} .block{display:block;} .border{border-width:1px;border-style:solid;} .border-b{border-bottom-width:1px;border-bottom-style:solid;} .border-dashed{border-style:dashed;} .border-gray-100{border-color:#f3f4f6;} .border-gray-200{border-color:#e5e7eb;} .border-gray-300{border-color:#d1d5db;} .border-primary-400{border-color:var(--primary-400);} .border-primary-400\/40{border-color:color-mix(in srgb, var(--primary-400) 40%, transparent);} .border-primary-500{border-color:var(--primary-500);} .border-r{border-right-width:1px;border-right-style:solid;} .border-t{border-top-width:1px;border-top-style:solid;} .border-white\/10{border-color:rgb(255 255 255 / 0.1);} .capitalize{text-transform:capitalize;} html.dark .dark\:bg-amber-500\/10{background-color:rgb(245 158 11 / 0.1);} html.dark .dark\:bg-gray-700{background-color:#374151;} html.dark .dark\:bg-gray-800{background-color:#1f2937;} html.dark .dark\:bg-gray-800\/40{background-color:rgb(31 41 55 / 0.4);} html.dark .dark\:bg-gray-800\/60{background-color:rgb(31 41 55 / 0.6);} html.dark .dark\:bg-gray-900{background-color:#111827;} html.dark .dark\:bg-red-500\/10{background-color:rgb(239 68 68 / 0.1);} html.dark .dark\:border-gray-700{border-color:#374151;} html.dark .dark\:border-gray-800{border-color:#1f2937;} html.dark .dark\:border-primary-400{border-color:var(--primary-400);} html.dark .dark\:file\:bg-primary-500\/20::file-selector-button{background-color:color-mix(in srgb, var(--primary-500) 20%, transparent);} html.dark .dark\:file\:text-primary-300::file-selector-button{color:var(--primary-300);} html.dark .dark\:focus\:ring-offset-gray-900:focus{--tw-ring-offset-width:2px;--tw-ring-offset-color:#111827;--tw-ring-offset-shadow:0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);} html.dark .dark\:hover\:bg-gray-800:hover{background-color:#1f2937;} html.dark .dark\:hover\:bg-red-500\/10:hover{background-color:rgb(239 68 68 / 0.1);} html.dark .dark\:hover\:bg-white\/5:hover{background-color:rgb(255 255 255 / 0.05);} html.dark .dark\:hover\:text-gray-200:hover{color:#e5e7eb;} html.dark .dark\:ring-white\/10{--tw-ring-color:rgb(255 255 255 / 0.1);} html.dark .dark\:text-amber-300{color:#fcd34d;} html.dark .dark\:text-gray-200{color:#e5e7eb;} html.dark .dark\:text-gray-300{color:#d1d5db;} html.dark .dark\:text-gray-400{color:#9ca3af;} html.dark .dark\:text-gray-500{color:#6b7280;} html.dark .dark\:text-gray-600{color:#4b5563;} html.dark .dark\:text-red-300{color:#fca5a5;} html.dark .dark\:text-white{color:#ffffff;} .disabled\:cursor-not-allowed:disabled{cursor:not-allowed;} .disabled\:opacity-40:disabled{opacity:0.4;} .disabled\:opacity-50:disabled{opacity:0.5;} .file\:bg-primary-50::file-selector-button{background-color:var(--primary-50);} .file\:border-0::file-selector-button{border-width:0;} .file\:font-semibold::file-selector-button{font-weight:600;} .file\:mr-3::file-selector-button{margin-right:0.75rem;} .file\:px-3::file-selector-button{padding-left:0.75rem;padding-right:0.75rem;} .file\:py-2::file-selector-button{padding-top:0.5rem;padding-bottom:0.5rem;} .file\:rounded-lg::file-selector-button{border-radius:0.5rem;} .file\:text-primary-700::file-selector-button{color:var(--primary-700);} .file\:text-xs::file-selector-button{font-size:0.75rem;line-height:1rem;} .fixed{position:fixed;} .flex{display:flex;} .flex-1{flex:1 1 0%;} .flex-col{flex-direction:column;} .flex-wrap{flex-wrap:wrap;} .focus\:border-primary-500:focus{border-color:var(--primary-500);} .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px;} .focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);--tw-ring-shadow:0 0 0 calc(2px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, rgb(59 130 246 / 0.5));} .focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-color:#ffffff;--tw-ring-offset-shadow:0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);} .focus\:ring-primary-500:focus{--tw-ring-color:var(--primary-500);} .font-bold{font-weight:700;} .font-medium{font-weight:500;} .font-semibold{font-weight:600;} .gap-1{gap:0.25rem;} .gap-1\.5{gap:0.375rem;} .gap-2{gap:0.5rem;} .gap-3{gap:0.75rem;} .gap-4{gap:1rem;} .grid{display:grid;} .h-1\.5{height:0.375rem;} .h-10{height:2.5rem;} .h-12{height:3rem;} .h-14{height:3.5rem;} .h-3\.5{height:0.875rem;} .h-4{height:1rem;} .h-8{height:2rem;} .hidden{display:none;} .hover\:bg-gray-100:hover{background-color:#f3f4f6;} .hover\:bg-gray-50:hover{background-color:#f9fafb;} .hover\:bg-primary-400\/10:hover{background-color:color-mix(in srgb, var(--primary-400) 10%, transparent);} .hover\:bg-primary-500:hover{background-color:var(--primary-500);} .hover\:bg-red-50:hover{background-color:#fef2f2;} .hover\:bg-white\/10:hover{background-color:rgb(255 255 255 / 0.1);} .hover\:bg-white\/5:hover{background-color:rgb(255 255 255 / 0.05);} .hover\:border-gray-300:hover{border-color:#d1d5db;} .hover\:file\:bg-primary-100:hover::file-selector-button{background-color:var(--primary-100);} .hover\:shadow-md:hover{box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);} .hover\:text-gray-700:hover{color:#374151;} .hover\:text-red-600:hover{color:#dc2626;} .inline-flex{display:inline-flex;} .inset-0{inset:0;} .items-center{align-items:center;} .items-start{align-items:flex-start;} .justify-between{justify-content:space-between;} .justify-center{justify-content:center;} .leading-6{line-height:1.5rem;} .max-w-sm{max-width:24rem;} .mb-1{margin-bottom:0.25rem;} .min-h-80{min-height:20rem;} .min-w-0{min-width:0;} .mt-0\.5{margin-top:0.125rem;} .mt-1{margin-top:0.25rem;} .mt-2{margin-top:0.5rem;} .mt-3{margin-top:0.75rem;} .mt-4{margin-top:1rem;} .object-cover{object-fit:cover;} .opacity-100{opacity:1;} .opacity-60{opacity:0.6;} .overflow-auto{overflow:auto;} .overflow-hidden{overflow:hidden;} .overflow-y-auto{overflow-y:auto;} .p-1\.5{padding:0.375rem;} .p-2{padding:0.5rem;} .p-3{padding:0.75rem;} .p-4{padding:1rem;} .p-6{padding:1.5rem;} .pt-3{padding-top:0.75rem;} .pt-4{padding-top:1rem;} .px-2{padding-left:0.5rem;padding-right:0.5rem;} .px-3{padding-left:0.75rem;padding-right:0.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;} .py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem;} .py-2{padding-top:0.5rem;padding-bottom:0.5rem;} .py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem;} .py-3{padding-top:0.75rem;padding-bottom:0.75rem;} .py-4{padding-top:1rem;padding-bottom:1rem;} .relative{position:relative;} .right-0{right:0;} .ring-1{box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);--tw-ring-shadow:0 0 0 calc(1px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, rgb(59 130 246 / 0.5));} .ring-2{box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);--tw-ring-shadow:0 0 0 calc(2px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, rgb(59 130 246 / 0.5));} .ring-gray-950\/10{--tw-ring-color:rgb(3 7 18 / 0.1);} .ring-gray-950\/5{--tw-ring-color:rgb(3 7 18 / 0.05);} .ring-primary-500\/20{--tw-ring-color:color-mix(in srgb, var(--primary-500) 20%, transparent);} .rounded{border-radius:0.25rem;} .rounded-full{border-radius:9999px;} .rounded-lg{border-radius:0.5rem;} .rounded-md{border-radius:0.375rem;} .rounded-xl{border-radius:0.75rem;} .shadow-sm{box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);} .shadow-xl{box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);} .shrink-0{flex-shrink:0;} .space-y-5 > :not([hidden]) ~ :not([hidden]){margin-top:1.25rem;} .space-y-6 > :not([hidden]) ~ :not([hidden]){margin-top:1.5rem;} .text-amber-700{color:#b45309;} .text-center{text-align:center;} .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-950{color:#030712;} .text-left{text-align:left;} .text-lg{font-size:1.125rem;line-height:1.75rem;} .text-primary-200{color:var(--primary-200);} .text-primary-300{color:var(--primary-300);} .text-primary-600{color:var(--primary-600);} .text-red-600{color:#dc2626;} .text-red-700{color:#b91c1c;} .text-slate-200{color:#e2e8f0;} .text-slate-300{color:#cbd5e1;} .text-slate-400{color:#94a3b8;} .text-sm{font-size:0.875rem;line-height:1.25rem;} .text-white{color:#ffffff;} .text-xs{font-size:0.75rem;line-height:1rem;} .tracking-\[0\.2em\]{letter-spacing:0.2em;} .tracking-wider{letter-spacing:0.05em;} .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;} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .uppercase{text-transform:uppercase;} .w-10{width:2.5rem;} .w-12{width:3rem;} .w-14{width:3.5rem;} .w-3\.5{width:0.875rem;} .w-4{width:1rem;} .w-8{width:2rem;} .w-80{width:20rem;} .w-full{width:100%;} @media (min-width: 1024px) { .lg\:flex{display:flex;} .lg\:flex-col{flex-direction:column;} .lg\:px-6{padding-left:1.5rem;padding-right:1.5rem;} } @media (min-width: 640px) { .sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr));} .group:hover .sm\:group-hover\:opacity-100{opacity:1;} .sm\:opacity-0{opacity:0;} .sm\: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;} } /* ============================================================ Presentation Editor utilities Used by ui-editor.blade.php and its editor partials. Keep this scoped to classes present in those views; structural editor layout lives in the page's inline CSS like the onboarding designer. ============================================================ */ .-mb-3{margin-bottom:-0.75rem;} .-mt-3{margin-top:-0.75rem;} .-mx-3{margin-left:-0.75rem;margin-right:-0.75rem;} .-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));} .-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x, 0), var(--tw-translate-y)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));} .aspect-square{aspect-ratio:1 / 1;} .aspect-video{aspect-ratio:16 / 9;} .bg-black\/30{background-color:rgb(0 0 0 / 0.3);} .bg-black\/50{background-color:rgb(0 0 0 / 0.5);} .bg-black\/60{background-color:rgb(0 0 0 / 0.6);} .bg-black\/70{background-color:rgb(0 0 0 / 0.7);} .bg-blue-50{background-color:#eff6ff;} .bg-blue-100{background-color:#dbeafe;} .bg-cyan-100{background-color:#cffafe;} .bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops));} .bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops));} .bg-gray-700{background-color:#374151;} .bg-gray-800{background-color:#1f2937;} .bg-gray-900{background-color:#111827;} .bg-green-50{background-color:#f0fdf4;} .bg-green-100{background-color:#dcfce7;} .bg-green-500{background-color:#22c55e;} .bg-orange-100{background-color:#ffedd5;} .bg-pink-100{background-color:#fce7f3;} .bg-primary-50{background-color:var(--primary-50);} .bg-primary-100{background-color:var(--primary-100);} .bg-purple-50{background-color:#faf5ff;} .bg-purple-100{background-color:#f3e8ff;} .bg-red-100{background-color:#fee2e2;} .bg-red-600{background-color:#dc2626;} .bg-white\/10{background-color:rgb(255 255 255 / 0.1);} .bg-white\/20{background-color:rgb(255 255 255 / 0.2);} .bg-yellow-100{background-color:#fef3c7;} .border-2{border-width:2px;border-style:solid;} .border-gray-600{border-color:#4b5563;} .border-gray-700{border-color:#374151;} .border-gray-800{border-color:#1f2937;} .border-green-200{border-color:#bbf7d0;} .border-l{border-left-width:1px;border-left-style:solid;} .border-primary-200{border-color:var(--primary-200);} .border-primary-300{border-color:var(--primary-300);} .bottom-5{bottom:1.25rem;} .bottom-6{bottom:1.5rem;} .bottom-full{bottom:100%;} .cursor-pointer{cursor:pointer;} .cursor-not-allowed{cursor:not-allowed;} .duration-100{transition-duration:100ms;} .duration-200{transition-duration:200ms;} .duration-300{transition-duration:300ms;} .ease-in{transition-timing-function:cubic-bezier(0.4,0,1,1);} .ease-out{transition-timing-function:cubic-bezier(0,0,0.2,1);} .flex-shrink-0{flex-shrink:0;} .font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;} .from-gray-50{--tw-gradient-from:#f9fafb;--tw-gradient-to:rgb(249 250 251 / 0);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);} .from-primary-300{--tw-gradient-from:var(--primary-300);--tw-gradient-to:color-mix(in srgb, var(--primary-300) 0%, transparent);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);} .gap-x-6{column-gap:1.5rem;} .gap-y-2{row-gap:0.5rem;} .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));} .group:hover .group-hover\:bg-blue-100{background-color:#dbeafe;} .group:hover .group-hover\:bg-purple-100{background-color:#f3e8ff;} .group:hover .group-hover\:block{display:block;} .group:hover .group-hover\:opacity-100{opacity:1;} .h-2{height:0.5rem;} .h-3{height:0.75rem;} .h-5{height:1.25rem;} .h-6{height:1.5rem;} .h-7{height:1.75rem;} .h-9{height:2.25rem;} .h-11{height:2.75rem;} .h-16{height:4rem;} .h-20{height:5rem;} .h-32{height:8rem;} .h-48{height:12rem;} .h-64{height:16rem;} .h-\[70vh\]{height:70vh;} .h-\[calc\(100vh-12rem\)\]{height:calc(100vh - 12rem);} .h-full{height:100%;} .hover\:bg-gray-200:hover{background-color:#e5e7eb;} .hover\:bg-gray-700:hover{background-color:#374151;} .hover\:bg-gray-800:hover{background-color:#1f2937;} .hover\:bg-primary-50\/40:hover{background-color:color-mix(in srgb, var(--primary-50) 40%, transparent);} .hover\:bg-primary-600:hover{background-color:var(--primary-600);} .hover\:bg-primary-700:hover{background-color:var(--primary-700);} .hover\:bg-red-700:hover{background-color:#b91c1c;} .hover\:bg-white\/20:hover{background-color:rgb(255 255 255 / 0.2);} .hover\:bg-white\/30:hover{background-color:rgb(255 255 255 / 0.3);} .hover\:border-primary-300:hover{border-color:var(--primary-300);} .hover\:shadow-lg:hover{box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);} .hover\:shadow-sm:hover{box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);} .hover\:text-gray-400:hover{color:#9ca3af;} .hover\:text-gray-600:hover{color:#4b5563;} .hover\:text-gray-900:hover{color:#111827;} .hover\:text-primary-600:hover{color:var(--primary-600);} .inset-y-0{top:0;bottom:0;} .justify-end{justify-content:flex-end;} .leading-relaxed{line-height:1.625;} .left-0{left:0;} .left-1\/2{left:50%;} .left-2{left:0.5rem;} .left-2\.5{left:0.625rem;} .left-3{left:0.75rem;} .left-5{left:1.25rem;} .line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .max-w-5xl{max-width:64rem;} .max-w-md{max-width:28rem;} .mb-0\.5{margin-bottom:0.125rem;} .mb-2{margin-bottom:0.5rem;} .mb-3{margin-bottom:0.75rem;} .mb-4{margin-bottom:1rem;} .mb-5{margin-bottom:1.25rem;} .min-h-screen{min-height:100vh;} .ml-2{margin-left:0.5rem;} .ml-auto{margin-left:auto;} .mt-1\.5{margin-top:0.375rem;} .mt-6{margin-top:1.5rem;} .mx-auto{margin-left:auto;margin-right:auto;} .my-1{margin-top:0.25rem;margin-bottom:0.25rem;} .normal-case{text-transform:none;} .object-cover{object-fit:cover;} .opacity-0{opacity:0;} .p-5{padding:1.25rem;} .pb-3{padding-bottom:0.75rem;} .pl-8{padding-left:2rem;} .pl-10{padding-left:2.5rem;} .placeholder-gray-400::placeholder{color:#9ca3af;} .pr-3{padding-right:0.75rem;} .pt-2{padding-top:0.5rem;} .px-1{padding-left:0.25rem;padding-right:0.25rem;} .px-1\.5{padding-left:0.375rem;padding-right:0.375rem;} .px-2\.5{padding-left:0.625rem;padding-right:0.625rem;} .py-1{padding-top:0.25rem;padding-bottom:0.25rem;} .py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem;} .py-6{padding-top:1.5rem;padding-bottom:1.5rem;} .right-1{right:0.25rem;} .right-2{right:0.5rem;} .ring-primary-100{--tw-ring-color:var(--primary-100);} .ring-primary-200{--tw-ring-color:var(--primary-200);} .rounded-2xl{border-radius:1rem;} .rounded-t-lg{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;} .scale-95{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));} .scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));} .shadow-2xl{box-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);} .shadow-lg{box-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);} .space-y-1 > :not([hidden]) ~ :not([hidden]){margin-top:0.25rem;} .space-y-1\.5 > :not([hidden]) ~ :not([hidden]){margin-top:0.375rem;} .space-y-2 > :not([hidden]) ~ :not([hidden]){margin-top:0.5rem;} .space-y-4 > :not([hidden]) ~ :not([hidden]){margin-top:1rem;} .tabular-nums{font-variant-numeric:tabular-nums;} .text-\[10px\]{font-size:10px;line-height:14px;} .text-\[11px\]{font-size:11px;line-height:16px;} .text-base{font-size:1rem;line-height:1.5rem;} .text-blue-600{color:#2563eb;} .text-emerald-500{color:#10b981;} .text-gray-900{color:#111827;} .text-green-600{color:#16a34a;} .text-green-700{color:#15803d;} .text-primary-400{color:var(--primary-400);} .text-primary-500{color:var(--primary-500);} .text-primary-700{color:var(--primary-700);} .text-purple-600{color:#9333ea;} .text-red-400{color:#f87171;} .text-xl{font-size:1.25rem;line-height:1.75rem;} .text-yellow-700{color:#a16207;} .to-gray-100{--tw-gradient-to:#f3f4f6;} .to-primary-500{--tw-gradient-to:var(--primary-500);} .top-1{top:0.25rem;} .top-1\/2{top:50%;} .top-2{top:0.5rem;} .transform{transform:translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));} .transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms;} .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms;} .transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms;} .underline{text-decoration-line:underline;} .w-1\.5{width:0.375rem;} .w-1\/2{width:50%;} .w-3\/4{width:75%;} .w-5{width:1.25rem;} .w-6{width:1.5rem;} .w-7{width:1.75rem;} .w-9{width:2.25rem;} .w-11{width:2.75rem;} .w-16{width:4rem;} .w-32{width:8rem;} .w-48{width:12rem;} .w-72{width:18rem;} .w-96{width:24rem;} .w-px{width:1px;} .z-10{z-index:10;} .z-30{z-index:30;} .z-40{z-index:40;} .z-50{z-index:50;} html.dark .dark\:bg-blue-500\/10{background-color:rgb(59 130 246 / 0.1);} html.dark .dark\:bg-blue-500\/20{background-color:rgb(59 130 246 / 0.2);} html.dark .dark\:bg-cyan-500\/20{background-color:rgb(6 182 212 / 0.2);} html.dark .dark\:bg-gray-600{background-color:#4b5563;} html.dark .dark\:bg-gray-700\/50{background-color:rgb(55 65 81 / 0.5);} html.dark .dark\:bg-gray-800\/50{background-color:rgb(31 41 55 / 0.5);} html.dark .dark\:bg-green-500\/5{background-color:rgb(34 197 94 / 0.05);} html.dark .dark\:bg-green-500\/10{background-color:rgb(34 197 94 / 0.1);} html.dark .dark\:bg-green-500\/20{background-color:rgb(34 197 94 / 0.2);} html.dark .dark\:bg-orange-500\/20{background-color:rgb(249 115 22 / 0.2);} html.dark .dark\:bg-pink-500\/20{background-color:rgb(236 72 153 / 0.2);} html.dark .dark\:bg-primary-500\/5{background-color:color-mix(in srgb, var(--primary-500) 5%, transparent);} html.dark .dark\:bg-primary-500\/10{background-color:color-mix(in srgb, var(--primary-500) 10%, transparent);} html.dark .dark\:bg-primary-500\/20{background-color:color-mix(in srgb, var(--primary-500) 20%, transparent);} html.dark .dark\:bg-purple-500\/10{background-color:rgb(168 85 247 / 0.1);} html.dark .dark\:bg-purple-500\/20{background-color:rgb(168 85 247 / 0.2);} html.dark .dark\:bg-red-500\/20{background-color:rgb(239 68 68 / 0.2);} html.dark .dark\:bg-yellow-500\/20{background-color:rgb(234 179 8 / 0.2);} html.dark .dark\:border-gray-600{border-color:#4b5563;} html.dark .dark\:border-gray-800{border-color:#1f2937;} html.dark .dark\:border-green-500\/20{border-color:rgb(34 197 94 / 0.2);} html.dark .dark\:border-primary-500{border-color:var(--primary-500);} html.dark .dark\:border-primary-500\/30{border-color:color-mix(in srgb, var(--primary-500) 30%, transparent);} html.dark .dark\:border-primary-500\/50{border-color:color-mix(in srgb, var(--primary-500) 50%, transparent);} html.dark .dark\:from-gray-900{--tw-gradient-from:#111827;--tw-gradient-to:rgb(17 24 39 / 0);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);} html.dark .dark\:hover\:bg-gray-500:hover{background-color:#6b7280;} html.dark .dark\:hover\:bg-gray-600:hover{background-color:#4b5563;} html.dark .dark\:hover\:bg-gray-700:hover{background-color:#374151;} html.dark .dark\:hover\:bg-primary-500\/5:hover{background-color:color-mix(in srgb, var(--primary-500) 5%, transparent);} html.dark .dark\:hover\:bg-primary-500\/10:hover{background-color:color-mix(in srgb, var(--primary-500) 10%, transparent);} html.dark .dark\:hover\:border-gray-600:hover{border-color:#4b5563;} html.dark .dark\:hover\:border-primary-500:hover{border-color:var(--primary-500);} html.dark .dark\:hover\:border-primary-500\/50:hover{border-color:color-mix(in srgb, var(--primary-500) 50%, transparent);} html.dark .dark\:hover\:text-gray-300:hover{color:#d1d5db;} html.dark .dark\:hover\:text-gray-500:hover{color:#6b7280;} html.dark .dark\:hover\:text-white:hover{color:#ffffff;} html.dark .dark\:placeholder-gray-400::placeholder{color:#9ca3af;} html.dark .dark\:placeholder-gray-500::placeholder{color:#6b7280;} html.dark .dark\:ring-primary-500\/20{--tw-ring-color:color-mix(in srgb, var(--primary-500) 20%, transparent);} html.dark .dark\:ring-primary-500\/30{--tw-ring-color:color-mix(in srgb, var(--primary-500) 30%, transparent);} html.dark .dark\:ring-primary-500\/40{--tw-ring-color:color-mix(in srgb, var(--primary-500) 40%, transparent);} html.dark .dark\:text-amber-400{color:#fbbf24;} html.dark .dark\:text-blue-400{color:#60a5fa;} html.dark .dark\:text-green-400{color:#4ade80;} html.dark .dark\:text-primary-400{color:var(--primary-400);} html.dark .dark\:text-purple-400{color:#c084fc;} html.dark .dark\:text-red-400{color:#f87171;} html.dark .dark\:text-yellow-400{color:#facc15;} html.dark .dark\:to-gray-800{--tw-gradient-to:#1f2937;} @media (min-width: 640px) { .sm\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr));} } @media (min-width: 1024px) { .lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr));} }