@layer theme,base,components,animations,utilities;
@layer base {
    *,
    *:before,
    *:after {
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }
    * {
        margin: 0;
    }
    html {
        tab-size: 4;
    }
    body,
    dialog,
    [popover] {
        font-family: var(--font-sans);
        font-size: var(--text-regular);
        line-height: var(--leading-normal);
        color: var(--foreground);
    }
    body {
        background-color: var(--background);
        color: var(--foreground);
        -webkit-font-smoothing: antialiased;
    }
    img,
    picture,
    video,
    canvas,
    svg {
        max-width: 100%;
    }
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: var(--font-semibold);
        line-height: 1.25;
        &:first-child {
            margin-block-start: 0;
        }
    }
    h1 {
        font-size: var(--text-1);
        margin: var(--space-10) 0 var(--space-6);
    }
    h2 {
        font-size: var(--text-2);
        margin: var(--space-8) 0 var(--space-5);
    }
    h3 {
        font-size: var(--text-3);
        margin: var(--space-6) 0 var(--space-4);
    }
    h4 {
        font-size: var(--text-4);
        margin: var(--space-5) 0 var(--space-3);
    }
    h5 {
        font-size: var(--text-5);
        margin: var(--space-4) 0 var(--space-2);
    }
    h6 {
        font-size: var(--text-regular);
        margin: var(--space-4) 0 var(--space-2);
    }
    p {
        margin-block-end: var(--space-4);
        &:last-child {
            margin-block-end: 0;
        }
    }
    a {
        color: var(--primary);
        text-decoration: underline;
        text-underline-offset: 2px;
        transition: color var(--transition-fast);
        &:hover {
            color: rgb(from var(--primary) r g b / 0.8);
        }
    }
    strong,
    b {
        font-weight: var(--font-semibold);
    }
    em,
    i {
        font-style: italic;
    }
    small {
        font-size: var(--text-7);
    }
    code {
        font-family: var(--font-mono);
        font-size: 0.875em;
        padding: 0.125rem 0.25rem;
        background-color: var(--faint);
        border-radius: var(--radius-small);
    }
    pre {
        font-family: var(--font-mono);
        padding: var(--space-4);
        background-color: var(--faint);
        border-radius: var(--radius-medium);
        overflow-x: auto;
        margin-block-end: var(--space-4);
        code {
            padding: 0;
            background: none;
            border-radius: 0;
        }
    }
    blockquote {
        border-inline-start: 4px solid var(--border);
        padding-inline-start: var(--space-4);
        margin: var(--space-4) 0;
        color: var(--muted-foreground);
        font-style: italic;
    }
    hr {
        border: none;
        border-top: 1px solid var(--border);
        margin: var(--space-8) 0;
    }
    ul,
    ol {
        padding-inline-start: var(--space-6);
        margin-block-end: var(--space-4);
    }
    ul {
        list-style-type: disc;
    }
    ol {
        list-style-type: decimal;
    }
    li {
        margin-block-end: var(--space-1);
    }
    mark {
        background-color: rgb(from var(--warning) r g b / 0.3);
        padding: 0.125rem 0.25rem;
        border-radius: var(--radius-small);
    }
    :focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
    }
    :disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
}
@layer theme {
    :root {
        --background: #fff;
        --foreground: #09090b;
        --card: #fff;
        --card-foreground: #09090b;
        --primary: #574747;
        --primary-foreground: #fafafa;
        --secondary: #f4f4f5;
        --secondary-foreground: #574747;
        --muted: #f4f4f5;
        --muted-foreground: #71717a;
        --faint: #fafafa;
        --accent: #f4f4f5;
        --danger: #d32f2f;
        --danger-foreground: #fafafa;
        --success: #008032;
        --success-foreground: #fafafa;
        --warning: #a65b00;
        --warning-foreground: #09090b;
        --border: #d4d4d8;
        --input: #d4d4d8;
        --ring: #574747;
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-14: 3.5rem;
        --space-16: 4rem;
        --space-18: 4.5rem;
        --radius-small: 0.125rem;
        --radius-medium: 0.375rem;
        --radius-large: 0.75rem;
        --radius-full: 9999px;
        --bar-height: 0.5rem;
        --font-sans: system-ui, sans-serif;
        --font-mono: ui-monospace, Consolas, monospace;
        --text-1: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
        --text-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
        --text-3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
        --text-4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
        --text-5: 1.125rem;
        --text-6: 1rem;
        --text-7: 0.875rem;
        --text-8: 0.75rem;
        --text-regular: var(--text-6);
        --leading-normal: 1.5;
        --font-normal: 400;
        --font-medium: 500;
        --font-semibold: 600;
        --font-bold: 600;
        --shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --shadow-medium:
            0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        --shadow-large:
            0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        --transition-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1);
        --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        --z-dropdown: 50;
        --z-modal: 200;
    }
    [data-theme="dark"] {
        color-scheme: dark;
        --background: #09090b;
        --foreground: #fafafa;
        --card: #18181b;
        --card-foreground: #fafafa;
        --primary: #fafafa;
        --primary-foreground: #18181b;
        --secondary: #27272a;
        --secondary-foreground: #fafafa;
        --muted: #27272a;
        --muted-foreground: #a1a1aa;
        --faint: #1e1e21;
        --accent: #27272a;
        --danger: #f4807b;
        --danger-foreground: #18181b;
        --success: #6cc070;
        --success-foreground: #18181b;
        --warning: #f0a030;
        --warning-foreground: #09090b;
        --border: #52525b;
        --input: #52525b;
        --ring: #d4d4d8;
    }
}
@layer animations {
    .animate-pop-in {
        opacity: 1;
        transform: perspective(1000px) rotateX(0) translateZ(0);
        transition:
            opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
            overlay 0.15s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete,
            display 0.15s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete;
        @starting-style {
            opacity: 0;
            transform: perspective(1000px) rotateX(-15deg) translateZ(-80px);
        }
        &[data-state="closing"] {
            opacity: 0;
            transform: perspective(1000px) rotateX(-15deg) translateZ(-80px);
        }
        &[data-state="closing"]::backdrop {
            opacity: 0;
        }
    }
    dialog::backdrop {
        opacity: 1;
        transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
        @starting-style {
            opacity: 0;
        }
    }
    .animate-slide-in {
        opacity: 1;
        transform: translate(0);
        transition:
            opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
        @starting-style {
            opacity: 0;
            transform: translate(100%);
        }
        &[data-state="closing"] {
            opacity: 0;
            transform: translate(100%);
        }
    }
}
@layer base {
    :is(button, [type="submit"], [type="reset"], [type="button"], a.button),
    ::file-selector-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-7);
        font-weight: var(--font-medium);
        line-height: var(--leading-normal);
        white-space: nowrap;
        text-decoration: none;
        background-color: var(--primary);
        color: var(--primary-foreground);
        border-radius: var(--radius-medium);
        border: 1px solid;
        border-color: rgb(from #fff r g b / 0.15) rgb(from #000 r g b / 0.2)
            rgb(from #000 r g b / 0.2) rgb(from #fff r g b / 0.15);
        transition:
            background-color var(--transition-fast),
            opacity var(--transition-fast),
            transform var(--transition-fast);
        cursor: pointer;
        &:hover:not(:disabled) {
            background-color: color-mix(in srgb, var(--primary), white 25%);
        }
        &:active:not(:disabled) {
            transform: translate(1px, 1px);
        }
        &[data-variant="secondary"] {
            background-color: var(--secondary);
            color: var(--secondary-foreground);
            border-color: rgb(from #fff r g b / 0.5) rgb(from #000 r g b / 0.1)
                rgb(from #000 r g b / 0.1) rgb(from #fff r g b / 0.5);
            &:hover:not(:disabled) {
                background-color: color-mix(
                    in srgb,
                    var(--secondary),
                    black 10%
                );
            }
        }
        &[data-variant="danger"] {
            background-color: var(--danger);
            color: var(--danger-foreground);
            &:hover:not(:disabled) {
                background-color: color-mix(in srgb, var(--danger), black 15%);
            }
        }
        &.outline {
            background-color: transparent;
            border-color: var(--border);
            &:not([data-variant]) {
                color: var(--foreground);
            }
            &[data-variant="danger"] {
                color: var(--danger);
                border-color: var(--danger);
                &:hover:not(:disabled) {
                    background-color: color-mix(
                        in srgb,
                        var(--danger),
                        transparent 90%
                    );
                }
            }
            &[data-variant="secondary"] {
                color: var(--secondary-foreground);
                border-color: var(--secondary);
                &:hover:not(:disabled) {
                    background-color: color-mix(
                        in srgb,
                        var(--secondary),
                        transparent 80%
                    );
                }
            }
            &:hover:not(:disabled):not([data-variant]) {
                background-color: var(--accent);
            }
        }
        &.ghost {
            background-color: transparent;
            border-color: transparent;
            &:not([data-variant]) {
                color: var(--foreground);
            }
            &[data-variant="danger"] {
                color: var(--danger);
                &:hover:not(:disabled) {
                    background-color: color-mix(
                        in srgb,
                        var(--danger),
                        transparent 90%
                    );
                }
            }
            &[data-variant="secondary"] {
                color: var(--secondary-foreground);
                &:hover:not(:disabled) {
                    background-color: color-mix(
                        in srgb,
                        var(--secondary),
                        transparent 80%
                    );
                }
            }
            &:hover:not(:disabled):not([data-variant]) {
                background-color: var(--accent);
            }
        }
        &.small {
            padding: var(--space-1) var(--space-3);
            font-size: var(--text-8);
        }
        &.large {
            height: 3rem;
            padding: 0 var(--space-6);
            font-size: var(--text-regular);
        }
        &.icon {
            width: 2.5rem;
            padding: 0;
            &.small {
                width: 2rem;
            }
            &.large {
                width: 3rem;
            }
        }
    }
    ::file-selector-button {
        background-color: transparent;
        color: var(--foreground);
        border: 1px solid var(--border);
    }
    ::file-selector-button:hover {
        background-color: var(--accent);
    }
}
@layer components {
    menu.buttons {
        padding-inline-start: 0;
        display: inline-flex;
        > :is(
            button,
            [type="button"],
            [type="submit"],
            [type="reset"],
            a.button
        ) {
            border-radius: 0;
            &:first-child {
                border-start-start-radius: var(--radius-medium);
                border-end-start-radius: var(--radius-medium);
            }
            &:last-child {
                border-start-end-radius: var(--radius-medium);
                border-end-end-radius: var(--radius-medium);
            }
            &:not(:last-child) {
                border-inline-end: 1px solid
                    rgb(from var(--primary-foreground) r g b / 0.2);
            }
        }
    }
}
@layer base {
    label {
        display: block;
        font-size: var(--text-7);
        font-weight: var(--font-medium);
        &:has(input:where([type="checkbox"], [type="radio"])) {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            font-weight: var(--font-normal);
        }
    }
    :where(
        input:not(
            [type="checkbox"],
            [type="radio"],
            [type="range"],
            [type="file"],
            [type="color"]
        ),
        textarea,
        select
    ) {
        width: 100%;
        margin-block-start: var(--space-1);
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-7);
        line-height: var(--leading-normal);
        background-color: var(--background);
        color: var(--foreground);
        border: 1px solid var(--input);
        border-radius: var(--radius-medium);
        transition:
            border-color var(--transition-fast),
            box-shadow var(--transition-fast);
        &::placeholder {
            color: var(--muted-foreground);
        }
        &:focus {
            outline: none;
            border-color: var(--ring);
            box-shadow: 0 0 0 2px rgb(from var(--ring) r g b / 0.2);
        }
        &:disabled {
            background-color: var(--muted);
        }
        &:is([aria-invalid="true"], :user-invalid) {
            border-color: var(--danger);
            &:focus {
                box-shadow: 0 0 0 2px rgb(from var(--danger) r g b / 0.2);
            }
        }
    }
    textarea {
        height: auto;
        min-height: 5rem;
        padding: var(--space-3);
        resize: vertical;
    }
    select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--space-2) center;
        padding-inline-end: var(--space-6);
    }
    input:where([type="checkbox"], [type="radio"]) {
        appearance: none;
        width: 1rem;
        height: 1rem;
        margin: 0;
        background-color: var(--background);
        border: 1px solid var(--input);
        transition:
            background-color var(--transition-fast),
            border-color var(--transition-fast);
        &:checked {
            background-color: var(--primary);
            border-color: var(--primary);
        }
    }
    input[type="checkbox"] {
        border-radius: var(--radius-small);
        position: relative;
        &:checked:after {
            content: "";
            position: absolute;
            inset: 0;
            background-color: var(--primary-foreground);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
            mask-size: 90%;
            mask-position: center;
            mask-repeat: no-repeat;
        }
        &[role="switch"] {
            --switch-height: calc(var(--bar-height) * 3);
            --switch-inset: 2px;
            --switch-thumb: calc(
                var(--switch-height) - var(--switch-inset) * 3
            );
            width: calc(var(--switch-height) * 2);
            height: var(--switch-height);
            border-radius: var(--radius-full);
            background-color: var(--input);
            position: relative;
            &:before {
                content: "";
                position: absolute;
                top: 50%;
                left: var(--switch-inset);
                transform: translateY(-50%);
                width: var(--switch-thumb);
                height: var(--switch-thumb);
                background-color: var(--background);
                border-radius: var(--radius-full);
                transition: transform var(--transition);
                box-shadow: var(--shadow-small);
            }
            &:checked {
                background-color: var(--primary);
                &:after {
                    content: none;
                }
                &:before {
                    transform: translateY(-50%) translate(var(--switch-height));
                }
            }
        }
    }
    input[type="radio"] {
        border-radius: var(--radius-full);
        position: relative;
        &:checked:after {
            content: "";
            position: absolute;
            inset: 0;
            background-color: var(--primary-foreground);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='currentColor'/%3E%3C/svg%3E");
            mask-size: 100%;
            mask-position: center;
            mask-repeat: no-repeat;
        }
    }
    :where(
        input:where([type="checkbox"], [type="radio"], [type="range"]),
        select
    ):not(:disabled),
    label:has(input:where([type="checkbox"], [type="radio"]):not(:disabled)) {
        cursor: pointer;
    }
    input[type="range"] {
        width: 100%;
        height: var(--bar-height);
        appearance: none;
        background: var(--muted);
        border-radius: var(--radius-full);
        &::-webkit-slider-thumb {
            appearance: none;
            width: 1.25rem;
            height: 1.25rem;
            background: var(--primary);
            border-radius: var(--radius-full);
            transition: transform var(--transition-fast);
            &:hover {
                transform: scale(1.1);
            }
        }
        &::-moz-range-thumb {
            width: 1.25rem;
            height: 1.25rem;
            background: var(--primary);
            border: none;
            border-radius: var(--radius-full);
        }
    }
    fieldset {
        border: 1px solid var(--border);
        border-radius: var(--radius-medium);
        padding: var(--space-4);
        margin-block-end: var(--space-4);
    }
    legend {
        font-size: var(--text-7);
        font-weight: var(--font-medium);
        padding: 0 var(--space-2);
    }
}
@layer components {
    fieldset.group {
        display: flex;
        align-items: stretch;
        border: none;
        padding: 0;
        margin: 0;
        > :is(input, textarea, select) {
            flex: 1;
            margin-block-start: 0;
            border-inline-end: 0;
        }
        > :is(input, textarea, select, button) {
            border-radius: 0;
            &:first-child {
                border-radius: var(--radius-medium) 0 0 var(--radius-medium);
            }
            &:last-child {
                border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
            }
        }
        > legend {
            float: inline-start;
            display: inline-flex;
            align-items: center;
            padding: 0 var(--space-3);
            line-height: var(--leading-normal);
            font-weight: var(--font-normal);
            color: var(--muted-foreground);
            background-color: var(--muted);
            border: 1px solid var(--input);
            border-inline-end: none;
            border-radius: var(--radius-medium) 0 0 var(--radius-medium);
        }
    }
    [data-field] {
        margin-block-end: var(--space-4);
        [data-hint],
        .error {
            font-size: var(--text-8);
            font-weight: var(--font-normal);
            color: var(--muted-foreground);
            margin-block-start: var(--space-1);
        }
        .error {
            display: none;
        }
        &[data-field="error"] .error {
            display: block;
            color: var(--danger);
        }
    }
}
@layer base {
    table {
        border-collapse: collapse;
        table-layout: fixed;
        width: 100%;
        font-size: var(--text-7);
    }
    thead {
        border-bottom: 1px solid var(--border);
    }
    th,
    td {
        overflow-wrap: break-word;
    }
    th {
        padding: var(--space-3) var(--space-2);
        text-align: start;
        font-weight: var(--font-medium);
        color: var(--muted-foreground);
    }
    td {
        padding: var(--space-3) var(--space-2);
    }
    tbody tr {
        border-bottom: 1px solid var(--border);
        transition: background-color var(--transition-fast);
        &:last-child {
            border-bottom: none;
        }
        &:hover {
            background-color: rgb(from var(--muted) r g b / 0.5);
        }
    }
}
@layer base {
    progress {
        appearance: none;
        width: 100%;
        height: var(--bar-height);
        border: none;
        border-radius: var(--radius-full);
        overflow: hidden;
        background-color: var(--muted);
        &::-webkit-progress-bar {
            background-color: var(--muted);
            border-radius: var(--radius-full);
        }
        &::-webkit-progress-value {
            background-color: var(--primary);
            border-radius: var(--radius-full);
            transition: width var(--transition);
        }
        &::-moz-progress-bar {
            background-color: var(--primary);
            border-radius: var(--radius-full);
        }
    }
    meter {
        appearance: none;
        width: 100%;
        height: var(--bar-height);
        border: none;
        border-radius: var(--radius-full);
        overflow: hidden;
        background: var(--muted);
        &::-webkit-meter-bar {
            background: var(--muted);
            border: none;
            border-radius: var(--radius-full);
            height: var(--bar-height);
        }
        &::-webkit-meter-optimum-value,
        &::-webkit-meter-suboptimum-value,
        &::-webkit-meter-even-less-good-value {
            border-radius: var(--radius-full);
        }
        &::-webkit-meter-optimum-value {
            background: var(--success);
        }
        &::-webkit-meter-suboptimum-value {
            background: var(--warning);
        }
        &::-webkit-meter-even-less-good-value {
            background: var(--danger);
        }
        &::-moz-meter-bar {
            background: var(--success);
            border-radius: var(--radius-full);
        }
        &:-moz-meter-sub-optimum::-moz-meter-bar {
            background: var(--warning);
        }
        &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
            background: var(--danger);
        }
    }
}
@layer components {
    .spinner {
        width: 1.5rem;
        height: 1.5rem;
        border: 2px solid var(--muted);
        border-top-color: var(--primary);
        border-radius: var(--radius-full);
        animation: spin 1s linear infinite;
        &.small {
            width: 1rem;
            height: 1rem;
        }
        &.large {
            width: 2rem;
            height: 2rem;
            border-width: 3px;
        }
    }
    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }
}
@layer components {
    :root {
        --grid-cols: 12;
        --grid-gap: 1.5rem;
        --container-max: 1280px;
        --container-pad: 1rem;
    }
    .container {
        width: 100%;
        max-width: var(--container-max);
        margin-inline: auto;
        padding-inline: var(--container-pad);
    }
    .row {
        display: grid;
        grid-template-columns: repeat(var(--grid-cols), 1fr);
        gap: var(--grid-gap);
        width: 100%;
    }
    .col,
    [class*="col-"] {
        grid-column-end: span var(--span, var(--grid-cols));
    }
    .col-1 {
        --span: 1;
    }
    .col-2 {
        --span: 2;
    }
    .col-3 {
        --span: 3;
    }
    .col-4 {
        --span: 4;
    }
    .col-5 {
        --span: 5;
    }
    .col-6 {
        --span: 6;
    }
    .col-7 {
        --span: 7;
    }
    .col-8 {
        --span: 8;
    }
    .col-9 {
        --span: 9;
    }
    .col-10 {
        --span: 10;
    }
    .col-11 {
        --span: 11;
    }
    .col-12 {
        --span: 12;
    }
    .offset-1 {
        grid-column-start: 2;
    }
    .offset-2 {
        grid-column-start: 3;
    }
    .offset-3 {
        grid-column-start: 4;
    }
    .offset-4 {
        grid-column-start: 5;
    }
    .offset-5 {
        grid-column-start: 6;
    }
    .offset-6 {
        grid-column-start: 7;
    }
    .col-end {
        grid-column-start: span var(--span, 1);
        grid-column-end: -1;
    }
    @media (max-width: 768px) {
        .row {
            --grid-cols: 4;
            --grid-gap: 1rem;
        }
        .col,
        [class*="col-"] {
            --span: 4;
        }
        [class*="offset-"] {
            grid-column-start: auto;
        }
    }
}
@layer components {
    .card {
        background-color: var(--card);
        color: var(--card-foreground);
        border: 1px solid var(--border);
        border-radius: var(--radius-medium);
        box-shadow: var(--shadow-small);
        padding: var(--space-6);
        overflow: hidden;
    }
}
@layer components {
    [role="alert"] {
        --bg-amount: 8%;
        position: relative;
        display: flex;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-6);
        background-color: var(--background);
        border: 1px solid var(--border);
        border-radius: var(--radius-medium);
        font-size: var(--text-7);
        [data-theme="dark"] & {
            --bg-amount: 20%;
        }
        &[data-variant] {
            border: none;
        }
        &[data-variant="error"],
        &[data-variant="danger"] {
            color: var(--danger);
            background-color: color-mix(
                in srgb,
                var(--danger) var(--bg-amount),
                transparent
            );
            & a {
                color: var(--danger);
            }
        }
        &[data-variant="success"] {
            color: var(--success);
            background-color: color-mix(
                in srgb,
                var(--success) var(--bg-amount),
                transparent
            );
            & a {
                color: var(--success);
            }
        }
        &[data-variant="warning"] {
            color: var(--warning);
            background-color: color-mix(
                in srgb,
                var(--warning) var(--bg-amount),
                transparent
            );
            & a {
                color: var(--warning);
            }
        }
    }
}
@layer components {
    .badge {
        --bg-amount: 10%;
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-1) var(--space-4);
        font-size: var(--text-8);
        font-weight: var(--font-medium);
        line-height: var(--leading-normal);
        background-color: var(--primary);
        color: var(--primary-foreground);
        border-radius: var(--radius-full);
        [data-theme="dark"] & {
            --bg-amount: 30%;
        }
        &.secondary {
            background-color: var(--secondary);
            color: var(--secondary-foreground);
        }
        &.outline {
            background-color: transparent;
            color: var(--foreground);
            border: 1px solid var(--border);
        }
        &.success {
            color: var(--success);
            background-color: color-mix(
                in srgb,
                var(--success) var(--bg-amount),
                transparent
            );
        }
        &.warning {
            color: var(--warning);
            background-color: color-mix(
                in srgb,
                var(--warning) var(--bg-amount),
                transparent
            );
        }
        &.danger {
            color: var(--danger);
            background-color: color-mix(
                in srgb,
                var(--danger) var(--bg-amount),
                transparent
            );
        }
    }
}
@layer components {
    details {
        border: 1px solid var(--border);
        border-radius: var(--radius-medium);
        overflow: hidden;
        + details {
            margin-top: -1px;
            border-start-start-radius: 0;
            border-start-end-radius: 0;
        }
        &:has(+ details) {
            border-end-start-radius: 0;
            border-end-end-radius: 0;
        }
        &[open] summary {
            border-bottom: 1px solid var(--border);
        }
    }
    summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        padding: var(--space-4);
        font-weight: var(--font-medium);
        cursor: pointer;
        user-select: none;
        transition: background-color var(--transition-fast);
        &:hover {
            background-color: var(--muted);
        }
        &::-webkit-details-marker,
        &::marker {
            display: none;
        }
        &:after {
            content: "";
            width: 1em;
            height: 1em;
            flex-shrink: 0;
            background-color: currentColor;
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
            mask-size: contain;
            mask-repeat: no-repeat;
            transition: transform var(--transition-fast);
        }
        details[open] &:after {
            transform: rotate(180deg);
        }
    }
    details > *:not(summary) {
        padding: var(--space-4);
    }
}
@layer components {
    [role="tablist"] {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-1);
        background-color: var(--muted);
        border-radius: var(--radius-medium);
    }
    [role="tab"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-7);
        font-weight: var(--font-medium);
        white-space: nowrap;
        background-color: transparent;
        color: var(--foreground);
        border: none;
        border-radius: calc(var(--radius-medium) - 2px);
        cursor: pointer;
        transition:
            background-color var(--transition-fast),
            color var(--transition-fast);
        &:hover {
            color: var(--muted-foreground);
        }
        &[aria-selected="true"] {
            background-color: var(--background);
            box-shadow: var(--shadow-small);
        }
    }
    [role="tabpanel"] {
        padding: var(--space-4) 0;
        &:focus-visible {
            outline: none;
        }
    }
}
@layer components {
    dialog {
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        width: 100%;
        max-width: 32rem;
        max-height: 85vh;
        margin: auto;
        padding: 0;
        background-color: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius-large);
        box-shadow: var(--shadow-large);
        overflow: hidden;
        opacity: 0;
        transform: scale(0.95);
        transition:
            opacity 0.15s ease,
            transform 0.15s ease,
            overlay 0.15s ease allow-discrete,
            display 0.15s ease allow-discrete;
        &[open] {
            opacity: 1;
            transform: scale(1);
        }
        @starting-style {
            &[open] {
                opacity: 0;
                transform: scale(0.95);
            }
        }
        &::backdrop {
            background-color: #0000;
            transition:
                background-color 0.15s ease,
                overlay 0.15s ease allow-discrete,
                display 0.15s ease allow-discrete;
        }
        &[open]::backdrop {
            background-color: #00000080;
        }
        @starting-style {
            &[open]::backdrop {
                background-color: #0000;
            }
        }
        > header,
        > form > header {
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
            padding: var(--space-6);
            padding-block-end: 0;
            > h1,
            > h2,
            > h3,
            > h4,
            > h5,
            > h6 {
                margin-block-end: 0;
            }
            > p {
                font-size: var(--text-7);
                color: var(--muted-foreground);
                margin-block-end: 0;
            }
        }
        > p,
        > div,
        > section,
        > form > p,
        > form > div,
        > form > section {
            padding: var(--space-6);
            overflow-y: auto;
        }
        > footer,
        > form > footer {
            display: flex;
            justify-content: flex-end;
            gap: var(--space-2);
            padding: var(--space-6);
            padding-block-start: 0;
        }
    }
}
@layer components {
    ot-dropdown {
        [popover] {
            position: fixed;
            margin: 0;
            min-width: 12rem;
            background-color: var(--background);
            border: 1px solid var(--border);
            border-radius: var(--radius-medium);
            box-shadow: var(--shadow-medium);
            opacity: 0;
            transform: translateY(-4px);
            transition:
                opacity 0.15s ease-out,
                transform 0.15s ease-out,
                display 0.15s allow-discrete,
                overlay 0.15s allow-discrete;
            &:popover-open {
                opacity: 1;
                transform: translateY(0);
            }
            @starting-style {
                &:popover-open {
                    opacity: 0;
                    transform: translateY(-4px);
                }
            }
            hr {
                margin: var(--space-1) 0;
            }
        }
        [role="menuitem"] {
            display: flex;
            align-items: center;
            justify-content: start;
            gap: var(--space-2);
            width: 100%;
            padding: var(--space-2) var(--space-3);
            font-size: var(--text-7);
            text-align: start;
            color: var(--foreground);
            background: none;
            border: none;
            border-radius: var(--radius-small);
            cursor: pointer;
            &:hover,
            &:focus {
                background-color: var(--accent);
                outline: none;
            }
        }
    }
}
@layer components {
    .toast-container {
        position: fixed;
        display: flex;
        flex-direction: column;
        pointer-events: none;
        margin: 0;
        padding: 0;
        border: none;
        background: transparent;
        overflow: visible;
        &::backdrop {
            display: none;
        }
        &[data-placement="top-left"] {
            inset: var(--space-4) auto auto var(--space-4);
        }
        &[data-placement="top-center"] {
            inset: var(--space-4) auto auto 50%;
            transform: translate(-50%);
        }
        &[data-placement="top-right"] {
            inset: var(--space-4) var(--space-4) auto auto;
        }
        &[data-placement="bottom-left"] {
            inset: auto auto var(--space-4) var(--space-4);
            flex-direction: column-reverse;
        }
        &[data-placement="bottom-center"] {
            inset: auto auto var(--space-4) 50%;
            transform: translate(-50%);
            flex-direction: column-reverse;
        }
        &[data-placement="bottom-right"] {
            inset: auto var(--space-4) var(--space-4) auto;
            flex-direction: column-reverse;
        }
    }
    .toast {
        padding: var(--space-5) var(--space-4);
        max-width: 28rem;
        min-width: 20rem;
        pointer-events: auto;
        background-color: var(--card);
        border: 1px solid var(--border);
        border-inline-start-width: var(--space-1);
        border-inline-start-style: solid;
        border-radius: var(--radius-medium);
        box-shadow: var(--shadow-small);
        transition:
            opacity 0.15s,
            transform 0.15s,
            margin 0.15s;
        line-height: 1;
        .toast-title {
            font-weight: 600;
            margin: 0 0 var(--space-3) 0;
        }
        .toast-message {
            color: var(--muted-foreground);
        }
        &[data-variant="success"] {
            border-inline-start-color: var(--success);
        }
        &[data-variant="danger"] {
            border-inline-start-color: var(--danger);
        }
        &[data-variant="warning"] {
            border-inline-start-color: var(--warning);
        }
        &[data-variant="info"] {
            border-inline-start-color: var(--secondary);
        }
        > [data-close] {
            margin-inline-start: auto;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            opacity: 0.5;
            &:hover {
                opacity: 1;
            }
        }
        margin: var(--space-2) 0;
        &[data-entering] {
            opacity: 0;
            transform: translateY(-1rem);
        }
        &[data-exiting] {
            opacity: 0;
            margin: 0;
            padding-block: 0;
            max-height: 0;
            overflow: hidden;
            transition:
                opacity 0.2s,
                margin 0.2s,
                padding 0.2s,
                max-height 0.2s;
        }
    }
}
@layer components {
    :root {
        --topnav-height: var(--space-12);
        --sidebar-width: 14rem;
    }
    [data-sidebar-layout] {
        --topnav-offset: 0px;
        --topnav-scroll-offset: 0px;
        display: grid;
        grid-template-columns: var(--sidebar-width) 1fr;
        min-height: 100dvh;
        gap: var(--space-4);
        &:has(nav[data-topnav]) {
            --topnav-offset: var(--topnav-height);
            --topnav-scroll-offset: calc(var(--topnav-height) + var(--space-6));
        }
        > main {
            min-width: 0;
            margin-block-start: var(--topnav-offset);
            [id] {
                scroll-margin-block-start: var(--topnav-scroll-offset);
            }
        }
        > aside[data-sidebar] {
            position: sticky;
            top: var(--topnav-offset);
            z-index: 1;
            height: calc(100dvh - var(--topnav-offset));
            align-self: start;
            background-color: var(--background);
            border-inline-end: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            width: var(--sidebar-width);
            > :is(header, footer) {
                flex-shrink: 0;
                padding: var(--space-3);
            }
            > footer {
                margin-block-start: auto;
            }
            > nav {
                flex: 1;
                min-height: 0;
                overflow-y: auto;
                padding: var(--space-3) var(--space-2);
                ul {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                    display: flex;
                    flex-direction: column;
                    gap: var(--space-1);
                    li {
                        margin: 0;
                    }
                }
                a {
                    display: flex;
                    gap: var(--space-2);
                    padding: var(--space-1) var(--space-3);
                    font-size: var(--text-7);
                    color: var(--foreground);
                    text-decoration: none;
                    border-radius: var(--radius-small);
                    transition: background-color var(--transition-fast);
                    &:is(:hover, [aria-current]) {
                        background-color: var(--accent);
                    }
                }
                details {
                    border: none;
                    overflow: visible;
                    + details {
                        margin-top: 0;
                    }
                    &[open] summary {
                        border-bottom: none;
                    }
                    > ul {
                        margin-inline-start: var(--space-4);
                        padding: var(--space-1) 0;
                    }
                }
                summary {
                    justify-content: flex-start;
                    gap: var(--space-2);
                    padding: var(--space-2) var(--space-3);
                    font-size: var(--text-7);
                    font-weight: var(--font-medium);
                    color: var(--foreground);
                    border-radius: var(--radius-small);
                    &:after {
                        width: 0.75rem;
                        height: 0.75rem;
                        margin-inline-start: auto;
                    }
                }
            }
        }
    }
    nav[data-topnav] {
        position: fixed;
        inset-block-start: 0;
        inset-inline: 0;
        z-index: 5;
        min-height: var(--topnav-height);
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-4);
        background-color: var(--background);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-small);
    }
    :is([data-sidebar-toggle], [data-sidebar-header]) {
        display: none;
    }
    [data-sidebar-toggle] {
        padding: 0 var(--space-1);
        background: none;
        border: 1px solid var(--border);
        border-radius: var(--radius-small);
        cursor: pointer;
    }
    [data-sidebar-layout="always"] [data-sidebar-toggle] {
        display: inline-block;
    }
    [data-sidebar-layout="always"] {
        transition: grid-template-columns var(--transition);
        > aside[data-sidebar] {
            transform: translate(0);
            opacity: 1;
            transition:
                transform var(--transition),
                opacity var(--transition),
                visibility var(--transition);
        }
    }
    [data-sidebar-layout="always"][data-sidebar-open] {
        grid-template-columns: 0px 1fr;
        gap: 0;
        > aside[data-sidebar] {
            overflow: hidden;
            min-width: 0;
            transform: translate(-100%);
            opacity: 0;
            visibility: hidden;
            border-inline-end: none;
        }
    }
    @media (max-width: 768px) {
        [data-sidebar-layout] {
            grid-template-columns: 1fr;
            > aside[data-sidebar] {
                position: fixed;
                top: var(--topnav-offset);
                left: 0;
                height: calc(100dvh - var(--topnav-offset));
                width: 16rem;
                transform: translate(-100%);
                transition: transform var(--transition);
                box-shadow: var(--shadow-large);
            }
            &[data-sidebar-open] > aside[data-sidebar] {
                transform: translate(0);
            }
        }
        [data-sidebar-layout="always"][data-sidebar-open] {
            grid-template-columns: 1fr;
            gap: var(--space-4);
            > aside[data-sidebar] {
                opacity: 1;
                visibility: visible;
                transform: translate(0);
            }
        }
        [data-sidebar-toggle] {
            display: inline-block;
        }
        [data-sidebar-header] {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-3) var(--space-4);
            border-bottom: 1px solid var(--border);
        }
    }
}
@layer components {
    [role="status"].skeleton {
        margin-block-end: var(--space-3);
        background: var(--muted);
        border-radius: var(--radius-medium);
        animation: shimmer 2s infinite;
        background-size: 200% 100%;
        background-image: linear-gradient(
            90deg,
            var(--muted) 0%,
            color-mix(in srgb, var(--muted) 30%, white) 30%,
            var(--muted) 100%
        );
        [data-theme="dark"] & {
            background-image: linear-gradient(
                90deg,
                var(--muted) 0%,
                color-mix(in srgb, var(--muted) 90%, var(--foreground)) 90%,
                var(--muted) 100%
            );
        }
        &.box {
            width: 4rem;
            height: 4rem;
        }
        &.line {
            height: 1rem;
            width: 100%;
        }
    }
    [role="status"].skeleton:last-child {
        margin-block-end: 0;
    }
    @keyframes shimmer {
        0% {
            background-position: 200% 0;
        }
        to {
            background-position: -200% 0;
        }
    }
}
@layer components {
    [data-tooltip] {
        position: relative;
    }
    [data-tooltip]:before,
    [data-tooltip]:after {
        position: absolute;
        inset-inline-start: 50%;
        opacity: 0;
        visibility: hidden;
        transition:
            opacity var(--transition-fast),
            transform var(--transition-fast),
            visibility var(--transition-fast);
        pointer-events: none;
        z-index: 1000;
    }
    [data-tooltip]:after {
        content: attr(data-tooltip);
        inset-block-end: calc(100% + 10px);
        transform: translate(-50%) translateY(4px);
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-7);
        line-height: 1;
        white-space: nowrap;
        background: var(--foreground);
        color: var(--background);
        border-radius: var(--radius-medium);
    }
    [data-tooltip]:before {
        content: "";
        inset-block-end: calc(100% - 5px);
        transform: translate(-50%) translateY(4px);
        border: 8px solid transparent;
        border-top-color: var(--foreground);
    }
    [data-tooltip]:is(:hover, :focus-visible):before,
    [data-tooltip]:is(:hover, :focus-visible):after {
        opacity: 1;
        visibility: visible;
        transition-delay: 0.7s;
        transform: translate(-50%) translateY(0);
    }
}
@layer utilities {
    [hidden] {
        display: none !important;
    }
    .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;
    }
    .text-left {
        text-align: start;
    }
    .text-center {
        text-align: center;
    }
    .text-right {
        text-align: end;
    }
    .text-light,
    .text-lighter {
        color: var(--muted-foreground);
    }
    .flex {
        display: flex;
    }
    .flex-col {
        flex-direction: column;
    }
    .items-center {
        align-items: center;
    }
    .justify-center {
        justify-content: center;
    }
    .justify-between {
        justify-content: space-between;
    }
    .hstack {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }
    .vstack {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }
    .gap-1 {
        gap: var(--space-1);
    }
    .gap-2 {
        gap: var(--space-2);
    }
    .gap-4 {
        gap: var(--space-4);
    }
    .mt-2 {
        margin-block-start: var(--space-2);
    }
    .mt-4 {
        margin-block-start: var(--space-4);
    }
    .mt-6 {
        margin-block-start: var(--space-6);
    }
    .mb-2 {
        margin-block-end: var(--space-2);
    }
    .mb-4 {
        margin-block-end: var(--space-4);
    }
    .mb-6 {
        margin-block-end: var(--space-6);
    }
    .p-4 {
        padding: var(--space-4);
    }
    .w-100 {
        width: 100%;
    }
}
ul,
ol {
    &.unstyled {
        list-style: none;
        padding-inline-start: 0;
        margin-inline-start: 0;
    }
}