@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
:root,
.neu {
  --neu-bg: #ECEEF2;
  --neu-bg-alt: #E6E8EC;
  --neu-bg-raised: #F6F7F9;
  --neu-accent: #4A7BF7;
  --neu-accent-hover: #3A6BE7;
  --neu-accent-active: #2E5BD7;
  --neu-accent-muted: rgba(74, 123, 247, 0.15);
  --neu-on-accent: #FFFFFF;
  --neu-text: #2C3038;
  --neu-text-secondary: #5A6070;
  --neu-text-tertiary: #8890A0;
  --neu-text-disabled: #B0B6C0;
  --neu-success: #48A868;
  --neu-success-light: #D8EEE0;
  --neu-success-muted: rgba(72, 168, 104, 0.15);
  --neu-warning: #D4A030;
  --neu-warning-light: #F0E8D0;
  --neu-warning-muted: rgba(212, 160, 48, 0.15);
  --neu-error: #D44848;
  --neu-error-light: #F2D8D8;
  --neu-error-muted: rgba(212, 72, 72, 0.15);
  --neu-info: #4888D4;
  --neu-info-light: #D0E2F2;
  --neu-info-muted: rgba(72, 136, 212, 0.15);
  --neu-shadow-raised-sm:
    4px 4px 10px rgba(160, 168, 180, 0.45),
    -4px -4px 10px rgba(255, 255, 255, 1);
  --neu-shadow-raised:
    7px 7px 16px rgba(160, 168, 180, 0.48),
    -7px -7px 16px rgba(255, 255, 255, 1);
  --neu-shadow-raised-lg:
    12px 12px 28px rgba(160, 168, 180, 0.5),
    -12px -12px 28px rgba(255, 255, 255, 1);
  --neu-shadow-pressed-sm:
    inset 3px 3px 8px rgba(160, 168, 180, 0.4),
    inset -3px -3px 8px rgba(255, 255, 255, 0.95);
  --neu-shadow-pressed:
    inset 5px 5px 12px rgba(160, 168, 180, 0.42),
    inset -5px -5px 12px rgba(255, 255, 255, 0.95);
  --neu-radius-sm: 10px;
  --neu-radius-md: 14px;
  --neu-radius-lg: 20px;
  --neu-radius-full: 9999px;
  --neu-font: 'Inter', system-ui, -apple-system, sans-serif;
  --neu-text-xs: 400 0.75rem/1.4 var(--neu-font);
  --neu-text-sm: 400 0.8125rem/1.45 var(--neu-font);
  --neu-text-base: 400 0.875rem/1.5 var(--neu-font);
  --neu-text-md: 500 0.9375rem/1.5 var(--neu-font);
  --neu-text-lg: 600 1rem/1.5 var(--neu-font);
  --neu-text-xl: 600 1.125rem/1.4 var(--neu-font);
  --neu-text-2xl: 700 1.25rem/1.3 var(--neu-font);
  --neu-text-3xl: 700 1.5rem/1.25 var(--neu-font);
  --neu-text-4xl: 700 1.875rem/1.2 var(--neu-font);
  --neu-label: 600 0.8125rem/1.3 var(--neu-font);
  --neu-caption: 400 0.75rem/1.4 var(--neu-font);
  --neu-duration-fast: 120ms;
  --neu-duration-normal: 180ms;
  --neu-duration-slow: 280ms;
  --neu-easing: ease;
  --neu-space-1: 4px;
  --neu-space-2: 8px;
  --neu-space-3: 12px;
  --neu-space-4: 16px;
  --neu-space-5: 20px;
  --neu-space-6: 24px;
  --neu-space-8: 32px;
  --neu-space-10: 40px;
  --neu-space-12: 48px;
  --neu-focus-ring:
    0 0 0 3px var(--neu-bg),
    0 0 0 5px rgba(74, 123, 247, 0.5),
    0 0 12px rgba(74, 123, 247, 0.15);
}

