:root {
    --tp-color-deep-blue: #0d1b2a;
    --tp-color-royal-blue: #0b3d91;
    --tp-color-medium-blue: #1677c2;
    --tp-color-tera-green: #10b5a6;
    --tp-color-gray-50: #f2f4f7;
    --tp-color-gray-100: #e5e7eb;
    --tp-color-gray-200: #d0d5dd;
    --tp-color-gray-500: #6b7280;
    --tp-color-gray-700: #344054;
    --tp-color-white: #ffffff;

    --tp-font-family: Inter, "Segoe UI", Arial, sans-serif;
    --tp-font-size-base: 14px;
    --tp-font-weight-base: 400;
    --tp-line-height-base: 1.3;
    --tp-letter-spacing-base: 0;
    --tp-font-heading: Sora, "Segoe UI", Arial, sans-serif;
    --tp-font-body: var(--tp-font-family);

    --ui-page-background: var(--tp-color-gray-50);
    --ui-surface-background: var(--tp-color-white);
    --ui-surface-elevated-background: var(--tp-color-white);
    --ui-surface-muted-background: #f8fafc;
    --ui-field-background: var(--tp-color-white);
    --ui-field-filled-background: var(--tp-color-white);
    --ui-field-readonly-background: #f8fafc;
    --tp-border-subtle: #d0d5dd;
    --tp-border-default: #aeb8c4;
    --tp-border-strong: #667085;
    --ui-border-color: var(--tp-border-subtle);
    --ui-field-border-color: var(--tp-border-default);
    --ui-field-border-hover-color: var(--tp-border-strong);
    --ui-field-disabled-background: #eef2f6;
    --ui-field-disabled-border-color: #c5ccd6;
    --ui-field-padding-y: 8px;
    --ui-field-padding-x: 11px;
    --ui-textarea-padding-y: 10px;
    --ui-textarea-padding-x: 12px;
    --ui-field-min-height: var(--size-control, var(--tp-size-control-medium));
    --tp-control-min-height: var(--tp-size-control-medium);
    --tp-interactive-target-size: var(--tp-size-control-medium);
    --ui-grid-search-background: #fbfcfd;
    --ui-grid-header-background: #e9edf2;
    --ui-grid-header-border: #aeb8c4;
    --ui-grid-header-text: #334155;
    --ui-grid-row-alt-background: #f1f5f9;
    --ui-grid-row-hover-background: #e7f0f8;
    --ui-grid-row-focus-background: #dcecf8;
    --ui-grid-row-border: rgba(208, 213, 221, 0.78);

    --tp-color-primary: var(--tp-color-royal-blue);
    --tp-color-primary-hover: #082f72;
    --tp-color-primary-active: #062757;
    --tp-color-primary-soft: rgba(22, 119, 194, 0.10);
    --tp-color-primary-border: rgba(22, 119, 194, 0.26);
    --tp-color-primary-text: var(--tp-color-primary-hover);
    --tp-color-on-primary: var(--tp-color-white);
    --tp-color-secondary: var(--tp-color-medium-blue);
    --tp-color-success: var(--tp-color-tera-green);
    --tp-color-success-surface: #edf7f1;
    --tp-color-success-border: #b8d6c5;
    --tp-color-success-text: #24543a;
    --tp-color-warning: #b7791f;
    --tp-color-warning-surface: #fff7e6;
    --tp-color-warning-border: #f2d18b;
    --tp-color-warning-text: #7a4f01;
    --tp-color-error: #b42318;
    --tp-color-error-surface: #fff1ef;
    --tp-color-error-border: #e1c7c3;
    --tp-color-error-text: #8f2d24;
    --tp-color-danger: #b42318;
    --tp-color-info: var(--tp-color-medium-blue);
    --tp-color-background: var(--ui-page-background);
    --tp-color-surface: var(--ui-surface-background);
    --tp-color-surface-elevated: var(--ui-surface-elevated-background);
    --tp-color-surface-muted: var(--ui-surface-muted-background);
    --tp-color-text: var(--tp-color-deep-blue);
    --tp-color-text-secondary: var(--tp-color-gray-500);
    --tp-color-text-disabled: #98a2b3;
    --tp-color-text-inverse: var(--tp-color-white);
    --tp-color-text-muted: var(--tp-color-gray-500);
    --tp-color-border: var(--tp-border-subtle);
    --tp-color-border-strong: var(--tp-border-strong);
    --tp-color-focus: rgba(22, 119, 194, 0.32);
    --tp-color-focus-ring: var(--tp-color-focus);
    --tp-color-sidebar-background: var(--tp-color-deep-blue);
    --tp-color-sidebar-text: #f8fafc;
    --tp-color-header-background: var(--tp-color-surface);
    --tp-color-grid-header: var(--ui-grid-header-background);
    --tp-color-grid-row-hover: var(--ui-grid-row-hover-background);
    --tp-color-input-background: var(--ui-field-background);

    --tp-interface-scale: medium;
    --tp-font-size-page-title: 1.625rem;
    --tp-font-size-workspace-title: 1.25rem;
    --tp-font-size-section-title: 1.25rem;
    --tp-font-size-tab: 0.875rem;
    --tp-font-size-label: 0.875rem;
    --tp-font-size-input: 0.9375rem;
    --tp-font-size-grid: 0.875rem;
    --tp-font-size-button: 0.875rem;
    --tp-font-size-meta: 0.8125rem;
    --tp-size-control-medium: 38px;
    --tp-space-panel-medium: 18px;
    --tp-space-field-gap-medium: 6px;
    --tp-field-label-gap: 3px;
    --tp-admin-header-padding-y: 10px;
    --tp-admin-header-padding-x: 28px;
    --tp-admin-header-title-gap: 3px;
    --tp-admin-header-control-height: 40px;
    --tp-admin-footer-padding-y: 8px;
    --tp-admin-footer-padding-x: 28px;
    --tp-admin-footer-min-height: 46px;
    --tp-admin-footer-control-height: 36px;
    --tp-admin-button-gap: 8px;
    --tp-admin-button-icon-only-size: 38px;
    --tp-admin-button-icon-size: 18px;

    --tp-space-1: 4px;
    --tp-space-2: 8px;
    --tp-space-3: 12px;
    --tp-space-4: 16px;
    --tp-space-5: 20px;
    --tp-space-6: 24px;
    --tp-space-8: 32px;
    --tp-space-10: 40px;
    --tp-space-12: 48px;

    --tp-radius-sm: 4px;
    --tp-radius-md: 8px;
    --tp-radius-lg: 12px;
    --tp-shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.08);
    --tp-shadow-md: 0 12px 28px rgba(13, 27, 42, 0.10);
    --tp-shadow-lg: 0 20px 44px rgba(13, 27, 42, 0.14);

    --tp-size-control-sm: 34px;
    --tp-size-control-md: 42px;
    --tp-size-control-lg: 48px;

    --tp-list-density: normal;
    --tp-admin-form-gap: 18px;
    --tp-admin-table-cell-y: var(--tp-list-cell-padding-y);
    --tp-admin-table-cell-x: var(--tp-list-cell-padding-x);
    --tp-list-header-min-height: 34px;
    --tp-list-header-padding-y: 6px;
    --tp-list-header-padding-x: 10px;
    --tp-list-row-min-height: 38px;
    --tp-list-cell-padding-y: 4px;
    --tp-list-cell-padding-x: 10px;
    --tp-list-badge-min-height: 22px;
    --tp-list-badge-padding-y: 3px;
    --tp-list-badge-padding-x: 8px;
    --tp-list-action-min-height: 28px;
    --tp-list-action-padding-y: 5px;
    --tp-list-action-padding-x: 10px;
    --tp-workspace-grid-header-height: var(--tp-list-header-min-height);
    --tp-workspace-grid-header-y: var(--tp-list-header-padding-y);
    --tp-workspace-grid-header-x: var(--tp-list-header-padding-x);
    --tp-workspace-grid-row-height: var(--tp-list-row-min-height);
    --tp-workspace-grid-cell-y: var(--tp-list-cell-padding-y);
    --tp-workspace-grid-cell-x: var(--tp-list-cell-padding-x);
    --tp-workspace-grid-status-height: var(--tp-list-badge-min-height);
    --tp-workspace-grid-action-height: var(--tp-list-action-min-height);
    --tp-choice-gap: var(--tp-space-3);
}

