@import "https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap";/* Claire chat shell — design-system-aligned styling for the chat panel, the
   layout state machine (full-screen ↔ docked), composer, and messages.
   Uses logical properties (inset-inline / margin-inline) so RTL flips cleanly. */

/* Transitional bridge: this feature was written against the pre-refactor design
   tokens. The Tailwind/shadcn refactor removed those, so we map the names this
   stylesheet still uses onto the new shadcn variables — scoped to the chat
   subtree. Remove once the chat surface is ported to Tailwind utilities. */
.chat-surface {
    --border-default: var(--border);
    --text-primary: var(--foreground);
    --text-secondary: var(--muted-foreground);
    --text-tertiary: var(--muted-foreground);
    --surface-sunken: var(--muted);
    --surface-card: var(--card);
    --accent: var(--primary);
    --slate-800: #1e293b;
    --slate-400: #94a3b8;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-2xl: 1.5rem;
    --leading-relaxed: 1.625;
    --radius-md: 0.5rem;
    --radius-lg: 0.5rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
}

/* The typing-indicator dots animate with this keyframe (previously in base.css). */
@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

.chat-surface {
    display: flex;
    height: 100%;
    width: 100%;
    min-height: 0;
}

.chat-surface__chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    /* Sized by flex-basis (not flex-grow) so the full-screen ↔ docked switch is
       a single animatable length: 100% when full, 340px when docked. The sibling
       content pane (flex: 1) fills whatever this leaves, so animating the basis
       glides the chat from full width down to the dock and back. */
    flex: 0 0 100%;
    min-width: 0;
    font-family: var(--font-sans);
    transition: flex-basis 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* When a tool renders content beside the chat (Insights docked), the chat
   column becomes a fixed-width dock and the content fills the rest. */
.chat-surface--split .chat-surface__chat {
    flex: 0 0 340px;
}

/* Respect users who ask for reduced motion: snap instead of gliding. */
@media (prefers-reduced-motion: reduce) {
    .chat-surface__chat {
        transition: none;
    }
}

/* ===== Desktop/tablet collapsible + resizable dock (content-primary) =====
   The panel is a flex item in the module's row; ChatSurface drives its width
   inline (the tab width when collapsed, the chosen width when open). Collapsed it
   renders a slim full-height vertical tab; open, an edge handle resizes it and a
   narrow drag re-collapses. Disabled on phones — the slide-up sheet is used. */
.chat-surface--dockable {
    position: relative;
    height: 100%;
    transition:
        flex-basis 320ms cubic-bezier(0.4, 0, 0.2, 1),
        width 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-surface--dockable.is-dragging {
    cursor: col-resize;
    user-select: none;
}

/* Collapsed: center the small tab vertically rather than filling the rail. */
.chat-surface--dockable.is-collapsed {
    align-items: center;
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
    .chat-surface--dockable {
        transition: none;
    }
}

/* Collapsed: a small vertical "folder tab", rounded on the content-facing edge,
   that the user clicks — or drags toward the content — to reveal the panel. */
.chat-surface__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 11px 0;
    /* Pulled 1px toward the rail so the tab's leading border sits on top of the
       nav's trailing border instead of doubling up beside it. */
    margin-inline-start: -1px;
    border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--surface-card));
    border-start-end-radius: var(--radius-lg);
    border-end-end-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--accent) 8%, var(--surface-card));
    color: var(--accent);
    cursor: pointer;
    /* We own the horizontal drag-to-reveal gesture; don't let touch devices treat
       it as a scroll/pan. */
    touch-action: none;
    user-select: none;
    transition: background 160ms ease;
}

.chat-surface__tab:hover {
    background: color-mix(in oklab, var(--accent) 14%, var(--surface-card));
}

.chat-surface__tab-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.chat-surface__tab-caret {
    opacity: 0.55;
}

/* Open: an invisible grab strip on the trailing edge (col-resize cursor) with a
   hairline that tints on hover/drag to reveal the handle. */
.chat-surface__resizer {
    position: absolute;
    inset-block: 0;
    inset-inline-end: -4px;
    width: 10px;
    z-index: 5;
    cursor: col-resize;
    touch-action: none;
}

.chat-surface__resizer::after {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-end: 4px;
    width: 2px;
    background: transparent;
    transition: background 160ms ease;
}

.chat-surface__resizer:hover::after,
.chat-surface--dockable.is-dragging .chat-surface__resizer::after {
    background: var(--accent);
}

.chat-surface__content {
    flex: 1;
    min-width: 0;
    overflow: auto;
    border-inline-start: 1px solid var(--border-default);
}

/* ===== Dock inside a chat-primary surface (Insights docked) =====
   Here the surface holds BOTH the chat column and the content pane, so the dock
   sizes the inner column (ChatSurface applies the width inline) and the content
   fills the rest — unlike content-primary, where the whole surface is the dock.
   Two things differ from the content-primary dock and must be corrected. */

/* 1. The resize handle must sit on the column↔content seam, not the surface's
      far edge. Take it out of the absolute (root-relative) flow and drop it in
      as a zero-net-width flex item straddling the boundary between the two. */
.chat-surface--dock-in-surface .chat-surface__resizer {
    position: relative;
    inset-inline-end: auto;
    align-self: stretch;
    flex: 0 0 auto;
    width: 8px;
    margin-inline: -4px;
    z-index: 5;
}

.chat-surface--dock-in-surface .chat-surface__resizer::after {
    /* Centre the hairline within the 8px strip. */
    inset-inline-end: 3px;
}

/* 2. Collapsed, the content pane sits beside the tab. Keep the tab exactly like
      Labs/Developers — the shared `.chat-surface--dockable.is-collapsed` rule
      already centers it as a small tab — and only stop that centering from
      shrinking the content pane: stretch just the pane back to full height. */
.chat-surface--dock-in-surface.is-collapsed .chat-surface__content {
    align-self: stretch;
}

/* 3. No static divider between the chat column and the content pane - the
      resize handle's hairline (on hover) is the seam. This border only ever
      showed in Insights, since `.chat-surface__content` is used nowhere else. */