.neu.dark,
.neu[data-theme=dark],
[data-theme=dark] .neu {
  --neu-bg: #2C3038;
  --neu-bg-alt: #262A30;
  --neu-bg-raised: #333840;
  --neu-text: #E0E4EA;
  --neu-text-secondary: #A0A8B8;
  --neu-text-tertiary: #687080;
  --neu-text-disabled: #484E58;
  --neu-accent: #6B9BFF;
  --neu-accent-hover: #80AAFF;
  --neu-accent-active: #5888EE;
  --neu-accent-muted: rgba(107, 155, 255, 0.15);
  --neu-success: #5CC880;
  --neu-success-light: rgba(92, 200, 128, 0.15);
  --neu-success-muted: rgba(92, 200, 128, 0.10);
  --neu-warning: #E0B848;
  --neu-warning-light: rgba(224, 184, 72, 0.15);
  --neu-warning-muted: rgba(224, 184, 72, 0.10);
  --neu-error: #E06060;
  --neu-error-light: rgba(224, 96, 96, 0.15);
  --neu-error-muted: rgba(224, 96, 96, 0.10);
  --neu-info: #60A0E0;
  --neu-info-light: rgba(96, 160, 224, 0.15);
  --neu-info-muted: rgba(96, 160, 224, 0.10);
  --neu-shadow-raised-sm:
    4px 4px 10px rgba(15, 18, 22, 0.7),
    -4px -4px 10px rgba(55, 60, 70, 0.6);
  --neu-shadow-raised:
    7px 7px 15px rgba(15, 18, 22, 0.7),
    -7px -7px 15px rgba(55, 60, 70, 0.6);
  --neu-shadow-raised-lg:
    12px 12px 24px rgba(15, 18, 22, 0.75),
    -12px -12px 24px rgba(55, 60, 70, 0.65);
  --neu-shadow-pressed-sm:
    inset 3px 3px 8px rgba(15, 18, 22, 0.65),
    inset -3px -3px 8px rgba(55, 60, 70, 0.5);
  --neu-shadow-pressed:
    inset 5px 5px 12px rgba(15, 18, 22, 0.65),
    inset -5px -5px 12px rgba(55, 60, 70, 0.5);
  --neu-focus-ring:
    0 0 0 3px var(--neu-bg),
    0 0 0 5px rgba(107, 155, 255, 0.5),
    0 0 12px rgba(107, 155, 255, 0.15);
}

.neu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--neu-space-2);
  padding: 10px 24px;
  border: none;
  border-radius: var(--neu-radius-md);
  background: var(--neu-bg-raised);
  box-shadow: var(--neu-shadow-raised);
  color: var(--neu-text);
  font: var(--neu-text-md);
  cursor: pointer;
  outline: none;
  user-select: none;
  transition: box-shadow var(--neu-duration-normal) var(--neu-easing), background var(--neu-duration-normal) var(--neu-easing), color var(--neu-duration-normal) var(--neu-easing), transform var(--neu-duration-normal) var(--neu-easing);
}
.neu-btn:hover {
  box-shadow: var(--neu-shadow-raised-lg);
}
.neu-btn:active {
  box-shadow: var(--neu-shadow-pressed);
  transform: scale(0.98);
}
.neu-btn:focus-visible {
  box-shadow: var(--neu-shadow-raised), var(--neu-focus-ring);
}
.neu-btn:disabled, .neu-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: var(--neu-shadow-raised-sm);
  pointer-events: none;
}
.neu-btn svg,
.neu-btn .neu-btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.neu-btn--accent {
  background: var(--neu-accent);
  color: var(--neu-on-accent);
}
.neu-btn--accent:hover {
  background: var(--neu-accent-hover);
  box-shadow: var(--neu-shadow-raised-lg);
}
.neu-btn--accent:active {
  background: var(--neu-accent-active);
  box-shadow: var(--neu-shadow-pressed);
}
.neu-btn--accent:focus-visible {
  box-shadow: var(--neu-shadow-raised), var(--neu-focus-ring);
}
.neu-btn--ghost {
  background: transparent;
  box-shadow: none;
  color: var(--neu-text-secondary);
}
.neu-btn--ghost:hover {
  background: var(--neu-accent-muted);
  color: var(--neu-accent);
  box-shadow: none;
}
.neu-btn--ghost:active {
  box-shadow: var(--neu-shadow-pressed-sm);
  background: var(--neu-bg);
}
.neu-btn--ghost:focus-visible {
  box-shadow: var(--neu-focus-ring);
}
.neu-btn--pressed {
  box-shadow: var(--neu-shadow-pressed);
  background: var(--neu-bg);
  color: var(--neu-accent);
}
.neu-btn--pressed:hover {
  box-shadow: inset 3px 3px 8px rgba(170, 175, 185, 0.4), inset -3px -3px 8px rgba(255, 255, 255, 0.7);
}
.neu-btn--pressed:active {
  box-shadow: var(--neu-shadow-raised-sm);
}
.neu-btn--danger {
  background: var(--neu-error);
  color: #FFFFFF;
}
.neu-btn--danger:hover {
  background: color-mix(in srgb, var(--neu-error) 88%, black);
  box-shadow: var(--neu-shadow-raised-lg);
}
.neu-btn--danger:active {
  background: color-mix(in srgb, var(--neu-error) 78%, black);
  box-shadow: var(--neu-shadow-pressed);
}
.neu-btn--sm {
  padding: 7px 16px;
  font: var(--neu-text-sm);
  border-radius: var(--neu-radius-sm);
  gap: var(--neu-space-1);
}
.neu-btn--sm svg,
.neu-btn--sm .neu-btn__icon {
  width: 15px;
  height: 15px;
}
.neu-btn--lg {
  padding: 14px 32px;
  font: var(--neu-text-lg);
  border-radius: var(--neu-radius-lg);
  gap: var(--neu-space-3);
}
.neu-btn--lg svg,
.neu-btn--lg .neu-btn__icon {
  width: 20px;
  height: 20px;
}
.neu-btn--pill {
  border-radius: var(--neu-radius-full);
}
.neu-btn--icon-only {
  padding: 10px;
  border-radius: var(--neu-radius-md);
}
.neu-btn--icon-only.neu-btn--sm {
  padding: 7px;
}
.neu-btn--icon-only.neu-btn--lg {
  padding: 14px;
}
.neu-btn--block {
  width: 100%;
}

