@font-face {
font-family: "Geist";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/geist-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
font-family: "Geist";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/geist-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
font-family: "Geist Mono";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/geist-mono-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
font-family: "Geist Mono";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/geist-mono-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
--gray-0: #ffffff;
--gray-25: #fafafb;
--gray-50: #f4f4f6;
--gray-100: #ebebee;
--gray-150: #e2e2e6;
--gray-200: #d3d3d9;
--gray-300: #b4b4bc;
--gray-400: #8e8e97;
--gray-500: #6c6c75;
--gray-600: #52525b;
--gray-700: #3d3d45;
--gray-800: #26262c;
--gray-900: #16161a;
--gray-950: #0e0e11;
--ground-light: #f5f5f7;
--ground-dark: #09090b;
--color-bg: #f5f5f7;
--color-bg-subtle: #f0f0f3;
--color-surface: var(--gray-0);
--color-surface-raised: var(--gray-0);
--color-surface-float: var(--gray-0);
--color-surface-hover: #f7f7f9;
--color-border: rgba(17, 17, 20, 0.085);
--color-border-subtle: rgba(17, 17, 20, 0.06);
--color-border-strong: rgba(17, 17, 20, 0.14);
--color-border-control: var(--gray-400);
--color-border-control-hover: var(--gray-500);
--color-text: #111114;
--color-text-secondary: var(--gray-600);
--color-text-tertiary: var(--gray-500);
--color-accent: #0a5cff;
--color-accent-hover: #004ad6;
--color-accent-subtle: rgba(10, 92, 255, 0.08);
--color-accent-ring: rgba(10, 92, 255, 0.3);
--color-on-accent: #ffffff;
--color-primary: #111114;
--color-primary-hover: #2b2b31;
--color-on-primary: #ffffff;
--color-scheme: light;
--color-sidebar: var(--color-bg);
--color-sidebar-surface: var(--gray-0);
--color-sidebar-text: #111114;
--color-sidebar-text-muted: var(--gray-500);
--color-sidebar-border: transparent;
--color-sidebar-hover: rgba(17, 17, 20, 0.045);
--color-sidebar-active: rgba(17, 17, 20, 0.07);
--color-sidebar-backdrop: rgba(14, 14, 17, 0.4);
--color-header: var(--color-bg);
--color-header-control: var(--gray-0);
--color-header-control-hover: var(--gray-50);
--color-header-text: #111114;
--color-header-text-muted: var(--gray-600);
--color-success: #1e8e4e;
--color-warning: #b97100;
--color-danger: #dc2f26;
--color-info: #2563eb;
--color-success-text: #12663a;
--color-warning-text: #8f5600;
--color-danger-text: #b42318;
--color-info-text: #1d4ed8;
--color-tint: 10%;
--color-tint-border: 28%;
--color-success-bg: color-mix(in srgb, var(--color-success) var(--color-tint), transparent);
--color-warning-bg: color-mix(in srgb, var(--color-warning) var(--color-tint), transparent);
--color-danger-bg: color-mix(in srgb, var(--color-danger) var(--color-tint), transparent);
--color-info-bg: color-mix(in srgb, var(--color-info) var(--color-tint), transparent);
--color-overlay: rgba(14, 14, 17, 0.42);
--color-bg-hover: rgba(17, 17, 20, 0.04);
--viz-1: #0a5cff;
--viz-2: #eb6834;
--viz-3: #1baf7a;
--viz-4: #eda100;
--viz-5: #e87ba4;
--viz-6: #008300;
--viz-7: #4a3aa7;
--viz-8: #e34948;
--viz-seq-100: #cde2fb;
--viz-seq-200: #9ec5f4;
--viz-seq-300: #6da7ec;
--viz-seq-400: #3987e5;
--viz-seq-500: #256abf;
--viz-seq-600: #184f95;
--viz-seq-700: #0d366b;
--viz-div-neg: #d03b3b;
--viz-div-mid: var(--gray-100);
--viz-div-pos: #2a78d6;
--viz-grid: var(--gray-100);
--viz-axis: var(--gray-200);
--font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--font-size-2xs: 0.6875rem;
--font-size-xs: 0.75rem;
--font-size-sm: 0.8125rem;
--font-size-base: 0.875rem;
--font-size-md: 1rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 2rem;
--font-size-3xl: 2.5rem;
--font-size-headline: 1.75rem;
--font-size-read: 1.0625rem;
--font-size-read-chat: 0.9375rem;
--font-size-read-lead: 1.125rem;
--font-size-read-h2: 1.375rem;
--font-size-micro: 0.5625rem;
--font-size-mobile-control: 1rem;
--font-weight-normal: 400;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 650;
--line-height-tight: 1.15;
--line-height-snug: 1.3;
--line-height-normal: 1.45;
--line-height-relaxed: 1.6;
--letter-spacing-tight: -0.011em;
--letter-spacing-wide: 0.01em;
--letter-spacing-heading: -0.022em;
--letter-spacing-display: -0.032em;
--letter-spacing-label: 0.02em;
--letter-spacing-caps: 0.06em;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--app-content-gutter: 48px;
--app-content-gutter-compact: 32px;
--app-content-gutter-mobile: 20px;
--app-sidebar-width: 232px;
--app-header-height: 56px;
--app-sidebar-width-collapsed: 56px;
--app-sidebar-mobile-width: min(86vw, 300px);
--control-xs: 28px;
--control-sm: 32px;
--control-md: 36px;
--control-lg: 44px;
--control-h: var(--control-md);
--radius-factor: 1;
--radius-control: 8px;
--radius-pad: var(--space-2);
--radius-xs: calc(var(--radius-control) * 0.5 * var(--radius-factor));
--radius-sm: calc(var(--radius-control) * 0.75 * var(--radius-factor));
--radius-md: calc(var(--radius-control) * var(--radius-factor));
--radius: calc((var(--radius-control) + 2px) * var(--radius-factor));
--radius-lg: calc(var(--radius-control) * 1.75 * var(--radius-factor));
--radius-xl: calc(var(--radius-control) * 2.5 * var(--radius-factor));
--radius-out: calc((var(--radius-control) + min(var(--radius-pad), 2px)) * var(--radius-factor));
--radius-full: calc(9999px * var(--radius-factor));
--radius-panel: calc(12px * var(--radius-factor));
--radius-float: calc(10px * var(--radius-factor));
--panel-x: var(--space-5);
--border-width: 1px;
--chip-h: 24px;
--chip-radius: var(--radius-sm);
--chip-gap: var(--space-1);
--chip-font: var(--font-size-xs);
--chip-bg: var(--color-bg-subtle);
--chip-edge: var(--color-border);
--tag-pad: 1px 6px;
--tag-radius: var(--radius-xs);
--tag-font: var(--font-size-2xs);
--count-h: 18px;
--count-font: var(--font-size-2xs);
--close-size: var(--control-sm);
--close-size-sm: 24px;
--close-radius: var(--radius-sm);
--dialog-pad: var(--space-5);
--dialog-title: var(--font-size-md);
--dur-spin: 800ms;
--color-on-fill: #ffffff;
--focus-ring-width: 2px;
--focus-ring: 0 0 0 1px var(--color-surface), 0 0 0 3px var(--color-accent);
--focus-gap: 3px;
--focus-field: 0 0 0 3px var(--color-accent-ring);
--opacity-disabled: 0.45;
--touch-target-min: 44px;
--z-header: 100;
--z-dropdown: 200;
--z-panel: 1000;
--z-modal-backdrop: 1050;
--z-modal: 1100;
--z-fullscreen: 9000;
--z-skip: 10000;
--z-toast: 10100;
--z-confirm: 10150;
--shadow-panel: 0 1px 2px rgba(17, 17, 20, 0.04), 0 1px 0 rgba(17, 17, 20, 0.02);
--shadow-control: 0 1px 2px rgba(17, 17, 20, 0.05);
--shadow-lift: 0 6px 18px -10px rgba(17, 17, 20, 0.2);
--shadow-float: 0 0 0 1px rgba(17, 17, 20, 0.06), 0 12px 32px -8px rgba(17, 17, 20, 0.16), 0 4px 10px -4px rgba(17, 17, 20, 0.08);
--shadow-xs: 0 1px 1px rgba(17, 17, 20, 0.04);
--shadow-sm: 0 1px 2px rgba(17, 17, 20, 0.05);
--shadow: 0 4px 12px -2px rgba(17, 17, 20, 0.08), 0 1px 3px rgba(17, 17, 20, 0.05);
--shadow-md: 0 10px 24px -6px rgba(17, 17, 20, 0.12), 0 2px 6px rgba(17, 17, 20, 0.05);
--shadow-lg: 0 18px 40px -10px rgba(17, 17, 20, 0.18), 0 4px 10px rgba(17, 17, 20, 0.06);
--shadow-xl: 0 28px 64px -16px rgba(17, 17, 20, 0.24), 0 8px 18px rgba(17, 17, 20, 0.08);
--dur-instant: 90ms;
--dur-fast: 140ms;
--dur-base: 200ms;
--dur-slow: 320ms;
--dur-enter: 480ms;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-overshoot: cubic-bezier(0.34, 1.4, 0.64, 1);
--ease-pop: cubic-bezier(0.34, 1.96, 0.64, 1);
--ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121 24.4%, 1.149 27.4%, 1.159 30.9%, 1.153, 1.135 37.1%, 1.017 52.3%, 0.991, 0.977 63.1%, 0.981 72.6%, 1.001 89.8%, 1);
--transition-fast: var(--dur-fast) var(--ease-out);
--transition-normal: var(--dur-base) var(--ease-out);
--transition-slow: var(--dur-slow) var(--ease-out);
--transition-spring: var(--dur-enter) var(--ease-spring);
--select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c6c75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--select-chevron-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236c6c75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--select-chevron-inset: var(--space-4);
--select-chevron-pad: var(--space-10);
--select-chevron-inset-sm: var(--space-3);
--select-chevron-pad-sm: var(--space-8);
--btn-action-min-width: 12.5rem;
}
@media (pointer: coarse), (max-width: 40rem){

:root {
--control-h: var(--control-lg);
}

}

.prompt-bar,
.t-beam,
.toast,
.alert,
.t-rec,
.chat-panel,
.approval-card,
.approval-sent,
.insight-card,
.records-scroll,
.records-pop,
.records-picker,
.ctx-menu,
.overflow-dropdown,
.settings-card,
.card,
.panel,
.integ-card,
.modal-container,
.metric,
.dash-panel,
.choice-card,
.empty-state-icon,
.seg,
.theme-pick-card,
.account-defaults-nav,
.sidebar-card-figure,
.drawer,
.auth-container,
.filter-table-wrap,
.skeleton-metric {
--radius-out: calc((var(--radius-control) + min(var(--radius-pad), 2px)) * var(--radius-factor));
}

html {
color-scheme: var(--color-scheme);
}

html[data-theme="dark"] {
--color-scheme: dark;
--color-bg: #09090b;
--color-bg-subtle: #1c1c21;
--color-surface: #131316;
--color-surface-raised: #18181c;
--color-surface-float: #1b1b20;
--color-surface-hover: #1a1a1e;
--color-border: rgba(255, 255, 255, 0.075);
--color-border-subtle: rgba(255, 255, 255, 0.05);
--color-border-strong: rgba(255, 255, 255, 0.17);
--color-border-control: rgba(255, 255, 255, 0.34);
--color-border-control-hover: rgba(255, 255, 255, 0.5);
--color-text: #f4f4f6;
--color-text-secondary: #a9a9b2;
--color-text-tertiary: #8a8a93;
--color-accent: #5c93ff;
--color-accent-hover: #84adff;
--color-accent-subtle: rgba(92, 147, 255, 0.12);
--color-accent-ring: rgba(92, 147, 255, 0.38);
--color-on-accent: #0e0e11;
--color-primary: #f4f4f6;
--color-primary-hover: #ffffff;
--color-on-primary: #0e0e11;
--color-sidebar: var(--color-bg);
--color-sidebar-surface: #131316;
--color-sidebar-text: #f4f4f6;
--color-sidebar-text-muted: #8a8a93;
--color-sidebar-border: transparent;
--color-sidebar-hover: rgba(255, 255, 255, 0.045);
--color-sidebar-active: rgba(255, 255, 255, 0.08);
--color-sidebar-backdrop: rgba(0, 0, 0, 0.62);
--color-header: var(--color-bg);
--color-header-control: #131316;
--color-header-control-hover: #1b1b20;
--color-header-text: #f4f4f6;
--color-header-text-muted: #a9a9b2;
--color-tint: 22%;
--color-tint-border: 40%;
--color-success-text: #5fd08f;
--color-warning-text: #f2b652;
--color-danger-text: #ff8a7f;
--color-info-text: #8fb0ff;
--color-overlay: rgba(0, 0, 0, 0.62);
--color-bg-hover: rgba(255, 255, 255, 0.05);
--viz-1: #4a86ff;
--viz-2: #d95926;
--viz-3: #199e70;
--viz-4: #c98500;
--viz-5: #d55181;
--viz-6: #008300;
--viz-7: #9085e9;
--viz-8: #e66767;
--viz-div-mid: #2e2e33;
--viz-div-pos: #3987e5;
--viz-grid: #232328;
--viz-axis: #33333a;
--shadow-panel: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-control: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-lift: 0 8px 22px -10px rgba(0, 0, 0, 0.7);
--shadow-float: 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 40px -10px rgba(0, 0, 0, 0.75);
--shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.4);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
--shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
--shadow-md: 0 10px 24px -6px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 18px 40px -10px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.4);
--shadow-xl: 0 28px 64px -16px rgba(0, 0, 0, 0.66), 0 8px 18px rgba(0, 0, 0, 0.45);
--select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--select-chevron-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238a8a93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

html[data-accent][data-accent-primary] {
--color-primary: var(--color-accent);
--color-primary-hover: var(--color-accent-hover);
--color-on-primary: var(--color-on-accent);
}

html[data-accent="indigo"] {
--color-accent: #3d4db8;
--color-accent-hover: #31409a;
--color-accent-subtle: rgba(61, 77, 184, 0.12);
--color-accent-ring: rgba(61, 77, 184, 0.28);
--color-on-accent: #ffffff;
}

html[data-accent="blue"] {
--color-accent: #2f6cd4;
--color-accent-hover: #245bb8;
--color-accent-subtle: rgba(47, 108, 212, 0.12);
--color-accent-ring: rgba(47, 108, 212, 0.28);
--color-on-accent: #ffffff;
}

html[data-accent="teal"] {
--color-accent: #1a7f7a;
--color-accent-hover: #146863;
--color-accent-subtle: rgba(26, 127, 122, 0.12);
--color-accent-ring: rgba(26, 127, 122, 0.28);
--color-on-accent: #ffffff;
}

html[data-accent="rose"] {
--color-accent: #b93d68;
--color-accent-hover: #9b3256;
--color-accent-subtle: rgba(185, 61, 104, 0.12);
--color-accent-ring: rgba(185, 61, 104, 0.28);
--color-on-accent: #ffffff;
}

html[data-theme="dark"][data-accent="indigo"] {
--color-accent: #a8b2f0;
--color-accent-hover: #c4caf6;
--color-accent-subtle: rgba(168, 178, 240, 0.16);
--color-accent-ring: rgba(168, 178, 240, 0.36);
--color-on-accent: #12131c;
}

html[data-theme="dark"][data-accent="blue"] {
--color-accent: #8eb6f5;
--color-accent-hover: #b3d0fa;
--color-accent-subtle: rgba(142, 182, 245, 0.16);
--color-accent-ring: rgba(142, 182, 245, 0.36);
--color-on-accent: #101820;
}

html[data-theme="dark"][data-accent="teal"] {
--color-accent: #7dccc6;
--color-accent-hover: #a6e0db;
--color-accent-subtle: rgba(125, 204, 198, 0.16);
--color-accent-ring: rgba(125, 204, 198, 0.36);
--color-on-accent: #10201e;
}

html[data-theme="dark"][data-accent="rose"] {
--color-accent: #f0a0b8;
--color-accent-hover: #f6c2d0;
--color-accent-subtle: rgba(240, 160, 184, 0.16);
--color-accent-ring: rgba(240, 160, 184, 0.36);
--color-on-accent: #241018;
}

*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

[hidden] {
display: none !important;
}

@view-transition {
navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}

::view-transition-old(app-sidebar),
::view-transition-new(app-sidebar),
::view-transition-old(app-header),
::view-transition-new(app-header) {
animation: none;
}

@keyframes plt-vt-out { to { opacity: 0; } }

@keyframes plt-vt-in { from { opacity: 0; transform: translateY(6px); } }

::view-transition-old(app-main) {
animation: plt-vt-out var(--dur-instant) var(--ease-in) both;
}

::view-transition-new(app-main) {
animation: plt-vt-in var(--dur-base) var(--ease-emphasized) both;
}

.vt-shared {
view-transition-class: shared;
}

::view-transition-group(*.shared) {
animation-duration: var(--dur-slow);
animation-timing-function: var(--ease-emphasized);
}

::view-transition-old(tabs-thumb),
::view-transition-new(tabs-thumb) {
animation-duration: var(--dur-slow);
animation-timing-function: var(--ease-out);
height: 2px;
}

input[type="checkbox"],
input[type="radio"] {
accent-color: var(--color-accent);
}

html.theme-changing,
html.theme-changing *,
html.theme-changing *::before,
html.theme-changing *::after {
transition: none !important;
}
@media (prefers-reduced-motion: reduce){

*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}

@view-transition {
navigation: none;
}

}

html[data-motion="reduce"],
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}

html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
}

::selection {
background: color-mix(in srgb, var(--color-accent) 24%, transparent);
color: inherit;
}

html[data-theme="dark"] ::selection {
background: color-mix(in srgb, var(--color-accent) 38%, transparent);
}

input,
textarea {
caret-color: var(--color-accent);
}

:focus:not(:focus-visible) {
outline: none;
}

:where([tabindex="-1"]:not(a[href], button, input, select, textarea, summary, [contenteditable="true"], [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"], [role="option"], [role="slider"], [role="switch"], [role="checkbox"], [role="radio"], [role="gridcell"], [role="treeitem"], [role="row"])):focus {
outline: none;
}

:where(a[href], button, summary, [role="button"], [role="tab"], [role="menuitem"], [role="option"], [role="slider"], [role="switch"], [tabindex]:not([tabindex="-1"])):focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}

body {
font-family: var(--font-sans);
font-size: var(--font-size-base);
background: var(--color-bg);
color: var(--color-text);
line-height: var(--line-height-normal);
min-height: 100vh;
letter-spacing: var(--letter-spacing-tight);
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes overlayOut {
from { opacity: 1; }
to { opacity: 0; }
}

@keyframes dialogIn {
from { opacity: 0; transform: translateY(6px) scale(0.98); }
to { opacity: 1; transform: none; }
}

@keyframes dialogOut {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: translateY(6px) scale(0.98); }
}

.fade-in {
animation: fadeInUp var(--transition-slow) both;
}

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.skip-link {
position: absolute;
top: -100%;
left: var(--space-4);
padding: var(--space-2) var(--space-4);
background: var(--color-accent);
color: var(--color-on-accent);
border-radius: var(--radius);
z-index: var(--z-skip);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-decoration: none;
}

.skip-link:focus {
top: var(--space-4);
}

body.scroll-locked {
overflow: hidden;
}

html:has(dialog.sheet[open]),
html:has(.modal-overlay[data-modal].is-open) {
overflow: hidden;
}

.form {
display: flex;
flex-direction: column;
gap: var(--space-5);
min-width: 0;
}

.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
margin-bottom: var(--space-5);
align-items: start;
}

.form-row > .form-group {
margin-bottom: 0;
}
@media (max-width: 36rem){

.form-row { grid-template-columns: 1fr; }

}

.form-group {
margin-bottom: var(--space-5);
min-width: 0;
}

.form > .form-group,
.form > .form-row,
.form > .form-fieldset,
.form-stack > .form-group,
.form-stack > .form-row {
margin-bottom: 0;
}

.form-fieldset {
margin: 0 0 var(--space-5);
padding: 0;
border: 0;
min-inline-size: 0;
}

.form-fieldset > legend {
padding: 0;
margin-bottom: var(--space-2);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
}

.form-fieldset .form-hint {
margin-top: var(--space-2);
}

.form-group > label {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-2);
color: var(--color-text-secondary);
}

.form-group.is-error > label,
.form-group.is-error > legend {
color: var(--color-danger-text);
}

.form-group > label .label-icon {
color: var(--color-text-tertiary);
flex-shrink: 0;
}

.req {
color: var(--color-danger);
font-weight: var(--font-weight-bold);
}

.form-group select,
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="search"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="datetime-local"],
.form-group input[type="month"],
.form-group input[type="file"],
.form-group textarea {
width: 100%;
padding: calc((var(--control-h) - 22px) / 2) var(--space-3);
line-height: 20px;
border: 1px solid var(--color-border-control);
border-radius: var(--radius-control);
box-shadow: var(--shadow-control);
font-size: var(--font-size-base);
font-family: var(--font-sans);
background: var(--color-surface);
color: var(--color-text);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
appearance: none;
-webkit-appearance: none;
}

.form-group select::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--color-text-tertiary);
opacity: 1;
}
@media (hover: hover){

.form-group select:hover:not(:disabled):not(:focus),
.form-group input:hover:not(:disabled):not(:focus):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]),
.form-group textarea:hover:not(:disabled):not(:focus),
.form-group .field:hover:not(:focus-within):not(:has(:disabled)),
.form-group .input-group:hover:not(:focus-within):not(:has(:disabled)):not(:has([aria-invalid="true"])),
.form-group .input-affix:hover:not(:focus-within):not(:has(:disabled)):not(:has([aria-invalid="true"])) {
border-color: var(--color-border-control-hover);
}

}

.form-group input:-webkit-autofill,
.form-group textarea:-webkit-autofill {
-webkit-text-fill-color: var(--color-text);
box-shadow: 0 0 0 1000px var(--color-surface) inset;
caret-color: var(--color-accent);
}

.form-group input[type="search"]::-webkit-search-decoration,
.form-group input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}

.form-group input[type="file"] {
padding: var(--space-2) var(--space-3);
line-height: 1.5;
cursor: pointer;
color: var(--color-text-secondary);
}

.form-group input[type="file"]::file-selector-button {
margin-right: var(--space-3);
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
font-family: var(--font-sans);
cursor: pointer;
transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
@media (hover: hover){

.form-group input[type="file"]::file-selector-button:hover {
background: var(--color-surface-hover);
border-color: var(--color-text-tertiary);
}

}

.form-group select {
background-image: var(--select-chevron);
background-repeat: no-repeat;
background-position: right var(--select-chevron-inset) center;
background-size: 12px 12px;
padding-right: var(--select-chevron-pad);
cursor: pointer;
}

.form-group select:focus,
.form-group input:not([type="range"]):focus,
.form-group textarea:focus,
.form-group .field:focus-within,
.form-group .input-group:focus-within,
.form-group .input-affix:focus-within {
outline: none;
border-color: var(--color-accent);
box-shadow: var(--focus-field);
}

.form-group textarea {
display: block;
resize: vertical;
min-height: 88px;
line-height: var(--line-height-relaxed);
}

.form-group textarea[data-autosize] {
resize: none;
overflow-x: hidden;
overflow-y: auto;
min-height: var(--control-h);
max-height: 12.5rem;
field-sizing: content;
scrollbar-width: thin;
}

.form-group .field textarea[data-autosize] {
min-height: 0;
}

.form-group select,
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="search"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="datetime-local"],
.form-group input[type="month"] {
min-height: var(--control-h);
}
@media (max-width: 36rem){

.form-group select,
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="search"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="datetime-local"],
.form-group input[type="month"],
.form-group textarea,
.form-group .field input,
.form-group .field textarea,
.form-group .input-group input,
.form-group .input-affix input {
font-size: var(--font-size-mobile-control);
}

}

.datetime-row {
display: flex;
gap: var(--space-2);
}

.datetime-row input {
flex: 1;
min-width: 0;
}

.form-hint {
display: block;
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
margin-top: var(--space-1);
}

.form-group.is-error select,
.form-group.is-error select:hover,
.form-group.is-error input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
.form-group.is-error input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):hover,
.form-group.is-error textarea,
.form-group.is-error textarea:hover,
.form-group.is-error .field,
.form-group.is-error .field:hover,
.form-group.is-error .input-group,
.form-group.is-error .input-group:hover,
.form-group.is-error .input-affix,
.form-group.is-error .input-affix:hover,
.form-group input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.form-group input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
.form-group textarea[aria-invalid="true"],
.form-group textarea[aria-invalid="true"]:hover,
.form-group select[aria-invalid="true"],
.form-group select[aria-invalid="true"]:hover,
.form-group .field:has([aria-invalid="true"]),
.form-group .input-group:has([aria-invalid="true"]),
.form-group .input-affix:has([aria-invalid="true"]) {
border-color: var(--color-danger);
box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.form-group.is-success input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
.form-group.is-success textarea,
.form-group.is-success .field,
.form-group.is-success .field:hover,
.form-group.is-success .input-group,
.form-group.is-success .input-group:hover,
.form-group.is-success .input-affix,
.form-group.is-success .input-affix:hover {
border-color: var(--color-success);
box-shadow: 0 0 0 3px var(--color-success-bg);
}

.form-group.is-success > label {
color: var(--color-success-text);
}

.form-group input:disabled,
.form-group textarea:disabled,
.form-group select:disabled {
opacity: var(--opacity-disabled);
cursor: not-allowed;
background: var(--color-bg);
color: var(--color-text-secondary);
}

.form-group input:read-only:not(:disabled),
.form-group textarea:read-only:not(:disabled) {
background: var(--color-bg-subtle);
color: var(--color-text);
cursor: default;
}

.form-group.is-disabled > label {
color: var(--color-text-tertiary);
}

.form-stack {
display: flex;
flex-direction: column;
gap: var(--space-5);
max-width: 24rem;
}

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

.form-group .form-inline input[type="text"],
.form-group .form-inline input[type="search"],
.form-group .form-inline input[type="email"] {
width: auto;
min-width: 0;
flex: 1;
}

.form-inline .btn {
flex-shrink: 0;
}

.form-inline > .btn,
.form-inline > .btn.btn-sm,
.form-inline > .btn.btn-xs {
height: var(--control-h);
min-height: var(--control-h);
}

.form-error {
--check-y-amount: 6px;
--check-blur-from: 2px;
--check-rotate-from: 16deg;
--check-scale-from: 0.94;
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--font-size-xs);
color: var(--color-danger-text);
margin-top: var(--space-1);
overflow: visible;
animation: fadeInUp var(--transition-normal) both;
}

.form-error:has(.t-error-mark) {
animation: none;
}

.form-error:has(.t-error-mark[data-state="out"]) > :not(.t-error-mark) {
opacity: 0;
}

.form-error:has(.t-error-mark[data-state="in"]) > :not(.t-error-mark) {
animation: fadeInUp var(--check-opacity-dur) var(--check-ease-opacity) both;
}

.form-error::before {
content: "";
width: 0.875rem;
height: 0.875rem;
margin-top: 0.1em;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.form-error:has(.t-error-mark)::before {
content: none;
}

.form-error > .t-error-mark {
width: 0.875rem;
height: 0.875rem;
margin-top: 0.1em;
flex-shrink: 0;
color: currentColor;
}

.form-error > .t-error-mark svg {
width: 100%;
height: 100%;
}

.form-error > .t-error-mark:not([data-state]) {
opacity: 1;
}

.form-error > .t-error-mark:not([data-state]) svg path {
stroke-dashoffset: 0;
}

.form-group .form-error {
display: flex;
}

.form-success {
--check-y-amount: 6px;
--check-blur-from: 2px;
--check-rotate-from: 16deg;
--check-scale-from: 0.94;
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--font-size-xs);
color: var(--color-success-text);
margin-top: var(--space-1);
overflow: visible;
animation: fadeInUp var(--transition-normal) both;
}

.form-success:has(.t-success-check) {
animation: none;
}

.form-success:has(.t-success-check[data-state="out"]) > :not(.t-success-check) {
opacity: 0;
}

.form-success:has(.t-success-check[data-state="in"]) > :not(.t-success-check) {
animation: fadeInUp var(--check-opacity-dur) var(--check-ease-opacity) both;
}

.form-success::before {
content: "";
width: 0.875rem;
height: 0.875rem;
margin-top: 0.1em;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.form-success:has(.t-success-check)::before {
content: none;
}

.form-success > .t-success-check {
width: 0.875rem;
height: 0.875rem;
margin-top: 0.1em;
flex-shrink: 0;
color: currentColor;
}

.form-success > .t-success-check svg {
width: 100%;
height: 100%;
}

.form-success > .t-success-check:not([data-state]) {
opacity: 1;
}

.form-success > .t-success-check:not([data-state]) svg path {
stroke-dashoffset: 0;
}

.form-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
margin-top: var(--space-1);
}

.form-meta > .form-hint,
.form-meta > .form-error,
.form-meta > .form-success {
margin-top: 0;
}

.form-count {
margin-left: auto;
flex-shrink: 0;
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
font-variant-numeric: tabular-nums;
}

.form-count.is-max {
color: var(--color-danger-text);
}

.field {
display: flex;
align-items: center;
width: 100%;
min-height: var(--control-h);
border: 1px solid var(--color-border-control);
border-radius: var(--radius-control);
background: var(--color-surface);
box-shadow: var(--shadow-control);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.field-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding-left: var(--space-3);
padding-right: var(--space-2);
color: var(--color-text-tertiary);
pointer-events: none;
}

.field-icon svg {
width: 16px;
height: 16px;
}

.form-group .field input,
.form-group .field textarea,
.field input,
.field textarea {
flex: 1 1 auto;
width: auto;
min-width: 0;
min-height: 0;
height: auto;
padding: 0 var(--space-3);
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}

.field:has(> .field-icon) > input,
.field:has(> .field-icon) > textarea {
padding-left: 0;
}

.field:has(> .field-action) > input,
.field:has(> .field-action) > textarea,
.field:has(> .password-toggle) > input {
padding-right: 0;
}

.form-group .field input:focus,
.form-group .field textarea:focus,
.form-group.is-error .field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-group.is-error .field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,
.form-group.is-error .field textarea,
.form-group.is-error .field textarea:hover,
.form-group.is-success .field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-group.is-success .field textarea,
.form-group .field input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]),
.form-group .field input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]):hover,
.form-group .field textarea[aria-invalid="true"],
.form-group .field textarea[aria-invalid="true"]:hover {
outline: none;
border: 0;
box-shadow: none;
background: transparent;
}

.form-group .field input:disabled,
.form-group .field textarea:disabled {
opacity: 1;
cursor: inherit;
background: transparent;
}

.form-group.is-disabled .field,
.field:has(input:disabled, textarea:disabled, select:disabled) {
opacity: var(--opacity-disabled);
cursor: not-allowed;
background: var(--color-bg);
}

.form-group .field:has(input:read-only:not(:disabled), textarea:read-only:not(:disabled)) {
background: var(--color-bg-subtle);
}

.form-group .field:has(input:read-only:not(:disabled), textarea:read-only:not(:disabled)) input,
.form-group .field:has(input:read-only:not(:disabled), textarea:read-only:not(:disabled)) textarea {
background: transparent;
}

.field-action,
.field .password-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: var(--touch-target-min);
height: calc(var(--control-h) - 2px);
padding: 0;
border: 0;
background: none;
color: var(--color-text-tertiary);
cursor: pointer;
border-radius: var(--radius-sm);
position: static;
top: auto;
right: auto;
transform: none;
transition: color var(--transition-fast);
}
@media (hover: hover){

.field-action:hover:not(:disabled),
.field .password-toggle:hover:not(:disabled),
.password-toggle:hover:not(:disabled) {
color: var(--color-text);
}

}

.field-action:focus-visible,
.password-toggle:focus-visible {
outline: none;
color: var(--color-text);
box-shadow: var(--focus-ring);
}

.field-action:disabled,
.field .password-toggle:disabled {
cursor: not-allowed;
opacity: var(--opacity-disabled);
}

.field:has(input:placeholder-shown) > [data-field-clear],
.field:has(textarea:placeholder-shown) > [data-field-clear] {
visibility: hidden;
pointer-events: none;
}

.password-toggle .field-eye-off,
.password-toggle[aria-pressed="true"] .field-eye {
display: none;
}

.password-toggle[aria-pressed="true"] .field-eye-off {
display: block;
}

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

.text-muted a {
color: var(--color-accent);
text-decoration: none;
font-weight: var(--font-weight-medium);
}

.text-muted a:hover {
text-decoration: underline;
}

a:not([class]) {
color: var(--color-accent);
text-underline-offset: 0.15em;
}

.num {
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}

.lbl {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.09em;
color: var(--color-text-tertiary);
}

:where(.plt-raw),
:where(.plt-raw) *,
:where(.plt-raw) *::before,
:where(.plt-raw) *::after {
all: revert;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

@keyframes plt-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes plt-rise-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}

@keyframes plt-pop-in {
from {
opacity: 0;
transform: scale(0.96);
}
to {
opacity: 1;
transform: scale(1);
}
}

@keyframes plt-shimmer {
from { background-position: 100% 0; }
to { background-position: -100% 0; }
}

@keyframes t-like-pop {
0% { transform: scale(1); }
30% { transform: scale(0.82); }
100% { transform: scale(1); }
}

@keyframes t-like-burst {
0% { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(var(--prot, 0deg)); }
20% { opacity: 1; transform: translate(calc(var(--px) * 0.25), calc(var(--py) * 0.25)) scale(1) rotate(var(--prot, 0deg)); }
100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(var(--p-end-scale, 0.6)) rotate(var(--prot, 0deg)); }
}

@keyframes swapRollIn {
from { filter: blur(var(--swap-roll-blur)); transform: translateY(100%); }
to { filter: blur(0); transform: translateY(0); }
}

@keyframes swapRollOut {
from { filter: blur(0); transform: translateY(0); }
to { filter: blur(var(--swap-roll-blur)); transform: translateY(-100%); }
}

@keyframes t-shimmer {
0%   { background-position: 100% 0; }
100% { background-position: 0% 0; }
}

@keyframes plt-land {
0% { box-shadow: 0 0 0 2px var(--color-accent); }
100% { box-shadow: 0 0 0 2px transparent; }
}

.btn {
--btn-fg: var(--color-text);
--btn-bg: transparent;
--btn-border: transparent;
--btn-fg-hover: var(--color-text);
--btn-bg-hover: var(--color-bg-hover);
--btn-border-hover: transparent;
--btn-radius: var(--radius-md);
--btn-icon: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
box-sizing: border-box;
height: var(--control-h);
min-height: var(--control-h);
padding: 0 var(--space-3);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
letter-spacing: 0;
line-height: 1;
border: 1px solid var(--btn-border);
border-radius: var(--btn-radius);
background: var(--btn-bg);
color: var(--btn-fg);
cursor: pointer;
box-shadow: var(--btn-shadow, none);
transition:
background-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
transform var(--dur-instant) var(--ease-out);
text-decoration: none;
user-select: none;
position: relative;
overflow: visible;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}

a.btn:link,
a.btn:visited {
color: var(--btn-fg);
text-decoration: none;
}

.btn svg {
display: block;
flex-shrink: 0;
width: var(--btn-icon);
height: var(--btn-icon);
}

.btn-primary {
--btn-fg: var(--color-on-primary);
--btn-bg: var(--color-primary);
--btn-border: var(--color-primary);
--btn-fg-hover: var(--color-on-primary);
--btn-bg-hover: var(--color-primary-hover);
--btn-border-hover: var(--color-primary-hover);
--btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(17, 17, 20, 0.2), 0 0 0 1px rgba(17, 17, 20, 0.04);
}

html[data-theme="dark"] .btn-primary {
--btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5);
}

.btn-secondary {
--btn-fg: var(--color-text);
--btn-bg: var(--color-surface);
--btn-border: var(--color-border-strong);
--btn-fg-hover: var(--color-text);
--btn-bg-hover: var(--color-surface-hover);
--btn-border-hover: color-mix(in srgb, var(--color-text) 22%, var(--color-surface));
--btn-shadow: var(--shadow-control);
}

.btn-danger {
--btn-fg: var(--color-danger-text);
--btn-bg: var(--color-surface);
--btn-border: color-mix(in srgb, var(--color-danger) 38%, var(--color-surface));
--btn-fg-hover: var(--color-danger-text);
--btn-bg-hover: var(--color-danger-bg);
--btn-border-hover: color-mix(in srgb, var(--color-danger) 60%, var(--color-surface));
}

.btn-ghost {
--btn-fg: var(--color-text-secondary);
--btn-fg-hover: var(--color-text);
}

.btn-link {
--btn-fg: var(--color-text);
--btn-fg-hover: var(--color-text);
--btn-bg-hover: transparent;
padding-left: 0;
padding-right: 0;
height: auto;
min-height: 0;
text-decoration: underline;
text-decoration-color: var(--color-border-strong);
text-underline-offset: 0.24em;
}

.btn-sm {
--btn-icon: 14px;
height: var(--control-sm);
min-height: var(--control-sm);
padding: 0 10px;
font-size: var(--font-size-sm);
gap: 5px;
}

.btn-xs {
--btn-icon: 13px;
--btn-radius: var(--radius-sm);
height: var(--control-xs);
min-height: var(--control-xs);
padding: 0 var(--space-2);
font-size: var(--font-size-xs);
gap: 4px;
}

.btn-lg {
height: var(--control-lg);
min-height: var(--control-lg);
padding: 0 var(--space-5);
font-size: var(--font-size-base);
}

.btn-block {
width: 100%;
}