.chat-surface--dock-in-surface .chat-surface__content {
    border-inline-start: none;
}

/* Conversation column is centered + width-capped in the full-screen layout.
   The header rides the same rail so Claire's brand + actions line up with the
   left/right edges of the chat panel instead of the full viewport width. */
.chat-surface--full .chat-messages,
.chat-surface--full .chat-surface__header,
.chat-surface--full .chat-surface__chat>.chat-composer--inline {
    max-width: 720px;
    width: 100%;
    margin-inline: auto;
}

/* First-message "stretch": the centered empty state swaps to the conversation
   view (messages + bottom composer) the instant the first message is sent. Those
   two elements mount fresh, so an entrance animation fires once — the messages
   rise up to the top and the composer settles down to the bottom, so the panel
   reads as stretching open rather than snapping. No fade: the motion itself is
   the point, so the elements stay fully opaque and you see them travel apart.
   Scoped to --full so it only plays for the Insights chat-primary flow, not
   Labs' always-docked panel. */
@keyframes chat-messages-rise {
    from {
        transform: translateY(40px);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes chat-composer-settle {
    from {
        transform: translateY(-40px);
    }

    to {
        transform: translateY(0);
    }
}

.chat-surface--full .chat-messages {
    animation: chat-messages-rise 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.chat-surface--full .chat-surface__chat>.chat-composer--inline {
    animation: chat-composer-settle 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {

    .chat-surface--full .chat-messages,
    .chat-surface--full .chat-surface__chat>.chat-composer--inline {
        animation: none;
    }
}

/* Header bar: Claire brand on the lead edge, actions on the trailing edge.
   A real flex row (not an overlay) so it never covers the greeting/messages. */
.chat-surface__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* Top padding matches the module content's p-6 (24px) so the Claire header
       lines up with the content title (e.g. "Lab Reports"). */
    padding: 24px 12px 10px;
    flex-shrink: 0;
}

.chat-surface__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.chat-surface__brand svg {
    color: var(--accent);
}

.chat-surface__tools {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Keep the actions on the trailing edge even when the brand is hidden
       (the initial empty screen), where it's the header's only child. */
    margin-inline-start: auto;
}

.chat-surface__tool {
    display: flex;
    padding: 4px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
}

.chat-surface__tool:hover {
    color: var(--text-primary);
}

/* ===== Messages ===== */
.chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.chat-msg {
    display: flex;
}

.chat-msg--ai {
    justify-content: flex-start;
}

.chat-msg--user {
    justify-content: flex-end;
}

.chat-msg__avatar {
    width: 24px;
    height: 24px;
    margin-inline-end: 12px;
    margin-top: 2px;
    flex-shrink: 0;
    color: var(--text-primary);
}

.chat-msg__body {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
}

/* ===== Markdown rendering for Claire replies ===== */
.chat-md {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
    word-break: break-word;
}

.chat-md> :first-child {
    margin-top: 0;
}

.chat-md> :last-child {
    margin-bottom: 0;
}

.chat-md p {
    margin: 0 0 8px;
}

.chat-md ul,
.chat-md ol {
    margin: 0 0 8px;
    padding-inline-start: 20px;
}

.chat-md li {
    margin: 2px 0;
}

.chat-md li>p {
    margin: 0;
}

.chat-md strong {
    font-weight: var(--font-weight-semibold);
}

.chat-md a {
    color: var(--accent);
    text-decoration: underline;
}

.chat-md code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
    background: var(--surface-sunken);
    padding: 1px 4px;
    border-radius: 4px;
}

.chat-md pre {
    background: var(--surface-sunken);
    padding: 10px 12px;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 0 0 8px;
}

.chat-md pre code {
    background: none;
    padding: 0;
}

.chat-md h1,
.chat-md h2,
.chat-md h3,
.chat-md h4 {
    margin: 12px 0 6px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
}

.chat-md h1 {
    font-size: 1.15em;
}

.chat-md h2 {
    font-size: 1.1em;
}

.chat-md h3 {
    font-size: 1em;
}

.chat-md blockquote {
    margin: 0 0 8px;
    padding-inline-start: 12px;
    border-inline-start: 3px solid var(--border-default);
    color: var(--text-secondary);
}

.chat-md table {
    border-collapse: collapse;
    margin: 0 0 8px;
    font-size: var(--text-xs);
}

.chat-md th,
.chat-md td {
    border: 1px solid var(--border-default);
    padding: 4px 8px;
    text-align: start;
}

.chat-md hr {
    border: none;
    border-top: 1px solid var(--border-default);
    margin: 12px 0;
}

.chat-msg__bubble {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 90%;
    padding: 12px 16px;
    background: var(--surface-sunken);
    border-radius: var(--radius-2xl);
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
}

.chat-msg__smile {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--text-secondary);
}

.chat-msg__cta {
    margin-top: 12px;
}

.chat-msg__cta-button {
    padding: 8px 16px;
    background: var(--slate-800);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.chat-msg__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.chat-msg__attachment {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.chat-typing {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.chat-typing__dots {
    display: flex;
    align-items: center;
    gap: 4px;
}

.chat-typing__dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--slate-400);
    animation: bounce 1s infinite;
}

.chat-typing__dots span:nth-child(2) {
    animation-delay: 150ms;
}

.chat-typing__dots span:nth-child(3) {
    animation-delay: 300ms;
}

.chat-typing__progress {
    font-size: var(--text-xs);
    font-style: italic;
    /* Shimmer sweep across the text (like Claude's thinking labels): a moving
       gradient revealed through the glyphs via background-clip. */
    background: linear-gradient(100deg,
            var(--text-secondary) 35%,
            var(--text-primary) 50%,
            var(--text-secondary) 65%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation:
        chat-typing-shimmer 2.2s linear infinite,
        chat-typing-fade 280ms ease-out;
}

/* Moving highlight for the shimmer. */
@keyframes chat-typing-shimmer {
    from {
        background-position: 150% 0;
    }

    to {
        background-position: -150% 0;
    }
}

/* Each new phrase (keyed remount) fades/slides in, so hand-offs feel alive. */
@keyframes chat-typing-fade {
    from {
        opacity: 0;
        transform: translateY(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-typing__progress {
        animation: none;
        background: none;
        color: var(--text-secondary);
    }
}

/* ===== Empty state (chat-primary, before first message) ===== */
.chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
}

.chat-empty__icon {
    margin-bottom: 8px;
    color: var(--text-tertiary);
}

.chat-empty__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary);
}

.chat-empty__subtitle {
    font-size: var(--text-base);
    color: var(--text-secondary);
}

.chat-empty .chat-composer {
    width: 100%;
    max-width: 640px;
    margin-top: 24px;
}

/* ===== Composer ===== */
.chat-composer {
    padding: 16px;
}

.chat-composer__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.chat-composer__chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
}

.chat-composer__chip-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-composer__chip-remove {
    display: flex;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
}

.chat-composer__field {
    position: relative;
    display: flex;
    align-items: flex-end;
}

.chat-composer__input {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    padding: 12px 48px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-3xl);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
    outline: none;
    resize: none;
    overflow-y: auto;
}