.neu-card {
  background: var(--neu-bg-raised);
  border: none;
  border-radius: var(--neu-radius-lg);
  box-shadow: var(--neu-shadow-raised);
  padding: var(--neu-space-6);
  transition: box-shadow var(--neu-duration-normal) var(--neu-easing), transform var(--neu-duration-normal) var(--neu-easing);
}
.neu-card__media {
  margin: calc(var(--neu-space-6) * -1) calc(var(--neu-space-6) * -1) var(--neu-space-5);
  border-radius: var(--neu-radius-lg) var(--neu-radius-lg) 0 0;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(170, 175, 185, 0.3);
}
.neu-card__media img,
.neu-card__media video {
  display: block;
  width: 100%;
  height: auto;
}
.neu-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--neu-space-4);
  margin-bottom: var(--neu-space-4);
}
.neu-card__title {
  font: var(--neu-text-xl);
  color: var(--neu-text);
  margin: 0;
}
.neu-card__subtitle {
  font: var(--neu-text-sm);
  color: var(--neu-text-secondary);
  margin: var(--neu-space-1) 0 0;
}
.neu-card__body {
  font: var(--neu-text-base);
  color: var(--neu-text-secondary);
}
.neu-card__body > *:first-child {
  margin-top: 0;
}
.neu-card__body > *:last-child {
  margin-bottom: 0;
}
.neu-card__footer {
  display: flex;
  align-items: center;
  gap: var(--neu-space-3);
  margin-top: var(--neu-space-5);
  padding-top: var(--neu-space-5);
}
.neu-card__actions {
  display: flex;
  align-items: center;
  gap: var(--neu-space-2);
  margin-left: auto;
}
.neu-card--interactive {
  cursor: pointer;
}
.neu-card--interactive:hover {
  box-shadow: var(--neu-shadow-raised-lg);
  transform: translateY(-2px);
}
.neu-card--interactive:active {
  box-shadow: var(--neu-shadow-raised-sm);
  transform: translateY(0);
}
.neu-card--flat {
  box-shadow: none;
  background: var(--neu-bg-alt);
}
.neu-card--pressed {
  box-shadow: var(--neu-shadow-pressed);
  background: var(--neu-bg);
}
.neu-card--compact {
  padding: var(--neu-space-4);
}
.neu-card--compact .neu-card__media {
  margin: calc(var(--neu-space-4) * -1) calc(var(--neu-space-4) * -1) var(--neu-space-4);
}
.neu-card--compact .neu-card__footer {
  margin-top: var(--neu-space-4);
  padding-top: var(--neu-space-4);
}

.neu-field {
  display: flex;
  flex-direction: column;
  gap: var(--neu-space-2);
}

.neu-field__label {
  font: var(--neu-label);
  color: var(--neu-text-secondary);
  padding-left: var(--neu-space-2);
}

.neu-field__hint {
  font: var(--neu-caption);
  color: var(--neu-text-tertiary);
  padding-left: var(--neu-space-2);
}

.neu-field__error {
  font: var(--neu-caption);
  color: var(--neu-error);
  padding-left: var(--neu-space-2);
}

.neu-input {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: var(--neu-radius-md);
  background: var(--neu-bg);
  box-shadow: var(--neu-shadow-pressed);
  color: var(--neu-text);
  font: var(--neu-text-base);
  outline: none;
  transition: box-shadow var(--neu-duration-normal) var(--neu-easing), background var(--neu-duration-normal) var(--neu-easing);
}
.neu-input::placeholder {
  color: var(--neu-text-tertiary);
}
.neu-input:focus {
  box-shadow: inset 2px 2px 5px rgba(170, 175, 185, 0.35), inset -2px -2px 5px rgba(255, 255, 255, 0.7), 0 0 0 3px rgba(74, 123, 247, 0.3);
}
.neu-input--error {
  box-shadow: var(--neu-shadow-pressed), 0 0 0 2px rgba(212, 72, 72, 0.3);
}
.neu-input--error:focus {
  box-shadow: inset 2px 2px 5px rgba(170, 175, 185, 0.35), inset -2px -2px 5px rgba(255, 255, 255, 0.7), 0 0 0 3px rgba(212, 72, 72, 0.3);
}
.neu-input:disabled, .neu-input--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--neu-bg-alt);
  box-shadow: var(--neu-shadow-pressed-sm);
}
.neu-input--sm {
  padding: 8px 12px;
  font: var(--neu-text-sm);
  border-radius: var(--neu-radius-sm);
}
.neu-input--lg {
  padding: 14px 20px;
  font: var(--neu-text-lg);
  border-radius: var(--neu-radius-lg);
}