.auth-container form .btn:not(.btn-xs):not(.btn-sm):not(.btn-link):not(.btn-icon) {
height: var(--control-lg);
min-height: var(--control-lg);
}

.btn-icon {
width: var(--control-h);
min-width: var(--control-h);
padding: 0;
}

.btn-icon.btn-xs {
width: var(--control-xs);
min-width: var(--control-xs);
}

.btn-icon.btn-sm {
width: var(--control-sm);
min-width: var(--control-sm);
}

.btn-icon.btn-lg {
width: var(--control-lg);
min-width: var(--control-lg);
}
@media (max-width: 40rem){

.btn.btn-icon-phone {
width: var(--control-h);
min-width: var(--control-h);
height: var(--control-h);
min-height: var(--control-h);
padding: 0;
gap: 0;
}

.btn-icon-phone .btn-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}

}
@media (hover: hover){

.btn:hover:not(:disabled):not([disabled]):not(.is-disabled):not(.is-loading):not([aria-disabled="true"]) {
background: var(--btn-bg-hover);
color: var(--btn-fg-hover);
border-color: var(--btn-border-hover);
}

a.btn:hover:not(.is-disabled):not([aria-disabled="true"]) {
color: var(--btn-fg-hover);
}

.btn-link:hover:not(:disabled):not([disabled]):not(.is-disabled):not([aria-disabled="true"]) {
text-decoration-color: currentColor;
}

}

.btn:active:not(:disabled):not([disabled]):not(.is-disabled):not(.is-loading):not([aria-disabled="true"]):not(.select-trigger):not(.btn-link):not(.btn-block) {
transform: translateY(1px);
}

.btn.is-hover:not(:disabled):not(.is-loading) {
background: var(--btn-bg-hover);
color: var(--btn-fg-hover);
border-color: var(--btn-border-hover);
}

.btn:focus-visible,
.btn.is-focus {
outline: 0;
box-shadow: var(--focus-ring);
}

.btn:disabled,
.btn[disabled],
.btn.is-disabled,
.btn[aria-disabled="true"] {
opacity: var(--opacity-disabled);
cursor: not-allowed;
transform: none;
filter: none;
}

a.btn.is-disabled,
a.btn[aria-disabled="true"] {
pointer-events: none;
}

.btn-link:focus-visible {
text-decoration-color: currentColor;
}

.btn.btn-link:focus-visible,
.link:focus-visible {
border-radius: var(--radius-xs);
outline: var(--focus-ring-width) solid var(--color-accent);
outline-offset: var(--focus-gap);
box-shadow: none;
}

.btn[aria-pressed="true"]:not(.btn-primary):not(.btn-danger) {
background: var(--color-bg-subtle);
color: var(--color-text);
border-color: var(--color-border-strong);
}

.btn-group {
display: inline-flex;
flex-wrap: wrap;
align-items: stretch;
}

.btn-group > .btn {
border-radius: 0;
}

.btn-group > .btn:first-child {
border-radius: var(--btn-radius) 0 0 var(--btn-radius);
}

.btn-group > .btn:last-child {
border-radius: 0 var(--btn-radius) var(--btn-radius) 0;
}

.btn-group > .btn:only-child {
border-radius: var(--btn-radius);
}

.btn-group > .btn + .btn {
margin-left: -1px;
}
@media (hover: hover){

.btn-group > .btn:hover:not(:disabled):not([disabled]):not(.is-disabled) {
z-index: 1;
}

}

.btn-group > .btn:focus-visible {
z-index: 1;
}

.btn-group > .btn:active {
transform: none;
}

.btn.is-loading {
pointer-events: none;
overflow: hidden;
color: transparent;
}

.btn.is-loading > *:not(.spinner) {
opacity: 0;
}

.btn.is-loading .spinner {
position: absolute;
inset: 0;
width: 14px;
height: 14px;
margin: auto;
border-color: color-mix(in srgb, var(--btn-fg) 22%, transparent);
border-top-color: var(--btn-fg);
}
@media (prefers-reduced-motion: reduce){

.btn:active {
transform: none;
}

}

.status-badge,
.pill {
--badge-tone: var(--color-text-tertiary);
--badge-ink: var(--color-text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
gap: 6px;
height: 22px;
min-height: 22px;
max-width: 100%;
padding: 0 8px;
border: 0;
border-radius: var(--radius-full);
background: color-mix(in srgb, var(--badge-tone) 12%, transparent);
color: var(--badge-ink);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
}

.status-pending,
.status-warning,
.pill.draft {
--badge-tone: var(--color-warning);
--badge-ink: var(--color-warning-text);
}

.status-info,
.status-loading,
.pill.info {
--badge-tone: var(--color-info);
--badge-ink: var(--color-info-text);
}

.status-success,
.status-published,
.pill.done {
--badge-tone: var(--color-success);
--badge-ink: var(--color-success-text);
}

.status-failed,
.status-danger {
--badge-tone: var(--color-danger);
--badge-ink: var(--color-danger-text);
}

.status-draft,
.status-neutral {
--badge-tone: var(--color-text-tertiary);
--badge-ink: var(--color-text-secondary);
}

.status-badge:not(:has(.status-dot)):not(:has(svg)):not(.is-count):not(.is-dot):not(.is-plain)::before,
.pill:not(:has(.status-dot)):not(:has(svg))::before {
content: "";
width: 6px;
height: 6px;
flex-shrink: 0;
border-radius: var(--radius-full);
background: var(--badge-tone);
}

.status-dot {
width: 6px;
height: 6px;
flex-shrink: 0;
border-radius: var(--radius-full);
background: var(--badge-tone, currentColor);
}

.status-badge svg {
color: var(--badge-tone);
}

.status-badge.is-live .status-dot,
.status-badge.is-live::before {
animation: status-dot-live 1.8s var(--ease-in-out) infinite;
}

@keyframes status-dot-live {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}

.status-badge.is-tint {
border-color: color-mix(in srgb, var(--badge-tone) 30%, var(--color-surface));
background: color-mix(in srgb, var(--badge-tone) 9%, var(--color-surface));
color: var(--badge-ink);
}

.status-badge.is-outline {
background: transparent;
}

.status-badge.is-plain {
padding: 0;
background: transparent;
border-color: transparent;
overflow: visible;
}

.status-badge.is-dot {
width: 10px;
min-width: 10px;
height: 10px;
min-height: 10px;
padding: 0;
background: transparent;
border-color: transparent;
overflow: visible;
}

.status-badge.is-dot .status-dot {
width: 8px;
height: 8px;
}

.status-badge.is-count {
min-width: 22px;
padding: 0 6px;
border-color: transparent;
background: var(--color-bg-subtle);
color: var(--color-text-secondary);
}

.status-badge.is-xs {
height: 18px;
min-height: 18px;
gap: 4px;
padding: 0 5px;
font-size: var(--font-size-2xs);
}

.status-badge.is-xs.is-count {
min-width: 18px;
padding: 0 4px;
}

.status-badge.is-sm {
height: 20px;
min-height: 20px;
gap: 5px;
padding: 0 6px;
}

.status-badge.is-sm.is-count {
min-width: 20px;
}

.status-badge.is-md {
height: 26px;
min-height: 26px;
gap: 6px;
padding: 0 9px;
font-size: var(--font-size-sm);
}

.status-badge.is-md.is-count {
min-width: 26px;
padding: 0 7px;
}

.status-badge svg {
display: block;
flex-shrink: 0;
width: 12px;
height: 12px;
}

.status-badge.is-xs svg {
width: 10px;
height: 10px;
}

.status-badge.is-md svg {
width: 14px;
height: 14px;
}

.status-badge[aria-disabled="true"] {
opacity: var(--opacity-disabled);
}
@media (prefers-reduced-motion: reduce){

.status-badge.is-live .status-dot,
.status-badge.is-live::before {
animation: none;
}

}
@media (forced-colors: active){

.status-badge,
.pill {
border: 1px solid currentColor;
background: Canvas;
}

}

.tabs {
display: flex;
align-items: stretch;
gap: var(--space-1);
overflow-x: auto;
overflow-y: hidden;
border-bottom: 1px solid var(--color-border);
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}

.tabs::-webkit-scrollbar { display: none; }

.tabs--page + .dash-panel,
.tabs--page + .alert + .dash-panel {
border-top: 0;
}

}
.tabs--card {
margin-bottom: 0;
background: var(--color-bg);
}

.tabs__item {
position: relative;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 40px;
padding: 0 var(--space-3);
border: none;
background: transparent;
color: var(--color-text-secondary);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
letter-spacing: 0;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: color var(--dur-fast) var(--ease-out);
}

.tabs__item::after {
position: absolute;
right: var(--space-3);
bottom: -1px;
left: var(--space-3);
height: 2px;
background: transparent;
content: "";
transform: scaleX(0.6);
opacity: 0;
transition: transform var(--dur-base) var(--ease-emphasized), opacity var(--dur-fast) var(--ease-out);
}

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

.tabs__item.is-active { color: var(--color-text); }

.tabs__item.is-active::after { background: var(--color-text); transform: none; opacity: 1; }

.tabs__item svg {
display: block;
flex-shrink: 0;
width: 14px;
height: 14px;
opacity: 0.6;
transition: opacity var(--transition-fast);
}

.tabs__item:hover svg,
.tabs__item.is-active svg { opacity: 1; }

.tabs__item[aria-disabled="true"],
.tabs__item.is-disabled {
opacity: var(--opacity-disabled);
pointer-events: none;
}

.tabs__count {
min-width: 18px;
padding: 2px 5px;
border-radius: var(--radius-xs);
background: var(--color-bg-subtle);
color: var(--color-text-tertiary);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-medium);
font-variant-numeric: tabular-nums;
line-height: 1.2;
text-align: center;
}

.tabs__item.is-active .tabs__count {
color: var(--color-text);
}

.seg {
--radius-pad: 2px;
display: inline-flex;
flex-wrap: wrap;
row-gap: 2px;
align-items: center;
width: fit-content;
max-width: 100%;
background: color-mix(in srgb, var(--color-text) 5%, transparent);
box-shadow: inset 0 0 0 1px var(--color-border);
border-radius: var(--radius-out);
padding: 2px;
}

.seg a,
.seg button,
.seg label.seg-opt {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 28px;
min-height: 28px;
padding: 0 var(--space-3);
border: 0;
background: transparent;
font: inherit;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
line-height: 1;
color: var(--color-text-secondary);
border-radius: var(--radius-md);
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.seg a:hover,
.seg button:hover,
.seg label.seg-opt:hover,
.seg .on,
.seg a.on,
.seg label.on {
color: var(--color-text);
}

.seg .on,
.seg a.on,
.seg label.on {
background: var(--color-surface);
box-shadow: var(--shadow-xs), 0 0 0 1px var(--color-border);
}

html[data-theme="dark"] .seg .on,
html[data-theme="dark"] .seg a.on,
html[data-theme="dark"] .seg label.on {
background: var(--color-surface-float);
}

.seg svg {
display: block;
flex-shrink: 0;
width: 14px;
height: 14px;
}

.seg a:disabled,
.seg button:disabled,
.seg [aria-disabled="true"] {
opacity: var(--opacity-disabled);
cursor: not-allowed;
}

.seg a:focus-visible,
.seg button:focus-visible,
.seg label.seg-opt:has(:focus-visible) {
outline: none;
box-shadow: var(--focus-ring);
}

.btn-close {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: var(--close-size);
height: var(--close-size);
padding: 0;
border: 0;
border-radius: var(--close-radius);
background: transparent;
color: var(--color-text-tertiary);
cursor: pointer;
transition: background-color var(--transition-fast), color var(--transition-fast);
}

.btn-close.is-sm {
width: var(--close-size-sm);
height: var(--close-size-sm);
}
@media (hover: hover){

.btn-close:hover,
.modal-close:hover,
.drawer-close:hover,
.sheet-close:hover,
.cal-panel-close:hover,
.approval-dismiss:hover,
.toast-close:hover,
.t-filepreview-close:hover {
background: var(--color-bg-hover);
color: var(--color-text);
}

}
@media (pointer: coarse){

.btn-close:not(.is-sm),
.modal-close,
.drawer-close,
.sheet-close,
.cal-panel-close {
width: var(--touch-target-min);
height: var(--touch-target-min);
}

}

.chip {
display: inline-flex;
align-items: center;
gap: var(--chip-gap);
height: var(--chip-h);
max-width: 100%;
padding: 0 var(--space-1) 0 var(--space-2);
border: 1px solid var(--chip-edge);
border-radius: var(--chip-radius);
background: var(--chip-bg);
color: var(--color-text);
font-size: var(--chip-font);
font-weight: var(--font-weight-medium);
line-height: 1;
white-space: nowrap;
}

.chip > .chip-x {
display: inline-grid;
place-items: center;
width: 20px;
height: 20px;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--radius-xs);
background: transparent;
color: var(--color-text-tertiary);
cursor: pointer;
}
@media (hover: hover){

.chip > .chip-x:hover {
background: var(--color-bg-hover);
color: var(--color-text);
}

}

.tag {
display: inline-flex;
align-items: center;
padding: var(--tag-pad);
border-radius: var(--tag-radius);
background: var(--chip-bg);
color: var(--color-text-secondary);
font-size: var(--tag-font);
font-weight: var(--font-weight-medium);
line-height: 1.3;
white-space: nowrap;
}

.empty-state,
.cmdk-empty,
.cmdsearch-empty,
.ms-empty,
.chat-panel-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
box-sizing: border-box;
padding: var(--space-8) var(--space-4);
}

.card:has(> .empty-state:only-child) {
padding: 0;
}

.card > .empty-state:only-child {
padding: var(--space-10) var(--space-6);
border-radius: inherit;
}

.card > .panel-head + .empty-state {
padding-top: 0;
}

.empty-state-icon,
.cmdk-empty-icon,
.cmdsearch-empty-icon {
--radius-pad: 0;
width: 2.75rem;
height: 2.75rem;
border-radius: var(--radius-float);
border: var(--border-width) solid var(--color-border);
background: var(--color-surface);
box-shadow: var(--shadow-control), var(--shadow-lift);
color: var(--color-text-secondary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin: 0 0 var(--space-4);
}

.empty-state-icon svg,
.cmdk-empty-icon svg,
.cmdsearch-empty-icon svg {
display: block;
width: 1.125rem;
height: 1.125rem;
flex-shrink: 0;
}

.empty-state.is-muted .empty-state-icon,
.empty-state-icon.is-muted {
background: var(--color-bg-subtle);
color: var(--color-text-tertiary);
}

.empty-state p {
margin: 0 0 var(--space-5);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
max-width: 36ch;
}

.empty-state a:not(.btn) {
color: var(--color-accent);
text-decoration: none;
font-weight: var(--font-weight-medium);
}

.empty-state a:not(.btn):hover {
text-decoration: underline;
}

.empty-state > .btn {
margin-top: var(--space-1);
}

.empty-state > .btn + .btn {
margin-top: var(--space-2);
}

.empty-state .btn-primary,
.empty-state .btn-primary:hover {
color: var(--color-on-primary);
text-decoration: none;
}

.empty-state a.btn,
.empty-state a.btn:hover {
text-decoration: none;
}

.empty-state .empty-state-title,
.cmdk-empty-title,
.cmdsearch-empty-title {
margin: 0 0 var(--space-2);
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-heading);
line-height: var(--line-height-tight);
color: var(--color-text);
max-width: 36ch;
overflow-wrap: break-word;
}

.empty-state .empty-state-desc,
.cmdk-empty-hint,
.cmdsearch-empty-hint,
.chat-panel-empty p {
margin: 0 0 var(--space-5);
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
max-width: 36ch;
line-height: var(--line-height-relaxed);
}

.empty-state-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-2);
width: 100%;
max-width: 28rem;
}

.empty-state-actions .btn {
margin-top: 0;
}

.empty-state .empty-state-title:last-child,
.empty-state .empty-state-desc:last-child,
.empty-state p:last-child {
margin-bottom: 0;
}

.empty-state.is-compact,
.cmdk-empty,
.cmdsearch-empty,
.ms-empty {
padding: var(--space-6) var(--space-4);
}

.card > .empty-state.is-compact:only-child {
padding: var(--space-8) var(--space-5);
}

.empty-state.is-compact .empty-state-icon,
.cmdk-empty-icon,
.cmdsearch-empty-icon {
--radius-pad: 0.625rem;
width: 2.5rem;
height: 2.5rem;
margin-bottom: var(--space-3);
}

.empty-state.is-compact .empty-state-icon svg,
.cmdk-empty-icon svg,
.cmdsearch-empty-icon svg {
width: 1.125rem;
height: 1.125rem;
}

.empty-state.is-compact .empty-state-title,
.cmdk-empty-title,
.cmdsearch-empty-title {
font-size: var(--font-size-base);
}

.empty-state.is-compact .empty-state-desc {
margin-bottom: var(--space-4);
}

.empty-inline,
.cal-panel-empty,
.cal-agenda-empty,
.combo-empty,
.cmt-none,
.feedback-none,
.ftree-empty,
.history-empty,
.help-search-empty,
.admin-none {
margin: 0;
color: var(--color-text-tertiary);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}

.empty-state.is-page {
min-height: min(24rem, 60vh);
padding: var(--space-12) var(--space-6);
}
@media (forced-colors: active){

.empty-state-icon {
background: Canvas;
color: CanvasText;
border: 1px solid CanvasText;
}

}

.spinner {
display: inline-block;
flex-shrink: 0;
width: 16px;
height: 16px;
border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
border-radius: var(--radius-full);
border-top-color: currentColor;
animation: spin var(--dur-spin) linear infinite;
color: var(--color-text-secondary);
}

.spinner.is-sm {
width: 12px;
height: 12px;
border-width: 1.5px;
}

.spinner.is-lg {
width: 22px;
height: 22px;
}
@media (prefers-reduced-motion: reduce){

.spinner { animation: none; opacity: 0.7; }

}

.overflow-menu {
position: relative;
flex-shrink: 0;
}

.overflow-trigger {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: none;
background: transparent;
border-radius: var(--radius);
color: var(--color-text-tertiary);
cursor: pointer;
transition: background-color var(--transition-fast), color var(--transition-fast);
}

.overflow-trigger:hover {
background: var(--color-bg);
color: var(--color-text);
}

.overflow-trigger:active {
transform: scale(0.92);
}

.overflow-menu:not(.is-open) .overflow-dropdown {
display: none;
}

.overflow-dropdown,
.ctx-menu {
--radius-pad: var(--space-1);
min-width: 13.5rem;
max-width: min(22rem, calc(100vw - 16px));
padding: var(--space-1);
background: var(--color-surface);
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-out);
box-shadow: var(--shadow-float);
scrollbar-width: thin;
}

.overflow-dropdown.is-scroll,
.ctx-menu.is-scroll {
max-height: calc(100vh - 16px);
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
}

.overflow-dropdown {
position: absolute;
top: calc(100% + var(--space-1));
right: 0;
z-index: var(--z-modal);
transform-origin: top right;
animation: overflowFadeIn var(--transition-fast);
}

.overflow-dropdown.is-top {
transform-origin: bottom right;
animation-name: overflowFadeInTop;
}

.overflow-menu .overflow-dropdown.is-top {
top: auto;
bottom: calc(100% + var(--space-1));
}

@keyframes overflowFadeIn {
from { opacity: 0; transform: translateY(-4px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes overflowFadeInTop {
from { opacity: 0; transform: translateY(4px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}

.overflow-dropdown > form {
margin: 0;
width: 100%;
}

.overflow-item {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
min-height: 2rem;
padding: var(--space-1) var(--space-2);
border: none;
background: transparent;
font-size: var(--font-size-sm);
font-family: var(--font-sans);
font-weight: var(--font-weight-medium);
color: var(--color-text);
cursor: pointer;
border-radius: var(--radius-sm);
transition: background-color var(--transition-fast), color var(--transition-fast);
text-align: left;
text-decoration: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
@media (hover: hover){

.overflow-item:hover {
background: var(--color-surface-hover);
}

}

.overflow-item.is-active::after {
content: "";
width: 14px;
height: 14px;
margin-left: auto;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.overflow-item:focus {
outline: none;
}

.overflow-item:focus-visible,
.overflow-item[aria-expanded="true"] {
background: var(--color-surface-hover);
outline: none;
box-shadow: none;
}

.overflow-item svg {
flex-shrink: 0;
width: 14px;
height: 14px;
color: var(--color-text-secondary);
}

.overflow-item > span:not(.overflow-check):not(.t-check-wrap) {
min-width: 0;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.overflow-item:disabled,
.overflow-item[aria-disabled="true"] {
opacity: var(--opacity-disabled);
cursor: default;
pointer-events: none;
}

.overflow-label {
padding: var(--space-2) var(--space-2) var(--space-1);
color: var(--color-text-tertiary);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-label);
line-height: var(--line-height-tight);
}

.overflow-check {
display: inline-flex;
width: 14px;
height: 14px;
flex-shrink: 0;
align-items: center;
justify-content: center;
color: var(--color-text);
}

.overflow-item[aria-checked="false"] .overflow-check {
visibility: hidden;
}

.overflow-item--danger {
color: var(--color-danger-text);
}

.overflow-item--danger svg {
color: var(--color-danger-text);
}
@media (hover: hover){

.overflow-item--danger:hover {
background: var(--color-danger-bg);
}

}

.overflow-item--danger:focus-visible {
background: var(--color-danger-bg);
}

.overflow-divider {
height: 1px;
background: var(--color-border-subtle);
margin: var(--space-1);
}

.modal-overlay {
position: fixed;
inset: 0;
background: var(--color-overlay);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-modal-backdrop);
padding: var(--space-4);
overscroll-behavior: contain;
}

.modal-overlay--confirm {
z-index: var(--z-confirm);
}

dialog.modal-overlay {
width: 100%;
height: 100%;
max-width: none;
max-height: none;
margin: 0;
border: 0;
color: inherit;
}

dialog.modal-overlay::backdrop {
background: transparent;
}

.modal-overlay.is-open {
animation: plt-fade-in var(--transition-fast);
}

.modal-overlay.is-leaving {
animation: overlayOut var(--transition-fast) both;
pointer-events: none;
}

.modal-overlay[data-modal].is-leaving {
display: flex;
}

.modal-overlay.is-leaving .modal-container {
animation: dialogOut var(--transition-fast) both;
}

.modal-container {
--radius-pad: var(--space-6);
background: var(--color-surface-float);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
width: 100%;
max-width: 480px;
max-height: 90vh;
max-height: 90dvh;
overflow-y: auto;
padding: var(--space-6);
}

.modal-container--confirm {
max-width: 24rem;
animation: dialogIn var(--transition-fast);
}

.confirm-demo {
width: 100%;
max-width: 24rem;
pointer-events: none;
}

.confirm-demo .modal-container--confirm {
animation: none;
position: relative;
box-shadow: var(--shadow-lg);
}

.modal-container--sm { max-width: 400px; }

.modal-container--wide { max-width: 640px; }

.modal-container--xl { max-width: min(60rem, calc(100vw - 2 * var(--space-4))); }

.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-5);
}

.modal-header h2,
.modal-header h3 {
font-size: var(--dialog-title);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-tight);
color: var(--color-text);
margin: 0;
}

.modal-close {
display: flex;
align-items: center;
justify-content: center;
width: var(--close-size);
height: var(--close-size);
margin: -6px -6px -6px 0;
border: none;
background: none;
color: var(--color-text-tertiary);
cursor: pointer;
border-radius: var(--close-radius);
transition: background-color var(--transition-fast), color var(--transition-fast);
}

.modal-close:hover {
background: var(--color-bg-hover);
color: var(--color-text);
}

.modal-container .form-group {
margin-bottom: var(--space-4);
}

.modal-container .form-row {
margin-bottom: var(--space-4);
}

.modal-container .form-row > .form-group,
.modal-container .form-row > .form-fieldset {
margin-bottom: 0;
}

.modal-body p {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: 1.5;
margin: 0;
}

.modal-body > p + .form-group {
margin-top: var(--space-4);
}

.modal-footer,
.modal-confirm-actions,
.destructive-modal-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
margin-top: var(--space-6);
flex-wrap: wrap;
}

.modal-container .modal-footer {
position: sticky;
bottom: calc(-1 * var(--space-6));
z-index: 1;
margin: var(--space-2) 0 calc(-1 * var(--space-6));
padding: var(--space-4) 0 var(--space-6);
background: var(--color-surface-float);
}

.modal-confirm-head {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}

.modal-confirm-copy {
min-width: 0;
flex: 1;
}

.modal-container--confirm > .modal-confirm-copy > h3,
.modal-confirm-copy > h3,
.modal-container--confirm > h3 {
margin: 0 0 var(--space-1);
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-tight);
line-height: var(--line-height-snug);
color: var(--color-text);
}

.modal-confirm-msg {
margin: 0;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
}

.modal-confirm-body {
margin-top: var(--space-3);
max-height: min(50vh, 24rem);
overflow-y: auto;
font-size: var(--font-size-sm);
color: var(--color-text);
line-height: var(--line-height-relaxed);
}

.modal-confirm-body > :first-child { margin-top: 0; }

.modal-confirm-body > :last-child { margin-bottom: 0; }

.modal-prompt-label {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin: 0 0 var(--space-5);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
}

.modal-prompt-input {
box-sizing: border-box;
width: 100%;
min-height: var(--control-h);
padding: 0 var(--space-3);
border: 1px solid var(--color-border-control);
border-radius: var(--radius-control);
font-size: var(--font-size-base);
font-family: var(--font-sans);
background: var(--color-surface);
color: var(--color-text);
transition: border-color var(--transition-fast);
}

.modal-prompt-input:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: var(--focus-field);
}

.modal-container.is-destructive-modal:has(.select.is-open, .combo.is-open) {
overflow: visible;
}

.destructive-modal-icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 20px;
height: 24px;
color: var(--color-danger);
background: none;
}

.modal-container .destructive-modal-message {
margin: 0;
}

.modal-container .destructive-modal-message strong {
color: var(--color-text);
font-weight: var(--font-weight-semibold);
}

.modal-container--confirm > .form-group {
margin: var(--space-5) 0 0;
}

.modal-container .destructive-modal-actions {
margin-top: var(--space-6);
}
@media (max-width: 30rem){

.modal-confirm-actions .btn,
.modal-container .destructive-modal-actions .btn {
flex: 1;
min-width: 0;
}

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

.modal-overlay.is-open,
.modal-overlay.is-leaving,
.modal-overlay.is-leaving .modal-container,
.modal-container--confirm {
animation: none;
}

}

.card {
--radius-pad: var(--space-6);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-panel);
padding: var(--space-5) var(--panel-x);
box-shadow: var(--shadow-panel);
min-width: 0;
}

.card > .form + .form {
margin-top: var(--space-5);
padding-top: var(--space-5);
border-top: var(--border-width) solid var(--color-border-subtle);
}

.card > .data-table-wrap + :not(.pagination) {
margin-top: var(--space-4);
}

.card pre {
overflow: auto;
max-height: 16rem;
margin: 0 0 var(--space-4);
padding: var(--space-3);
border-radius: var(--radius-sm);
background: var(--color-bg);
font-size: var(--font-size-xs);
white-space: pre-wrap;
overflow-wrap: anywhere;
}

.card-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}

.panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-4);
}

.panel-head:has(> .panel-head-actions) {
flex-wrap: wrap;
}

.panel-head:has(> .panel-meta) {
flex-wrap: wrap;
row-gap: var(--space-1);
}

.panel-head > .panel-meta {
min-width: 0;
white-space: normal;
}

.panel-head-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--space-2);
margin-inline-start: auto;
}

.panel-head:has(> .panel-tools) {
flex-wrap: wrap;
row-gap: var(--space-2);
}

.panel-tools {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
flex: 1 1 0;
gap: var(--space-2) var(--space-3);
max-width: 100%;
margin-inline-start: auto;
}

.panel-tools > .panel-meta {
flex: 1 1 0;
text-align: end;
white-space: normal;
}

.panel-tools > .select {
width: var(--select-fit, 11rem);
min-width: min(8rem, 100%);
max-width: min(20rem, 100%);
flex: 0 1 auto;
}

.panel-head h2,
.panel-head h3 {
margin: 0;
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.01em;
}

.link {
color: var(--color-accent);
font-weight: var(--font-weight-medium);
text-decoration: none;
text-underline-offset: 3px;
}

.link:hover {
color: var(--color-accent-hover);
text-decoration: underline;
}

.panel-head .link {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
text-decoration: none;
}

.panel-head .link:hover {
color: var(--color-text);
}

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

.metric-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.metric-grid > :only-child { grid-column: 1 / -1; }
@media (width > 56.25rem){

.metric-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.metric-grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.metric-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }

}
@media (width > 56.25rem) and (max-width: 80rem){

.metric-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.metric-grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.metric-grid:has(> :nth-child(5):last-child) > * { grid-column: span 2; }

.metric-grid:has(> :nth-child(5):last-child) > :nth-child(n + 4) { grid-column: span 3; }

}
@media (max-width: 56.25rem){

.metric-grid:has(> :nth-child(3):last-child, > :nth-child(5):last-child) > :last-child { grid-column: 1 / -1; }

}

.metric {
--metric-spark: var(--viz-1);
--radius-pad: var(--space-1);
container: metric / inline-size;
display: flex;
flex-direction: column;
min-width: 0;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-panel);
padding: var(--space-4) var(--space-5) var(--space-5);
box-shadow: var(--shadow-panel);
color: inherit;
text-decoration: none;
}

a.metric {
cursor: pointer;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
@media (hover: hover){

a.metric:hover {
border-color: var(--color-border-strong);
box-shadow: var(--shadow-panel), var(--shadow-lift);
}

}

a.metric:focus {
outline: none;
}

a.metric:focus-visible {
box-shadow: var(--focus-ring);
}

.metric--lead {
box-shadow: inset 0 2px 0 var(--color-accent);
}

a.metric--lead:hover {
background: var(--color-surface-hover);
}

.metric-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
min-width: 0;
}

.metric .lbl {
min-width: 0;
overflow: hidden;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-normal);
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}

.metric-val {
font-variant-numeric: tabular-nums;
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.04em;
line-height: 1;
margin-top: var(--space-3);
}

.metric .metric-val {
--metric-fit: 100cqi;
font-size: clamp(var(--font-size-lg), calc(var(--metric-fit) * 0.21), var(--font-size-3xl));
}

.metric-grid > .metric {
--metric-gap: var(--space-3);
--metric-edge: calc(var(--space-5) + 1px);
}
@media (width > 56.25rem) and (max-width: 80rem){

.metric-grid:has(> :nth-child(5):last-child) > .metric:nth-child(n + 4) .metric-val {
--metric-fit: calc(100cqi * 2 / 3 - var(--metric-edge) * 2 / 3 - var(--metric-gap) / 3);
}

}
@media (max-width: 56.25rem){

.metric-grid:has(> :nth-child(3):last-child, > :nth-child(5):last-child) > .metric:last-child .metric-val {
--metric-fit: calc(50cqi - var(--metric-edge) - var(--metric-gap) / 2);
}

}

.metric-fig {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0 var(--space-2);
margin-top: var(--space-3);
}

.metric-fig .metric-val {
margin-top: 0;
}

.metric-fig .delta {
height: 22px;
font-size: var(--font-size-xs);
}

.metric-foot {
display: flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-2);
}

.metric-foot .ctx {
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
}

.delta {
display: inline-flex;
align-items: center;
gap: 2px;
flex-shrink: 0;
box-sizing: border-box;
height: 20px;
padding: 0 7px 0 5px;
border-radius: var(--radius-full);
background: color-mix(in srgb, currentColor 10%, transparent);
font-variant-numeric: tabular-nums;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
line-height: 1;
white-space: nowrap;
}

.delta svg {
display: block;
width: 12px;
height: 12px;
}

.delta.up,
.delta.dn,
.delta.flat {
color: var(--color-text-secondary);
}

.delta.is-good {
color: var(--color-success-text);
}

.delta.is-bad {
color: var(--color-danger-text);
}
@media (forced-colors: active){

.delta {
border: 1px solid CanvasText;
background: Canvas;
color: CanvasText;
}

}

.data-table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-sm);
font-variant-numeric: tabular-nums;
}

.data-table th {
height: 36px;
text-align: left;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
color: var(--color-text-tertiary);
padding: 0 var(--space-3);
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
}

.data-table td {
height: 44px;
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-border-subtle);
vertical-align: middle;
}

.data-table tbody th {
padding: var(--space-3);
border-bottom: 1px solid var(--color-border-subtle);
font-size: inherit;
font-weight: var(--font-weight-semibold);
color: var(--color-text);
text-align: start;
vertical-align: middle;
}
@media (hover: hover){

.data-table tbody tr:hover td {
background: var(--color-bg-hover);
}

}

.data-table tr:last-child :is(td, th) {
border-bottom: 0;
}

.data-table td.text-muted {
font-size: inherit;
}

.data-table td.sub-num,
.data-table th.sub-num {
text-align: right;
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}

.data-table td.cell-end,
.data-table th.cell-end {
text-align: right;
}

.data-table--nowrap :is(th, td),
.data-table--nowrap :is(td, th).sub-num {
white-space: nowrap;
overflow-wrap: normal;
}

.data-table td:has(> .overflow-menu) {
width: 1%;
padding-right: var(--space-2);
text-align: right;
}

.data-table .overflow-menu {
display: inline-flex;
justify-content: flex-end;
}

.page-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
}

.page-head--section {
margin-top: var(--space-10);
}

.page-head {
min-height: var(--control-h);
}

.page-head h1 {
font-size: var(--font-size-headline);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.03em;
line-height: var(--line-height-tight);
}

.page-head .sub {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
margin-top: var(--space-1);
}

.page-head-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: var(--space-2);
}

.page-head-actions > .btn:not(.btn-icon) {
width: auto;
min-width: 0;
justify-content: center;
}

.page-head-actions > .seg,
.entity-toolbar .seg {
min-height: var(--control-h);
}

.page-head-actions > .seg :is(a, button, label.seg-opt),
.entity-toolbar .seg :is(a, button, label.seg-opt) {
min-height: calc(var(--control-h) - 4px);
}

.page-head-actions > .btn-icon {
flex: none;
}

.page-head-actions > .select {
width: 13rem;
max-width: 16rem;
flex: 0 1 auto;
}

.page-head-actions > .seg a,
.page-head-actions > .seg button {
min-height: calc(var(--control-h) - 4px);
}
@media (max-width: 56.25rem){

.metric-grid { grid-template-columns: repeat(2, 1fr); }

}
@media (max-width: 40rem){

.page-head { flex-direction: column; align-items: flex-start; }

.page-head-actions {
width: 100%;
justify-content: stretch;
}

.page-head-actions > .btn:not(.btn-icon, .btn-icon-phone) {
flex: 1 1 auto;
min-width: 0;
}

.page-head-actions > .btn.btn-icon-phone {
flex: none;
width: var(--control-h);
min-width: var(--control-h);
}

.page-head-actions > .select {
flex: 1 1 100%;
width: 100%;
max-width: none;
}

.card {
padding: var(--space-5);
}

}
@media (max-width: 30rem){

.metric-grid { gap: var(--space-3); }

.metric-val { font-size: var(--font-size-2xl); }

}

.month-step {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}

.month-step-label {
min-width: 8.5rem;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
font-variant-numeric: tabular-nums;
text-align: center;
white-space: nowrap;
}

.month-step > .btn.is-disabled {
opacity: 0.5;
pointer-events: none;
}
@media (max-width: 40rem){

.page-head-actions > .month-step,
.entity-toolbar > .month-step {
width: 100%;
grid-column: 1 / -1;
}

.page-head-actions > .month-step .month-step-label,
.entity-toolbar > .month-step .month-step-label {
flex: 1 1 auto;
min-width: 0;
}

}

.save-bar {
position: sticky;
bottom: var(--space-3);
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-top: var(--space-6);
padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-out);
box-shadow: var(--shadow-md);
--radius-pad: var(--space-3);
}

.save-bar-msg {
margin: 0;
min-width: 0;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}

.save-bar.is-dirty .save-bar-msg {
color: var(--color-text);
font-weight: var(--font-weight-medium);
}

.save-bar-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-2);
margin-inline-start: auto;
}

.save-bar[data-save-bar="dirty"]:not(.is-dirty) {
display: none;
}

.save-bar.is-resting {
position: relative;
bottom: auto;
}
@media (max-width: 40rem){

.save-bar {
bottom: max(var(--space-2), env(safe-area-inset-bottom, 0px));
flex-wrap: wrap;
}

.save-bar-actions {
flex: 1 1 100%;
}

.save-bar-actions > .btn {
flex: 1 1 auto;
}

}
@media print{

.save-bar { display: none; }

}

.pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1);
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}

.card > .pagination,
.card-list + .pagination,
.list-card + .pagination {
margin-top: var(--space-4);
}

.card > .list-card + .pagination,
.card > .card-list + .pagination {
padding-top: var(--space-4);
border-top: 1px solid var(--color-border-subtle);
}

.pagination-meta {
margin-inline-end: auto;
padding-inline: var(--space-2);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}

.pagination-pages {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: inherit;
}

.pagination a,
.pagination button,
.pagination .is-active,
.pagination-nav {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 36px;
min-height: 36px;
padding: 0 var(--space-2);
border: 0;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text-secondary);
font: inherit;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
font-variant-numeric: tabular-nums;
line-height: 1;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--transition-fast), color var(--transition-fast);
}

.pagination-nav {
color: var(--color-text);
}

.pagination svg {
display: block;
flex-shrink: 0;
width: 14px;
height: 14px;
}

.pagination .is-active {
background: var(--color-primary);
color: var(--color-on-primary);
font-weight: var(--font-weight-medium);
cursor: default;
pointer-events: none;
}
@media (hover: hover){

.pagination a:hover:not(.is-active),
.pagination button:hover:not(:disabled):not([disabled]):not(.is-active) {
background: var(--color-bg-hover);
color: var(--color-text);
}

}