body {
    color: var(--tp-color-text);
    font-family: var(--tp-font-family);
    font-size: var(--tp-font-size-base);
    font-weight: var(--tp-font-weight-base);
    line-height: var(--tp-line-height-base);
    letter-spacing: var(--tp-letter-spacing-base);
}

body[data-ui-appearance="light"],
body[data-ui-appearance="system"] {
    --ui-page-background: #f2f4f7;
    --ui-surface-background: #ffffff;
    --ui-surface-elevated-background: #ffffff;
    --ui-surface-muted-background: #f8fafc;
    --ui-field-background: #ffffff;
    --ui-field-filled-background: #ffffff;
    --ui-field-readonly-background: #f8fafc;
    --tp-border-subtle: #d0d5dd;
    --tp-border-default: #aeb8c4;
    --tp-border-strong: #667085;
    --ui-border-color: var(--tp-border-subtle);
    --ui-field-border-color: var(--tp-border-default);
    --ui-field-border-hover-color: var(--tp-border-strong);
    --ui-field-disabled-background: #eef2f6;
    --ui-field-disabled-border-color: #c5ccd6;
    --ui-grid-search-background: #fbfcfd;
    --ui-grid-header-background: #e9edf2;
    --ui-grid-header-border: #aeb8c4;
    --ui-grid-header-text: #334155;
    --ui-grid-row-alt-background: #f1f5f9;
    --ui-grid-row-hover-background: #e7f0f8;
    --ui-grid-row-focus-background: #dcecf8;
    --ui-grid-row-border: rgba(208, 213, 221, 0.78);
    --tp-color-background: var(--ui-page-background);
    --tp-color-surface: var(--ui-surface-background);
    --tp-color-surface-elevated: var(--ui-surface-elevated-background);
    --tp-color-surface-muted: var(--ui-surface-muted-background);
    --tp-color-text: #0d1b2a;
    --tp-color-text-secondary: #667085;
    --tp-color-text-disabled: #98a2b3;
    --tp-color-text-inverse: #ffffff;
    --tp-color-text-muted: var(--tp-color-text-secondary);
    --tp-color-border: var(--tp-border-subtle);
    --tp-color-border-strong: var(--tp-border-strong);
    --tp-color-header-background: var(--tp-color-surface);
    --tp-color-grid-header: var(--ui-grid-header-background);
    --tp-color-grid-row-hover: var(--ui-grid-row-hover-background);
    --tp-color-input-background: var(--ui-field-background);
}

body[data-ui-appearance="dark"] {
    --ui-page-background: #111827;
    --ui-surface-background: #182231;
    --ui-surface-elevated-background: #202b3a;
    --ui-surface-muted-background: #243244;
    --ui-field-background: #111827;
    --ui-field-filled-background: #1f2937;
    --ui-field-readonly-background: #1f2937;
    --tp-border-subtle: #374151;
    --tp-border-default: #64748b;
    --tp-border-strong: #94a3b8;
    --ui-border-color: var(--tp-border-subtle);
    --ui-field-border-color: var(--tp-border-default);
    --ui-field-border-hover-color: var(--tp-border-strong);
    --ui-field-disabled-background: #182231;
    --ui-field-disabled-border-color: #475569;
    --ui-grid-search-background: #151f2d;
    --ui-grid-header-background: #243244;
    --ui-grid-header-border: #4b5563;
    --ui-grid-header-text: #d1d5db;
    --ui-grid-row-alt-background: #1c2736;
    --ui-grid-row-hover-background: #27364a;
    --ui-grid-row-focus-background: #31435b;
    --ui-grid-row-border: rgba(75, 85, 99, 0.82);
    --tp-color-background: var(--ui-page-background);
    --tp-color-surface: var(--ui-surface-background);
    --tp-color-surface-elevated: var(--ui-surface-elevated-background);
    --tp-color-surface-muted: var(--ui-surface-muted-background);
    --tp-color-text: #f9fafb;
    --tp-color-text-secondary: #cbd5e1;
    --tp-color-text-disabled: #94a3b8;
    --tp-color-text-inverse: #111827;
    --tp-color-text-muted: var(--tp-color-text-secondary);
    --tp-color-border: var(--tp-border-subtle);
    --tp-color-border-strong: var(--tp-border-strong);
    --tp-color-header-background: #182231;
    --tp-color-grid-header: var(--ui-grid-header-background);
    --tp-color-grid-row-hover: var(--ui-grid-row-hover-background);
    --tp-color-input-background: var(--ui-field-background);
    --tp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.26);
    --tp-shadow-md: 0 14px 30px rgba(0, 0, 0, 0.28);
    --tp-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.34);
    --tp-color-success-surface: #123326;
    --tp-color-success-border: #1f6b50;
    --tp-color-success-text: #b7f7d4;
    --tp-color-warning-surface: #3a2d12;
    --tp-color-warning-border: #8a641c;
    --tp-color-warning-text: #fde68a;
    --tp-color-error-surface: #3b1716;
    --tp-color-error-border: #8f2d24;
    --tp-color-error-text: #fecaca;
}

