@iota-uz/sdk 0.1.0

package/tailwind/iota.css

@@ -0,0 +1,1106 @@
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  src: url(/assets/fonts/Inter.var.woff2) format('woff2-variations');
+  font-weight: 1 1000;
+}
+
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-display: swap;
+  src: url(/assets/fonts/Gilroy/Gilroy-Regular.woff2) format('woff2');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-display: swap;
+  src: url(/assets/fonts/Gilroy/Gilroy-Medium.woff2) format('woff2');
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-display: swap;
+  src: url(/assets/fonts/Gilroy/Gilroy-Semibold.woff2) format('woff2');
+  font-weight: 600;
+}
+
+@layer base {
+  :root {
+    /* Base */
+    --white: 100% 0 0;
+    --black-800: 26% 0 0;
+    /* #242424 */
+    --black: 18.67% 0 0;
+    /* #131313 */
+    --black-950: 16.84% 0 0;
+    /* #151515 */
+    --transparent: 0 0 0 / 0;
+
+    /* Primary */
+    --primary-400: 62.51% 0.172 283.89;
+    /* #8f87ff */
+    --primary-500: 58.73% 0.23 279.66;
+    /* #695EFF */
+    --primary-600: 50% 0.192 279.97;
+    /* #544BCC */
+    --primary-650: 52.52% 0.272 280.57;
+    /* #5C33FF */
+    --primary-700: 45.57% 0.171 280.34;
+    /* #4A42B2 */
+
+    /* Gray - Tailwind CSS v4 OKLCH palette */
+    --gray-50: 98.5% 0.002 247.839;
+    --gray-100: 96.7% 0.003 264.542;
+    --gray-200: 92.8% 0.006 264.531;
+    --gray-300: 87.2% 0.01 258.338;
+    --gray-400: 70.7% 0.022 261.325;
+    --gray-500: 55.1% 0.027 264.364;
+    --gray-600: 44.6% 0.03 256.802;
+    --gray-700: 37.3% 0.034 259.733;
+    --gray-800: 27.8% 0.033 256.848;
+    --gray-900: 21% 0.034 264.665;
+    --gray-950: 13% 0.028 261.692;
+
+    /* Red */
+    --red-500: 59.16% 0.218 0.58;
+    --red-100: var(--red-500) / 10%;
+    --red-200: var(--red-500) / 20%;
+    --red-300: var(--red-500) / 30%;
+
+    /* Green */
+    --green-50: 96.3% 0.0173 168.27;
+    --green-100: 92.4% 0.0346 168.27;
+    --green-200: 84.9% 0.0692 168.27;
+    --green-500: 78.02% 0.1534 168.27;
+    --green-600: 64.33% 0.1128 171.09;
+
+    /* Pink */
+    --pink-500: 59.16% 0.218 0.58;
+    --pink-600: 58.93% 0.2129 359.93;
+
+    /* Yellow */
+    --yellow-500: 80.13% 0.1458 73.41;
+
+    /* Blue */
+    --blue-500: 82.1% 0.099263 240.9782;
+    --blue-600: 64.12% 0.0638 240.72;
+
+    /* Purple */
+    --purple-500: 52.06% 0.2042 305.37;
+
+    /* Sizes */
+    --size-00: 0.25rem;
+    --size-0: 0.4rem;
+    --size-1: 0.5rem;
+    --size-2: 0.75rem;
+    --size-3: 1rem;
+    --size-4: 1.25rem;
+    --size-5: 1.5rem;
+
+    --size-content-1: 20ch;
+    --size-content-2: 45ch;
+    --size-content-3: 60ch;
+
+    /* Border */
+    --border-size-1: 1px;
+
+    /* Default btn */
+    --clr-btn-bg: var(--transparent);
+    --clr-btn-bg-active: var(--gray-200);
+    --clr-btn-bg-hover: var(--gray-100);
+    --clr-btn-text: var(--black);
+    --crl-btn-text-hover: var(--black);
+    --clr-btn-border: var(--transaprent);
+    --clr-btn-border-hover: var(--transaprent);
+
+    /* Primary btn */
+    --clr-primary-btn-bg: var(--primary-500);
+    --clr-primary-btn-bg-active: var(--primary-700);
+    --clr-primary-btn-bg-hover: var(--primary-600);
+    --clr-primary-btn-text: var(--white);
+    --clr-primary-btn-text-hover: var(--white);
+    --clr-primary-btn-border: var(--primary-600);
+    --clr-primary-btn-border-hover: var(--primary-600);
+
+    /* Secondary btn */
+    --clr-secondary-btn-bg: var(--white);
+    --clr-secondary-btn-bg-active: var(--gray-300);
+    --clr-secondary-btn-bg-hover: var(--gray-200);
+    --clr-secondary-btn-text: var(--black);
+    --clr-secondary-btn-text-hover: var(--black);
+    --clr-secondary-btn-border: var(--gray-300);
+    --clr-secondary-btn-border-hover: var(--gray-300);
+
+    /* Danger btn */
+    --clr-danger-btn-bg: var(--red-500) / 10%;
+    --clr-danger-btn-bg-active: var(--red-500) / 30%;
+    --clr-danger-btn-bg-hover: var(--red-500) / 20%;
+    --clr-danger-btn-text: var(--red-500);
+    --clr-danger-btn-text-hover: var(--red-500);
+    --clr-danger-btn-border: var(--clr-danger-btn-bg);
+    --clr-danger-btn-border-hover: var(--clr-danger-btn-bg);
+
+    /* Primary outline btn */
+    --clr-primary-outline-btn-text: var(--primary-500);
+    --clr-primary-outline-btn-text-hover: var(--primary-500);
+    --clr-primary-outline-btn-border: var(--primary-500);
+    --clr-primary-outline-btn-border-hover: var(--primary-500);
+    --clr-primary-outline-btn-bg-hover: var(--primary-500) / 5%;
+
+    /* Sidebar btn */
+    --clr-sidebar-btn-bg: var(--transparent);
+    --clr-sidebar-btn-bg-active: var(--primary-500);
+    --clr-sidebar-btn-bg-hover: var(--primary-500);
+    --clr-sidebar-btn-text: var(--gray-400);
+    --clr-sidebar-btn-text-hover: var(--white);
+    --clr-sidebar-btn-border: var(--transparent);
+    --clr-sidebar-btn-border-hover: var(--primary-500);
+
+    /* Form control */
+    --clr-form-control-bg: var(--transparent);
+    --clr-form-control-bg-active: var(--transparent);
+    --clr-form-control-placeholder: var(--gray-400);
+    --clr-form-control-border: var(--gray-300);
+    --clr-form-control-border-hover: var(--primary-500);
+    --clr-form-control-text: var(--black);
+    --clr-form-control-ring: var(--primary-650) / 20%;
+    --clr-form-control-label: var(--gray-400);
+    --form-control-border-size: var(--border-size-1);
+    --form-control-size-x: calc(var(--size-2) - var(--form-control-border-size) * 2);
+    --form-control-size-y: calc(var(--size-2) - var(--form-control-border-size) * 2);
+
+    /* Surface */
+    --clr-surface-50: var(--gray-50);
+    --clr-surface-100: var(--gray-100);
+    --clr-surface-200: var(--black);
+    --clr-surface-300: var(--white);
+    --clr-surface-400: var(--gray-200);
+    --clr-surface-500: var(--gray-100);
+    --clr-surface-600: var(--white);
+
+    /* Text */
+    --clr-text-100: var(--black);
+    --clr-text-200: var(--gray-600);
+    --clr-text-300: var(--gray-400);
+    --clr-text-green: var(--green-500);
+    --clr-text-pink: var(--pink-500);
+    --clr-text-yellow: var(--yellow-500);
+    --clr-text-blue: var(--blue-500);
+    --clr-text-purple: var(--purple-500);
+
+    /* Avatar */
+    --clr-avatar-bg: var(--primary-500) / 15%;
+    --clr-avatar-text: var(--primary-500);
+
+    /* Border */
+    --clr-border-primary: var(--gray-300);
+    --clr-border-secondary: var(--gray-100);
+    --clr-border-green: var(--green-500);
+    --clr-border-pink: var(--pink-500);
+    --clr-border-yellow: var(--yellow-500);
+    --clr-border-blue: var(--blue-500);
+    --clr-border-purple: var(--purple-500);
+
+    /* Table */
+    --table-radius: 0.5rem;
+
+    /* Shadows */
+    --shadow-100: 0px 4px 8px 0px rgba(0, 0, 0, 0.16);
+    --shadow-200: 0px 8px 8px 0px rgba(0, 0, 0, 0.08);
+
+    /* Theme switcher */
+    --clr-theme-switcher-bg: var(--gray-100);
+    --clr-theme-switcher-text: var(--black);
+
+    --clr-success: var(--green-500);
+    --clr-on-sucess: var(--white);
+
+    /* Badges */
+    --clr-badge-pink: var(--pink-500) / 8%;
+    --clr-badge-yellow: var(--yellow-500) / 8%;
+    --clr-badge-green: var(--green-500) / 8%;
+    --clr-badge-blue: var(--blue-500) / 8%;
+    --clr-badge-purple: var(--purple-500) / 8%;
+    --clr-badge-gray: var(--gray-100);
+
+    /* Easing */
+    --ease-1: cubic-bezier(.25, 0, .5, 1);
+    --ease-2: cubic-bezier(.25, 0, .4, 1);
+    --ease-3: cubic-bezier(.25, 0, .3, 1);
+    --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
+    --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
+    --ease-squish-2: var(--ease-elastic-in-out-2);
+    --ease-squish-3: var(--ease-elastic-in-out-3);
+
+    /* Animation */
+    --animation-slide-in-up: slide-in-up 500ms var(--ease-3);
+    --animation-slide-in-right: slide-in-right 500ms var(--ease-3);
+    --animation-slide-in-left: slide-in-left 500ms var(--ease-3);
+    --animation-slide-in-down: slide-in-down 500ms var(--ease-3);
+    --animation-scale-down: scale-down 500ms var(--ease-3);
+    --animation-slide-out-down: slide-out-down 500ms var(--ease-3);
+    --animation-slide-out-right: slide-out-right 500ms var(--ease-3);
+    --animation-slide-out-left: slide-out-left 500ms var(--ease-3);
+  }
+
+  ::selection {
+    background-color: oklch(var(--primary-600));
+    color: oklch(var(--white));
+  }
+
+  :popover-open {
+    width: 200px;
+    height: 100px;
+    position: absolute;
+    inset: unset;
+    bottom: 5px;
+    right: 5px;
+    margin: 0;
+  }
+
+  html.dark {
+    color-scheme: dark;
+    /* Surface */
+    --clr-surface-50: var(--black-950);
+    --clr-surface-100: var(--black-950);
+    --clr-surface-300: var(--black);
+    --clr-surface-400: var(--black-950);
+    --clr-surface-500: var(--black);
+    --clr-surface-600: var(--black-950);
+
+    /* Badges */
+    --clr-badge-pink: var(--pink-600) / 8%;
+    --clr-badge-green: var(--green-600) / 8%;
+    --clr-badge-blue: var(--blue-600) / 8%;
+    --clr-badge-gray: var(--gray-700);
+
+    /* Text */
+    --clr-text-100: var(--white);
+    --clr-text-200: var(--gray-100);
+    --clr-text-300: var(--gray-300);
+    --clr-text-green: var(--green-600);
+    --clr-text-pink: var(--pink-600);
+    --clr-text-blue: var(--blue-600);
+
+    /* Avatar */
+    --clr-avatar-text: var(--primary-400);
+
+    /* Border */
+    --clr-border-primary: var(--black-800);
+    --clr-border-secondary: var(--black-950);
+    --clr-border-green: var(--green-600);
+    --clr-border-pink: var(--pink-600);
+    --clr-border-blue: var(--blue-600);
+
+    /* Secondary btn */
+    --clr-secondary-btn-bg: var(--black-950);
+    --clr-secondary-btn-bg-active: var(--black);
+    --clr-secondary-btn-bg-hover: var(--black);
+    --clr-secondary-btn-text: var(--gray-100);
+    --clr-secondary-btn-text-hover: var(--white);
+    --clr-secondary-btn-border: var(--black-800);
+    --clr-secondary-btn-border-hover: var(--black-950);
+
+    /* Form control */
+    --clr-form-control-bg: var(--black);
+    --clr-form-control-bg-active: var(--black);
+    --clr-form-control-placeholder: var(--gray-100);
+    --clr-form-control-border: var(--black-800);
+    --clr-form-control-border-hover: var(--primary-500);
+    --clr-form-control-text: var(--white);
+    --clr-form-control-ring: var(--primary-650);
+    --clr-form-control-label: var(--white);
+  }
+
+  button {
+    cursor: default;
+  }
+
+  button:disabled {
+    opacity: 0.7;
+    pointer-events: none;
+  }
+
+  details>summary {
+    list-style: none;
+  }
+
+  details summary::-webkit-details-marker {
+    display: none;
+  }
+
+  details summary::marker {
+    display: none;
+  }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
+
+  form:invalid .btn:not(.btn-enabled) {
+    --events: none;
+    --opacity: 0.7;
+  }
+}
+
+[x-cloak] {
+  display: none !important;
+}
+
+@layer components {
+  .form-control {
+    --bg-color: var(--clr-form-control-bg);
+    --bg-active: var(--clr-form-control-bg-active);
+    --placeholder: var(--clr-form-control-placeholder);
+    --text-color: var(--clr-form-control-text);
+    --border-color: var(--clr-form-control-border);
+    --border-hover: var(--clr-form-control-border-hover);
+    --border-size: var(--form-control-border-size);
+    --ring-color: var(--transparent);
+    --ring-color-active: var(--clr-form-control-ring);
+    --size-x: var(--form-control-size-x);
+    --size-y: var(--form-control-size-y);
+    --font-size: 0.875rem;
+    --radius: 0.5rem;
+    --opacity: 1;
+    --events: all;
+    pointer-events: var(--events);
+    outline: none;
+    background-color: oklch(var(--bg-color));
+    box-shadow: 0 0 0 2px oklch(var(--ring-color));
+    color: oklch(var(--text-color));
+    font-size: var(--font-size);
+    border-radius: var(--radius);
+    opacity: var(--opacity);
+    border: var(--border-size) solid oklch(var(--border-color));
+    transition-duration: 200ms;
+    font-weight: 500;
+  }
+
+  .form-control-input {
+    padding: var(--size-y) var(--size-x);
+    border-radius: var(--radius);
+    background-color: oklch(var(--bg-color));
+  }
+
+  .form-control-input:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .form-control-label {
+    color: var(--clr-form-control-label);
+    font-size: 0.875rem;
+  }
+
+  .form-control-input::placeholder {
+    color: oklch(var(--placeholder));
+  }
+
+  .form-control:hover {
+    --border-color: var(--border-hover);
+  }
+
+  .form-control:focus-within {
+    --border-color: var(--border-hover);
+    --ring-color: var(--ring-color-active);
+  }
+
+  .btn {
+    --text-color: var(--clr-btn-text);
+    --loading-indicator-color: var(--clr-btn-text);
+    --text-hover: var(--crl-btn-text-hover);
+    --bg-color: var(--crl-btn-bg);
+    --bg-active: var(--clr-btn-bg-active);
+    --bg-hover: var(--clr-btn-bg-hover);
+    --border-color: var(--clr-btn-border);
+    --border-hover: var(--crl-btn-border-hover);
+    --border-size: 1px;
+    --size-x: calc(1rem - var(--border-size) * 2);
+    --size-y: calc(0.75rem - var(--border-size) * 2);
+    --font-size: 0.875rem;
+    --radius: 0.5rem;
+    --opacity: 1;
+    --events: all;
+    --user-select: auto;
+    --height: 2.625rem;
+    --width: auto;
+    background-color: oklch(var(--bg-color));
+    color: oklch(var(--text-color));
+    padding: var(--size-y) var(--size-x);
+    font-size: var(--font-size);
+    border-radius: var(--radius);
+    opacity: var(--opacity);
+    border: var(--border-size) solid oklch(var(--border-color));
+    transition-duration: 200ms;
+    font-weight: 500;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    outline-color: oklch(var(--bg-active));
+    user-select: var(--user-select);
+    height: var(--height);
+    width: var(--width);
+    cursor: pointer;
+  }
+
+  .btn:not(.btn-loading):not(.htmx-request):active,
+  .btn:not(.btn-loading):not(.htmx-request).active {
+    --bg-color: var(--bg-active);
+    --text-color: var(--text-hover);
+  }
+
+  .btn:not(.btn-loading):not(.htmx-request):hover {
+    --bg-color: var(--bg-hover);
+    --text-color: var(--text-hover);
+    --border-hover: var(--border-hover);
+  }
+
+  .btn-primary {
+    --bg-color: var(--clr-primary-btn-bg);
+    --bg-active: var(--clr-primary-btn-bg-active);
+    --text-color: var(--clr-primary-btn-text);
+    --border-color: var(--clr-primary-btn-border);
+    --bg-hover: var(--clr-primary-btn-bg-hover);
+    --text-hover: var(--clr-primary-btn-text-hover);
+    --loading-indicator-color: var(--clr-primary-btn-text);
+    --border-hover: var(--clr-primary-btn-border-hover);
+  }
+
+  .btn-secondary {
+    --bg-color: var(--clr-secondary-btn-bg);
+    --bg-active: var(--clr-secondary-btn-bg-active);
+    --text-color: var(--clr-secondary-btn-text);
+    --border-color: var(--clr-secondary-btn-border);
+    --bg-hover: var(--clr-secondary-btn-bg-hover);
+    --text-hover: var(--clr-secondary-btn-text-hover);
+    --border-hover: var(--clr-secondary-btn-border-hover);
+  }
+
+  .btn-danger {
+    --bg-color: var(--clr-danger-btn-bg);
+    --bg-active: var(--clr-danger-btn-bg-active);
+    --text-color: var(--clr-danger-btn-text);
+    --loading-indicator-color: var(--clr-danger-btn-text);
+    --border-color: var(--clr-danger-btn-border);
+    --bg-hover: var(--clr-danger-btn-bg-hover);
+    --text-hover: var(--clr-danger-btn-text-hover);
+    --border-hover: var(--clr-danger-btn-border-hover);
+  }
+
+  .btn-primary-outline {
+    --text-color: var(--clr-primary-outline-btn-text);
+    --loading-indicator-color: var(--clr-primary-outline-btn-text);
+    --border-color: var(--clr-primary-outline-btn-border);
+    --text-hover: var(--clr-primary-outline-btn-text-hover);
+    --border-hover: var(--clr-primary-outline-btn-border-hover);
+    --bg-hover: var(--clr-primary-outline-btn-bg-hover);
+  }
+
+  .btn-sidebar {
+    --bg-color: var(--clr-sidebar-btn-bg);
+    --bg-active: var(--clr-sidebar-btn-bg-active);
+    --text-color: var(--clr-sidebar-btn-text);
+    --loading-indicator-color: var(--clr-sidebar-btn-text);
+    --border-color: var(--clr-sidebar-btn-border);
+    --bg-hover: var(--clr-sidebar-btn-bg-hover);
+    --text-hover: var(--clr-sidebar-btn-text-hover);
+    --border-hover: var(--clr-sidebar-btn-border-hover);
+  }
+
+  .btn-md {
+    --height: 3rem;
+    --size-x: 1rem;
+    --size-y: calc(1rem - 3.5px);
+  }
+
+  .btn-sm {
+    --height: 2.5rem;
+    --size-x: 0.75rem;
+    --size-y: calc(0.75rem - 3.5px);
+  }
+
+  .btn-xs {
+    --height: 1.65rem;
+    --size-x: 0.25rem;
+    --size-y: 0.1rem;
+  }
+
+  .btn-fixed {
+    --size-y: var(--size-x);
+    --width: var(--height);
+  }
+
+  .btn-with-icon {
+    gap: 0.5rem;
+  }
+
+  .btn-rounded {
+    --radius: 9999px;
+  }
+
+  .btn-loading {
+    --text-color: var(--transparent);
+  }
+
+  .btn-disabled {
+    opacity: 0.7;
+    pointer-events: none;
+  }
+
+  .htmx-request .btn,
+  .htmx-request.btn {
+    --text-color: var(--transparent);
+    --user-select: none;
+  }
+
+  .btn-loading-indicator {
+    --size: var(--size-0);
+    --radius: 9999px;
+    --display: none;
+    --color: var(--loading-indicator-color);
+    width: var(--size);
+    height: var(--size);
+    border-radius: var(--radius);
+    background-color: oklch(var(--color));
+    color: oklch(var(--color));
+    animation: dot-flashing 1s infinite linear alternate;
+    animation-delay: 0.5s;
+    display: var(--display);
+    position: absolute;
+    opacity: 1;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .btn-loading-indicator::before,
+  .btn-loading-indicator::after {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    top: 0;
+  }
+
+  .btn-loading-indicator::before {
+    left: calc(-1 * var(--size) * 1.5);
+    width: var(--size);
+    height: var(--size);
+    border-radius: var(--radius);
+    background-color: oklch(var(--color));
+    color: oklch(var(--color));
+    animation: dot-flashing 1s infinite linear alternate;
+    animation-delay: 0s;
+  }
+
+  .btn-loading-indicator::after {
+    left: calc(var(--size) * 1.5);
+    width: var(--size);
+    height: var(--size);
+    border-radius: var(--radius);
+    background-color: oklch(var(--color));
+    color: oklch(var(--color));
+    animation: dot-flashing 1s infinite linear alternate;
+    animation-delay: 1s;
+  }
+
+  .btn-loading .btn-loading-indicator,
+  .htmx-request .btn-loading-indicator,
+  .htmx-request.btn-loading-indicator {
+    --display: block;
+  }
+
+  .htmx-request .hide-on-load {
+    display: none;
+  }
+
+  .htmx-request.hide-on-load {
+    display: revert;
+  }
+
+  .htmx-request .hidden {
+    display: revert;
+  }
+
+  .htmx-request.hidden {
+    display: revert;
+  }
+
+  .table {
+    --radius: var(--table-radius);
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  .table tr:first-child th:first-child {
+    border-top-left-radius: var(--radius);
+  }
+
+  .table tr:first-child th:last-child {
+    border-top-right-radius: var(--radius);
+  }
+
+  .table tr:last-child td:first-child {
+    border-bottom-left-radius: var(--radius);
+  }
+
+  .table tr:last-child td:last-child {
+    border-bottom-right-radius: var(--radius);
+  }
+
+  .dialog {
+    --bg-color: var(--clr-surface-300);
+    --text-color: var(--clr-text-100);
+    --radius: 0.5rem;
+    display: grid;
+    align-content: start;
+    background-color: oklch(var(--bg-color));
+    color: oklch(var(--text-color));
+    max-inline-size: min(90vw, var(--size-content-3));
+    margin: auto;
+    padding: 0;
+    position: fixed;
+    inset: 0;
+    overflow: hidden;
+    transition: opacity 500ms var(--ease-3);
+  }
+
+  .dialog-rounded {
+    border-radius: var(--radius);
+  }
+
+  .dialog-btt {
+    animation: var(--animation-slide-out-down) forwards;
+    animation-timing-function: var(--ease-squish-2);
+  }
+
+  .dialog-rtl {
+    animation: var(--animation-slide-out-right) forwards;
+    animation-timing-function: var(--ease-squish-2);
+  }
+
+  .dialog-ltr {
+    animation: var(--animation-slide-out-left) forwards;
+    animation-timing-function: var(--ease-squish-2);
+  }
+
+  .dialog-tbd {
+    animation: var(--animation-slide-out-up) forwards;
+    animation-timing-function: var(--ease-squish-2);
+  }
+
+  .dialog:not([open]) {
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  .dialog-btt[open] {
+    animation: var(--animation-slide-in-up);
+  }
+
+  .dialog-rtl[open] {
+    animation: var(--animation-slide-in-right);
+  }
+
+  .dialog-ltr[open] {
+    animation: var(--animation-slide-in-left);
+  }
+
+  .dialog-tbd[open] {
+    animation: var(--animation-slide-in-down);
+  }
+
+  .dialog::backdrop {
+    backdrop-filter: blur(8px);
+    transition: backdrop-filter 500ms ease;
+  }
+
+  .tab-slider {
+    @apply relative;
+  }
+
+  .tab-slider-inner {
+    @apply mb-6 flex;
+  }
+
+  .tab-slider-track {
+    @apply relative flex w-full items-center font-sans bg-slate-100 dark:bg-slate-700;
+  }
+
+  .tab-slider-item {
+    @apply relative z-20 h-full flex flex-1 items-center justify-center text-sm font-sans;
+  }
+
+  .tab-slider-item:not(.tab-active) {
+    @apply text-slate-400 dark:text-slate-400;
+  }
+
+  .tab-slider-item.tab-active {
+    @apply text-white dark:text-white;
+  }
+
+  .tab-slider-naver {
+    @apply absolute start-0 top-0 z-10 h-full bg-brand-500 dark:bg-brand-500 transition-all duration-300;
+  }
+
+  .tab-content {
+    @apply relative block;
+  }
+
+  /* Alignment classes */
+  .tabs-centered .tab-slider-inner {
+    @apply justify-center;
+  }
+
+  .tabs-end .tab-slider-inner {
+    @apply justify-end;
+  }
+
+  /* Rounded variants */
+  .tabs-rounded .tab-slider-track,
+  .tabs-rounded .tab-slider-naver {
+    @apply rounded-md;
+  }
+
+  .tabs-smooth .tab-slider-track,
+  .tabs-smooth .tab-slider-naver {
+    @apply rounded-lg;
+  }
+
+  .tabs-curved .tab-slider-track,
+  .tabs-curved .tab-slider-naver {
+    @apply rounded-xl;
+  }
+
+  .tabs-full .tab-slider-track,
+  .tabs-full .tab-slider-naver {
+    @apply rounded-full;
+  }
+
+  /* Size: sm */
+  .tabs-sm.tabs-two-slots .tab-slider-track {
+    @apply max-w-[140px];
+  }
+
+  .tabs-sm.tabs-three-slots .tab-slider-track {
+    @apply max-w-[210px];
+  }
+
+  .tabs-sm .tab-slider-track {
+    @apply h-8;
+  }
+
+  /* Size: md */
+  .tabs-md.tabs-two-slots .tab-slider-track {
+    @apply max-w-[250px];
+  }
+
+  .tabs-md.tabs-three-slots .tab-slider-track {
+    @apply max-w-[320px];
+  }
+
+  .tabs-md .tab-slider-track {
+    @apply h-10;
+  }
+
+  /* Slot-based transitions */
+  .tabs-two-slots .tab-slider-naver,
+  .tabs-two-slots .tab-slider-item {
+    @apply w-1/2;
+  }
+
+  .tabs-two-slots .tab-slider-item:first-child.tab-active~.tab-slider-naver {
+    @apply ms-0;
+  }
+
+  .tabs-two-slots .tab-slider-item:nth-child(2).tab-active~.tab-slider-naver {
+    @apply ms-[50%];
+  }
+
+  .tabs-three-slots .tab-slider-naver,
+  .tabs-three-slots .tab-slider-item {
+    @apply w-1/3;
+  }
+
+  .tabs-three-slots .tab-slider-item:first-child.tab-active~.tab-slider-naver {
+    @apply ms-0;
+  }
+
+  .tabs-three-slots .tab-slider-item:nth-child(2).tab-active~.tab-slider-naver {
+    @apply ms-[33.3%];
+  }
+
+  .tabs-three-slots .tab-slider-item:nth-child(3).tab-active~.tab-slider-naver {
+    @apply ms-[66.6%];
+  }
+
+  .accent-color-card {
+    --color: oklch(var(--primary-500));
+  }
+
+  /* Prevent Alpine.js transition flicker on initial load */
+  [x-cloak] {
+    display: none !important;
+  }
+
+  /* Prevent sidebar flicker during initial load */
+  .sidebar-container:not([data-alpine-loaded]) {
+    opacity: 0;
+    transition: opacity 0.1s ease-in;
+  }
+
+  .sidebar-container[data-alpine-loaded] {
+    opacity: 1;
+  }
+
+  /* Sidebar width styles */
+  .sidebar-expanded {
+    width: 280px;
+  }
+
+  /* Sidebar collapsed styles */
+  .sidebar-collapsed {
+    width: 4rem !important;
+    min-height: 100vh !important;
+  }
+
+  .sidebar-collapsed .btn-sidebar {
+    justify-content: center;
+    min-width: 2.5rem;
+    --text-color: var(--gray-100);
+  }
+
+  .sidebar-collapsed .btn-sidebar:hover {
+    --text-color: var(--white);
+    --bg-color: var(--clr-sidebar-btn-bg-hover);
+  }
+
+  /* Collapsed accordion group styling */
+  .sidebar-collapsed .accordion-group-collapsed {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-width: 2.5rem;
+    height: 3rem;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    color: oklch(var(--gray-100));
+  }
+
+  .sidebar-collapsed .accordion-group-collapsed:hover {
+    background-color: oklch(var(--clr-sidebar-btn-bg-hover));
+    color: oklch(var(--white));
+  }
+
+  /* Toggle button styling */
+  .btn-ghost {
+    --text-color: var(--gray-600);
+  }
+
+  .btn-ghost:hover {
+    --text-color: var(--gray-400);
+    --bg-color: var(--gray-200);
+  }
+
+  /* Toggle button in collapsed state */
+  .sidebar-collapsed .btn-ghost {
+    --text-color: var(--gray-600);
+  }
+
+  .sidebar-collapsed .btn-ghost:hover {
+    --text-color: var(--gray-400);
+    --bg-color: var(--gray-200);
+  }
+
+  /* Sidebar toggle button styling */
+  .btn-sidebar-toggle {
+    --text-color: var(--gray-600);
+    --bg-color: var(--white);
+    --border-color: var(--transparent);
+  }
+
+  .btn-sidebar-toggle:hover {
+    --text-color: var(--gray-400);
+    --bg-color: var(--gray-100);
+  }
+
+  /* Sidebar click-to-toggle cursor styles */
+  .sidebar-expand-cursor {
+    cursor: e-resize;
+  }
+
+  .sidebar-collapse-cursor {
+    cursor: w-resize;
+  }
+
+  .sidebar-expand-cursor a,
+  .sidebar-expand-cursor button,
+  .sidebar-expand-cursor summary,
+  .sidebar-expand-cursor [role="button"],
+  .sidebar-collapse-cursor a,
+  .sidebar-collapse-cursor button,
+  .sidebar-collapse-cursor summary,
+  .sidebar-collapse-cursor [role="button"] {
+    cursor: pointer;
+  }
+}
+
+@layer utilities {
+  .hide-scrollbar {
+    scrollbar-width: none;
+  }
+
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-transition {
+    transition: none !important;
+  }
+
+  /* Slider styles */
+  .slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 1rem;
+    position: relative;
+    z-index: 10;
+  }
+
+  .slider-thumb::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: oklch(var(--primary-500));
+    cursor: pointer;
+    border: 2px solid white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    position: relative;
+    z-index: 20;
+  }
+
+  .slider-thumb::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: oklch(var(--primary-500));
+    cursor: pointer;
+    border: 2px solid white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    position: relative;
+    z-index: 20;
+  }
+
+  .slider-thumb:focus {
+    outline: none;
+  }
+
+  .slider-thumb:disabled::-webkit-slider-thumb {
+    background: oklch(var(--gray-400));
+  }
+
+  .slider-thumb:disabled::-moz-range-thumb {
+    background: oklch(var(--gray-400));
+  }
+}
+
+/* iOS Safari 100vh fix - use dynamic viewport height */
+@supports (height: 100dvh) {
+  .min-h-screen {
+    min-height: 100dvh !important;
+  }
+  .h-screen {
+    height: 100dvh !important;
+  }
+}
+
+/* Keyframes */
+@keyframes slide-in-right {
+  from {
+    transform: translateX(100%)
+  }
+}
+
+@keyframes slide-out-right {
+  to {
+    transform: translateX(100%)
+  }
+}
+
+
+@keyframes slide-in-left {
+  from {
+    transform: translateX(-100%)
+  }
+}
+
+@keyframes slide-out-left {
+  to {
+    transform: translateX(-100%)
+  }
+}
+
+@keyframes slide-in-up {
+  from {
+    transform: translateY(100%)
+  }
+}
+
+@keyframes scale-down {
+  to {
+    transform: scale(.75)
+  }
+}
+
+@keyframes slide-out-down {
+  to {
+    transform: translateY(100%)
+  }
+}
+
+@keyframes slide-in-down {
+  from {
+    transform: translateY(-100%)
+  }
+}
+
+@keyframes slide-out-up {
+  to {
+    transform: translateY(-100%)
+  }
+}
+
+@keyframes dot-flashing {
+  0% {
+    background-color: oklch(var(--color));
+  }
+
+  50%,
+  100% {
+    background-color: oklch(var(--color) / 30%);
+  }
+}
+
+/* Lazy loading component styles */
+.lazy-load.htmx-settling * {
+  opacity: 0;
+}
+
+.lazy-load * {
+  transition: opacity 300ms ease-in;
+}
+