@layer base {
  /* CSS Variables for portal-based components */
  :root {
    /* Light mode colors */
    --blario-background: 0 0% 100%;
    --blario-foreground: 222.2 84% 4.9%;
    --blario-card: 0 0% 100%;
    --blario-card-foreground: 222.2 84% 4.9%;
    --blario-popover: 0 0% 100%;
    --blario-popover-foreground: 222.2 84% 4.9%;
    --blario-primary: 222.2 47.4% 11.2%;
    --blario-primary-foreground: 210 40% 98%;
    --blario-secondary: 210 40% 96.1%;
    --blario-secondary-foreground: 222.2 47.4% 11.2%;
    --blario-muted: 210 40% 96.1%;
    --blario-muted-foreground: 215.4 16.3% 46.9%;
    --blario-accent: 210 40% 96.1%;
    --blario-accent-foreground: 222.2 47.4% 11.2%;
    --blario-destructive: 0 84.2% 60.2%;
    --blario-destructive-foreground: 210 40% 98%;
    --blario-border: 214.3 31.8% 91.4%;
    --blario-input: 214.3 31.8% 91.4%;
    --blario-ring: 222.2 84% 4.9%;
    --blario-radius: 0.5rem;
  }

  /* Dark mode support for :root */
  :root.dark,
  .blario-root .dark {
    --blario-background: 222.2 84% 4.9%;
    --blario-foreground: 210 40% 98%;
    --blario-card: 222.2 84% 4.9%;
    --blario-card-foreground: 210 40% 98%;
    --blario-popover: 222.2 84% 4.9%;
    --blario-popover-foreground: 210 40% 98%;
    --blario-primary: 210 40% 98%;
    --blario-primary-foreground: 222.2 47.4% 11.2%;
    --blario-secondary: 217.2 32.6% 17.5%;
    --blario-secondary-foreground: 210 40% 98%;
    --blario-muted: 217.2 32.6% 17.5%;
    --blario-muted-foreground: 215 20.2% 65.1%;
    --blario-accent: 217.2 32.6% 17.5%;
    --blario-accent-foreground: 210 40% 98%;
    --blario-destructive: 0 62.8% 30.6%;
    --blario-destructive-foreground: 210 40% 98%;
    --blario-border: 217.2 32.6% 17.5%;
    --blario-input: 217.2 32.6% 17.5%;
    --blario-ring: 212.7 26.8% 83.9%;
  }

  /* CSS Variables for the Blario components */
  .blario-root .blario-wrapper {
  /* Light mode colors */
  --blario-background: 0 0% 100%;
  --blario-foreground: 222.2 84% 4.9%;
  --blario-card: 0 0% 100%;
  --blario-card-foreground: 222.2 84% 4.9%;
  --blario-popover: 0 0% 100%;
  --blario-popover-foreground: 222.2 84% 4.9%;
  --blario-primary: 222.2 47.4% 11.2%;
  --blario-primary-foreground: 210 40% 98%;
  --blario-secondary: 210 40% 96.1%;
  --blario-secondary-foreground: 222.2 47.4% 11.2%;
  --blario-muted: 210 40% 96.1%;
  --blario-muted-foreground: 215.4 16.3% 46.9%;
  --blario-accent: 210 40% 96.1%;
  --blario-accent-foreground: 222.2 47.4% 11.2%;
  --blario-destructive: 0 84.2% 60.2%;
  --blario-destructive-foreground: 210 40% 98%;
  --blario-border: 214.3 31.8% 91.4%;
  --blario-input: 214.3 31.8% 91.4%;
  --blario-ring: 222.2 84% 4.9%;
  --blario-radius: 0.5rem;
}

/* Dark mode support */
.blario-root .blario-wrapper.dark,
.blario-root .dark .blario-wrapper {
  --blario-background: 222.2 84% 4.9%;
  --blario-foreground: 210 40% 98%;
  --blario-card: 222.2 84% 4.9%;
  --blario-card-foreground: 210 40% 98%;
  --blario-popover: 222.2 84% 4.9%;
  --blario-popover-foreground: 210 40% 98%;
  --blario-primary: 210 40% 98%;
  --blario-primary-foreground: 222.2 47.4% 11.2%;
  --blario-secondary: 217.2 32.6% 17.5%;
  --blario-secondary-foreground: 210 40% 98%;
  --blario-muted: 217.2 32.6% 17.5%;
  --blario-muted-foreground: 215 20.2% 65.1%;
  --blario-accent: 217.2 32.6% 17.5%;
  --blario-accent-foreground: 210 40% 98%;
  --blario-destructive: 0 62.8% 30.6%;
  --blario-destructive-foreground: 210 40% 98%;
  --blario-border: 217.2 32.6% 17.5%;
  --blario-input: 217.2 32.6% 17.5%;
  --blario-ring: 212.7 26.8% 83.9%;
  }
}