.chat-composer__attach {
    position: absolute;
    inset-inline-start: 8px;
    bottom: 6px;
    display: flex;
    padding: 8px;
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
}

.chat-composer__send {
    position: absolute;
    inset-inline-end: 8px;
    bottom: 6px;
    display: flex;
    padding: 8px;
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
}

.chat-composer__send:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Stop button: a solid accent pill with a filled square, so interrupting Claire
   reads as a distinct, deliberate control (not a greyed-out send). */
.chat-composer__send--stop {
    padding: 6px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--surface-card);
    /* Center the pill vertically instead of bottom-anchoring like the send arrow. */
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

.chat-composer__send--stop:hover {
    background: color-mix(in oklab, var(--accent) 85%, black);
}

.chat-composer__disclaimer {
    margin-top: 12px;
    padding: 0 16px;
    font-size: 10px;
    text-align: center;
    color: var(--text-tertiary);
}

/* ===== Phone: Claire becomes a slide-up bottom sheet over the content =====
   On phones there isn't room for chat and content side by side, so a *docked*
   chat (Labs' side panel, or Insights once a tool has rendered content) lifts
   out of the layout into a sheet that slides up over the full-width content.
   A chat-primary surface with no content yet (`--full`) is left alone — Claire
   is the whole screen there. The `--sheet`/`is-open` classes and the grabber,
   launcher and backdrop elements are added by ChatSurface only in this mode. */
@media (max-width: 767px) {

    /* iOS zooms the whole app in on focus of any field under 16px; keep the
       message box at 16px on phones so tapping it never zooms. */
    .chat-composer__input {
        font-size: 16px;
    }

    /* A content-primary dock (Labs/Developers) is a plain flex item in the
       module's mobile column, and on phones its chat column, launcher and backdrop
       are all position:fixed — so the root itself must not reserve vertical space.
       (Its desktop height:100% would otherwise stretch and shove the content down.)
       Excludes --split, where a rendered content pane still fills the root. */
    .chat-surface--sheet:not(.chat-surface--split) {
        height: 0;
        min-height: 0;
    }

    /* Insights split: the tool content fills the screen as the base layer.
       Reserve space at the bottom for the fixed "Ask Claire" launcher bar so the
       content's last rows aren't hidden behind it (this pane is the scroll
       container, so the padding becomes extra scroll room; matches the launcher
       height + its safe-area padding). */
    .chat-surface--split.chat-surface--sheet .chat-surface__content {
        border-inline-start: none;
        border-block-start: none;
        height: 100%;
        padding-block-end: calc(4rem + env(safe-area-inset-bottom, 0px));
    }

    /* The chat column itself becomes the bottom sheet.
       z-index ceiling: the sheet, its backdrop and the launcher must all sit
       *below* the host's mobile nav drawer (App.css: drawer z-50, dim backdrop
       z-40) so opening the nav always paints over Claire rather than the "Ask
       Claire" pill floating on top of the drawer (or the drawer opening beneath
       the chat backdrop). Kept at 30–36 with the internal order launcher <
       backdrop < sheet; all still paint above the un-positioned module content. */
    .chat-surface--sheet .chat-surface__chat {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 36;
        height: 85dvh;
        max-height: 85dvh;
        background: var(--surface-card);
        border-start-start-radius: var(--radius-3xl);
        border-start-end-radius: var(--radius-3xl);
        box-shadow: 0 -12px 40px rgb(15 23 42 / 0.22);
        transform: translateY(100%);
        transition: transform 300ms ease;
        will-change: transform;
    }

    .chat-surface--sheet.is-open .chat-surface__chat {
        transform: translateY(0);
    }

    /* Sheet top: a drag handle over a centered "Claire", with the tools tucked
       to the trailing edge. The closed-state launcher below reuses the exact same
       look, so the two are indistinguishable and tapping the closed bar reads as
       the sheet growing upward. */
    .chat-surface--sheet .chat-surface__header {
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 10px 16px 12px;
        position: relative;
        /* We handle the vertical drag ourselves; stop the browser treating a
           downward drag on the header as a scroll gesture. */
        touch-action: none;
    }

    .chat-surface--sheet .chat-surface__brand {
        justify-content: center;
    }

    .chat-surface--sheet .chat-surface__tools {
        position: absolute;
        inset-inline-end: 10px;
        bottom: 8px;
    }

    /* The drag handle — a real button in the open sheet (tap or swipe down to
       close) and a decorative span in the closed launcher; identical either way. */
    .chat-surface__handle {
        position: relative;
        display: block;
        width: 44px;
        height: 5px;
        padding: 0;
        border: none;
        border-radius: 999px;
        background: var(--border-default);
        cursor: pointer;
    }

    /* Bigger touch/hit area than the thin bar itself. */
    .chat-surface__handle::before {
        content: '';
        position: absolute;
        inset: -12px -22px;
    }

    /* Dismiss backdrop behind the open sheet. */
    .chat-surface__backdrop {
        position: fixed;
        inset: 0;
        z-index: 34;
        background: rgb(15 23 42 / 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 300ms ease;
    }

    .chat-surface--sheet.is-open .chat-surface__backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* Closed state: a bottom-docked bar mirroring the sheet's top (handle +
       centered "Claire"), shown only while the sheet is closed. */
    .chat-surface__launcher {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 30;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        border: none;
        background: var(--surface-card);
        border-start-start-radius: var(--radius-3xl);
        border-start-end-radius: var(--radius-3xl);
        box-shadow: 0 -10px 30px rgb(15 23 42 / 0.12);
        cursor: pointer;
        /* Capture a vertical swipe on the bar as our open gesture rather than
           letting the browser treat it as a page scroll. */
        touch-action: none;
    }

    .chat-surface--sheet.is-open .chat-surface__launcher {
        display: none;
    }
}/* Auth login-screen animations.
 *
 * The wave is an SVG twice the header's width holding two identical periods; we
 * translate it left by half its width over 6s, so period 2 lands exactly where
 * period 1 began — a seamless loop. This is the web analog of the Flutter
 * skeleton's 6s repeating wave `AnimationController`. */