textarea.neu-input {
  min-height: 100px;
  resize: vertical;
}

select.neu-input {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

.neu-check {
  display: inline-flex;
  align-items: center;
  gap: var(--neu-space-3);
  cursor: pointer;
  font: var(--neu-text-base);
  color: var(--neu-text);
}
.neu-check__input {
  appearance: none;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--neu-radius-sm);
  background: var(--neu-bg);
  box-shadow: var(--neu-shadow-pressed-sm);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: box-shadow var(--neu-duration-normal) var(--neu-easing);
}
.neu-check__input:checked {
  background: var(--neu-accent);
  box-shadow: var(--neu-shadow-raised-sm);
}
.neu-check__input:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 5px;
  height: 10px;
  border-right: 2px solid var(--neu-on-accent);
  border-bottom: 2px solid var(--neu-on-accent);
}
.neu-check__input:focus-visible {
  box-shadow: var(--neu-shadow-pressed-sm), var(--neu-focus-ring);
}
.neu-check__input[type=radio] {
  border-radius: var(--neu-radius-full);
}
.neu-check__input[type=radio]:checked::after {
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border: none;
  border-radius: var(--neu-radius-full);
  background: var(--neu-on-accent);
}

.neu-input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.neu-input-group .neu-input {
  padding-left: 42px;
}
.neu-input-group__icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--neu-text-tertiary);
  pointer-events: none;
  z-index: 1;
}

.neu-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--neu-space-1);
  padding: 3px 10px;
  border: none;
  border-radius: var(--neu-radius-full);
  background: var(--neu-bg-raised);
  box-shadow: var(--neu-shadow-raised-sm);
  font: var(--neu-caption);
  color: var(--neu-text-secondary);
  white-space: nowrap;
  vertical-align: middle;
}
.neu-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--neu-radius-full);
  background: currentColor;
  flex-shrink: 0;
}
.neu-badge--accent {
  background: var(--neu-accent-muted);
  color: var(--neu-accent);
}
.neu-badge--success {
  background: var(--neu-success-light);
  color: color-mix(in srgb, var(--neu-success) 80%, black);
}
.neu-badge--warning {
  background: var(--neu-warning-light);
  color: color-mix(in srgb, var(--neu-warning) 75%, black);
}
.neu-badge--error {
  background: var(--neu-error-light);
  color: color-mix(in srgb, var(--neu-error) 80%, black);
}
.neu-badge--info {
  background: var(--neu-info-light);
  color: color-mix(in srgb, var(--neu-info) 80%, black);
}
.neu-badge--sm {
  padding: 2px 7px;
  font: var(--neu-text-xs);
}
.neu-badge--sm .neu-badge__dot {
  width: 5px;
  height: 5px;
}
.neu-badge--lg {
  padding: 5px 14px;
  font: var(--neu-text-sm);
}
.neu-badge--lg .neu-badge__dot {
  width: 8px;
  height: 8px;
}
.neu-badge--counter {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  justify-content: center;
  font: var(--neu-text-xs);
  font-weight: 700;
}

.neu-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--neu-radius-full);
  background: var(--neu-bg-alt);
  box-shadow: var(--neu-shadow-raised-sm);
  color: var(--neu-text-secondary);
  font: var(--neu-text-md);
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}
.neu-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.neu-avatar--xs {
  width: 24px;
  height: 24px;
  font-size: 0.625rem;
}
.neu-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
}
.neu-avatar--lg {
  width: 52px;
  height: 52px;
  font-size: 1.125rem;
  box-shadow: var(--neu-shadow-raised);
}
.neu-avatar--xl {
  width: 68px;
  height: 68px;
  font-size: 1.375rem;
  box-shadow: var(--neu-shadow-raised);
}
.neu-avatar--accent {
  background: var(--neu-accent-muted);
  color: var(--neu-accent);
}
.neu-avatar__status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: var(--neu-radius-full);
  background: var(--neu-text-tertiary);
  box-shadow: 2px 2px 4px rgba(170, 175, 185, 0.4), -1px -1px 3px rgba(255, 255, 255, 0.7);
}
.neu-avatar__status--online {
  background: var(--neu-success);
}
.neu-avatar__status--away {
  background: var(--neu-warning);
}
.neu-avatar__status--busy {
  background: var(--neu-error);
}
.neu-avatar__status--offline {
  background: var(--neu-text-tertiary);
}
.neu-avatar--xs .neu-avatar__status {
  width: 8px;
  height: 8px;
}
.neu-avatar--sm .neu-avatar__status {
  width: 10px;
  height: 10px;
}
.neu-avatar--lg .neu-avatar__status {
  width: 14px;
  height: 14px;
}
.neu-avatar--xl .neu-avatar__status {
  width: 16px;
  height: 16px;
}