@media (prefers-color-scheme: dark) {
    body[data-ui-appearance="system"] {
        --ui-page-background: #111827;
        --ui-surface-background: #182231;
        --ui-surface-elevated-background: #202b3a;
        --ui-surface-muted-background: #243244;
        --ui-field-background: #111827;
        --ui-field-filled-background: #1f2937;
        --ui-field-readonly-background: #1f2937;
        --tp-border-subtle: #374151;
        --tp-border-default: #64748b;
        --tp-border-strong: #94a3b8;
        --ui-border-color: var(--tp-border-subtle);
        --ui-field-border-color: var(--tp-border-default);
        --ui-field-border-hover-color: var(--tp-border-strong);
        --ui-field-disabled-background: #182231;
        --ui-field-disabled-border-color: #475569;
        --ui-grid-search-background: #151f2d;
        --ui-grid-header-background: #243244;
        --ui-grid-header-border: #4b5563;
        --ui-grid-header-text: #d1d5db;
        --ui-grid-row-alt-background: #1c2736;
        --ui-grid-row-hover-background: #27364a;
        --ui-grid-row-focus-background: #31435b;
        --ui-grid-row-border: rgba(75, 85, 99, 0.82);
        --tp-color-background: var(--ui-page-background);
        --tp-color-surface: var(--ui-surface-background);
        --tp-color-surface-elevated: var(--ui-surface-elevated-background);
        --tp-color-surface-muted: var(--ui-surface-muted-background);
        --tp-color-text: #f9fafb;
        --tp-color-text-secondary: #cbd5e1;
        --tp-color-text-disabled: #94a3b8;
        --tp-color-text-inverse: #111827;
        --tp-color-text-muted: var(--tp-color-text-secondary);
        --tp-color-border: var(--tp-border-subtle);
        --tp-color-border-strong: var(--tp-border-strong);
        --tp-color-header-background: #182231;
        --tp-color-grid-header: var(--ui-grid-header-background);
        --tp-color-grid-row-hover: var(--ui-grid-row-hover-background);
        --tp-color-input-background: var(--ui-field-background);
        --tp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.26);
        --tp-shadow-md: 0 14px 30px rgba(0, 0, 0, 0.28);
        --tp-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.34);
        --tp-color-success-surface: #123326;
        --tp-color-success-border: #1f6b50;
        --tp-color-success-text: #b7f7d4;
        --tp-color-warning-surface: #3a2d12;
        --tp-color-warning-border: #8a641c;
        --tp-color-warning-text: #fde68a;
        --tp-color-error-surface: #3b1716;
        --tp-color-error-border: #8f2d24;
        --tp-color-error-text: #fecaca;
    }
}

body[data-ui-font="default"] {
    --tp-font-family: Inter, "Segoe UI", Arial, sans-serif;
}

body[data-ui-font="arial"] {
    --tp-font-family: Arial, sans-serif;
}

body[data-ui-font="inter"] {
    --tp-font-family: Inter, "Segoe UI", Arial, sans-serif;
}

body[data-ui-font="roboto"] {
    --tp-font-family: Roboto, "Segoe UI", Arial, sans-serif;
}

body[data-ui-font="segoe-ui"] {
    --tp-font-family: "Segoe UI", Arial, sans-serif;
}

body[data-ui-font="verdana"] {
    --tp-font-family: Verdana, Arial, sans-serif;
}

body[data-ui-font="tahoma"] {
    --tp-font-family: Tahoma, Arial, sans-serif;
}

body[data-ui-font="georgia"] {
    --tp-font-family: Georgia, "Times New Roman", serif;
}

body[data-ui-scale="small"] {
    --tp-interface-scale: small;
    --tp-font-size-page-title: 1.4375rem;
    --tp-font-size-workspace-title: 1.125rem;
    --tp-font-size-section-title: 1.12rem;
    --tp-font-size-tab: 0.8125rem;
    --tp-font-size-label: 0.8125rem;
    --tp-font-size-input: 0.875rem;
    --tp-font-size-grid: 0.8125rem;
    --tp-font-size-button: 0.8125rem;
    --tp-font-size-meta: 0.75rem;
    --tp-size-control-medium: 34px;
    --tp-size-control-sm: 30px;
    --tp-size-control-md: 38px;
    --tp-size-control-lg: 44px;
    --font-size-page-title: var(--tp-font-size-page-title);
    --font-size-section-title: var(--tp-font-size-section-title);
    --font-size-tab: var(--tp-font-size-tab);
    --font-size-label: var(--tp-font-size-label);
    --font-size-input: var(--tp-font-size-input);
    --font-size-grid: var(--tp-font-size-grid);
    --font-size-button: var(--tp-font-size-button);
    --font-size-meta: var(--tp-font-size-meta);
    --size-control: var(--tp-size-control-medium);
    --tp-control-min-height: var(--tp-size-control-medium);
    --tp-interactive-target-size: var(--tp-size-control-medium);
}