.pagination a:active:not(.is-active),
.pagination button:active:not(:disabled):not(.is-active) {
background: var(--color-bg-hover);
color: var(--color-text);
}

.pagination a[disabled],
.pagination button:disabled,
.pagination button[disabled],
.pagination [aria-disabled="true"] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}

.pagination-ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
min-height: 36px;
color: var(--color-text-tertiary);
pointer-events: none;
}
@media (max-width: 30rem){

.pagination-meta {
padding-inline: 0;
}

.pagination > a:not(.pagination-nav):not(.is-active),
.pagination-pages > a:not(.is-active),
.pagination-pages > button:not(.is-active),
.pagination-ellipsis {
display: none;
}

}

.btn:focus-visible,
.overflow-trigger:focus-visible,
.modal-close:focus-visible,
.profile-trigger:focus-visible,
.toast-close:focus-visible,
.toast-action:focus-visible,
.alert-action:focus-visible,
.alert [data-alert-dismiss]:focus-visible,
.tabs__item:focus-visible,
.pagination a:focus-visible,
.pagination button:focus-visible,
.pagination-nav:focus-visible,
.notification-trigger:focus-visible,
.header-help-link:focus-visible,
.locale-toggle:focus-visible,
.iswap:focus-visible,
.nbell:focus-visible,
.nbell-adj:focus-visible,
.nav-toggle:focus-visible,
.toolbar-select:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}

.number-field {
display: flex;
align-items: stretch;
width: 100%;
max-width: 11rem;
min-height: var(--control-h);
border: 1px solid var(--color-border-control);
border-radius: var(--radius-control);
background: var(--color-surface);
user-select: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.number-field--compact {
max-width: 11rem;
}

.number-field--fluid {
max-width: none;
}

.number-field input,
.form-group .number-field input[type="text"] {
flex: 1 1 auto;
width: auto;
min-width: 3ch;
min-height: 0;
height: auto;
padding: 0 var(--space-2);
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
text-align: center;
font: inherit;
font-variant-numeric: tabular-nums;
appearance: none;
-webkit-appearance: none;
user-select: text;
}

.number-field input:focus,
.form-group .number-field input:focus,
.form-group .number-field input[type="text"]:focus,
.form-group.is-error .number-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-group.is-error .number-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,
.form-group.is-success .number-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-group .number-field input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]),
.form-group .number-field input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]):hover {
outline: none;
border: 0;
box-shadow: none;
background: transparent;
}

.number-unit {
display: inline-flex;
align-items: center;
flex-shrink: 0;
padding-inline-end: var(--space-2);
color: var(--color-text-tertiary);
font-size: var(--font-size-sm);
pointer-events: none;
user-select: none;
}

.number-step-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--touch-target-min);
flex-shrink: 0;
margin: var(--space-1);
padding: 0;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--transition-fast), color var(--transition-fast);
}

.number-step-btn svg {
display: block;
width: 16px;
height: 16px;
transition: transform var(--transition-fast);
}
@media (hover: hover){

.number-field:hover:not(:focus-within):not(:has(input:disabled)):not(:has([aria-invalid="true"])) {
border-color: var(--color-text-tertiary);
}

.number-step-btn:hover:not(:disabled) {
background: var(--color-bg-hover);
color: var(--color-text);
}

}

.number-step-btn:focus-visible {
outline: none;
color: var(--color-text);
background: var(--color-bg-hover);
}

.number-step-btn:active:not(:disabled) svg {
transform: scale(0.92);
}

.number-step-btn:disabled {
opacity: var(--opacity-disabled);
cursor: not-allowed;
}

.number-field:has(input:disabled) .number-step-btn:disabled {
opacity: 1;
}

.number-field:focus-within {
border-color: var(--color-accent);
box-shadow: var(--focus-field);
}

.form-group.is-error .number-field,
.form-group.is-error .number-field:hover,
.form-group.is-error .number-field:focus-within,
.number-field:has([aria-invalid="true"]) {
border-color: var(--color-danger);
box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.form-group.is-success .number-field,
.form-group.is-success .number-field:hover {
border-color: var(--color-success);
box-shadow: 0 0 0 3px var(--color-success-bg);
}

.form-group .number-field input:disabled {
opacity: 1;
cursor: inherit;
background: transparent;
}

.form-group.is-disabled .number-field,
.number-field:has(input:disabled) {
opacity: var(--opacity-disabled);
cursor: not-allowed;
background: var(--color-bg);
}

.form-group .number-field:has(input:read-only:not(:disabled)),
.number-field:has(input:read-only:not(:disabled)) {
background: var(--color-bg-subtle);
}

.form-group .number-field:has(input:read-only:not(:disabled)) input {
background: transparent;
cursor: default;
}
@media (prefers-reduced-motion: reduce){

.number-step-btn svg {
transform: none;
transition: none;
}

}

.choice-card-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
gap: var(--space-3);
align-items: stretch;
}

.choice-card {
--radius-pad: var(--space-4);
--radius-out: calc((var(--radius-control) + min(var(--radius-pad), 2px)) * var(--radius-factor));
--choice-mark: 18px;
--choice-mark-top: calc((var(--font-size-sm) * var(--line-height-tight) - var(--choice-mark)) / 2);
position: relative;
display: flex;
align-items: flex-start;
gap: var(--space-3);
min-height: var(--touch-target-min);
padding: var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-out);
color: var(--color-text);
cursor: pointer;
user-select: none;
transition:
background-color var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}

.choice-card:hover:not(:has(input:disabled)) {
background: var(--color-surface-hover);
border-color: var(--color-text-tertiary);
}

.choice-card:has(input:checked),
.choice-card.is-selected {
border-color: var(--color-accent);
background: var(--color-accent-subtle);
}

.choice-card:has(input:checked):hover:not(:has(input:disabled)),
.choice-card.is-selected:hover:not(:has(input:disabled)) {
border-color: var(--color-accent);
background: var(--color-accent-subtle);
}

.choice-card:focus-within {
outline: none;
border-color: var(--color-accent);
box-shadow: var(--focus-field);
}

.choice-card:has(input:disabled) {
opacity: var(--opacity-disabled);
cursor: not-allowed;
}

.choice-card > input {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
cursor: inherit;
appearance: none;
-webkit-appearance: none;
}

.choice-card > input:focus,
.choice-card > input:focus-visible {
outline: none;
}

.choice-card .t-radio-wrap,
.choice-card .t-check-wrap {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
pointer-events: none;
}

.choice-card-icon {
display: grid;
place-items: center;
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: var(--radius-control);
background: var(--color-bg-subtle);
color: var(--color-text);
transition:
background-color var(--transition-fast),
color var(--transition-fast);
}

.choice-card-icon svg {
display: block;
width: 16px;
height: 16px;
}

.choice-card:has(input:checked) .choice-card-icon,
.choice-card.is-selected .choice-card-icon {
color: var(--color-accent);
}

.choice-card {
--choice-media-h: 8rem;
--choice-media-w: 5.5rem;
}

.choice-card-media {
position: relative;
display: block;
flex: 1 1 100%;
order: -1;
height: var(--choice-media-h);
overflow: hidden;
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-control);
background: var(--color-bg-subtle);
pointer-events: none;
}

.choice-card-media.is-light {
background: var(--gray-0);
color-scheme: light;
}

.choice-card-media > img,
.choice-card-media > iframe,
.choice-card-media > svg {
display: block;
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
object-position: top center;
}

.choice-card:has(> .choice-card-media) {
flex-wrap: wrap;
}

.choice-card:has(> .choice-card-media):not(.choice-card--media-start) .choice-card-content {
flex: 1 1 0;
}

.choice-card:has(> .choice-card-media):not(.choice-card--media-start):has(input:checked)::before,
.choice-card:has(> .choice-card-media):not(.choice-card--media-start).is-selected::before {
top: calc(var(--space-4) + var(--choice-media-h) + var(--space-3) + var(--choice-mark-top));
}

.choice-card.choice-card--media-start {
flex-wrap: nowrap;
}

.choice-card--media-start > .choice-card-media {
flex: none;
order: 0;
width: var(--choice-media-w);
height: auto;
aspect-ratio: 4 / 5;
}

.choice-card-content {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--space-2);
row-gap: 2px;
flex: 1;
min-width: 0;
align-items: start;
}

.choice-card-title {
grid-column: 1;
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-tight);
color: var(--color-text);
margin: 0;
line-height: var(--line-height-tight);
}

.choice-card-meta {
grid-column: 2;
grid-row: 1;
align-self: start;
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
line-height: var(--line-height-tight);
}

.choice-card-desc {
grid-column: 1 / -1;
display: block;
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
margin: 0;
line-height: var(--line-height-normal);
}

.choice-card:hover:not(:has(input:disabled)):not(:has(input:checked)):not(.is-selected)::after {
border-color: var(--color-text-tertiary);
}

.choice-card::after {
content: "";
box-sizing: border-box;
width: var(--choice-mark);
height: var(--choice-mark);
flex-shrink: 0;
margin-top: var(--choice-mark-top);
border: 1px solid var(--color-border-control);
border-radius: var(--radius-full);
background-color: var(--color-surface);
transition:
border-color var(--transition-fast),
background-color var(--transition-fast);
}

.choice-card:has(input[type="checkbox"])::after {
border-radius: var(--radius-xs);
}

.choice-card:has(input:checked)::after,
.choice-card.is-selected::after {
border-color: var(--color-accent);
background-color: var(--color-accent);
}

.choice-card:has(input:checked)::before,
.choice-card.is-selected::before {
content: "";
position: absolute;
top: calc(var(--space-4) + var(--choice-mark-top));
inset-inline-end: var(--space-4);
width: var(--choice-mark);
height: var(--choice-mark);
background-color: var(--color-on-accent);
pointer-events: none;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 12px 12px;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 12px 12px;
}

.form-group.is-error .choice-card {
border-color: var(--color-danger);
}

.form-group.is-error .choice-card:has(input:checked),
.form-group.is-error .choice-card.is-selected {
border-color: var(--color-danger);
background: var(--color-danger-bg);
}

.form-group.is-error .choice-card:focus-within {
box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.form-group.is-error .choice-card:has(input:checked)::after,
.form-group.is-error .choice-card.is-selected::after {
border-color: var(--color-danger);
background-color: var(--color-danger);
}
@media (prefers-reduced-motion: reduce){

.choice-card,
.choice-card-icon,
.choice-card::after {
transition: none;
}

}

.separator-h,
.separator-v {
flex-shrink: 0;
border: 0;
background: var(--separator-color, var(--color-border));
}

.separator-h {
display: block;
height: 1px;
width: 100%;
margin-block: var(--space-4);
margin-inline: 0;
}

.separator-h.is-compact,
.separator-label.is-compact {
margin-block: var(--space-2);
}

.separator-v {
display: inline-block;
width: 1px;
height: 1.25em;
min-height: 1em;
align-self: stretch;
margin-block: 0;
margin-inline: var(--space-2);
vertical-align: middle;
}

.separator-label {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
color: var(--color-text-tertiary);
font-size: var(--font-size-sm);
line-height: var(--line-height-tight);
}

.separator-label {
margin-block: var(--space-4);
margin-inline: 0;
}

.separator-label::before,
.separator-label::after {
content: "";
flex: 1 1 0;
min-width: var(--space-4);
height: 1px;
background: var(--separator-color, var(--color-border));
}

.separator-label > * {
flex: 0 1 auto;
min-width: 0;
text-align: center;
}

.separator-h.is-subtle,
.separator-v.is-subtle,
.separator-label.is-subtle {
--separator-color: var(--color-border-subtle);
}

.collapse {
interpolate-size: allow-keywords;
width: 100%;
min-width: 0;
overflow: clip;
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--radius);
}

.collapse > summary {
display: flex;
align-items: center;
gap: var(--space-3);
box-sizing: border-box;
width: 100%;
min-height: var(--touch-target-min);
padding: var(--space-3) var(--space-4);
border-start-start-radius: inherit;
border-start-end-radius: inherit;
color: var(--color-text);
font-family: inherit;
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
text-align: start;
list-style: none;
cursor: pointer;
user-select: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--transition-fast);
}

.collapse:not([open]) > summary {
border-end-start-radius: inherit;
border-end-end-radius: inherit;
}

.collapse > summary::-webkit-details-marker { display: none; }

.collapse > summary::marker {
content: none;
font-size: 0;
}

.collapse-label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.collapse-meta {
flex-shrink: 0;
color: var(--color-text-tertiary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-normal);
}

.collapse-chevron {
display: block;
flex-shrink: 0;
width: 16px;
height: 16px;
margin-inline-start: auto;
color: var(--color-text-tertiary);
transition: transform var(--transition-fast), color var(--transition-fast);
}

.collapse > summary:not(:has(.collapse-chevron))::after {
content: "";
width: 8px;
height: 8px;
flex-shrink: 0;
margin-inline-start: auto;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
color: var(--color-text-tertiary);
transform: rotate(45deg);
transition: transform var(--transition-fast), color var(--transition-fast);
}

.collapse[open] > summary > .collapse-chevron { transform: rotate(180deg); }

.collapse[open] > summary:not(:has(.collapse-chevron))::after {
transform: rotate(225deg);
}

.collapse[open] > summary {
border-bottom: 1px solid var(--color-border-subtle);
}

.collapse[open] > summary > .collapse-chevron,
.collapse[open] > summary:not(:has(.collapse-chevron))::after {
color: var(--color-text-secondary);
}
@media (hover: hover) and (pointer: fine){

.collapse:not(.is-disabled) > summary:hover {
background: var(--color-bg-hover);
}

.collapse:not(.is-disabled) > summary:hover > .collapse-chevron,
.collapse:not(.is-disabled) > summary:hover:not(:has(.collapse-chevron))::after {
color: var(--color-text);
}

}

.collapse:not(.is-disabled) > summary:active {
background: var(--color-surface-hover);
}

.collapse > summary:focus {
outline: none;
}

.collapse > summary:focus-visible {
z-index: 1;
outline: 2px solid var(--color-accent);
outline-offset: -2px;
}

.collapse::details-content {
padding: 0;
block-size: 0;
overflow: clip;
opacity: 0;
transition:
block-size var(--transition-normal),
content-visibility var(--transition-normal),
opacity var(--transition-fast);
transition-behavior: allow-discrete;
}

.collapse[open]::details-content {
block-size: auto;
opacity: 1;
}

.collapse-body {
padding: var(--space-3) var(--space-4) var(--space-4);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}

.collapse-body > :first-child { margin-top: 0; }

.collapse-body > :last-child { margin-bottom: 0; }

.collapse-body > .collapse,
.collapse-body > .collapse-group {
margin-top: var(--space-3);
}

.collapse.is-plain {
background: transparent;
border-color: transparent;
border-radius: var(--radius-md);
}

.collapse.is-plain[open] > summary {
border-bottom-color: var(--color-border);
}

.collapse.is-compact > summary {
min-height: 36px;
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-sm);
}

.collapse.is-compact .collapse-body {
padding: var(--space-2) var(--space-3) var(--space-3);
}

.collapse.is-compact .collapse-chevron {
width: 14px;
height: 14px;
}

.collapse.is-disabled {
opacity: var(--opacity-disabled);
pointer-events: none;
}

.collapse.is-disabled > summary {
cursor: not-allowed;
}

.collapse-group {
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
overflow: clip;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
}

.collapse-group > .collapse {
border: 0;
border-radius: 0;
background: transparent;
}

.collapse-group > .collapse + .collapse {
border-top: 1px solid var(--color-border);
}

.collapse-group > .collapse[open] > summary {
border-bottom-color: var(--color-border);
}
@media (prefers-reduced-motion: reduce){

.collapse > summary,
.collapse-chevron,
.collapse > summary::after,
.collapse::details-content {
transition: none;
}

}
@media (forced-colors: active){

.collapse,
.collapse-group {
border: 1px solid CanvasText;
}

.collapse-group > .collapse + .collapse {
border-top: 1px solid CanvasText;
}

.collapse > summary:focus-visible {
outline: 2px solid Highlight;
outline-offset: -2px;
}

}

.toolbar {
--radius-pad: var(--space-1);
--radius-out: calc((var(--radius-control) + min(var(--radius-pad), 2px)) * var(--radius-factor));
box-sizing: border-box;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-1) var(--space-2);
width: 100%;
min-width: 0;
padding: var(--space-1);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-out);
}

.toolbar-group {
display: inline-flex;
align-items: center;
flex-shrink: 0;
gap: 1px;
padding: 2px;
background: var(--color-bg-subtle);
border-radius: var(--radius-sm);
}

.toolbar-group > .btn {
border-radius: var(--radius-xs);
}

.toolbar-end {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-1);
flex: 1 1 auto;
min-width: 0;
margin-inline-start: auto;
}

.toolbar-sep {
width: 1px;
align-self: stretch;
min-height: 1em;
margin-block: var(--space-1);
background: var(--color-border);
flex-shrink: 0;
}

.toolbar .btn-ghost:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}

.toolbar .btn[aria-pressed="true"],
.toolbar .btn[aria-pressed="true"]:hover {
background: var(--color-surface);
color: var(--color-text);
box-shadow: var(--shadow-xs);
}

.toolbar .drop.is-open [data-drop-open] {
background: var(--color-surface);
color: var(--color-text);
box-shadow: var(--shadow-xs);
}

.toolbar-select {
box-sizing: border-box;
width: 10rem;
max-width: 100%;
height: 32px;
min-height: 32px;
padding: 0 var(--select-chevron-pad-sm) 0 var(--space-3);
border: 0;
border-radius: var(--radius-xs);
background-color: transparent;
background-image: var(--select-chevron-sm);
background-repeat: no-repeat;
background-position: right var(--select-chevron-inset-sm) center;
background-size: 10px 10px;
color: var(--color-text);
font: inherit;
font-size: var(--font-size-sm);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}

.toolbar-select:hover:not(:disabled) {
background-color: var(--color-surface);
box-shadow: var(--shadow-xs);
}

.toolbar-select:focus-visible {
background-color: var(--color-surface);
box-shadow: var(--focus-ring);
}

.toolbar-select:disabled {
opacity: var(--opacity-disabled);
cursor: not-allowed;
box-shadow: none;
}

.scroll-area {
--scroll-area-max: none;
--scroll-area-inline: none;
box-sizing: border-box;
max-height: var(--scroll-area-max);
max-width: var(--scroll-area-inline);
min-width: 0;
overflow: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface);
color: var(--color-text);
scrollbar-width: thin;
scrollbar-color: var(--color-text-tertiary) transparent;
}

.scroll-area--y {
overflow-x: hidden;
overflow-y: auto;
}

.scroll-area--x {
overflow-x: auto;
overflow-y: hidden;
}

.scroll-area:focus {
outline: none;
}

.scroll-area:focus-visible {
box-shadow: inset var(--focus-ring);
}

.scroll-area-body {
box-sizing: border-box;
padding: var(--space-3);
outline: none;
}

.scroll-area--bare {
border: 0;
border-radius: 0;
background: transparent;
}

.scroll-area--bare .scroll-area-body {
padding: 0;
}

.scroll-area::-webkit-scrollbar {
width: 6px;
height: 6px;
}

.scroll-area::-webkit-scrollbar-track,
.scroll-area::-webkit-scrollbar-corner {
background: transparent;
}

.scroll-area::-webkit-scrollbar-thumb {
background: var(--color-text-tertiary);
border-radius: var(--radius-full);
}
@media (hover: hover){

.scroll-area:hover,
.scroll-area:focus-visible {
scrollbar-color: var(--color-text-secondary) transparent;
}

.scroll-area:hover::-webkit-scrollbar-thumb,
.scroll-area:focus-visible::-webkit-scrollbar-thumb,
.scroll-area::-webkit-scrollbar-thumb:hover {
background: var(--color-text-secondary);
}

}

.scroll-area-list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}

.scroll-area-list li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-2) 0;
border-bottom: var(--border-width) solid var(--color-border-subtle);
font-size: var(--font-size-sm);
}

.scroll-area-list li:first-child {
padding-top: 0;
}

.scroll-area-list li:last-child {
padding-bottom: 0;
border-bottom: 0;
}

.scroll-area-strip {
display: flex;
flex-wrap: nowrap;
gap: var(--space-2);
width: max-content;
}

.scroll-area-wide {
min-width: 28rem;
}

.scroll-area-wide thead th {
position: sticky;
top: 0;
background: var(--color-surface);
z-index: 1;
}
@media (forced-colors: active){

.scroll-area:not(.scroll-area--bare) {
border: 1px solid CanvasText;
}

}

.carousel {
--carousel-btn: 36px;
--carousel-peek: var(--space-5);
display: grid;
grid-template-columns: var(--carousel-btn) minmax(0, 1fr) var(--carousel-btn);
grid-template-rows: auto auto;
column-gap: var(--space-3);
align-items: center;
width: 100%;
}

.carousel-viewport {
grid-column: 2;
grid-row: 1;
position: relative;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}

.carousel-viewport::-webkit-scrollbar {
display: none;
}

.carousel-viewport.is-overflow-end {
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--space-5)), transparent);
}

.carousel-viewport.is-overflow-start {
mask-image: linear-gradient(90deg, transparent, #000 var(--space-5), #000);
}

.carousel-viewport.is-overflow-start.is-overflow-end {
mask-image: linear-gradient(90deg, transparent, #000 var(--space-5), #000 calc(100% - var(--space-5)), transparent);
}

.carousel-track {
display: flex;
}

.carousel-item {
box-sizing: border-box;
flex: 0 0 auto;
width: calc(100% - var(--carousel-peek));
min-width: calc(100% - var(--carousel-peek));
padding: var(--space-1);
scroll-snap-align: start;
scroll-snap-stop: always;
}

.carousel-item--third {
width: 33.333%;
min-width: 33.333%;
}

.carousel-slide {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: var(--space-1);
min-height: 7rem;
padding: var(--space-4);
}

.carousel-slide-title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
}

.carousel-slide-meta {
color: var(--color-text-tertiary);
font-size: var(--font-size-sm);
}

.carousel-btn {
grid-row: 1;
position: static;
justify-self: center;
border-radius: var(--radius-md);
}

.carousel-btn[data-carousel-prev] {
grid-column: 1;
}

.carousel-btn[data-carousel-next] {
grid-column: 3;
}

.carousel-nav {
grid-column: 1 / -1;
grid-row: 2;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
margin-top: var(--space-3);
}

.carousel-dots {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
}

.carousel-dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 0;
border-radius: var(--radius-full);
background: transparent;
cursor: pointer;
}

.carousel-dot::before {
content: "";
width: 8px;
height: 6px;
border-radius: var(--radius-full);
background: var(--color-border);
transition:
background-color var(--transition-fast),
width var(--transition-fast);
}

.carousel-dot[aria-current="true"]::before {
width: 14px;
background: var(--color-accent);
}

.carousel-dot:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}

.carousel-status {
color: var(--color-text-tertiary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
font-variant-numeric: tabular-nums;
}

.carousel.is-single {
grid-template-columns: minmax(0, 1fr);
}

.carousel.is-single .carousel-viewport {
grid-column: 1;
}

.carousel.is-single .carousel-btn,
.carousel.is-single .carousel-nav {
display: none;
}

.carousel:focus {
outline: none;
}

.carousel:focus-visible {
box-shadow: var(--focus-ring);
}
@media (prefers-reduced-motion: reduce){

.carousel-viewport {
scroll-behavior: auto;
}

.carousel-dot::before {
transition: none;
}

}

.input-group,
.input-affix {
display: flex;
align-items: stretch;
width: 100%;
min-height: var(--control-h);
border: 1px solid var(--color-border-control);
border-radius: var(--radius-control);
background: var(--color-surface);
cursor: text;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.input-group input,
.form-group .input-group input,
.input-affix input,
.form-group .input-affix input {
flex: 1 1 auto;
width: auto;
min-width: 0;
min-height: 0;
height: auto;
padding: 0 var(--space-3);
border: 0;
border-radius: 0;
outline: none;
background: transparent;
box-shadow: none;
font: inherit;
appearance: none;
-webkit-appearance: none;
}

.input-group:has(> .input-addon:first-child) > input,
.input-group--addon-left > input,
.input-affix:has(> span:first-child) > input {
padding-left: 0;
}

.input-group:has(> .input-addon:last-child) > input,
.input-group:has(> .field-action) > input,
.input-group--addon-right > input,
.input-affix:has(> span:last-child) > input {
padding-right: 0;
}

.input-addon,
.input-affix > span {
display: inline-flex;
align-items: center;
flex-shrink: 0;
padding-inline: var(--space-3);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
white-space: nowrap;
pointer-events: none;
user-select: none;
}

.input-addon:first-child,
.input-addon--left,
.input-affix > span:first-child {
padding-inline-end: var(--space-2);
}

.input-addon:last-child,
.input-addon--right,
.input-affix > span:last-child {
padding-inline-start: var(--space-2);
}

.input-addon svg,
.input-affix > span svg {
display: block;
width: 16px;
height: 16px;
color: var(--color-text-tertiary);
}

.input-group > .field-action {
cursor: pointer;
}

.input-group input:focus,
.form-group .input-group input:focus,
.form-group .input-group input[type="text"]:focus,
.form-group .input-group input[type="search"]:focus,
.form-group .input-group input[type="url"]:focus,
.form-group .input-group input[type="email"]:focus,
.form-group.is-error .input-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-group.is-error .input-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,
.form-group.is-success .input-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-group .input-group input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]),
.form-group .input-group input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]):hover,
.input-affix input:focus,
.form-group .input-affix input:focus,
.form-group.is-error .input-affix input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-group.is-error .input-affix input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,
.form-group.is-success .input-affix input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-group .input-affix input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]),
.form-group .input-affix input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]):hover {
outline: none;
border: 0;
box-shadow: none;
background: transparent;
}
@media (hover: hover){

.input-group:hover:not(:focus-within):not(:has(input:disabled)):not(:has([aria-invalid="true"])),
.input-affix:hover:not(:focus-within):not(:has(input:disabled)):not(:has([aria-invalid="true"])) {
border-color: var(--color-text-tertiary);
}

}

.input-group:focus-within,
.input-affix:focus-within {
border-color: var(--color-accent);
box-shadow: var(--focus-field);
}

.form-group.is-error .input-group,
.form-group.is-error .input-group:hover,
.form-group.is-error .input-group:focus-within,
.input-group:has([aria-invalid="true"]),
.form-group.is-error .input-affix,
.form-group.is-error .input-affix:hover,
.form-group.is-error .input-affix:focus-within,
.input-affix:has([aria-invalid="true"]) {
border-color: var(--color-danger);
box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.form-group.is-success .input-group,
.form-group.is-success .input-group:hover,
.form-group.is-success .input-affix,
.form-group.is-success .input-affix:hover {
border-color: var(--color-success);
box-shadow: 0 0 0 3px var(--color-success-bg);
}

.form-group .input-group input:disabled,
.form-group .input-affix input:disabled {
opacity: 1;
cursor: inherit;
background: transparent;
}

.form-group.is-disabled .input-group,
.input-group:has(input:disabled),
.form-group.is-disabled .input-affix,
.input-affix:has(input:disabled) {
opacity: var(--opacity-disabled);
cursor: not-allowed;
background: var(--color-bg);
}

.form-group .input-group:has(input:read-only:not(:disabled)),
.input-group:has(input:read-only:not(:disabled)),
.form-group .input-affix:has(input:read-only:not(:disabled)),
.input-affix:has(input:read-only:not(:disabled)) {
background: var(--color-bg-subtle);
}

.form-group .input-group:has(input:read-only:not(:disabled)) input,
.form-group .input-affix:has(input:read-only:not(:disabled)) input {
background: transparent;
cursor: default;
}

.panel {
--radius-pad: var(--space-6);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-out);
padding: var(--space-6) var(--space-8);
margin-bottom: var(--space-4);
box-shadow: none;
}

.data-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.data-display-wrap {
--table-bg: var(--color-surface);
padding: 0;
overflow: hidden;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-panel);
box-shadow: var(--shadow-panel);
}

.data-display-wrap:not(.card) .data-table th:first-child,
.data-display-wrap:not(.card) .data-table td:first-child { padding-left: var(--panel-x); }

.data-display-wrap:not(.card) .data-table th:last-child,
.data-display-wrap:not(.card) .data-table td:last-child { padding-right: var(--panel-x); }

:is(.dash-panel, .card, .settings-card) .data-display-wrap {
margin-inline: calc(var(--panel-x) * -1);
background: transparent;
border: 0;
border-top: 1px solid var(--color-border-subtle);
border-radius: 0;
box-shadow: none;
}

:is(.dash-panel, .card, .settings-card) .data-display-wrap:last-child {
margin-bottom: calc(var(--space-5) * -1);
border-bottom-left-radius: var(--radius-panel);
border-bottom-right-radius: var(--radius-panel);
}

.data-display-wrap.card {
border-top: 1px solid var(--color-border);
}

.data-display-wrap .data-table-wrap {
margin: 0;
}

.data-table-responsive {
display: block;
}

.data-cards-responsive {
display: none;
}

.table-row-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: inherit;
text-decoration: none;
font-weight: var(--font-weight-medium);
}

.table-row-link:hover {
color: var(--color-accent);
}

.table-row-text {
display: flex;
flex-direction: column;
min-width: 0;
max-width: 36rem;
}

.table-row-snippet,
.list-card__snippet {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-regular);
color: var(--color-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 48rem){

.data-display-wrap {
background: transparent;
border: 0;
box-shadow: none;
overflow: visible;
}

.data-table-responsive {
display: none;
}

.data-cards-responsive {
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--color-border);
}

.data-cards-responsive > .list-card {
border: 0;
border-bottom: 1px solid var(--color-border-subtle);
border-radius: 0;
background: transparent;
padding-inline: 0;
}

}

.accent-swatches {
display: flex;
gap: 8px;
align-items: center;
}

.accent-swatch {
position: relative;
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--swatch);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
cursor: pointer;
}

.accent-swatch input {
position: absolute;
inset: 0;
opacity: 0;
margin: 0;
cursor: pointer;
}

.accent-swatch.is-on,
.accent-swatch:has(input:checked) {
box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--swatch);
}

.accent-swatch:has(input:focus-visible) {
box-shadow: var(--focus-ring);
}

.seg label.seg-opt input {
position: absolute;
opacity: 0;
inset: 0;
margin: 0;
cursor: pointer;
}

.seg label.seg-opt {
position: relative;
}

.perm-yes { color: var(--color-success-text, var(--color-text)); font-weight: 600; }

.perm-no, .perm-mid { color: var(--color-text-tertiary); }

.offline-bar {
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0 0 var(--space-4);
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
}

.offline-bar[hidden] { display: none; }

.state-matrix {
display: flex;
flex-direction: column;
gap: var(--space-3);
overflow-x: auto;
padding: var(--space-1);
margin: calc(var(--space-1) * -1);
}

.state-matrix-row {
display: grid;
grid-template-columns: 88px repeat(6, max-content);
gap: 10px;
align-items: center;
}

.edit-layout {
max-width: 580px;
}

.record-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
gap: var(--space-10);
align-items: start;
}

.record-main .edit-layout {
max-width: none;
}

.record-main :is(p, .cmt-text) {
max-width: 75ch;
}

:is(.record-main, .sheet--xl, .sheet--full) .form-group {
--field-max: 40rem;
--field-max-text: 60rem;
}

:is(.record-main, .sheet--xl, .sheet--full) .form-group > :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"]), select, .select, .combo, .datepick, .daterange, .field, .input-group, .input-affix, .tags, .ms, .ai-field) {
max-width: var(--field-max);
}

:is(.record-main, .sheet--xl, .sheet--full) .form-group > :is(textarea, .field:has(textarea), .ai-field:has(> textarea)) {
max-width: var(--field-max-text);
}

.record-side {
padding: var(--space-4) var(--space-5) var(--space-2);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-panel);
box-shadow: var(--shadow-panel);
}

.record-side-h {
margin: 0 0 var(--space-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
}
@media (max-width: 64rem){

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

}

.history {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}

.history-item {
position: relative;
display: grid;
grid-template-columns: 14px minmax(0, 1fr);
gap: var(--space-3);
padding-bottom: var(--space-4);
}

.history-item:not(:last-child)::before {
content: "";
position: absolute;
top: 14px;
bottom: 0;
left: 6px;
width: 1px;
background: var(--color-border);
}

.history-dot {
width: 7px;
height: 7px;
margin: 6px 0 0 3px;
border-radius: var(--radius-full);
background: var(--color-text-tertiary);
}

.history-line {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
}

.history-changes {
margin: 2px 0 0;
padding: 0;
list-style: none;
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
}

.history-field {
color: var(--color-text-tertiary);
}

.history-old {
text-decoration: line-through;
text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
}

.history-when {
margin: 2px 0 0;
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
font-variant-numeric: tabular-nums;
}

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

.settings-card:has(.select.is-open),
.settings-card:has(.combo.is-open),
.settings-section:has(.select.is-open),
.settings-section:has(.combo.is-open),
.form:has(.select.is-open),
.form:has(.combo.is-open) {
overflow: visible;
}

.settings-split:has(.select.is-open),
.settings-split:has(.combo.is-open),
.settings-pref:has(.select.is-open),
.settings-pref:has(.combo.is-open),
.form-group:has(.select.is-open),
.form-group:has(.combo.is-open),
.team-invite:has(.select.is-open) {
position: relative;
z-index: 8;
}

form[data-prefs-auto] {
margin: 0;
}

.form-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-4);
padding-top: var(--space-5);
justify-content: flex-end;
border-top: var(--border-width) solid var(--color-border-subtle);
}

.form > .form-actions {
margin-top: 0;
}
@media (max-width: 36rem){

.form-actions {
flex-direction: column-reverse;
align-items: stretch;
}

.form-actions .btn {
width: 100%;
}

}

.form-actions .is-action-suggest,
.form-actions .is-action-summarize { order: 0; }

.form-actions-sep { order: 1; flex: 1 1 auto; }

.form-actions .is-action-cancel { order: 2; }

.form-actions .is-action-save { order: 3; }

@keyframes profile-photo-in {
from {
opacity: 0;
filter: blur(var(--photo-swap-blur));
transform: scale(0.96);
}
to {
opacity: 1;
filter: blur(0);
transform: scale(1);
}
}

.switch-demo {
display: flex;
flex-direction: column;
gap: var(--space-5);
width: 100%;
max-width: 24rem;
min-width: 0;
}

.switch-stack {
display: flex;
flex-direction: column;
gap: var(--space-1);
width: 100%;
max-width: 24rem;
min-width: 0;
}

.switch {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: var(--touch-target-min);
margin: 0;
cursor: pointer;
}

.switch-copy {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}

.switch-label {
color: var(--color-text);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
user-select: none;
}

.switch-hint {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}

.toggle-switch {
--switch-track-w: 2.75rem;
--switch-track-h: 1.625rem;
--switch-thumb: 1.25rem;
--switch-inset: 0.1875rem;
position: relative;
display: inline-flex;
flex-shrink: 0;
width: var(--switch-track-w);
height: var(--switch-track-h);
margin: 0;
cursor: pointer;
}

.toggle-switch input {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}

.toggle-slider {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--color-text-secondary) 38%, var(--color-border));
border-radius: var(--radius-full);
transition: background var(--transition-fast);
}

.toggle-slider::before,
.toggle-thumb {
position: absolute;
top: var(--switch-inset);
left: var(--switch-inset);
width: var(--switch-thumb);
height: var(--switch-thumb);
background: var(--color-surface);
border-radius: var(--radius-full);
box-shadow: var(--shadow-sm);
pointer-events: none;
}

.toggle-slider::before {
content: "";
transition: transform var(--transition-fast);
}

.toggle-thumb {
will-change: transform, width;
}

.toggle-switch[data-switch-on] .toggle-slider::before {
content: none;
display: none;
}

.toggle-switch input:checked + .toggle-slider {
background: var(--color-accent);
}

.toggle-switch input:checked + .toggle-slider::before {
transform: translateX(calc(var(--switch-track-w) - var(--switch-thumb) - var(--switch-inset) * 2));
}

.toggle-switch input:focus-visible + .toggle-slider {
box-shadow: var(--focus-ring);
}
@media (hover: hover){

.toggle-switch:hover:not(:has(input:disabled)) .toggle-slider {
background: color-mix(in srgb, var(--color-text-secondary) 50%, var(--color-border));
}

.toggle-switch:hover:has(input:checked):not(:has(input:disabled)) .toggle-slider {
background: var(--color-accent-hover);
}

}

.toggle-switch:has(input:disabled),
.switch:has(input:disabled) {
cursor: not-allowed;
opacity: var(--opacity-disabled);
}

.toggle-switch input:disabled {
cursor: not-allowed;
pointer-events: none;
}

.toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-height: var(--touch-target-min);
padding: var(--space-2) 0;
}

.toggle-row strong { display: block; font-size: var(--font-size-sm); }

.toggle-row small { display: block; margin-top: 2px; color: var(--color-text-secondary); font-size: var(--font-size-sm); }

.field-label-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-height: var(--touch-target-min);
margin: 0;
}

.field-label-row + .field-label-row {
margin-top: var(--space-1);
padding-top: var(--space-3);
border-top: var(--border-width) solid var(--color-border-subtle);
}

.field-label-row__copy {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}

.field-label-row > label,
.field-label-row .field-label-row__label {
margin: 0;
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-text);
}

.field-label-row .form-hint {
margin: 0;
}

.field-label-row + .form-hint {
margin-top: 0;
margin-bottom: var(--space-4);
}