.neu-avatar-group {
  display: inline-flex;
  align-items: center;
}
.neu-avatar-group .neu-avatar {
  margin-left: -10px;
  box-shadow: var(--neu-shadow-raised-sm), -2px 0 4px rgba(170, 175, 185, 0.25);
}
.neu-avatar-group .neu-avatar:first-child {
  margin-left: 0;
}
.neu-avatar-group__overflow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: -10px;
  border: none;
  border-radius: var(--neu-radius-full);
  background: var(--neu-bg-alt);
  box-shadow: var(--neu-shadow-raised-sm);
  color: var(--neu-text-secondary);
  font: var(--neu-text-sm);
  font-weight: 600;
}

.neu-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--neu-space-3);
  padding: var(--neu-space-4) var(--neu-space-5);
  border: none;
  border-radius: var(--neu-radius-lg);
  background: var(--neu-bg-raised);
  box-shadow: var(--neu-shadow-raised);
  color: var(--neu-text);
  font: var(--neu-text-base);
}
.neu-alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.neu-alert__content {
  flex: 1;
  min-width: 0;
}
.neu-alert__title {
  font: var(--neu-text-md);
  font-weight: 600;
  color: var(--neu-text);
  margin-bottom: var(--neu-space-1);
}
.neu-alert__message {
  font: var(--neu-text-sm);
  color: var(--neu-text-secondary);
}
.neu-alert__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--neu-radius-sm);
  background: transparent;
  color: var(--neu-text-tertiary);
  cursor: pointer;
  transition: box-shadow var(--neu-duration-fast) var(--neu-easing), color var(--neu-duration-fast) var(--neu-easing);
}
.neu-alert__close:hover {
  box-shadow: var(--neu-shadow-raised-sm);
  color: var(--neu-text-secondary);
}
.neu-alert__close:active {
  box-shadow: var(--neu-shadow-pressed-sm);
}
.neu-alert__close svg {
  width: 16px;
  height: 16px;
}
.neu-alert--info {
  background: var(--neu-info-light);
}
.neu-alert--info .neu-alert__icon {
  color: var(--neu-info);
}
.neu-alert--info .neu-alert__title {
  color: color-mix(in srgb, var(--neu-info) 80%, black);
}
.neu-alert--success {
  background: var(--neu-success-light);
}
.neu-alert--success .neu-alert__icon {
  color: var(--neu-success);
}
.neu-alert--success .neu-alert__title {
  color: color-mix(in srgb, var(--neu-success) 80%, black);
}
.neu-alert--warning {
  background: var(--neu-warning-light);
}
.neu-alert--warning .neu-alert__icon {
  color: var(--neu-warning);
}
.neu-alert--warning .neu-alert__title {
  color: color-mix(in srgb, var(--neu-warning) 75%, black);
}
.neu-alert--error {
  background: var(--neu-error-light);
}
.neu-alert--error .neu-alert__icon {
  color: var(--neu-error);
}
.neu-alert--error .neu-alert__title {
  color: color-mix(in srgb, var(--neu-error) 80%, black);
}
.neu-alert--compact {
  padding: var(--neu-space-3) var(--neu-space-4);
  border-radius: var(--neu-radius-md);
}