body[data-ui-scale="medium"] {
    --tp-interface-scale: medium;
    --font-size-page-title: var(--tp-font-size-page-title);
    --font-size-section-title: var(--tp-font-size-section-title);
    --font-size-tab: var(--tp-font-size-tab);
    --font-size-label: var(--tp-font-size-label);
    --font-size-input: var(--tp-font-size-input);
    --font-size-grid: var(--tp-font-size-grid);
    --font-size-button: var(--tp-font-size-button);
    --font-size-meta: var(--tp-font-size-meta);
    --size-control: var(--tp-size-control-medium);
    --tp-control-min-height: var(--tp-size-control-medium);
    --tp-interactive-target-size: var(--tp-size-control-medium);
}

body[data-ui-scale="large"] {
    --tp-interface-scale: large;
    --tp-font-size-page-title: 1.8125rem;
    --tp-font-size-workspace-title: 1.375rem;
    --tp-font-size-section-title: 1.38rem;
    --tp-font-size-tab: 0.9375rem;
    --tp-font-size-label: 0.9375rem;
    --tp-font-size-input: 1rem;
    --tp-font-size-grid: 0.9375rem;
    --tp-font-size-button: 0.9375rem;
    --tp-font-size-meta: 0.875rem;
    --tp-size-control-medium: 44px;
    --tp-size-control-sm: 38px;
    --tp-size-control-md: 48px;
    --tp-size-control-lg: 54px;
    --font-size-page-title: var(--tp-font-size-page-title);
    --font-size-section-title: var(--tp-font-size-section-title);
    --font-size-tab: var(--tp-font-size-tab);
    --font-size-label: var(--tp-font-size-label);
    --font-size-input: var(--tp-font-size-input);
    --font-size-grid: var(--tp-font-size-grid);
    --font-size-button: var(--tp-font-size-button);
    --font-size-meta: var(--tp-font-size-meta);
    --size-control: var(--tp-size-control-medium);
    --tp-control-min-height: var(--tp-size-control-medium);
    --tp-interactive-target-size: var(--tp-size-control-medium);
}

body[data-ui-work-profile="touch"] {
    --tp-control-min-height: 44px;
    --tp-interactive-target-size: 44px;
    --tp-admin-button-icon-only-size: 44px;
}

body[data-ui-density="compact"],
body[data-ui-list-density="compact"] {
    --tp-list-density: compact;
    --tp-list-header-min-height: 30px;
    --tp-list-header-padding-y: 4px;
    --tp-list-header-padding-x: 8px;
    --tp-list-row-min-height: 32px;
    --tp-list-cell-padding-y: 3px;
    --tp-list-cell-padding-x: 8px;
    --tp-list-badge-min-height: 20px;
    --tp-list-badge-padding-y: 2px;
    --tp-list-badge-padding-x: 7px;
    --tp-list-action-min-height: 24px;
    --tp-list-action-padding-y: 3px;
    --tp-list-action-padding-x: 9px;
}

body[data-ui-density="normal"],
body[data-ui-list-density="normal"] {
    --tp-list-density: normal;
}

body[data-ui-density="comfortable"],
body[data-ui-list-density="comfortable"] {
    --tp-list-density: comfortable;
    --tp-list-header-min-height: 42px;
    --tp-list-header-padding-y: 9px;
    --tp-list-header-padding-x: 14px;
    --tp-list-row-min-height: 48px;
    --tp-list-cell-padding-y: 8px;
    --tp-list-cell-padding-x: 14px;
    --tp-list-badge-min-height: 26px;
    --tp-list-badge-padding-y: 4px;
    --tp-list-badge-padding-x: 9px;
    --tp-list-action-min-height: 34px;
    --tp-list-action-padding-y: 6px;
    --tp-list-action-padding-x: 11px;
}

body[data-ui-profile="classico"] {
    --ui-page-background: var(--tp-color-gray-50);
    --ui-surface-background: var(--tp-color-white);
    --ui-surface-muted-background: #f8fafc;
    --ui-field-background: var(--tp-color-white);
    --ui-field-filled-background: var(--tp-color-white);
    --ui-field-readonly-background: #f8fafc;
    --ui-border-color: var(--tp-border-subtle);
    --ui-field-border-color: var(--tp-border-default);
    --tp-field-label-gap: 3px;
    --tp-font-size-workspace-title: 1.25rem;
}

body[data-ui-profile="compacto"] {
    --ui-page-background: #eef2f6;
    --ui-surface-background: #ffffff;
    --ui-surface-muted-background: #f7f9fb;
    --ui-field-background: #ffffff;
    --ui-field-filled-background: #f8fafc;
    --ui-field-readonly-background: #eef2f6;
    --ui-border-color: var(--tp-border-subtle);
    --ui-field-border-color: var(--tp-border-default);
    --ui-field-padding-y: 6px;
    --ui-field-padding-x: 10px;
    --ui-textarea-padding-y: 8px;
    --ui-textarea-padding-x: 10px;
    --ui-field-min-height: calc(var(--size-control) - 2px);
    --tp-admin-form-gap: 14px;
    --tp-space-panel-medium: 16px;
    --tp-space-field-gap-medium: 4px;
    --tp-field-label-gap: 2px;
    --tp-font-size-workspace-title: 1.125rem;
    --tp-admin-header-padding-y: 8px;
    --tp-admin-header-title-gap: 2px;
    --tp-admin-header-control-height: 38px;
    --tp-admin-footer-padding-y: 6px;
    --tp-admin-footer-min-height: 42px;
    --tp-admin-footer-control-height: 34px;
    --tp-admin-button-icon-only-size: 36px;
    --tp-choice-gap: var(--tp-space-2);
    --ui-grid-search-background: #f6f8fa;
    --ui-grid-row-alt-background: #f3f6f9;
}

