:root {
    --ui-radius-sm: 14px;
    --ui-radius-md: 18px;
    --ui-radius-lg: 28px;
    --ui-gap-xs: 0.45rem;
    --ui-gap-sm: 0.75rem;
    --ui-gap-md: 1rem;
    --ui-gap-lg: 1.4rem;
    --ui-control-min-height: 42px;
    --ui-ring: 0 0 0 3px rgba(94, 234, 212, 0.14);
}

.ui-card,
.card {
    min-width: 0;
}

.ui-card {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--ui-radius-lg);
    padding: clamp(1rem, 0.9vw + 0.85rem, 1.6rem);
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
}

.ui-card--compact,
.compact-card {
    border-radius: 20px;
    padding: 1rem;
}

.ui-card--flat {
    box-shadow: none;
}

.ui-notice,
.notice,
.empty-box {
    display: block;
    min-width: 0;
    border-radius: var(--ui-radius-md);
    padding: 1rem 1.1rem;
    margin: 1rem 0 0;
    overflow-wrap: anywhere;
    line-height: 1.55;
}

.ui-notice--success,
.notice-success {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
}

.ui-notice--error,
.notice-error {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
}

.ui-notice--warning,
.notice-warning {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
}

.ui-notice--info,
.notice-info,
.empty-box {
    background: var(--button-bg);
    border: 1px solid var(--button-border);
}

.ui-actions,
.topbar-actions,
.button-cloud {
    display: flex;
    gap: var(--ui-gap-sm);
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
}

.ui-filter,
.toolbar-form {
    display: flex;
    gap: var(--ui-gap-sm);
    flex-wrap: wrap;
    align-items: flex-end;
    margin-top: 1rem;
    min-width: 0;
}

.ui-filter > *,
.toolbar-form > * {
    min-width: min(100%, 11rem);
}

.ui-filter input,
.ui-filter select,
.toolbar-form input,
.toolbar-form select {
    min-height: var(--ui-control-min-height);
}

.ui-filter .primary-button,
.ui-filter .mini-button,
.toolbar-form .primary-button,
.toolbar-form .mini-button {
    min-height: var(--ui-control-min-height);
}

.ui-table,
.responsive-table,
.table-wrap {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    margin-top: 1rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.ui-table table,
.responsive-table table,
.table-wrap table,
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.ui-table th,
.ui-table td,
.responsive-table th,
.responsive-table td,
.data-table th,
.data-table td {
    vertical-align: top;
    overflow-wrap: anywhere;
}

.ui-table th,
.responsive-table th,
.data-table th {
    color: var(--text-soft);
    font-weight: 700;
}

.ui-action-menu,
.action-menu {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

.ui-action-menu[open],
.action-menu[open] {
    z-index: 180;
}

.ui-action-menu summary,
.action-menu summary {
    min-height: var(--ui-control-min-height);
    white-space: nowrap;
}

.ui-action-panel,
.action-menu-panel {
    min-width: min(100vw - 2rem, 220px);
    max-width: min(28rem, calc(100vw - 2rem));
    overscroll-behavior: contain;
}

@media (max-width: 720px) {
    .ui-card {
        border-radius: 22px;
        padding: 1rem;
    }

    .ui-actions,
    .topbar-actions,
    .button-cloud,
    .ui-filter,
    .toolbar-form {
        width: 100%;
    }

    .ui-actions > *,
    .topbar-actions > *,
    .button-cloud > *,
    .ui-filter > *,
    .toolbar-form > * {
        flex: 1 1 100%;
    }

    .ui-action-menu,
    .action-menu,
    .ui-action-menu summary,
    .action-menu summary,
    .ui-action-panel,
    .action-menu-panel {
        width: 100%;
        max-width: 100%;
    }
}