.form-group:has(> .drop-zone),
.form-group:has(> .group-picker) {
width: 100%;
min-width: 0;
}

.drop-zone {
--radius-pad: var(--space-5);
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
width: 100%;
max-width: 24rem;
min-width: 0;
padding: var(--space-5);
border: 1.5px dashed var(--color-border-control);
border-radius: var(--radius-out);
background: var(--color-bg);
cursor: pointer;
transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.drop-zone-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
opacity: 0;
}

.form-group .drop-zone-input,
.form-group .drop-zone-input:hover,
.form-group .drop-zone-input:focus,
.form-group.is-error .drop-zone-input,
.form-group.is-error .drop-zone-input:hover,
.form-group.is-error .drop-zone-input:focus,
.form-group .drop-zone .drop-zone-input,
.form-group .drop-zone .drop-zone-input:hover,
.form-group .drop-zone .drop-zone-input:focus,
.form-group.is-error .drop-zone .drop-zone-input,
.form-group .drop-zone-input[aria-invalid="true"],
.form-group .drop-zone-input[aria-invalid="true"]:hover {
position: absolute;
width: 1px;
height: 1px;
min-height: 0;
padding: 0;
margin: -1px;
border: 0;
box-shadow: none;
background: transparent;
opacity: 0;
appearance: none;
}

.drop-zone-body {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
text-align: center;
}

.drop-zone-icon {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
color: var(--color-text-secondary);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}

.drop-zone-icon svg,
.drop-file-icon svg,
.drop-file-remove svg {
display: block;
}

.drop-zone-text {
margin: 0;
max-width: 100%;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text);
line-height: var(--line-height-normal);
}

.drop-zone-browse {
display: inline;
margin: 0;
padding: 0;
border: 0;
background: none;
color: var(--color-accent);
font: inherit;
font-weight: var(--font-weight-semibold);
text-decoration: underline;
text-underline-offset: 0.15em;
cursor: pointer;
}

.drop-zone-hint {
margin: 0;
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
}

.drop-zone-files {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}

.drop-zone-files[hidden] {
display: none;
}

.drop-zone-error {
margin: 0;
font-size: var(--font-size-xs);
line-height: var(--line-height-normal);
color: var(--color-danger-text);
text-align: center;
overflow-wrap: anywhere;
}

.drop-zone-error[hidden] {
display: none;
}

.drop-file {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: var(--touch-target-min);
padding: var(--space-2) var(--space-3);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
text-align: left;
}

.drop-file-icon {
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
color: var(--color-text-secondary);
flex-shrink: 0;
}

.drop-file-meta {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
}

.drop-file-name {
overflow: hidden;
color: var(--color-text);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-overflow: ellipsis;
white-space: nowrap;
}

.drop-file-size {
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
font-variant-numeric: tabular-nums;
}

.drop-file-remove {
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
flex-shrink: 0;
}

.drop-file-remove:hover {
color: var(--color-text);
background: var(--color-surface-hover);
}

.drop-file-remove:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
@media (hover: hover){

.drop-zone:hover:not(.is-disabled):not(:has(.drop-zone-input:disabled)) {
border-color: var(--color-border-control-hover);
background: var(--color-bg-hover);
}

}

.drop-zone.is-dragover {
border-color: var(--color-accent);
border-style: solid;
background: var(--color-accent-subtle);
}

.drop-zone:has(:focus-visible) {
outline: none;
border-color: var(--color-accent);
box-shadow: var(--focus-ring);
}

.drop-zone.has-files .drop-zone-icon {
display: none;
}

.drop-zone.has-files {
padding: var(--space-4);
}

.form-group.is-error .drop-zone,
.drop-zone.is-invalid,
.drop-zone:has(.drop-zone-input[aria-invalid="true"]) {
border-color: var(--color-danger);
box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.form-group.is-disabled .drop-zone,
.drop-zone.is-disabled,
.drop-zone:has(.drop-zone-input:disabled) {
cursor: not-allowed;
opacity: var(--opacity-disabled);
pointer-events: none;
}
@media (prefers-reduced-motion: reduce){

.toggle-slider,
.toggle-slider::before,
.toggle-thumb,
.drop-zone {
transition: none;
}

}

.group-picker {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
max-height: 16.5rem;
overflow-y: auto;
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg);
}

.group-picker[aria-disabled="true"] {
opacity: var(--opacity-disabled);
pointer-events: none;
}

.group-picker .group-chip {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: var(--control-xs);
margin: 0;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-normal);
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.group-picker .group-chip[data-dot]::before {
content: "";
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background: var(--ms-dot, var(--color-text-tertiary));
flex-shrink: 0;
}

.group-picker .group-chip span {
color: var(--color-text);
}

.group-picker .group-chip:hover {
border-color: color-mix(in srgb, var(--color-text) 26%, var(--color-surface));
}

.group-picker .group-chip input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
margin: 0;
pointer-events: none;
}

.group-picker .group-chip:has(input:checked) {
color: var(--color-on-primary);
font-weight: var(--font-weight-medium);
background: var(--color-primary);
border-color: var(--color-primary);
}

.group-picker .group-chip:has(input:checked) span { color: var(--color-on-primary); }

.group-picker .group-chip:has(input:checked)[data-dot]::before {
background: var(--color-on-primary);
}

.group-picker .group-chip:has(input:focus-visible) {
outline: none;
box-shadow: var(--focus-ring);
}

.group-picker-group {
display: contents;
}

.group-picker-label {
flex: 1 0 100%;
padding: var(--space-1) var(--space-1) 0;
color: var(--color-text-tertiary);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 0;
text-transform: none;
}

.ms-demo {
display: flex;
flex-direction: column;
gap: var(--space-6);
}

.ms {
--ms-input-min-width: 5.5rem;
--ms-menu-height: 18rem;
--ms-row: calc(var(--control-h) - 8px);
position: relative;
z-index: 1;
}

.ms.is-open {
z-index: 5;
}

.ms-control {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: var(--space-2);
min-height: var(--control-h);
max-height: 8.5rem;
overflow-y: auto;
padding: 3px var(--space-3);
background: var(--color-surface);
border: 1px solid var(--color-border-control);
border-radius: var(--radius-control);
cursor: text;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ms-control:hover {
border-color: var(--color-text-tertiary);
}

.ms.is-open .ms-control,
.ms-control:focus-within {
outline: none;
border-color: var(--color-accent);
box-shadow: var(--focus-field);
}

.form-group.is-error .ms-control,
.form-group.is-error .ms.is-open .ms-control,
.form-group.is-error .ms-control:focus-within,
.ms.is-invalid .ms-control,
.ms.is-invalid.is-open .ms-control,
.ms.is-invalid .ms-control:focus-within {
border-color: var(--color-danger);
box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.ms.is-disabled {
pointer-events: none;
}

.ms.is-disabled .ms-control,
.form-group.is-disabled .ms-control {
opacity: 0.6;
cursor: not-allowed;
background: var(--color-bg);
border-color: var(--color-border);
box-shadow: none;
}

.ms.is-disabled .ms-token-x {
visibility: hidden;
pointer-events: none;
}

.ms-main {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
min-width: 0;
}

.ms-tokens {
display: contents;
}

.ms-token {
display: inline-flex;
align-items: center;
gap: var(--chip-gap);
max-width: 100%;
padding: 2px 2px 2px 8px;
font-size: var(--chip-font);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
color: var(--color-text);
background: var(--chip-bg);
border: 1px solid var(--chip-edge);
border-radius: var(--chip-radius);
animation: ms-token-in var(--dur-base) var(--select-ease, var(--ease-emphasized)) both;
height: var(--chip-h);
}

.ms-token .ms-dot {
width: 8px;
height: 8px;
}

.ms-token.is-out {
animation: ms-token-out var(--dur-fast) var(--select-ease, var(--ease-emphasized)) both;
}

@keyframes ms-token-in {
from { opacity: 0; transform: translateY(6px) scale(0.92); }
to { opacity: 1; transform: none; }
}

@keyframes ms-token-out {
from { clip-path: inset(0 0 0 0 round var(--radius-md)); }
to { clip-path: inset(0 0 0 100% round var(--radius-md)); }
}

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

.ms-token-x {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 20px;
height: 20px;
padding: 0;
border: 0;
border-radius: var(--radius-full);
background: transparent;
color: var(--color-text-tertiary);
cursor: pointer;
transition: background-color var(--transition-fast), color var(--transition-fast);
}

.ms-token-x:hover {
background: var(--color-bg-hover);
color: var(--color-text);
}

.ms-token-x:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}

.ms-token-x svg {
width: 12px;
height: 12px;
}
@media (max-width: 48rem){

.ms-token-x {
width: var(--touch-target-min);
height: calc(var(--ms-row) + 6px);
margin: calc((var(--ms-row) + 6px - 20px) / -2) calc((var(--touch-target-min) - 20px) / -2) calc((var(--ms-row) + 6px - 20px) / -2) 0;
}

}

.ms-control input[type="text"],
.form-group .ms-control input[type="text"],
.form-group.is-error .ms-control input[type="text"],
.form-group .ms-control input[type="text"]:disabled {
flex: 1 1 var(--ms-input-min-width);
width: auto;
min-width: var(--ms-input-min-width);
min-height: 0;
height: var(--ms-row);
margin: 0;
padding: 0 2px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
opacity: 1;
color: var(--color-text);
font: inherit;
cursor: text;
}

.ms-control input[type="text"]:focus,
.form-group .ms-control input[type="text"]:focus,
.form-group.is-error .ms-control input[type="text"]:focus {
outline: none;
border: 0;
box-shadow: none;
}

.ms-control input[type="text"]::placeholder {
color: var(--color-text-tertiary);
}

.ms.is-disabled .ms-control input[type="text"] {
cursor: not-allowed;
}

.ms-chevron {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 16px;
height: var(--ms-row);
color: var(--color-text-tertiary);
}

.ms-chevron svg {
display: block;
width: 16px;
height: 16px;
transition: transform var(--dur-slow) var(--ease-overshoot);
}

.ms.is-open .ms-chevron svg {
transform: rotate(180deg);
}

.ms-menu {
position: absolute;
z-index: 2;
top: 100%;
left: 0;
right: 0;
display: grid;
grid-template-rows: 0fr;
margin: 0;
overflow: hidden;
pointer-events: none;
opacity: 0;
background: var(--color-surface);
border: 1px solid transparent;
border-radius: var(--radius-md);
box-shadow: none;
transform-origin: top;
transition:
grid-template-rows var(--select-open, var(--dur-enter)) var(--select-ease, var(--ease-emphasized)),
margin var(--select-gap-dur, var(--dur-enter)) var(--ease-overshoot) var(--dur-instant),
opacity var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}

.ms-menu-inner {
min-height: 0;
max-height: var(--ms-menu-height);
overflow-y: auto;
}

.ms.is-open .ms-menu-inner {
padding: var(--space-1);
}

.ms.is-open .ms-menu {
grid-template-rows: 1fr;
margin-top: var(--select-gap, var(--space-2));
opacity: 1;
pointer-events: auto;
border-color: var(--color-border);
box-shadow: var(--shadow-float);
}

.ms.is-top .ms-menu {
top: auto;
bottom: 100%;
transform-origin: bottom;
}

.ms.is-open.is-top .ms-menu {
margin-top: 0;
margin-bottom: var(--select-gap, var(--space-2));
}

.ms-group {
margin: 0;
padding: var(--space-1) 0;
border: 0;
min-inline-size: 0;
}

.ms-group + .ms-group {
border-top: 1px solid var(--color-border-subtle);
}

.ms-group-label {
padding: 6px 10px 4px;
color: var(--color-text-tertiary);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 0;
text-transform: none;
}

.ms-option,
.form-group .ms-option {
position: relative;
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0;
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-tertiary);
border-radius: var(--radius-sm);
cursor: pointer;
opacity: 0;
transform: translateY(-6px);
filter: blur(3px);
transition:
opacity var(--dur-base) var(--ease-out) calc(50ms + (var(--i, 0) * 35ms)),
transform var(--dur-base) var(--ease-out) calc(50ms + (var(--i, 0) * 35ms)),
filter var(--dur-base) var(--ease-out) calc(50ms + (var(--i, 0) * 35ms)),
background-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}

.ms.is-open .ms-option {
opacity: 1;
transform: none;
filter: none;
}

.ms-option[hidden] {
display: none;
}

.ms.is-open .ms-option.is-disabled {
opacity: var(--opacity-disabled);
}

.ms:not(.is-open) .ms-option {
transition-delay: 0ms;
}

.ms-option span {
min-width: 0;
color: inherit;
}

.ms-option:hover,
.ms-option.is-active,
.ms-option[aria-selected="true"] {
background: var(--color-bg-subtle);
color: var(--color-text);
}

.ms-option.is-disabled {
opacity: var(--opacity-disabled);
cursor: not-allowed;
pointer-events: none;
}

.ms-mark {
background: var(--color-accent-subtle);
color: inherit;
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-xs);
padding: 0 1px;
}

.ms-dot {
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background: var(--ms-dot, var(--color-text-tertiary));
}

.group-chip[data-dot="rose"],
.ms-dot[data-dot="rose"] { --ms-dot: var(--viz-5); }

.group-chip[data-dot="sky"],
.ms-dot[data-dot="sky"] { --ms-dot: var(--color-info); }

.group-chip[data-dot="amber"],
.ms-dot[data-dot="amber"] { --ms-dot: var(--color-warning); }

.group-chip[data-dot="violet"],
.ms-dot[data-dot="violet"] { --ms-dot: var(--viz-7); }

.group-chip[data-dot="emerald"],
.ms-dot[data-dot="emerald"] { --ms-dot: var(--color-success); }

.group-chip[data-dot="slate"],
.ms-dot[data-dot="slate"] { --ms-dot: var(--color-text-tertiary); }

.ms-option input[type="checkbox"] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
margin: 0;
pointer-events: none;
}

.ms-check {
flex-shrink: 0;
width: 14px;
height: 14px;
margin-left: auto;
opacity: 0;
transform: scale(0.72);
transition:
opacity var(--dur-fast) var(--ease-out),
transform var(--dur-base) var(--select-ease, var(--ease-emphasized));
}

.ms-option[aria-selected="true"] .ms-check {
opacity: 1;
transform: none;
}

.ms-empty {
gap: var(--space-2);
color: var(--color-text-tertiary);
font-size: var(--font-size-sm);
}

.ms-empty-icon {
color: var(--color-text-tertiary);
}
@media (prefers-reduced-motion: reduce){

.ms-token,
.ms-token.is-out,
.ms-menu,
.ms-option,
.ms-chevron svg,
.ms-check {
animation: none !important;
transition: none !important;
filter: none !important;
transform: none !important;
}

.ms.is-open .ms-option { opacity: 1; }

}

.overflow-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
min-width: 0;
}

.entity-toolbar + .overflow-chips {
margin: var(--space-3) 0;
}

.overflow-chip {
display: inline-flex;
box-sizing: border-box;
flex: 0 1 auto;
align-items: center;
max-width: 100%;
overflow-wrap: anywhere;
min-height: var(--chip-h);
font-size: var(--chip-font);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-snug);
padding: 2px var(--space-2);
border-radius: var(--chip-radius);
background: color-mix(in srgb, var(--color-text) 6%, transparent);
color: var(--color-text-secondary);
border: 1px solid transparent;
}

.overflow-chips-toggle:not(:checked) ~ span.overflow-chip:nth-child(n + 5) {
display: none;
}

.overflow-chips-toggle:checked ~ .overflow-chip--more {
display: none;
}

.overflow-chip--more {
cursor: pointer;
}

.overflow-chip--more:hover {
color: var(--color-text);
border-color: var(--color-border);
}

.overflow-chip--more:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
@media (prefers-reduced-motion: reduce){

.ms-control,
.ms-token-x { transition: none; }

}
@media (max-width: 48rem){

.app-main .btn,
.modal-overlay .btn,
.overflow-item {
min-height: var(--touch-target-min);
touch-action: manipulation;
}

}

.entity-list {
--radius-pad: 0px;
border-top: 1px solid var(--color-border-strong);
}

.entity-list .entity-toolbar {
padding: var(--space-3) 0;
}

.entity-list .overflow-chips,
.entity-list .filter-chips {
margin: 0;
padding: 0 0 var(--space-3);
}

.entity-list .entity-rows {
border-top: 1px solid var(--color-border);
}

.entity-list .entity-toolbar + .overflow-chips,
.entity-list .entity-toolbar + .filter-chips {
margin: 0;
padding-top: 0;
}

.entity-rows {
display: flex;
flex-direction: column;
}

.entity-list .list-card {
margin: 0;
padding-inline: var(--space-3);
border: 0;
border-radius: 0;
border-bottom: 1px solid var(--color-border-subtle);
background: transparent;
box-shadow: none;
}

.entity-list > .pagination,
.entity-list .entity-rows + .pagination {
margin: 0;
padding: var(--space-3) 0;
}

.entity-toolbar {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 0 0 var(--space-3);
flex-wrap: wrap;
}

.dash-panel > .entity-toolbar {
padding-top: 0;
}

.entity-toolbar .select .select-trigger {
font-size: var(--font-size-sm);
}

.sheet-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: var(--space-3) 0 0;
}

.panel-summary {
display: flex;
flex-wrap: wrap;
gap: 0 var(--space-1);
margin: calc(var(--space-2) * -1) 0 var(--space-3);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}

.dash-panel > .form + .form {
margin-top: var(--space-6);
}

.name-cell {
display: inline-flex;
align-items: center;
gap: var(--space-3);
min-width: 0;
max-width: 100%;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: start;
text-decoration: none;
}

button.name-cell,
a.name-cell {
cursor: pointer;
}
@media (hover: hover){

button.name-cell:hover .name-cell-title,
a.name-cell:hover .name-cell-title {
color: var(--color-accent);
}

}

.name-cell:focus-visible {
border-radius: var(--radius-xs);
outline: var(--focus-ring-width) solid var(--color-accent);
outline-offset: var(--focus-gap);
}

.name-cell-text {
display: flex;
flex-direction: column;
min-width: 0;
}

.name-cell-title {
color: var(--color-text);
font-weight: var(--font-weight-medium);
}

.name-cell-title > .tag {
display: inline-block;
margin-inline-start: 6px;
background: color-mix(in srgb, var(--color-text) 6%, transparent);
line-height: inherit;
vertical-align: 1px;
}

.name-cell-meta {
overflow: hidden;
max-width: 24rem;
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
text-overflow: ellipsis;
white-space: nowrap;
}

.sheet-id {
display: flex;
flex: 1 1 auto;
align-items: center;
gap: var(--space-3);
min-width: 0;
}

.facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4) var(--space-6);
margin: 0;
}

.facts > .is-wide {
grid-column: 1 / -1;
}

.facts dt {
margin-bottom: 2px;
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
}

.facts dd {
min-width: 0;
margin: 0;
color: var(--color-text);
font-size: var(--font-size-sm);
overflow-wrap: anywhere;
}

.sheet-sec > .facts + form,
.sheet-sec .facts + .admin-settings,
.sheet-sec > .sheet-note + :is(form, .form) {
margin-top: var(--space-5);
}

.sheet-sec {
margin-top: var(--space-6);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}

.sheet-sec-h {
display: flex;
align-items: baseline;
gap: var(--space-2);
margin: 0 0 var(--space-2);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
}

.sheet-sec-n {
color: var(--color-text-tertiary);
font-weight: var(--font-weight-normal);
font-variant-numeric: tabular-nums;
}

.sheet-note {
margin: var(--space-2) 0 0;
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
}

.sheet-row {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: 52px;
padding: var(--space-2) 0;
border-bottom: 1px solid var(--color-border-subtle);
}

.sheet-row:last-child {
border-bottom: 0;
}

.sheet-row-copy {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
}

.sheet-row-copy strong {
color: var(--color-text);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
}

.sheet-row-copy span {
overflow: hidden;
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
text-overflow: ellipsis;
}

.sheet-row form,
.sheet-row-actions {
display: flex;
flex: none;
gap: var(--space-1);
margin: 0;
}

.sheet-row-meta {
flex: none;
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
}

.secret-row .sheet-row-copy > .secret-row-line {
display: flex;
align-items: baseline;
gap: var(--space-2);
min-width: 0;
white-space: nowrap;
}

.secret-mask {
position: relative;
flex: none;
color: var(--color-text-secondary);
font-family: var(--font-mono);
font-size: var(--font-size-xs);
letter-spacing: 0;
}

.secret-row-line > .secret-row-hint {
min-width: 0;
white-space: normal;
}

.sheet-sec:has(> .sheet-row > .avatar:first-child) {
container: sheet-people / inline-size;
}

.sheet-row:has(> .avatar:first-child) {
flex-wrap: wrap;
row-gap: var(--space-2);
}

.sheet-row > .avatar:first-child + .sheet-row-copy {
flex: 1 1 0;
}

.sheet-row > .avatar:first-child + .sheet-row-copy > span {
white-space: nowrap;
}

.sheet-row:has(> .avatar:first-child) > .sheet-row-actions {
flex-wrap: wrap;
align-items: center;
margin-left: auto;
}
@container sheet-people (max-width: 32.5rem){

.sheet-row > .avatar:first-child + .sheet-row-copy {
flex-basis: calc(100% - 2rem - var(--space-3));
}

.sheet-row:has(> .avatar:first-child) > .sheet-row-actions {
flex: 1 1 100%;
margin-left: 0;
padding-left: calc(2rem + var(--space-3));
}

}

.sheet-sec.is-danger .sheet-sec-h {
color: var(--color-danger-text);
}
@media (max-width: 40rem){

.admin-table:not(.admin-table--ws) :is(th, td):nth-child(n + 3):not(:last-child),
.admin-table--ws :is(th, td):nth-child(n + 2):not(:last-child) {
display: none;
}

.col-opt-sm {
display: none;
}

.entity-toolbar:has(.select ~ .select) > .entity-search {
grid-column: 1 / -1;
}

.entity-toolbar:has(.select ~ .select) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.entity-toolbar:has(.select ~ .select) > .select {
width: 100%;
max-width: none;
}

.entity-toolbar:has(.select ~ .select ~ .select) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.entity-toolbar:has(.select ~ .select ~ .select) > .select {
width: 100%;
max-width: none;
}

.entity-toolbar:not([data-filter-fit]):has(.select ~ .select ~ .select):not(:has(.select ~ .select ~ .select ~ .select)) > .select ~ .select ~ .select {
grid-column: 1 / -1;
}

.entity-toolbar[data-filter-fit] {
grid-auto-flow: row dense;
}

.entity-toolbar[data-filter-fit] > .select.is-wide {
grid-column: 1 / -1;
width: 100%;
max-width: none;
}

.facts {
gap: var(--space-4);
}

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

}

.entity-search {
flex: 1 1 12rem;
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 12rem;
min-height: var(--control-h);
background: var(--color-surface);
border: 1px solid var(--color-border-control);
border-radius: var(--radius-control);
padding: 0 var(--space-2) 0 var(--space-3);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
@media (hover: hover){

.entity-search:hover:not(:focus-within):not(:has(:disabled)) {
border-color: var(--color-text-tertiary);
}

}

.entity-search:focus-within {
border-color: var(--color-accent);
box-shadow: var(--focus-field);
background: var(--color-surface);
}

.entity-search:has(input:disabled) {
opacity: var(--opacity-disabled);
cursor: not-allowed;
background: var(--color-surface);
pointer-events: none;
}

.entity-search svg {
flex-shrink: 0;
color: var(--color-text-tertiary);
transition: color var(--transition-fast);
}

.entity-search:focus-within svg {
color: var(--color-text-secondary);
}

.entity-search-input {
width: 100%;
min-width: 0;
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
outline: none;
appearance: none;
-webkit-appearance: none;
background: transparent;
box-shadow: none;
font: inherit;
font-size: var(--font-size-sm);
color: var(--color-text);
}

.entity-search-input::placeholder {
color: var(--color-text-tertiary);
}

.entity-search-input:disabled {
cursor: not-allowed;
}

.entity-search-input::-webkit-search-cancel-button,
.entity-search-input::-webkit-search-decoration {
appearance: none;
-webkit-appearance: none;
}

.entity-search-clear {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
padding: 0;
border: 0;
border-radius: var(--radius-full);
background: transparent;
color: var(--color-text-tertiary);
cursor: pointer;
}
@media (hover: hover){

.entity-search-clear:hover:not(:disabled) {
background: var(--color-border-subtle);
color: var(--color-text);
}

}

.entity-search-clear:focus-visible {
outline: none;
color: var(--color-text);
box-shadow: var(--focus-ring);
}

.entity-search:has(.entity-search-input:placeholder-shown) > .entity-search-clear,
.entity-search:has(.entity-search-input:placeholder-shown) > [data-field-clear],
.entity-search:has(.entity-search-input:disabled) > .entity-search-clear,
.entity-search:has(.entity-search-input:disabled) > [data-field-clear] {
visibility: hidden;
pointer-events: none;
}

.entity-filter-select {
min-height: var(--control-h);
padding: var(--space-2) var(--select-chevron-pad-sm) var(--space-2) var(--space-3);
border: 1px solid var(--color-border-control);
border-radius: var(--radius-control);
background-color: var(--color-surface);
font-size: var(--font-size-sm);
font-family: var(--font-sans);
color: var(--color-text);
cursor: pointer;
appearance: none;
background-image: var(--select-chevron-sm);
background-repeat: no-repeat;
background-position: right var(--select-chevron-inset-sm) center;
background-size: 10px 10px;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
@media (hover: hover){

.entity-filter-select:hover:not(:disabled):not(:focus) {
border-color: var(--color-text-tertiary);
}

}

.entity-filter-select:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: var(--focus-field);
background-color: var(--color-surface);
}

.entity-filter-select:disabled {
opacity: var(--opacity-disabled);
cursor: not-allowed;
}

.entity-count {
margin-inline-start: auto;
font-size: var(--font-size-xs);
font-variant-numeric: tabular-nums;
color: var(--color-text-secondary);
white-space: nowrap;
}

@keyframes skeleton-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}

.skeleton {
--skel-base: color-mix(in srgb, var(--color-text) 6%, var(--color-surface));
--skel-shine: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
--skel-delay: 0ms;
position: relative;
display: block;
overflow: hidden;
isolation: isolate;
pointer-events: none;
background: var(--skel-base);
border-radius: var(--radius-sm);
}

.skeleton::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
105deg,
transparent 35%,
var(--skel-shine) 50%,
transparent 65%
);
transform: translateX(-100%);
animation: skeleton-shimmer var(--shimmer-dur, 800ms) var(--shimmer-ease, linear) infinite;
animation-delay: var(--skel-delay);
}

.skeleton-info .skeleton:nth-child(2),
.skeleton-copy .skeleton:nth-child(2),
.skeleton-row .skeleton:nth-child(3),
.skeleton-metric .skeleton:nth-child(2) { --skel-delay: 80ms; }

.skeleton-copy .skeleton:nth-child(3),
.skeleton-row .skeleton:nth-child(4) { --skel-delay: 160ms; }

.skeleton-copy .skeleton:nth-child(4) { --skel-delay: 240ms; }

.skeleton-card {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-control);
}

.skeleton-card + .skeleton-card { margin-top: var(--space-3); }

.card-list > .skeleton-card + .skeleton-card { margin-top: 0; }

.skeleton-avatar {
width: 44px;
height: 44px;
border-radius: var(--radius-full);
flex-shrink: 0;
}

.skeleton-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}

.skeleton-line--title {
width: 9.5rem;
max-width: 55%;
height: var(--font-size-base);
}

.skeleton-line--meta {
width: 6rem;
max-width: 40%;
height: var(--font-size-xs);
}

.skeleton-line--wide {
width: 72%;
max-width: 100%;
height: var(--font-size-xs);
}

.skeleton-line--value {
width: 4.5rem;
max-width: 70%;
height: var(--font-size-2xl);
border-radius: var(--radius-md);
}

.skeleton-row {
display: flex;
align-items: center;
gap: var(--space-3);
min-width: 0;
padding: var(--space-3) 0;
}

.skeleton-check {
width: 1rem;
height: 1rem;
border-radius: var(--radius-xs);
flex-shrink: 0;
}

.skeleton-row .skeleton-line--title { width: 28%; height: var(--font-size-sm); }

.skeleton-row .skeleton-line--meta { width: 18%; height: var(--font-size-sm); }

.skeleton-row .skeleton-line--wide { width: 22%; height: var(--font-size-sm); }

.skeleton-copy {
display: flex;
flex-direction: column;
gap: var(--space-2);
width: 100%;
max-width: 36rem;
}

.skeleton-copy .skeleton-line--title {
width: 40%;
max-width: 12rem;
height: var(--font-size-md);
}

.skeleton-copy .skeleton-line--meta {
width: 100%;
max-width: none;
height: var(--font-size-xs);
}

.skeleton-copy .skeleton-line--wide,
.skeleton-copy .skeleton:last-child {
width: 72%;
max-width: 72%;
}

.skeleton-metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
width: 100%;
max-width: 28rem;
}

.skeleton-metric {
--radius-pad: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-out);
box-shadow: none;
}

.data-table .skeleton {
display: inline-block;
vertical-align: middle;
}

.data-table td .skeleton-line--title {
width: 8rem;
max-width: 100%;
height: var(--font-size-sm);
}

.data-table td .skeleton-line--meta {
width: 4.5rem;
max-width: 100%;
height: var(--font-size-xs);
}

.data-table td.sub-num .skeleton { margin-inline-start: auto; }

.load-status {
display: inline-flex;
align-items: center;
gap: var(--space-3);
min-height: 2rem;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}

.load {
position: relative;
}

.load.is-cover {
isolation: isolate;
overflow: hidden;
border-radius: inherit;
}

.load.is-cover > .load-status {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
justify-content: center;
border-radius: inherit;
background: color-mix(in srgb, var(--color-surface) 78%, transparent);
}

.load.is-cover:not([aria-busy="true"]) > .load-status { display: none; }
@media (prefers-reduced-motion: reduce){

.skeleton::after {
content: none;
animation: none;
}

}
@media (max-width: 40rem){

.skeleton-metrics { grid-template-columns: 1fr; }

}

.list-card {
display: flex;
align-items: center;
gap: var(--space-3);
min-width: 0;
min-height: var(--touch-target-min);
padding: var(--space-3) var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-control);
text-decoration: none;
color: inherit;
transition: background-color var(--transition-fast);
}

.list-card + .list-card { margin-top: var(--space-3); }

.card-list > .list-card + .list-card,
.entity-list .list-card + .list-card,
.entity-rows > .list-card + .list-card { margin-top: 0; }
@media (hover: hover){

.list-card:hover {
background: var(--color-surface-hover);
}

}

.list-card:focus-visible,
.list-card__link:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
z-index: 1;
}

.list-card.is-selected {
background: var(--color-accent-subtle);
}

.list-card__link {
display: flex;
align-items: center;
gap: var(--space-3);
flex: 1;
min-width: 0;
color: inherit;
text-decoration: none;
}

.list-card__check {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: var(--touch-target-min);
height: var(--touch-target-min);
margin-inline-start: calc(var(--space-2) * -1);
}

.list-card__check input {
width: 16px;
height: 16px;
margin: 0;
}

.list-card.is-active {
background: var(--color-accent-subtle);
}

.list-card[hidden] {
display: none;
}

.list-card__thumb {
width: 40px;
height: 28px;
object-fit: cover;
border-radius: var(--radius-sm);
flex-shrink: 0;
}

.list-card__avatar {
width: 36px;
height: 36px;
border-radius: var(--radius-full);
background: color-mix(in srgb, var(--color-text) 6%, transparent);
display: grid;
place-items: center;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
flex-shrink: 0;
}

.list-card__body {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}

.list-card__title {
font-weight: var(--font-weight-medium);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.list-card__meta {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.list-card .status-badge { flex-shrink: 0; }

.list-note {
margin: 0 0 var(--space-3);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}

.list-note-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin: 0 0 var(--space-3);
}

.list-note-row .list-note { margin: 0; }

.list-note a {
color: var(--color-accent);
font-weight: var(--font-weight-medium);
}
@media (max-width: 40rem){

.entity-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
}

.entity-search { width: auto; flex: none; min-width: 0; max-width: none; }

.entity-filter-select,
.entity-toolbar .select { width: auto; flex: none; min-width: 0; max-width: 12rem; }

.entity-toolbar > .entity-count { grid-column: 1 / -1; }

.entity-toolbar:has(> .entity-search):has(> .select):not(:has(> .select ~ .select)) {
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.entity-toolbar:has(> .entity-search):has(> .select):not(:has(> .select ~ .select)) > .select {
width: 100%;
max-width: none;
}

.entity-toolbar:has(.entity-search ~ .entity-search) > :is(.entity-search, .datepick) { grid-column: 1 / -1; }

.entity-search { min-height: var(--touch-target-min); }

.entity-search-input { min-height: calc(var(--touch-target-min) - 2px); font-size: var(--font-size-mobile-control); }

.entity-filter-select { min-height: var(--touch-target-min); }

.entity-count { margin-inline-start: 0; }

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

.entity-search,
.entity-filter-select,
.entity-toolbar .select,
.entity-search svg,
.list-card { transition: none; }

}

.dash-grid {
--dash-gap: var(--space-8);
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--space-10) var(--dash-gap);
}

.dash-grid > * {
grid-column: span 6;
min-width: 0;
}

.dash-grid:not(.dash-grid--even) > :nth-child(odd) { grid-column: span 8; }

.dash-grid:not(.dash-grid--even) > :nth-child(even) { grid-column: span 4; }

.dash-panel {
--radius-pad: 0px;
--table-bg: var(--color-surface);
min-width: 0;
padding: var(--space-4) var(--panel-x) var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-panel);
box-shadow: var(--shadow-panel);
}

:where(.app-main, .page-section) > .onboard + :is(.dash-panel, .dash-grid),
:where(.app-main, .page-section) > .dash-panel + :is(.dash-panel, .dash-grid),
:where(.app-main, .page-section) > .dash-grid + :is(.dash-panel, .dash-grid) {
margin-top: var(--space-3);
}

.dash-panel > .panel-head {
min-height: var(--control-sm);
margin-bottom: var(--space-3);
}

.dash-panel > .panel-head h2,
.dash-panel > .panel-head h3 {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
letter-spacing: 0;
}

.panel-meta {
color: var(--color-text-tertiary);
font-size: var(--font-size-sm);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}

.dash-summary {
display: flex;
flex-wrap: wrap;
gap: 0 var(--space-2);
}

.dash-summary > span + span::before {
content: "\00b7";
margin-right: var(--space-2);
color: var(--color-text-tertiary);
}

.dash-panel--metrics {
padding: 0;
background: none;
border: 0;
box-shadow: none;
}

.dash-panel--metrics > .panel-head {
margin-bottom: var(--space-2);
}

.dash-panel--metrics .metric-grid {
gap: var(--space-3);
}

.dash-panel--metrics .metric {
position: relative;
}

.dash-panel--metrics .metric--lead {
box-shadow: none;
}
@media (hover: hover){

.dash-panel--metrics a.metric:hover .lbl {
color: var(--color-text);
}

}

.dash-register th:first-child,
.dash-register td:first-child { padding-left: var(--space-3); }

.dash-register th:last-child,
.dash-register td:last-child { padding-right: var(--space-3); }

.dash-register th:nth-child(2),
.dash-register th:nth-child(3) { width: 18%; }

.dash-register th:last-child { width: 12%; }

.dash-register tr:last-child td {
border-bottom: 1px solid var(--color-border-subtle);
}

.data-table.dash-register thead th {
position: static;
background: transparent;
}
@media (hover: hover){

.dash-register tbody tr:hover td { background: transparent; }

}

.dash-register .table-row-link {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.dash-panel .card-list {
gap: 0;
}

.dash-panel .list-card {
background: transparent;
border: 0;
border-bottom: 1px solid var(--color-border-subtle);
border-radius: 0;
padding-left: 0;
padding-right: 0;
}

.dash-panel .list-card:last-child {
border-bottom: 0;
}
@media (hover: hover){

.dash-panel .list-card:hover {
background: transparent;
}

.dash-panel .list-card:hover .list-card__title {
color: var(--color-text);
}

}
@media (max-width: 56.25rem){

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

.dash-grid > *,
.dash-grid:not(.dash-grid--even) > :nth-child(n) {
grid-column: 1 / -1;
}

.dash-panel--metrics .metric-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

}
@media (max-width: 40rem){

.dash-summary { flex-direction: column; }

.dash-summary > span + span::before { content: none; }

.dash-panel--metrics .metric {
padding-block: var(--space-4);
}

.dash-register thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}

.dash-register,
.dash-register tbody {
display: block;
}

.dash-register tr {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
"title title status"
"due when status";
gap: 2px var(--space-3);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-border-subtle);
}

.dash-register td,
.dash-register td:first-child,
.dash-register td:last-child,
.dash-register tr:last-child td {
height: auto;
padding: 0;
border: 0;
}

.dash-register td:nth-child(1) { grid-area: title; }

.dash-register td:nth-child(2) { grid-area: due; }

.dash-register td:nth-child(3) { grid-area: when; }

.dash-register td:nth-child(4) { grid-area: status; align-self: center; }

.dash-register td:nth-child(2),
.dash-register td:nth-child(3) {
font-size: var(--font-size-xs);
}

.dash-register td[data-label]::before {
content: attr(data-label) " ";
color: var(--color-text-tertiary);
}

.dash-register td.is-empty { display: none; }

.dash-register tr:has(> td.is-empty) {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"title status"
"when status";
}

}

.status-rows {
display: flex;
flex-direction: column;
}

.status-row {
--row-tone: var(--color-text-tertiary);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
column-gap: var(--space-3);
row-gap: var(--space-2);
align-items: baseline;
min-height: var(--touch-target-min);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-border-subtle);
color: inherit;
text-decoration: none;
}

