:root {
    --webi-ui-surface: #ffffff;
    --webi-ui-surface-strong: #111827;
    --webi-ui-surface-soft: rgba(15, 23, 42, 0.72);
    --webi-ui-line: rgba(148, 163, 184, 0.34);
    --webi-ui-ink: #162033;
    --webi-ui-ink-soft: #5f6f86;
    --webi-ui-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.22);
    --webi-ui-primary: #355adf;
    --webi-ui-primary-ink: #ffffff;
    --webi-ui-success: #1f7a46;
    --webi-ui-error: #c24a4a;
    --webi-ui-warning: #b77719;
    --webi-ui-info: #355adf;
    --webi-ui-toast-enter-offset: -0.625rem;
    --webi-ui-toast-gap: 0.75rem;
}

body.webi-ui-lock {
    overflow: hidden;
}

.webi-ui-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.26);
    backdrop-filter: blur(0.375rem);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.webi-ui-dialog-backdrop.is-visible {
    opacity: 1;
}

.webi-ui-dialog {
    width: min(100%, 32.5rem);
}

.webi-ui-dialog-panel {
    border: 0.0625rem solid var(--webi-ui-line);
    border-radius: 0.5rem;
    background: var(--webi-ui-surface);
    color: var(--webi-ui-ink);
    box-shadow: var(--webi-ui-shadow);
    overflow: hidden;
}

.webi-ui-dialog-head {
    margin: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 0;
    position: relative;
    border-bottom: 0.0625rem solid var(--webi-ui-line);
}

.webi-ui-dialog-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--webi-ui-ink);
}

.webi-ui-dialog-close {
    width: 2.8125rem;
    height: 2.8125rem;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    color: transparent;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
    right: -0.5rem;
    top: 0.5rem;
    transition: transform 0.2s ease;
}

.webi-ui-dialog-close:before {
    content: "";
    width: 2rem;
    height: 0.125rem;
    background: var(--webi-ui-ink-soft);
    display: block;
    transform: rotate(45deg);
    position: absolute;
}

.webi-ui-dialog-close:after {
    content: "";
    width: 2rem;
    height: 0.125rem;
    background: var(--webi-ui-ink-soft);
    display: block;
    transform: rotate(-45deg);
    position: absolute;
}

.webi-ui-dialog-close:hover {
    transform: rotate(180deg);
}

.webi-ui-dialog-body {
    padding: 1rem 1.5rem;
}

.webi-ui-dialog-message {
    margin: 0;
    line-height: 1.65;
    color: var(--webi-ui-ink-soft);
    white-space: pre-wrap;
}

.webi-ui-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 1rem 1.5rem;
}

.webi-ui-button {
    min-width: 6rem;
    min-height: 2.625rem;
    padding: 0 1.125rem;
    border: 0.0625rem solid transparent;
    border-radius: 0.875rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        background-color 0.16s ease,
        border-color 0.16s ease;
}

.webi-ui-button:hover {
    transform: translateY(-0.0625rem);
}

.webi-ui-button-primary {
    background: var(--webi-ui-primary);
    color: var(--webi-ui-primary-ink);
    box-shadow: 0 0.75rem 1.75rem rgba(53, 90, 223, 0.22);
}

.webi-ui-button-ghost {
    border-color: var(--webi-ui-line);
    background: rgba(255, 255, 255, 0.94);
    color: var(--webi-ui-ink);
}

.webi-ui-toast-stack {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    width: min(22.5rem, calc(100vw - 2rem));
}

.webi-ui-toast {
    border: 0.0625rem solid var(--webi-ui-line);
    border-left-width: 0.3125rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.98);
    color: var(--webi-ui-ink);
    box-shadow: var(--webi-ui-shadow);
    overflow: hidden;
    max-height: 0;
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(var(--webi-ui-toast-enter-offset)) scale(0.985);
    will-change: max-height, margin-bottom, opacity, transform;
    transition:
        max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        margin-bottom 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.2s ease,
        transform 0.22s ease;
}

.webi-ui-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.webi-ui-toast.is-leaving {
    pointer-events: none;
}

body.admin-context {
    --webi-ui-toast-enter-offset: 0.625rem;
}

body.admin-context .webi-ui-toast-stack {
    top: auto;
    right: 1.25rem;
    bottom: 1.25rem;
    left: auto;
}

.webi-ui-toast-success {
    border-left-color: var(--webi-ui-success);
}

.webi-ui-toast-error {
    border-left-color: var(--webi-ui-error);
}

.webi-ui-toast-warning {
    border-left-color: var(--webi-ui-warning);
}

.webi-ui-toast-info {
    border-left-color: var(--webi-ui-info);
}

.webi-ui-toast-body {
    padding: 1rem 1.125rem 1.0625rem;
}

.webi-ui-toast-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.875rem;
}

.webi-ui-toast-title {
    font-size: 0.95rem;
    font-weight: 700;
}

.webi-ui-toast-close {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -0.375rem -0.5rem 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    font: inherit;
    font-size: 0;
    line-height: 1;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
    top:.5rem;
    right:.5rem;
    transition: transform 0.2s ease;
}

.webi-ui-toast-close::before,
.webi-ui-toast-close::after {
    content: "";
    width: 1.25rem;
    height: 0.125rem;
    background: var(--webi-ui-ink-soft);
    display: block;
    position: absolute;
}

.webi-ui-toast-close::before {
    transform: rotate(45deg);
}

.webi-ui-toast-close::after {
    transform: rotate(-45deg);
}

.webi-ui-toast-close:hover {
    transform: rotate(180deg);
}

.webi-ui-toast-message {
    margin: 0.5rem 0 0;
    color: var(--webi-ui-ink-soft);
    line-height: 1.55;
    white-space: pre-wrap;
}

@media (max-width: 47.9375rem) {
    .webi-ui-dialog-backdrop {
        padding: 1rem;
        align-items: end;
    }

    .webi-ui-dialog {
        width: 100%;
    }


    .webi-ui-dialog-body,
    .webi-ui-dialog-actions {
        padding-left: 1.125rem;
        padding-right: 1.125rem;
    }

    .webi-ui-dialog-actions {
        flex-direction: column-reverse;
    }

    .webi-ui-button {
        width: 100%;
    }

    .webi-ui-toast-stack {
        top: auto;
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
        width: auto;
    }
}