body[data-ui-profile="conforto"] {
    --ui-page-background: #eef1f4;
    --ui-surface-background: #fbfcfd;
    --ui-surface-muted-background: #f4f6f8;
    --ui-field-background: #ffffff;
    --ui-field-filled-background: #f5f8f7;
    --ui-field-readonly-background: #edf1f4;
    --ui-border-color: var(--tp-border-subtle);
    --ui-field-border-color: var(--tp-border-default);
    --ui-grid-search-background: #f4f6f8;
    --ui-grid-header-background: #e7ecef;
    --ui-grid-header-border: #c4ccd4;
    --ui-grid-header-text: #3b4652;
    --ui-grid-row-alt-background: #f6f8f9;
    --ui-grid-row-hover-background: #edf3f4;
    --ui-grid-row-focus-background: #e5eeee;
    --ui-grid-row-border: rgba(199, 209, 218, 0.82);
    --tp-shadow-md: 0 10px 24px rgba(13, 27, 42, 0.07);
    --tp-shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.05);
    --tp-field-label-gap: 4px;
    --tp-font-size-workspace-title: 1.3125rem;
    --tp-admin-header-padding-y: 12px;
    --tp-admin-header-title-gap: 4px;
    --tp-admin-header-control-height: 42px;
    --tp-admin-footer-padding-y: 10px;
    --tp-admin-footer-min-height: 50px;
    --tp-admin-footer-control-height: 38px;
    --tp-admin-button-icon-only-size: 40px;
}

body[data-ui-appearance="dark"] {
    --ui-page-background: #111827;
    --ui-surface-background: #182231;
    --ui-surface-elevated-background: #202b3a;
    --ui-surface-muted-background: #243244;
    --ui-field-background: #111827;
    --ui-field-filled-background: #1f2937;
    --ui-field-readonly-background: #1f2937;
    --tp-border-subtle: #374151;
    --tp-border-default: #64748b;
    --tp-border-strong: #94a3b8;
    --ui-border-color: var(--tp-border-subtle);
    --ui-field-border-color: var(--tp-border-default);
    --ui-field-border-hover-color: var(--tp-border-strong);
    --ui-field-disabled-background: #182231;
    --ui-field-disabled-border-color: #475569;
    --ui-grid-search-background: #151f2d;
    --ui-grid-header-background: #243244;
    --ui-grid-header-border: #4b5563;
    --ui-grid-header-text: #d1d5db;
    --ui-grid-row-alt-background: #1c2736;
    --ui-grid-row-hover-background: #27364a;
    --ui-grid-row-focus-background: #31435b;
    --ui-grid-row-border: rgba(75, 85, 99, 0.82);
    --tp-color-background: var(--ui-page-background);
    --tp-color-surface: var(--ui-surface-background);
    --tp-color-surface-elevated: var(--ui-surface-elevated-background);
    --tp-color-surface-muted: var(--ui-surface-muted-background);
    --tp-color-text: #f9fafb;
    --tp-color-text-secondary: #cbd5e1;
    --tp-color-text-disabled: #94a3b8;
    --tp-color-text-inverse: #111827;
    --tp-color-text-muted: var(--tp-color-text-secondary);
    --tp-color-border: var(--tp-border-subtle);
    --tp-color-border-strong: var(--tp-border-strong);
    --tp-color-header-background: #182231;
    --tp-color-grid-header: var(--ui-grid-header-background);
    --tp-color-grid-row-hover: var(--ui-grid-row-hover-background);
    --tp-color-input-background: var(--ui-field-background);
    --tp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.26);
    --tp-shadow-md: 0 14px 30px rgba(0, 0, 0, 0.28);
    --tp-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.34);
}

@media (prefers-color-scheme: dark) {
    body[data-ui-appearance="system"] {
        --ui-page-background: #111827;
        --ui-surface-background: #182231;
        --ui-surface-elevated-background: #202b3a;
        --ui-surface-muted-background: #243244;
        --ui-field-background: #111827;
        --ui-field-filled-background: #1f2937;
        --ui-field-readonly-background: #1f2937;
        --tp-border-subtle: #374151;
        --tp-border-default: #64748b;
        --tp-border-strong: #94a3b8;
        --ui-border-color: var(--tp-border-subtle);
        --ui-field-border-color: var(--tp-border-default);
        --ui-field-border-hover-color: var(--tp-border-strong);
        --ui-field-disabled-background: #182231;
        --ui-field-disabled-border-color: #475569;
        --ui-grid-search-background: #151f2d;
        --ui-grid-header-background: #243244;
        --ui-grid-header-border: #4b5563;
        --ui-grid-header-text: #d1d5db;
        --ui-grid-row-alt-background: #1c2736;
        --ui-grid-row-hover-background: #27364a;
        --ui-grid-row-focus-background: #31435b;
        --ui-grid-row-border: rgba(75, 85, 99, 0.82);
        --tp-color-background: var(--ui-page-background);
        --tp-color-surface: var(--ui-surface-background);
        --tp-color-surface-elevated: var(--ui-surface-elevated-background);
        --tp-color-surface-muted: var(--ui-surface-muted-background);
        --tp-color-text: #f9fafb;
        --tp-color-text-secondary: #cbd5e1;
        --tp-color-text-disabled: #94a3b8;
        --tp-color-text-inverse: #111827;
        --tp-color-text-muted: var(--tp-color-text-secondary);
        --tp-color-border: var(--tp-border-subtle);
        --tp-color-border-strong: var(--tp-border-strong);
        --tp-color-header-background: #182231;
        --tp-color-grid-header: var(--ui-grid-header-background);
        --tp-color-grid-row-hover: var(--ui-grid-row-hover-background);
        --tp-color-input-background: var(--ui-field-background);
        --tp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.26);
        --tp-shadow-md: 0 14px 30px rgba(0, 0, 0, 0.28);
        --tp-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.34);
    }
}

h1,
h2,
h3,
h4,
.tp-heading {
    font-family: var(--tp-font-heading);
    letter-spacing: 0;
}

.tp-stack {
    display: grid;
    gap: var(--tp-space-4);
}

.tp-stack-lg {
    display: grid;
    gap: var(--tp-space-8);
}

.tp-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tp-space-3);
    align-items: center;
}

.tp-icon {
    display: inline-block;
    flex: 0 0 auto;
    color: currentColor;
    vertical-align: middle;
}

.tp-icon-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--tp-space-3);
}

.tp-icon-sample {
    display: grid;
    gap: var(--tp-space-2);
    justify-items: start;
    border: 1px solid var(--tp-color-border);
    border-radius: var(--tp-radius-md);
    background: var(--tp-color-surface);
    padding: var(--tp-space-4);
    color: var(--tp-color-text);
}