a.status-row.is-active { --row-tone: var(--color-success); }

a.status-row.is-draft { --row-tone: var(--color-text-tertiary); }

a.status-row.is-archived { --row-tone: var(--color-warning); }

.status-row.is-accent { --row-tone: var(--color-accent); }

.status-row.is-success { --row-tone: var(--color-success); }

.status-row.is-warning { --row-tone: var(--color-warning); }

.status-row.is-danger { --row-tone: var(--color-danger); }

.status-row.is-neutral { --row-tone: var(--color-text-tertiary); }

a.status-row:hover .status-row-label { color: var(--color-text); }

.status-row:last-child { border-bottom: 0; }

a.status-row:focus {
outline: none;
}

a.status-row:focus-visible {
border-radius: var(--radius-xs);
box-shadow: var(--focus-ring);
}

.status-row-label {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
transition: color var(--transition-fast);
}

.status-row-label::before {
content: "";
width: 7px;
height: 7px;
flex: none;
border-radius: var(--radius-full);
background: var(--row-tone);
}

.status-row-val {
font-variant-numeric: tabular-nums;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
}

.status-row-meter {
grid-column: 1 / -1;
width: 100%;
height: 6px;
margin: 0;
border: 0;
border-radius: var(--radius-full);
background: var(--color-bg-subtle);
vertical-align: middle;
-webkit-appearance: none;
appearance: none;
}

.status-row-meter::-webkit-meter-inner-element {
display: block;
}

.status-row-meter::-webkit-meter-bar {
height: 6px;
border: 0;
background: var(--color-bg-subtle);
border-radius: inherit;
}

.status-row-meter::-webkit-meter-optimum-value,
.status-row-meter::-webkit-meter-suboptimum-value,
.status-row-meter::-webkit-meter-even-less-good-value {
background: var(--row-tone);
border-radius: inherit;
}

.status-row-meter::-moz-meter-bar {
background: var(--row-tone);
border-radius: inherit;
}

@keyframes plt-rise {
from { opacity: 0; transform: translateY(10px); }
}
@media (prefers-reduced-motion: no-preference){

body.is-overview .app-main > :is(.page-head, .onboard, .dash-panel, .dash-grid) {
animation: plt-rise var(--dur-enter) var(--ease-emphasized) backwards;
}

body.is-overview .app-main > :is(.page-head, .onboard, .dash-panel, .dash-grid):focus-within {
z-index: 2;
}

body.is-overview .dash-panel--metrics .metric {
animation: plt-rise var(--dur-enter) var(--ease-emphasized) backwards;
}

body.is-overview .dash-panel--metrics .metric:nth-child(1) { animation-delay: 120ms; }

body.is-overview .dash-panel--metrics .metric:nth-child(2) { animation-delay: 160ms; }

body.is-overview .dash-panel--metrics .metric:nth-child(3) { animation-delay: 200ms; }

body.is-overview .dash-panel--metrics .metric:nth-child(4) { animation-delay: 240ms; }

body.is-overview .dash-panel--metrics .metric:nth-child(5) { animation-delay: 280ms; }

body.is-overview .dash-panel--metrics .metric:nth-child(n + 6) { animation-delay: 320ms; }

}

.error-shell .empty-state-title {
font-size: var(--font-size-xl);
letter-spacing: -0.025em;
}
@media (max-width: 48rem){

.col-opt {
display: none;
}

.data-table:not(.data-table--nowrap) .name-cell-title,
.data-table:not(.data-table--nowrap) .name-cell-meta {
max-width: 100%;
white-space: normal;
overflow-wrap: break-word;
}

}

.auth-page {
background: var(--color-bg);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.auth-toolbar {
position: absolute;
top: var(--space-4);
right: var(--space-4);
z-index: 2;
display: flex;
gap: var(--space-2);
}

.error-code {
margin: 0 0 var(--space-3);
font-variant-numeric: tabular-nums;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 0;
text-transform: none;
color: var(--color-text-tertiary);
}

.nf {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
width: 100%;
min-height: 420px;
text-align: center;
}

.nf-code {
position: relative;
display: inline-block;
user-select: none;
line-height: 1;
}

.nf-code .error-code {
display: block;
margin: 0;
font-family: var(--font-sans);
font-size: clamp(5rem, 18vw, 10rem);
font-weight: var(--font-weight-semibold);
font-variant-numeric: tabular-nums;
letter-spacing: var(--letter-spacing-display);
line-height: 1;
text-transform: none;
color: var(--color-text);
}

.nf-ghost {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.nf-ghost .error-code {
color: inherit;
}

.nf-ghost {
display: none;
}

.nf-copy {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
}

.nf h1 {
margin: 0;
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-heading);
color: var(--color-text);
}

.nf .auth-subtitle {
margin: 0;
max-width: 22rem;
}

.nf .btn {
min-height: 44px;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@media (prefers-reduced-motion: reduce){

.nf-ghost {
display: none;
}

}

.auth-page:has(.auth-aside) {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
align-items: stretch;
}

.auth-wrapper {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-10) var(--space-6);
position: relative;
}

.auth-aside {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: calc(100vh - var(--space-6));
margin: var(--space-3) var(--space-3) var(--space-3) 0;
padding: var(--space-10);
overflow: hidden;
border-radius: calc(16px * var(--radius-factor));
background: linear-gradient(165deg, var(--gray-800) 0%, var(--gray-900) 55%, var(--ground-dark) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 40px -20px rgba(17, 17, 20, 0.45);
color: var(--gray-50);
}

html[data-theme="dark"] .auth-aside {
background: linear-gradient(165deg, var(--gray-800) 0%, var(--gray-900) 55%, var(--gray-950) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px var(--color-border);
color: var(--color-text);
}

.auth-aside-media {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
animation: authAsideSettle 1.4s var(--ease-out) both;
}

.auth-aside:has(.auth-aside-media)::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
linear-gradient(180deg, rgba(10, 10, 12, 0.42) 0%, rgba(10, 10, 12, 0) 28%),
linear-gradient(0deg, rgba(10, 10, 12, 0.72) 0%, rgba(10, 10, 12, 0.18) 42%, rgba(10, 10, 12, 0) 60%);
pointer-events: none;
}

.auth-aside:has(.auth-aside-media) {
color: var(--color-on-fill);
}

.auth-aside > :not(.auth-aside-media) {
position: relative;
z-index: 1;
}

html[data-theme="dark"] .auth-aside-media {
filter: brightness(0.82) saturate(0.9);
}

@keyframes authAsideSettle {
from { opacity: 0; transform: scale(1.04); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){

.auth-aside-media { animation: none; }

}

.auth-aside-mark {
display: block;
}

.auth-aside-name {
margin: 0;
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-display);
line-height: var(--line-height-tight);
overflow-wrap: anywhere;
}

.auth-page:has(.auth-aside) .auth-toolbar {
right: auto;
left: var(--space-4);
}
@media (max-width: 56.25rem){

.auth-page:has(.auth-aside) { display: flex; }

.auth-aside { display: none; }

.auth-page:has(.auth-aside) .auth-toolbar { left: auto; right: var(--space-4); }

}

.auth-container {
--control-h: var(--control-lg);
--radius-pad: 0;
width: 100%;
max-width: 360px;
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
text-align: left;
position: relative;
z-index: 1;
}

.auth-logo {
display: flex;
justify-content: flex-start;
margin-bottom: var(--space-8);
}

.auth-logo svg {
width: 32px;
height: 32px;
}

.auth-logo svg rect:first-child {
fill: var(--color-primary);
}

.auth-logo svg rect:last-child {
stroke: var(--color-on-primary);
}

.auth-container h1,
.auth-brand {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-1);
letter-spacing: var(--letter-spacing-heading);
}

.auth-subtitle,
.auth-container h1.auth-subtitle {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-normal);
letter-spacing: normal;
color: var(--color-text-secondary);
margin-bottom: var(--space-8);
}

.auth-passkey:not([hidden]) ~ .separator-label {
display: none;
}

.auth-container form {
text-align: left;
}

.auth-container .btn-primary {
margin-top: var(--space-2);
margin-bottom: var(--space-5);
}

.auth-passkey {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin: 0;
}

.auth-passkey[hidden] { display: none; }

.auth-passkey:not([hidden]) ~ .separator-label { display: none; }

.auth-passkey .btn svg { flex: none; }

.auth-passkey-status:empty { display: none; }

.auth-passkey-status.is-error { color: var(--color-danger-text, var(--color-danger)); }

.auth-container .auth-google-btn {
margin-bottom: 0;
gap: 12px;
overflow: visible;
background: #fff;
color: #1f1f1f;
border-color: #747775;
box-shadow: none;
font-weight: var(--font-weight-medium);
}

.auth-container .auth-google-btn svg {
width: 18px;
height: 18px;
}

.auth-container .auth-google-btn:hover {
background: #f8f9fa;
border-color: #747775;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
transform: none;
}

.auth-container .auth-google-btn:active {
background: #eee;
transform: none;
}

.auth-forgot {
margin: calc(var(--space-3) * -1) 0 var(--space-5);
text-align: start;
}

.auth-forgot a,
.auth-footer a {
color: var(--color-accent);
text-decoration: none;
font-weight: var(--font-weight-medium);
}

.auth-forgot a:hover,
.auth-footer a:hover {
text-decoration: underline;
}

.auth-forgot a {
font-size: var(--font-size-sm);
}

.auth-footer {
margin-top: var(--space-5);
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}

.auth-recovery {
margin-top: var(--space-5);
text-align: start;
}

.auth-footer--row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
}

.auth-link {
padding: 0;
border: 0;
background: none;
color: var(--color-accent);
font: inherit;
font-weight: var(--font-weight-medium);
cursor: pointer;
}

.auth-link:hover {
text-decoration: underline;
}

.auth-link:focus-visible {
outline: 0;
border-radius: var(--radius-sm);
box-shadow: var(--focus-ring);
}

.consent-docs {
margin: 0 0 var(--space-5);
padding: 0;
list-style: none;
border-top: 1px solid var(--color-border);
text-align: start;
}

.consent-docs li {
display: grid;
grid-template-columns: 1fr auto;
gap: 2px var(--space-3);
align-items: baseline;
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-border);
}

.consent-doc-name {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
}

.consent-doc-meta {
grid-column: 1;
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
font-variant-numeric: tabular-nums;
}

.consent-doc-link {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
color: var(--color-accent);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-decoration: none;
}

.consent-doc-link:hover {
text-decoration: underline;
}
@media (max-width: 30rem){

.auth-container {
padding: var(--space-6) var(--space-5);
border-radius: var(--radius-lg);
}

}

.toast-container {
--toast-open: 350ms;
--toast-close: 180ms;
--toast-slot: 350ms;
--toast-swap: 250ms;
--toast-distance: 16px;
--toast-blur: 2px;
--toast-scale: 0.97;
--toast-ease: var(--ease-out);
--toast-accent: var(--color-accent);
position: fixed;
right: max(var(--space-4), env(safe-area-inset-right, 0px));
bottom: max(var(--space-6), env(safe-area-inset-bottom, 0px));
z-index: var(--z-toast);
display: flex;
flex-direction: column-reverse;
gap: var(--space-2);
width: calc(100vw - 2 * var(--space-4));
max-width: 24rem;
margin: 0;
padding: 0;
list-style: none;
pointer-events: none;
}
@media (max-width: 30rem){

.toast-container {
left: max(var(--space-4), env(safe-area-inset-left, 0px));
right: max(var(--space-4), env(safe-area-inset-right, 0px));
width: auto;
max-width: none;
}

}

.toast-container--inline {
position: relative;
left: auto;
right: auto;
bottom: auto;
transform: none;
width: 100%;
max-width: 24rem;
flex-direction: column;
pointer-events: none;
}

.toast-slot {
display: grid;
grid-template-rows: 1fr;
pointer-events: none;
transition: grid-template-rows var(--toast-slot) var(--toast-ease);
}

.toast button,
.toast a {
pointer-events: auto;
}

body:has(.drawer.is-open) .toast-container {
bottom: max(5.5rem, env(safe-area-inset-bottom, 0px));
}

.toast-slot.is-leaving {
grid-template-rows: 0fr;
}

.toast-slot-clip {
min-height: 0;
overflow: hidden;
}

.toast {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--space-3);
--radius-pad: var(--space-1);
padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
overflow: hidden;
border: var(--border-width) solid var(--color-border);
border-radius: var(--float-radius, var(--radius-out));
background: var(--color-surface-float);
box-shadow: var(--shadow-float);
animation: toastIn var(--toast-open) var(--toast-ease) both;
will-change: transform, opacity, filter;
touch-action: pan-y;
transition:
transform var(--toast-close) var(--toast-ease),
opacity var(--toast-close) var(--toast-ease);
}

.toast[data-status="success"] { --toast-accent: var(--color-success); }

.toast[data-status="error"] { --toast-accent: var(--color-danger); }

.toast[data-status="warning"] { --toast-accent: var(--color-warning); }

.toast[data-status="info"],
.toast[data-status="loading"] { --toast-accent: var(--color-info); }

.toast.is-leaving {
animation: toastOut var(--toast-close) var(--toast-ease) both;
pointer-events: none;
}

.toast.is-dragging {
animation: none;
transition: none;
}

.toast-container--inline .toast,
.toast.is-static {
animation: none;
will-change: auto;
pointer-events: none;
}

@keyframes toastIn {
from {
opacity: 0;
filter: blur(var(--toast-blur));
transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
}
to {
opacity: 1;
filter: blur(0);
transform: translateY(0) scale(1);
}
}

@keyframes toastOut {
to {
opacity: 0;
filter: blur(var(--toast-blur));
transform: translateX(var(--toast-out-x, 2rem)) scale(var(--toast-scale));
}
}

.toast-icon {
display: grid;
flex-shrink: 0;
place-items: center;
width: 16px;
height: 20px;
margin-top: 0;
overflow: visible;
background: none;
}

.toast-icon svg {
display: block;
}

.toast-icon--neutral {
color: var(--color-text-tertiary);
background: none;
}

.toast-icon--info,
.toast-icon--loading {
color: var(--color-info);
background: none;
}

.toast-icon--success {
color: var(--color-success);
background: none;
}

.toast-icon--error {
color: var(--color-danger);
background: none;
}

.toast-icon--warning {
color: var(--color-warning);
background: none;
}

.toast-ico {
display: inline-flex;
grid-area: 1 / 1;
}

.toast-ico.is-in {
animation: toastIcoIn var(--toast-swap) var(--toast-ease) both;
}

.toast-ico.is-out {
animation: toastIcoOut var(--toast-swap) var(--toast-ease) both;
}

.toast-ico.is-spin {
animation: spin var(--dur-spin) linear infinite;
}

@keyframes toastIcoIn {
from {
opacity: 0;
filter: blur(4px);
transform: scale(0.25);
}
to {
opacity: 1;
filter: blur(0);
transform: none;
}
}

@keyframes toastIcoOut {
from {
opacity: 1;
filter: blur(0);
transform: none;
}
to {
opacity: 0;
filter: blur(4px);
transform: scale(0.25);
}
}

.toast-content {
min-width: 0;
flex: 1;
padding-top: 2px;
}

.toast-copy.is-in {
animation: toastCopyIn var(--toast-swap) var(--toast-ease) both;
}

.toast-copy.is-out {
animation: toastCopyOut var(--toast-swap) var(--toast-ease) both;
}

@keyframes toastCopyIn {
from {
opacity: 0;
filter: blur(4px);
transform: translateY(6px);
}
to {
opacity: 1;
filter: blur(0);
transform: none;
}
}

@keyframes toastCopyOut {
from {
opacity: 1;
filter: blur(0);
transform: none;
}
to {
opacity: 0;
filter: blur(4px);
transform: translateY(-6px);
}
}

.toast-title {
display: -webkit-box;
overflow: hidden;
color: var(--color-text);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
line-height: 20px;
letter-spacing: 0;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}

.toast-message {
display: -webkit-box;
margin-top: 2px;
overflow: hidden;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}

.toast-action {
position: relative;
display: inline-flex;
align-items: center;
min-height: 28px;
margin-top: var(--space-2);
padding: 0 var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font: inherit;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-tight);
cursor: pointer;
}
@media (hover: hover){

.toast-action:hover {
background: var(--color-surface-hover);
border-color: var(--color-text-tertiary);
}

}

.toast-action:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}

.toast-close {
position: relative;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--close-size);
height: var(--close-size);
padding: 0;
border: 0;
border-radius: var(--close-radius);
background: transparent;
color: var(--color-text-tertiary);
cursor: pointer;
}

.toast-close::before {
content: "";
position: absolute;
inset: -6px;
}
@media (hover: hover){

.toast-close:hover {
background: var(--color-accent-subtle);
color: var(--color-text);
}

}

.toast-progress {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background: var(--toast-accent);
border-radius: 0 0 var(--radius-out) var(--radius-out);
animation: toastTimer 4.2s linear forwards;
transform-origin: left center;
}

.toast.is-static .toast-progress {
animation: none;
width: 62%;
}

@keyframes toastTimer {
from { width: 100%; }
to { width: 0%; }
}
@media (prefers-reduced-motion: reduce){

.toast,
.toast.is-leaving,
.toast-slot,
.toast-ico,
.toast-copy,
.toast-progress {
animation: none;
transition: none;
filter: none;
}

.toast-ico.is-spin {
animation: toastPulse 1.2s ease-in-out infinite;
}

}

@keyframes toastPulse {
50% { opacity: 0.4; }
}

.alert-stack {
display: flex;
flex-direction: column;
gap: var(--space-3);
width: 100%;
max-width: 36rem;
}

.alert-stack > .alert {
margin-bottom: 0;
}

.alert {
--radius-pad: var(--space-1);
--alert-tone: var(--color-text-tertiary);
--alert-ink: var(--color-text-secondary);
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--space-3);
width: 100%;
box-sizing: border-box;
margin: 0 0 var(--space-5);
padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
overflow-wrap: anywhere;
border: 1px solid var(--color-border);
border-radius: var(--radius-out);
background: var(--color-surface);
color: var(--color-text);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
text-align: left;
}

.alert:has(.alert-icon),
.alert:has(.alert-body) {
align-items: flex-start;
}

.alert > svg,
.alert-icon svg {
flex-shrink: 0;
width: 16px;
height: 16px;
color: var(--alert-tone);
}

.alert > svg {
margin-top: 0.15em;
}

.alert-icon {
display: grid;
flex-shrink: 0;
place-items: center;
width: 16px;
height: 20px;
color: var(--alert-tone);
}

.alert-body {
min-width: 0;
flex: 1;
overflow-wrap: anywhere;
}

.alert-title,
.alert-desc {
display: block;
}

.alert-title {
color: var(--color-text);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
line-height: 20px;
}

.alert-desc {
margin-top: 2px;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}

.alert:not(:has(.alert-icon)):not(:has(.alert-body))::before {
content: "";
flex-shrink: 0;
width: 6px;
height: 6px;
border-radius: var(--radius-full);
background: var(--alert-tone);
}

.alert-action {
display: inline-flex;
flex-shrink: 0;
align-items: center;
height: var(--control-xs);
margin-top: var(--space-2);
padding: 0 var(--space-2);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
font: inherit;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.alert-action:hover {
background: var(--color-surface-hover);
}

.alert-success {
--alert-tone: var(--color-success);
--alert-ink: var(--color-success-text);
}

.alert-error {
--alert-tone: var(--color-danger);
--alert-ink: var(--color-danger-text);
}

.alert-warning {
--alert-tone: var(--color-warning);
--alert-ink: var(--color-warning-text);
}

.alert-info {
--alert-tone: var(--color-info);
--alert-ink: var(--color-info-text);
}

.row-conflict-list {
margin: var(--space-2) 0 0;
padding: 0;
list-style: none;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}

.row-conflict-list li + li {
margin-top: var(--space-1);
}

.row-conflict-field {
color: var(--color-text);
font-weight: var(--font-weight-medium);
}

.row-conflict-saved {
color: var(--color-text);
}

.alert.is-tint {
border-color: color-mix(in srgb, var(--alert-tone) 30%, var(--color-surface));
background: color-mix(in srgb, var(--alert-tone) 7%, var(--color-surface));
}

.alert.is-tint .alert-title {
color: var(--alert-ink);
}

.alert [data-alert-dismiss] {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--control-xs);
height: var(--control-xs);
margin: -4px -4px -4px auto;
padding: 0;
border: 0;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text-tertiary);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.alert [data-alert-dismiss]:hover {
background: var(--color-bg-hover);
color: var(--color-text);
}

.alert [data-alert-dismiss] svg {
width: 14px;
height: 14px;
}

.alert.is-leaving {
overflow: hidden;
pointer-events: none;
animation: alertOut var(--dur-base) var(--ease-emphasized) both;
}

@keyframes alertOut {
from {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
to {
opacity: 0;
filter: blur(6px);
transform: translateY(-8px);
}
}
@media (hover: hover){

.alert-action:hover {
background: color-mix(in srgb, currentColor 18%, transparent);
}

.alert [data-alert-dismiss]:hover {
background: color-mix(in srgb, currentColor 12%, transparent);
}

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

.alert.is-leaving {
animation: none;
filter: none;
opacity: 0;
}

}
@media (forced-colors: active){

.alert {
border: 1px solid CanvasText;
}

}

.crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1);
min-width: 0;
margin: 0;
margin-inline: calc(var(--space-2) * -1);
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}

.crumbs > ol {
display: flex;
flex-wrap: inherit;
align-items: inherit;
gap: inherit;
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
}

.crumbs li {
display: inline-flex;
align-items: center;
min-width: 0;
gap: inherit;
}

.crumbs a,
.crumbs [aria-current="page"] {
display: inline-flex;
align-items: center;
gap: var(--space-1);
box-sizing: border-box;
min-width: 0;
max-width: 16rem;
min-height: 28px;
padding: 0 var(--space-2);
border-radius: var(--radius-sm);
color: var(--color-text-secondary);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
transition: background-color var(--transition-fast), color var(--transition-fast);
}

.crumbs a span:not([aria-hidden]),
.crumbs [aria-current="page"] {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.crumbs a:has(> svg:only-child) {
width: 28px;
min-width: 28px;
padding: 0;
justify-content: center;
}
@media (hover: hover){

.crumbs a:hover {
background: var(--color-bg-hover);
color: var(--color-text);
}

}

.crumbs a:active {
background: var(--color-bg-hover);
}

.crumbs [aria-current="page"] {
display: inline-block;
line-height: 28px;
vertical-align: middle;
color: var(--color-text);
font-weight: var(--font-weight-semibold);
}

.crumbs a[aria-current="page"]:hover {
background: transparent;
}

.crumbs a:focus-visible,
.crumbs-select:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}

.crumbs svg {
display: block;
width: 14px;
height: 14px;
flex-shrink: 0;
}

.crumbs-sep {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
color: var(--color-text-tertiary);
}

.crumbs-sep svg {
width: 12px;
height: 12px;
opacity: 0.7;
}

.crumbs-sep--text {
padding: 0 1px;
font-size: var(--font-size-sm);
line-height: 1;
opacity: 0.7;
}

.crumbs .overflow-menu {
display: inline-flex;
}

.crumbs .overflow-trigger {
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
color: var(--color-text-secondary);
border-radius: var(--radius-sm);
}

.crumbs .overflow-trigger:hover {
background: var(--color-bg-hover);
color: var(--color-text);
}

.crumbs .overflow-dropdown {
left: 0;
right: auto;
}

.crumbs-select {
box-sizing: border-box;
height: 28px;
min-height: 28px;
max-width: 11rem;
padding: 0 var(--select-chevron-pad-sm) 0 var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background-color: var(--color-surface);
background-image: var(--select-chevron-sm);
background-repeat: no-repeat;
background-position: right var(--select-chevron-inset-sm) center;
background-size: 10px 10px;
color: var(--color-text);
font: inherit;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
@media (hover: hover){

.crumbs-select:hover {
border-color: var(--color-text-tertiary);
}

}

.crumbs + .page-head {
margin-top: var(--space-3);
}

.client-view-bar {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: 40px;
padding: var(--space-2) var(--space-4);
color: var(--color-text);
background: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface));
border: 1px solid color-mix(in srgb, var(--color-warning) 34%, var(--color-surface));
border-radius: var(--radius-out);
font-size: var(--font-size-sm);
}

.client-view-bar strong {
font-weight: var(--font-weight-semibold);
}

.client-view-bar form { margin-left: auto; }

.client-view-bar.is-impersonate {
border-left-color: var(--color-danger);
}

.client-view-bar.is-maintenance {
border-left-color: var(--color-warning);
}

.locale-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
cursor: pointer;
font-family: var(--font-sans);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.04em;
}

.locale-toggle:hover { box-shadow: var(--shadow-xs); }

.catalog-bar-tools {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--space-2);
}

.otp {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
max-width: 100%;
}

.otp-label {
display: flex;
align-items: center;
margin-bottom: var(--space-2);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
}

.otp.is-error .otp-label {
color: var(--color-danger-text);
}

.otp-field {
position: relative;
display: flex;
width: max-content;
max-width: 100%;
min-width: 0;
align-items: center;
}

.otp--fluid,
.otp--fluid .otp-field,
.form-group .otp,
.form-group .otp-field {
width: 100%;
}

.otp-hidden {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
opacity: 0;
color: transparent;
caret-color: transparent;
background: transparent;
outline: none;
font-size: var(--font-size-mobile-control);
cursor: text;
}

.otp-hidden:disabled {
cursor: not-allowed;
}

.form-group .otp-hidden,
.form-group .otp-hidden:hover,
.form-group .otp-hidden:focus,
.form-group.is-error .otp-hidden,
.form-group.is-error .otp-hidden:hover,
.form-group.is-error .otp-hidden:focus {
min-height: 0;
height: 100%;
padding: 0;
border: 0;
box-shadow: none;
background: transparent;
opacity: 0;
}

.otp-slots {
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
max-width: 100%;
}

.otp--fluid .otp-slots,
.form-group .otp-slots {
width: 100%;
gap: var(--space-1);
}

.otp-sep {
flex: 0 0 var(--space-2);
width: var(--space-2);
height: 1.25rem;
pointer-events: none;
}

.otp--fluid .otp-sep,
.form-group .otp-sep {
flex-basis: var(--space-1);
width: var(--space-1);
}

.otp-slot {
position: relative;
display: grid;
place-items: center;
flex: 0 1 44px;
box-sizing: border-box;
width: 44px;
min-width: 1.5rem;
max-width: 44px;
height: 44px;
overflow: hidden;
border: 1px solid var(--color-border-control);
border-radius: var(--radius-control);
background: var(--color-surface);
color: var(--color-text);
font-family: var(--font-mono);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.otp--fluid .otp-slot,
.form-group .otp-slot {
flex: 1 1 0;
width: auto;
max-width: 3rem;
}

.otp-slot.is-filled {
border-color: var(--color-text-tertiary);
}

.otp-slot.is-active {
border-color: var(--color-accent);
box-shadow: var(--focus-field);
}
@media (hover: hover){

.otp:not(.is-disabled):not(.is-error):not(.is-success) .otp-field:hover .otp-slot:not(.is-active) {
border-color: var(--color-text-tertiary);
}

}

.otp.is-error .otp-slot {
border-color: var(--color-danger);
}

.otp.is-error .otp-slot.is-active {
box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.otp.is-success .otp-slot {
border-color: var(--color-success);
}

.otp.is-success .otp-slot.is-active {
box-shadow: 0 0 0 3px var(--color-success-bg);
}

.otp.is-disabled {
opacity: var(--opacity-disabled);
}

.otp.is-disabled .otp-slot {
background: var(--color-bg);
cursor: not-allowed;
}

.otp.is-disabled .otp-hidden {
cursor: not-allowed;
}

.otp-digit {
position: absolute;
inset: 0;
display: grid;
place-items: center;
line-height: 1;
animation: otp-digit-in var(--dur-base) var(--ease-emphasized) both;
}

.otp-digit.is-out {
animation: otp-digit-out var(--dur-base) var(--ease-emphasized) both;
}

.otp-caret {
position: absolute;
top: 50%;
left: 50%;
width: 1.5px;
height: 1.125rem;
background: var(--color-accent);
transform: translate(-50%, -50%);
pointer-events: none;
animation: otp-caret 1s linear infinite;
}

.otp-check {
display: grid;
place-items: center;
flex-shrink: 0;
width: 0;
height: 1rem;
margin-inline-start: 0;
overflow: hidden;
color: var(--color-success);
pointer-events: none;
opacity: 0;
transform: scale(0.6);
transition: opacity var(--transition-fast), transform var(--dur-enter) var(--ease-emphasized);
}

.otp.is-success .otp-check {
width: 1rem;
margin-inline-start: var(--space-2);
overflow: visible;
opacity: 1;
transform: scale(1);
}

.otp-check svg {
display: block;
width: 16px;
height: 16px;
}

.otp-check path {
fill: none;
stroke-dasharray: 24;
stroke-dashoffset: 24;
}

.otp.is-success .otp-check path {
stroke-dashoffset: 0;
transition: stroke-dashoffset var(--dur-slow) var(--dur-instant) var(--ease-emphasized);
}

.otp-msg {
margin: var(--space-1) 0 0;
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
}

.otp-msg.is-ok {
color: var(--color-success-text);
}

.otp-msg.is-err {
color: var(--color-danger-text);
}

.otp-resend {
margin: var(--space-2) 0 0;
}

.otp-resend .btn {
padding-inline: var(--space-2);
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
}

@keyframes otp-digit-in {
from { transform: translateY(10px); opacity: 0; filter: blur(4px); }
to { transform: none; opacity: 1; filter: blur(0); }
}

@keyframes otp-digit-out {
from { transform: none; opacity: 1; filter: blur(0); }
to { transform: translateY(-8px); opacity: 0; filter: blur(4px); }
}

@keyframes otp-caret {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}

@keyframes otp-shake {
0%, 100% { transform: translateX(0); }
16% { transform: translateX(-5px); }
32% { transform: translateX(5px); }
48% { transform: translateX(-3px); }
64% { transform: translateX(3px); }
80% { transform: translateX(-1px); }
}

.otp-slots.is-shake {
animation: otp-shake var(--dur-enter) var(--ease-emphasized);
}
@media (forced-colors: active){

.otp-slot {
border: 2px solid CanvasText;
background: Canvas;
}

.otp-slot.is-active {
border-color: Highlight;
box-shadow: none;
}

.otp-caret {
background: CanvasText;
}

.otp.is-error .otp-slot,
.otp.is-success .otp-slot {
border-color: Highlight;
}

}

.token-field {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
min-width: 0;
}

.token-field input {
flex: 1;
min-width: 0;
min-height: 44px;
padding: 0 var(--space-3);
border: 1px solid var(--color-border-control);
border-radius: var(--radius-control);
box-shadow: var(--shadow-control);
background: var(--color-surface);
color: var(--color-text);
font-family: var(--font-mono);
font-size: var(--font-size-sm);
}

.token-field input:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}

.token-field .btn {
height: 44px;
min-height: 44px;
}

.alert-body .token-field {
margin-top: var(--space-2);
}

.danger-zone {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3) var(--space-6);
padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
}

.card > .danger-zone {
margin-top: var(--space-6);
}

.danger-zone-copy {
flex: 1 1 18rem;
min-width: 0;
}

.danger-zone h2,
.danger-zone h3 {
margin: 0 0 var(--space-1);
color: var(--color-danger-text);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
}

.danger-zone p {
margin: 0;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}

.danger-zone form {
margin: 0;
}

.pw {
--pw-tone: var(--color-text-tertiary);
--pw-ink: var(--color-text-tertiary);
--pw-h: 6px;
min-width: 0;
width: 100%;
}

.pw > .form-group {
margin-bottom: 0;
}

form > .pw {
margin-bottom: var(--space-5);
}

.pw-meter {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
margin-top: var(--space-3);
}

.pw-meter-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
min-width: 0;
}

.pw-meter-kicker {
color: var(--color-text-tertiary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
}

.pw-meter-value {
min-width: 0;
color: var(--pw-ink);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
font-variant-numeric: tabular-nums;
text-align: right;
transition: color var(--transition-fast);
}

.pw-segs {
display: flex;
gap: var(--space-1);
width: 100%;
}

.pw-seg {
position: relative;
flex: 1 1 0;
height: var(--pw-h);
overflow: hidden;
border-radius: var(--radius-full);
background: var(--color-bg-subtle);
}

.pw-seg::after {
content: "";
position: absolute;
inset: 0;
transform: scaleX(0);
transform-origin: left center;
border-radius: inherit;
background: var(--pw-tone);
transition:
transform var(--transition-normal),
background-color var(--transition-fast);
}

.pw-seg:nth-child(1)::after { transition-delay: 0ms, 0ms; }

.pw-seg:nth-child(2)::after { transition-delay: 40ms, 0ms; }

.pw-seg:nth-child(3)::after { transition-delay: 80ms, 0ms; }

.pw-seg:nth-child(4)::after { transition-delay: 120ms, 0ms; }

.pw-seg.is-on::after {
transform: scaleX(1);
}

.pw.is-weak { --pw-tone: var(--color-danger); --pw-ink: var(--color-danger-text); }

.pw.is-fair { --pw-tone: var(--color-warning); --pw-ink: var(--color-warning-text); }

.pw.is-good { --pw-tone: var(--color-info); --pw-ink: var(--color-info-text); }

.pw.is-strong { --pw-tone: var(--color-success); --pw-ink: var(--color-success-text); }

.pw-rules {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin: var(--space-3) 0 0;
padding: 0;
list-style: none;
}

.pw-rule {
display: flex;
align-items: flex-start;
gap: var(--space-2);
min-width: 0;
color: var(--color-text-tertiary);
font-size: var(--font-size-sm);
line-height: 1.35;
transition: color var(--transition-fast);
}

.pw-rule.is-on {
color: var(--color-success-text);
}

.pw-rule-mark {
display: inline-flex;
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 1px;
color: currentColor;
}

.pw-rule-mark svg {
display: block;
width: 16px;
height: 16px;
}

.pw-rule-tick {
stroke-dasharray: 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset var(--transition-normal);
}

.pw-rule.is-on .pw-rule-tick {
stroke-dashoffset: 0;
}

.pw-match {
margin: var(--space-2) 0 0;
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}

.pw-match.is-on {
color: var(--color-success-text);
}

.pw-match.is-off {
color: var(--color-danger-text);
}

.pw.is-disabled,
.pw:has(input:disabled) {
opacity: var(--opacity-disabled);
pointer-events: none;
}
@media (prefers-reduced-motion: reduce){

.pw-seg::after,
.pw-rule-tick,
.pw-meter-value,
.pw-rule {
transition: none !important;
}

}

.swap-kicker {
margin: 0 0 8px;
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
}

.swap-demo + .swap-kicker,
.catalog-row + .swap-kicker,
.learn + .swap-kicker,
.form-stack + .swap-kicker,
.form-row + .swap-kicker,
.form-group + .swap-kicker,
.form-inline + .swap-kicker,
.form-fieldset + .swap-kicker,
.tcheck-row + .swap-kicker,
.tcheck-stack + .swap-kicker,
.task-check-list + .swap-kicker,
.task-check-stack + .swap-kicker,
.scroll-area + .swap-kicker,
.carousel + .swap-kicker,
.msg-scroller + .swap-kicker,
.collapse + .swap-kicker,
.collapse-group + .swap-kicker,
.otp + .swap-kicker,
.react-row + .swap-kicker,
.react + .swap-kicker,
.rbar + .swap-kicker,
.rbar-msg + .swap-kicker,
.agroup + .swap-kicker,
.avatar-row + .swap-kicker,
.avatar-stack + .swap-kicker,
.avatar-id + .swap-kicker,
.metric-grid + .swap-kicker,
.chart-grid-2 + .swap-kicker,
.card + .swap-kicker,
.empty-state + .swap-kicker,
.alert-stack + .swap-kicker,
.alert + .swap-kicker,
.switch-stack + .swap-kicker,
.switch-demo + .swap-kicker,
.drop-zone + .swap-kicker,
.ctx + .swap-kicker,
.ctx-menu + .swap-kicker {
margin-top: 16px;
}

.mtabs {
max-width: 28rem;
}

.mtabs[data-variant="underline"] {
max-width: none;
}

.mtabs + .mtabs,
.swap-kicker + .mtabs,
.mtabs + .swap-kicker,
.mtabs + .tabs,
.tabs + .seg,
.seg + .swap-kicker,
.tabs + .swap-kicker {
margin-top: var(--space-4);
}

.mtabs-list {
position: relative;
display: inline-flex;
align-items: center;
max-width: 100%;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}

.mtabs-list::-webkit-scrollbar { display: none; }

.mtabs-list.is-overflow-end {
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 1.25rem), transparent);
}

.mtabs-list.is-overflow-start {
mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000);
}

.mtabs-list.is-overflow-start.is-overflow-end {
mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
}

.mtabs[data-variant="pill"] .mtabs-list {
gap: 2px;
padding: 2px;
border-radius: var(--radius-full);
background: var(--color-bg-subtle);
}

.mtabs[data-variant="segment"] .mtabs-list {
--radius-pad: 2px;
display: flex;
width: 100%;
gap: 0;
padding: 2px;
border-radius: var(--radius-out);
background: var(--color-bg-subtle);
}

.mtabs[data-variant="underline"] .mtabs-list {
display: flex;
width: 100%;
gap: var(--space-1);
border-bottom: 1px solid var(--color-border);
}

.mtabs-thumb {
position: absolute;
top: 0;
left: 0;
z-index: 0;
pointer-events: none;
transform-origin: 0 0;
will-change: transform;
transition: transform var(--dur-base) var(--ease-emphasized);
}