.auth-wave {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 200%;
    height: 40px;
    display: block;
    animation: auth-wave-slide 6s linear infinite;
    will-change: transform;
}

@keyframes auth-wave-slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Respect users who prefer reduced motion — hold the wave still. */
@media (prefers-reduced-motion: reduce) {
    .auth-wave {
        animation: none;
    }
}
/* Host shell — full-width top header + collapsible left rail + rounded content frame.
   Layout ported from the Clearya design system (AppShell reference). Colors use the
   shadcn semantic CSS variables (see index.css); only the drawer/RTL/responsive rules
   that are awkward as utilities live here. */

.app-frame {
    display: flex;
    flex-direction: column;
    /* `dvh` tracks the visible viewport as the mobile URL bar shows/hides, so
       the frame fills the screen without leaving a scrollable overflow. */
    height: 100dvh;
    width: 100%;
    background: var(--card);
    color: var(--foreground);
    font-family: var(--font-sans);
    overflow: hidden;
}

/* ===== Top header ===== */
.app-header {
    position: relative;
    z-index: 60;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 20px;
    background: var(--card);
}

/* Hamburger toggle — hidden on desktop, shown below the tablet breakpoint. */
.app-header__menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-inline-start: -8px;
    margin-inline-end: 8px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background 300ms;
}

.app-header__menu:hover {
    background: var(--muted);
}

/* ===== Body row (sidebar + content) ===== */
.app-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

/* Backdrop behind the mobile drawer — hidden until the drawer opens. */
.app-backdrop {
    display: none;
}

/* ===== Sidebar ===== */
.app-sidebar {
    flex: 0 0 256px;
    width: 256px;
    display: flex;
    flex-direction: column;
    padding: 20px 12px;
    gap: 16px;
    transition: width 300ms, flex-basis 300ms;
}

.app-frame--collapsed .app-sidebar {
    flex-basis: 80px;
    width: 80px;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-brand__logo {
    display: block;
    height: 30px;
    width: auto;
    flex-shrink: 0;
}

/* Show the variant that matches the current header surface. */
.app-brand__logo--dark {
    display: none;
}

.dark .app-brand__logo--light {
    display: none;
}

.dark .app-brand__logo--dark {
    display: block;
}

.app-brand__module {
    font-size: 1.25rem;
    letter-spacing: -0.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    font-weight: 700;
    color: var(--foreground);
}

.app-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-nav--group {
    padding-top: 8px;
}

/* NavLink wraps the shadcn-based NavItem button; keep the anchor invisible. */
.app-nav__link {
    display: block;
    text-decoration: none;
}

.app-nav__link:hover {
    text-decoration: none;
}

.app-sidebar__footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-sidebar__divider {
    height: 1px;
    background: var(--border);
    margin: 8px 4px;
}

.app-version {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.app-version__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.app-chevron--flipped {
    transform: rotate(180deg);
}

/* ===== Content frame ===== */
.app-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--background);
    border-block-start: 1px solid var(--border);
    border-inline-start: 1px solid var(--border);
    border-start-start-radius: 1.5rem;
    overflow: hidden;
}

/* ===== Branded loading splash ===== */
.splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--background);
}