.tp-icon-sample code {
    color: var(--tp-color-text-muted);
    font-size: 0.82rem;
}

.tp-section {
    display: grid;
    gap: var(--tp-space-5);
}

.tp-section + .tp-section {
    margin-top: var(--tp-space-8);
}

.tp-section-header {
    display: grid;
    gap: var(--tp-space-2);
}

.tp-section-header h2 {
    margin: 0;
    color: var(--tp-color-text);
    font-size: 1.35rem;
}

.tp-section-header p {
    max-width: 760px;
    margin: 0;
    color: var(--tp-color-text-muted);
    line-height: 1.6;
}

.tp-playground-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--tp-space-3);
}

.tp-meta-item {
    border: 1px solid var(--tp-color-border);
    border-radius: var(--tp-radius-md);
    background: var(--tp-color-surface-muted);
    padding: var(--tp-space-3);
}

.tp-meta-item strong {
    display: block;
    margin-bottom: var(--tp-space-1);
    color: var(--tp-color-text);
}

.tp-meta-item span {
    color: var(--tp-color-text-muted);
    font-size: 0.92rem;
}

.tp-code {
    overflow-x: auto;
    border: 1px solid var(--tp-color-border);
    border-radius: var(--tp-radius-md);
    background: #071421;
    color: #e6edf3;
    padding: var(--tp-space-4);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.9rem;
    line-height: 1.55;
}

.tp-note-list {
    margin: 0;
    padding-left: var(--tp-space-5);
    color: var(--tp-color-text-muted);
    line-height: 1.6;
}

.tp-button {
    display: inline-flex;
    min-height: var(--tp-size-control-md);
    align-items: center;
    justify-content: center;
    gap: var(--tp-space-2);
    border: 1px solid transparent;
    border-radius: var(--tp-radius-md);
    padding: 0 var(--tp-space-4);
    background: var(--tp-color-primary);
    color: var(--tp-color-white);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.tp-button:hover {
    background: var(--tp-color-primary-hover);
}

.tp-button:focus-visible,
.tp-input:focus,
.tp-select:focus,
.tp-textarea:focus,
.tp-check input:focus-visible,
.tp-pagination a:focus-visible,
.tp-pagination button:focus-visible {
    outline: 3px solid var(--tp-color-focus);
    outline-offset: 2px;
}

.tp-button:active {
    transform: translateY(1px);
}

.tp-button[disabled],
.tp-button.is-disabled {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

.tp-button--secondary {
    border-color: var(--tp-color-border);
    background: var(--tp-color-surface);
    color: var(--tp-color-text);
}

.tp-button--secondary:hover {
    background: var(--tp-color-surface-muted);
}

.tp-button--success {
    background: var(--tp-color-success);
    color: var(--tp-color-deep-blue);
}

.tp-button--warning {
    background: var(--tp-color-warning);
}

.tp-button--danger {
    background: var(--tp-color-danger);
}

.tp-button--link {
    min-height: auto;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--tp-color-primary);
}

.tp-button--icon {
    width: var(--tp-size-control-md);
    padding: 0;
}

.tp-button--sm {
    min-height: var(--tp-size-control-sm);
    padding-inline: var(--tp-space-3);
    font-size: 0.9rem;
}

.tp-button--lg {
    min-height: var(--tp-size-control-lg);
    padding-inline: var(--tp-space-6);
    font-size: 1.05rem;
}

.tp-button.is-loading::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
}

.tp-field {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: var(--tp-space-2);
}

.tp-label + :is(.tp-input, .tp-select, .tp-textarea) {
    margin-top: calc(var(--tp-field-label-gap, 3px) - var(--tp-space-2));
}

.tp-label {
    color: var(--tp-color-text);
    font-weight: 700;
}

.tp-required {
    color: var(--tp-color-danger);
}

.tp-help,
.tp-validation {
    color: var(--tp-color-text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.tp-validation--error {
    color: var(--tp-color-danger);
}

.tp-validation--success {
    color: #087f74;
}

.tp-input,
.tp-select,
.tp-textarea {
    width: 100%;
    min-height: var(--ui-field-min-height, var(--tp-size-control-md));
    border: 1px solid var(--tp-border-default);
    border-radius: var(--tp-radius-md);
    padding:
        var(--ui-field-padding-y, 10px)
        var(--ui-field-padding-x, 12px);
    background: var(--ui-field-background, var(--tp-color-surface));
    color: var(--tp-color-text);
}

.tp-input:hover:not(:disabled):not([readonly]),
.tp-select:hover:not(:disabled),
.tp-textarea:hover:not(:disabled):not([readonly]) {
    border-color: var(--ui-field-border-hover-color, var(--tp-border-strong));
}

.tp-input:focus,
.tp-select:focus,
.tp-textarea:focus {
    border-color: var(--tp-color-primary);
}

.tp-input.has-value,
.tp-select.has-value,
.tp-textarea.has-value {
    background: var(--ui-field-filled-background, var(--tp-color-surface));
}

.tp-textarea {
    min-height: 104px;
    padding:
        var(--ui-textarea-padding-y, 10px)
        var(--ui-textarea-padding-x, 12px);
    resize: vertical;
}

.tp-input[readonly],
.tp-select[readonly],
.tp-textarea[readonly] {
    background: var(--ui-field-readonly-background, var(--tp-color-gray-50));
    color: var(--tp-color-text-muted);
}

.tp-input[disabled],
.tp-select[disabled],
.tp-textarea[disabled] {
    border-color: var(--ui-field-disabled-border-color, var(--tp-border-subtle));
    background: var(--ui-field-disabled-background, var(--tp-color-gray-50));
    color: var(--tp-color-text-disabled);
    cursor: not-allowed;
}

.tp-field--error .tp-input,
.tp-field--error .tp-select,
.tp-field--error .tp-textarea {
    border-color: var(--tp-color-danger);
}

.tp-field--success .tp-input,
.tp-field--success .tp-select,
.tp-field--success .tp-textarea {
    border-color: var(--tp-color-success);
}

.tp-field--warning .tp-input,
.tp-field--warning .tp-select,
.tp-field--warning .tp-textarea {
    border-color: var(--tp-color-warning);
}

.tp-field--info .tp-input,
.tp-field--info .tp-select,
.tp-field--info .tp-textarea {
    border-color: var(--tp-color-info);
}

.tp-check {
    display: inline-flex;
    gap: var(--tp-space-2);
    align-items: center;
    color: var(--tp-color-text);
    font-weight: 650;
}

.tp-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--tp-color-primary);
}