.mtabs[data-variant="pill"] .mtabs-thumb,
.mtabs[data-variant="segment"] .mtabs-thumb {
background: var(--color-surface);
box-shadow: var(--shadow-xs), 0 0 0 1px var(--color-border);
}

.mtabs[data-variant="pill"] .mtabs-thumb { border-radius: var(--radius-full); }

.mtabs[data-variant="segment"] .mtabs-thumb { border-radius: var(--radius-md); }

html[data-theme="dark"] .mtabs[data-variant="pill"] .mtabs-thumb,
html[data-theme="dark"] .mtabs[data-variant="segment"] .mtabs-thumb,
html[data-theme="dark"] .seg-thumb {
background: var(--color-surface-float);
}

.mtabs[data-variant="underline"] .mtabs-thumb,
.tabs-thumb {
top: auto;
bottom: 0;
height: 2px;
background: var(--color-text);
}

.mtabs-tab {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
gap: 6px;
min-height: 28px;
padding: 0 12px;
border: 0;
background: transparent;
color: var(--color-text-secondary);
font: inherit;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: color var(--transition-fast);
}

.mtabs-tab svg {
display: block;
flex-shrink: 0;
width: 14px;
height: 14px;
opacity: 0.7;
transition: opacity var(--transition-fast);
}

.mtabs[data-variant="pill"] .mtabs-tab { border-radius: var(--radius-full); }

.mtabs[data-variant="segment"] .mtabs-tab {
flex: 1 1 0;
min-width: 0;
border-radius: var(--radius-md);
}

.mtabs[data-variant="underline"] .mtabs-tab {
min-height: 40px;
padding: 0 var(--space-3) 2px;
}

.mtabs-tab:hover,
.mtabs-tab[aria-selected="true"] {
color: var(--color-text);
}

.mtabs-tab:hover svg,
.mtabs-tab[aria-selected="true"] svg {
opacity: 1;
}

.mtabs-tab[aria-selected="true"] .tabs__count {
color: var(--color-text);
}

.mtabs-tab:disabled,
.mtabs-tab[aria-disabled="true"] {
opacity: var(--opacity-disabled);
cursor: not-allowed;
}

.mtabs-tab:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}

.mtabs-panel {
margin-top: var(--space-4);
color: var(--color-text-secondary);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
}

.mtabs-panel.is-in {
animation: plt-rise-in var(--dur-base) var(--ease-emphasized) both;
}

.tabs.has-thumb {
position: relative;
}

.tabs.has-thumb .tabs__item::after {
content: none;
}

.tabs.is-overflow-end {
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2rem), transparent);
}

.tabs.is-overflow-start {
mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000);
}

.tabs.is-overflow-start.is-overflow-end {
mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
}

.tabs-thumb {
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
height: 2px;
background: var(--color-text);
opacity: 0;
pointer-events: none;
transform-origin: 0 0;
will-change: transform;
transition: transform var(--dur-base) var(--ease-emphasized), opacity var(--dur-fast) linear;
}

.tabs-thumb.is-set {
opacity: 1;
}

.tabs--page {
margin-bottom: var(--space-4);
}

.tabs--page .tabs-thumb {
view-transition-name: tabs-thumb;
}

.seg.has-thumb {
position: relative;
}

.seg.has-thumb .on,
.seg.has-thumb a.on {
background: transparent;
box-shadow: none;
}

.seg-thumb {
position: absolute;
top: 0;
left: 0;
z-index: 0;
background: var(--color-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xs), 0 0 0 1px var(--color-border);
pointer-events: none;
transform-origin: 0 0;
will-change: transform;
transition: transform var(--dur-base) var(--ease-out);
}

.seg.has-thumb a,
.seg.has-thumb button {
position: relative;
z-index: 1;
}

.seg.has-thumb a:focus-visible,
.seg.has-thumb button:focus-visible {
box-shadow: var(--focus-ring);
}
@media (prefers-reduced-motion: reduce){

.finetune-shimmer,
.finetune-status-done,
.finetune-menu,
.glide-menu-hl,
.insight-alloc-seg,
.insight-metric-btn,
.insights-nav-btn,
.flowchart-menu,
.flowchart-card,
.cmdsearch-clear,
.cmdsearch-item,
.cmdsearch-empty,
.filter-table-row,
.records-pop,
.records-picker,
.records-more-panel,
.records-pulse,
.records-switch-knob,
.records-go,
.approval-card,
.approval-sent,
.approval-viewport,
.approval-track,
.approval-q,
.approval-roll-stack,
.approval-progress-fill,
.approval-opts-hl,
.approval-opt,
.approval-dismiss,
.approval-step-btn,
.stepper-btn,
.stepper-ico,
.stepper-digit > span,
.mtabs-thumb,
.mtabs-panel,
.tabs-thumb,
.seg-thumb,
.toggle-slider,
.toggle-thumb,
.tip,
.acc-body,
.acc-chevron,
.acc-ico,
.drawer,
.drawer-overlay,
.otp-digit,
.otp-caret,
.otp-check,
.otp-check path,
.otp-slots,
.splay-step,
.splay-ico,
.splay-btn,
.react-bar-wrap,
.react-item,
.react-btn,
.react-face,
.react-burst,
.react-tail,
.rbar-chip,
.rbar-add,
.rbar-add svg,
.rbar-emoji,
.rbar-opt,
.rbar-pick,
.rbar-count-val,
.nbell-badge,
.nbell-face,
.nbell-svg,
.nbell-clapper,
.nbell-strip {
animation: none;
transition: none;
}

.tip {
filter: none;
}

}

.acc-frame {
width: 100%;
max-width: 24rem;
}

.acc-row {
will-change: margin-top;
}

.acc {
--acc-gap: var(--space-3);
--acc-ico: 1.75rem;
position: relative;
width: 100%;
}

.acc-row + .acc-row {
margin-top: -1px;
}

.acc-card {
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--radius);
}

.acc-card.is-disabled {
opacity: var(--opacity-disabled);
}

.acc-trigger {
display: flex;
align-items: center;
gap: var(--space-3);
box-sizing: border-box;
width: 100%;
min-height: var(--touch-target-min);
padding: var(--space-3) var(--space-4);
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: start;
cursor: pointer;
outline: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition: background-color var(--transition-fast);
}
@media (hover: hover) and (pointer: fine){

.acc-trigger:hover:not(:disabled) {
background: var(--color-bg-hover);
}

.acc-trigger:hover:not(:disabled) .acc-chevron {
color: var(--color-text);
}

}

.acc-trigger:active:not(:disabled) {
background: var(--color-surface-hover);
}

.acc-trigger:focus-visible {
box-shadow: inset 0 0 0 2px var(--color-accent);
}

.acc-trigger:disabled {
cursor: not-allowed;
pointer-events: none;
}

.acc-ico {
display: grid;
flex-shrink: 0;
place-items: center;
width: var(--acc-ico);
height: var(--acc-ico);
border-radius: var(--radius-sm);
background: var(--color-bg-subtle);
color: var(--color-text-tertiary);
transition:
color var(--transition-fast),
background-color var(--transition-fast);
}

.acc-ico svg {
display: block;
width: 16px;
height: 16px;
}

.acc-card.is-open .acc-ico {
color: var(--color-text);
background: var(--color-bg-subtle);
}

.acc-lead {
display: flex;
flex: 1;
flex-direction: column;
gap: 1px;
min-width: 0;
}

.acc-title {
flex: 1;
min-width: 0;
overflow: hidden;
color: var(--color-text);
font-size: var(--font-size-md);
font-weight: var(--font-weight-medium);
line-height: 1.3;
letter-spacing: var(--letter-spacing-tight);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}

.acc-lead .acc-title {
flex: none;
}

.acc-meta {
color: var(--color-text-tertiary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-normal);
line-height: 1.3;
}

.acc-chevron {
display: grid;
flex-shrink: 0;
place-items: center;
width: 24px;
height: 24px;
color: var(--color-text-tertiary);
will-change: transform;
}

.acc-chevron svg {
display: block;
}

.acc-card.is-open .acc-chevron {
color: var(--color-text-secondary);
}

.acc-panel {
overflow: hidden;
height: 0;
}

.acc-body {
padding: 0 var(--space-4) var(--space-4);
opacity: 0;
transition: opacity var(--transition-fast);
}

.acc-row:has(.acc-ico) .acc-body {
padding-left: calc(var(--space-4) + var(--acc-ico) + var(--space-3));
}

.acc-card.is-open .acc-body {
opacity: 1;
}

.acc-body > :first-child { margin-top: 0; }

.acc-body > :last-child { margin-bottom: 0; }

.acc-desc {
margin: 0;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}

:root {
--digit-dur: 500ms;
--digit-distance: 8px;
--digit-stagger: 70ms;
--digit-blur: 2px;
--digit-ease: var(--ease-overshoot);
--digit-dir-x: 0;
--digit-dir-y: 1;
--icon-swap-dur: 250ms;
--icon-swap-blur: 2px;
--icon-swap-start-scale: 0.25;
--icon-swap-ease: ease-in-out;
--check-opacity-dur: 500ms;
--check-rotate-dur: 500ms;
--check-rotate-from: 36deg;
--check-bob-dur: 500ms;
--check-y-amount: 12px;
--check-blur-dur: 500ms;
--check-blur-from: 6px;
--check-path-dur: 420ms;
--check-path-delay: 90ms;
--check-scale-from: 0.86;
--check-scale-dur: 500ms;
--check-ease-out: var(--ease-out);
--check-ease-opacity: var(--ease-out);
--check-ease-rotate: var(--ease-out);
--check-ease-bob: var(--ease-overshoot);
--check-ease-path: var(--ease-out);
--avatar-lift: -4px;
--avatar-dur: 320ms;
--avatar-scale: 1.05;
--avatar-falloff: 0.45;
--avatar-ease-in: var(--ease-out);
--avatar-ease-out: var(--ease-pop);
--shake-distance: 6px;
--shake-overshoot: 4px;
--shake-dur-a: 80ms;
--shake-dur-b: 60ms;
--shake-ease: var(--ease-out);
--revert-hold: 3000ms;
--revert-dur: 280ms;
--shimmer-dur: 800ms;
--shimmer-base: var(--color-text-tertiary);
--shimmer-highlight: var(--color-text);
--shimmer-band: 400%;
--shimmer-ease: linear;
--oshimmer-dur: 800ms;
--oshimmer-ease: linear;
--oshimmer-ring: 1px;
--oshimmer-fade: var(--transition-normal);
--like-color: #f40051;
--like-fill: 150ms;
--like-pop: 350ms;
--like-pop-ease: var(--ease-pop);
--like-particle-dur: 600ms;
--like-particle-dist: 20px;
--like-particle-size: 2.5px;
--like-flash-dur: 420ms;
--like-count-dur: 280ms;
--like-ease: var(--ease-out);
--learn-shift: 2px;
--learn-spread: 12deg;
--learn-in: 200ms;
--learn-out: 240ms;
--learn-ease: var(--ease-out);
--bounce-dur: 250ms;
--bounce-size: 6px;
--bounce-inset: 12px;
--bounce-arc: 10px;
--bounce-stretch: 0.48;
--bounce-land: 0.36;
--bounce-dot: var(--color-accent);
--bounce-rail: var(--color-border);
--select-gap: 0.5rem;
--select-open: 420ms;
--select-gap-dur: 600ms;
--select-ease: var(--ease-emphasized);
--check-box: 150ms;
--check-draw: 350ms;
--check-delay: 40ms;
--check-uncheck: 150ms;
--check-ease: var(--ease-out);
--task-check-pop: 400ms;
--task-check-strike: 250ms;
--task-check-unstrike: 150ms;
--task-check-burst: 500ms;
--task-check-dot: 4px;
--reel-dur: 1400ms;
--reel-cell: 1em;
--reel-spin-blur: 3px;
--reel-stagger: 90ms;
--reel-spins: 2;
--reel-ease: var(--ease-emphasized);
--think-hold: 2000ms;
--think-swap: 180ms;
--think-gap: 40ms;
--think-distance: 6px;
--think-blur: 2px;
--think-shimmer: 2000ms;
--think-mark: 1800ms;
--think-base: #7c7c7c;
--think-highlight: #0d0d0d;
--think-ease: ease-in-out;
--stream-gap: 60ms;
--stream-cps: 110;
--stream-fade: 280ms;
--stream-blur: 1px;
--stream-ease: var(--ease-emphasized);
--stream-caret: 900ms;
--stream-chrome: 220ms;
--stream-hold: 450ms;
--pulse-dur: 1000ms;
--pulse-count: 1;
--pulse-min: 0.5;
--reveal-dur: 400ms;
--reveal-blur: 2px;
--reveal-ease: ease-in-out;
}

@keyframes t-digit-pop-in {
0% {
transform: translate(
calc(var(--digit-distance) * var(--digit-dir-x)),
calc(var(--digit-distance) * var(--digit-dir-y))
);
opacity: 0;
filter: blur(var(--digit-blur));
}
100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}

.t-digit-group {
display: inline-flex;
align-items: baseline;
overflow: hidden;
padding-block: var(--digit-distance);
padding-inline: var(--digit-blur);
margin-block: calc(var(--digit-distance) * -1);
margin-inline: calc(var(--digit-blur) * -1);
font-variant-numeric: tabular-nums lining-nums;
}

.t-digit {
display: inline-block;
}

.t-digit-group.is-animating .t-digit {
animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
will-change: transform, opacity, filter;
}

.t-digit-group.is-animating .t-digit[data-stagger="1"] {
animation-delay: var(--digit-stagger);
}

.t-digit-group.is-animating .t-digit[data-stagger="2"] {
animation-delay: calc(var(--digit-stagger) * 2);
}
@media (prefers-reduced-motion: reduce){

.t-digit-group .t-digit { animation: none !important; }

}

.popnum {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--space-4);
}

.popnum .metric {
flex: 1 1 12rem;
max-width: 16rem;
}

.metric-val:has(.popnum-figure) {
display: flex;
align-items: baseline;
}

.popnum-figure {
display: inline-flex;
align-items: baseline;
gap: 0.08em;
}

.popnum-val {
color: var(--color-text);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-semibold);
font-variant-numeric: tabular-nums lining-nums;
letter-spacing: var(--letter-spacing-tight);
line-height: var(--line-height-tight);
}

.popnum-unit {
font-size: 0.5em;
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
letter-spacing: 0;
line-height: 1;
}

.t-icon-swap {
position: relative;
display: inline-grid;
}

.t-icon-swap .t-icon {
grid-area: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
transition:
opacity   var(--icon-swap-dur) var(--icon-swap-ease),
filter    var(--icon-swap-dur) var(--icon-swap-ease),
transform var(--icon-swap-dur) var(--icon-swap-ease);
}

.t-icon-swap .t-icon svg {
display: block;
}

.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
opacity: 1;
filter: blur(0);
transform: scale(1);
}

.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
opacity: 0;
filter: blur(var(--icon-swap-blur));
transform: scale(var(--icon-swap-start-scale));
}

html[data-theme="dark"] [data-theme-toggle] .t-icon-swap[data-state="a"] .t-icon[data-icon="a"] {
opacity: 0;
filter: blur(var(--icon-swap-blur));
transform: scale(var(--icon-swap-start-scale));
}

html[data-theme="dark"] [data-theme-toggle] .t-icon-swap[data-state="a"] .t-icon[data-icon="b"] {
opacity: 1;
filter: blur(0);
transform: scale(1);
}

html.theme-changing .t-icon-swap .t-icon {
transition:
opacity   var(--icon-swap-dur, var(--dur-base)) var(--icon-swap-ease, ease-in-out),
filter    var(--icon-swap-dur, var(--dur-base)) var(--icon-swap-ease, ease-in-out),
transform var(--icon-swap-dur, var(--dur-base)) var(--icon-swap-ease, ease-in-out) !important;
}
@media (prefers-reduced-motion: reduce){

html.theme-changing .t-icon-swap .t-icon,
.t-icon-swap .t-icon { transition: none !important; }

}

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

.iswap-row + .theme-pick,
.iswap-row + .swap-kicker,
.theme-pick + .swap-kicker {
margin-top: 16px;
}

.iswap {
display: grid;
place-items: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-control);
background: var(--color-surface);
box-shadow: var(--shadow-control);
color: var(--color-text);
cursor: pointer;
user-select: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition:
background-color var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast),
transform var(--transition-fast);
}
@media (hover: hover){

.iswap:hover:not(:disabled):not([aria-disabled="true"]) {
background: var(--color-surface-hover);
box-shadow: none;
}

}

.iswap:active:not(:disabled):not([aria-disabled="true"]) {
transform: scale(0.96);
}

.iswap:disabled,
.iswap[aria-disabled="true"] {
opacity: var(--opacity-disabled);
cursor: not-allowed;
pointer-events: none;
}

.iswap:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}

.iswap .t-icon svg {
display: block;
width: 16px;
height: 16px;
}

.t-success-check,
.t-error-mark {
display: inline-grid;
place-items: center;
overflow: visible;
transform-origin: center;
opacity: 0;
will-change: transform, opacity, filter, scale;
}

.t-success-check svg,
.t-error-mark svg { display: block; overflow: visible; }

.t-success-check svg path,
.t-error-mark svg path {
stroke-dasharray: 20;
stroke-dashoffset: 20;
}

.t-success-check[data-state="in"],
.t-error-mark[data-state="in"] {
animation:
plt-fade-in   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards,
t-check-scale  var(--check-scale-dur)   var(--check-ease-out)     forwards;
}

.t-success-check[data-state="in"] svg path,
.t-error-mark[data-state="in"] svg path {
animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
}

@keyframes t-check-rotate {
from { transform: rotate(var(--check-rotate-from)); }
to   { transform: rotate(0deg); }
}

@keyframes t-check-blur {
from { filter: blur(var(--check-blur-from)); }
to   { filter: blur(0); }
}

@keyframes t-check-bob {
from { translate: 0 var(--check-y-amount); }
to   { translate: 0 0; }
}

@keyframes t-check-scale {
from { scale: var(--check-scale-from); }
to   { scale: 1; }
}

@keyframes t-check-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce){

.t-success-check,
.t-error-mark { animation: none !important; opacity: 1; }

.t-success-check svg path,
.t-error-mark svg path { animation: none !important; stroke-dashoffset: 0 !important; }

}

.t-success-check[data-size] {
flex-shrink: 0;
color: var(--color-success);
}

.t-success-check[data-size] svg {
width: 100%;
height: 100%;
}

.t-success-check[data-size="sm"] {
width: 1.25rem;
height: 1.25rem;
--check-y-amount: 6px;
--check-blur-from: 2px;
--check-rotate-from: 16deg;
--check-scale-from: 0.88;
--check-path-delay: 40ms;
}

.t-success-check[data-size="md"] {
width: 2rem;
height: 2rem;
--check-y-amount: 10px;
--check-blur-from: 4px;
--check-rotate-from: 24deg;
--check-scale-from: 0.84;
--check-path-delay: 70ms;
}

.t-success-check[data-size="lg"] {
width: 3.5rem;
height: 3.5rem;
--check-y-amount: 16px;
--check-blur-from: 6px;
--check-rotate-from: 32deg;
--check-scale-from: 0.78;
--check-path-delay: 110ms;
}

.t-success-check[data-tone="fill"] {
border-radius: var(--radius-full);
background: var(--color-success);
color: var(--color-on-fill);
box-shadow: var(--shadow-xs);
--check-path-delay: 140ms;
}

.t-success-check[data-tone="fill"] svg {
width: 56%;
height: 56%;
translate: 0 0.5px;
}

.t-success-check[data-tone="fill"][data-size="sm"] {
--check-path-delay: 60ms;
}

.t-success-check[data-tone="fill"][data-size="sm"] svg {
width: 68%;
height: 68%;
}

.t-success-check[data-tone="fill"][data-size="md"] { --check-path-delay: 90ms; }

.t-success-check[data-tone="fill"][data-size="md"] svg {
width: 58%;
height: 58%;
}
@media (forced-colors: active){

.t-success-check[data-tone="fill"] {
background: Canvas;
color: Highlight;
box-shadow: none;
outline: 1px solid Highlight;
outline-offset: -1.5px;
}

}

.scheck {
display: flex;
flex-direction: column;
align-items: stretch;
overflow: visible;
}

.scheck > .swap-kicker {
margin: var(--space-5) 0 var(--space-2);
}

.scheck-hero,
.scheck-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
padding-top: var(--space-2);
overflow: visible;
}

.scheck-copy {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1 1 10rem;
}

.scheck-copy strong {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-tight);
color: var(--color-text);
}

.scheck-copy p {
margin: 0;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}

.scheck-hero .btn {
flex-shrink: 0;
margin-inline-start: auto;
}

.scheck .form-stack {
max-width: 24rem;
}

.scheck .form-group {
margin-bottom: 0;
}

.avatar,
.agroup .t-avatar {
--avatar-size: 32px;
--avatar-font: var(--font-size-xs);
--avatar-radius: var(--radius-full);
--avatar-ring: var(--color-bg);
position: relative;
display: inline-grid;
place-items: center;
width: var(--avatar-size);
height: var(--avatar-size);
padding: 0;
overflow: visible;
border: 0;
border-radius: var(--avatar-radius);
background: var(--color-bg-subtle);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--avatar-font);
font-weight: var(--font-weight-medium);
letter-spacing: 0;
line-height: 1;
flex-shrink: 0;
isolation: isolate;
vertical-align: middle;
}

button.avatar,
.agroup .t-avatar {
appearance: none;
cursor: pointer;
}

.avatar[data-size="xs"] { --avatar-size: 20px; --avatar-font: var(--font-size-2xs); letter-spacing: 0; }

.avatar[data-size="sm"] { --avatar-size: 24px; --avatar-font: var(--font-size-2xs); }

.avatar[data-size="md"] { --avatar-size: 32px; --avatar-font: var(--font-size-xs); }

.avatar[data-size="lg"] { --avatar-size: 40px; --avatar-font: var(--font-size-sm); }

.avatar[data-size="xl"] { --avatar-size: 48px; --avatar-font: var(--font-size-base); }

.avatar[data-shape="sq"] { --avatar-radius: var(--radius); }

.avatar--glyph {
background: var(--avatar-fill, var(--color-text-tertiary));
color: var(--color-on-fill);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 12%, transparent);
}

.avatar--glyph > svg {
width: 50%;
height: 50%;
}

.avatar--glyph.is-off {
background: var(--color-bg-subtle);
color: var(--color-text-tertiary);
}

.avatar[data-tone="0"],
.agroup .t-avatar[data-tone="0"] {
background: color-mix(in srgb, var(--viz-1) 16%, var(--color-surface));
color: var(--color-text);
}

.avatar[data-tone="1"],
.agroup .t-avatar[data-tone="1"] {
background: color-mix(in srgb, var(--viz-3) 16%, var(--color-surface));
color: var(--color-text);
}

.avatar[data-tone="2"],
.agroup .t-avatar[data-tone="2"] {
background: color-mix(in srgb, var(--viz-2) 16%, var(--color-surface));
color: var(--color-text);
}

.avatar[data-tone="3"],
.agroup .t-avatar[data-tone="3"] {
background: color-mix(in srgb, var(--viz-7) 16%, var(--color-surface));
color: var(--color-text);
}

.avatar[data-tone="4"],
.agroup .t-avatar[data-tone="4"] {
background: color-mix(in srgb, var(--viz-5) 16%, var(--color-surface));
color: var(--color-text);
}

.avatar[data-tone="more"],
.agroup .t-avatar[data-tone="more"] {
background: var(--color-bg-subtle);
color: var(--color-text);
}

.avatar-fallback {
display: grid;
place-items: center;
grid-area: 1 / 1;
width: 100%;
height: 100%;
border-radius: inherit;
}

.avatar-fallback svg {
width: 55%;
height: 55%;
stroke-width: 1.75;
}

.avatar img {
grid-area: 1 / 1;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: inherit;
z-index: 1;
}

.avatar.is-fallback img,
.avatar img[hidden] {
display: none;
}

.avatar[data-presence]::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
width: 25%;
min-width: 6px;
max-width: 10px;
aspect-ratio: 1;
border-radius: var(--radius-full);
box-shadow: 0 0 0 2px var(--avatar-ring);
background: var(--color-text-tertiary);
pointer-events: none;
}

.avatar[data-presence="online"]::after { background: var(--color-success); }

.avatar[data-presence="away"]::after { background: var(--color-warning); }

.avatar[data-presence="busy"]::after { background: var(--color-danger); }

.avatar[data-presence="offline"]::after {
background: var(--color-bg);
box-shadow:
0 0 0 1.5px var(--color-text-tertiary),
0 0 0 3px var(--avatar-ring);
}

.avatar:disabled,
.avatar[aria-disabled="true"],
.agroup .t-avatar:disabled {
opacity: var(--opacity-disabled);
cursor: default;
pointer-events: none;
}

button.avatar:focus-visible,
.agroup .t-avatar:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}

.t-avatar {
transform-origin: center;
transform:
translateY(var(--shift, 0px))
scale(var(--scale-active, 1));
transition: transform var(--avatar-dur) var(--avatar-ease-in);
}
@media (prefers-reduced-motion: reduce){

.t-avatar { transition: none !important; transform: none !important; }

}

.agroup {
display: flex;
align-items: center;
padding: 8px 2px 4px;
}

.agroup .t-avatar-group {
display: flex;
align-items: center;
}

.agroup .t-avatar {
--avatar-size: 40px;
--avatar-font: var(--font-size-sm);
z-index: 0;
margin-left: calc(var(--avatar-size) * -0.25);
box-shadow: 0 0 0 2px var(--avatar-ring);
}

.agroup .t-avatar:first-child {
margin-left: 0;
}

.agroup .t-avatar:hover,
.agroup .t-avatar:focus-visible {
z-index: 2;
}

.agroup .t-avatar:focus-visible {
z-index: 3;
box-shadow:
0 0 0 2px var(--avatar-ring),
0 0 0 4px var(--color-accent);
}
@media (forced-colors: active){

.avatar,
.agroup .t-avatar {
border: 1px solid CanvasText;
box-shadow: none;
}

button.avatar:focus-visible,
.agroup .t-avatar:focus-visible {
outline: 2px solid Highlight;
outline-offset: 2px;
box-shadow: none;
}

}

.t-input {
transition: border-color var(--dur-fast) ease-out;
}

.t-input.is-error {
transition: border-color var(--revert-dur, var(--dur-slow)) ease-out;
}

.t-error-msg,
.eshake .form-group .form-error {
opacity: 0;
visibility: hidden;
transition:
opacity var(--revert-dur, var(--dur-slow)) ease-out,
visibility 0s linear var(--revert-dur, var(--dur-slow));
}

.t-input-wrap.is-error .t-error-msg,
.eshake .form-group.is-error .form-error {
opacity: 1;
visibility: visible;
transition:
opacity var(--revert-dur, var(--dur-slow)) ease-out,
visibility 0s linear 0s;
}

.is-shaking {
animation: t-input-shake calc(
var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2
) linear;
will-change: transform;
}

@keyframes t-input-shake {
0%      { transform: translateX(0);                                 animation-timing-function: var(--shake-ease); }
28.57%  { transform: translateX(var(--shake-distance));             animation-timing-function: var(--shake-ease); }
57.14%  { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
78.57%  { transform: translateX(var(--shake-overshoot));            animation-timing-function: var(--shake-ease); }
100%    { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce){

.is-shaking { animation: none !important; transform: none !important; }

}

.eshake-demo {
display: flex;
flex-direction: column;
gap: var(--space-5);
max-width: 24rem;
}

.eshake-demo > .swap-kicker {
margin: 0;
}

.eshake {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-3);
max-width: 24rem;
padding-inline: var(--shake-distance);
}

.eshake .form-group,
.eshake .t-input-wrap {
width: 100%;
margin-bottom: 0;
}

.eshake .form-inline .field,
.eshake .form-inline > input {
flex: 1 1 auto;
min-width: 0;
}

.t-shimmer {
position: relative;
display: inline-block;
color: var(--shimmer-base);
}

.t-shimmer::before {
content: attr(data-text);
position: absolute;
inset: 0;
pointer-events: none;
background-image: linear-gradient(
90deg,
transparent          0%,
transparent         40%,
var(--shimmer-highlight) 50%,
transparent         60%,
transparent        100%
);
background-size: var(--shimmer-band) 100%;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
}
@media (prefers-reduced-motion: reduce){

.t-shimmer::before { animation: none !important; }

}

.shimmer .t-shimmer,
.oshimmer .t-shimmer {
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
}

.oshimmer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
width: 100%;
max-width: 360px;
}

.oshimmer .form-group {
width: 100%;
margin-bottom: 0;
}

.oshimmer .form-inline {
width: 100%;
flex-wrap: wrap;
}

.oshimmer .form-inline .oshimmer-field {
flex: 1;
min-width: 0;
}

.oshimmer-field {
position: relative;
}

.oshimmer-clip {
position: absolute;
inset: 0;
padding: var(--oshimmer-ring);
overflow: hidden;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity var(--oshimmer-fade);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
}

.oshimmer.is-on .oshimmer-clip {
opacity: 1;
}

.oshimmer-curtain {
position: absolute;
top: 50%;
left: 50%;
width: 220%;
height: 220%;
translate: -50% -50%;
pointer-events: none;
background: conic-gradient(
from 0deg,
transparent 0 74%,
color-mix(in srgb, var(--color-text-tertiary) 40%, transparent) 80%,
var(--color-text-tertiary) 83%,
color-mix(in srgb, var(--color-text-tertiary) 40%, transparent) 86%,
transparent 90% 100%
);
animation: oshimmer-spin var(--oshimmer-dur) var(--oshimmer-ease) infinite;
animation-play-state: paused;
}

.oshimmer.is-on .oshimmer-curtain {
animation-play-state: running;
will-change: transform;
}

.oshimmer.is-on.is-offscreen .oshimmer-curtain {
animation-play-state: paused;
will-change: auto;
}

.oshimmer-band,
.oshimmer-glow {
display: none;
}

@keyframes oshimmer-spin {
to { transform: rotate(1turn); }
}

html[data-theme="dark"] .oshimmer-curtain {
background: conic-gradient(
from 0deg,
transparent 0 74%,
color-mix(in srgb, var(--color-text) 45%, transparent) 80%,
var(--color-text) 83%,
color-mix(in srgb, var(--color-text) 45%, transparent) 86%,
transparent 90% 100%
);
}

.oshimmer-status {
margin: 0;
min-height: 1.25em;
}

.oshimmer:not(.is-on) .t-shimmer::before {
animation: none;
opacity: 0;
}

.oshimmer.is-on.is-offscreen .t-shimmer::before {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce){

.oshimmer-curtain { display: none !important; }

}

.t-like {
position: relative;
overflow: visible;
}

.t-like-icon {
position: relative;
display: grid;
place-items: center;
width: 16px;
height: 16px;
overflow: visible;
flex-shrink: 0;
}

.t-like-heart {
display: block;
width: 16px;
height: 16px;
overflow: visible;
color: currentColor;
transition: color var(--like-fill) var(--like-ease);
}

.btn.t-like svg.t-like-heart {
width: 16px;
height: 16px;
}

.t-like-heart path {
fill: transparent;
stroke: currentColor;
transition: fill var(--like-fill) var(--like-ease), stroke var(--like-fill) var(--like-ease);
}

.t-like[data-liked="true"] .t-like-heart { color: var(--like-color); }

.t-like[data-liked="true"] .t-like-heart path { fill: currentColor; }

.t-like.is-popping .t-like-icon { animation: t-like-pop var(--like-pop) var(--like-pop-ease); }

.t-like-flash {
position: absolute;
left: 50%;
top: 50%;
width: 10px;
height: 10px;
margin: -5px 0 0 -5px;
border-radius: 50%;
background: color-mix(in srgb, var(--like-color) 40%, transparent);
opacity: 0;
pointer-events: none;
transform: scale(0.4);
}

.t-like.is-bursting .t-like-flash {
animation: t-like-flash var(--like-flash-dur) var(--like-ease) forwards;
}

@keyframes t-like-flash {
0% { opacity: 0.65; transform: scale(0.35); }
100% { opacity: 0; transform: scale(2.35); }
}

.t-like-particles { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; color: var(--like-color); }

.t-like-particles i {
position: absolute;
left: calc(var(--like-particle-size) * var(--psize, 1) / -2);
top: calc(var(--like-particle-size) * var(--psize, 1) / -2);
width: calc(var(--like-particle-size) * var(--psize, 1));
height: calc(var(--like-particle-size) * var(--psize, 1));
border-radius: 50%;
background: currentColor;
opacity: 0;
}

.t-like-particles i:nth-child(even) { border-radius: calc(1px * var(--radius-factor)); }

.t-like.is-bursting .t-like-particles i {
animation: t-like-burst var(--pdur, var(--like-particle-dur)) ease-out var(--pdelay, 0ms) forwards;
}

.t-like-count {
display: inline-block;
min-width: 1.25ch;
font-variant-numeric: tabular-nums;
font-weight: var(--font-weight-semibold);
transform-origin: center;
}

.t-like-count.is-ticking {
animation: t-like-count-pop var(--like-count-dur) var(--like-pop-ease);
}

@keyframes t-like-count-pop {
0% { transform: scale(1); }
40% { transform: scale(1.16); }
100% { transform: scale(1); }
}

.btn.t-like[aria-pressed="true"]:not(.btn-primary):not(.btn-danger) {
background: color-mix(in srgb, var(--like-color) 10%, var(--btn-bg));
color: var(--color-text);
border-color: var(--btn-border);
}
@media (hover: hover){

.btn.t-like[aria-pressed="true"]:not(.btn-primary):not(.btn-danger):hover:not(:disabled):not([disabled]):not(.is-disabled):not([aria-disabled="true"]) {
background: color-mix(in srgb, var(--like-color) 16%, var(--btn-bg-hover));
color: var(--color-text);
border-color: var(--btn-border-hover);
}

}

html[data-theme="dark"] { --like-color: #ff2d6a; }
@media (prefers-reduced-motion: reduce){

.t-like-icon, .t-like-particles i, .t-like-flash, .t-like-count { animation: none !important; }

}

.like { overflow: visible; }

.t-learn-chevron {
display: inline-flex;
flex-shrink: 0;
overflow: visible;
transform: translateX(0);
transition: transform var(--learn-out) var(--learn-ease);
}

.t-learn-chevron svg {
display: block;
overflow: visible;
}

.t-learn-arm,
.t-learn-shaft {
transform-box: view-box;
vector-effect: non-scaling-stroke;
transition:
transform var(--learn-out) var(--learn-ease),
stroke-dashoffset var(--learn-out) var(--learn-ease);
}

.t-learn-arm {
transform-origin: 15px 12px;
}

.t-learn-shaft {
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
@media (hover: hover){

.t-learn:hover:not(:disabled):not([disabled]):not(.is-disabled):not(.is-loading):not([aria-disabled="true"]) .t-learn-chevron {
transform: translateX(var(--learn-shift));
transition-duration: var(--learn-in);
}

.t-learn:hover:not(:disabled):not([disabled]):not(.is-disabled):not(.is-loading):not([aria-disabled="true"]) .t-learn-arm,
.t-learn:hover:not(:disabled):not([disabled]):not(.is-disabled):not(.is-loading):not([aria-disabled="true"]) .t-learn-shaft {
transition-duration: var(--learn-in);
}

.t-learn:hover:not(:disabled):not([disabled]):not(.is-disabled):not(.is-loading):not([aria-disabled="true"]) .t-learn-arm-top {
transform: rotate(var(--learn-spread));
}

.t-learn:hover:not(:disabled):not([disabled]):not(.is-disabled):not(.is-loading):not([aria-disabled="true"]) .t-learn-arm-bot {
transform: rotate(calc(var(--learn-spread) * -1));
}

.t-learn:hover:not(:disabled):not([disabled]):not(.is-disabled):not(.is-loading):not([aria-disabled="true"]) .t-learn-shaft {
stroke-dashoffset: 0;
}

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

.t-learn-chevron,
.t-learn-arm,
.t-learn-shaft {
transition: none !important;
}

}

.learn {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
}

.bounce {
position: relative;
min-width: 11rem;
max-width: 16rem;
padding: var(--space-1) 0;
}

.bounce-rail {
position: absolute;
left: calc(var(--bounce-inset) + var(--bounce-size) / 2);
top: var(--space-2);
bottom: var(--space-2);
width: 1px;
margin-left: -0.5px;
background: var(--bounce-rail);
pointer-events: none;
}

.bounce-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
padding: 0 var(--space-1) 0 calc(var(--bounce-inset) + var(--bounce-size) + var(--space-2));
}

.bounce-head {
padding: var(--space-2) var(--space-2) var(--space-1);
color: var(--color-text-tertiary);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-medium);
letter-spacing: 0;
line-height: var(--line-height-tight);
text-transform: none;
}

.bounce-head:not(:first-child) {
padding-top: var(--space-4);
}

.bounce-item {
display: block;
width: 100%;
min-height: 1.75rem;
padding: var(--space-1) var(--space-2);
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-tertiary);
font: inherit;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-tight);
text-align: left;
cursor: pointer;
transition: color var(--transition-fast), background-color var(--transition-fast);
}

.bounce-item--sub {
padding-left: var(--space-4);
}

.bounce-item[data-active="true"] {
color: var(--color-text);
font-weight: var(--font-weight-medium);
}
@media (hover: hover){

.bounce-item:hover {
background: var(--color-bg-hover);
color: var(--color-text);
}

}

.bounce-item:active {
background: var(--color-bg-hover);
}

.bounce-item:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}