.neu-appbar {
  display: flex;
  align-items: center;
  gap: var(--neu-space-4);
  height: 64px;
  padding: 0 var(--neu-space-6);
  border: none;
  border-radius: 0;
  background: var(--neu-bg);
  box-shadow: 0 4px 12px rgba(170, 175, 185, 0.35), 0 1px 3px rgba(170, 175, 185, 0.2);
  position: relative;
  z-index: 100;
}
.neu-appbar__brand {
  display: flex;
  align-items: center;
  gap: var(--neu-space-3);
  font: var(--neu-text-xl);
  color: var(--neu-text);
  text-decoration: none;
  flex-shrink: 0;
}
.neu-appbar__brand img,
.neu-appbar__brand svg {
  height: 28px;
  width: auto;
}
.neu-appbar__title {
  font: var(--neu-text-lg);
  color: var(--neu-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.neu-appbar__spacer {
  flex: 1;
}
.neu-appbar__nav {
  display: flex;
  align-items: center;
  gap: var(--neu-space-1);
  margin: 0 var(--neu-space-4);
}
.neu-appbar__link {
  display: flex;
  align-items: center;
  gap: var(--neu-space-2);
  padding: 8px 16px;
  border: none;
  border-radius: var(--neu-radius-md);
  background: transparent;
  color: var(--neu-text-secondary);
  font: var(--neu-text-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow var(--neu-duration-normal) var(--neu-easing), color var(--neu-duration-normal) var(--neu-easing), background var(--neu-duration-normal) var(--neu-easing);
}
.neu-appbar__link:hover {
  box-shadow: var(--neu-shadow-raised-sm);
  color: var(--neu-text);
  background: var(--neu-bg);
}
.neu-appbar__link:active {
  box-shadow: var(--neu-shadow-pressed-sm);
}
.neu-appbar__link--active {
  box-shadow: var(--neu-shadow-pressed-sm);
  color: var(--neu-accent);
  background: var(--neu-bg);
}
.neu-appbar__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: var(--neu-radius-full);
  background: var(--neu-bg);
  box-shadow: var(--neu-shadow-raised-sm);
  color: var(--neu-text-secondary);
  cursor: pointer;
  position: relative;
  transition: box-shadow var(--neu-duration-normal) var(--neu-easing), color var(--neu-duration-normal) var(--neu-easing);
}
.neu-appbar__action:hover {
  box-shadow: var(--neu-shadow-raised);
  color: var(--neu-text);
}
.neu-appbar__action:active {
  box-shadow: var(--neu-shadow-pressed-sm);
}
.neu-appbar__action svg {
  width: 18px;
  height: 18px;
}
.neu-appbar__action__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: var(--neu-radius-full);
  background: var(--neu-error);
  box-shadow: 1px 1px 3px rgba(170, 175, 185, 0.4);
}
.neu-appbar__actions {
  display: flex;
  align-items: center;
  gap: var(--neu-space-2);
}
.neu-appbar--rounded {
  border-radius: 0 0 var(--neu-radius-lg) var(--neu-radius-lg);
}
.neu-appbar--compact {
  height: 52px;
  padding: 0 var(--neu-space-4);
}

.neu-sidebar {
  display: flex;
  flex-direction: column;
  width: 260px;
  height: 100%;
  border: none;
  background: var(--neu-bg);
  box-shadow: var(--neu-shadow-raised);
  padding: var(--neu-space-4);
  overflow-y: auto;
}
.neu-sidebar__header {
  display: flex;
  align-items: center;
  gap: var(--neu-space-3);
  padding: var(--neu-space-3) var(--neu-space-3);
  margin-bottom: var(--neu-space-4);
}
.neu-sidebar__logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.neu-sidebar__brand {
  font: var(--neu-text-lg);
  color: var(--neu-text);
}
.neu-sidebar__section {
  margin-bottom: var(--neu-space-4);
}
.neu-sidebar__section-title {
  font: var(--neu-caption);
  font-weight: 600;
  color: var(--neu-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--neu-space-2) var(--neu-space-3);
  margin-bottom: var(--neu-space-1);
}
.neu-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--neu-space-1);
}
.neu-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--neu-space-3);
  padding: 10px var(--neu-space-3);
  border: none;
  border-radius: var(--neu-radius-md);
  background: transparent;
  color: var(--neu-text-secondary);
  font: var(--neu-text-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow var(--neu-duration-normal) var(--neu-easing), background var(--neu-duration-normal) var(--neu-easing), color var(--neu-duration-normal) var(--neu-easing);
}
.neu-sidebar__item svg, .neu-sidebar__item__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.6;
}
.neu-sidebar__item__badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--neu-radius-full);
  background: var(--neu-accent-muted);
  color: var(--neu-accent);
  font: var(--neu-text-xs);
  font-weight: 600;
}
.neu-sidebar__item:hover {
  box-shadow: var(--neu-shadow-raised-sm);
  background: var(--neu-bg);
  color: var(--neu-text);
}
.neu-sidebar__item:hover svg,
.neu-sidebar__item:hover .neu-sidebar__item__icon {
  opacity: 1;
}
.neu-sidebar__item--active {
  box-shadow: var(--neu-shadow-pressed);
  background: var(--neu-bg);
  color: var(--neu-accent);
}
.neu-sidebar__item--active svg,
.neu-sidebar__item--active .neu-sidebar__item__icon {
  opacity: 1;
}
.neu-sidebar__item--active .neu-sidebar__item__badge {
  background: var(--neu-accent-muted);
}
.neu-sidebar__item--active:hover {
  box-shadow: var(--neu-shadow-pressed);
}
.neu-sidebar__divider {
  height: 1px;
  margin: var(--neu-space-3) var(--neu-space-3);
  background: transparent;
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8), 0 -1px 1px rgba(170, 175, 185, 0.2);
}
.neu-sidebar__footer {
  margin-top: auto;
  padding-top: var(--neu-space-4);
}
.neu-sidebar--compact {
  width: 220px;
  padding: var(--neu-space-3);
}
.neu-sidebar--compact .neu-sidebar__item {
  padding: 8px var(--neu-space-3);
}
.neu-sidebar--collapsed {
  width: 72px;
  align-items: center;
}
.neu-sidebar--collapsed .neu-sidebar__header {
  justify-content: center;
}
.neu-sidebar--collapsed .neu-sidebar__brand {
  display: none;
}
.neu-sidebar--collapsed .neu-sidebar__section-title {
  display: none;
}
.neu-sidebar--collapsed .neu-sidebar__item {
  justify-content: center;
  padding: 10px;
}
.neu-sidebar--collapsed .neu-sidebar__item span, .neu-sidebar--collapsed .neu-sidebar__item__badge {
  display: none;
}