.tp-choice-group {
    display: grid;
    gap: var(--tp-choice-gap);
    min-width: 0;
    margin: 0;
    border: 0;
    padding: 0;
}

.tp-choice-group legend {
    padding: 0;
}

.tp-choice-heading {
    display: inline-flex;
    gap: var(--tp-space-2);
    align-items: center;
}

.tp-help-button {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid var(--tp-color-border);
    border-radius: var(--tp-radius-md);
    background: var(--tp-color-surface);
    color: var(--tp-color-text-muted);
    padding: 0;
    cursor: help;
}

.tp-help-button:hover,
.tp-help-button:focus-visible {
    border-color: var(--tp-color-secondary);
    color: var(--tp-color-primary);
}

.tp-help-button:focus-visible {
    outline: 3px solid var(--tp-color-focus);
    outline-offset: 2px;
}

.tp-choice-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tp-choice-gap);
}

.tp-choice-list--stacked {
    align-items: stretch;
}

.tp-choice-list--described .tp-choice {
    flex: 1 1 220px;
    align-items: flex-start;
}

.tp-choice {
    min-height: var(--tp-size-control-md);
    border: 1px solid var(--tp-color-border);
    border-radius: var(--tp-radius-md);
    background: var(--tp-color-surface);
    padding: var(--tp-space-2) var(--tp-space-3);
}

.tp-choice > span {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--tp-space-1);
    align-items: baseline;
}

.tp-choice-recommended {
    color: var(--tp-color-text-muted);
    font-size: 0.78rem;
    font-weight: 650;
}

.tp-color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border: 1px solid var(--tp-color-border);
    border-radius: 50%;
    background: var(--tp-choice-swatch, var(--tp-color-primary));
    box-shadow: inset 0 0 0 2px var(--tp-color-surface);
}

.tp-choice-description {
    flex-basis: 100%;
    color: var(--tp-color-text-muted);
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.35;
}

.tp-choice-detail {
    flex: 1 1 220px;
    align-items: flex-start;
}

.tp-choice-detail span {
    display: grid;
    gap: var(--tp-space-1);
}

.tp-choice-detail small {
    color: var(--tp-color-text-muted);
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.35;
}

.tp-card {
    display: grid;
    gap: var(--tp-space-4);
    border: 1px solid var(--tp-border-subtle);
    border-radius: var(--tp-radius-md);
    background: var(--tp-color-surface);
    padding: var(--tp-space-5);
    box-shadow: var(--tp-shadow-sm);
}

.tp-card--disabled {
    opacity: 0.62;
}

.tp-card-header {
    display: flex;
    gap: var(--tp-space-4);
    align-items: flex-start;
    justify-content: space-between;
}

.tp-card-title {
    margin: 0;
    font-size: 1.05rem;
}

.tp-indicator {
    display: grid;
    gap: var(--tp-space-2);
}

.tp-indicator strong {
    font-size: 1.8rem;
}

.tp-alert {
    border: 1px solid var(--tp-color-border);
    border-left: 4px solid var(--tp-color-info);
    border-radius: var(--tp-radius-md);
    background: var(--tp-color-surface);
    padding: var(--tp-space-4);
    color: var(--tp-color-text);
}

.tp-alert--success {
    border-left-color: var(--tp-color-success);
}

.tp-alert--warning {
    border-left-color: var(--tp-color-warning);
}

.tp-alert--danger {
    border-left-color: var(--tp-color-danger);
}

.tp-badge {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    border: 1px solid var(--tp-color-border);
    border-radius: 999px;
    padding: 2px 10px;
    background: var(--tp-color-surface-muted);
    color: var(--tp-color-text);
    font-size: 0.82rem;
    font-weight: 750;
}

.tp-badge--active {
    border-color: rgba(16, 181, 166, 0.28);
    background: rgba(16, 181, 166, 0.12);
}

.tp-badge--inactive {
    background: var(--tp-color-gray-50);
    color: var(--tp-color-text-muted);
}

.tp-badge--pending {
    border-color: rgba(183, 121, 31, 0.30);
    background: rgba(183, 121, 31, 0.12);
}

.tp-badge--blocked {
    border-color: rgba(180, 35, 24, 0.28);
    background: rgba(180, 35, 24, 0.10);
}

.tp-badge--demo {
    border-color: var(--tp-color-primary-border);
    background: var(--tp-color-primary-soft);
}

.tp-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tp-space-2);
    align-items: center;
    color: var(--tp-color-text-muted);
    font-size: 0.92rem;
}

.tp-breadcrumb a {
    color: var(--tp-color-primary);
    text-decoration: none;
}

.tp-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--tp-color-border);
    border-radius: var(--tp-radius-md);
    background: var(--tp-color-surface);
}

.tp-table {
    width: 100%;
    border-collapse: collapse;
}

.tp-table th,
.tp-table td {
    border-bottom: 1px solid var(--tp-color-border);
    padding: var(--tp-space-3) var(--tp-space-4);
    text-align: left;
    white-space: nowrap;
}

.tp-table th {
    color: var(--tp-color-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.tp-table tbody tr:hover {
    background: var(--tp-color-surface-muted);
}

.tp-table tr.is-selected {
    background: var(--tp-color-primary-soft);
}

.tp-table-empty,
.tp-table-loading {
    padding: var(--tp-space-8);
    color: var(--tp-color-text-muted);
    text-align: center;
}

.tp-filter-bar {
    display: grid;
    gap: var(--tp-space-4);
    border: 1px solid var(--tp-color-border);
    border-radius: var(--tp-radius-md);
    background: var(--tp-color-surface);
    padding: var(--tp-space-4);
}

.tp-filter-disclosure {
    display: grid;
    gap: var(--tp-space-4);
}

.tp-filter-disclosure summary {
    width: fit-content;
    color: var(--tp-color-primary);
    font-weight: 750;
    cursor: pointer;
}

.tp-filter-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(140px, 180px)) auto;
    gap: var(--tp-space-3);
    align-items: end;
}

