uxlib/dist/uxlib.css

A clean and powerful utility library by Subrata

/*
 *   Library Name: UXLIB
 *   Version: 1.0.4
 *   Author: Subrata Porel
 *   Github: https://github.com/subratapeid/uxlib
 */
/* === Utilities === */
/* === Padding (All Sides) === */
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-7 { padding: 1.75rem; }
.p-8 { padding: 2rem; }
.p-9 { padding: 2.25rem; }
.p-10 { padding: 2.5rem; }
.p-11 { padding: 2.75rem; }
.p-12 { padding: 3rem; }
.p-13 { padding: 3.25rem; }
.p-14 { padding: 3.5rem; }
.p-15 { padding: 3.75rem; }
.p-16 { padding: 4rem; }
.p-17 { padding: 4.25rem; }
.p-18 { padding: 4.5rem; }
.p-19 { padding: 4.75rem; }
.p-20 { padding: 5rem; }
/* === Padding X (Left + Right) === */
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.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; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-9 { padding-left: 2.25rem; padding-right: 2.25rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.px-11 { padding-left: 2.75rem; padding-right: 2.75rem; }
.px-12 { padding-left: 3rem; padding-right: 3rem; }
.px-13 { padding-left: 3.25rem; padding-right: 3.25rem; }
.px-14 { padding-left: 3.5rem; padding-right: 3.5rem; }
.px-15 { padding-left: 3.75rem; padding-right: 3.75rem; }
.px-16 { padding-left: 4rem; padding-right: 4rem; }
.px-17 { padding-left: 4.25rem; padding-right: 4.25rem; }
.px-18 { padding-left: 4.5rem; padding-right: 4.5rem; }
.px-19 { padding-left: 4.75rem; padding-right: 4.75rem; }
.px-20 { padding-left: 5rem; padding-right: 5rem; }
/* === Padding Y (Top + Bottom) === */
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.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-7 { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-9 { padding-top: 2.25rem; padding-bottom: 2.25rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-11 { padding-top: 2.75rem; padding-bottom: 2.75rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-13 { padding-top: 3.25rem; padding-bottom: 3.25rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.py-15 { padding-top: 3.75rem; padding-bottom: 3.75rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-17 { padding-top: 4.25rem; padding-bottom: 4.25rem; }
.py-18 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.py-19 { padding-top: 4.75rem; padding-bottom: 4.75rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
/* === Individual Sides === */
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-5 { padding-top: 1.25rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-7 { padding-top: 1.75rem; }
.pt-8 { padding-top: 2rem; }
.pt-9 { padding-top: 2.25rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-11 { padding-top: 2.75rem; }
.pt-12 { padding-top: 3rem; }
.pt-13 { padding-top: 3.25rem; }
.pt-14 { padding-top: 3.5rem; }
.pt-15 { padding-top: 3.75rem; }
.pt-16 { padding-top: 4rem; }
.pt-17 { padding-top: 4.25rem; }
.pt-18 { padding-top: 4.5rem; }
.pt-19 { padding-top: 4.75rem; }
.pt-20 { padding-top: 5rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-5 { padding-bottom: 1.25rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-7 { padding-bottom: 1.75rem; }
.pb-8 { padding-bottom: 2rem; }
.pb-9 { padding-bottom: 2.25rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-11 { padding-bottom: 2.75rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-13 { padding-bottom: 3.25rem; }
.pb-14 { padding-bottom: 3.5rem; }
.pb-15 { padding-bottom: 3.75rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-17 { padding-bottom: 4.25rem; }
.pb-18 { padding-bottom: 4.5rem; }
.pb-19 { padding-bottom: 4.75rem; }
.pb-20 { padding-bottom: 5rem; }
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-4 { padding-left: 1rem; }
.pl-5 { padding-left: 1.25rem; }
.pl-6 { padding-left: 1.5rem; }
.pl-7 { padding-left: 1.75rem; }
.pl-8 { padding-left: 2rem; }
.pl-9 { padding-left: 2.25rem; }
.pl-10 { padding-left: 2.5rem; }
.pl-11 { padding-left: 2.75rem; }
.pl-12 { padding-left: 3rem; }
.pl-13 { padding-left: 3.25rem; }
.pl-14 { padding-left: 3.5rem; }
.pl-15 { padding-left: 3.75rem; }
.pl-16 { padding-left: 4rem; }
.pl-17 { padding-left: 4.25rem; }
.pl-18 { padding-left: 4.5rem; }
.pl-19 { padding-left: 4.75rem; }
.pl-20 { padding-left: 5rem; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-4 { padding-right: 1rem; }
.pr-5 { padding-right: 1.25rem; }
.pr-6 { padding-right: 1.5rem; }
.pr-7 { padding-right: 1.75rem; }
.pr-8 { padding-right: 2rem; }
.pr-9 { padding-right: 2.25rem; }
.pr-10 { padding-right: 2.5rem; }
.pr-11 { padding-right: 2.75rem; }
.pr-12 { padding-right: 3rem; }
.pr-13 { padding-right: 3.25rem; }
.pr-14 { padding-right: 3.5rem; }
.pr-15 { padding-right: 3.75rem; }
.pr-16 { padding-right: 4rem; }
.pr-17 { padding-right: 4.25rem; }
.pr-18 { padding-right: 4.5rem; }
.pr-19 { padding-right: 4.75rem; }
.pr-20 { padding-right: 5rem; }
/* === Presets === */
.p-sm { padding: 0.5rem; }
.p-md { padding: 1rem; }
.p-lg { padding: 1.5rem; }
.p-xl { padding: 2rem; }
.p-2xl { padding: 2.5rem; }
.p-3xl { padding: 3.5rem; }
.p-4xl { padding: 4.5rem; }
.px-sm { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-md { padding-left: 1rem; padding-right: 1rem; }
.px-lg { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-xl { padding-left: 2rem; padding-right: 2rem; }
.px-2xl { padding-left: 2.5rem; padding-right: 2.5rem; }
.px-3xl { padding-left: 3.5rem; padding-right: 3.5rem; }
.px-4xl { padding-left: 4.5rem; padding-right: 4.5rem; }
.py-sm { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-md { padding-top: 1rem; padding-bottom: 1rem; }
.py-lg { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-xl { padding-top: 2rem; padding-bottom: 2rem; }
.py-2xl { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-3xl { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.py-4xl { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.p-0  { padding: 0; }
.px-0 { padding-left: 0; padding-right: 0; }
.py-0 { padding-top: 0; padding-bottom: 0; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }
.pr-0 { padding-right: 0; }
/* === Margin (All Sides) === */
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 0.75rem; }
.m-4 { margin: 1rem; }
.m-5 { margin: 1.25rem; }
.m-6 { margin: 1.5rem; }
.m-7 { margin: 1.75rem; }
.m-8 { margin: 2rem; }
.m-9 { margin: 2.25rem; }
.m-10 { margin: 2.5rem; }
.m-11 { margin: 2.75rem; }
.m-12 { margin: 3rem; }
.m-13 { margin: 3.25rem; }
.m-14 { margin: 3.5rem; }
.m-15 { margin: 3.75rem; }
.m-16 { margin: 4rem; }
.m-17 { margin: 4.25rem; }
.m-18 { margin: 4.5rem; }
.m-19 { margin: 4.75rem; }
.m-20 { margin: 5rem; }
/* === Margin X (Left + Right) === */
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.mx-5 { margin-left: 1.25rem; margin-right: 1.25rem; }
.mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-7 { margin-left: 1.75rem; margin-right: 1.75rem; }
.mx-8 { margin-left: 2rem; margin-right: 2rem; }
.mx-9 { margin-left: 2.25rem; margin-right: 2.25rem; }
.mx-10 { margin-left: 2.5rem; margin-right: 2.5rem; }
.mx-11 { margin-left: 2.75rem; margin-right: 2.75rem; }
.mx-12 { margin-left: 3rem; margin-right: 3rem; }
.mx-13 { margin-left: 3.25rem; margin-right: 3.25rem; }
.mx-14 { margin-left: 3.5rem; margin-right: 3.5rem; }
.mx-15 { margin-left: 3.75rem; margin-right: 3.75rem; }
.mx-16 { margin-left: 4rem; margin-right: 4rem; }
.mx-17 { margin-left: 4.25rem; margin-right: 4.25rem; }
.mx-18 { margin-left: 4.5rem; margin-right: 4.5rem; }
.mx-19 { margin-left: 4.75rem; margin-right: 4.75rem; }
.mx-20 { margin-left: 5rem; margin-right: 5rem; }
/* === Margin Y (Top + Bottom) === */
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-7 { margin-top: 1.75rem; margin-bottom: 1.75rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.my-9 { margin-top: 2.25rem; margin-bottom: 2.25rem; }
.my-10 { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.my-11 { margin-top: 2.75rem; margin-bottom: 2.75rem; }
.my-12 { margin-top: 3rem; margin-bottom: 3rem; }
.my-13 { margin-top: 3.25rem; margin-bottom: 3.25rem; }
.my-14 { margin-top: 3.5rem; margin-bottom: 3.5rem; }
.my-15 { margin-top: 3.75rem; margin-bottom: 3.75rem; }
.my-16 { margin-top: 4rem; margin-bottom: 4rem; }
.my-17 { margin-top: 4.25rem; margin-bottom: 4.25rem; }
.my-18 { margin-top: 4.5rem; margin-bottom: 4.5rem; }
.my-19 { margin-top: 4.75rem; margin-bottom: 4.75rem; }
.my-20 { margin-top: 5rem; margin-bottom: 5rem; }
/* === Individual Sides === */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-7 { margin-top: 1.75rem; }
.mt-8 { margin-top: 2rem; }
.mt-9 { margin-top: 2.25rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-11 { margin-top: 2.75rem; }
.mt-12 { margin-top: 3rem; }
.mt-13 { margin-top: 3.25rem; }
.mt-14 { margin-top: 3.5rem; }
.mt-15 { margin-top: 3.75rem; }
.mt-16 { margin-top: 4rem; }
.mt-17 { margin-top: 4.25rem; }
.mt-18 { margin-top: 4.5rem; }
.mt-19 { margin-top: 4.75rem; }
.mt-20 { margin-top: 5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-7 { margin-bottom: 1.75rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-9 { margin-bottom: 2.25rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-11 { margin-bottom: 2.75rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-13 { margin-bottom: 3.25rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mb-15 { margin-bottom: 3.75rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-17 { margin-bottom: 4.25rem; }
.mb-18 { margin-bottom: 4.5rem; }
.mb-19 { margin-bottom: 4.75rem; }
.mb-20 { margin-bottom: 5rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-4 { margin-left: 1rem; }
.ml-5 { margin-left: 1.25rem; }
.ml-6 { margin-left: 1.5rem; }
.ml-7 { margin-left: 1.75rem; }
.ml-8 { margin-left: 2rem; }
.ml-9 { margin-left: 2.25rem; }
.ml-10 { margin-left: 2.5rem; }
.ml-11 { margin-left: 2.75rem; }
.ml-12 { margin-left: 3rem; }
.ml-13 { margin-left: 3.25rem; }
.ml-14 { margin-left: 3.5rem; }
.ml-15 { margin-left: 3.75rem; }
.ml-16 { margin-left: 4rem; }
.ml-17 { margin-left: 4.25rem; }
.ml-18 { margin-left: 4.5rem; }
.ml-19 { margin-left: 4.75rem; }
.ml-20 { margin-left: 5rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.mr-5 { margin-right: 1.25rem; }
.mr-6 { margin-right: 1.5rem; }
.mr-7 { margin-right: 1.75rem; }
.mr-8 { margin-right: 2rem; }
.mr-9 { margin-right: 2.25rem; }
.mr-10 { margin-right: 2.5rem; }
.mr-11 { margin-right: 2.75rem; }
.mr-12 { margin-right: 3rem; }
.mr-13 { margin-right: 3.25rem; }
.mr-14 { margin-right: 3.5rem; }
.mr-15 { margin-right: 3.75rem; }
.mr-16 { margin-right: 4rem; }
.mr-17 { margin-right: 4.25rem; }
.mr-18 { margin-right: 4.5rem; }
.mr-19 { margin-right: 4.75rem; }
.mr-20 { margin-right: 5rem; }
/* === Presets === */
.m-sm { margin: 0.5rem; }
.m-md { margin: 1rem; }
.m-lg { margin: 1.5rem; }
.m-xl { margin: 2rem; }
.m-2xl { margin: 2.5rem; }
.m-3xl { margin: 3.5rem; }
.m-4xl { margin: 4.5rem; }
.mx-sm { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-md { margin-left: 1rem; margin-right: 1rem; }
.mx-lg { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-xl { margin-left: 2rem; margin-right: 2rem; }
.mx-2xl { margin-left: 2.5rem; margin-right: 2.5rem; }
.mx-3xl { margin-left: 3.5rem; margin-right: 3.5rem; }
.mx-4xl { margin-left: 4.5rem; margin-right: 4.5rem; }
.my-sm { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-md { margin-top: 1rem; margin-bottom: 1rem; }
.my-lg { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-xl { margin-top: 2rem; margin-bottom: 2rem; }
.my-2xl { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.my-3xl { margin-top: 3.5rem; margin-bottom: 3.5rem; }
.my-4xl { margin-top: 4.5rem; margin-bottom: 4.5rem; }
.m-0  { margin: 0; }
.mx-0 { margin-left: 0; margin-right: 0; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.mr-0 { margin-right: 0; }
.m-auto   { margin: auto; }
.mx-auto  { margin-left: auto; margin-right: auto; }
.my-auto  { margin-top: auto; margin-bottom: auto; }
.mt-auto  { margin-top: auto; }
.mb-auto  { margin-bottom: auto; }
.ml-auto  { margin-left: auto; }
.mr-auto  { margin-right: auto; }
.bg-primary { background-color: #007bff; }
.text-white { color: #fff; }
.hover\:bg-primary-dark:hover { background-color: #0056b3; }
.border { border: 1px solid #ccc; }
.rounded { border-radius: 0.25rem; }
.rounded-full { border-radius: 9999px; }
.w-full { width: 100%; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.max-w-screen-md { max-width: 768px; }
/* === Buttons === */
/* ----------------------------------------------------------------
 UXLib - Buttons Utility Styles
---------------------------------------------------------------- */
/* =================== Colors =================== */
:root {
  --color-primary: #1e40af;
  --color-secondary: #10b981;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-success: #22c55e;
  --color-info: #0ea5e9;
  --color-gray: #6b7280;
}
/* =================== Base Style =================== */
.ubtn {
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-family: inherit;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
/* =================== Size Variants =================== */
.ubtn-sm { font-size: 0.75rem; padding: 0.25rem 0.75rem; }
.ubtn-md { font-size: 0.875rem; padding: 0.5rem 1rem; }
.ubtn-lg { font-size: 1rem; padding: 0.75rem 1.25rem; }
.ubtn-xl { font-size: 1.125rem; padding: 1rem 1.5rem; }
.ubtn-2xl { font-size: 1.25rem; padding: 1.25rem 2rem; }
.ubtn-3xl { font-size: 1.5rem; padding: 1.5rem 2.5rem; }
.ubtn-4xl { font-size: 1.75rem; padding: 1.75rem 3rem; }
.ubtn-5xl { font-size: 2rem; padding: 2rem 3.5rem; }
.ubtn-6xl { font-size: 2.25rem; padding: 2.25rem 4rem; }
.ubtn-7xl { font-size: 2.5rem; padding: 2.5rem 4.5rem; }
.ubtn-8xl { font-size: 2.75rem; padding: 2.75rem 5rem; }
.ubtn-9xl { font-size: 3rem; padding: 3rem 5.5rem; }
/* =================== Style Variants =================== */
/* Solid Buttons */
.ubtn-primary { background-color: var(--color-primary); color: var(--color-white); }
.ubtn-secondary { background-color: var(--color-secondary); color: var(--color-white); }
.ubtn-danger { background-color: var(--color-danger); color: var(--color-white); }
.ubtn-success { background-color: var(--color-success); color: var(--color-white); }
.ubtn-warning { background-color: var(--color-warning); color: var(--color-black); }
.ubtn-info { background-color: var(--color-info); color: var(--color-white); }
.ubtn-dark { background-color: var(--color-black); color: var(--color-white); }
.ubtn-light { background-color: var(--color-white); color: var(--color-black); border: 1px solid var(--color-gray); }
/* Outline Buttons */
.ubtn-outline-primary { border: 2px solid var(--color-primary); background: transparent; color: var(--color-primary); }
.ubtn-outline-secondary { border: 2px solid var(--color-secondary); background: transparent; color: var(--color-secondary); }
.ubtn-outline-danger { border: 2px solid var(--color-danger); background: transparent; color: var(--color-danger); }
/* Gradient Buttons */
.ubtn-gradient-blue {
  background: linear-gradient(to right, #3b82f6, #1e40af);
  color: white;
}
.ubtn-gradient-pink {
  background: linear-gradient(to right, #ec4899, #be185d);
  color: white;
}
.ubtn-gradient-green {
  background: linear-gradient(to right, #34d399, #059669);
  color: white;
}
/* Ghost Button */
.ubtn-ghost {
  background-color: transparent;
  color: var(--color-primary);
  border: none;
  text-decoration: underline;
}
/* Link Button */
.ubtn-link {
  background: none;
  border: none;
  color: var(--color-primary);
  padding: 0;
  text-decoration: underline;
}
/* Soft Button */
.ubtn-soft-primary {
  background-color: rgba(30, 64, 175, 0.1);
  color: var(--color-primary);
}
/* Shadow Button */
.ubtn-shadow {
  background-color: var(--color-primary);
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
/* Elevated Button */
.ubtn-elevated {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  color: var(--color-black);
}
/* Inverted Button */
.ubtn-inverted {
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
/* Glass Button */
.ubtn-glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
/* Shine Button */
.ubtn-shine {
  position: relative;
  background-color: var(--color-primary);
  color: white;
  overflow: hidden;
}
.ubtn-shine::before {
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.2) 100%);
  transform: skewX(-25deg);
}
.ubtn-shine:hover::before {
  left: 125%; transition: left 1s ease;
}
/* === Cards === */
.card {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  background-color: white;
}
.card-header {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.card-body {
  font-size: 1rem;
  color: #333;
}
/* === Spacing Utilities === */
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 0.75rem; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.mt-1 { margin-top: 0.25rem; }
.mb-1 { margin-bottom: 0.25rem; }
.ml-1 { margin-left: 0.25rem; }
.mr-1 { margin-right: 0.25rem; }
/* === Text Utilities === */
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-bold { font-weight: bold; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.bg-ulib{
    background-color: brown;
}
/* === Border Utilities === */
.border { border: 1px solid #ccc; }
.border-2 { border: 2px solid #ccc; }
.border-none { border: none; }
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }
/* === Display Utilities === */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-none { display: none; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
/* === Colors === */
.bg-white { background-color: white; }
.bg-light { background-color: #f3f4f6; }
.bg-dark { background-color: #1f2937; }
.text-white { color: white; }
.text-black { color: black; }
.text-gray { color: #6b7280; }
.text-blue { color: royalblue; }