.bounce-item:disabled,
.bounce-item[aria-disabled="true"] {
opacity: var(--opacity-disabled);
cursor: not-allowed;
background: transparent;
color: var(--color-text-tertiary);
}
@media (pointer: coarse), (max-width: 40rem){

.bounce-item { min-height: var(--touch-target-min); }

}

.bounce-dot {
position: absolute;
left: var(--bounce-inset);
top: 0;
width: var(--bounce-size);
height: var(--bounce-size);
border-radius: var(--radius-full);
background: var(--bounce-dot);
box-shadow: 0 0 0 2px var(--color-surface);
opacity: 0;
pointer-events: none;
transform-origin: 50% 50%;
will-change: transform;
}

.bounce.is-ready .bounce-dot {
opacity: 1;
}
@media (prefers-reduced-motion: reduce){

.bounce-item { transition: none !important; }

.bounce-dot { will-change: auto; }

}

.t-check {
display: inline-grid;
place-items: center;
flex-shrink: 0;
width: 16px;
height: 16px;
padding: 0;
border: 1px solid var(--color-border-control);
border-radius: var(--radius-xs);
background: var(--color-surface);
box-shadow: var(--shadow-control);
color: var(--color-on-accent);
cursor: pointer;
transform-origin: center;
-webkit-tap-highlight-color: transparent;
transition:
background var(--check-box) var(--check-ease),
border-color var(--check-box) var(--check-ease),
transform var(--dur-base) var(--check-ease);
}

.t-check svg {
display: block;
width: 12px;
height: 12px;
overflow: visible;
opacity: 0;
transform: scale(0.5);
transition:
opacity var(--dur-fast) var(--ease-emphasized),
transform var(--dur-fast) var(--ease-emphasized);
}

.t-check svg path {
fill: none;
stroke: currentColor;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: var(--check-len, 15);
stroke-dashoffset: var(--check-len, 15);
transition: stroke-dashoffset var(--check-uncheck) var(--check-ease);
}

.t-check-dash {
stroke-dasharray: var(--check-dash-len, 12);
stroke-dashoffset: var(--check-dash-len, 12);
opacity: 0;
}

.t-check:is([aria-checked="true"], [aria-checked="mixed"], .is-mixed),
.t-check-wrap:has(> input:is(:checked, :indeterminate)) > .t-check,
.records-checkbox:has(> input:is(:checked, :indeterminate)) > .t-check,
.records-checkbox-box.is-active {
background: var(--color-accent);
border-color: var(--color-accent);
}

.t-check:is([aria-checked="true"], [aria-checked="mixed"], .is-mixed) svg,
.t-check-wrap:has(> input:is(:checked, :indeterminate)) > .t-check svg,
.records-checkbox:has(> input:is(:checked, :indeterminate)) > .t-check svg,
.records-checkbox-box.is-active svg {
opacity: 1;
transform: scale(1);
}

.t-check[aria-checked="true"]:not(.is-mixed) svg path.t-check-mark,
.t-check[aria-checked="true"]:not(.is-mixed) svg path:not(.t-check-dash),
.t-check-wrap:has(> input:checked:not(:indeterminate)) > .t-check svg path.t-check-mark,
.t-check-wrap:has(> input:checked:not(:indeterminate)) > .t-check svg path:not(.t-check-dash),
.records-checkbox:has(> input:checked:not(:indeterminate)) > .t-check svg path.t-check-mark,
.records-checkbox:has(> input:checked:not(:indeterminate)) > .t-check svg path:not(.t-check-dash) {
stroke-dashoffset: 0;
transition: stroke-dashoffset var(--check-draw) var(--check-ease) var(--check-delay);
}

.t-check:is([aria-checked="mixed"], .is-mixed) .t-check-dash,
.t-check-wrap:has(> input:indeterminate) > .t-check .t-check-dash,
.records-checkbox:has(> input:indeterminate) > .t-check .t-check-dash {
opacity: 1;
stroke-dashoffset: 0;
transition: stroke-dashoffset var(--dur-base) var(--check-ease) var(--check-delay), opacity var(--dur-instant) ease;
}

.t-check:is([aria-checked="mixed"], .is-mixed) .t-check-mark,
.t-check-wrap:has(> input:indeterminate) > .t-check .t-check-mark,
.records-checkbox:has(> input:indeterminate) > .t-check .t-check-mark {
opacity: 0;
}

.t-check:has(.t-check-dash) .records-checkbox-dash {
display: none;
}
@media (hover: hover){

.t-check:hover:not(:is([aria-checked="true"], [aria-checked="mixed"], .is-mixed, :disabled, [aria-disabled="true"])) {
border-color: var(--color-text-tertiary);
}

.t-check-wrap:has(> input:not(:checked):not(:indeterminate):not(:disabled):hover) > .t-check {
border-color: var(--color-text-tertiary);
}

.t-check:is([aria-checked="true"], [aria-checked="mixed"], .is-mixed):hover:not(:disabled):not([aria-disabled="true"]),
.t-check-wrap:has(> input:is(:checked, :indeterminate):not(:disabled):hover) > .t-check {
background: var(--color-accent-hover);
border-color: var(--color-accent-hover);
}

}

.t-check:active:not(:disabled):not([aria-disabled="true"]),
.t-check-wrap:has(> input:active:not(:disabled)) > .t-check {
transform: scale(0.96);
}

.t-check:focus-visible,
.t-check-wrap:has(> input:focus-visible) > .t-check {
outline: var(--focus-ring-width) solid var(--color-accent);
outline-offset: 2px;
}

.t-check:disabled,
.t-check[aria-disabled="true"],
.t-check-wrap:has(> input:disabled) {
opacity: var(--opacity-disabled);
cursor: not-allowed;
}

.form-group.is-error .t-check,
.tcheck-item:has(input[aria-invalid="true"]) .t-check {
border-color: var(--color-danger);
}

.form-group.is-error .t-check:is([aria-checked="true"], [aria-checked="mixed"], .is-mixed),
.form-group.is-error .t-check-wrap:has(> input:is(:checked, :indeterminate)) > .t-check,
.tcheck-item:has(input[aria-invalid="true"]:is(:checked, :indeterminate)) .t-check {
background: var(--color-danger);
border-color: var(--color-danger);
}

.form-group.is-error .t-check:focus-visible,
.form-group.is-error .t-check-wrap:has(> input:focus-visible) > .t-check,
.tcheck-item:has(input[aria-invalid="true"]:focus-visible) .t-check {
outline-color: var(--color-danger);
}
@media (hover: hover){

.form-group.is-error .t-check:is([aria-checked="true"], [aria-checked="mixed"], .is-mixed):hover:not(:disabled),
.form-group.is-error .t-check-wrap:has(> input:is(:checked, :indeterminate):not(:disabled):hover) > .t-check,
.tcheck-item:has(input[aria-invalid="true"]:is(:checked, :indeterminate):not(:disabled):hover) .t-check {
background: var(--color-danger-text);
border-color: var(--color-danger-text);
}

}

.tcheck-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
}

.tcheck-item {
display: inline-flex;
align-items: center;
gap: var(--space-3);
min-height: 24px;
padding-block: 3px;
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
color: var(--color-text);
user-select: none;
cursor: pointer;
}

.tcheck-item:has(.tcheck-copy) {
align-items: flex-start;
}

.tcheck-item:has(.tcheck-copy) > .t-check-wrap,
.tcheck-item:has(.tcheck-copy) > .t-check {
margin-top: 3px;
}

.tcheck-copy {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}

.tcheck-desc {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-normal);
color: var(--color-text-tertiary);
line-height: var(--line-height-normal);
}

.tcheck-item:has(input:disabled),
.tcheck-item:has(.t-check:disabled) {
cursor: not-allowed;
opacity: 0.85;
}

.tcheck-stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}

.form-group > .tcheck-item {
flex-wrap: nowrap;
gap: var(--space-3);
margin-bottom: 0;
color: var(--color-text);
font-weight: var(--font-weight-normal);
}

.form-group.is-error > .tcheck-item {
color: var(--color-danger-text);
}

.t-check-wrap {
position: relative;
display: inline-flex;
width: 18px;
height: 18px;
flex-shrink: 0;
}

.t-check-wrap > input {
position: absolute;
inset: -3px;
z-index: 1;
margin: 0;
opacity: 0;
cursor: pointer;
}

.t-check-wrap > input:disabled {
cursor: not-allowed;
}

.t-check-wrap > .t-check {
width: 100%;
height: 100%;
pointer-events: none;
}

.records-checkbox-box.t-check {
display: flex;
width: 16px;
height: 16px;
}

.records-checkbox-box.t-check svg {
width: 10px;
height: 10px;
}
@media (prefers-reduced-motion: reduce){

.t-check,
.t-check svg,
.t-check svg path {
transition: none !important;
animation: none !important;
}

.t-check:active:not(:disabled):not([aria-disabled="true"]),
.t-check-wrap:has(> input:active:not(:disabled)) > .t-check {
transform: none;
}

}
@media (forced-colors: active){

.t-check {
border-color: ButtonText;
background: Canvas;
color: CanvasText;
forced-color-adjust: none;
}

.t-check:is([aria-checked="true"], [aria-checked="mixed"], .is-mixed),
.t-check-wrap:has(> input:is(:checked, :indeterminate)) > .t-check,
.records-checkbox:has(> input:is(:checked, :indeterminate)) > .t-check,
.records-checkbox-box.is-active {
background: Highlight;
border-color: Highlight;
color: HighlightText;
}

.form-group.is-error .t-check,
.tcheck-item:has(input[aria-invalid="true"]) .t-check {
border-color: Mark;
}

}

.task-check-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
max-width: 24rem;
overflow: visible;
}

.task-check-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
}

.task-check-title {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-tight);
line-height: var(--line-height-normal);
}

.task-check-count {
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
font-variant-numeric: tabular-nums;
line-height: var(--line-height-normal);
}

.task-check-stack {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-2);
overflow: visible;
}

.task-check {
position: relative;
display: flex;
align-items: center;
gap: var(--space-3);
min-width: 0;
margin: 0;
color: var(--color-text);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
user-select: none;
cursor: pointer;
touch-action: manipulation;
overflow: visible;
}

.task-check:has(.task-check-desc) {
align-items: flex-start;
}

.task-check:has(.task-check-desc) > .t-check-wrap {
margin-top: 0.2em;
}

.task-check > .t-check-wrap {
position: relative;
overflow: visible;
}

.task-check-copy {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}

.task-check-label {
position: relative;
display: inline-block;
width: fit-content;
max-width: 100%;
color: var(--color-text);
transition: color var(--task-check-unstrike) var(--check-ease);
}

.task-check-label::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: calc(50% - 0.75px);
height: 1.5px;
background: var(--color-text-tertiary);
transform: scaleX(0);
transform-origin: 100% 50%;
pointer-events: none;
transition: transform var(--task-check-unstrike) var(--check-ease);
}

.task-check:has(input:checked) .task-check-label {
color: var(--color-text-tertiary);
transition-duration: var(--check-box);
}

.task-check:has(input:checked) .task-check-label::after {
transform: scaleX(1);
transform-origin: 0% 50%;
transition-duration: var(--task-check-strike);
}

.task-check-desc {
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
transition: color var(--check-box) var(--check-ease);
}

.task-check:has(input:checked) .task-check-desc {
color: var(--color-text-tertiary);
opacity: 0.85;
}

.task-check:has(input:disabled) {
cursor: not-allowed;
opacity: 0.85;
}

.task-check[data-size="sm"] {
gap: var(--space-2);
font-size: var(--font-size-sm);
}

.task-check[data-size="sm"] > .t-check-wrap {
width: 16px;
height: 16px;
}

.task-check[data-size="sm"] > .t-check-wrap > input {
inset: -4px;
}

.task-check[data-size="sm"] .t-check svg {
width: 10px;
height: 10px;
}

.task-check[data-size="sm"] .task-check-desc {
font-size: var(--font-size-2xs);
}

.task-check[data-size="lg"] {
font-size: var(--font-size-md);
}

.task-check[data-size="lg"] > .t-check-wrap {
width: 24px;
height: 24px;
}

.task-check[data-size="lg"] > .t-check-wrap > input {
inset: -4px;
}

.task-check[data-size="lg"] .t-check svg {
width: 16px;
height: 16px;
}

.task-check[data-size="lg"] .task-check-desc {
font-size: var(--font-size-sm);
}

.task-check.is-popping .t-check {
animation: task-check-pop var(--task-check-pop) ease-out;
}

@keyframes task-check-pop {
0% { transform: scale(1); }
30% { transform: scale(0.9); }
70% { transform: scale(1.05); }
100% { transform: scale(1); }
}

.task-check-burst {
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
pointer-events: none;
}

.task-check-burst i {
position: absolute;
left: calc(var(--task-check-dot) / -2);
top: calc(var(--task-check-dot) / -2);
width: var(--task-check-dot);
height: var(--task-check-dot);
border-radius: 50%;
background: var(--color-accent);
opacity: 0;
}

.task-check-burst i:nth-child(even) {
background: var(--color-text-tertiary);
}

@keyframes task-check-burst {
0% { opacity: 0; transform: translate(0, 0) scale(0); }
20% { opacity: 1; transform: translate(calc(var(--px, 0px) * 0.2), calc(var(--py, 0px) * 0.2)) scale(1); }
100% { opacity: 0; transform: translate(var(--px, 0px), var(--py, 0px)) scale(0.3); }
}

.task-check.is-bursting .task-check-burst i {
animation: task-check-burst var(--task-check-burst) ease-out forwards;
}
@media (prefers-reduced-motion: reduce){

.task-check-label,
.task-check-label::after,
.task-check-desc {
transition: none !important;
}

.task-check.is-popping .t-check,
.task-check.is-bursting .task-check-burst i {
animation: none !important;
}

}
@media (forced-colors: active){

.task-check-label::after {
background: GrayText;
}

}

.t-reel {
position: relative;
display: inline-flex;
align-items: center;
height: var(--reel-cell);
color: var(--color-text);
font-variant-numeric: tabular-nums;
line-height: 1;
}

.t-reel-col {
position: relative;
overflow: hidden;
width: 1ch;
height: var(--reel-cell);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.t-reel.is-spinning .t-reel-col {
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

.t-reel-strip {
display: flex;
flex-direction: column;
}

.t-reel.is-spinning .t-reel-strip {
will-change: transform, filter;
}

.t-reel-digit {
display: flex;
align-items: center;
justify-content: center;
width: 1ch;
height: var(--reel-cell);
}

.t-reel-sep {
display: flex;
align-items: center;
height: var(--reel-cell);
padding: 0;
}

.t-reel-defs {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
@media (prefers-reduced-motion: reduce){

.t-reel-strip { transition: none !important; filter: none !important; }

.t-reel.is-spinning .t-reel-col {
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

}

.reel {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
}

.reel + .swap-kicker {
margin-top: var(--space-4);
}

.reel .t-reel {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-tight);
}

.reel[data-size="sm"] .t-reel,
.t-reel[data-size="sm"] {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
}

.reel > .metric {
flex: 1 1 14rem;
max-width: 20rem;
margin: 0;
}

.metric-val .t-reel {
color: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
}

.t-think {
--think-base: var(--color-text-tertiary);
--think-highlight: var(--color-text);
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
text-align: left;
}

.t-think-mark {
display: inline-flex;
flex-shrink: 0;
color: var(--color-text-secondary);
}

.t-think-mark svg {
display: block;
transform-origin: 50% 50%;
}

.t-think.is-working .t-think-mark svg {
animation: t-think-spark var(--think-mark) ease-in-out infinite;
}

.dotm {
--dotm-size: 18px;
--dotm-cell: calc(var(--dotm-size) / 5);
--dotm-dot: calc(var(--dotm-cell) * 0.66);
position: relative;
display: inline-block;
flex-shrink: 0;
width: var(--dotm-size);
height: var(--dotm-size);
background-image: radial-gradient(circle, color-mix(in srgb, currentColor 22%, transparent) 0 calc(var(--dotm-dot) / 2), transparent calc(var(--dotm-dot) / 2 + 0.5px));
background-size: var(--dotm-cell) var(--dotm-cell);
}

.dotm i {
--dotm-x: 1;
--dotm-y: 1;
position: absolute;
top: calc(var(--dotm-cell) * var(--dotm-y) + (var(--dotm-cell) - var(--dotm-dot)) / 2);
left: calc(var(--dotm-cell) * var(--dotm-x) + (var(--dotm-cell) - var(--dotm-dot)) / 2);
width: var(--dotm-dot);
height: var(--dotm-dot);
border-radius: 50%;
background: currentColor;
opacity: 0;
animation: dotm-fire 1600ms var(--ease-in-out) infinite both;
}

.dotm i:nth-child(n+4):nth-child(-n+6) { --dotm-y: 2; }

.dotm i:nth-child(n+7) { --dotm-y: 3; }

.dotm i:nth-child(3n+2) { --dotm-x: 2; }

.dotm i:nth-child(3n) { --dotm-x: 3; }

.dotm i:nth-child(1) { animation-delay: 1180ms; }

.dotm i:nth-child(2) { animation-delay: 420ms; }

.dotm i:nth-child(3) { animation-delay: 960ms; }

.dotm i:nth-child(4) { animation-delay: 140ms; }

.dotm i:nth-child(5) { animation-delay: 700ms; }

.dotm i:nth-child(6) { animation-delay: 1320ms; }

.dotm i:nth-child(7) { animation-delay: 560ms; }

.dotm i:nth-child(8) { animation-delay: 1040ms; }

.dotm i:nth-child(9) { animation-delay: 260ms; }

@keyframes dotm-fire {
0%, 34% { opacity: 0; }
44% { opacity: 1; }
60% { opacity: 0.2; }
100% { opacity: 0; }
}

.t-think.is-done .dotm i,
.dotm.is-still i {
animation: none;
opacity: 0.4;
}

@keyframes t-think-spark {
0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.68; }
42% { transform: scale(1.1) rotate(-10deg); opacity: 1; }
68% { transform: scale(0.96) rotate(6deg); opacity: 0.82; }
}

.t-think-line {
position: relative;
display: inline-block;
overflow: hidden;
transition: width var(--think-swap) var(--think-ease);
}

.t-think-sizer {
display: block;
width: max-content;
visibility: hidden;
white-space: nowrap;
}

.t-think-text {
position: absolute;
top: 0;
left: 0;
display: block;
color: var(--think-base);
white-space: nowrap;
transform: translateY(0);
filter: blur(0);
opacity: 1;
transition:
transform var(--think-swap) var(--think-ease),
filter var(--think-swap) var(--think-ease),
opacity var(--think-swap) var(--think-ease);
will-change: transform, filter, opacity;
}

.t-think-text::before {
content: attr(data-text);
position: absolute;
inset: 0;
pointer-events: none;
background-image: linear-gradient(90deg,
transparent 0%, transparent 40%,
var(--think-highlight) 50%,
transparent 60%, transparent 100%);
background-size: 400% 100%;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
animation: t-shimmer var(--think-shimmer) linear infinite;
}

.t-think-text.is-exit {
transform: translateY(calc(var(--think-distance) * -1));
filter: blur(var(--think-blur));
opacity: 0;
}

.t-think-text.is-enter-start {
transition: none;
transform: translateY(var(--think-distance));
filter: blur(var(--think-blur));
opacity: 0;
}

.t-think.is-done {
--think-base: var(--color-text-secondary);
}

.t-think.is-done .t-think-mark {
color: var(--color-text-tertiary);
}

.t-think.is-done .t-think-text::before {
display: none;
}
@media (prefers-reduced-motion: reduce){

.t-think-mark svg { animation: none !important; opacity: 1 !important; transform: none !important; }

.dotm i { animation: none !important; opacity: 0.45 !important; }

.t-think-line { transition: none !important; }

.t-think-text { transition: none !important; transform: none !important; filter: none !important; }

.t-think-text::before { display: none !important; }

}

.think {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-5);
}

.think-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
}

.think-item .swap-kicker {
margin: 0;
}

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

.t-stream-w {
opacity: 0.4;
filter: blur(var(--stream-blur));
transition:
opacity var(--stream-fade) var(--stream-ease),
filter var(--stream-fade) var(--stream-ease);
}

.t-stream-w.is-in {
opacity: 1;
filter: blur(0);
}

.t-stream.is-streaming .t-stream-w {
will-change: opacity, filter;
}

.t-stream-caret {
display: inline-block;
width: 1.5px;
height: 0.9em;
margin-left: 0.12em;
border-radius: calc(1px * var(--radius-factor));
background: currentColor;
vertical-align: -0.08em;
pointer-events: none;
animation: t-stream-caret var(--stream-caret) ease-in-out infinite;
}

@keyframes t-stream-caret {
0%, 100% { opacity: 1; }
50% { opacity: 0.18; }
}

.t-stream-actions,
.t-follow,
.stream .t-cites {
opacity: 0;
transform: translateY(4px);
transition:
opacity var(--stream-chrome) var(--stream-ease),
transform var(--stream-chrome) var(--stream-ease);
}

.t-stream-actions.is-in,
.t-follow.is-in,
.stream .t-cites.is-in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce){

.t-stream-w {
transition: none !important;
filter: none !important;
opacity: 1 !important;
}

.t-stream-caret { display: none !important; animation: none !important; }

.t-stream-actions,
.t-follow,
.stream .t-cites {
transition: none !important;
opacity: 1 !important;
transform: none !important;
}

}

.stream {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-3);
width: 100%;
min-width: 0;
max-width: 36rem;
}

.stream .t-stream {
color: var(--color-text);
font-size: var(--font-size-base);
letter-spacing: var(--letter-spacing-tight);
line-height: var(--line-height-relaxed);
overflow-wrap: anywhere;
}

.t-stream p {
margin: 0 0 0.75em;
}

.t-stream p:last-child {
margin-bottom: 0;
}

.t-stream a {
color: inherit;
font-weight: var(--font-weight-medium);
text-underline-offset: 3px;
}

.t-stream ul,
.t-stream ol {
margin: 0.75em 0;
padding-left: 1.25em;
}

.t-stream li + li {
margin-top: 0.25em;
}

.t-stream :not(pre) > code {
padding: 0.1em 0.35em;
border-radius: var(--radius-sm);
background: var(--color-bg-subtle);
font-family: var(--font-mono);
font-size: 0.9em;
}

.t-stream pre {
margin: 0.75em 0 0;
padding: var(--space-3);
overflow-x: auto;
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius);
background: var(--color-bg-subtle);
}

.t-stream pre code {
padding: 0;
background: none;
font-family: var(--font-mono);
font-size: var(--font-size-sm);
}

.t-stream.is-streaming > :not(.is-on),
.t-stream.is-streaming li:not(.is-on) {
display: none;
}

.stream > .btn {
align-self: flex-start;
}

.t-stream-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1);
}

.t-stream-icon {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 1.75rem;
padding: 0 var(--space-2);
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-tertiary);
font: inherit;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
line-height: 1;
cursor: pointer;
transition: color var(--transition-fast), background-color var(--transition-fast);
}

.t-stream-icon svg {
display: block;
flex-shrink: 0;
width: 14px;
height: 14px;
}

.t-stream-icon:hover {
background: var(--color-bg-hover);
color: var(--color-text);
}

.t-stream-icon:focus-visible,
.t-follow [data-follow-item]:focus-visible {
outline: var(--focus-ring-width) solid var(--color-accent);
outline-offset: 2px;
}

.t-stream-icon.is-copied,
.t-stream-icon.is-copied:hover {
color: var(--color-success-text);
background: transparent;
}

.t-stream-icon .t-stream-check {
display: none;
}

.t-stream-icon.is-copied .t-stream-copy {
display: none;
}

.t-stream-icon.is-copied .t-stream-check {
display: block;
}

.t-follow {
display: flex;
flex-direction: column;
gap: var(--space-1);
width: 100%;
}

.t-follow > p {
margin: 0;
padding: 0 var(--space-3);
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
}

.t-follow [data-follow-item] {
display: flex;
width: 100%;
align-items: center;
gap: var(--space-2);
margin: 0;
padding: var(--space-2) var(--space-3);
border: 0;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text);
font: inherit;
font-size: var(--font-size-sm);
text-align: left;
cursor: pointer;
transition: background-color var(--transition-fast);
}

.t-follow [data-follow-item]:hover {
background: var(--color-bg-hover);
}

.t-follow [data-follow-item]::after {
content: "";
width: 14px;
height: 14px;
flex-shrink: 0;
margin-left: auto;
background: currentColor;
opacity: 0.4;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.t-follow [data-follow-item]:hover::after {
opacity: 0.7;
}
@media (prefers-reduced-motion: reduce){

.t-stream-icon,
.t-follow [data-follow-item] {
transition: none !important;
}

}

.matrix {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
max-width: 36rem;
}

.matrix > .swap-kicker {
margin-top: var(--space-4);
}

.matrix-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--space-4);
}

.matrix-item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
}

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

.avatar-stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}

.avatar-id {
display: inline-flex;
align-items: center;
gap: var(--space-3);
min-width: 0;
max-width: 100%;
}

.avatar-id-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}

.avatar-id-name,
.avatar-id-meta {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.avatar-id-name {
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
}

.avatar-id-meta {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
line-height: var(--line-height-tight);
}

.t-skel { position: relative; }

.t-skel-skeleton,
.t-skel-content {
position: absolute;
inset: 0;
}

.t-skel-skeleton {
z-index: 1;
opacity: 1;
filter: blur(0);
transition:
opacity var(--reveal-dur) var(--reveal-ease),
filter  var(--reveal-dur) var(--reveal-ease);
}

.t-skel-content {
z-index: 2;
opacity: 0;
filter: blur(var(--reveal-blur));
transition:
opacity var(--reveal-dur) var(--reveal-ease),
filter  var(--reveal-dur) var(--reveal-ease);
}

.t-skel.is-revealed .t-skel-skeleton {
opacity: 0;
filter: blur(var(--reveal-blur));
pointer-events: none;
}

.t-skel.is-revealed .t-skel-content {
opacity: 1;
filter: blur(0);
}

.t-skel.is-resetting .t-skel-skeleton,
.t-skel.is-resetting .t-skel-content {
transition: none !important;
}

.t-skel-skeleton .skeleton-card,
.t-skel-content .list-card {
height: 100%;
box-sizing: border-box;
}
@media (prefers-reduced-motion: reduce){

.t-skel-skeleton, .t-skel-content {
transition: none !important;
}

}

.skel {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
max-width: 36rem;
}

.skel > .swap-kicker { margin-top: var(--space-5); }

.skel > .swap-kicker:first-child { margin-top: 0; }

.skel > .card-list,
.skel > .data-table,
.skel > .data-table-wrap,
.skel > .skeleton-copy,
.skel > .skeleton-metrics,
.skel > .skel-demo,
.skel > .load { width: 100%; }

.skel-demo {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}

.skel-demo .t-skel {
width: 100%;
max-width: 22rem;
min-height: calc(44px + var(--space-4) * 2 + 2 * var(--border-width));
}

.modal-overlay[data-modal] {
display: none;
}

.modal-overlay[data-modal].is-open {
display: flex;
}

dialog.modal-host {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
margin: 0;
padding: 0;
border: 0;
overflow: visible;
background: transparent;
color: inherit;
}

dialog.modal-host::backdrop {
background: transparent;
}

.select {
--select-menu-height: 15.25rem;
position: relative;
max-width: 280px;
z-index: 1;
}

.form-group .select,
.settings-pref-control .select,
.entity-toolbar .select,
.import-map-row .select,
.toolbar .select {
width: 100%;
max-width: none;
}

.entity-toolbar .select {
width: var(--select-fit, 11rem);
min-width: 8rem;
max-width: 20rem;
flex: 0 0 auto;
}

.entity-toolbar .select-list:not(.is-floating) {
right: auto;
min-width: 100%;
width: max-content;
max-width: min(24rem, var(--select-list-max, calc(100vw - 2 * var(--space-4))));
}

.entity-toolbar .select.is-end .select-list:not(.is-floating) {
right: 0;
left: auto;
}
@media (max-width: 40rem){

.entity-toolbar .select { min-width: 0; }

}

.toolbar .select {
width: 10rem;
max-width: 10rem;
}

.crumbs .select {
display: inline-flex;
width: auto;
min-width: 6rem;
max-width: 11rem;
vertical-align: middle;
}

.crumbs .select-trigger,
.crumbs .btn.select-trigger,
.crumbs .btn-secondary.select-trigger {
min-height: 28px;
height: 28px;
padding: 0 var(--space-2);
font-size: var(--font-size-sm);
}

.toolbar .select-trigger,
.toolbar .btn.select-trigger,
.toolbar .btn-secondary.select-trigger {
min-height: 32px;
height: 32px;
padding: var(--space-1) var(--space-3);
border: 0;
background: transparent;
box-shadow: none;
}

.select.is-open {
z-index: 5;
}

.select > select.select-native,
.select > select[data-select-native] {
display: none;
}

.select-demo {
display: grid;
grid-template-columns: repeat(2, minmax(0, 16rem));
align-items: start;
gap: var(--space-6) var(--space-8);
min-height: 20rem;
}

.select-demo .select {
max-width: none;
}
@media (max-width: 40rem){

.select-demo {
grid-template-columns: minmax(0, 16rem);
min-height: 0;
}

}

.select-trigger,
.btn.select-trigger,
.btn-secondary.select-trigger {
position: relative;
z-index: 2;
box-sizing: border-box;
width: 100%;
height: auto;
min-height: var(--control-h);
justify-content: space-between;
gap: var(--space-2);
padding: 0 var(--space-3);
border: 1px solid var(--color-border-control);
border-radius: var(--radius-control);
background: var(--color-surface);
color: var(--color-text);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
box-shadow: none;
overflow: hidden;
transition:
border-color var(--transition-fast),
box-shadow var(--transition-fast),
background-color var(--transition-fast),
border-radius var(--dur-fast) var(--select-ease);
}

.select-trigger [data-select-label] {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}

.select.is-empty .select-trigger [data-select-label],
.select-trigger.is-placeholder [data-select-label] {
color: var(--color-text-tertiary);
font-weight: var(--font-weight-normal);
}

.select-morph.is-empty .select-trigger [data-select-label] {
color: var(--color-text-tertiary);
}

.select-trigger:hover,
.btn-secondary.select-trigger:hover {
background: var(--color-surface);
border-color: var(--color-text-tertiary);
}

.select.is-open .select-trigger,
.select-trigger:focus-visible,
.btn.select-trigger:focus-visible {
outline: none;
border-color: var(--color-accent);
box-shadow: var(--focus-ring);
background: var(--color-surface);
}

.form-group.is-error .select-trigger,
.select.is-invalid .select-trigger,
.select-trigger[aria-invalid="true"] {
border-color: var(--color-danger);
box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.form-group.is-error .select.is-open .select-trigger,
.select.is-invalid.is-open .select-trigger {
border-color: var(--color-danger);
}

.select-trigger:disabled,
.btn.select-trigger:disabled,
.select.is-disabled .select-trigger,
.form-group.is-disabled .select-trigger {
opacity: 0.6;
cursor: not-allowed;
background: var(--color-bg);
color: var(--color-text-secondary);
border-color: var(--color-border);
box-shadow: none;
}

.select-trigger .select-chevron,
.btn.select-trigger .select-chevron {
flex-shrink: 0;
width: 16px;
height: 16px;
color: var(--color-text-tertiary);
transition: transform var(--dur-slow) var(--ease-overshoot);
}

.select.is-open .select-trigger .select-chevron {
transform: rotate(180deg);
}

@keyframes select-pinch-bot {
0%, 100% { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
40% { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
}

@keyframes select-pinch-top {
0%, 100% { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
40% { border-top-left-radius: 0; border-top-right-radius: 0; }
}

.select.is-open:not(.is-top):not(.select-morph) .select-trigger {
animation: select-pinch-bot var(--dur-enter) var(--select-ease) both;
}

.select.is-open.is-top:not(.select-morph) .select-trigger {
animation: select-pinch-top var(--dur-enter) var(--select-ease) both;
}

.select-list {
position: absolute;
z-index: 1;
top: 100%;
left: 0;
right: 0;
display: grid;
grid-template-rows: 0fr;
margin: 0;
overflow: hidden;
pointer-events: none;
opacity: 0;
background: var(--color-surface);
border: 1px solid transparent;
border-radius: var(--radius-md);
border-top-left-radius: 0;
border-top-right-radius: 0;
box-shadow: none;
transform-origin: top;
transition:
grid-template-rows var(--select-open) var(--select-ease),
margin var(--select-gap-dur) var(--ease-overshoot) var(--dur-instant),
opacity var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
border-radius var(--dur-slow) var(--select-ease) var(--dur-fast);
}

.select-list-inner {
min-height: 0;
overflow: hidden;
}

.select.is-open .select-list-inner {
padding: var(--space-1);
max-height: var(--select-menu-height);
overflow: hidden;
}

.select.is-open.is-settled .select-list-inner {
overflow-x: hidden;
overflow-y: auto;
}

.select.is-open .select-list {
grid-template-rows: 1fr;
margin-top: var(--select-gap);
opacity: 1;
pointer-events: auto;
border-color: var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-float);
}

.select.is-top .select-list {
top: auto;
bottom: 100%;
transform-origin: bottom;
border-top-left-radius: var(--radius-md);
border-top-right-radius: var(--radius-md);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

.select.is-open.is-top .select-list {
margin-top: 0;
margin-bottom: var(--select-gap);
border-radius: var(--radius-md);
}

.select-group {
margin: 0;
padding: var(--space-1) 0;
border: 0;
min-inline-size: 0;
}

.select-group + .select-group {
border-top: 1px solid var(--color-border-subtle);
}

.select-group-label {
padding: 6px 10px 4px;
color: var(--color-text-tertiary);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 0;
text-transform: none;
}

.select-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
width: 100%;
max-width: 100%;
overflow: hidden;
padding: var(--space-2) var(--space-3);
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-tertiary);
font: inherit;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-align: left;
cursor: pointer;
opacity: 0;
transform: translateY(-6px);
filter: blur(3px);
transition:
opacity var(--dur-base) var(--ease-out) calc(50ms + (var(--i, 0) * 35ms)),
transform var(--dur-base) var(--ease-out) calc(50ms + (var(--i, 0) * 35ms)),
filter var(--dur-base) var(--ease-out) calc(50ms + (var(--i, 0) * 35ms)),
background-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}

.select-option > span:not(.select-check) {
min-width: 0;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
}

.select.is-open .select-option {
opacity: 1;
transform: none;
filter: none;
}

.select.is-open .select-option:disabled,
.select.is-open .select-option[aria-disabled="true"] {
opacity: 0.45;
}

.select:not(.is-open) .select-option {
opacity: 0;
transition-delay: 0ms;
}

.select-option:hover,
.select-option:focus-visible,
.select-option.is-active {
background: var(--color-bg-subtle);
color: var(--color-text);
outline: none;
}

.select-option[aria-selected="true"] {
color: var(--color-text);
}

.select-option:disabled,
.select-option[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}

.select-check {
flex-shrink: 0;
width: 16px;
height: 16px;
opacity: 0;
transform: scale(0.72);
transition:
opacity var(--dur-fast) var(--ease-out),
transform var(--dur-base) var(--select-ease);
}

.select-option[aria-selected="true"] .select-check {
opacity: 1;
transform: none;
}

.select-morph {
overflow: hidden;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: box-shadow var(--dur-base) var(--select-ease), border-color var(--transition-fast);
}

.select-morph:focus-within {
border-color: var(--color-accent);
box-shadow: var(--focus-field);
}

.select-morph.is-open {
border-color: var(--color-accent);
box-shadow: var(--focus-field), var(--shadow-lg);
}

.form-group.is-error .select-morph,
.select-morph.is-invalid {
border-color: var(--color-danger);
box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.select-morph .select-trigger,
.select-morph .select-trigger:hover,
.select-morph.is-open .select-trigger,
.select-morph .select-trigger:focus-visible {
border: 0;
background: transparent;
box-shadow: none;
animation: none;
}

.select-morph .select-list {
position: static;
border: 0;
box-shadow: none;
margin: 0;
border-radius: 0;
transition:
grid-template-rows var(--select-open) var(--select-ease),
opacity var(--dur-base) var(--ease-out);
}

.select-morph.is-open .select-list {
margin: 0;
border: 0;
box-shadow: none;
}

.select-morph .select-list-inner {
border-top: 1px solid var(--color-border);
}
@media (prefers-reduced-motion: reduce){

.select-list,
.select-option,
.select-check,
.select-trigger,
.select-trigger .select-chevron {
transition: none !important;
animation: none !important;
filter: none !important;
transform: none !important;
}

.select.is-open .select-option { opacity: 1; }

.select-option[aria-selected="true"] .select-check { opacity: 1; }

}

.t-radio-wrap {
position: relative;
display: inline-flex;
width: 18px;
height: 18px;
flex-shrink: 0;
}

.t-radio-wrap > input {
position: absolute;
inset: 0;
z-index: 1;
margin: 0;
opacity: 0;
cursor: pointer;
}

.t-radio-wrap > input:disabled {
cursor: not-allowed;
}

.t-radio {
--radio-ease: var(--ease-emphasized);
--radio-dot-dur: 280ms;
--radio-press-dur: 160ms;
--radio-border-dur: 200ms;
position: relative;
display: grid;
place-items: center;
width: 18px;
height: 18px;
border: 1px solid var(--color-border-control);
border-radius: var(--radius-full);
background: var(--color-surface);
transform-origin: center;
transition:
border-color var(--radio-border-dur) var(--radio-ease),
background var(--radio-border-dur) var(--radio-ease),
transform var(--radio-press-dur) var(--radio-ease);
}

.t-radio::after {
content: "";
width: 10px;
height: 10px;
border-radius: var(--radius-full);
background: var(--color-accent);
transform: scale(0);
pointer-events: none;
transition: transform var(--radio-dot-dur) var(--radio-ease);
}

.t-radio-wrap:has(> input:checked) > .t-radio,
.t-radio[aria-checked="true"] {
border-color: var(--color-accent);
}

.t-radio-wrap:has(> input:checked) > .t-radio::after,
.t-radio[aria-checked="true"]::after {
transform: scale(1);
}
@media (hover: hover){

.t-radio-wrap:has(> input:not(:checked):not(:disabled):hover) > .t-radio {
border-color: var(--color-text-tertiary);
}

}

.t-radio-wrap:has(> input:active:not(:disabled)) > .t-radio {
transform: scale(0.92);
}

.t-radio-wrap:has(> input:focus-visible) > .t-radio {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}

.t-radio-wrap:has(> input:disabled) {
opacity: var(--opacity-disabled);
cursor: not-allowed;
}

.form-group.is-error .t-radio,
.t-radio-wrap:has(> input[aria-invalid="true"]) > .t-radio {
border-color: var(--color-danger);
}

.form-group.is-error .t-radio-wrap:has(> input:checked) > .t-radio,
.t-radio-wrap:has(> input[aria-invalid="true"]:checked) > .t-radio {
border-color: var(--color-danger);
}

.form-group.is-error .t-radio-wrap:has(> input:checked) > .t-radio::after,
.form-group.is-error .radios-dot,
.t-radio-wrap:has(> input[aria-invalid="true"]:checked) > .t-radio::after {
background: var(--color-danger);
}

.t-radio-wrap:has(> input[aria-invalid="true"]:focus-visible) > .t-radio,
.form-group.is-error .t-radio-wrap:has(> input:focus-visible) > .t-radio {
outline-color: var(--color-danger);
}
@media (hover: hover){

.form-group.is-error .t-radio-wrap:has(> input:not(:checked):not(:disabled):hover) > .t-radio,
.t-radio-wrap:has(> input[aria-invalid="true"]:not(:checked):not(:disabled):hover) > .t-radio {
border-color: var(--color-danger);
}

}

.radios-dot {
position: absolute;
inset: 4px;
border-radius: var(--radius-full);
background: var(--color-accent);
pointer-events: none;
transition: transform var(--radio-dot-dur, var(--dur-slow)) var(--radio-ease, var(--ease-emphasized));
}

.radios:has(.radios-dot) .t-radio::after {
content: none;
}

.radios {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}

.radios.is-row {
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-2) var(--space-5);
}

.radio-item {
display: inline-flex;
align-items: center;
gap: var(--space-3);
min-height: 24px;
padding-block: 3px;
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
color: var(--color-text);
user-select: none;
cursor: pointer;
}

.radio-item:has(.radio-item-copy) {
align-items: flex-start;
}

.radio-item:has(.radio-item-copy) > .t-radio-wrap {
margin-top: 3px;
}

.radio-item-copy {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}

.radio-item-hint {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-normal);
color: var(--color-text-tertiary);
line-height: var(--line-height-normal);
}

.radio-item:has(input:disabled) {
cursor: not-allowed;
opacity: 0.85;
}

.form-group > .radio-item {
margin-bottom: 0;
color: var(--color-text);
font-weight: var(--font-weight-normal);
}
@media (prefers-reduced-motion: reduce){

.t-radio,
.t-radio::after,
.radios-dot {
transition: none !important;
}

.t-radio-wrap:has(> input:active:not(:disabled)) > .t-radio {
transform: none;
}

}
@media (forced-colors: active){

.t-radio {
border-color: ButtonText;
background: Canvas;
}

.t-radio-wrap:has(> input:checked) > .t-radio,
.t-radio[aria-checked="true"] {
border-color: Highlight;
background: Canvas;
}

.t-radio::after,
.radios-dot {
background: Highlight;
}

.form-group.is-error .t-radio,
.t-radio-wrap:has(> input[aria-invalid="true"]) > .t-radio {
border-color: Mark;
}

.form-group.is-error .t-radio-wrap:has(> input:checked) > .t-radio::after,
.form-group.is-error .radios-dot {
background: Mark;
}

}

.status-badge[data-abadge] {
position: relative;
overflow: hidden;
text-overflow: clip;
font-variant-numeric: tabular-nums;
white-space: nowrap;
transition:
background-color var(--transition-normal),
color var(--transition-normal),
border-color var(--transition-normal),
width var(--dur-slow) var(--ease-emphasized);
}

.abadge-pulse {
position: absolute;
inset: 0;
border-radius: inherit;
background: currentColor;
pointer-events: none;
animation: abadge-pulse 1.6s ease-in-out infinite;
}

.abadge-icon,
.abadge-label {
position: relative;
z-index: 1;
display: inline-grid;
place-items: center;
overflow: hidden;
}

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

.abadge-icon > span,
.abadge-label > span {
grid-area: 1 / 1;
display: inline-flex;
white-space: nowrap;
}

.abadge-icon > span.is-out,
.abadge-label > span.is-out {
position: absolute;
}

.abadge-icon > span.is-in {
animation: abadge-icon-in var(--dur-slow) var(--ease-emphasized) both;
}

.abadge-icon > span.is-out {
animation: abadge-icon-out var(--dur-base) var(--ease-emphasized) both;
}

.abadge-label > span.is-in {
animation: abadge-text-in var(--dur-slow) var(--ease-emphasized) both;
}

.abadge-label > span.is-out {
animation: abadge-text-out var(--dur-base) var(--ease-emphasized) both;
}

.abadge-spin {
animation: spin var(--dur-spin) linear infinite;
}

.abadge-stage {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 2.25rem;
}

.abadge-stage + .abadge-grid {
margin-top: 12px;
}

.abadge-grid {
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 8px;
justify-content: start;
}

@keyframes abadge-pulse {
0%, 100% { transform: scale(0.94); opacity: 0.08; }
50% { transform: scale(1.08); opacity: 0.16; }
}

@keyframes abadge-icon-in {
from {
opacity: 0.72;
transform: translateY(80%) scale(0.92) rotate(-8deg);
filter: blur(6px);
}
to {
opacity: 1;
transform: none;
filter: none;
}
}

@keyframes abadge-icon-out {
to {
opacity: 0.5;
transform: translateY(-80%) scale(0.96) rotate(8deg);
filter: blur(6px);
}
}

@keyframes abadge-text-in {
from {
opacity: 0.76;
transform: translateY(85%);
filter: blur(6px);
}
to {
opacity: 1;
transform: none;
filter: none;
}
}

@keyframes abadge-text-out {
to {
opacity: 0.5;
transform: translateY(-85%);
filter: blur(6px);
}
}
@media (prefers-reduced-motion: reduce){

.status-badge[data-abadge] {
transition: none !important;
}

.abadge-pulse,
.abadge-spin,
.abadge-icon > span,
.abadge-label > span {
animation: none !important;
filter: none !important;
transform: none !important;
}

}
@media (max-width: 30rem){

.abadge-grid {
grid-template-columns: repeat(2, max-content);
}

}

.progress {
--progress-h: 6px;
--progress-fill: var(--color-accent);
width: 100%;
height: var(--progress-h);
overflow: hidden;
border-radius: var(--radius-full);
background: color-mix(in srgb, var(--color-text) 8%, transparent);
}

.progress-fill {
display: block;
height: 100%;
width: 100%;
background: var(--progress-fill);
border-radius: inherit;
clip-path: inset(0 calc(100% - clamp(0%, var(--progress, 0) * 1%, 100%)) 0 0 round var(--progress-h));
transition: clip-path var(--transition-normal);
}

.progress.is-xs { --progress-h: 2px; }

.progress.is-sm { --progress-h: 4px; }

.progress.is-lg { --progress-h: 10px; }

.progress.is-success { --progress-fill: var(--color-success); }

.progress.is-warning { --progress-fill: var(--color-warning); }

.progress.is-danger { --progress-fill: var(--color-danger); }

.progress.is-info { --progress-fill: var(--color-info); }

.progress.is-indeterminate .progress-fill {
clip-path: none;
width: 32%;
animation: progress-slide 1.15s ease-in-out infinite alternate;
}

.progress.is-disabled,
.progress[aria-disabled="true"] {
opacity: var(--opacity-disabled);
pointer-events: none;
}

@keyframes progress-slide {
from { transform: translateX(0); }
to { transform: translateX(212.5%); }
}

.progress-block,
.progress-file {
width: 100%;
max-width: 22rem;
}

.progress-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-2);
}