.neu-tabs {
  display: inline-flex;
  align-items: center;
  gap: var(--neu-space-1);
  padding: var(--neu-space-1);
  border: none;
  border-radius: var(--neu-radius-lg);
  background: var(--neu-bg);
  box-shadow: var(--neu-shadow-pressed);
}

.neu-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--neu-space-2);
  padding: 8px 20px;
  border: none;
  border-radius: var(--neu-radius-md);
  background: transparent;
  color: var(--neu-text-secondary);
  font: var(--neu-text-sm);
  font-weight: 500;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  transition: box-shadow var(--neu-duration-normal) var(--neu-easing), background var(--neu-duration-normal) var(--neu-easing), color var(--neu-duration-normal) var(--neu-easing);
}
.neu-tab svg {
  width: 16px;
  height: 16px;
}
.neu-tab:hover {
  color: var(--neu-text);
  background: rgba(255, 255, 255, 0.25);
}
.neu-tab:active {
  box-shadow: var(--neu-shadow-pressed-sm);
}
.neu-tab:focus-visible {
  box-shadow: var(--neu-focus-ring);
}
.neu-tab--active {
  box-shadow: var(--neu-shadow-raised-sm);
  background: var(--neu-bg);
  color: var(--neu-accent);
  font-weight: 600;
}
.neu-tab--active:hover {
  box-shadow: var(--neu-shadow-raised);
  background: var(--neu-bg);
}
.neu-tab:disabled, .neu-tab--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.neu-tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--neu-radius-full);
  background: var(--neu-accent-muted);
  color: var(--neu-accent);
  font-size: 0.6875rem;
  font-weight: 600;
}

.neu-tabs--pill {
  border-radius: var(--neu-radius-full);
  padding: 4px;
}
.neu-tabs--pill .neu-tab {
  border-radius: var(--neu-radius-full);
  padding: 7px 18px;
}

.neu-tabs--full {
  display: flex;
  width: 100%;
}
.neu-tabs--full .neu-tab {
  flex: 1;
}

.neu-tabs--lg {
  padding: 6px;
  border-radius: var(--neu-radius-lg);
}
.neu-tabs--lg .neu-tab {
  padding: 11px 28px;
  font: var(--neu-text-md);
  border-radius: var(--neu-radius-md);
}

.neu-tab-panel {
  padding: var(--neu-space-5) 0;
}
.neu-tab-panel[hidden] {
  display: none;
}