.tp-table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tp-space-2);
    align-items: center;
    justify-content: space-between;
}

.tp-sort-button {
    display: inline-flex;
    gap: var(--tp-space-1);
    align-items: center;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 800;
    text-transform: inherit;
    cursor: pointer;
}

.tp-result-count {
    color: var(--tp-color-text-muted);
    font-weight: 650;
}

.tp-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tp-space-2);
    align-items: center;
    justify-content: space-between;
}

.tp-page-list {
    display: flex;
    gap: var(--tp-space-1);
    align-items: center;
}

.tp-page-list a,
.tp-page-list button {
    display: inline-flex;
    min-width: 36px;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tp-color-border);
    border-radius: var(--tp-radius-md);
    background: var(--tp-color-surface);
    color: var(--tp-color-text);
    text-decoration: none;
}

.tp-page-list .is-current {
    border-color: var(--tp-color-primary);
    background: var(--tp-color-primary);
    color: var(--tp-color-white);
}

.tp-empty-state {
    display: grid;
    gap: var(--tp-space-3);
    justify-items: start;
    border: 1px dashed var(--tp-color-border);
    border-radius: var(--tp-radius-md);
    background: var(--tp-color-surface);
    padding: var(--tp-space-6);
}

.tp-empty-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: var(--tp-radius-md);
    background: rgba(16, 181, 166, 0.14);
    color: var(--tp-color-deep-blue);
    font-weight: 800;
}

.tp-debug-toggle {
    justify-self: start;
}

html.tp-debug *,
html.tp-debug *::before,
html.tp-debug *::after {
    outline: 1px dashed rgba(180, 35, 24, 0.55);
    outline-offset: -1px;
}

html.tp-debug .tp-section,
html.tp-debug .admin-content,
html.tp-debug .admin-header,
html.tp-debug .admin-sidebar {
    box-shadow: inset 0 0 0 2px rgba(22, 119, 194, 0.55);
}

html.tp-debug button,
html.tp-debug a,
html.tp-debug input,
html.tp-debug select,
html.tp-debug textarea {
    box-shadow: 0 0 0 3px rgba(16, 181, 166, 0.32);
}

.tp-swatch-grid,
.tp-demo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tp-space-4);
}

.tp-swatch {
    display: grid;
    gap: var(--tp-space-2);
    border: 1px solid var(--tp-color-border);
    border-radius: var(--tp-radius-md);
    padding: var(--tp-space-4);
    background: var(--tp-color-surface);
}

.tp-swatch-chip {
    height: 58px;
    border-radius: var(--tp-radius-md);
    border: 1px solid rgba(13, 27, 42, 0.12);
}

.tp-demo-surface {
    display: grid;
    gap: var(--tp-space-6);
    max-width: 1180px;
}

.tp-demo-hero {
    display: grid;
    gap: var(--tp-space-3);
    border-left: 5px solid var(--tp-color-primary);
    background: var(--tp-color-surface);
    padding: var(--tp-space-6);
}

.tp-demo-hero h2 {
    margin: 0;
    color: var(--tp-color-text);
    font-size: 2rem;
}

.tp-demo-hero p {
    max-width: 820px;
    margin: 0;
    color: var(--tp-color-text-muted);
    line-height: 1.6;
}

.tp-menu-demo,
.tp-menu-demo-group,
.tp-mobile-menu-panel {
    --tp-demo-sidebar-bg: #0d1b2a;
    --tp-demo-sidebar-soft: rgba(255, 255, 255, 0.10);
    --tp-demo-sidebar-active: var(--tp-color-primary-soft);
    --tp-demo-sidebar-text: #f8fafc;
    --tp-demo-sidebar-muted: #b7c4d4;
}

.tp-menu-demo {
    display: grid;
    gap: var(--tp-space-2);
    border-radius: var(--tp-radius-md);
    background: var(--tp-demo-sidebar-bg);
    color: var(--tp-demo-sidebar-muted);
    padding: var(--tp-space-3);
}

.tp-menu-demo-brand,
.tp-menu-demo-link,
.tp-menu-demo-group {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: var(--tp-space-2);
    border: 0;
    border-radius: var(--tp-radius-md);
    padding: var(--tp-space-2) var(--tp-space-3);
    background: transparent;
    color: inherit;
    text-align: left;
}

.tp-menu-demo-brand {
    color: var(--tp-demo-sidebar-text);
}

.tp-menu-demo-link.is-active,
.tp-menu-demo--collapsed .is-active {
    border-left: 3px solid var(--tp-color-primary);
    background: var(--tp-demo-sidebar-active);
    color: var(--tp-demo-sidebar-text);
}

.tp-menu-demo-group {
    justify-content: space-between;
    background: var(--tp-demo-sidebar-soft);
    color: var(--tp-demo-sidebar-text);
    font: inherit;
    font-weight: 700;
}

.tp-menu-demo--collapsed {
    width: 76px;
    justify-items: center;
}

.tp-menu-demo--collapsed span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: var(--tp-radius-md);
}

.tp-mobile-menu-demo {
    min-height: 170px;
    border-radius: var(--tp-radius-md);
    background: rgba(13, 27, 42, 0.35);
    padding: var(--tp-space-3);
}

.tp-mobile-menu-panel {
    display: grid;
    gap: var(--tp-space-2);
    width: min(72%, 230px);
    min-height: 144px;
    border-radius: var(--tp-radius-md);
    background: var(--tp-demo-sidebar-bg);
    color: var(--tp-demo-sidebar-muted);
    padding: var(--tp-space-3);
}

@media (max-width: 980px) {
    .tp-swatch-grid,
    .tp-demo-grid,
    .tp-icon-grid,
    .tp-playground-meta,
    .tp-filter-row {
        grid-template-columns: 1fr;
    }

    .tp-card-header,
    .tp-pagination {
        align-items: stretch;
        flex-direction: column;
    }
}