@pathscale/ui 0.0.157 → 0.0.158

package/dist/styles/compat/daisy-primitives.css

@@ -0,0 +1,2517 @@
+@layer components {
+  .btn.btn {
+    --btn-bg: var(--color-base-200);
+    --btn-color: var(--color-base-content);
+    --btn-fg: var(--btn-color);
+    --btn-border: var(--color-base-300);
+    --btn-tone: var(--color-base-content);
+    --btn-hover-bg: var(--color-base-300);
+    --btn-hover-color: var(--btn-color);
+    --btn-hover-border: color-mix(in oklch, var(--color-base-content) 18%, var(--color-base-200));
+    align-items: center;
+    background: var(--btn-bg);
+    border: 1px solid var(--btn-border);
+    border-radius: var(--radius-field, 0.5rem);
+    color: var(--btn-color);
+    cursor: pointer;
+    display: inline-flex;
+    font-size: 0.875rem;
+    font-weight: 600;
+    gap: 0.5rem;
+    justify-content: center;
+    line-height: 1.25rem;
+    min-height: 2.5rem;
+    padding: 0 1rem;
+    text-decoration: none;
+    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
+    user-select: none;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+
+  .btn.btn:hover {
+    --btn-bg: var(--btn-hover-bg);
+    --btn-color: var(--btn-hover-color);
+    --btn-fg: var(--btn-hover-color);
+    --btn-border: var(--btn-hover-border);
+  }
+
+  .btn.btn:focus-visible {
+    outline: 2px solid color-mix(in oklch, var(--color-primary) 55%, transparent);
+    outline-offset: 2px;
+  }
+
+  .btn.btn:disabled,
+  .btn.btn.btn-disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+    pointer-events: none;
+  }
+
+  .btn.btn:disabled:hover,
+  .btn.btn.btn-disabled:hover {
+    --btn-bg: var(--btn-bg);
+    --btn-fg: var(--btn-color);
+    --btn-border: var(--btn-border);
+  }
+
+  .btn.btn-ghost {
+    --btn-bg: transparent;
+    --btn-border: transparent;
+    --btn-color: var(--color-base-content);
+    --btn-hover-color: var(--color-base-content);
+  }
+
+  .btn.btn-ghost:hover {
+    --btn-hover-bg: var(--color-base-300);
+    --btn-hover-border: transparent;
+  }
+
+  .btn.btn-outline {
+    --btn-bg: transparent;
+    --btn-border: color-mix(in oklch, var(--color-base-content) 28%, transparent);
+    --btn-hover-bg: var(--color-base-200);
+    --btn-hover-border: color-mix(in oklch, var(--color-base-content) 38%, transparent);
+  }
+
+  .btn.btn-link {
+    --btn-bg: transparent;
+    --btn-border: transparent;
+    --btn-tone: var(--color-primary);
+    color: var(--color-primary);
+    min-height: 0;
+    padding: 0;
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
+
+  .btn.btn-soft {
+    --btn-bg: color-mix(in oklch, var(--btn-tone) 16%, var(--color-base-100));
+    --btn-border: color-mix(in oklch, var(--btn-tone) 34%, transparent);
+    --btn-color: color-mix(in oklch, var(--btn-tone) 72%, var(--color-base-content));
+    --btn-hover-bg: color-mix(in oklch, var(--btn-tone) 24%, var(--color-base-100));
+    --btn-hover-border: color-mix(in oklch, var(--btn-tone) 45%, transparent);
+    --btn-hover-color: color-mix(in oklch, var(--btn-tone) 82%, var(--color-base-content));
+  }
+
+  .btn.btn-dash {
+    --btn-bg: transparent;
+    --btn-border: color-mix(in oklch, var(--btn-tone) 55%, transparent);
+    --btn-color: color-mix(in oklch, var(--btn-tone) 82%, var(--color-base-content));
+    --btn-hover-bg: color-mix(in oklch, var(--btn-tone) 12%, transparent);
+    --btn-hover-border: color-mix(in oklch, var(--btn-tone) 82%, transparent);
+    --btn-hover-color: color-mix(in oklch, var(--btn-tone) 92%, var(--color-base-content));
+    border-style: dashed;
+  }
+
+  .btn.btn-dash:hover {
+    border-style: dashed;
+  }
+
+  .btn.btn-active,
+  .btn.btn:active:not(:disabled):not(.btn-disabled) {
+    --btn-bg: var(--btn-hover-bg);
+    --btn-color: var(--btn-hover-color);
+    --btn-fg: var(--btn-hover-color);
+    --btn-border: var(--btn-hover-border);
+  }
+
+  .btn.btn-primary {
+    --btn-bg: var(--color-primary);
+    --btn-border: var(--color-primary);
+    --btn-tone: var(--color-primary);
+    --btn-color: var(--color-primary-content);
+    --btn-hover-bg: color-mix(in oklch, var(--color-primary) 85%, black);
+    --btn-hover-border: color-mix(in oklch, var(--color-primary) 85%, black);
+    --btn-hover-color: var(--color-primary-content);
+  }
+
+  .btn.btn-secondary {
+    --btn-bg: var(--color-secondary);
+    --btn-border: var(--color-secondary);
+    --btn-tone: var(--color-secondary);
+    --btn-color: var(--color-secondary-content);
+    --btn-hover-bg: color-mix(in oklch, var(--color-secondary) 85%, black);
+    --btn-hover-border: color-mix(in oklch, var(--color-secondary) 85%, black);
+    --btn-hover-color: var(--color-secondary-content);
+  }
+
+  .btn.btn-accent {
+    --btn-bg: var(--color-accent);
+    --btn-border: var(--color-accent);
+    --btn-tone: var(--color-accent);
+    --btn-color: var(--color-accent-content);
+    --btn-hover-bg: color-mix(in oklch, var(--color-accent) 85%, black);
+    --btn-hover-border: color-mix(in oklch, var(--color-accent) 85%, black);
+    --btn-hover-color: var(--color-accent-content);
+  }
+
+  .btn.btn-neutral {
+    --btn-bg: var(--color-neutral);
+    --btn-border: var(--color-neutral);
+    --btn-tone: var(--color-neutral);
+    --btn-color: var(--color-neutral-content);
+    --btn-hover-bg: color-mix(in oklch, var(--color-neutral) 85%, black);
+    --btn-hover-border: color-mix(in oklch, var(--color-neutral) 85%, black);
+    --btn-hover-color: var(--color-neutral-content);
+  }
+
+  .btn.btn-info {
+    --btn-bg: var(--color-info);
+    --btn-border: var(--color-info);
+    --btn-tone: var(--color-info);
+    --btn-color: var(--color-info-content);
+    --btn-hover-bg: color-mix(in oklch, var(--color-info) 85%, black);
+    --btn-hover-border: color-mix(in oklch, var(--color-info) 85%, black);
+    --btn-hover-color: var(--color-info-content);
+  }
+
+  .btn.btn-success {
+    --btn-bg: var(--color-success);
+    --btn-border: var(--color-success);
+    --btn-tone: var(--color-success);
+    --btn-color: var(--color-success-content);
+    --btn-hover-bg: color-mix(in oklch, var(--color-success) 85%, black);
+    --btn-hover-border: color-mix(in oklch, var(--color-success) 85%, black);
+    --btn-hover-color: var(--color-success-content);
+  }
+
+  .btn.btn-warning {
+    --btn-bg: var(--color-warning);
+    --btn-border: var(--color-warning);
+    --btn-tone: var(--color-warning);
+    --btn-color: var(--color-warning-content);
+    --btn-hover-bg: color-mix(in oklch, var(--color-warning) 85%, black);
+    --btn-hover-border: color-mix(in oklch, var(--color-warning) 85%, black);
+    --btn-hover-color: var(--color-warning-content);
+  }
+
+  .btn.btn-error {
+    --btn-bg: var(--color-error);
+    --btn-border: var(--color-error);
+    --btn-tone: var(--color-error);
+    --btn-color: var(--color-error-content);
+    --btn-hover-bg: color-mix(in oklch, var(--color-error) 85%, black);
+    --btn-hover-border: color-mix(in oklch, var(--color-error) 85%, black);
+    --btn-hover-color: var(--color-error-content);
+  }
+
+  .btn.btn-xs {
+    font-size: 0.75rem;
+    min-height: 1.75rem;
+    padding: 0 0.5rem;
+  }
+
+  .btn.btn-sm {
+    font-size: 0.8125rem;
+    min-height: 2rem;
+    padding: 0 0.75rem;
+  }
+
+  .btn.btn-md {
+    min-height: 2.5rem;
+  }
+
+  .btn.btn-lg {
+    font-size: 1rem;
+    min-height: 3rem;
+    padding: 0 1.25rem;
+  }
+
+  .btn.btn-xl {
+    font-size: 1.125rem;
+    min-height: 3.25rem;
+    padding: 0 1.5rem;
+  }
+
+  .btn.btn-responsive {
+    font-size: 0.75rem;
+    min-height: 1.75rem;
+    padding: 0 0.5rem;
+  }
+
+  .btn.btn-circle,
+  .btn.btn-square {
+    padding: 0;
+    width: 2.5rem;
+  }
+
+  .btn.btn-circle {
+    border-radius: 9999px;
+  }
+
+  .btn.btn-square {
+    border-radius: var(--radius-field, 0.5rem);
+  }
+
+  .btn.btn-block {
+    display: flex;
+    width: 100%;
+  }
+
+  .btn.btn-wide {
+    min-width: 10rem;
+  }
+
+  @media (min-width: 640px) {
+    .btn.btn-responsive {
+      font-size: 0.8125rem;
+      min-height: 2rem;
+      padding: 0 0.75rem;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .btn.btn-responsive {
+      font-size: 0.875rem;
+      min-height: 2.5rem;
+      padding: 0 1rem;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .btn.btn-responsive {
+      font-size: 1rem;
+      min-height: 3rem;
+      padding: 0 1.25rem;
+    }
+  }
+
+  .join {
+    align-items: stretch;
+    display: inline-flex;
+  }
+
+  .join.join-vertical {
+    flex-direction: column;
+  }
+
+  .join.join-horizontal {
+    flex-direction: row;
+  }
+
+  .join .join-item {
+    border-radius: 0;
+  }
+
+  .join.join-horizontal .join-item:first-child {
+    border-radius: var(--radius-field, 0.5rem) 0 0 var(--radius-field, 0.5rem);
+  }
+
+  .join.join-horizontal .join-item:last-child {
+    border-radius: 0 var(--radius-field, 0.5rem) var(--radius-field, 0.5rem) 0;
+  }
+
+  .join.join-vertical .join-item:first-child {
+    border-radius: var(--radius-field, 0.5rem) var(--radius-field, 0.5rem) 0 0;
+  }
+
+  .join.join-vertical .join-item:last-child {
+    border-radius: 0 0 var(--radius-field, 0.5rem) var(--radius-field, 0.5rem);
+  }
+
+  .label {
+    align-items: center;
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.5rem 0.25rem;
+    width: 100%;
+  }
+
+  .label-text {
+    color: color-mix(in oklch, var(--color-base-content) 88%, transparent);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .input,
+  .select,
+  .textarea,
+  .file-input {
+    --field-bg: var(--color-base-100);
+    --field-border: color-mix(in oklch, var(--color-base-content) 18%, transparent);
+    --field-color: var(--color-base-content);
+    --field-placeholder: color-mix(in oklch, var(--color-base-content) 50%, transparent);
+    --field-focus: color-mix(in oklch, var(--color-base-content) 28%, transparent);
+    --field-file-bg: color-mix(in oklch, var(--color-base-content) 10%, var(--color-base-100));
+    --field-file-color: var(--color-base-content);
+  }
+
+  .input {
+    align-items: center;
+    background: var(--field-bg);
+    border: 1px solid var(--field-border);
+    border-radius: var(--radius-field, 0.5rem);
+    color: var(--field-color);
+    display: inline-flex;
+    gap: 0.5rem;
+    min-height: 2.5rem;
+    padding: 0 0.75rem;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+    width: 100%;
+  }
+
+  .input input {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    flex: 1;
+    min-width: 0;
+    outline: none;
+  }
+
+  .input input::placeholder {
+    color: var(--field-placeholder);
+  }
+
+  .input:focus-within {
+    border-color: var(--field-focus);
+    box-shadow: 0 0 0 2px color-mix(in oklch, var(--field-focus) 22%, transparent);
+  }
+
+  .input:has(input:disabled),
+  .input.input-disabled {
+    background: color-mix(in oklch, var(--color-base-content) 6%, var(--color-base-100));
+    cursor: not-allowed;
+    opacity: 0.65;
+  }
+
+  .input:has(input:disabled) input {
+    cursor: not-allowed;
+  }
+
+  .select,
+  .textarea,
+  .file-input {
+    background: var(--field-bg);
+    border: 1px solid var(--field-border);
+    border-radius: var(--radius-field, 0.5rem);
+    color: var(--field-color);
+    min-height: 2.5rem;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+  }
+
+  .select:focus-visible,
+  .textarea:focus-visible,
+  .file-input:focus-visible {
+    border-color: var(--field-focus);
+    box-shadow: 0 0 0 2px color-mix(in oklch, var(--field-focus) 22%, transparent);
+    outline: none;
+  }
+
+  .select:disabled,
+  .textarea:disabled,
+  .file-input:disabled {
+    background: color-mix(in oklch, var(--color-base-content) 6%, var(--color-base-100));
+    cursor: not-allowed;
+    opacity: 0.65;
+  }
+
+  .select {
+    appearance: none;
+    background-image:
+      linear-gradient(45deg, transparent 50%, currentColor 50%),
+      linear-gradient(135deg, currentColor 50%, transparent 50%);
+    background-position:
+      calc(100% - 1rem) calc(50% - 2px),
+      calc(100% - 0.7rem) calc(50% - 2px);
+    background-repeat: no-repeat;
+    background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
+    padding: 0 2rem 0 0.75rem;
+    width: 100%;
+  }
+
+  .select option {
+    background: var(--color-base-100);
+    color: var(--color-base-content);
+  }
+
+  .textarea {
+    padding: 0.625rem 0.75rem;
+    width: 100%;
+  }
+
+  .textarea::placeholder {
+    color: var(--field-placeholder);
+  }
+
+  .file-input {
+    padding: 0;
+    width: 100%;
+  }
+
+  .file-input::file-selector-button {
+    background: var(--field-file-bg);
+    border: 0;
+    border-inline-end: 1px solid var(--field-border);
+    color: var(--field-file-color);
+    cursor: pointer;
+    font-weight: 600;
+    height: 100%;
+    margin-inline-end: 0.75rem;
+    padding: 0 0.875rem;
+    transition: background-color 0.15s ease;
+  }
+
+  .file-input:hover::file-selector-button {
+    background: color-mix(in oklch, var(--field-file-bg) 85%, black);
+  }
+
+  .file-input:disabled::file-selector-button {
+    cursor: not-allowed;
+  }
+
+  .input.input-ghost,
+  .select.select-ghost,
+  .textarea.textarea-ghost,
+  .file-input.file-input-ghost {
+    --field-bg: transparent;
+    --field-border: transparent;
+  }
+
+  .input.input-bordered,
+  .file-input.file-input-bordered {
+    --field-border: color-mix(in oklch, var(--color-base-content) 22%, transparent);
+  }
+
+  .input.input-primary,
+  .select.select-primary,
+  .textarea.textarea-primary,
+  .file-input.file-input-primary {
+    --field-focus: var(--color-primary);
+    --field-border: color-mix(in oklch, var(--color-primary) 35%, var(--color-base-100));
+    --field-file-bg: color-mix(in oklch, var(--color-primary) 16%, var(--color-base-100));
+  }
+
+  .input.input-secondary,
+  .select.select-secondary,
+  .textarea.textarea-secondary,
+  .file-input.file-input-secondary {
+    --field-focus: var(--color-secondary);
+    --field-border: color-mix(in oklch, var(--color-secondary) 35%, var(--color-base-100));
+    --field-file-bg: color-mix(in oklch, var(--color-secondary) 16%, var(--color-base-100));
+  }
+
+  .input.input-accent,
+  .select.select-accent,
+  .textarea.textarea-accent,
+  .file-input.file-input-accent {
+    --field-focus: var(--color-accent);
+    --field-border: color-mix(in oklch, var(--color-accent) 35%, var(--color-base-100));
+    --field-file-bg: color-mix(in oklch, var(--color-accent) 16%, var(--color-base-100));
+  }
+
+  .input.input-info,
+  .select.select-info,
+  .textarea.textarea-info,
+  .file-input.file-input-info {
+    --field-focus: var(--color-info);
+    --field-border: color-mix(in oklch, var(--color-info) 35%, var(--color-base-100));
+    --field-file-bg: color-mix(in oklch, var(--color-info) 16%, var(--color-base-100));
+  }
+
+  .input.input-success,
+  .select.select-success,
+  .textarea.textarea-success,
+  .file-input.file-input-success {
+    --field-focus: var(--color-success);
+    --field-border: color-mix(in oklch, var(--color-success) 35%, var(--color-base-100));
+    --field-file-bg: color-mix(in oklch, var(--color-success) 16%, var(--color-base-100));
+  }
+
+  .input.input-warning,
+  .select.select-warning,
+  .textarea.textarea-warning,
+  .file-input.file-input-warning {
+    --field-focus: var(--color-warning);
+    --field-border: color-mix(in oklch, var(--color-warning) 35%, var(--color-base-100));
+    --field-file-bg: color-mix(in oklch, var(--color-warning) 16%, var(--color-base-100));
+  }
+
+  .input.input-error,
+  .select.select-error,
+  .textarea.textarea-error,
+  .file-input.file-input-error {
+    --field-focus: var(--color-error);
+    --field-border: color-mix(in oklch, var(--color-error) 35%, var(--color-base-100));
+    --field-file-bg: color-mix(in oklch, var(--color-error) 16%, var(--color-base-100));
+  }
+
+  .input.input-xs,
+  .select.select-xs,
+  .textarea.textarea-xs,
+  .file-input.file-input-xs {
+    font-size: 0.75rem;
+    min-height: 1.75rem;
+  }
+
+  .input.input-sm,
+  .select.select-sm,
+  .textarea.textarea-sm,
+  .file-input.file-input-sm {
+    font-size: 0.8125rem;
+    min-height: 2rem;
+  }
+
+  .input.input-md,
+  .select.select-md,
+  .textarea.textarea-md,
+  .file-input.file-input-md {
+    min-height: 2.5rem;
+  }
+
+  .input.input-lg,
+  .select.select-lg,
+  .textarea.textarea-lg,
+  .file-input.file-input-lg {
+    font-size: 1rem;
+    min-height: 3rem;
+  }
+
+  .input.input-xl,
+  .select.select-xl,
+  .textarea.textarea-xl,
+  .file-input.file-input-xl {
+    font-size: 1.125rem;
+    min-height: 3.25rem;
+  }
+
+  .checkbox,
+  .radio {
+    --control-accent: var(--color-primary);
+    appearance: none;
+    background: var(--color-base-100);
+    border: 1px solid color-mix(in oklch, var(--color-base-content) 30%, transparent);
+    box-shadow: inset 0 0 0 0 color-mix(in oklch, var(--control-accent) 75%, transparent);
+    color: var(--color-base-content);
+    cursor: pointer;
+    display: inline-block;
+    flex-shrink: 0;
+    height: 1.25rem;
+    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+    width: 1.25rem;
+  }
+
+  .checkbox {
+    --size: calc(var(--size-selector, 0.25rem) * 6);
+    --input-color: var(--control-accent);
+    --checkbox-content: var(--color-primary-content);
+    background-size: auto, calc(var(--noise) * 100%);
+    background-image: none, var(--fx-noise);
+    box-shadow:
+      0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset,
+      0 0 #0000 inset,
+      0 0 #0000;
+    height: var(--size);
+    padding: 0.25rem;
+    position: relative;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0.25rem;
+    width: var(--size);
+  }
+
+  .checkbox::before {
+    background: currentColor;
+    box-shadow: 0 3px 0 0 oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+    clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
+    content: "";
+    display: block;
+    font-size: 1rem;
+    height: 100%;
+    line-height: 0.75;
+    opacity: 0;
+    rotate: 45deg;
+    transition: clip-path 0.3s 0.1s, opacity 0.1s 0.1s, rotate 0.3s 0.1s, translate 0.3s 0.1s;
+    width: 100%;
+  }
+
+  .checkbox:checked,
+  .checkbox[aria-checked="true"] {
+    background-color: var(--input-color, #0000);
+    border-color: var(--input-color, color-mix(in oklch, var(--color-base-content) 20%, transparent));
+    box-shadow:
+      0 0 #0000 inset,
+      0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
+      0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
+    color: var(--checkbox-content);
+  }
+
+  .checkbox:checked::before,
+  .checkbox[aria-checked="true"]::before {
+    clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
+    opacity: 100%;
+  }
+
+  .checkbox:indeterminate,
+  .checkbox[aria-checked="mixed"] {
+    background: color-mix(in oklch, var(--control-accent) 88%, black);
+    border-color: color-mix(in oklch, var(--control-accent) 78%, black);
+    box-shadow: inset 0 0 0 999px color-mix(in oklch, var(--control-accent) 88%, black);
+    color: var(--color-primary-content);
+  }
+
+  .checkbox:indeterminate::before,
+  .checkbox[aria-checked="mixed"]::before {
+    clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
+    opacity: 1;
+    rotate: none;
+    translate: 0 -35%;
+  }
+
+  .radio {
+    border-radius: 9999px;
+  }
+
+  .radio:checked {
+    border-color: color-mix(in oklch, var(--control-accent) 78%, black);
+    box-shadow:
+      inset 0 0 0 3px var(--color-base-100),
+      inset 0 0 0 999px color-mix(in oklch, var(--control-accent) 88%, black);
+  }
+
+  .checkbox:focus-visible,
+  .radio:focus-visible {
+    outline: 2px solid color-mix(in oklch, var(--control-accent) 55%, transparent);
+    outline-offset: 2px;
+  }
+
+  .checkbox:disabled,
+  .radio:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .checkbox.checkbox-xs,
+  .radio.radio-xs {
+    height: 0.875rem;
+    width: 0.875rem;
+  }
+
+  .checkbox.checkbox-sm,
+  .radio.radio-sm {
+    height: 1rem;
+    width: 1rem;
+  }
+
+  .checkbox.checkbox-md,
+  .radio.radio-md {
+    height: 1.25rem;
+    width: 1.25rem;
+  }
+
+  .checkbox.checkbox-lg,
+  .radio.radio-lg {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+
+  .checkbox.checkbox-xl,
+  .radio.radio-xl {
+    height: 1.75rem;
+    width: 1.75rem;
+  }
+
+  .checkbox.checkbox-xs {
+    --size: calc(var(--size-selector, 0.25rem) * 4);
+    padding: 0.125rem;
+  }
+
+  .checkbox.checkbox-sm {
+    --size: calc(var(--size-selector, 0.25rem) * 5);
+    padding: 0.1875rem;
+  }
+
+  .checkbox.checkbox-md {
+    --size: calc(var(--size-selector, 0.25rem) * 6);
+    padding: 0.25rem;
+  }
+
+  .checkbox.checkbox-lg {
+    --size: calc(var(--size-selector, 0.25rem) * 7);
+    padding: 0.3125rem;
+  }
+
+  .checkbox.checkbox-xl {
+    --size: calc(var(--size-selector, 0.25rem) * 8);
+    padding: 0.375rem;
+  }
+
+  .checkbox.checkbox-neutral {
+    --checkbox-content: var(--color-neutral-content);
+    --control-accent: var(--color-neutral);
+  }
+
+  .checkbox.checkbox-primary,
+  .radio.radio-primary {
+    --checkbox-content: var(--color-primary-content);
+    --control-accent: var(--color-primary);
+  }
+
+  .checkbox.checkbox-secondary,
+  .radio.radio-secondary {
+    --checkbox-content: var(--color-secondary-content);
+    --control-accent: var(--color-secondary);
+  }
+
+  .checkbox.checkbox-accent,
+  .radio.radio-accent {
+    --checkbox-content: var(--color-accent-content);
+    --control-accent: var(--color-accent);
+  }
+
+  .checkbox.checkbox-info,
+  .radio.radio-info {
+    --checkbox-content: var(--color-info-content);
+    --control-accent: var(--color-info);
+  }
+
+  .checkbox.checkbox-success,
+  .radio.radio-success {
+    --checkbox-content: var(--color-success-content);
+    --control-accent: var(--color-success);
+  }
+
+  .checkbox.checkbox-warning,
+  .radio.radio-warning {
+    --checkbox-content: var(--color-warning-content);
+    --control-accent: var(--color-warning);
+  }
+
+  .checkbox.checkbox-error,
+  .radio.radio-error {
+    --checkbox-content: var(--color-error-content);
+    --control-accent: var(--color-error);
+  }
+
+  .range {
+    -webkit-appearance: none;
+    appearance: none;
+    --range-thumb: var(--color-base-100);
+    --range-thumb-size: calc(var(--size-selector, 0.25rem) * 6);
+    --range-progress: currentColor;
+    --range-fill: 1;
+    --range-p: 0.25rem;
+    --range-bg: color-mix(in oklab, currentColor 10%, #0000);
+    --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));
+    background-color: #0000;
+    border: none;
+    border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
+    color: var(--color-primary);
+    cursor: pointer;
+    height: var(--range-thumb-size);
+    overflow: hidden;
+    vertical-align: middle;
+    width: clamp(3rem, 20rem, 100%);
+  }
+
+  [dir="rtl"] .range {
+    --range-dir: -1;
+  }
+
+  .range:focus {
+    outline: none;
+  }
+
+  .range:focus-visible {
+    outline: 2px solid;
+    outline-offset: 2px;
+  }
+
+  .range::-webkit-slider-runnable-track {
+    background-color: var(--range-bg);
+    border-radius: var(--radius-selector);
+    height: calc(var(--range-thumb-size) * 0.5);
+    width: 100%;
+  }
+
+  .range::-webkit-slider-thumb {
+    box-sizing: border-box;
+    border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
+    height: var(--range-thumb-size);
+    width: var(--range-thumb-size);
+    border: var(--range-p) solid;
+    -webkit-appearance: none;
+    appearance: none;
+    color: var(--range-progress);
+    box-shadow:
+      0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset,
+      0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
+      0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000),
+      0 0 0 2rem var(--range-thumb) inset,
+      calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2))
+        0
+        0
+        calc(100rem * var(--range-fill));
+    background-color: currentColor;
+    position: relative;
+    top: 50%;
+    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+    transform: translateY(-50%);
+  }
+
+  .range::-moz-range-track {
+    background-color: var(--range-bg);
+    border-radius: var(--radius-selector);
+    height: calc(var(--range-thumb-size) * 0.5);
+    width: 100%;
+  }
+
+  .range::-moz-range-thumb {
+    box-sizing: border-box;
+    border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
+    height: var(--range-thumb-size);
+    width: var(--range-thumb-size);
+    border: var(--range-p) solid;
+    color: var(--range-progress);
+    box-shadow:
+      0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset,
+      0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
+      0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000),
+      0 0 0 2rem var(--range-thumb) inset,
+      calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2))
+        0
+        0
+        calc(100rem * var(--range-fill));
+    background-color: currentColor;
+    position: relative;
+    top: 50%;
+    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+  }
+
+  .range:active::-webkit-slider-thumb {
+    transform: translateY(-50%) scale(1.03);
+  }
+
+  .range:active::-moz-range-thumb {
+    transform: scale(1.03);
+  }
+
+  .range:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+  }
+
+  .range.range-xs {
+    --range-thumb-size: calc(var(--size-selector, 0.25rem) * 4);
+  }
+
+  .range.range-sm {
+    --range-thumb-size: calc(var(--size-selector, 0.25rem) * 5);
+  }
+
+  .range.range-md {
+    --range-thumb-size: calc(var(--size-selector, 0.25rem) * 6);
+  }
+
+  .range.range-lg {
+    --range-thumb-size: calc(var(--size-selector, 0.25rem) * 7);
+  }
+
+  .range.range-xl {
+    --range-thumb-size: calc(var(--size-selector, 0.25rem) * 8);
+  }
+
+  .range.range-neutral {
+    --range-thumb: var(--color-neutral-content);
+    color: var(--color-neutral);
+  }
+
+  .range.range-primary {
+    --range-thumb: var(--color-primary-content);
+    color: var(--color-primary);
+  }
+
+  .range.range-secondary {
+    --range-thumb: var(--color-secondary-content);
+    color: var(--color-secondary);
+  }
+
+  .range.range-accent {
+    --range-thumb: var(--color-accent-content);
+    color: var(--color-accent);
+  }
+
+  .range.range-info {
+    --range-thumb: var(--color-info-content);
+    color: var(--color-info);
+  }
+
+  .range.range-success {
+    --range-thumb: var(--color-success-content);
+    color: var(--color-success);
+  }
+
+  .range.range-warning {
+    --range-thumb: var(--color-warning-content);
+    color: var(--color-warning);
+  }
+
+  .range.range-error {
+    --range-thumb: var(--color-error-content);
+    color: var(--color-error);
+  }
+
+  .menu {
+    background: var(--color-base-100);
+    border-radius: var(--radius-box, 0.75rem);
+    color: var(--color-base-content);
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    list-style: none;
+    margin: 0;
+    padding: 0.375rem;
+  }
+
+  .menu :where(li) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .menu :where(li > *) {
+    align-items: center;
+    border-radius: calc(var(--radius-field, 0.5rem) - 2px);
+    color: inherit;
+    display: flex;
+    gap: 0.5rem;
+    min-height: 2.25rem;
+    padding: 0.5rem 0.625rem;
+    text-decoration: none;
+  }
+
+  .menu :where(li > *:hover) {
+    background: color-mix(in oklch, var(--color-base-content) 10%, transparent);
+  }
+
+  .menu :where(li.menu-focus > *),
+  .menu :where(li > *.menu-focus),
+  .menu :where(li > *:focus-visible) {
+    background: color-mix(in oklch, var(--color-base-content) 12%, transparent);
+  }
+
+  .menu :where(li > *.menu-active),
+  .menu :where(li.menu-active > *),
+  .menu :where(li > *.active) {
+    background: color-mix(in oklch, var(--color-primary) 85%, var(--color-base-100));
+    color: var(--color-primary-content);
+  }
+
+  .menu :where(li > *.menu-disabled),
+  .menu :where(li.menu-disabled > *),
+  .menu :where(li > *:disabled),
+  .menu :where(li[aria-disabled="true"] > *) {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .menu :where(.menu-dropdown-toggle) {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .menu :where(.menu-dropdown-toggle)::after {
+    border-bottom: 1.5px solid currentColor;
+    border-right: 1.5px solid currentColor;
+    content: "";
+    display: inline-block;
+    height: 0.45rem;
+    margin-left: auto;
+    transform: rotate(45deg);
+    transition: transform 0.15s ease;
+    width: 0.45rem;
+  }
+
+  .menu :where(.menu-dropdown-toggle.menu-dropdown-show)::after {
+    transform: rotate(225deg);
+  }
+
+  .menu :where(.menu-dropdown) {
+    border-left: 1px solid color-mix(in oklch, var(--color-base-content) 18%, transparent);
+    display: none;
+    flex-direction: column;
+    gap: 0.125rem;
+    margin: 0.25rem 0 0.25rem 0.75rem;
+    padding: 0.125rem 0 0.125rem 0.5rem;
+  }
+
+  .menu :where(.menu-dropdown.menu-dropdown-show),
+  .menu :where(.menu-dropdown-toggle.menu-dropdown-show + .menu-dropdown) {
+    display: flex;
+  }
+
+  .menu.menu-vertical {
+    flex-direction: column;
+  }
+
+  .menu.menu-horizontal {
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+  }
+
+  .menu.menu-horizontal :where(li) {
+    width: auto;
+  }
+
+  .menu.menu-responsive {
+    flex-direction: column;
+  }
+
+  .menu.menu-xs :where(li > *) {
+    font-size: 0.75rem;
+    min-height: 1.75rem;
+    padding: 0.25rem 0.5rem;
+  }
+
+  .menu.menu-sm :where(li > *) {
+    font-size: 0.8125rem;
+    min-height: 2rem;
+    padding: 0.375rem 0.625rem;
+  }
+
+  .menu.menu-md :where(li > *) {
+    font-size: 0.875rem;
+    min-height: 2.25rem;
+  }
+
+  .menu.menu-lg :where(li > *) {
+    font-size: 1rem;
+    min-height: 2.5rem;
+    padding: 0.625rem 0.75rem;
+  }
+
+  .menu.menu-xl :where(li > *) {
+    font-size: 1.125rem;
+    min-height: 2.75rem;
+    padding: 0.75rem 0.875rem;
+  }
+
+  @media (min-width: 1024px) {
+    .menu.menu-responsive {
+      align-items: center;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 0.25rem;
+    }
+
+    .menu.menu-responsive :where(li) {
+      width: auto;
+    }
+  }
+
+  .table {
+    border-collapse: separate;
+    border-spacing: 0;
+    color: var(--color-base-content);
+    width: 100%;
+  }
+
+  .table :where(th, td) {
+    border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent);
+    padding: 0.75rem 0.875rem;
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  .table :where(thead th) {
+    background: color-mix(in oklch, var(--color-base-content) 6%, var(--color-base-100));
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+  }
+
+  .table :where(tbody tr:last-child td) {
+    border-bottom: none;
+  }
+
+  .table.table-zebra :where(tbody tr:nth-child(even)) {
+    background: color-mix(in oklch, var(--color-base-content) 4%, transparent);
+  }
+
+  .table.table-hover :where(tbody tr:hover) {
+    background: color-mix(in oklch, var(--color-base-content) 8%, transparent);
+  }
+
+  .toggle {
+    appearance: none;
+    background: color-mix(in oklch, var(--color-base-content) 16%, transparent);
+    border: 1px solid color-mix(in oklch, var(--color-base-content) 22%, transparent);
+    border-radius: 9999px;
+    cursor: pointer;
+    display: inline-block;
+    height: 1.5rem;
+    position: relative;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+    width: 2.75rem;
+  }
+
+  .toggle::after {
+    background: var(--color-base-100);
+    border-radius: 9999px;
+    content: "";
+    height: 1.125rem;
+    left: 0.125rem;
+    position: absolute;
+    top: 0.125rem;
+    transition: transform 0.15s ease;
+    width: 1.125rem;
+  }
+
+  .toggle:checked {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+  }
+
+  .toggle:checked::after {
+    transform: translateX(1.25rem);
+  }
+
+  .toggle:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .toggle.toggle-xs {
+    height: 1rem;
+    width: 1.75rem;
+  }
+
+  .toggle.toggle-xs::after {
+    height: 0.625rem;
+    width: 0.625rem;
+  }
+
+  .toggle.toggle-sm {
+    height: 1.25rem;
+    width: 2.25rem;
+  }
+
+  .toggle.toggle-sm::after {
+    height: 0.875rem;
+    width: 0.875rem;
+  }
+
+  .toggle.toggle-lg {
+    height: 1.75rem;
+    width: 3.25rem;
+  }
+
+  .toggle.toggle-lg::after {
+    height: 1.375rem;
+    width: 1.375rem;
+  }
+
+  .toggle.toggle-xl {
+    height: 2rem;
+    width: 3.75rem;
+  }
+
+  .toggle.toggle-xl::after {
+    height: 1.625rem;
+    width: 1.625rem;
+  }
+
+  .toggle.toggle-primary:checked {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+  }
+
+  .toggle.toggle-secondary:checked {
+    background: var(--color-secondary);
+    border-color: var(--color-secondary);
+  }
+
+  .toggle.toggle-accent:checked {
+    background: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  .toggle.toggle-neutral:checked {
+    background: var(--color-neutral);
+    border-color: var(--color-neutral);
+  }
+
+  .toggle.toggle-info:checked {
+    background: var(--color-info);
+    border-color: var(--color-info);
+  }
+
+  .toggle.toggle-success:checked {
+    background: var(--color-success);
+    border-color: var(--color-success);
+  }
+
+  .toggle.toggle-warning:checked {
+    background: var(--color-warning);
+    border-color: var(--color-warning);
+  }
+
+  .toggle.toggle-error:checked {
+    background: var(--color-error);
+    border-color: var(--color-error);
+  }
+
+  .modal {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    height: 100dvh;
+    justify-items: center;
+    margin: 0;
+    max-height: none;
+    max-width: none;
+    padding: 1rem;
+    width: 100vw;
+  }
+
+  .modal::backdrop {
+    background: color-mix(in oklch, var(--color-base-content) 48%, transparent);
+    backdrop-filter: blur(2px);
+  }
+
+  .modal.modal-top {
+    align-items: start;
+  }
+
+  .modal.modal-middle {
+    align-items: center;
+  }
+
+  .modal.modal-bottom {
+    align-items: end;
+  }
+
+  .modal.modal-start {
+    justify-items: start;
+  }
+
+  .modal.modal-end {
+    justify-items: end;
+  }
+
+  @media (min-width: 640px) {
+    .modal.sm\:modal-middle {
+      align-items: center;
+    }
+
+    .modal.modal-responsive-middle {
+      align-items: center;
+    }
+  }
+
+  .modal-box {
+    background: var(--color-base-100);
+    border: 1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent);
+    border-radius: var(--radius-box, 0.75rem);
+    box-shadow: 0 18px 40px color-mix(in oklch, var(--color-base-content) 30%, transparent);
+    color: var(--color-base-content);
+    max-height: calc(100dvh - 3rem);
+    overflow: auto;
+    padding: 1rem;
+  }
+
+  .modal-backdrop {
+    cursor: pointer;
+    inset: 0;
+    position: fixed;
+  }
+
+  .drawer {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    position: relative;
+    width: 100%;
+  }
+
+  .drawer-toggle {
+    block-size: 0;
+    inline-size: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  .drawer-content {
+    min-height: 100%;
+    min-width: 0;
+    z-index: 1;
+  }
+
+  .drawer-side {
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: fixed;
+    z-index: 80;
+  }
+
+  .drawer-overlay {
+    background: color-mix(in oklch, var(--color-base-content) 45%, transparent);
+    cursor: pointer;
+    inset: 0;
+    opacity: 0;
+    position: absolute;
+    transition: opacity 0.2s ease;
+  }
+
+  .drawer-side > :not(.drawer-overlay) {
+    background: var(--color-base-100);
+    border-inline-end: 1px solid color-mix(in oklch, var(--color-base-content) 14%, transparent);
+    box-shadow: 0 16px 40px color-mix(in oklch, var(--color-base-content) 24%, transparent);
+    height: 100%;
+    max-width: calc(100vw - 2rem);
+    overflow-y: auto;
+    pointer-events: auto;
+    position: relative;
+    transform: translateX(-102%);
+    transition: transform 0.24s ease;
+    width: min(24rem, 100vw);
+  }
+
+  .drawer.drawer-end .drawer-side > :not(.drawer-overlay) {
+    border-inline-end: 0;
+    border-inline-start: 1px solid color-mix(in oklch, var(--color-base-content) 14%, transparent);
+    margin-left: auto;
+    transform: translateX(102%);
+  }
+
+  .drawer > .drawer-toggle:checked ~ .drawer-side,
+  .drawer.drawer-open .drawer-side {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .drawer > .drawer-toggle:checked ~ .drawer-side > .drawer-overlay,
+  .drawer.drawer-open .drawer-side > .drawer-overlay {
+    opacity: 1;
+  }
+
+  .drawer > .drawer-toggle:checked ~ .drawer-side > :not(.drawer-overlay),
+  .drawer.drawer-open .drawer-side > :not(.drawer-overlay) {
+    transform: translateX(0);
+  }
+
+  .dropdown {
+    display: inline-flex;
+    position: relative;
+  }
+
+  .dropdown.w-full {
+    display: block;
+    width: 100%;
+  }
+
+  .dropdown > .dropdown-content {
+    left: 0;
+    margin-top: 0.375rem;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 100%;
+    transform: translateY(0.25rem) scale(0.98);
+    transform-origin: top left;
+    transition: opacity 0.16s ease, transform 0.16s ease;
+    visibility: hidden;
+    z-index: 90;
+  }
+
+  .dropdown.dropdown-top > .dropdown-content {
+    bottom: 100%;
+    left: 0;
+    margin-bottom: 0.375rem;
+    margin-top: 0;
+    top: auto;
+    transform-origin: bottom left;
+  }
+
+  .dropdown.dropdown-left > .dropdown-content {
+    left: auto;
+    right: 0;
+  }
+
+  .dropdown.dropdown-right > .dropdown-content {
+    left: 0;
+    right: auto;
+  }
+
+  .dropdown.dropdown-end > .dropdown-content {
+    left: auto;
+    right: 0;
+    transform-origin: top right;
+  }
+
+  .dropdown.dropdown-top.dropdown-end > .dropdown-content {
+    transform-origin: bottom right;
+  }
+
+  .dropdown.dropdown-open > .dropdown-content,
+  .dropdown.dropdown-hover:hover > .dropdown-content,
+  .dropdown:focus-within > .dropdown-content {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0) scale(1);
+    visibility: visible;
+  }
+
+  .max-h-50 {
+    max-height: 12.5rem;
+  }
+
+  .tabs {
+    --tab-border-color: color-mix(in oklch, var(--color-base-content) 20%, transparent);
+    --tab-bg: var(--color-primary);
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+  }
+
+  .tab {
+    align-items: center;
+    border: 1px solid transparent;
+    border-radius: var(--radius-field, 0.5rem);
+    color: color-mix(in oklch, var(--color-base-content) 82%, transparent);
+    cursor: pointer;
+    display: inline-flex;
+    font-size: 0.875rem;
+    font-weight: 500;
+    justify-content: center;
+    min-height: 2.25rem;
+    padding: 0 0.875rem;
+    text-decoration: none;
+    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  .tabs > input.tab {
+    appearance: none;
+  }
+
+  .tabs > input.tab::after {
+    content: attr(aria-label);
+  }
+
+  .tab:hover {
+    background: color-mix(in oklch, var(--color-base-content) 8%, transparent);
+  }
+
+  .tab:focus-visible {
+    outline: 2px solid color-mix(in oklch, var(--color-primary) 55%, transparent);
+    outline-offset: 2px;
+  }
+
+  .tab.tab-active,
+  .tabs > input.tab:checked {
+    background: var(--tab-bg);
+    border-color: var(--tab-border-color, var(--tab-bg));
+    color: var(--color-primary-content);
+  }
+
+  .tab.tab-disabled,
+  .tab:disabled,
+  .tabs > input.tab:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .tabs.tabs-boxed {
+    background: color-mix(in oklch, var(--color-base-content) 6%, var(--color-base-100));
+    border-radius: calc(var(--radius-field, 0.5rem) + 0.25rem);
+    padding: 0.25rem;
+  }
+
+  .tabs.tabs-bordered {
+    border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 14%, transparent);
+    padding-bottom: 0.25rem;
+  }
+
+  .tabs.tabs-bordered .tab {
+    border-bottom-color: transparent;
+    border-radius: var(--radius-field, 0.5rem) var(--radius-field, 0.5rem) 0 0;
+  }
+
+  .tabs.tabs-bordered .tab.tab-active,
+  .tabs.tabs-bordered > input.tab:checked {
+    background: transparent;
+    border-color: transparent;
+    border-bottom-color: var(--tab-border-color, var(--color-primary));
+    color: var(--tab-bg);
+  }
+
+  .tabs.tabs-lift {
+    align-items: end;
+    gap: 0.125rem;
+  }
+
+  .tabs.tabs-lift .tab {
+    background: color-mix(in oklch, var(--color-base-content) 4%, var(--color-base-100));
+    border-color: color-mix(in oklch, var(--color-base-content) 16%, transparent);
+    border-bottom: 0;
+    border-radius: var(--radius-field, 0.5rem) var(--radius-field, 0.5rem) 0 0;
+  }
+
+  .tabs.tabs-lift .tab.tab-active,
+  .tabs.tabs-lift > input.tab:checked {
+    background: var(--color-base-100);
+    color: var(--color-base-content);
+  }
+
+  .tabs.tabs-bottom {
+    align-items: start;
+  }
+
+  .tabs.tabs-bottom.tabs-bordered {
+    border-bottom: 0;
+    border-top: 1px solid color-mix(in oklch, var(--color-base-content) 14%, transparent);
+    padding-bottom: 0;
+    padding-top: 0.25rem;
+  }
+
+  .tabs.tabs-bottom.tabs-bordered .tab {
+    border-radius: 0 0 var(--radius-field, 0.5rem) var(--radius-field, 0.5rem);
+  }
+
+  .tabs.tabs-bottom.tabs-bordered .tab.tab-active,
+  .tabs.tabs-bottom.tabs-bordered > input.tab:checked {
+    border-bottom-color: transparent;
+    border-top-color: var(--tab-border-color, var(--color-primary));
+  }
+
+  .tabs.tabs-xs .tab,
+  .tabs .tab.tab-xs {
+    font-size: 0.75rem;
+    min-height: 1.75rem;
+    padding: 0 0.5rem;
+  }
+
+  .tabs.tabs-sm .tab,
+  .tabs .tab.tab-sm {
+    font-size: 0.8125rem;
+    min-height: 2rem;
+    padding: 0 0.75rem;
+  }
+
+  .tabs.tabs-md .tab,
+  .tabs .tab.tab-md {
+    min-height: 2.25rem;
+  }
+
+  .tabs.tabs-lg .tab,
+  .tabs .tab.tab-lg {
+    font-size: 1rem;
+    min-height: 2.75rem;
+    padding: 0 1rem;
+  }
+
+  .tabs.tabs-xl .tab,
+  .tabs .tab.tab-xl {
+    font-size: 1.125rem;
+    min-height: 3rem;
+    padding: 0 1.25rem;
+  }
+
+  .tab-content {
+    display: none;
+    flex-basis: 100%;
+    order: 100;
+    padding-top: 0.75rem;
+  }
+
+  .tabs > input.tab:checked + .tab-content {
+    display: block;
+  }
+
+  .tabs.tabs-bottom > input.tab:checked + .tab-content {
+    order: -1;
+    padding-bottom: 0.75rem;
+    padding-top: 0;
+  }
+
+  .badge {
+    --badge-color: var(--color-base-200);
+    --badge-bg: var(--color-base-100);
+    --badge-fg: var(--color-base-content);
+    --size: calc(var(--size-selector, 0.25rem) * 6);
+    align-items: center;
+    background-color: var(--badge-bg);
+    border: var(--border, 1px) solid var(--badge-color);
+    border-radius: var(--radius-selector, 0.5rem);
+    color: var(--badge-fg);
+    display: inline-flex;
+    font-size: 0.875rem;
+    gap: 0.5rem;
+    height: var(--size);
+    justify-content: center;
+    padding-inline: calc(0.25rem * 3 - var(--border, 1px));
+    vertical-align: middle;
+    white-space: nowrap;
+    width: fit-content;
+  }
+
+  .badge.badge-outline {
+    --badge-bg: #0000;
+    --badge-fg: var(--badge-color);
+    border-color: currentColor;
+  }
+
+  .badge.badge-dash {
+    --badge-bg: #0000;
+    --badge-fg: var(--badge-color);
+    border-color: currentColor;
+    border-style: dashed;
+  }
+
+  .badge.badge-soft {
+    --badge-fg: var(--badge-color, var(--color-base-content));
+    --badge-bg: color-mix(in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100));
+    border-color: color-mix(in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100));
+  }
+
+  .badge.badge-xs {
+    --size: calc(var(--size-selector, 0.25rem) * 4);
+    font-size: 0.625rem;
+    padding-inline: calc(0.25rem * 2 - var(--border, 1px));
+  }
+
+  .badge.badge-sm {
+    --size: calc(var(--size-selector, 0.25rem) * 5);
+    font-size: 0.75rem;
+    padding-inline: calc(0.25rem * 2.5 - var(--border, 1px));
+  }
+
+  .badge.badge-md {
+    --size: calc(var(--size-selector, 0.25rem) * 6);
+    font-size: 0.875rem;
+    padding-inline: calc(0.25rem * 3 - var(--border, 1px));
+  }
+
+  .badge.badge-lg {
+    --size: calc(var(--size-selector, 0.25rem) * 7);
+    font-size: 1rem;
+    padding-inline: calc(0.25rem * 3.5 - var(--border, 1px));
+  }
+
+  .badge.badge-xl {
+    --size: calc(var(--size-selector, 0.25rem) * 8);
+    font-size: 1.125rem;
+    padding-inline: calc(0.25rem * 4 - var(--border, 1px));
+  }
+
+  .badge.badge-responsive {
+    --size: calc(var(--size-selector, 0.25rem) * 4);
+    font-size: 0.625rem;
+    padding-inline: calc(0.25rem * 2 - var(--border, 1px));
+  }
+
+  .badge.badge-neutral {
+    --badge-color: var(--color-neutral);
+    --badge-bg: var(--color-neutral);
+    --badge-fg: var(--color-neutral-content);
+  }
+
+  .badge.badge-primary {
+    --badge-color: var(--color-primary);
+    --badge-bg: var(--color-primary);
+    --badge-fg: var(--color-primary-content);
+  }
+
+  .badge.badge-secondary {
+    --badge-color: var(--color-secondary);
+    --badge-bg: var(--color-secondary);
+    --badge-fg: var(--color-secondary-content);
+  }
+
+  .badge.badge-accent {
+    --badge-color: var(--color-accent);
+    --badge-bg: var(--color-accent);
+    --badge-fg: var(--color-accent-content);
+  }
+
+  .badge.badge-info {
+    --badge-color: var(--color-info);
+    --badge-bg: var(--color-info);
+    --badge-fg: var(--color-info-content);
+  }
+
+  .badge.badge-success {
+    --badge-color: var(--color-success);
+    --badge-bg: var(--color-success);
+    --badge-fg: var(--color-success-content);
+  }
+
+  .badge.badge-warning {
+    --badge-color: var(--color-warning);
+    --badge-bg: var(--color-warning);
+    --badge-fg: var(--color-warning-content);
+  }
+
+  .badge.badge-error {
+    --badge-color: var(--color-error);
+    --badge-bg: var(--color-error);
+    --badge-fg: var(--color-error-content);
+  }
+
+  .badge.badge-ghost {
+    --badge-color: var(--color-base-200);
+    --badge-bg: var(--color-base-200);
+    --badge-fg: var(--color-base-content);
+  }
+
+  @media (min-width: 768px) {
+    .badge.badge-responsive {
+      --size: calc(var(--size-selector, 0.25rem) * 5);
+      font-size: 0.75rem;
+      padding-inline: calc(0.25rem * 2.5 - var(--border, 1px));
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .badge.badge-responsive {
+      --size: calc(var(--size-selector, 0.25rem) * 6);
+      font-size: 0.875rem;
+      padding-inline: calc(0.25rem * 3 - var(--border, 1px));
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .badge.badge-responsive {
+      --size: calc(var(--size-selector, 0.25rem) * 7);
+      font-size: 1rem;
+      padding-inline: calc(0.25rem * 3.5 - var(--border, 1px));
+    }
+  }
+
+  .alert {
+    --alert-color: var(--color-base-200);
+    align-items: center;
+    background-color: var(--alert-color);
+    border: var(--border, 1px) solid var(--color-base-300);
+    border-radius: var(--radius-box, 0.75rem);
+    color: var(--color-base-content);
+    display: grid;
+    font-size: 0.875rem;
+    gap: 1rem;
+    grid-auto-flow: column;
+    grid-template-columns: auto;
+    justify-content: start;
+    line-height: 1.25rem;
+    padding-block: 0.75rem;
+    padding-inline: 1rem;
+    place-items: center start;
+    text-align: start;
+  }
+
+  .alert:has(:nth-child(2)) {
+    grid-template-columns: auto minmax(auto, 1fr);
+  }
+
+  .alert.alert-outline {
+    background-color: #0000;
+    border-color: currentColor;
+    box-shadow: none;
+    color: var(--alert-color);
+  }
+
+  .alert.alert-dash {
+    background-color: #0000;
+    border-color: currentColor;
+    border-style: dashed;
+    box-shadow: none;
+    color: var(--alert-color);
+  }
+
+  .alert.alert-soft {
+    background: color-mix(in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100));
+    border-color: color-mix(in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100));
+    color: var(--alert-color, var(--color-base-content));
+  }
+
+  .alert.alert-info {
+    --alert-color: var(--color-info);
+    border-color: var(--color-info);
+    color: var(--color-info-content);
+  }
+
+  .alert.alert-success {
+    --alert-color: var(--color-success);
+    border-color: var(--color-success);
+    color: var(--color-success-content);
+  }
+
+  .alert.alert-warning {
+    --alert-color: var(--color-warning);
+    border-color: var(--color-warning);
+    color: var(--color-warning-content);
+  }
+
+  .alert.alert-error {
+    --alert-color: var(--color-error);
+    border-color: var(--color-error);
+    color: var(--color-error-content);
+  }
+
+  .alert.alert-vertical {
+    grid-auto-flow: row;
+    grid-template-columns: auto;
+    justify-content: center;
+    justify-items: center;
+    text-align: center;
+  }
+
+  .alert.alert-horizontal {
+    grid-auto-flow: column;
+    grid-template-columns: auto;
+    justify-content: start;
+    justify-items: start;
+    text-align: start;
+  }
+
+  .alert.alert-horizontal:has(:nth-child(2)) {
+    grid-template-columns: auto minmax(auto, 1fr);
+  }
+
+  .card {
+    --card-p: 1.5rem;
+    --card-fs: 0.875rem;
+    --cardtitle-fs: 1.125rem;
+    border-radius: var(--radius-box, 0.75rem);
+    display: flex;
+    flex-direction: column;
+    outline: 0 solid #0000;
+    outline-offset: 2px;
+    position: relative;
+    transition: outline-color 0.2s ease-in-out;
+  }
+
+  .card:focus-visible {
+    outline-color: currentColor;
+  }
+
+  .card figure {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+
+  .card :where(figure:first-child) {
+    border-end-end-radius: unset;
+    border-end-start-radius: unset;
+    border-start-end-radius: inherit;
+    border-start-start-radius: inherit;
+    overflow: hidden;
+  }
+
+  .card :where(figure:last-child) {
+    border-end-end-radius: inherit;
+    border-end-start-radius: inherit;
+    border-start-end-radius: unset;
+    border-start-start-radius: unset;
+    overflow: hidden;
+  }
+
+  .card.card-border {
+    border: var(--border, 1px) solid var(--color-base-200);
+  }
+
+  .card.card-dash {
+    border: var(--border, 1px) dashed var(--color-base-200);
+  }
+
+  .card.image-full {
+    display: grid;
+  }
+
+  .card.image-full > * {
+    grid-column-start: 1;
+    grid-row-start: 1;
+  }
+
+  .card.image-full > .card-body {
+    color: var(--color-neutral-content);
+    position: relative;
+  }
+
+  .card.image-full > figure {
+    border-radius: inherit;
+    overflow: hidden;
+  }
+
+  .card.image-full > figure img {
+    filter: brightness(28%);
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .card-title {
+    align-items: center;
+    display: flex;
+    font-size: var(--cardtitle-fs);
+    font-weight: 600;
+    gap: 0.5rem;
+  }
+
+  .card-body {
+    display: flex;
+    flex: auto;
+    flex-direction: column;
+    font-size: var(--card-fs);
+    gap: 0.5rem;
+    padding: var(--card-p);
+  }
+
+  .card-body :where(p) {
+    flex-grow: 1;
+  }
+
+  .card-actions {
+    align-items: flex-start;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .card.card-xs {
+    --card-p: 0.5rem;
+    --card-fs: 0.6875rem;
+    --cardtitle-fs: 0.875rem;
+  }
+
+  .card.card-sm {
+    --card-p: 1rem;
+    --card-fs: 0.75rem;
+    --cardtitle-fs: 1rem;
+  }
+
+  .card.card-md {
+    --card-p: 1.5rem;
+    --card-fs: 0.875rem;
+    --cardtitle-fs: 1.125rem;
+  }
+
+  .card.card-lg {
+    --card-p: 2rem;
+    --card-fs: 1rem;
+    --cardtitle-fs: 1.25rem;
+  }
+
+  .card.card-xl {
+    --card-p: 2.5rem;
+    --card-fs: 1.125rem;
+    --cardtitle-fs: 1.375rem;
+  }
+
+  .card.card-side {
+    align-items: stretch;
+    flex-direction: row;
+  }
+
+  .card.card-side :where(figure:first-child) {
+    border-end-end-radius: unset;
+    border-end-start-radius: inherit;
+    border-start-end-radius: unset;
+    border-start-start-radius: inherit;
+  }
+
+  .card.card-side :where(figure:last-child) {
+    border-end-end-radius: inherit;
+    border-end-start-radius: unset;
+    border-start-end-radius: inherit;
+    border-start-start-radius: unset;
+  }
+
+  .card.card-side :where(figure > *) {
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  .card.card-side-xs {
+    align-items: stretch;
+    flex-direction: row;
+  }
+
+  .card.card-side-xs :where(figure:first-child) {
+    border-end-end-radius: unset;
+    border-end-start-radius: inherit;
+    border-start-end-radius: unset;
+    border-start-start-radius: inherit;
+  }
+
+  .card.card-side-xs :where(figure:last-child) {
+    border-end-end-radius: inherit;
+    border-end-start-radius: unset;
+    border-start-end-radius: inherit;
+    border-start-start-radius: unset;
+  }
+
+  .card.card-side-xs :where(figure > *) {
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .card.card-side-sm {
+      align-items: stretch;
+      flex-direction: row;
+    }
+
+    .card.card-side-sm :where(figure:first-child) {
+      border-end-end-radius: unset;
+      border-end-start-radius: inherit;
+      border-start-end-radius: unset;
+      border-start-start-radius: inherit;
+    }
+
+    .card.card-side-sm :where(figure:last-child) {
+      border-end-end-radius: inherit;
+      border-end-start-radius: unset;
+      border-start-end-radius: inherit;
+      border-start-start-radius: unset;
+    }
+
+    .card.card-side-sm :where(figure > *) {
+      height: 100%;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .card.card-side-md {
+      align-items: stretch;
+      flex-direction: row;
+    }
+
+    .card.card-side-md :where(figure:first-child) {
+      border-end-end-radius: unset;
+      border-end-start-radius: inherit;
+      border-start-end-radius: unset;
+      border-start-start-radius: inherit;
+    }
+
+    .card.card-side-md :where(figure:last-child) {
+      border-end-end-radius: inherit;
+      border-end-start-radius: unset;
+      border-start-end-radius: inherit;
+      border-start-start-radius: unset;
+    }
+
+    .card.card-side-md :where(figure > *) {
+      height: 100%;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .card.card-side-lg {
+      align-items: stretch;
+      flex-direction: row;
+    }
+
+    .card.card-side-lg :where(figure:first-child) {
+      border-end-end-radius: unset;
+      border-end-start-radius: inherit;
+      border-start-end-radius: unset;
+      border-start-start-radius: inherit;
+    }
+
+    .card.card-side-lg :where(figure:last-child) {
+      border-end-end-radius: inherit;
+      border-end-start-radius: unset;
+      border-start-end-radius: inherit;
+      border-start-start-radius: unset;
+    }
+
+    .card.card-side-lg :where(figure > *) {
+      height: 100%;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+
+  .tooltip {
+    --tt-bg: var(--color-neutral);
+    --tt-content: var(--color-neutral-content);
+    --tt-off: calc(100% + 0.5rem);
+    --tt-tail: calc(100% + 1px + 0.25rem);
+    display: inline-block;
+    position: relative;
+  }
+
+  .tooltip::before {
+    background-color: var(--tt-bg);
+    border-radius: var(--radius-field, 0.5rem);
+    color: var(--tt-content);
+    content: attr(data-tip);
+    font-size: 0.875rem;
+    line-height: 1.25;
+    max-width: 20rem;
+    opacity: 0;
+    padding-block: 0.25rem;
+    padding-inline: 0.5rem;
+    pointer-events: none;
+    position: absolute;
+    text-align: center;
+    transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
+    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
+    white-space: normal;
+    width: max-content;
+    z-index: 1;
+  }
+
+  .tooltip::after {
+    background-color: var(--tt-bg);
+    content: "";
+    height: 0.25rem;
+    mask-image: var(--mask-tooltip, url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E"));
+    mask-position: -1px 0;
+    mask-repeat: no-repeat;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
+    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
+    width: 0.625rem;
+    z-index: 1;
+  }
+
+  .tooltip::before,
+  .tooltip.tooltip-top::before {
+    inset: auto auto var(--tt-off) 50%;
+  }
+
+  .tooltip::after,
+  .tooltip.tooltip-top::after {
+    inset: auto auto var(--tt-tail) 50%;
+  }
+
+  .tooltip.tooltip-bottom::before {
+    inset: var(--tt-off) auto auto 50%;
+    transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem));
+  }
+
+  .tooltip.tooltip-bottom::after {
+    inset: var(--tt-tail) auto auto 50%;
+    transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem)) rotate(180deg);
+  }
+
+  .tooltip.tooltip-left::before {
+    inset: 50% var(--tt-off) auto auto;
+    transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem)) translateY(-50%);
+  }
+
+  .tooltip.tooltip-left::after {
+    inset: 50% calc(var(--tt-tail) + 1px) auto auto;
+    transform: translateX(var(--tt-pos, 0.25rem)) translateY(-50%) rotate(-90deg);
+  }
+
+  .tooltip.tooltip-right::before {
+    inset: 50% auto auto var(--tt-off);
+    transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem)) translateY(-50%);
+  }
+
+  .tooltip.tooltip-right::after {
+    inset: 50% auto auto calc(var(--tt-tail) + 1px);
+    transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%) rotate(90deg);
+  }
+
+  .tooltip.tooltip-open::before,
+  .tooltip.tooltip-open::after,
+  .tooltip[data-tip]:not([data-tip=""]):hover::before,
+  .tooltip[data-tip]:not([data-tip=""]):hover::after,
+  .tooltip:focus-within::before,
+  .tooltip:focus-within::after {
+    --tt-pos: 0rem;
+    opacity: 1;
+    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .tooltip.tooltip-primary {
+    --tt-bg: var(--color-primary);
+    --tt-content: var(--color-primary-content);
+  }
+
+  .tooltip.tooltip-secondary {
+    --tt-bg: var(--color-secondary);
+    --tt-content: var(--color-secondary-content);
+  }
+
+  .tooltip.tooltip-accent {
+    --tt-bg: var(--color-accent);
+    --tt-content: var(--color-accent-content);
+  }
+
+  .tooltip.tooltip-info {
+    --tt-bg: var(--color-info);
+    --tt-content: var(--color-info-content);
+  }
+
+  .tooltip.tooltip-success {
+    --tt-bg: var(--color-success);
+    --tt-content: var(--color-success-content);
+  }
+
+  .tooltip.tooltip-warning {
+    --tt-bg: var(--color-warning);
+    --tt-content: var(--color-warning-content);
+  }
+
+  .tooltip.tooltip-error {
+    --tt-bg: var(--color-error);
+    --tt-content: var(--color-error-content);
+  }
+
+  .collapse:not(td, tr, colgroup) {
+    visibility: visible;
+  }
+
+  .collapse {
+    border-radius: var(--radius-box, 1rem);
+    display: grid;
+    grid-template-rows: max-content 0fr;
+    isolation: isolate;
+    overflow: hidden;
+    position: relative;
+    transition: grid-template-rows 0.2s;
+    width: 100%;
+  }
+
+  .collapse > input:is([type="checkbox"], [type="radio"]) {
+    appearance: none;
+    grid-column-start: 1;
+    grid-row-start: 1;
+    opacity: 0;
+    padding: 1rem;
+    padding-inline-end: 3rem;
+    transition: background-color 0.2s ease-out;
+    width: 100%;
+    z-index: 1;
+  }
+
+  .collapse-title,
+  .collapse-content {
+    grid-column-start: 1;
+    grid-row-start: 1;
+  }
+
+  .collapse-title {
+    min-height: 1lh;
+    padding: 1rem;
+    padding-inline-end: 3rem;
+    position: relative;
+    transition: background-color 0.2s ease-out;
+    width: 100%;
+  }
+
+  .collapse-content {
+    cursor: unset;
+    grid-row-start: 2;
+    min-height: 0;
+    padding-inline: 1rem;
+    transition: visibility 0.2s, padding 0.2s ease-out, background-color 0.2s ease-out;
+    visibility: hidden;
+  }
+
+  .collapse:where([open], :focus:not(.collapse-close)),
+  .collapse:not(.collapse-close):has(> input:is([type="checkbox"], [type="radio"]):checked),
+  .collapse.collapse-open {
+    grid-template-rows: max-content 1fr;
+  }
+
+  .collapse:where([open], :focus:not(.collapse-close)) > .collapse-content,
+  .collapse:not(.collapse-close):has(> input:is([type="checkbox"], [type="radio"]):checked) > .collapse-content,
+  .collapse.collapse-open > .collapse-content {
+    min-height: fit-content;
+    padding-bottom: 1rem;
+    visibility: visible;
+  }
+
+  .collapse:focus-visible,
+  .collapse:has(> input:is([type="checkbox"], [type="radio"]):focus-visible) {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+  }
+
+  .collapse:not(.collapse-close) > .collapse-title,
+  .collapse:not(.collapse-close) > input[type="checkbox"],
+  .collapse:not(.collapse-close) > input[type="radio"]:not(:checked) {
+    cursor: pointer;
+  }
+
+  .collapse.collapse-arrow > .collapse-title::after {
+    box-shadow: 2px 2px;
+    content: "";
+    height: 0.5rem;
+    inset-inline-end: 1.4rem;
+    pointer-events: none;
+    position: absolute;
+    top: 1.9rem;
+    transform: translateY(-100%) rotate(45deg);
+    transform-origin: 75% 75%;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    width: 0.5rem;
+  }
+
+  .collapse.collapse-arrow:where([open], .collapse-open, :focus:not(.collapse-close)) > .collapse-title::after,
+  .collapse.collapse-arrow:not(.collapse-close):has(> input:is([type="checkbox"], [type="radio"]):checked) > .collapse-title::after {
+    transform: translateY(-50%) rotate(225deg);
+  }
+
+  .collapse.collapse-plus > .collapse-title::after {
+    content: "+";
+    height: 0.5rem;
+    inset-inline-end: 1.4rem;
+    pointer-events: none;
+    position: absolute;
+    top: 0.9rem;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    width: 0.5rem;
+  }
+
+  .collapse.collapse-plus:where([open], .collapse-open, :focus:not(.collapse-close)) > .collapse-title::after,
+  .collapse.collapse-plus:not(.collapse-close):has(> input:is([type="checkbox"], [type="radio"]):checked) > .collapse-title::after {
+    content: "−";
+  }
+
+  .collapse:is(details) {
+    width: 100%;
+  }
+
+  .collapse:is(details) summary {
+    display: block;
+    outline: none;
+    position: relative;
+  }
+
+  .collapse:is(details) summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .breadcrumbs {
+    max-width: 100%;
+    overflow-x: auto;
+    padding-block: 0.5rem;
+  }
+
+  .breadcrumbs > menu,
+  .breadcrumbs > ul,
+  .breadcrumbs > ol {
+    align-items: center;
+    display: flex;
+    min-height: min-content;
+    white-space: nowrap;
+  }
+
+  .breadcrumbs > menu > li,
+  .breadcrumbs > ul > li,
+  .breadcrumbs > ol > li {
+    align-items: center;
+    display: flex;
+  }
+
+  .breadcrumbs > menu > li > *,
+  .breadcrumbs > ul > li > *,
+  .breadcrumbs > ol > li > * {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .breadcrumbs > menu > li > *:hover,
+  .breadcrumbs > ul > li > *:hover,
+  .breadcrumbs > ol > li > *:hover {
+    text-decoration: underline;
+  }
+
+  .breadcrumbs > menu > li + li::before,
+  .breadcrumbs > ul > li + li::before,
+  .breadcrumbs > ol > li + li::before {
+    background-color: #0000;
+    border-right: 1px solid;
+    border-top: 1px solid;
+    content: "";
+    display: block;
+    height: 0.375rem;
+    margin-left: 0.5rem;
+    margin-right: 0.75rem;
+    opacity: 0.4;
+    rotate: 45deg;
+    width: 0.375rem;
+  }
+
+  [dir="rtl"] .breadcrumbs > menu > li + li::before,
+  [dir="rtl"] .breadcrumbs > ul > li + li::before,
+  [dir="rtl"] .breadcrumbs > ol > li + li::before {
+    rotate: -135deg;
+  }
+
+  .navbar {
+    align-items: center;
+    display: flex;
+    min-height: 4rem;
+    padding: 0.5rem;
+    width: 100%;
+  }
+
+  .navbar-start {
+    align-items: center;
+    display: inline-flex;
+    justify-content: flex-start;
+    width: 50%;
+  }
+
+  .navbar-center {
+    align-items: center;
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  .navbar-end {
+    align-items: center;
+    display: inline-flex;
+    justify-content: flex-end;
+    width: 50%;
+  }
+
+  .navbar-stack {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .rounded-box {
+    border-radius: var(--radius-box, 0.75rem);
+  }
+
+  .rounded-field {
+    border-radius: var(--radius-field, 0.5rem);
+  }
+
+  .rounded-btn {
+    border-radius: var(--radius-field, 0.5rem);
+  }
+
+  .bg-primary-focus {
+    background-color: color-mix(in oklch, var(--color-primary) 90%, black);
+  }
+
+}
+
+@layer utilities {
+  @media (hover: hover) {
+    .btn.btn:hover {
+      --btn-bg: var(--btn-hover-bg);
+      --btn-color: var(--btn-hover-color);
+      --btn-fg: var(--btn-hover-color);
+      --btn-border: var(--btn-hover-border);
+    }
+  }
+}