.progress-label {
min-width: 0;
overflow: hidden;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
text-overflow: ellipsis;
white-space: nowrap;
}

.progress-value {
flex-shrink: 0;
color: var(--color-text);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
font-variant-numeric: tabular-nums;
line-height: var(--line-height-tight);
}

.progress-block > .form-hint {
margin-top: var(--space-2);
}

.progress-stack {
display: flex;
flex-direction: column;
gap: var(--space-4);
width: 100%;
max-width: 22rem;
}

.progress-item {
display: flex;
flex-direction: column;
gap: var(--space-2);
}

.progress-cap {
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
letter-spacing: var(--letter-spacing-label);
}

.progress-file {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-3);
align-items: center;
max-width: 24rem;
}

.progress-file-icon {
display: flex;
width: 2rem;
height: 2rem;
flex-shrink: 0;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
color: var(--color-text-secondary);
}

.progress-file-icon svg {
width: 14px;
height: 14px;
}

.progress-file-body {
min-width: 0;
}

.progress-file-body .progress-meta {
margin-bottom: var(--space-1);
}

.progress-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--space-3);
}

.progress-row > .progress,
.progress-row > .progress-block {
flex: 1 1 10rem;
min-width: 10rem;
max-width: 22rem;
}
@media (prefers-reduced-motion: reduce){

.progress-fill { transition: none !important; }

.progress.is-indeterminate .progress-fill {
width: 40%;
animation: none;
transform: none;
}

}

.slider {
--slider-track-h: 0.375rem;
--slider-thumb: 1.125rem;
--slider-fill: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: var(--space-3);
row-gap: 2px;
max-width: 20rem;
}

.slider:not(:has(.slider-value)) {
grid-template-columns: minmax(0, 1fr);
}

.form-group .slider {
width: 100%;
max-width: none;
}

.slider-control {
grid-column: 1;
grid-row: 1;
position: relative;
display: flex;
align-items: center;
min-width: 0;
min-height: var(--touch-target-min);
}

.slider-rail {
position: absolute;
left: calc(var(--slider-thumb) / 2);
right: calc(var(--slider-thumb) / 2);
top: 50%;
height: var(--slider-track-h);
overflow: hidden;
border-radius: var(--radius-full);
background: var(--color-bg-subtle);
transform: translateY(-50%);
pointer-events: none;
}

.slider-fill {
display: block;
height: 100%;
width: calc(var(--slider-fill, 0) * 1%);
background: var(--color-accent);
border-radius: inherit;
}

.slider-ticks {
position: absolute;
inset: 0;
pointer-events: none;
}

.slider-tick {
position: absolute;
top: 0;
width: 1px;
height: 100%;
background: color-mix(in srgb, var(--color-text) 22%, transparent);
transform: translateX(-50%);
}

.slider-thumb {
position: absolute;
top: 50%;
left: calc(var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--slider-fill, 0) / 100);
z-index: 1;
width: var(--slider-thumb);
height: var(--slider-thumb);
background: var(--color-surface);
border-radius: var(--radius-full);
box-shadow: var(--shadow-sm), 0 0 0 1.5px var(--color-accent);
pointer-events: none;
transform: translate(-50%, -50%);
transition:
transform var(--transition-fast),
box-shadow var(--transition-fast),
border-color var(--transition-fast);
}

.slider input[type="range"] {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
opacity: 0;
background: transparent;
accent-color: var(--color-accent);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
touch-action: none;
-webkit-tap-highlight-color: transparent;
}

.slider input[type="range"]::-webkit-slider-runnable-track {
height: var(--touch-target-min);
background: transparent;
}

.slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: var(--slider-thumb);
height: var(--slider-thumb);
border: 0;
border-radius: var(--radius-full);
background: transparent;
}

.slider input[type="range"]::-moz-range-track {
height: var(--touch-target-min);
background: transparent;
border: 0;
}

.slider input[type="range"]::-moz-range-thumb {
width: var(--slider-thumb);
height: var(--slider-thumb);
border: 0;
border-radius: var(--radius-full);
background: transparent;
}

.form-group .slider input[type="range"],
.form-group .slider input[type="range"]:hover,
.form-group .slider input[type="range"]:focus,
.form-group.is-error .slider input[type="range"],
.form-group.is-error .slider input[type="range"]:hover,
.form-group .slider input[aria-invalid="true"],
.form-group .slider input[aria-invalid="true"]:hover,
.form-group .slider input[type="range"]:disabled {
min-height: 0;
height: 100%;
padding: 0;
border: 0;
box-shadow: none;
background: transparent;
opacity: 0;
}

.slider:not(:has(.slider-control)) {
display: flex;
align-items: center;
gap: var(--space-3);
}

.slider:not(:has(.slider-control)) input[type="range"] {
position: static;
flex: 1;
min-width: 0;
height: var(--slider-track-h);
opacity: 1;
cursor: pointer;
}

.slider--range .slider-fill {
margin-left: calc(var(--slider-from, 0) * 1%);
width: calc((var(--slider-to, 100) - var(--slider-from, 0)) * 1%);
}

.slider--range .slider-thumb {
left: calc(var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--slider-from, 0) / 100);
}

.slider--range .slider-thumb--to {
left: calc(var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--slider-to, 100) / 100);
}

.slider--range input[type="range"] {
pointer-events: none;
}

.slider--range input[type="range"].is-top {
z-index: 3;
}

.slider--range input[type="range"]::-webkit-slider-thumb {
margin-top: calc((var(--touch-target-min) - var(--slider-thumb)) / 2);
pointer-events: auto;
cursor: grab;
}

.slider--range input[type="range"]::-moz-range-thumb {
pointer-events: auto;
cursor: grab;
}

.slider--range:has(input:focus-visible) .slider-thumb {
box-shadow: var(--shadow-sm), 0 0 0 1.5px var(--color-accent);
}

.slider--range:has(input:first-of-type:focus-visible) .slider-thumb:not(.slider-thumb--to),
.slider--range:has(input:last-of-type:focus-visible) .slider-thumb--to {
box-shadow: var(--shadow-sm), 0 0 0 1.5px var(--color-accent), 0 0 0 4px var(--color-accent-ring);
}

.slider-value {
grid-column: 2;
grid-row: 1;
display: inline-flex;
align-items: center;
justify-content: flex-end;
min-width: 3.5ch;
min-height: 1.75rem;
margin: 0;
padding: 0 var(--space-2);
border-radius: var(--radius-sm);
background: var(--color-bg-subtle);
color: var(--color-text);
font-size: var(--font-size-sm);
font-style: normal;
font-weight: var(--font-weight-medium);
font-variant-numeric: tabular-nums;
line-height: 1;
white-space: nowrap;
}

.slider-scale {
grid-column: 1;
grid-row: 2;
display: flex;
justify-content: space-between;
padding-inline: calc(var(--slider-thumb) / 2);
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
line-height: var(--line-height-tight);
pointer-events: none;
user-select: none;
}
@media (hover: hover){

.slider:hover:not(:has(input:disabled)) .slider-rail {
background: color-mix(in srgb, var(--color-text-secondary) 28%, var(--color-bg-subtle));
}

.slider:hover:not(:has(input:disabled)) .slider-fill {
background: var(--color-accent-hover);
}

}

.slider:has(input:focus-visible) .slider-thumb {
box-shadow: var(--shadow-sm), 0 0 0 1.5px var(--color-accent), 0 0 0 4px var(--color-accent-ring);
}

.form-group.is-error .slider-thumb,
.slider:has([aria-invalid="true"]) .slider-thumb {
box-shadow: var(--shadow-sm), 0 0 0 1.5px var(--color-danger);
}

.form-group.is-error .slider:has(input:focus-visible) .slider-thumb,
.slider:has([aria-invalid="true"]:focus-visible) .slider-thumb {
box-shadow: var(--shadow-sm), 0 0 0 1.5px var(--color-danger), 0 0 0 4px var(--color-danger-bg);
}

.slider.is-dragging .slider-thumb,
.slider:has(input:active:not(:disabled)) .slider-thumb {
transform: translate(-50%, -50%) scale(1.12);
}

.slider:has(input:disabled),
.form-group.is-disabled .slider {
cursor: not-allowed;
}

.slider:has(input:disabled) .slider-control,
.form-group.is-disabled .slider .slider-control {
opacity: var(--opacity-disabled);
}

.slider:has(input:disabled) .slider-value,
.form-group.is-disabled .slider .slider-value {
color: var(--color-text-tertiary);
}

.slider:has(input:disabled) input,
.form-group.is-disabled .slider input {
cursor: not-allowed;
}

.form-group.is-error .slider-fill,
.slider:has([aria-invalid="true"]) .slider-fill {
background: var(--color-danger);
}
@media (hover: hover){

.form-group.is-error .slider:hover:not(:has(input:disabled)) .slider-fill,
.slider:has([aria-invalid="true"]):hover:not(:has(input:disabled)) .slider-fill {
background: var(--color-danger);
}

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

.slider-thumb {
transition: none !important;
}

.slider.is-dragging .slider-thumb,
.slider:has(input:active:not(:disabled)) .slider-thumb {
transform: translate(-50%, -50%);
}

}
@media (forced-colors: active){

.slider-rail {
background: ButtonFace;
border: 1px solid ButtonText;
}

.slider-fill {
background: Highlight;
forced-color-adjust: none;
}

.slider-thumb {
background: Canvas;
box-shadow: none;
border: 1px solid ButtonText;
forced-color-adjust: none;
}

.slider:has(input:focus-visible) .slider-thumb {
border-color: Highlight;
box-shadow: none;
}

.form-group.is-error .slider-fill,
.slider:has([aria-invalid="true"]) .slider-fill {
background: Mark;
}

.slider-tick {
background: ButtonText;
}

}

.pop {
position: relative;
display: inline-block;
}

.pop-panel {
--radius-pad: var(--space-3);
--pop-from-x: 0px;
--pop-from-y: -6px;
position: absolute;
z-index: var(--z-modal);
box-sizing: border-box;
min-width: 16rem;
max-width: min(22rem, calc(100vw - 1.5rem));
padding: var(--space-3);
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--radius-out);
box-shadow: var(--shadow-float);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}

.pop-panel:not(.is-open) {
display: none;
}

.pop-panel.is-open {
position: fixed;
top: auto;
left: auto;
animation: pop-in var(--dur-base) var(--ease-emphasized) both;
}

@keyframes pop-in {
from {
opacity: 0;
transform: translate(var(--pop-from-x), var(--pop-from-y)) scale(0.96);
}
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce){

.pop-panel.is-open { animation: none; }

}

.pop-arrow {
position: absolute;
z-index: 1;
width: 8px;
height: 8px;
background: var(--color-surface);
border: 1px solid var(--color-border);
pointer-events: none;
}

.pop-panel[data-pop-placed="bottom"] .pop-arrow {
top: -5px;
transform: translateX(-50%) rotate(45deg);
border-right: 0;
border-bottom: 0;
}

.pop-panel[data-pop-placed="top"] .pop-arrow {
top: auto;
bottom: -5px;
transform: translateX(-50%) rotate(45deg);
border-left: 0;
border-top: 0;
}

.pop-panel[data-pop-placed="right"] .pop-arrow {
left: -5px;
transform: translateY(-50%) rotate(45deg);
border-top: 0;
border-right: 0;
}

.pop-panel[data-pop-placed="left"] .pop-arrow {
left: auto;
right: -5px;
transform: translateY(-50%) rotate(45deg);
border-bottom: 0;
border-left: 0;
}

.pop-panel--form {
--radius-pad: var(--space-4);
width: 20rem;
padding: var(--space-4);
}

.pop-title {
margin: 0 0 var(--space-1);
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-tight);
color: var(--color-text);
}

.pop-desc {
margin: 0 0 var(--space-4);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}

.pop-panel > .pop-desc:last-child,
.pop-panel > .pop-title + .pop-desc:last-child {
margin-bottom: 0;
}

.pop-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
margin: 0 0 var(--space-4);
}

.pop-head .pop-title {
margin: 0 0 var(--space-1);
}

.pop-head .pop-desc {
margin: 0;
}

.pop-head .btn-icon {
flex-shrink: 0;
margin-top: -2px;
}

.pop-panel--form .form-group {
margin-bottom: var(--space-4);
}

.pop-panel--form .form-group:last-child {
margin-bottom: 0;
}

.pop-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-2);
margin-top: var(--space-4);
}

.pop-sent {
display: none;
align-items: center;
gap: var(--space-2);
min-height: 2.5rem;
color: var(--color-success-text);
font-weight: var(--font-weight-medium);
}

.pop-panel.is-sent form,
.pop-panel.is-sent .pop-desc {
display: none;
}

.pop-panel.is-sent .pop-head {
margin-bottom: var(--space-2);
}

.pop-panel.is-sent .pop-sent {
display: flex;
}

.pop-person {
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0 0 var(--space-4);
}

.pop-person .pop-title,
.pop-person .pop-desc {
margin: 0;
}

.pop-scroll {
max-height: 12rem;
overflow: auto;
margin: 0;
padding-right: var(--space-1);
}

.pop-scroll > p {
margin: 0 0 var(--space-3);
}

.pop-scroll > p:last-child {
margin-bottom: 0;
}

.pop + .swap-kicker {
margin-top: var(--space-5);
}

.drop {
position: relative;
display: inline-flex;
vertical-align: middle;
}

.drop-chevron {
flex-shrink: 0;
width: 14px;
height: 14px;
color: var(--color-text-tertiary);
transition: transform var(--dur-slow) var(--ease-overshoot);
}

.drop.is-open .drop-chevron {
transform: rotate(180deg);
}

[data-drop-menu]:not(.is-open) {
display: none;
}

[data-drop-menu].is-open {
position: fixed;
top: auto;
right: auto;
bottom: auto;
z-index: var(--z-modal);
transform-origin: top left;
}

[data-drop-menu].is-open.is-end {
transform-origin: top right;
}

[data-drop-menu].is-open.is-top {
transform-origin: bottom left;
}

[data-drop-menu].is-open.is-top.is-end {
transform-origin: bottom right;
}

.drop-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 36px;
height: 36px;
padding: 0;
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-full);
background: var(--color-surface);
cursor: pointer;
transition:
background-color var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}

.drop-avatar:hover,
.drop.is-open .drop-avatar {
background: var(--color-bg);
border-color: var(--color-text-tertiary);
}

.drop-avatar:focus-visible {
outline: none;
border-color: var(--color-accent);
box-shadow: var(--focus-ring);
}

.drop-avatar:disabled,
.drop-avatar[aria-disabled="true"] {
opacity: var(--opacity-disabled);
cursor: default;
pointer-events: none;
}
@media (pointer: coarse){

.drop-avatar {
width: var(--touch-target-min);
height: var(--touch-target-min);
}

}

.drop-head {
display: flex;
align-items: center;
min-width: 0;
padding: var(--space-2) var(--space-3);
}

.drop-head .avatar-id {
min-width: 0;
max-width: 100%;
}

.drop-head-name {
display: flex;
flex-direction: column;
min-width: 0;
max-width: 100%;
line-height: var(--line-height-tight);
}

.drop-head-name strong,
.drop-head-name small {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.drop-head-name strong {
color: var(--color-text);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
}

.drop-head-name small {
margin-top: 2px;
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
}
@media (prefers-reduced-motion: reduce){

[data-drop-menu],
.overflow-dropdown,
.ctx-menu {
animation: none;
}

.drop-chevron {
transition: none;
transform: none !important;
}

}

.ctx {
position: relative;
}

[data-ctx] {
-webkit-touch-callout: none;
}

.ctx-menu {
position: fixed;
z-index: var(--z-modal);
transform-origin: 0 0;
animation: overflowFadeIn var(--transition-fast);
}

.ctx-menu:not(.is-open):not(.is-static) {
display: none;
}

.ctx-menu.is-static {
position: relative;
z-index: 0;
animation: none;
max-width: 22rem;
}

.ctx-sub {
position: relative;
}

.ctx-sub.is-open > [data-ctx-sub-open] {
background: var(--color-surface-hover);
}

.ctx-sub-chevron {
margin-left: auto;
color: var(--color-text-tertiary);
}

.ctx-sub-menu {
position: absolute;
top: calc(var(--space-1) * -1);
left: 100%;
z-index: 1;
margin-left: var(--space-1);
}

.ctx-sub-menu::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(var(--space-2) * -1);
width: var(--space-2);
}

.ctx-sub-menu.is-flip {
left: auto;
right: 100%;
margin-left: 0;
margin-right: var(--space-1);
}

.ctx-sub-menu.is-flip::before {
left: auto;
right: calc(var(--space-2) * -1);
}

.ctx-card {
display: flex;
align-items: center;
gap: var(--space-3);
box-sizing: border-box;
min-height: 5.5rem;
width: 100%;
max-width: 22rem;
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface);
box-shadow: none;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
text-align: left;
cursor: context-menu;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}

.ctx-card-icon {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: var(--radius-sm);
background: var(--color-bg-subtle);
color: var(--color-text-secondary);
}

.ctx-card-icon svg {
width: 16px;
height: 16px;
}

.ctx-card-copy {
display: flex;
min-width: 0;
flex: 1;
flex-direction: column;
gap: 2px;
white-space: normal;
}

.ctx-card-title {
color: var(--color-text);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
}

.ctx-card-hint {
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
line-height: var(--line-height-normal);
overflow-wrap: break-word;
white-space: normal;
}

.ctx.is-open .ctx-card {
border-color: var(--color-border);
background: var(--color-accent-subtle);
box-shadow: var(--focus-field);
}
@media (prefers-reduced-motion: reduce){

[data-drop-menu],
.overflow-dropdown,
.ctx-menu {
animation: none;
}

}

.tip-layer {
position: fixed;
z-index: var(--z-modal);
pointer-events: none;
}

.tip {
display: flex;
align-items: center;
gap: var(--space-2);
max-width: 18rem;
padding: 0.3125rem 0.5rem;
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
box-shadow: var(--shadow-lg);
opacity: 0;
filter: blur(5px);
will-change: transform, opacity, filter;
transition: opacity var(--dur-fast) var(--ease-emphasized), filter var(--dur-base) var(--ease-emphasized);
}

.tip-body {
min-width: 0;
overflow-wrap: anywhere;
}

.tip-kbd {
flex-shrink: 0;
background: color-mix(in srgb, var(--color-surface) 68%, var(--color-text));
color: var(--color-text);
}

.tip.is-in {
opacity: 1;
filter: blur(0);
}

.tip.is-out {
opacity: 0;
filter: blur(3px);
transition-duration: var(--dur-fast);
}
@media (prefers-reduced-motion: reduce){

.tip {
filter: none;
will-change: opacity;
transition: opacity var(--dur-instant) linear;
}

.tip.is-out {
filter: none;
transition-duration: var(--dur-instant);
}

}
@media (forced-colors: active){

.tip {
background: Canvas;
border: 1px solid CanvasText;
box-shadow: none;
filter: none;
}

.overflow-dropdown,
.ctx-menu {
background: Canvas;
border: 1px solid CanvasText;
box-shadow: none;
}

.overflow-item:hover,
.overflow-item:focus-visible,
.overflow-item[aria-expanded="true"] {
background: Highlight;
color: HighlightText;
forced-color-adjust: none;
}

.overflow-item:hover svg,
.overflow-item:focus-visible svg,
.overflow-item[aria-expanded="true"] svg {
color: HighlightText;
}

.ctx-card {
background: Canvas;
border: 1px solid CanvasText;
box-shadow: none;
}

}

kbd {
font-family: inherit;
}

.kbd {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 1.375rem;
height: 1.375rem;
padding: 0 0.375rem;
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-xs);
background: color-mix(in srgb, var(--color-surface) 88%, var(--color-text));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 1px 0 color-mix(in srgb, var(--color-text) 12%, transparent);
color: var(--color-text-secondary);
font-family: var(--font-sans);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.01em;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
pointer-events: none;
}

:where(html[data-theme="dark"]) .kbd {
background: color-mix(in srgb, var(--color-surface) 82%, var(--color-text));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 1px 0 rgba(0, 0, 0, 0.45);
}

.kbd-sm {
min-width: 1.125rem;
height: 1.125rem;
padding: 0 0.3125rem;
font-size: var(--font-size-2xs);
}

.kbd-row {
display: inline-flex;
align-items: center;
gap: var(--space-1);
vertical-align: middle;
}

.kbd-sep {
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
line-height: 1;
user-select: none;
}

.btn .kbd {
min-width: 1.125rem;
height: 1.125rem;
padding: 0 0.3125rem;
font-size: var(--font-size-2xs);
}

.btn-sm .kbd,
.btn-xs .kbd {
min-width: 1rem;
height: 1rem;
padding: 0 0.25rem;
}

.btn-lg .kbd {
min-width: 1.5rem;
height: 1.5rem;
padding: 0 0.4375rem;
font-size: var(--font-size-sm);
}

.btn-primary .kbd,
.btn-danger .kbd {
background: color-mix(in srgb, currentColor 14%, transparent);
border-color: color-mix(in srgb, currentColor 28%, transparent);
box-shadow: inset 0 1px 0 color-mix(in srgb, currentColor 18%, transparent);
color: inherit;
}

.overflow-item kbd,
.cmdk-item > kbd,
.cmdk-item > .kbd-row,
.cmdsearch-item > kbd,
.cmdsearch-item > .kbd-row {
margin-left: auto;
flex-shrink: 0;
}

.overflow-item kbd {
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-wide);
color: var(--color-text-secondary);
line-height: 1;
white-space: nowrap;
}

.cmdk-item kbd,
.cmdsearch-item kbd {
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-wide);
color: var(--color-text-secondary);
line-height: 1;
white-space: nowrap;
}
@media (forced-colors: active){

.kbd {
background: Canvas;
border: var(--border-width) solid CanvasText;
box-shadow: none;
color: CanvasText;
}

.btn-primary .kbd,
.btn-danger .kbd {
background: Canvas;
border-color: CanvasText;
box-shadow: none;
color: CanvasText;
}

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

.splay.is-seekable .splay-step:not(.is-active):hover,
.splay.is-seekable .splay-step:active,
.splay-btn:active,
.react-btn:active,
.react-item:hover,
.react-item:active,
.rbar-chip:active,
.rbar-chip:hover .rbar-emoji,
.rbar-add:active,
.rbar-opt:active,
.rbar-opt:hover,
.nbell-adj:active,
.nbell:active {
transform: none;
}

}
@media (max-width: 56.25rem){

.split { grid-template-columns: 1fr; }

}
@media (max-width: 40rem){

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

.otp-slot { max-width: 36px; }

}

:root {
--float-bg: var(--color-surface-float);
--float-border: var(--color-border);
--float-radius: var(--radius-float);
--float-shadow: var(--shadow-float);
--float-gap: 6px;
--float-in: var(--dur-fast) var(--ease-out);
--float-row: 32px;
}

.overflow-dropdown,
.ctx-menu,
.pop-panel,
.select-list.is-floating,
.ms-menu.is-floating,
.combo-list,
.datepick-cal,
.notification-panel,
.records-pop,
.records-picker,
.cal-panel,
.chart-tip {
background: var(--float-bg);
border: 1px solid var(--float-border);
border-radius: var(--float-radius);
box-shadow: var(--float-shadow);
}

.overflow-dropdown,
.ctx-menu {
padding: var(--space-1);
animation-duration: var(--dur-fast);
animation-timing-function: var(--ease-out);
}

.select.is-open:has(> .select-list.is-floating) .select-trigger {
animation: none;
}

.select-list.is-floating,
.ms-menu.is-floating {
grid-template-rows: 1fr;
transform: translateY(-4px) scale(0.98);
transition: opacity var(--float-in), transform var(--float-in);
}

.select.is-open .select-list.is-floating,
.ms.is-open .ms-menu.is-floating {
border-color: var(--float-border);
border-radius: var(--float-radius);
box-shadow: var(--float-shadow);
transform: none;
}

.is-floating {
position: fixed !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important;
height: auto;
color: inherit;
z-index: var(--z-dropdown);
}

.select-list.is-floating,
.ms-menu.is-floating {
transform-origin: top center;
}

.select-list.is-floating.is-flipped,
.ms-menu.is-floating.is-flipped {
transform-origin: bottom center;
}

@starting-style {
.select.is-open .select-list.is-floating,
.ms.is-open .ms-menu.is-floating {
opacity: 0;
transform: translateY(-4px) scale(0.98);
}
.select.is-open .select-list.is-floating.is-flipped,
.ms.is-open .ms-menu.is-floating.is-flipped {
transform: translateY(4px) scale(0.98);
}
}

.overflow-item,
.select-option,
.ms-option,
.form-group .ms-option,
.combo-option,
.records-menu-item {
min-height: var(--float-row);
padding: 0 var(--space-2);
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-normal);
color: var(--color-text);
}

.is-floating .select-option,
.is-floating .ms-option {
opacity: 1;
transform: none;
filter: none;
transition: background-color var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out);
}

.overflow-item:hover,
.overflow-item:focus-visible,
.overflow-item[aria-expanded="true"],
.select-option:hover,
.select-option:focus-visible,
.select-option.is-active,
.ms-option:hover,
.ms-option.is-active,
.combo-option:hover,
.combo-option.is-active,
.combo-option[aria-selected="true"],
.records-menu-item:hover,
.records-menu-item:focus-visible {
background: var(--color-bg-hover);
color: var(--color-text);
outline: none;
}

.select-option[aria-selected="true"],
.combo-option[aria-selected="true"],
.ms-option:has(input:checked) {
font-weight: var(--font-weight-medium);
}

.overflow-item svg,
.records-menu-item svg {
width: 16px;
height: 16px;
color: var(--color-text-tertiary);
}

.overflow-item--danger,
.overflow-item--danger svg {
color: var(--color-danger-text);
}

.overflow-label,
.select-group-label,
.ms-group-label,
.cmdk-heading {
padding: var(--space-2) var(--space-2) var(--space-1);
color: var(--color-text-tertiary);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-medium);
letter-spacing: 0;
text-transform: none;
}

.overflow-divider,
.select-group + .select-group {
border-color: var(--color-border-subtle);
}

.tip {
padding: 5px var(--space-2);
border: 0;
border-radius: var(--radius-sm);
background: var(--color-text);
color: var(--color-bg);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
box-shadow: var(--shadow-md);
filter: none;
transition: opacity var(--dur-fast) var(--ease-out);
}

.tip.is-out {
filter: none;
transition-duration: var(--dur-instant);
}

.tip-kbd {
background: color-mix(in srgb, var(--color-bg) 18%, transparent);
color: inherit;
}
@media (prefers-reduced-motion: reduce){

.select:not(.select-morph) .select-list,
.ms-menu {
transform: none;
transition: opacity var(--dur-instant) linear;
}

}

.form-group:has(> .select.is-open, > .combo.is-open, > .ms.is-open, > .datepick.is-open) > .form-hint {
opacity: 0;
transition: opacity var(--dur-instant) var(--ease-out);
}

.select-option + .select-option,
.combo-option + .combo-option,
.ms-option + .ms-option,
.overflow-item + .overflow-item {
margin-top: 1px;
}
@media screen{

[data-print-only] {
display: none !important;
}

}
@media print{

:root,
html[data-theme="dark"] {
--color-scheme: light;
--color-bg: #ffffff;
--color-bg-subtle: #f0f0f3;
--color-surface: #ffffff;
--color-surface-raised: #ffffff;
--color-surface-float: #ffffff;
--color-surface-hover: #ffffff;
--color-border: rgba(17, 17, 20, 0.12);
--color-border-subtle: rgba(17, 17, 20, 0.08);
--color-border-strong: rgba(17, 17, 20, 0.2);
--color-border-control: rgba(17, 17, 20, 0.17);
--color-text: #000000;
--color-text-secondary: var(--gray-600);
--color-text-tertiary: var(--gray-500);
--color-accent: #0a5cff;
--color-accent-subtle: rgba(10, 92, 255, 0.08);
--color-on-accent: #ffffff;
--color-primary: #111114;
--color-on-primary: #ffffff;
--color-tint: 10%;
--color-tint-border: 28%;
--color-success-text: #12663a;
--color-warning-text: #8f5600;
--color-danger-text: #b42318;
--color-info-text: #1d4ed8;
--viz-1: #0a5cff;
--viz-2: #eb6834;
--viz-3: #1baf7a;
--viz-4: #eda100;
--viz-5: #e87ba4;
--viz-6: #008300;
--viz-7: #4a3aa7;
--viz-8: #e34948;
--viz-div-mid: var(--gray-100);
--viz-div-pos: #2a78d6;
--viz-grid: var(--gray-100);
--viz-axis: var(--gray-200);
--shadow-panel: none;
--shadow-control: none;
--shadow-lift: none;
--shadow-float: none;
--shadow-xs: none;
--shadow-sm: none;
--shadow: none;
--shadow-md: none;
--shadow-lg: none;
--shadow-xl: none;
color-scheme: light;
}

html,
body {
background: #ffffff !important;
color: #000000;
}

.app-sidebar,
.app-header,
.sidebar-backdrop,
.skip-link,
.offline-bar,
.toast-container,
.cmdk-overlay,
.client-view-bar,
.page-head-actions,
.fbar,
.pagination,
.chart-tip,
[data-print-hide] {
display: none !important;
}

.card {
box-shadow: none;
}

.data-table thead,
.dgrid-table thead {
display: table-header-group;
}

.data-table tr,
.dgrid-table tr {
break-inside: avoid;
}

.chart,
.chart *,
[data-chart],
[data-chart] * {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}

}