.splash--screen {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.splash--container {
    min-height: 60vh;
}

/* Fade the whole overlay in on appear and out on disappear. Durations mirror
   APPEAR/FADE constants in SplashScreen.tsx. */
.splash--in {
    animation: splash-overlay-in 300ms ease-in-out both;
}

/* Two-stage exit: the logo (and label) fade out first while the background
   stays fully opaque, hiding the next screen; only after that (delay = logo
   duration) does the background fade away to reveal it. */
.splash--out {
    animation: splash-overlay-out 340ms ease-in-out 420ms both;
    pointer-events: none;
}

.splash__logo {
    width: min(300px, 62vw);
    height: auto;
}

/* Logo bounces in — small → overshoot larger → settle to size as the fade
   completes — then breathes gently. On exit it reverses: swell → shrink past
   size while fading fully out (the node is removed only after this finishes;
   the timer in SplashScreen.tsx matches this duration). */
.splash--in .splash__logo {
    animation:
        splash-logo-in 720ms cubic-bezier(0.65, 0, 0.35, 1) both,
        splash-pulse 2.6s ease-in-out 720ms infinite;
}

.splash--out .splash__logo {
    animation: splash-logo-out 420ms cubic-bezier(0.65, 0, 0.35, 1) both;
}

/* Swap logo variant to match the active theme (light logo on light bg, white
   logo on dark bg). Default markup shows the light variant. */
.splash__logo--dark {
    display: none;
}

.dark .splash__logo--light {
    display: none;
}

.dark .splash__logo--dark {
    display: block;
}

.splash__label {
    color: var(--muted-foreground);
    font-size: 0.875rem;
    animation: splash-overlay-in 620ms ease-in-out both;
}

/* Fade with the logo (first stage), not the delayed background. */
.splash--out .splash__label {
    animation: splash-overlay-out 420ms ease-in-out both;
}

@keyframes splash-overlay-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes splash-overlay-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes splash-logo-in {
    0% {
        opacity: 0;
        transform: scale(0.85);
    }
    60% {
        opacity: 1;
        transform: scale(1.08);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes splash-logo-out {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    40% {
        opacity: 0.9;
        transform: scale(1.08);
    }
    100% {
        opacity: 0;
        transform: scale(0.82);
    }
}

@keyframes splash-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.62;
    }
}

@media (prefers-reduced-motion: reduce) {
    .splash--in,
    .splash--in .splash__logo,
    .splash__label {
        animation: none;
    }
    .splash--out,
    .splash--out .splash__logo,
    .splash--out .splash__label {
        animation: none;
        opacity: 0;
    }
}

/* ===== RemoteLoader loading/error placeholders ===== */
.app-placeholder {
    max-width: 640px;
    margin: 3rem auto;
    padding: 0 1.5rem;
    text-align: center;
    color: var(--muted-foreground);
}

.app-placeholder h2 {
    color: var(--foreground);
}

.app-placeholder--error {
    color: var(--destructive);
}

.app-placeholder pre {
    text-align: left;
    background: color-mix(in srgb, var(--destructive) 12%, transparent);
    color: var(--destructive);
    padding: 1rem;
    border-radius: var(--radius);
    overflow: auto;
    font-size: 0.75rem;
}

/* ===== Responsive: tablet & mobile (< 1024px) ===== */
/* Below this width the sidebar becomes an off-canvas drawer toggled from the
   header, and the content frame spans the full width. */
@media (max-width: 1023px) {
    .app-header__menu {
        display: inline-flex;
    }

    .app-sidebar,
    .app-frame--collapsed .app-sidebar {
        position: fixed;
        inset-block: 64px 0;
        inset-inline-start: 0;
        z-index: 50;
        width: 280px;
        flex-basis: 280px;
        background: var(--card);
        border-inline-end: 1px solid var(--border);
        transform: translateX(-100%);
        transition: transform 300ms;
    }

    /* In RTL the drawer slides in from the inline-start (right) edge. */
    [dir='rtl'] .app-sidebar,
    [dir='rtl'] .app-frame--collapsed .app-sidebar {
        inset-inline-start: auto;
        inset-inline-end: 0;
        transform: translateX(100%);
    }

    .app-frame--mobile-open .app-sidebar {
        transform: translateX(0);
        box-shadow: 0 12px 40px rgb(15 23 42 / 0.2);
    }

    /* The collapse control is desktop-only; the drawer replaces it. */
    .app-collapse-row {
        display: none;
    }

    .app-backdrop {
        position: fixed;
        inset-block: 64px 0;
        inset-inline: 0;
        z-index: 40;
        background: rgb(15 23 42 / 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 300ms;
    }

    .app-frame--mobile-open .app-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    /* Sidebar is out of flow (fixed), so content spans the whole width. */
    .app-content {
        border-inline-start: none;
        border-start-start-radius: 0;
    }
}

/* ===== Responsive: small phones (< 480px) ===== */
@media (max-width: 479px) {
    .app-header {
        padding: 0 14px;
    }

    .app-brand__logo {
        height: 26px;
    }

    .app-brand__module {
        font-size: 1.125rem;
    }

    .app-sidebar,
    .app-frame--collapsed .app-sidebar {
        width: min(86vw, 300px);
        flex-basis: min(86vw, 300px);
    }
}


/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
    }
  }
}
@layer theme {
  :root, :host {
    --font-sans: "Comfortaa", ui-sans-serif, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-300: oklch(80.8% .114 19.571);
    --color-amber-100: oklch(96.2% .059 95.617);
    --color-amber-300: oklch(87.9% .169 91.605);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-amber-700: oklch(55.5% .163 48.998);
    --color-amber-800: oklch(47.3% .137 46.201);
    --color-amber-950: oklch(27.9% .077 45.635);
    --color-emerald-100: oklch(95% .052 163.051);
    --color-emerald-300: oklch(84.5% .143 164.978);
    --color-emerald-400: oklch(76.5% .177 163.223);
    --color-emerald-600: oklch(59.6% .145 163.225);
    --color-emerald-700: oklch(50.8% .118 165.612);
    --color-emerald-800: oklch(43.2% .095 166.913);
    --color-emerald-950: oklch(26.2% .051 172.552);
    --color-neutral-900: oklch(20.5% 0 0);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --tracking-wide: .025em;
    --leading-relaxed: 1.625;
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-md: 12px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: "Comfortaa", ui-sans-serif, system-ui, sans-serif;
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  * {
    border-color: var(--border);
    outline-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    * {
      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  html {
    overscroll-behavior: none;
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    overscroll-behavior: none;
    min-height: 100dvh;
    margin: 0;
  }

  #root {
    min-height: 100dvh;
  }
}
@layer components;
@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }

  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .inset-0 {
    inset: 0;
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .right-0 {
    right: 0;
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .bottom-full {
    bottom: 100%;
  }

  .left-0 {
    left: 0;
  }

  .left-2 {
    left: calc(var(--spacing) * 2);
  }

  .left-2\.5 {
    left: calc(var(--spacing) * 2.5);
  }

  .z-10 {
    z-index: 10;
  }

  .z-50 {
    z-index: 50;
  }

  .z-\[100\] {
    z-index: 100;
  }

  .col-span-2 {
    grid-column: span 2 / span 2;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .mx-auto {
    margin-inline: auto;
  }

  .mt-1 {
    margin-top: var(--spacing);
  }

  .-mb-px {
    margin-bottom: -1px;
  }

  .mb-1 {
    margin-bottom: var(--spacing);
  }

  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-auto {
    margin-left: auto;
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .table-cell {
    display: table-cell;
  }

  .table-row {
    display: table-row;
  }

  .size-3\.5 {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-32 {
    height: calc(var(--spacing) * 32);
  }

  .h-\[18px\] {
    height: 18px;
  }

  .h-auto {
    height: auto;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .max-h-8 {
    max-height: calc(var(--spacing) * 8);
  }

  .max-h-12 {
    max-height: calc(var(--spacing) * 12);
  }

  .max-h-72 {
    max-height: calc(var(--spacing) * 72);
  }

  .max-h-\[65vh\] {
    max-height: 65vh;
  }

  .max-h-\[70vh\] {
    max-height: 70vh;
  }

  .max-h-\[85vh\] {
    max-height: 85vh;
  }

  .min-h-0 {
    min-height: 0;
  }

  .min-h-\[8rem\] {
    min-height: 8rem;
  }

  .min-h-\[400px\] {
    min-height: 400px;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .w-0 {
    width: 0;
  }

  .w-2\/3 {
    width: 66.6667%;
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-28 {
    width: calc(var(--spacing) * 28);
  }

  .w-44 {
    width: calc(var(--spacing) * 44);
  }

  .w-56 {
    width: calc(var(--spacing) * 56);
  }

  .w-80 {
    width: calc(var(--spacing) * 80);
  }

  .w-auto {
    width: auto;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-\[460px\] {
    max-width: 460px;
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-lg {
    max-width: var(--container-lg);
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .min-w-0 {
    min-width: 0;
  }

  .min-w-\[12rem\] {
    min-width: 12rem;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-none {
    flex: none;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .caption-bottom {
    caption-side: bottom;
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-in {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .resize {
    resize: both;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-col-reverse {
    flex-direction: column-reverse;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .gap-0 {
    gap: 0;
  }

  .gap-1 {
    gap: var(--spacing);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-lg {
    border-radius: var(--radius);
  }

  .rounded-md {
    border-radius: calc(var(--radius) - 2px);
  }

  .rounded-sm {
    border-radius: calc(var(--radius) - 4px);
  }

  .rounded-xl {
    border-radius: calc(var(--radius) + 4px);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .border-amber-500\/30 {
    border-color: #f99c004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-500\/30 {
      border-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
    }
  }

  .border-border {
    border-color: var(--border);
  }

  .border-destructive\/30 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/30 {
      border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
    }
  }

  .border-emerald-600\/30 {
    border-color: #0097674d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-600\/30 {
      border-color: color-mix(in oklab, var(--color-emerald-600) 30%, transparent);
    }
  }

  .border-input {
    border-color: var(--input);
  }

  .border-primary {
    border-color: var(--primary);
  }

  .border-transparent {
    border-color: #0000;
  }

  .bg-accent {
    background-color: var(--accent);
  }

  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }

  .bg-amber-500\/5 {
    background-color: #f99c000d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-500\/5 {
      background-color: color-mix(in oklab, var(--color-amber-500) 5%, transparent);
    }
  }

  .bg-amber-500\/10 {
    background-color: #f99c001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-500\/10 {
      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
  }

  .bg-background {
    background-color: var(--background);
  }

  .bg-black\/30 {
    background-color: #0000004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/30 {
      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
    }
  }

  .bg-border {
    background-color: var(--border);
  }

  .bg-card, .bg-card\/40 {
    background-color: var(--card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-card\/40 {
      background-color: color-mix(in oklab, var(--card) 40%, transparent);
    }
  }

  .bg-destructive, .bg-destructive\/5 {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/5 {
      background-color: color-mix(in oklab, var(--destructive) 5%, transparent);
    }
  }

  .bg-destructive\/10 {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/10 {
      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
    }
  }

  .bg-emerald-100 {
    background-color: var(--color-emerald-100);
  }

  .bg-emerald-600\/10 {
    background-color: #0097671a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-600\/10 {
      background-color: color-mix(in oklab, var(--color-emerald-600) 10%, transparent);
    }
  }

  .bg-muted, .bg-muted\/30 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/30 {
      background-color: color-mix(in oklab, var(--muted) 30%, transparent);
    }
  }

  .bg-muted\/40 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/40 {
      background-color: color-mix(in oklab, var(--muted) 40%, transparent);
    }
  }

  .bg-neutral-900 {
    background-color: var(--color-neutral-900);
  }

  .bg-popover {
    background-color: var(--popover);
  }

  .bg-primary, .bg-primary\/10 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/10 {
      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    }
  }

  .bg-secondary {
    background-color: var(--secondary);
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .object-contain {
    object-fit: contain;
  }

  .p-1 {
    padding: var(--spacing);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .px-0 {
    padding-inline: 0;
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: var(--spacing);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .ps-2\.5 {
    padding-inline-start: calc(var(--spacing) * 2.5);
  }

  .pt-0 {
    padding-top: 0;
  }

  .pt-1 {
    padding-top: var(--spacing);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-7 {
    padding-top: calc(var(--spacing) * 7);
  }

  .pr-7 {
    padding-right: calc(var(--spacing) * 7);
  }

  .pb-1 {
    padding-bottom: var(--spacing);
  }

  .pb-9 {
    padding-bottom: calc(var(--spacing) * 9);
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-7 {
    padding-left: calc(var(--spacing) * 7);
  }

  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .align-middle {
    vertical-align: middle;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .font-sans {
    font-family: Comfortaa, ui-sans-serif, system-ui, sans-serif;
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .text-accent-foreground {
    color: var(--accent-foreground);
  }

  .text-amber-500 {
    color: var(--color-amber-500);
  }

  .text-amber-700 {
    color: var(--color-amber-700);
  }

  .text-amber-800 {
    color: var(--color-amber-800);
  }

  .text-card-foreground {
    color: var(--card-foreground);
  }

  .text-destructive {
    color: var(--destructive);
  }

  .text-emerald-700 {
    color: var(--color-emerald-700);
  }

  .text-emerald-800 {
    color: var(--color-emerald-800);
  }

  .text-foreground, .text-foreground\/80 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/80 {
      color: color-mix(in oklab, var(--foreground) 80%, transparent);
    }
  }

  .text-muted-foreground {
    color: var(--muted-foreground);
  }

  .text-popover-foreground {
    color: var(--popover-foreground);
  }

  .text-primary {
    color: var(--primary);
  }

  .text-primary-foreground {
    color: var(--primary-foreground);
  }

  .text-secondary-foreground {
    color: var(--secondary-foreground);
  }

  .text-transparent {
    color: #0000;
  }

  .text-white {
    color: var(--color-white);
  }

  .capitalize {
    text-transform: capitalize;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .underline {
    text-decoration-line: underline;
  }

  .underline-offset-2 {
    text-underline-offset: 2px;
  }

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-100 {
    opacity: 1;
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xs {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[color\,box-shadow\] {
    transition-property: color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .fade-in-0 {
    --tw-enter-opacity: 0;
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .zoom-in-95 {
    --tw-enter-scale: .95;
  }

  .\[-webkit-text-fill-color\:transparent\] {
    -webkit-text-fill-color: transparent;
  }

  .fade-out {
    --tw-exit-opacity: 0;
  }

  .running {
    animation-play-state: running;
  }

  @media (hover: hover) {
    .group-hover\:translate-x-0\.5:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * .5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }

  .group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.group)[data-disabled="true"] *) {
    pointer-events: none;
  }

  .group-data-\[disabled\=true\]\:opacity-50:is(:where(.group)[data-disabled="true"] *) {
    opacity: .5;
  }

  .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
    cursor: not-allowed;
  }

  .peer-disabled\:opacity-50:is(:where(.peer):disabled ~ *) {
    opacity: .5;
  }

  .selection\:bg-primary ::selection {
    background-color: var(--primary);
  }

  .selection\:bg-primary::selection {
    background-color: var(--primary);
  }

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

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

  .file\:inline-flex::file-selector-button {
    display: inline-flex;
  }

  .file\:h-7::file-selector-button {
    height: calc(var(--spacing) * 7);
  }

  .file\:border-0::file-selector-button {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .file\:bg-transparent::file-selector-button {
    background-color: #0000;
  }

  .file\:text-sm::file-selector-button {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .file\:font-medium::file-selector-button {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .file\:text-foreground::file-selector-button {
    color: var(--foreground);
  }

  .placeholder\:text-muted-foreground::placeholder {
    color: var(--muted-foreground);
  }

  .last\:border-0:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  @media (hover: hover) {
    .hover\:border-primary\/40:hover {
      border-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-primary\/40:hover {
        border-color: color-mix(in oklab, var(--primary) 40%, transparent);
      }
    }

    .hover\:bg-accent:hover, .hover\:bg-accent\/40:hover {
      background-color: var(--accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-accent\/40:hover {
        background-color: color-mix(in oklab, var(--accent) 40%, transparent);
      }
    }

    .hover\:bg-destructive\/90:hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/90:hover {
        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
      }
    }

    .hover\:bg-muted:hover, .hover\:bg-muted\/50:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/50:hover {
        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
      }
    }

    .hover\:bg-primary\/90:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/90:hover {
        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
      }
    }

    .hover\:bg-secondary\/80:hover {
      background-color: var(--secondary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-secondary\/80:hover {
        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
      }
    }

    .hover\:text-accent-foreground:hover {
      color: var(--accent-foreground);
    }

    .hover\:text-destructive:hover {
      color: var(--destructive);
    }

    .hover\:text-foreground:hover {
      color: var(--foreground);
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }

    .hover\:opacity-100:hover {
      opacity: 1;
    }
  }

  .focus-visible\:border-ring:focus-visible {
    border-color: var(--ring);
  }

  .focus-visible\:ring-\[3px\]:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-destructive\/20:focus-visible {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-destructive\/20:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-ring\/50:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .disabled\:opacity-60:disabled {
    opacity: .6;
  }

  .has-\[\>svg\]\:px-2\.5:has( > svg) {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .has-\[\>svg\]\:px-3:has( > svg) {
    padding-inline: calc(var(--spacing) * 3);
  }

  .has-\[\>svg\]\:px-4:has( > svg) {
    padding-inline: calc(var(--spacing) * 4);
  }

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

  .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .data-\[state\=selected\]\:bg-muted[data-state="selected"] {
    background-color: var(--muted);
  }

  @media not all and (min-width: 48rem) {
    .max-md\:mb-3 {
      margin-bottom: calc(var(--spacing) * 3);
    }

    .max-md\:block {
      display: block;
    }

    .max-md\:flex {
      display: flex;
    }

    .max-md\:hidden {
      display: none;
    }

    .max-md\:w-full {
      width: 100%;
    }

    .max-md\:flex-col {
      flex-direction: column;
    }

    .max-md\:flex-row {
      flex-direction: row;
    }

    .max-md\:items-center {
      align-items: center;
    }

    .max-md\:justify-between {
      justify-content: space-between;
    }

    .max-md\:justify-start {
      justify-content: flex-start;
    }

    .max-md\:gap-1 {
      gap: var(--spacing);
    }

    .max-md\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    .max-md\:overflow-x-auto {
      overflow-x: auto;
    }

    .max-md\:rounded-lg {
      border-radius: var(--radius);
    }

    .max-md\:border {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }

    .max-md\:border-r-0 {
      border-right-style: var(--tw-border-style);
      border-right-width: 0;
    }

    .max-md\:border-b {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }

    .max-md\:p-3 {
      padding: calc(var(--spacing) * 3);
    }

    .max-md\:px-0 {
      padding-inline: 0;
    }

    .max-md\:py-1 {
      padding-block: var(--spacing);
    }

    .max-md\:pt-2 {
      padding-top: calc(var(--spacing) * 2);
    }

    .max-md\:text-center {
      text-align: center;
    }

    .max-md\:text-right {
      text-align: right;
    }

    .max-md\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }

    .max-md\:break-all {
      word-break: break-all;
    }

    .max-md\:whitespace-nowrap {
      white-space: nowrap;
    }

    .max-md\:before\:mr-auto:before {
      content: var(--tw-content);
      margin-right: auto;
    }

    .max-md\:before\:text-left:before {
      content: var(--tw-content);
      text-align: left;
    }

    .max-md\:before\:text-xs:before {
      content: var(--tw-content);
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }

    .max-md\:before\:font-medium:before {
      content: var(--tw-content);
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
    }

    .max-md\:before\:tracking-wide:before {
      content: var(--tw-content);
      --tw-tracking: var(--tracking-wide);
      letter-spacing: var(--tracking-wide);
    }

    .max-md\:before\:text-muted-foreground:before {
      content: var(--tw-content);
      color: var(--muted-foreground);
    }

    .max-md\:before\:uppercase:before {
      content: var(--tw-content);
      text-transform: uppercase;
    }

    .max-md\:before\:content-\[attr\(data-label\)\]:before {
      --tw-content: attr(data-label);
      content: var(--tw-content);
    }

    .max-md\:last\:mb-0:last-child {
      margin-bottom: 0;
    }
  }

  @media not all and (min-width: 40rem) {
    .max-sm\:hidden {
      display: none;
    }

    .max-sm\:px-2 {
      padding-inline: calc(var(--spacing) * 2);
    }
  }

  @media (min-width: 40rem) {
    .sm\:inline {
      display: inline;
    }

    .sm\:max-w-\[16rem\] {
      max-width: 16rem;
    }

    .sm\:max-w-md {
      max-width: var(--container-md);
    }

    .sm\:max-w-xs {
      max-width: var(--container-xs);
    }

    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:flex-row {
      flex-direction: row;
    }

    .sm\:justify-end {
      justify-content: flex-end;
    }

    .sm\:text-right {
      text-align: right;
    }
  }

  @media (min-width: 48rem) {
    .md\:w-56 {
      width: calc(var(--spacing) * 56);
    }

    .md\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  .dark\:border-input:is(.dark *) {
    border-color: var(--input);
  }

  .dark\:bg-amber-950:is(.dark *) {
    background-color: var(--color-amber-950);
  }

  .dark\:bg-destructive\/60:is(.dark *) {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-destructive\/60:is(.dark *) {
      background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
    }
  }

  .dark\:bg-emerald-950:is(.dark *) {
    background-color: var(--color-emerald-950);
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-input\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }

  .dark\:text-amber-300:is(.dark *) {
    color: var(--color-amber-300);
  }

  .dark\:text-amber-400:is(.dark *) {
    color: var(--color-amber-400);
  }

  .dark\:text-emerald-300:is(.dark *) {
    color: var(--color-emerald-300);
  }

  .dark\:text-emerald-400:is(.dark *) {
    color: var(--color-emerald-400);
  }

  .dark\:text-red-300:is(.dark *) {
    color: var(--color-red-300);
  }

  @media (hover: hover) {
    .dark\:hover\:bg-accent\/50:is(.dark *):hover {
      background-color: var(--accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-accent\/50:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
      }
    }

    .dark\:hover\:bg-input\/50:is(.dark *):hover {
      background-color: var(--input);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-input\/50:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--input) 50%, transparent);
      }
    }
  }

  .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
  }

  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&_tr\]\:border-b tr {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .\[\&_tr\:last-child\]\:border-0 tr:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }
}
@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}
@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}
@property --tw-animation-duration {
  syntax: "*";
  inherits: false
}
@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}
@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
:root {
  --radius: .625rem;
  --font-sans: "Comfortaa", ui-sans-serif, system-ui, sans-serif;
  --brand-cyan: #2ab8d5;
  --brand-navy: #3b628f;
  --login-cyan: #00bcd4;
  --login-cyan-hover: #00a3b8;
  --background: #f8fafc;
  --foreground: #1e293b;
  --card: #fff;
  --card-foreground: #1e293b;
  --popover: #fff;
  --popover-foreground: #1e293b;
  --primary: #00bcd4;
  --primary-foreground: #fff;
  --secondary: #f1f5f9;
  --secondary-foreground: #1e293b;
  --muted: #f1f5f9;
  --muted-foreground: #64748b;
  --accent: #ecfeff;
  --accent-foreground: #0891b2;
  --destructive: #ef4444;
  --destructive-foreground: #fff;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --ring: #00bcd4;
}
.dark {
  --background: #020617;
  --foreground: #e2e8f0;
  --card: #0f172a;
  --card-foreground: #e2e8f0;
  --popover: #0f172a;
  --popover-foreground: #e2e8f0;
  --primary: #00bcd4;
  --primary-foreground: #fff;
  --secondary: #1e293b;
  --secondary-foreground: #e2e8f0;
  --muted: #1e293b;
  --muted-foreground: #94a3b8;
  --accent: #164e634d;
  --accent-foreground: #22d3ee;
  --destructive: #ef4444;
  --destructive-foreground: #fff;
  --border: #1e293b;
  --input: #1e293b;
  --ring: #00bcd4;
}
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select {
    font-size: 16px;
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false
}
@property --tw-tracking {
  syntax: "*";
  inherits: false
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false
}
@property --tw-brightness {
  syntax: "*";
  inherits: false
}
@property --tw-contrast {
  syntax: "*";
  inherits: false
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}
@property --tw-invert {
  syntax: "*";
  inherits: false
}
@property --tw-opacity {
  syntax: "*";
  inherits: false
}
@property --tw-saturate {
  syntax: "*";
  inherits: false
}
@property --tw-sepia {
  syntax: "*";
  inherits: false
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}
@property --tw-duration {
  syntax: "*";
  inherits: false
}
@property --tw-ease {
  syntax: "*";
  inherits: false
}
@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    opacity: .5;
  }
}
@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0)scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1))rotate(var(--tw-enter-rotate, 0));
    filter: blur(var(--tw-enter-blur, 0));
  }
}