@layer utilities {
  /* Text color utilities */
  .blario-root .text-foreground {
    color: hsl(var(--blario-foreground));
  }
  .blario-root .text-muted-foreground {
    color: hsl(var(--blario-muted-foreground));
  }
  .blario-root .text-card-foreground {
    color: hsl(var(--blario-card-foreground));
  }
  .blario-root .text-popover-foreground {
    color: hsl(var(--blario-popover-foreground));
  }
  .blario-root .text-primary-foreground {
    color: hsl(var(--blario-primary-foreground));
  }
  .blario-root .text-secondary-foreground {
    color: hsl(var(--blario-secondary-foreground));
  }
  .blario-root .text-accent-foreground {
    color: hsl(var(--blario-accent-foreground));
  }
  .blario-root .text-destructive-foreground {
    color: hsl(var(--blario-destructive-foreground));
  }

  /* Background color utilities */
  .blario-root .bg-background {
    background-color: hsl(var(--blario-background));
  }
  .blario-root .bg-foreground {
    background-color: hsl(var(--blario-foreground));
  }
  .blario-root .bg-card {
    background-color: hsl(var(--blario-card));
  }
  .blario-root .bg-popover {
    background-color: hsl(var(--blario-popover));
  }
  .blario-root .bg-primary {
    background-color: hsl(var(--blario-primary));
  }
  .blario-root .bg-secondary {
    background-color: hsl(var(--blario-secondary));
  }
  .blario-root .bg-muted {
    background-color: hsl(var(--blario-muted));
  }
  .blario-root .bg-accent {
    background-color: hsl(var(--blario-accent));
  }
  .blario-root .bg-destructive {
    background-color: hsl(var(--blario-destructive));
  }

  /* Border color utilities */
  .blario-root .border-border {
    border-color: hsl(var(--blario-border));
  }
  .blario-root .border-input {
    border-color: hsl(var(--blario-input));
  }
  .blario-root .border-ring {
    border-color: hsl(var(--blario-ring));
  }
  .blario-root .border-primary {
    border-color: hsl(var(--blario-primary));
  }
  .blario-root .border-secondary {
    border-color: hsl(var(--blario-secondary));
  }
  .blario-root .border-destructive {
    border-color: hsl(var(--blario-destructive));
  }
  .blario-root .border-muted {
    border-color: hsl(var(--blario-muted));
  }

  /* Ring color utilities */
  .blario-root .ring-ring {
    --tw-ring-color: hsl(var(--blario-ring));
  }
  .blario-root .ring-primary {
    --tw-ring-color: hsl(var(--blario-primary));
  }
  .blario-root .ring-destructive {
    --tw-ring-color: hsl(var(--blario-destructive));
  }

  /* Placeholder utilities */
  .blario-root .placeholder\:text-muted-foreground::-moz-placeholder {
    color: hsl(var(--blario-muted-foreground));
  }
  .blario-root .placeholder\:text-muted-foreground::placeholder {
    color: hsl(var(--blario-muted-foreground));
  }

  /* Focus visible utilities */
  .blario-root .focus-visible\:border-ring:focus-visible {
    border-color: hsl(var(--blario-ring));
  }

  .blario-root .focus-visible\:ring-ring\/50:focus-visible {
    --tw-ring-color: hsl(var(--blario-ring) / 0.5);
  }

  /* Aria invalid utilities */
  .blario-root .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
    --tw-ring-color: hsl(var(--blario-destructive) / 0.2);
  }

  .blario-root .aria-invalid\:border-destructive[aria-invalid="true"] {
    border-color: hsl(var(--blario-destructive));
  }

  /* Dark mode utilities */
  .blario-root .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
    --tw-ring-color: hsl(var(--blario-destructive) / 0.4);
  }

  .blario-root .dark\:bg-input\/30:is(.dark *) {
    background-color: hsl(var(--blario-input) / 0.3);
  }

  /* Selection utilities */
  .blario-root .selection\:bg-primary::-moz-selection {
    background-color: hsl(var(--blario-primary));
  }
  .blario-root .selection\:bg-primary::selection {
    background-color: hsl(var(--blario-primary));
  }

  .blario-root .selection\:text-primary-foreground::-moz-selection {
    color: hsl(var(--blario-primary-foreground));
  }

  .blario-root .selection\:text-primary-foreground::selection {
    color: hsl(var(--blario-primary-foreground));
  }

  /* File utilities */
  .blario-root .file\:text-foreground::file-selector-button {
    color: hsl(var(--blario-foreground));
  }

  /* Spacing utilities using Tailwind defaults but custom values */
  .blario-root .h-7 {
    height: 1.75rem;
  }
  .blario-root .h-9 {
    height: 2.25rem;
  }
  .blario-root .h-10 {
    height: 2.5rem;
  }
  .blario-root .h-11 {
    height: 2.75rem;
  }
  .blario-root .h-16 {
    height: 4rem;
  }
  .blario-root .h-24 {
    height: 6rem;
  }
  .blario-root .min-h-16 {
    min-height: 4rem;
  }
  .blario-root .w-4 {
    width: 1rem;
  }
  .blario-root .w-5 {
    width: 1.25rem;
  }
  .blario-root .w-6 {
    width: 1.5rem;
  }
  .blario-root .min-w-0 {
    min-width: 0;
  }
  .blario-root .max-w-lg {
    max-width: 32rem;
  }
  .blario-root .max-w-2xl {
    max-width: 42rem;
  }

  /* Gap utilities */
  .blario-root .gap-1 {
    gap: 0.25rem;
  }
  .blario-root .gap-2 {
    gap: 0.5rem;
  }
  .blario-root .gap-4 {
    gap: 1rem;
  }

  /* Padding utilities */
  .blario-root .p-1 {
    padding: 0.25rem;
  }
  .blario-root .p-2 {
    padding: 0.5rem;
  }
  .blario-root .p-4 {
    padding: 1rem;
  }
  .blario-root .p-6 {
    padding: 1.5rem;
  }
  .blario-root .px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .blario-root .px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .blario-root .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .blario-root .px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .blario-root .py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .blario-root .py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }
  .blario-root .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .blario-root .py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .blario-root .pb-4 {
    padding-bottom: 1rem;
  }
  .blario-root .pb-6 {
    padding-bottom: 1.5rem;
  }
  .blario-root .pt-0 {
    padding-top: 0;
  }

  /* Text utilities */
  .blario-root .text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
  .blario-root .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .blario-root .text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .blario-root .text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .blario-root .text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  .blario-root .text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .blario-root .font-medium {
    font-weight: 500;
  }
  .blario-root .font-semibold {
    font-weight: 600;
  }
  .blario-root .font-bold {
    font-weight: 700;
  }

  /* Border radius utilities */
  .blario-root .rounded-md {
    border-radius: calc(var(--blario-radius) - 2px);
  }
  .blario-root .rounded-lg {
    border-radius: var(--blario-radius);
  }
  .blario-root .rounded-sm {
    border-radius: calc(var(--blario-radius) - 4px);
  }

  /* Shadow utilities */
  .blario-root .shadow-xs {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }
  .blario-root .shadow-sm {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  }
  .blario-root .shadow-md {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  }
  .blario-root .shadow-lg {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  }

  /* Flex direction utilities */
  .blario-root .flex-row {
    flex-direction: row;
  }
  .blario-root .flex-col {
    flex-direction: column;
  }

  /* Flex alignment utilities */
  .blario-root .items-center {
    align-items: center;
  }
  .blario-root .justify-start {
    justify-content: flex-start;
  }
  .blario-root .justify-end {
    justify-content: flex-end;
  }
  .blario-root .justify-between {
    justify-content: space-between;
  }
  .blario-root .justify-center {
    justify-content: center;
  }

  /* Display utilities */
  .blario-root .flex {
    display: flex;
  }
  .blario-root .inline-flex {
    display: inline-flex;
  }
  .blario-root .grid {
    display: grid;
  }
  .blario-root .block {
    display: block;
  }
  .blario-root .hidden {
    display: none;
  }

  /* Grid utilities */
  .blario-root .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Position utilities */
  .blario-root .fixed {
    position: fixed;
  }
  .blario-root .absolute {
    position: absolute;
  }
  .blario-root .relative {
    position: relative;
  }

  /* Inset utilities */
  .blario-root .inset-0 {
    inset: 0;
  }
  .blario-root .top-0 {
    top: 0;
  }
  .blario-root .top-4 {
    top: 1rem;
  }
  .blario-root .right-0 {
    right: 0;
  }
  .blario-root .right-4 {
    right: 1rem;
  }
  .blario-root .bottom-4 {
    bottom: 1rem;
  }
  .blario-root .left-0 {
    left: 0;
  }
  .blario-root .left-4 {
    left: 1rem;
  }
  .blario-root .left-\[50\%\] {
    left: 50%;
  }
  .blario-root .top-\[50\%\] {
    top: 50%;
  }

  /* Transform utilities */
  .blario-root .translate-x-\[-50\%\] {
    transform: translateX(-50%);
  }
  .blario-root .translate-y-\[-50\%\] {
    transform: translateY(-50%);
  }
  .blario-root .-translate-x-1\/2 {
    transform: translateX(-50%);
  }
  .blario-root .-translate-y-1\/2 {
    transform: translateY(-50%);
  }

  /* Z-index utilities */
  .blario-root .z-50 {
    z-index: 50;
  }

  /* Size utilities */
  .blario-root .h-4 {
    height: 1rem;
  }
  .blario-root .h-5 {
    height: 1.25rem;
  }
  .blario-root .h-6 {
    height: 1.5rem;
  }
  .blario-root .h-8 {
    height: 2rem;
  }
  .blario-root .h-14 {
    height: 3.5rem;
  }
  .blario-root .w-4 {
    width: 1rem;
  }
  .blario-root .w-10 {
    width: 2.5rem;
  }
  .blario-root .w-14 {
    width: 3.5rem;
  }
  .blario-root .w-full {
    width: 100%;
  }
  .blario-root .size-9 {
    width: 2.25rem;
    height: 2.25rem;
  }

  /* Flex utilities */
  .blario-root .flex-1 {
    flex: 1 1 0%;
  }
  .blario-root .flex-shrink-0 {
    flex-shrink: 0;
  }
  .blario-root .shrink-0 {
    flex-shrink: 0;
  }

  /* Spacing - Margin */
  .blario-root .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .blario-root .ml-4 {
    margin-left: 1rem;
  }
  .blario-root .mb-1 {
    margin-bottom: 0.25rem !important;
  }
  .blario-root .mb-3 {
    margin-bottom: 0.75rem !important;
  }
  .blario-root .mb-2 {
    margin-bottom: 0.5rem !important;
  }
  .blario-root .mb-4 {
    margin-bottom: 1rem !important;
  }
  .blario-root .mb-8 {
    margin-bottom: 2rem !important;
  }
  .blario-root .mt-4 {
    margin-top: 1rem !important;
  }
  .blario-root .mt-8 {
    margin-top: 2rem !important;
  }

  /* Spacing - Space between */
  .blario-root .space-y-2 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.5rem;
  }
  .blario-root .space-y-3 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.75rem;
  }
  .blario-root .space-y-4 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1rem;
  }
  .blario-root .space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1.5rem;
  }
  .blario-root .space-y-8 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 2rem;
  }

  /* Gap utilities */
  .blario-root .gap-3 {
    gap: 0.75rem;
  }
  .blario-root .gap-6 {
    gap: 1.5rem;
  }

  /* Padding utilities */
  .blario-root .p-1 {
    padding: 0.25rem;
  }
  .blario-root .p-3 {
    padding: 0.75rem;
  }
  .blario-root .p-6 {
    padding: 1.5rem;
  }
  .blario-root .p-8 {
    padding: 2rem;
  }
  .blario-root .pt-4 {
    padding-top: 1rem;
  }
  .blario-root .pt-6 {
    padding-top: 1.5rem;
  }
  .blario-root .pt-8 {
    padding-top: 2rem;
  }

  /* Border utilities */
  .blario-root .border {
    border-width: 1px;
  }
  .blario-root .border-2 {
    border-width: 2px;
  }
  .blario-root .border-t {
    border-top-width: 1px;
  }
  .blario-root .border-dashed {
    border-style: dashed;
  }

  /* Border radius utilities */
  .blario-root .rounded {
    border-radius: 0.25rem;
  }
  .blario-root .rounded-xl {
    border-radius: 0.75rem;
  }
  .blario-root .rounded-full {
    border-radius: 9999px;
  }
  .blario-root .rounded-sm {
    border-radius: calc(var(--blario-radius) - 4px);
  }

  /* Background utilities */
  .blario-root .bg-transparent {
    background-color: transparent;
  }
  .blario-root .bg-blue-600 {
    background-color: rgb(37 99 235);
  }
  .blario-root .bg-blue-700 {
    background-color: rgb(29 78 216);
  }
  .blario-root .bg-red-50 {
    background-color: rgb(254 242 242);
  }
  .blario-root .bg-muted\/5 {
    background-color: hsl(var(--blario-muted) / 0.05);
  }
  .blario-root .bg-muted\/10 {
    background-color: hsl(var(--blario-muted) / 0.1);
  }
  .blario-root .bg-muted\/30 {
    background-color: hsl(var(--blario-muted) / 0.3);
  }
  .blario-root .bg-black\/80 {
    background-color: rgb(0 0 0 / 0.8);
  }

  /* Border color utilities */
  .blario-root .border-red-200 {
    border-color: rgb(254 202 202);
  }
  .blario-root .border-muted\/20 {
    border-color: hsl(var(--blario-muted) / 0.2);
  }
  .blario-root .border-muted\/40 {
    border-color: hsl(var(--blario-muted) / 0.4);
  }

  /* Text color utilities */
  .blario-root .text-white {
    color: rgb(255 255 255);
  }
  .blario-root .text-red-600 {
    color: rgb(220 38 38);
  }
  .blario-root .text-destructive {
    color: hsl(var(--blario-destructive));
  }

  /* Typography utilities */
  .blario-root .leading-none {
    line-height: 1;
  }
  .blario-root .leading-relaxed {
    line-height: 1.625;
  }
  .blario-root .text-center {
    text-align: center;
  }
  .blario-root .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .blario-root .whitespace-nowrap {
    white-space: nowrap;
  }

  /* Interactivity utilities */
  .blario-root .cursor-not-allowed {
    cursor: not-allowed;
  }
  .blario-root .pointer-events-none {
    pointer-events: none;
  }
  .blario-root .select-none {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

  /* Opacity utilities */
  .blario-root .opacity-50 {
    opacity: 0.5;
  }
  .blario-root .opacity-70 {
    opacity: 0.7;
  }
  .blario-root .opacity-90 {
    opacity: 0.9;
  }

  /* Outline utilities */
  .blario-root .outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  /* Overflow utilities */
  .blario-root .overflow-hidden {
    overflow: hidden;
  }

  /* Transition utilities */
  .blario-root .transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .blario-root .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .blario-root .transition-\[color\,box-shadow\] {
    transition-property: color, box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .blario-root .duration-200 {
    transition-duration: 200ms;
  }

  /* Hover utilities */
  .blario-root .hover\:bg-accent:hover {
    background-color: hsl(var(--blario-accent));
  }
  .blario-root .hover\:bg-blue-700:hover {
    background-color: rgb(29 78 216);
  }
  .blario-root .hover\:bg-primary\/90:hover {
    background-color: hsl(var(--blario-primary) / 0.9);
  }
  .blario-root .hover\:text-accent-foreground:hover {
    color: hsl(var(--blario-accent-foreground));
  }
  .blario-root .hover\:text-destructive:hover {
    color: hsl(var(--blario-destructive));
  }
  .blario-root .hover\:opacity-100:hover {
    opacity: 1;
  }
  .blario-root .hover\:border-muted\/60:hover {
    border-color: hsl(var(--blario-muted) / 0.6);
  }
  .blario-root .hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  }

  /* Dark mode hover utilities */
  .blario-root .dark\:hover\:bg-input\/50:is(.dark *):hover {
    background-color: hsl(var(--blario-input) / 0.5);
  }
  .blario-root .dark\:hover\:bg-accent\/50:is(.dark *):hover {
    background-color: hsl(var(--blario-accent) / 0.5);
  }

  /* Focus utilities */
  .blario-root .focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  .blario-root .focus\:ring-2:focus {
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);
    --tw-ring-shadow: 0 0 0 2px var(--tw-ring-color);
  }
  .blario-root .focus\:ring-ring:focus {
    --tw-ring-color: hsl(var(--blario-ring));
  }
  .blario-root .focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
  }

  /* Focus-visible utilities */
  .blario-root .focus-visible\:ring-\[3px\]:focus-visible {
    --tw-ring-shadow: 0 0 0 3px var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }

  /* Disabled utilities */
  .blario-root .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }
  .blario-root .disabled\:opacity-50:disabled {
    opacity: 0.5;
  }

  /* Accessibility utilities */
  .blario-root .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* Field sizing */
  .blario-root .field-sizing-content {
    field-sizing: content;
  }

  /* Max width utilities */
  .blario-root .max-w-7xl {
    max-width: 80rem;
  }

  /* Responsive utilities */
  @media (min-width: 640px) {
    .blario-root .sm\:text-left {
      text-align: left;
    }
    .blario-root .sm\:gap-3 {
      gap: 0.75rem;
    }
    .blario-root .sm\:rounded-lg {
      border-radius: var(--blario-radius);
    }
  }

  @media (min-width: 768px) {
    .blario-root .md\:text-sm {
      font-size: 0.875rem;
      line-height: 1.25rem;
    }
  }

  /* Data attribute utilities for animations */
  .blario-root .data-\[state\=open\]\:animate-in[data-state="open"] {
    animation: fadeIn 200ms ease-out;
  }
  .blario-root .data-\[state\=closed\]\:animate-out[data-state="closed"] {
    animation: fadeOut 200ms ease-in;
  }
  .blario-root .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
    opacity: 0;
  }
  .blario-root .data-\[state\=open\]\:fade-in-0[data-state="open"] {
    opacity: 1;
  }
  .blario-root .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
    transform: scale(0.95);
  }
  .blario-root .data-\[state\=open\]\:zoom-in-95[data-state="open"] {
    transform: scale(1);
  }
  .blario-root .data-\[state\=open\]\:bg-accent[data-state="open"] {
    background-color: hsl(var(--blario-accent));
  }
  .blario-root .data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
    color: hsl(var(--blario-muted-foreground));
  }

  /* Ring offset */
  .blario-root .ring-offset-background {
    --tw-ring-offset-color: hsl(var(--blario-background));
  }

  /* Keyframes */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
}

/* High z-index for modal components */
.blario-root .blario-wrapper [role="dialog"] {
  z-index: 10000;
}

.blario-root .blario-wrapper [data-radix-popper-content-wrapper] {
  z-index: 10001;
}