@oleksandr-94/aura-css 0.1.0

package/dist/aura-neu.min.css

@@ -0,0 +1 @@
+@layer base, components, a11y;:root{--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-pill: 999px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--space-8: 32px;--font: "Plus Jakarta Sans", system-ui, sans-serif;--fs-xs: 12px;--fs-sm: 13px;--fs-md: 14px;--fs-lg: 16px;--fs-xl: 20px;--blur: 20px;--gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);--gradient-tint: #ffd23f;--z-dropdown: 1000;--z-sticky: 1020;--z-modal: 1050;--z-toast: 1080}:root,[data-theme=aura-dark]{--primary: #00BD7D;--on-primary: #0f1a14;--primary-container: color-mix(in srgb, #00BD7D 16%, transparent);--on-primary-container: #00BD7D;--secondary: #3B82F6;--on-secondary: #ffffff;--secondary-container: color-mix(in srgb, #3B82F6 16%, transparent);--on-secondary-container: #3B82F6;--accent: #12E0C0;--on-accent: #0f1a14;--accent-container: color-mix(in srgb, #12E0C0 16%, transparent);--on-accent-container: #12E0C0;--success: #16A34A;--on-success: #ffffff;--success-container: color-mix(in srgb, #16A34A 16%, transparent);--on-success-container: #16A34A;--warning: #E0913A;--on-warning: #0f1a14;--warning-container: color-mix(in srgb, #E0913A 16%, transparent);--on-warning-container: #E0913A;--error: #EA4B5E;--on-error: #ffffff;--error-container: color-mix(in srgb, #EA4B5E 16%, transparent);--on-error-container: #EA4B5E;--info: #3B82F6;--on-info: #ffffff;--info-container: color-mix(in srgb, #3B82F6 16%, transparent);--on-info-container: #3B82F6;--surface: #0e1526;--surface-1: #141d33;--surface-2: #1b2540;--on-surface: #e7ecf5;--on-surface-muted: rgba(231, 236, 245, 0.62);--outline: rgba(255, 255, 255, 0.14);--outline-strong: rgba(255, 255, 255, 0.24);--glass-film: rgba(255, 255, 255, 0.06);--glass-film-2: rgba(255, 255, 255, 0.1);--tip-bg: rgba(238, 244, 250, 0.96);--tip-text: #0e1526;--shadow-1: 0 8px 32px rgba(0, 0, 0, 0.4);--shadow-2: 0 16px 44px rgba(0, 0, 0, 0.5)}[data-theme=aura-light]{--primary: #00A86B;--on-primary: #ffffff;--primary-container: color-mix(in srgb, #00A86B 16%, transparent);--on-primary-container: #00A86B;--secondary: #2563EB;--on-secondary: #ffffff;--secondary-container: color-mix(in srgb, #2563EB 16%, transparent);--on-secondary-container: #2563EB;--accent: #0FB89B;--on-accent: #0f1a14;--accent-container: color-mix(in srgb, #0FB89B 16%, transparent);--on-accent-container: #0FB89B;--success: #16A34A;--on-success: #ffffff;--success-container: color-mix(in srgb, #16A34A 16%, transparent);--on-success-container: #16A34A;--warning: #D97706;--on-warning: #ffffff;--warning-container: color-mix(in srgb, #D97706 16%, transparent);--on-warning-container: #D97706;--error: #DC2626;--on-error: #ffffff;--error-container: color-mix(in srgb, #DC2626 16%, transparent);--on-error-container: #DC2626;--info: #2563EB;--on-info: #ffffff;--info-container: color-mix(in srgb, #2563EB 16%, transparent);--on-info-container: #2563EB;--surface: #eef3f2;--surface-1: #ffffff;--surface-2: #f5faf8;--on-surface: #10231b;--on-surface-muted: rgba(16, 35, 27, 0.62);--outline: rgba(12, 70, 50, 0.16);--outline-strong: rgba(12, 70, 50, 0.3);--glass-film: rgba(255, 255, 255, 0.55);--glass-film-2: rgba(255, 255, 255, 0.7);--tip-bg: rgba(16, 24, 40, 0.95);--tip-text: #eef4fa;--shadow-1: 0 10px 30px rgba(10, 90, 60, 0.14);--shadow-2: 0 16px 40px rgba(10, 90, 60, 0.18)}@layer base{*,*::before,*::after{box-sizing:border-box}}@layer a11y{@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:1ms;animation-iteration-count:1;transition-duration:1ms;scroll-behavior:auto}}.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}}@layer components{.btn{--_c: var(--primary);--_bg: var(--_c);--_fg: var(--on-primary);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font:inherit;font-weight:700;font-size:var(--fs-md);line-height:1;padding:10px 18px;border-radius:var(--radius-md);cursor:pointer;transition:filter .15s ease,transform .05s ease,box-shadow .15s ease;background:var(--_bg);color:var(--_fg);border:none;box-shadow:3px 3px 7px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 55%, #000),-3px -3px 7px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 82%, #fff)}.btn:hover{filter:brightness(1.06)}.btn:active{transform:none;box-shadow:inset 2px 2px 5px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 55%, #000),inset -2px -2px 5px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 82%, #fff)}.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.btn:disabled,.btn.btn--disabled{opacity:.5;cursor:not-allowed;filter:none}.btn.btn--secondary{--_c: var(--secondary);--_fg: var(--on-secondary)}.btn.btn--accent{--_c: var(--accent);--_fg: var(--on-accent)}.btn.btn--success{--_c: var(--success);--_fg: var(--on-success)}.btn.btn--warning{--_c: var(--warning);--_fg: var(--on-warning)}.btn.btn--error{--_c: var(--error);--_fg: var(--on-error)}.btn.btn--info{--_c: var(--info);--_fg: var(--on-info)}.btn.btn--gradient{--_bg: linear-gradient(135deg, color-mix(in srgb, var(--_c) 62%, var(--gradient-tint)) 0%, var(--_c) 48%, color-mix(in srgb, var(--_c) 84%, #000) 100%);--_shadow-color: var(--_c)}.btn.btn--ghost{background:rgba(0,0,0,0);color:var(--on-surface);border:1px solid var(--outline-strong);box-shadow:none}.btn.btn--ghost:hover{background:color-mix(in srgb, var(--on-surface) 8%, transparent);filter:none}.btn.btn--ghost:active{box-shadow:none;transform:translateY(1px)}.btn.btn--outline{background:rgba(0,0,0,0);color:var(--_c);border:1px solid var(--_c);box-shadow:none}.btn.btn--outline:hover{background:color-mix(in srgb, var(--_c) 12%, transparent);filter:none}.btn.btn--outline:active{box-shadow:none;transform:translateY(1px)}.btn.btn--sm{padding:7px 12px;font-size:var(--fs-sm);border-radius:var(--radius-sm)}.btn.btn--lg{padding:13px 22px;font-size:var(--fs-lg)}.btn.btn--block{display:flex;width:100%}}@layer components{.card{--_c: var(--primary);background:var(--surface);border:none;box-shadow:8px 8px 20px color-mix(in srgb, var(--surface) 45%, #000),-8px -8px 20px color-mix(in srgb, var(--surface) 88%, #fff);border-radius:var(--radius-lg);padding:var(--space-6);color:var(--on-surface);display:flex;flex-direction:column;gap:var(--space-4)}.card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.card__title{margin:0;font-size:var(--fs-xl);font-weight:800}.card__body{margin:0;color:var(--on-surface-muted);font-size:var(--fs-md);line-height:1.5}.card__actions{display:flex;gap:var(--space-2);margin-top:auto}.card--primary{--_c: var(--primary)}.card--success{--_c: var(--success)}.card--warning{--_c: var(--warning)}.card--error{--_c: var(--error)}.card--info{--_c: var(--info)}.card--primary,.card--success,.card--warning,.card--error,.card--info{border-inline-start:3px solid var(--_c)}.card--gradient{background:linear-gradient(135deg, color-mix(in srgb, var(--_c) 62%, var(--gradient-tint)) 0%, var(--_c) 48%, color-mix(in srgb, var(--_c) 84%, #000) 100%);border:none;color:#fff}.card--gradient .card__body{color:hsla(0,0%,100%,.82)}}@layer components{.field{display:flex;flex-direction:column;gap:var(--space-2)}.field__label{font-size:var(--fs-xs);font-weight:600;color:var(--on-surface)}.field__label--required::after{content:" *";color:var(--error)}.field__hint{font-size:var(--fs-xs);color:var(--on-surface-muted)}.field__hint--error{color:var(--error)}.field__hint--success{color:var(--success)}.input,.select,.textarea{background:var(--surface);border:none;box-shadow:inset 2px 2px 4px color-mix(in srgb, var(--surface) 40%, #000),inset -2px -2px 4px color-mix(in srgb, var(--surface) 92%, #fff);font:inherit;font-size:var(--fs-md);color:var(--on-surface);width:100%;padding:10px 14px;border-radius:var(--radius-md);transition:border-color .15s ease}.input::placeholder,.select::placeholder,.textarea::placeholder{color:var(--on-surface-muted)}.input:focus-visible,.select:focus-visible,.textarea:focus-visible{outline:2px solid var(--primary);outline-offset:1px}.input:disabled,.select:disabled,.textarea:disabled{opacity:.5;cursor:not-allowed}.textarea{min-height:84px;resize:vertical}.select{appearance:none;-webkit-appearance:none;padding-inline-end:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%238b93a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.input--error,.select--error,.textarea--error{border-color:var(--error)}.input--error:focus-visible,.select--error:focus-visible,.textarea--error:focus-visible{outline-color:var(--error)}.input--success,.select--success,.textarea--success{border-color:var(--success)}.input--success:focus-visible,.select--success:focus-visible,.textarea--success:focus-visible{outline-color:var(--success)}.input--sm,.select--sm,.textarea--sm{padding-block:7px;padding-inline:11px;font-size:var(--fs-sm);border-radius:var(--radius-sm)}.input--lg,.select--lg,.textarea--lg{padding-block:13px;padding-inline:16px;font-size:var(--fs-lg)}.select--sm,.select--lg{padding-inline-end:34px}}@layer components{.badge{--_bg: color-mix(in srgb, var(--on-surface) 10%, transparent);--_fg: var(--on-surface);display:inline-flex;align-items:center;gap:6px;padding:3px 10px;font-size:var(--fs-xs);font-weight:700;line-height:1.5;white-space:nowrap;border-radius:var(--radius-pill);border:1px solid rgba(0,0,0,0);background:var(--_bg);color:var(--_fg);box-shadow:2px 2px 5px color-mix(in srgb, var(--surface) 55%, #000),-2px -2px 5px color-mix(in srgb, var(--surface) 88%, #fff)}.badge.badge--primary{--_bg: var(--primary-container);--_fg: var(--on-primary-container)}.badge.badge--secondary{--_bg: var(--secondary-container);--_fg: var(--on-secondary-container)}.badge.badge--accent{--_bg: var(--accent-container);--_fg: var(--on-accent-container)}.badge.badge--success{--_bg: var(--success-container);--_fg: var(--on-success-container)}.badge.badge--warning{--_bg: var(--warning-container);--_fg: var(--on-warning-container)}.badge.badge--error{--_bg: var(--error-container);--_fg: var(--on-error-container)}.badge.badge--info{--_bg: var(--info-container);--_fg: var(--on-info-container)}.badge.badge--outline{background:rgba(0,0,0,0);border-color:color-mix(in srgb, var(--_fg) 45%, transparent);box-shadow:none}.badge.badge--sm{padding:2px 8px;font-size:11px}.badge.badge--lg{padding:5px 13px;font-size:var(--fs-sm)}.badge__dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}}@layer components{.alert{--_c: var(--primary);display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--radius-md);background:color-mix(in srgb, var(--_c) 13%, var(--surface-1));color:var(--on-surface);border:1px solid var(--outline);border-left:3px solid var(--_c);font-size:var(--fs-md);box-shadow:2px 2px 5px color-mix(in srgb, var(--surface) 55%, #000),-2px -2px 5px color-mix(in srgb, var(--surface) 88%, #fff)}.alert.alert--success{--_c: var(--success)}.alert.alert--warning{--_c: var(--warning)}.alert.alert--error{--_c: var(--error)}.alert.alert--info{--_c: var(--info)}.alert__icon{color:var(--_c);font-size:18px;line-height:1.35;flex:none}.alert__title{font-weight:700}.alert__body{color:var(--on-surface-muted);font-size:var(--fs-sm);margin-top:2px}}@layer components{.switch{--_c: var(--primary);position:relative;display:inline-flex;flex:none;width:46px;height:26px;vertical-align:middle;cursor:pointer}.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}.switch__track{position:absolute;inset:0;border-radius:var(--radius-pill);transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;background:var(--surface);border:none;box-shadow:inset 2px 2px 4px color-mix(in srgb, var(--surface) 40%, #000),inset -2px -2px 4px color-mix(in srgb, var(--surface) 92%, #fff)}.switch__thumb{position:absolute;top:4px;left:4px;width:18px;height:18px;border-radius:50%;background:var(--on-surface-muted);transition:transform .2s ease,background .2s ease}.switch input:checked~.switch__track{--_bg: var(--_c);--_fg: #fff;background:var(--_bg);color:var(--_fg);border:none;box-shadow:3px 3px 7px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 55%, #000),-3px -3px 7px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 82%, #fff)}.switch input:checked~.switch__thumb{transform:translateX(20px);background:#fff}.switch input:focus-visible~.switch__track{outline:2px solid var(--_c);outline-offset:2px}.switch input:disabled~.switch__track,.switch input:disabled~.switch__thumb{opacity:.5}.switch--success{--_c: var(--success)}.switch--warning{--_c: var(--warning)}.switch--error{--_c: var(--error)}.switch--sm{width:38px;height:22px}.switch--sm .switch__thumb{width:14px;height:14px}.switch--sm input:checked~.switch__thumb{transform:translateX(16px)}.switch--lg{width:56px;height:32px}.switch--lg .switch__thumb{width:24px;height:24px}.switch--lg input:checked~.switch__thumb{transform:translateX(24px)}}@layer components{.checkbox{--_c: var(--primary);appearance:none;-webkit-appearance:none;margin:0;flex:none;width:18px;height:18px;border-radius:var(--radius-sm);cursor:pointer;position:relative;vertical-align:middle;transition:background .15s ease,border-color .15s ease;background:var(--surface);border:none;box-shadow:inset 2px 2px 4px color-mix(in srgb, var(--surface) 40%, #000),inset -2px -2px 4px color-mix(in srgb, var(--surface) 92%, #fff)}.checkbox:checked,.checkbox:indeterminate{--_bg: var(--_c);--_fg: #fff;background:var(--_bg);color:var(--_fg);border:none;box-shadow:3px 3px 7px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 55%, #000),-3px -3px 7px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 82%, #fff)}.checkbox:checked::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%, -58%) rotate(45deg)}.checkbox:indeterminate::after{content:"";position:absolute;left:3px;right:3px;top:calc(50% - 1px);height:2px;background:#fff;border-radius:1px}.checkbox:focus-visible{outline:2px solid var(--_c);outline-offset:2px}.checkbox:disabled{opacity:.5;cursor:not-allowed}.checkbox.checkbox--success{--_c: var(--success)}.checkbox.checkbox--warning{--_c: var(--warning)}.checkbox.checkbox--error{--_c: var(--error)}}@layer components{.radio{--_c: var(--primary);appearance:none;-webkit-appearance:none;margin:0;flex:none;width:18px;height:18px;border-radius:50%;cursor:pointer;position:relative;vertical-align:middle;transition:background .15s ease,border-color .15s ease;background:var(--surface);border:none;box-shadow:inset 2px 2px 4px color-mix(in srgb, var(--surface) 40%, #000),inset -2px -2px 4px color-mix(in srgb, var(--surface) 92%, #fff)}.radio:checked{--_bg: var(--_c);--_fg: #fff;background:var(--_bg);color:var(--_fg);border:none;box-shadow:3px 3px 7px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 55%, #000),-3px -3px 7px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 82%, #fff)}.radio:checked::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}.radio:focus-visible{outline:2px solid var(--_c);outline-offset:2px}.radio:disabled{opacity:.5;cursor:not-allowed}.radio.radio--success{--_c: var(--success)}.radio.radio--warning{--_c: var(--warning)}.radio.radio--error{--_c: var(--error)}}@layer components{.range{--_c: var(--primary);width:100%;height:22px;accent-color:var(--_c);cursor:pointer}.range:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.range:disabled{opacity:.5;cursor:not-allowed}.range.range--success{--_c: var(--success)}.range.range--warning{--_c: var(--warning)}.range.range--error{--_c: var(--error)}.range.range--sm{height:16px}.range.range--lg{height:28px}}@layer components{.file{--_c: var(--primary);max-width:100%;font:inherit;font-size:var(--fs-sm);color:var(--on-surface-muted);cursor:pointer}.file::file-selector-button{font:inherit;font-weight:700;font-size:var(--fs-sm);margin-inline-end:12px;padding:8px 14px;border:none;border-radius:var(--radius-md);background:var(--_c);color:var(--on-primary);cursor:pointer;transition:filter .15s ease}.file::file-selector-button:hover{filter:brightness(1.06)}.file:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-md)}.file:disabled{opacity:.5;cursor:not-allowed}.file.file--ghost::file-selector-button{background:rgba(0,0,0,0);color:var(--on-surface);border:1px solid var(--outline-strong)}}@layer components{.rating{--_c: var(--warning);display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}.rating input{position:absolute;width:1px;height:1px;opacity:0;margin:0}.rating label{font-size:24px;line-height:1;color:var(--outline-strong);cursor:pointer;transition:color .12s ease,transform .12s ease}.rating label:hover{transform:scale(1.1)}.rating input:checked~label,.rating label:hover,.rating label:hover~label{color:var(--_c)}.rating input:focus-visible+label{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}.rating.rating--sm label{font-size:18px}.rating.rating--lg label{font-size:32px}}@layer components{.tabs{display:inline-flex;gap:4px;padding:4px;border-radius:var(--radius-md);background:var(--surface);border:none;box-shadow:inset 2px 2px 4px color-mix(in srgb, var(--surface) 40%, #000),inset -2px -2px 4px color-mix(in srgb, var(--surface) 92%, #fff)}.tabs--block{display:flex;width:100%}.tabs--block .tab{flex:1}.tab{font:inherit;font-weight:700;font-size:var(--fs-sm);padding:8px 14px;border:none;border-radius:var(--radius-sm);background:rgba(0,0,0,0);color:var(--on-surface-muted);cursor:pointer;white-space:nowrap;transition:color .15s ease}.tab:hover:not(.tab--active){color:var(--on-surface)}.tab:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.tab--active{--_bg: var(--primary);--_fg: var(--on-primary);background:var(--_bg);color:var(--_fg);border:none;box-shadow:3px 3px 7px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 55%, #000),-3px -3px 7px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 82%, #fff);color:var(--_fg)}.tab-panel{margin-top:var(--space-4)}.tabs--underline{gap:4px;padding:0;background:none;border:none;border-bottom:1px solid var(--outline);border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.tabs--underline .tab{border-radius:0;padding:10px 14px;border-bottom:2px solid rgba(0,0,0,0);margin-bottom:-1px}.tabs--underline .tab--active{background:none;box-shadow:none;color:var(--primary);border-bottom-color:var(--primary)}.tabs--lift{gap:4px;padding:0;background:none;border:none;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.tabs--lift .tab{position:relative;z-index:0;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:10px 16px;border:1px solid rgba(0,0,0,0);border-bottom:none;margin-bottom:-1px}.tabs--lift .tab--active{z-index:1;background:var(--surface-1);box-shadow:none;color:var(--on-surface);border-color:var(--outline)}.tab-panels{padding-top:var(--space-4)}.tab-panels .tab-panel{margin-top:0}.tabs--lift+.tab-panels{padding:var(--space-6);background:var(--surface-1);border:1px solid var(--outline);border-radius:0 0 var(--radius-lg) var(--radius-lg)}.tab-card{background:var(--surface-1);border:1px solid var(--outline);border-radius:var(--radius-lg);overflow:hidden}.tab-card>.tabs{display:flex;background:none;border:none;border-bottom:1px solid var(--outline);border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:var(--space-2)}.tab-card>.tabs--underline{padding:var(--space-1) var(--space-2) 0}.tab-card>.tab-panels{margin-top:0;padding:var(--space-6)}.tabs--sm .tab{padding:5px 10px;font-size:var(--fs-xs)}.tabs--lg .tab{padding:11px 18px;font-size:var(--fs-md)}}@layer components{.table{width:100%;border-collapse:collapse;font-size:var(--fs-md);color:var(--on-surface)}.table th,.table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--outline)}.table th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--on-surface-muted)}.table tbody tr:last-child td{border-bottom:none}.table tbody tr:hover{background:color-mix(in srgb, var(--on-surface) 5%, transparent)}.table--zebra tbody tr:nth-child(even){background:color-mix(in srgb, var(--on-surface) 4%, transparent)}.table--compact th,.table--compact td{padding:7px 10px}}@layer components{.group,.btn-group{display:inline-flex;align-items:stretch;border-radius:var(--radius-md)}.group>*,.btn-group>*{position:relative;border-radius:0;box-shadow:none}.group>:not(:first-child),.btn-group>:not(:first-child){margin-inline-start:-1px}.group>:hover,.group>:focus-visible,.group>:focus-within,.btn-group>:hover,.btn-group>:focus-visible,.btn-group>:focus-within{z-index:1}.group>:first-child,.btn-group>:first-child{border-start-start-radius:var(--radius-md);border-end-start-radius:var(--radius-md)}.group>:last-child,.btn-group>:last-child{border-start-end-radius:var(--radius-md);border-end-end-radius:var(--radius-md)}.group>.input,.group>.select,.btn-group>.input,.btn-group>.select{flex:1;width:auto;min-width:0}.group--block,.btn-group--block{display:flex;width:100%}.group--block>*,.btn-group--block>*{flex:1}}@layer components{.segmented{display:inline-flex;gap:4px;padding:4px;border-radius:var(--radius-md);background:var(--surface);border:none;box-shadow:inset 2px 2px 4px color-mix(in srgb, var(--surface) 40%, #000),inset -2px -2px 4px color-mix(in srgb, var(--surface) 92%, #fff)}.segmented--block{display:flex;width:100%}.segmented--block .segmented__option{flex:1}.segmented__option{position:relative;display:inline-flex;flex:none}.segmented__option input{position:absolute;inset:0;width:100%;margin:0;opacity:0;cursor:pointer}.segmented__option span{flex:1;text-align:center;padding:8px 14px;border-radius:var(--radius-sm);font-weight:700;font-size:var(--fs-sm);color:var(--on-surface-muted);white-space:nowrap;-webkit-user-select:none;user-select:none;transition:color .15s ease}.segmented__option input:checked+span{--_c: var(--primary);--_bg: var(--_c);--_fg: var(--on-primary);background:var(--_bg);color:var(--_fg);border:none;box-shadow:3px 3px 7px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 55%, #000),-3px -3px 7px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 82%, #fff);color:var(--_fg)}.segmented__option input:focus-visible+span{outline:2px solid var(--primary);outline-offset:2px}}@layer components{.progress{--_c: var(--primary);display:block;width:100%;height:8px;border-radius:var(--radius-pill);overflow:hidden;background:var(--surface);border:none;box-shadow:inset 2px 2px 4px color-mix(in srgb, var(--surface) 40%, #000),inset -2px -2px 4px color-mix(in srgb, var(--surface) 92%, #fff)}.progress__bar{display:block;height:100%;border-radius:inherit;background:var(--_c);transition:width .3s ease}.progress--success{--_c: var(--success)}.progress--warning{--_c: var(--warning)}.progress--error{--_c: var(--error)}.spinner{display:inline-block;width:28px;height:28px;border:3px solid var(--outline-strong);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}.spinner--sm{width:18px;height:18px;border-width:2px}.spinner--lg{width:40px;height:40px;border-width:4px}@keyframes spin{to{transform:rotate(360deg)}}}@layer components{.tooltip{position:relative;display:inline-flex}.tooltip__text{visibility:hidden;opacity:0;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--tip-bg);color:var(--tip-text);font-size:var(--fs-xs);font-weight:600;padding:6px 10px;border-radius:var(--radius-sm);box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:var(--z-dropdown);transition:opacity .15s ease,visibility .15s ease}.tooltip__text::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid rgba(0,0,0,0);border-top-color:var(--tip-bg)}.tooltip:hover .tooltip__text,.tooltip:focus-within .tooltip__text{visibility:visible;opacity:1}.tooltip--bottom .tooltip__text{bottom:auto;top:calc(100% + 8px)}.tooltip--bottom .tooltip__text::after{top:auto;bottom:100%;border-top-color:rgba(0,0,0,0);border-bottom-color:var(--tip-bg)}}@layer components{.modal-overlay{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:20px;background:rgba(4,10,20,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}.modal-overlay[data-state=open]{opacity:1;visibility:visible}.modal{width:100%;max-width:440px;padding:24px;border-radius:var(--radius-lg);background:var(--surface-1);border:1px solid var(--outline);box-shadow:var(--shadow-2);transform:translateY(10px) scale(0.98);transition:transform .2s ease}.modal-overlay[data-state=open] .modal{transform:none}.modal__title{margin:0 0 8px;font-size:var(--fs-xl);font-weight:800}.modal__body{margin:0 0 20px;color:var(--on-surface-muted);font-size:var(--fs-md);line-height:1.5}.modal__actions{display:flex;gap:10px;justify-content:flex-end}}@layer components{.dropdown{position:relative;display:inline-block}.dropdown__menu{position:absolute;top:calc(100% + 6px);left:0;z-index:var(--z-dropdown);min-width:180px;padding:6px;border-radius:var(--radius-md);background:var(--surface);border:none;box-shadow:8px 8px 20px color-mix(in srgb, var(--surface) 45%, #000),-8px -8px 20px color-mix(in srgb, var(--surface) 88%, #fff);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility .15s ease}.dropdown__menu--end{left:auto;right:0}.dropdown[data-state=open] .dropdown__menu{opacity:1;visibility:visible;transform:none}.dropdown__item{display:block;width:100%;text-align:left;padding:9px 12px;border:none;border-radius:var(--radius-sm);background:none;color:var(--on-surface);font:inherit;font-size:var(--fs-sm);font-weight:600;text-decoration:none;cursor:pointer}.dropdown__item:hover{background:color-mix(in srgb, var(--on-surface) 8%, transparent)}.dropdown__divider{height:1px;margin:6px 4px;background:var(--outline)}.dropdown__caret{display:inline-block;width:8px;height:8px;margin-inline-start:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;border-bottom-right-radius:2px;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}.dropdown[data-state=open] .dropdown__caret{transform:translateY(1px) rotate(-135deg)}}@layer components{.avatar{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;overflow:hidden;font-weight:700;font-size:var(--fs-md);color:var(--on-surface);background:color-mix(in srgb, var(--primary) 22%, var(--surface-2));border:2px solid var(--surface-1)}.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.avatar--sm{width:30px;height:30px;font-size:var(--fs-xs)}.avatar--lg{width:56px;height:56px;font-size:var(--fs-xl)}.avatar--square{border-radius:var(--radius-md)}.avatar__status{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--on-surface-muted);border:2px solid var(--surface-1)}.avatar__status--online{background:var(--success)}.avatar__status--busy{background:var(--error)}.avatar-group{display:inline-flex}.avatar-group .avatar:not(:first-child){margin-left:-12px}}@layer components{.accordion{display:flex;flex-direction:column;gap:8px}.accordion__item{border-radius:var(--radius-md);overflow:hidden;background:var(--surface);border:none;box-shadow:8px 8px 20px color-mix(in srgb, var(--surface) 45%, #000),-8px -8px 20px color-mix(in srgb, var(--surface) 88%, #fff)}.accordion__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-weight:700;font-size:var(--fs-md);cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}.accordion__head::-webkit-details-marker{display:none}.accordion__head::after{content:"";flex:none;width:9px;height:9px;margin-inline-start:8px;border-right:2px solid var(--on-surface-muted);border-bottom:2px solid var(--on-surface-muted);border-bottom-right-radius:2px;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}.accordion__head:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}.accordion__item[open]>.accordion__head::after{transform:translateY(2px) rotate(-135deg)}.accordion__body{padding:0 16px 16px;color:var(--on-surface-muted);font-size:var(--fs-sm);line-height:1.5}}@layer components{.toast-container{position:fixed;top:20px;right:20px;z-index:var(--z-toast);display:flex;flex-direction:column;gap:10px;width:min(360px,100vw - 40px);pointer-events:none}.toast-container--bottom{top:auto;bottom:20px}.toast{--_c: var(--primary);pointer-events:auto;display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:var(--radius-md);background:var(--surface-1);border:1px solid var(--outline);border-left:3px solid var(--_c);box-shadow:var(--shadow-2);font-size:var(--fs-sm);opacity:0;transform:translateX(12px);transition:opacity .2s ease,transform .2s ease}.toast[data-state=open]{opacity:1;transform:none}.toast--success{--_c: var(--success)}.toast--warning{--_c: var(--warning)}.toast--error{--_c: var(--error)}.toast--info{--_c: var(--info)}.toast__body{flex:1;color:var(--on-surface);line-height:1.4}.toast__close{flex:none;border:none;background:none;color:var(--on-surface-muted);font-size:18px;line-height:1;cursor:pointer;padding:0 2px}.toast__close:hover{color:var(--on-surface)}}@layer components{.pagination{display:inline-flex;gap:4px}.pagination__item{min-width:36px;height:36px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:1px solid var(--outline);background:var(--surface-1);color:var(--on-surface);font:inherit;font-size:var(--fs-sm);font-weight:600;text-decoration:none;cursor:pointer}.pagination__item:hover:not(.pagination__item--active):not(:disabled):not(.pagination__item--disabled){background:color-mix(in srgb, var(--on-surface) 8%, transparent)}.pagination__item:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.pagination__item:disabled,.pagination__item.pagination__item--disabled{opacity:.5;cursor:not-allowed}.pagination__item--active{--_bg: var(--primary);--_fg: var(--on-primary);background:var(--_bg);color:var(--_fg);border:none;box-shadow:3px 3px 7px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 55%, #000),-3px -3px 7px color-mix(in srgb, var(--_shadow-color, var(--_bg)) 82%, #fff);border-color:rgba(0,0,0,0)}.pagination--joined{gap:0}.pagination--joined .pagination__item{position:relative;border-radius:0}.pagination--joined .pagination__item:not(:first-child){margin-inline-start:-1px}.pagination--joined .pagination__item:hover:not(:disabled):not(.pagination__item--disabled),.pagination--joined .pagination__item:focus-visible,.pagination--joined .pagination__item--active{z-index:1}.pagination--joined .pagination__item:first-child{border-start-start-radius:var(--radius-md);border-end-start-radius:var(--radius-md)}.pagination--joined .pagination__item:last-child{border-start-end-radius:var(--radius-md);border-end-end-radius:var(--radius-md)}.pagination--sm .pagination__item{min-width:30px;height:30px;font-size:var(--fs-xs)}.pagination__ellipsis{min-width:24px;height:36px;display:inline-flex;align-items:flex-end;justify-content:center;padding-bottom:6px;color:var(--on-surface-muted);-webkit-user-select:none;user-select:none}.pagination--sm .pagination__ellipsis{height:30px}}