.neu-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--neu-space-2);
  padding: 6px 14px;
  border: none;
  border-radius: var(--neu-radius-full);
  background: var(--neu-bg-raised);
  box-shadow: var(--neu-shadow-raised-sm);
  color: var(--neu-text-secondary);
  font: var(--neu-text-sm);
  font-weight: 500;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  transition: box-shadow var(--neu-duration-normal) var(--neu-easing), background var(--neu-duration-normal) var(--neu-easing), color var(--neu-duration-normal) var(--neu-easing);
}
.neu-chip:hover {
  box-shadow: var(--neu-shadow-raised);
  color: var(--neu-text);
}
.neu-chip:active {
  box-shadow: var(--neu-shadow-pressed-sm);
}
.neu-chip:focus-visible {
  box-shadow: var(--neu-shadow-raised-sm), var(--neu-focus-ring);
}
.neu-chip--selected {
  box-shadow: var(--neu-shadow-pressed);
  color: var(--neu-accent);
  background: var(--neu-bg);
}
.neu-chip--selected:hover {
  box-shadow: var(--neu-shadow-pressed);
  color: var(--neu-accent-hover);
}
.neu-chip--accent {
  background: var(--neu-accent-muted);
  color: var(--neu-accent);
}
.neu-chip--accent.neu-chip--selected {
  background: var(--neu-accent-muted);
}
.neu-chip--success {
  background: var(--neu-success-light);
  color: color-mix(in srgb, var(--neu-success) 80%, black);
}
.neu-chip--error {
  background: var(--neu-error-light);
  color: color-mix(in srgb, var(--neu-error) 80%, black);
}
.neu-chip--warning {
  background: var(--neu-warning-light);
  color: color-mix(in srgb, var(--neu-warning) 75%, black);
}
.neu-chip__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.neu-chip__avatar {
  width: 22px;
  height: 22px;
  border-radius: var(--neu-radius-full);
  margin-left: -4px;
  flex-shrink: 0;
}
.neu-chip__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: -4px;
  border: none;
  border-radius: var(--neu-radius-full);
  background: transparent;
  color: currentColor;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity var(--neu-duration-fast) var(--neu-easing), box-shadow var(--neu-duration-fast) var(--neu-easing);
}
.neu-chip__remove:hover {
  opacity: 1;
  box-shadow: var(--neu-shadow-raised-sm);
}
.neu-chip__remove svg {
  width: 12px;
  height: 12px;
}
.neu-chip--sm {
  padding: 4px 10px;
  font-size: 0.75rem;
  gap: var(--neu-space-1);
}
.neu-chip--sm .neu-chip__icon {
  width: 14px;
  height: 14px;
}
.neu-chip--sm .neu-chip__avatar {
  width: 18px;
  height: 18px;
}
.neu-chip--sm .neu-chip__remove {
  width: 16px;
  height: 16px;
}
.neu-chip--lg {
  padding: 8px 18px;
  font: var(--neu-text-md);
  gap: var(--neu-space-3);
}
.neu-chip--lg .neu-chip__icon {
  width: 18px;
  height: 18px;
}
.neu-chip--lg .neu-chip__avatar {
  width: 26px;
  height: 26px;
}
.neu-chip:disabled, .neu-chip--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.neu-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--neu-space-2);
}

.neu-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--neu-space-6);
  background: rgba(44, 48, 56, 0.4);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--neu-duration-slow) var(--neu-easing);
}
.neu-modal-backdrop--open {
  opacity: 1;
}
.neu-modal-backdrop--closing {
  opacity: 0;
}

.neu-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  border: none;
  border-radius: var(--neu-radius-lg);
  background: var(--neu-bg-raised);
  box-shadow: var(--neu-shadow-raised-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95);
  opacity: 0;
  transition: transform var(--neu-duration-slow) var(--neu-easing), opacity var(--neu-duration-slow) var(--neu-easing);
}
.neu-modal-backdrop--open .neu-modal {
  transform: scale(1);
  opacity: 1;
}
.neu-modal-backdrop--closing .neu-modal {
  transform: scale(0.95);
  opacity: 0;
}
.neu-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--neu-space-4);
  padding: var(--neu-space-6) var(--neu-space-6) var(--neu-space-4);
}
.neu-modal__title {
  font: var(--neu-text-2xl);
  color: var(--neu-text);
  margin: 0;
}
.neu-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: var(--neu-radius-full);
  background: var(--neu-bg);
  box-shadow: var(--neu-shadow-raised-sm);
  color: var(--neu-text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition: box-shadow var(--neu-duration-normal) var(--neu-easing), color var(--neu-duration-normal) var(--neu-easing);
}
.neu-modal__close:hover {
  box-shadow: var(--neu-shadow-raised);
  color: var(--neu-text-secondary);
}
.neu-modal__close:active {
  box-shadow: var(--neu-shadow-pressed-sm);
}
.neu-modal__close svg {
  width: 18px;
  height: 18px;
}
.neu-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--neu-space-6) var(--neu-space-5);
  font: var(--neu-text-base);
  color: var(--neu-text-secondary);
}
.neu-modal__body > *:first-child {
  margin-top: 0;
}
.neu-modal__body > *:last-child {
  margin-bottom: 0;
}
.neu-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--neu-space-3);
  padding: var(--neu-space-4) var(--neu-space-6) var(--neu-space-6);
}
.neu-modal--sm {
  max-width: 360px;
}
.neu-modal--lg {
  max-width: 640px;
}
.neu-modal--full {
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
}
.neu-modal--centered {
  text-align: center;
}
.neu-modal--centered .neu-modal__header {
  justify-content: center;
}
.neu-modal--centered .neu-modal__close {
  position: absolute;
  top: var(--neu-space-4);
  right: var(--neu-space-4);
}
.neu-modal--centered .neu-modal__footer {
  justify-content: center;
}