atomicuilibrary 0.0.1

package/dist/collection/components/input/input.css

@@ -0,0 +1,1544 @@
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+.a11y-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+:host {
+  display: inline-block;
+  width: var(--ui-input-width, auto);
+  min-width: 0;
+  max-width: 100%;
+}
+:host.variant-plain {
+  min-width: 0;
+  box-sizing: border-box;
+}
+:host {
+  --ui-input-bg: var(--bg-primary, #ffffff);
+  --ui-input-color: var(--text-primary, #1e293b);
+  --ui-input-color-rgb: 30,
+  41,
+  59;
+  --ui-input-border: var(--color-primary, #bfc8d8);
+  --ui-input-border-hover: var(--color-primary, #94a3b8);
+  --ui-input-focus: var(--color-primary, #6366f1);
+  --ui-input-focus-rgb: 99,
+  102,
+  241;
+  --ui-input-placeholder: var(--ui-input-color);
+  --ui-input-label: var(--label-color, var(--text-primary, #1e293b));
+  --ui-input-helper: var(--label-subtitle-color, var(--text-muted, #64748b));
+  --ui-input-addon-bg: var(--bg-primary, #f8fafc);
+  --ui-input-addon-border: var(--border-subtle, #e2e8f0);
+  --ui-input-addon-color: var(--text-muted, #64748b);
+  --ui-input-radius: 10px;
+  --ui-input-soft-bg: var(--bg-secondary, #f8fafc);
+  --ui-input-soft-border: var(--border-subtle, #e2e8f0);
+  --ui-input-filled-bg: var(--bg-secondary, #f1f5f9);
+  --ui-input-underlined-border: var(--border-default, #e2e8f0);
+  --ui-input-placeholder-opacity: 0.45;
+}
+:host(.input-color-primary) {
+  --ui-input-focus: var(--color-primary, #10b981);
+  --ui-input-focus-rgb: unquote(37, 99, 235);
+  --ui-input-border: var(--color-primary-border, #bfdbfe);
+  --ui-input-border-hover: var(--color-primary, #10b981);
+  --ui-input-addon-bg: var(--color-primary, #2563eb);
+  --ui-input-addon-color: var(--text-standard, #ffffff);
+  --ui-input-brand-color: var(--color-primary, #10b981);
+  --ui-input-addon-border: rgba(255, 255, 255, 0.1);
+  --ui-input-soft-bg: var(--color-primary-soft, #eff6ff);
+  --ui-input-soft-border: var(--color-primary-border, #bfdbfe);
+  --ui-input-filled-bg: var(--color-primary-ghost, #f1f5f9);
+}
+
+:host :host .input-color-primary {
+  --ui-input-focus: var(--color-primary, #10b981);
+  --ui-input-focus-rgb: unquote(37, 99, 235);
+  --ui-input-border: var(--color-primary-border, #bfdbfe);
+  --ui-input-border-hover: var(--color-primary, #10b981);
+  --ui-input-addon-bg: var(--color-primary, #2563eb);
+  --ui-input-addon-color: var(--text-standard, #ffffff);
+  --ui-input-brand-color: var(--color-primary, #10b981);
+  --ui-input-addon-border: rgba(255, 255, 255, 0.1);
+  --ui-input-soft-bg: var(--color-primary-soft, #eff6ff);
+  --ui-input-soft-border: var(--color-primary-border, #bfdbfe);
+  --ui-input-filled-bg: var(--color-primary-ghost, #f1f5f9);
+}
+:host(.has-primary) {
+  --ui-input-focus: var(--color-primary, #10b981);
+  --ui-input-focus-rgb: unquote(37, 99, 235);
+  --ui-input-border: var(--color-primary, #10b981);
+  --ui-input-border-hover: var(--color-primary, #10b981);
+  --ui-input-brand-color: var(--color-primary, #10b981);
+}
+
+:host.has-value .input-container, :host.focused .input-container {
+  border-color: var(--ui-input-border) !important;
+}
+:host(.input-color-secondary) {
+  --ui-input-focus: var(--color-secondary, #64748b);
+  --ui-input-focus-rgb: unquote(100, 116, 139);
+  --ui-input-border: var(--color-secondary-border, #e2e8f0);
+  --ui-input-border-hover: var(--color-secondary, #64748b);
+  --ui-input-addon-bg: var(--color-secondary, #64748b);
+  --ui-input-addon-color: var(--text-standard, #ffffff);
+  --ui-input-brand-color: var(--color-secondary, #64748b);
+  --ui-input-addon-border: rgba(255, 255, 255, 0.1);
+  --ui-input-soft-bg: var(--color-secondary-soft, #f1f5f9);
+  --ui-input-soft-border: var(--color-secondary-border, #e2e8f0);
+  --ui-input-filled-bg: var(--color-secondary-ghost, #f8fafc);
+}
+
+:host :host .input-color-secondary {
+  --ui-input-focus: var(--color-secondary, #64748b);
+  --ui-input-focus-rgb: unquote(100, 116, 139);
+  --ui-input-border: var(--color-secondary-border, #e2e8f0);
+  --ui-input-border-hover: var(--color-secondary, #64748b);
+  --ui-input-addon-bg: var(--color-secondary, #64748b);
+  --ui-input-addon-color: var(--text-standard, #ffffff);
+  --ui-input-brand-color: var(--color-secondary, #64748b);
+  --ui-input-addon-border: rgba(255, 255, 255, 0.1);
+  --ui-input-soft-bg: var(--color-secondary-soft, #f1f5f9);
+  --ui-input-soft-border: var(--color-secondary-border, #e2e8f0);
+  --ui-input-filled-bg: var(--color-secondary-ghost, #f8fafc);
+}
+:host(.has-secondary) {
+  --ui-input-focus: var(--color-secondary, #64748b);
+  --ui-input-focus-rgb: unquote(100, 116, 139);
+  --ui-input-border: var(--color-secondary, #64748b);
+  --ui-input-border-hover: var(--color-secondary, #64748b);
+  --ui-input-brand-color: var(--color-secondary, #64748b);
+}
+
+:host.has-value .input-container, :host.focused .input-container {
+  border-color: var(--ui-input-border) !important;
+}
+:host(.input-color-success) {
+  --ui-input-focus: var(--color-success, #10b981);
+  --ui-input-focus-rgb: unquote(16, 185, 129);
+  --ui-input-border: var(--color-success-border, #bbf7d0);
+  --ui-input-border-hover: var(--color-success, #10b981);
+  --ui-input-addon-bg: var(--color-success, #10b981);
+  --ui-input-addon-color: var(--text-standard, #ffffff);
+  --ui-input-brand-color: var(--color-success, #10b981);
+  --ui-input-addon-border: rgba(255, 255, 255, 0.1);
+  --ui-input-soft-bg: var(--color-success-soft, #f0fdf4);
+  --ui-input-soft-border: var(--color-success-border, #bbf7d0);
+  --ui-input-filled-bg: var(--color-success-ghost, #f0fdf4);
+}
+
+:host :host .input-color-success {
+  --ui-input-focus: var(--color-success, #10b981);
+  --ui-input-focus-rgb: unquote(16, 185, 129);
+  --ui-input-border: var(--color-success-border, #bbf7d0);
+  --ui-input-border-hover: var(--color-success, #10b981);
+  --ui-input-addon-bg: var(--color-success, #10b981);
+  --ui-input-addon-color: var(--text-standard, #ffffff);
+  --ui-input-brand-color: var(--color-success, #10b981);
+  --ui-input-addon-border: rgba(255, 255, 255, 0.1);
+  --ui-input-soft-bg: var(--color-success-soft, #f0fdf4);
+  --ui-input-soft-border: var(--color-success-border, #bbf7d0);
+  --ui-input-filled-bg: var(--color-success-ghost, #f0fdf4);
+}
+:host(.has-success) {
+  --ui-input-focus: var(--color-success, #10b981);
+  --ui-input-focus-rgb: unquote(16, 185, 129);
+  --ui-input-border: var(--color-success, #10b981);
+  --ui-input-border-hover: var(--color-success, #10b981);
+  --ui-input-brand-color: var(--color-success, #10b981);
+}
+
+:host.has-value .input-container, :host.focused .input-container {
+  border-color: var(--ui-input-border) !important;
+}
+:host(.input-color-danger) {
+  --ui-input-focus: var(--color-danger, #ef4444);
+  --ui-input-focus-rgb: unquote(239, 68, 68);
+  --ui-input-border: var(--color-danger-border, #fecaca);
+  --ui-input-border-hover: var(--color-danger, #ef4444);
+  --ui-input-addon-bg: var(--color-danger, #ef4444);
+  --ui-input-addon-color: var(--text-standard, #ffffff);
+  --ui-input-brand-color: var(--color-danger, #ef4444);
+  --ui-input-addon-border: rgba(255, 255, 255, 0.1);
+  --ui-input-soft-bg: var(--color-danger-soft, #fef2f2);
+  --ui-input-soft-border: var(--color-danger-border, #fecaca);
+  --ui-input-filled-bg: var(--color-danger-ghost, #fef2f2);
+}
+
+:host :host .input-color-danger {
+  --ui-input-focus: var(--color-danger, #ef4444);
+  --ui-input-focus-rgb: unquote(239, 68, 68);
+  --ui-input-border: var(--color-danger-border, #fecaca);
+  --ui-input-border-hover: var(--color-danger, #ef4444);
+  --ui-input-addon-bg: var(--color-danger, #ef4444);
+  --ui-input-addon-color: var(--text-standard, #ffffff);
+  --ui-input-brand-color: var(--color-danger, #ef4444);
+  --ui-input-addon-border: rgba(255, 255, 255, 0.1);
+  --ui-input-soft-bg: var(--color-danger-soft, #fef2f2);
+  --ui-input-soft-border: var(--color-danger-border, #fecaca);
+  --ui-input-filled-bg: var(--color-danger-ghost, #fef2f2);
+}
+:host(.has-danger) {
+  --ui-input-focus: var(--color-danger, #ef4444);
+  --ui-input-focus-rgb: unquote(239, 68, 68);
+  --ui-input-border: var(--color-danger, #ef4444);
+  --ui-input-border-hover: var(--color-danger, #ef4444);
+  --ui-input-brand-color: var(--color-danger, #ef4444);
+}
+
+:host.has-value .input-container, :host.focused .input-container {
+  border-color: var(--ui-input-border) !important;
+}
+:host(.input-color-error) {
+  --ui-input-focus: var(--color-danger, #ef4444);
+  --ui-input-focus-rgb: unquote(239, 68, 68);
+  --ui-input-border: var(--color-danger-border, #fecaca);
+  --ui-input-border-hover: var(--color-danger, #ef4444);
+  --ui-input-addon-bg: var(--color-danger, #ef4444);
+  --ui-input-addon-color: var(--text-standard, #ffffff);
+  --ui-input-brand-color: var(--color-danger, #ef4444);
+  --ui-input-addon-border: rgba(255, 255, 255, 0.1);
+  --ui-input-soft-bg: var(--color-danger-soft, #fef2f2);
+  --ui-input-soft-border: var(--color-danger-border, #fecaca);
+  --ui-input-filled-bg: var(--color-danger-ghost, #fef2f2);
+}
+
+:host :host .input-color-error {
+  --ui-input-focus: var(--color-danger, #ef4444);
+  --ui-input-focus-rgb: unquote(239, 68, 68);
+  --ui-input-border: var(--color-danger-border, #fecaca);
+  --ui-input-border-hover: var(--color-danger, #ef4444);
+  --ui-input-addon-bg: var(--color-danger, #ef4444);
+  --ui-input-addon-color: var(--text-standard, #ffffff);
+  --ui-input-brand-color: var(--color-danger, #ef4444);
+  --ui-input-addon-border: rgba(255, 255, 255, 0.1);
+  --ui-input-soft-bg: var(--color-danger-soft, #fef2f2);
+  --ui-input-soft-border: var(--color-danger-border, #fecaca);
+  --ui-input-filled-bg: var(--color-danger-ghost, #fef2f2);
+}
+:host(.has-error) {
+  --ui-input-focus: var(--color-danger, #ef4444);
+  --ui-input-focus-rgb: unquote(239, 68, 68);
+  --ui-input-border: var(--color-danger, #ef4444);
+  --ui-input-border-hover: var(--color-danger, #ef4444);
+  --ui-input-brand-color: var(--color-danger, #ef4444);
+}
+
+:host.has-value .input-container, :host.focused .input-container {
+  border-color: var(--ui-input-border) !important;
+}
+:host(.input-color-warning) {
+  --ui-input-focus: var(--color-warning, #f59e0b);
+  --ui-input-focus-rgb: unquote(245, 158, 11);
+  --ui-input-border: var(--color-warning-border, #fde68a);
+  --ui-input-border-hover: var(--color-warning, #f59e0b);
+  --ui-input-addon-bg: var(--color-warning, #f59e0b);
+  --ui-input-addon-color: var(--text-standard, #ffffff);
+  --ui-input-brand-color: var(--color-warning, #f59e0b);
+  --ui-input-addon-border: rgba(255, 255, 255, 0.1);
+  --ui-input-soft-bg: var(--color-warning-soft, #fffbeb);
+  --ui-input-soft-border: var(--color-warning-border, #fde68a);
+  --ui-input-filled-bg: var(--color-warning-ghost, #fffbeb);
+}
+
+:host :host .input-color-warning {
+  --ui-input-focus: var(--color-warning, #f59e0b);
+  --ui-input-focus-rgb: unquote(245, 158, 11);
+  --ui-input-border: var(--color-warning-border, #fde68a);
+  --ui-input-border-hover: var(--color-warning, #f59e0b);
+  --ui-input-addon-bg: var(--color-warning, #f59e0b);
+  --ui-input-addon-color: var(--text-standard, #ffffff);
+  --ui-input-brand-color: var(--color-warning, #f59e0b);
+  --ui-input-addon-border: rgba(255, 255, 255, 0.1);
+  --ui-input-soft-bg: var(--color-warning-soft, #fffbeb);
+  --ui-input-soft-border: var(--color-warning-border, #fde68a);
+  --ui-input-filled-bg: var(--color-warning-ghost, #fffbeb);
+}
+:host(.has-warning) {
+  --ui-input-focus: var(--color-warning, #f59e0b);
+  --ui-input-focus-rgb: unquote(245, 158, 11);
+  --ui-input-border: var(--color-warning, #f59e0b);
+  --ui-input-border-hover: var(--color-warning, #f59e0b);
+  --ui-input-brand-color: var(--color-warning, #f59e0b);
+}
+
+:host.has-value .input-container, :host.focused .input-container {
+  border-color: var(--ui-input-border) !important;
+}
+:host(.input-color-info) {
+  --ui-input-focus: var(--color-info, #0ea5e9);
+  --ui-input-focus-rgb: unquote(14, 165, 233);
+  --ui-input-border: var(--color-info-border, #bae6fd);
+  --ui-input-border-hover: var(--color-info, #0ea5e9);
+  --ui-input-addon-bg: var(--color-info, #0ea5e9);
+  --ui-input-addon-color: var(--text-standard, #ffffff);
+  --ui-input-brand-color: var(--color-info, #0ea5e9);
+  --ui-input-addon-border: rgba(255, 255, 255, 0.1);
+  --ui-input-soft-bg: var(--color-info-soft, #f0f9ff);
+  --ui-input-soft-border: var(--color-info-border, #bae6fd);
+  --ui-input-filled-bg: var(--color-info-ghost, #f0f9ff);
+}
+
+:host :host .input-color-info {
+  --ui-input-focus: var(--color-info, #0ea5e9);
+  --ui-input-focus-rgb: unquote(14, 165, 233);
+  --ui-input-border: var(--color-info-border, #bae6fd);
+  --ui-input-border-hover: var(--color-info, #0ea5e9);
+  --ui-input-addon-bg: var(--color-info, #0ea5e9);
+  --ui-input-addon-color: var(--text-standard, #ffffff);
+  --ui-input-brand-color: var(--color-info, #0ea5e9);
+  --ui-input-addon-border: rgba(255, 255, 255, 0.1);
+  --ui-input-soft-bg: var(--color-info-soft, #f0f9ff);
+  --ui-input-soft-border: var(--color-info-border, #bae6fd);
+  --ui-input-filled-bg: var(--color-info-ghost, #f0f9ff);
+}
+:host(.has-info) {
+  --ui-input-focus: var(--color-info, #0ea5e9);
+  --ui-input-focus-rgb: unquote(14, 165, 233);
+  --ui-input-border: var(--color-info, #0ea5e9);
+  --ui-input-border-hover: var(--color-info, #0ea5e9);
+  --ui-input-brand-color: var(--color-info, #0ea5e9);
+}
+
+:host.has-value .input-container, :host.focused .input-container {
+  border-color: var(--ui-input-border) !important;
+}
+:host.input-color-custom {
+  --ui-input-focus: var(--ui-custom-color, var(--color-primary, #10b981));
+  --ui-input-focus-rgb: var(--ui-custom-color-rgb, 59, 130, 246);
+  --ui-input-addon-bg: var(--ui-custom-color, var(--color-primary, #10b981));
+  --ui-input-addon-color: var(--text-standard, #ffffff);
+  --ui-input-brand-color: var(--ui-custom-color, var(--color-primary, #10b981));
+  --ui-input-addon-border: rgba(255, 255, 255, 0.1);
+  --ui-input-soft-bg: rgba(var(--ui-custom-color-rgb, 59, 130, 246), 0.12);
+  --ui-input-soft-border: rgba(var(--ui-custom-color-rgb, 59, 130, 246), 0.3);
+  --ui-input-filled-bg: rgba(var(--ui-custom-color-rgb, 59, 130, 246), 0.08);
+}
+:host(.input-color-custom) {
+  --ui-input-focus: var(--ui-custom-color, var(--color-primary, #10b981));
+  --ui-input-focus-rgb: var(--ui-custom-color-rgb, 59, 130, 246);
+  --ui-input-addon-bg: var(--ui-custom-color, var(--color-primary, #10b981));
+  --ui-input-addon-color: var(--text-standard, #ffffff);
+  --ui-input-brand-color: var(--ui-custom-color, var(--color-primary, #10b981));
+  --ui-input-addon-border: rgba(255, 255, 255, 0.1);
+  --ui-input-soft-bg: rgba(var(--ui-custom-color-rgb, 59, 130, 246), 0.12);
+  --ui-input-soft-border: rgba(var(--ui-custom-color-rgb, 59, 130, 246), 0.3);
+  --ui-input-filled-bg: rgba(var(--ui-custom-color-rgb, 59, 130, 246), 0.08);
+}
+
+:host([class*=input-color-]) .prefix-icon:not(.prefix-icon--clickable),
+:host([class*=input-color-]) .suffix-icon:not(.suffix-icon--clickable) {
+  color: var(--ui-input-label);
+  background: rgba(var(--ui-input-focus-rgb), 0.08);
+  border-color: rgba(var(--ui-input-focus-rgb), 0.15);
+}
+:host([class*=input-color-]) .input-label {
+  color: var(--ui-input-label);
+}
+
+:host[class*=input-color-] .prefix-icon:not(.prefix-icon--clickable),
+:host[class*=input-color-] .suffix-icon:not(.suffix-icon--clickable) {
+  color: var(--ui-input-brand-color);
+  background: rgba(var(--ui-input-focus-rgb), 0.08);
+  border-color: rgba(var(--ui-input-focus-rgb), 0.15);
+}
+:host[class*=input-color-] .input-label {
+  color: var(--ui-input-label-color, var(--ui-input-label));
+}
+:host [class*=block-color-].block-color-primary {
+  background: var(--color-primary, #10b981) !important;
+  color: var(--text-standard, #ffffff) !important;
+}
+:host [class*=block-color-].block-color-secondary {
+  background: var(--color-secondary, #64748b) !important;
+  color: var(--text-standard, #ffffff) !important;
+}
+:host [class*=block-color-].block-color-success {
+  background: var(--color-success, #10b981) !important;
+  color: var(--text-standard, #ffffff) !important;
+}
+:host [class*=block-color-].block-color-danger {
+  background: var(--color-danger, #ef4444) !important;
+  color: var(--text-standard, #ffffff) !important;
+}
+:host [class*=block-color-].block-color-error {
+  background: var(--color-danger, #ef4444) !important;
+  color: var(--text-standard, #ffffff) !important;
+}
+:host [class*=block-color-].block-color-warning {
+  background: var(--color-warning, #f59e0b) !important;
+  color: var(--text-standard, #ffffff) !important;
+}
+:host [class*=block-color-].block-color-info {
+  background: var(--color-info, #0ea5e9) !important;
+  color: var(--text-standard, #ffffff) !important;
+}
+:host.gradient-decorators [class*=prefix-], :host.gradient-decorators [class*=suffix-]:not(.hidden) {
+  background-clip: padding-box !important;
+  border: none !important;
+}
+:host.gradient-decorators.input-color-primary [class*=prefix-], :host.gradient-decorators.input-color-primary [class*=suffix-] {
+  background: linear-gradient(135deg, var(--color-primary, #10b981), var(--color-primary, #6366f1)) !important;
+}
+:host.gradient-decorators.input-color-secondary [class*=prefix-], :host.gradient-decorators.input-color-secondary [class*=suffix-] {
+  background: linear-gradient(135deg, var(--color-secondary, #64748b), var(--color-primary, #6366f1)) !important;
+}
+:host.gradient-decorators.input-color-success [class*=prefix-], :host.gradient-decorators.input-color-success [class*=suffix-] {
+  background: linear-gradient(135deg, var(--color-success, #10b981), var(--color-primary, #6366f1)) !important;
+}
+:host.gradient-decorators.input-color-danger [class*=prefix-], :host.gradient-decorators.input-color-danger [class*=suffix-] {
+  background: linear-gradient(135deg, var(--color-danger, #ef4444), var(--color-primary, #6366f1)) !important;
+}
+:host.gradient-decorators.input-color-error [class*=prefix-], :host.gradient-decorators.input-color-error [class*=suffix-] {
+  background: linear-gradient(135deg, var(--color-danger, #ef4444), var(--color-primary, #6366f1)) !important;
+}
+:host.gradient-decorators.input-color-warning [class*=prefix-], :host.gradient-decorators.input-color-warning [class*=suffix-] {
+  background: linear-gradient(135deg, var(--color-warning, #f59e0b), var(--color-primary, #6366f1)) !important;
+}
+:host.gradient-decorators.input-color-info [class*=prefix-], :host.gradient-decorators.input-color-info [class*=suffix-] {
+  background: linear-gradient(135deg, var(--color-info, #0ea5e9), var(--color-primary, #6366f1)) !important;
+}
+:host.full-width {
+  display: block;
+  width: 100%;
+}
+:host.multiline .input-field {
+  resize: both;
+  height: auto;
+  min-height: 100px;
+  line-height: 1.6;
+  padding: 12px 14px;
+  white-space: pre-wrap;
+  overflow-y: auto;
+  text-overflow: clip;
+}
+:host.shake-animation {
+  animation: shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
+}
+
+:host(.shake-animation) {
+  animation: shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
+}
+
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark) {
+  --ui-input-bg: var(--bg-primary, #1e293b);
+  --ui-input-color: var(--text-standard, #f1f5f9);
+  --ui-input-border: var(--border-default, #334155);
+  --ui-input-border-hover: var(--border-strong, #475569);
+  --ui-input-focus: var(--color-primary, #4ade80);
+  --ui-input-focus-rgb: var(--color-primary-rgb);
+  --ui-input-placeholder: var(--text-muted);
+  --ui-input-label: var(--label-color, #f5f5f5);
+  --ui-input-helper: var(--label-subtitle-color, #c2c2c2);
+  --ui-input-addon-bg: var(--bg-secondary, #0f172a);
+  --ui-input-addon-border: var(--border-subtle, #334155);
+  --ui-input-addon-color: var(--label-subtitle-color, #c2c2c2);
+}
+
+:host-context([data-theme=violet]) {
+  --ui-input-bg: var(--bg-primary, #1a1440);
+  --ui-input-color: var(--text-standard, #f5f3ff);
+  --ui-input-border: var(--color-primary);
+  --ui-input-border-hover: var(--color-primary-hover);
+  --ui-input-placeholder: var(--text-muted);
+  --ui-input-label: var(--label-color, #ffffff);
+  --ui-input-helper: var(--label-subtitle-color, #ddd6fe);
+  --ui-input-addon-bg: var(--bg-secondary);
+  --ui-input-addon-border: var(--border-subtle);
+  --ui-input-addon-color: var(--label-subtitle-color);
+}
+
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+}
+.input-wrapper.full-width {
+  width: 100%;
+}
+:host(.size-xxxs) .input-wrapper .input-field, .input-wrapper.size-xxxs .input-field {
+  padding: var(--ui-input-padding, 0 6px);
+  font-size: 11px;
+  height: 20px;
+  line-height: 20px;
+  text-align: var(--ui-input-text-align, left);
+}
+:host(.size-xxxs) .input-wrapper .input-label, .input-wrapper.size-xxxs .input-label {
+  font-size: 11px;
+  line-height: 16px;
+}
+:host(.size-xxxs) .input-wrapper .helper-text, .input-wrapper.size-xxxs .helper-text {
+  font-size: 9px;
+}
+:host(.size-xxxs) .input-wrapper .prefix-icon,
+:host(.size-xxxs) .input-wrapper .suffix-icon,
+:host(.size-xxxs) .input-wrapper .prefix-text,
+:host(.size-xxxs) .input-wrapper .suffix-text, .input-wrapper.size-xxxs .prefix-icon,
+.input-wrapper.size-xxxs .suffix-icon,
+.input-wrapper.size-xxxs .prefix-text,
+.input-wrapper.size-xxxs .suffix-text {
+  padding: 0 6px;
+  font-size: 11px;
+}
+:host(.size-xxxs) .input-wrapper .otp-box, .input-wrapper.size-xxxs .otp-box {
+  height: 28px;
+  width: 22px;
+  max-width: 22px;
+  font-size: 11px;
+}
+:host(.size-xxs) .input-wrapper .input-field, .input-wrapper.size-xxs .input-field {
+  padding: var(--ui-input-padding, 0 8px);
+  font-size: 12px;
+  height: 24px;
+  line-height: 24px;
+  text-align: var(--ui-input-text-align, left);
+}
+:host(.size-xxs) .input-wrapper .input-label, .input-wrapper.size-xxs .input-label {
+  font-size: 12px;
+  line-height: 18px;
+}
+:host(.size-xxs) .input-wrapper .helper-text, .input-wrapper.size-xxs .helper-text {
+  font-size: 10px;
+}
+:host(.size-xxs) .input-wrapper .prefix-icon,
+:host(.size-xxs) .input-wrapper .suffix-icon,
+:host(.size-xxs) .input-wrapper .prefix-text,
+:host(.size-xxs) .input-wrapper .suffix-text, .input-wrapper.size-xxs .prefix-icon,
+.input-wrapper.size-xxs .suffix-icon,
+.input-wrapper.size-xxs .prefix-text,
+.input-wrapper.size-xxs .suffix-text {
+  padding: 0 8px;
+  font-size: 12px;
+}
+:host(.size-xxs) .input-wrapper .otp-box, .input-wrapper.size-xxs .otp-box {
+  height: 32px;
+  width: 26px;
+  max-width: 26px;
+  font-size: 12px;
+}
+:host(.size-xs) .input-wrapper .input-field, .input-wrapper.size-xs .input-field {
+  padding: var(--ui-input-padding, 0 10px);
+  font-size: 13px;
+  height: 28px;
+  line-height: 28px;
+  text-align: var(--ui-input-text-align, left);
+}
+:host(.size-xs) .input-wrapper .input-label, .input-wrapper.size-xs .input-label {
+  font-size: 13px;
+  line-height: 20px;
+}
+:host(.size-xs) .input-wrapper .helper-text, .input-wrapper.size-xs .helper-text {
+  font-size: 11px;
+}
+:host(.size-xs) .input-wrapper .prefix-icon,
+:host(.size-xs) .input-wrapper .suffix-icon,
+:host(.size-xs) .input-wrapper .prefix-text,
+:host(.size-xs) .input-wrapper .suffix-text, .input-wrapper.size-xs .prefix-icon,
+.input-wrapper.size-xs .suffix-icon,
+.input-wrapper.size-xs .prefix-text,
+.input-wrapper.size-xs .suffix-text {
+  padding: 0 10px;
+  font-size: 13px;
+}
+:host(.size-xs) .input-wrapper .otp-box, .input-wrapper.size-xs .otp-box {
+  height: 36px;
+  width: 30px;
+  max-width: 30px;
+  font-size: 13px;
+}
+:host(.size-sm) .input-wrapper .input-container, .input-wrapper.size-sm .input-container {
+  min-height: 32px;
+}
+:host(.size-sm) .input-wrapper .input-field, .input-wrapper.size-sm .input-field {
+  padding: var(--ui-input-padding, 0 12px);
+  font-size: 14px;
+  height: 32px;
+  line-height: 32px;
+  text-align: var(--ui-input-text-align, left);
+}
+:host(.size-sm) .input-wrapper .input-label, .input-wrapper.size-sm .input-label {
+  font-size: 14px;
+  line-height: 22px;
+}
+:host(.size-sm) .input-wrapper .helper-text, .input-wrapper.size-sm .helper-text {
+  font-size: 11px;
+}
+:host(.size-sm) .input-wrapper .prefix-icon,
+:host(.size-sm) .input-wrapper .suffix-icon,
+:host(.size-sm) .input-wrapper .prefix-text,
+:host(.size-sm) .input-wrapper .suffix-text, .input-wrapper.size-sm .prefix-icon,
+.input-wrapper.size-sm .suffix-icon,
+.input-wrapper.size-sm .prefix-text,
+.input-wrapper.size-sm .suffix-text {
+  padding: 0 12px;
+  font-size: 14px;
+}
+:host(.size-sm) .input-wrapper .otp-box, .input-wrapper.size-sm .otp-box {
+  height: 40px;
+  width: 32px;
+  max-width: 32px;
+  font-size: 14px;
+}
+:host(.size-md) .input-wrapper .input-container, .input-wrapper.size-md .input-container {
+  min-height: 38px;
+}
+:host(.size-md) .input-wrapper .input-field, .input-wrapper.size-md .input-field {
+  padding: var(--ui-input-padding, 0 14px);
+  font-size: 15px;
+  height: 38px;
+  line-height: 38px;
+  text-align: var(--ui-input-text-align, left);
+}
+:host(.size-md) .input-wrapper .input-label, .input-wrapper.size-md .input-label {
+  font-size: 15px;
+  line-height: 24px;
+}
+:host(.size-md) .input-wrapper .helper-text, .input-wrapper.size-md .helper-text {
+  font-size: 12px;
+}
+:host(.size-md) .input-wrapper .prefix-icon,
+:host(.size-md) .input-wrapper .suffix-icon,
+:host(.size-md) .input-wrapper .prefix-text,
+:host(.size-md) .input-wrapper .suffix-text, .input-wrapper.size-md .prefix-icon,
+.input-wrapper.size-md .suffix-icon,
+.input-wrapper.size-md .prefix-text,
+.input-wrapper.size-md .suffix-text {
+  padding: 0 14px;
+  font-size: 15px;
+}
+:host(.size-md) .input-wrapper .otp-box, .input-wrapper.size-md .otp-box {
+  height: 46px;
+  width: 36px;
+  max-width: 36px;
+  font-size: 16px;
+}
+:host(.size-lg) .input-wrapper .input-container, .input-wrapper.size-lg .input-container {
+  min-height: 42px;
+}
+:host(.size-lg) .input-wrapper .input-field, .input-wrapper.size-lg .input-field {
+  padding: var(--ui-input-padding, 0 16px);
+  font-size: 16px;
+  height: 42px;
+  line-height: 42px;
+  text-align: var(--ui-input-text-align, left);
+}
+:host(.size-lg) .input-wrapper .input-label, .input-wrapper.size-lg .input-label {
+  font-size: 16px;
+  line-height: 26px;
+}
+:host(.size-lg) .input-wrapper .helper-text, .input-wrapper.size-lg .helper-text {
+  font-size: 13px;
+}
+:host(.size-lg) .input-wrapper .prefix-icon,
+:host(.size-lg) .input-wrapper .suffix-icon,
+:host(.size-lg) .input-wrapper .prefix-text,
+:host(.size-lg) .input-wrapper .suffix-text, .input-wrapper.size-lg .prefix-icon,
+.input-wrapper.size-lg .suffix-icon,
+.input-wrapper.size-lg .prefix-text,
+.input-wrapper.size-lg .suffix-text {
+  padding: 0 16px;
+  font-size: 18px;
+}
+:host(.size-lg) .input-wrapper .otp-box, .input-wrapper.size-lg .otp-box {
+  height: 52px;
+  width: 42px;
+  max-width: 42px;
+  font-size: 18px;
+}
+:host(.size-xl) .input-wrapper .input-container, .input-wrapper.size-xl .input-container {
+  min-height: 48px;
+}
+:host(.size-xl) .input-wrapper .input-field, .input-wrapper.size-xl .input-field {
+  padding: var(--ui-input-padding, 0 18px);
+  font-size: 18px;
+  height: 48px;
+  line-height: 48px;
+  text-align: var(--ui-input-text-align, left);
+}
+:host(.size-xl) .input-wrapper .input-label, .input-wrapper.size-xl .input-label {
+  font-size: 18px;
+  line-height: 28px;
+}
+:host(.size-xl) .input-wrapper .helper-text, .input-wrapper.size-xl .helper-text {
+  font-size: 14px;
+}
+:host(.size-xl) .input-wrapper .prefix-icon,
+:host(.size-xl) .input-wrapper .suffix-icon,
+:host(.size-xl) .input-wrapper .prefix-text,
+:host(.size-xl) .input-wrapper .suffix-text, .input-wrapper.size-xl .prefix-icon,
+.input-wrapper.size-xl .suffix-icon,
+.input-wrapper.size-xl .prefix-text,
+.input-wrapper.size-xl .suffix-text {
+  padding: 0 18px;
+  font-size: 20px;
+}
+:host(.size-xl) .input-wrapper .otp-box, .input-wrapper.size-xl .otp-box {
+  height: 60px;
+  width: 48px;
+  max-width: 48px;
+  font-size: 20px;
+}
+:host(.size-xxl) .input-wrapper .input-container, .input-wrapper.size-xxl .input-container {
+  min-height: 54px;
+}
+:host(.size-xxl) .input-wrapper .input-field, .input-wrapper.size-xxl .input-field {
+  padding: var(--ui-input-padding, 0 20px);
+  font-size: 20px;
+  height: 54px;
+  line-height: 54px;
+  text-align: var(--ui-input-text-align, left);
+}
+:host(.size-xxl) .input-wrapper .input-label, .input-wrapper.size-xxl .input-label {
+  font-size: 20px;
+  line-height: 32px;
+}
+:host(.size-xxl) .input-wrapper .helper-text, .input-wrapper.size-xxl .helper-text {
+  font-size: 15px;
+}
+:host(.size-xxl) .input-wrapper .prefix-icon,
+:host(.size-xxl) .input-wrapper .suffix-icon,
+:host(.size-xxl) .input-wrapper .prefix-text,
+:host(.size-xxl) .input-wrapper .suffix-text, .input-wrapper.size-xxl .prefix-icon,
+.input-wrapper.size-xxl .suffix-icon,
+.input-wrapper.size-xxl .prefix-text,
+.input-wrapper.size-xxl .suffix-text {
+  padding: 0 20px;
+  font-size: 24px;
+}
+:host(.size-xxl) .input-wrapper .otp-box, .input-wrapper.size-xxl .otp-box {
+  height: 68px;
+  width: 54px;
+  max-width: 54px;
+  font-size: 22px;
+}
+:host(.size-xxxl) .input-wrapper .input-field, .input-wrapper.size-xxxl .input-field {
+  padding: var(--ui-input-padding, 0 24px);
+  font-size: 24px;
+  height: 64px;
+  line-height: 64px;
+  text-align: var(--ui-input-text-align, left);
+}
+:host(.size-xxxl) .input-wrapper .input-label, .input-wrapper.size-xxxl .input-label {
+  font-size: 24px;
+  line-height: 36px;
+}
+:host(.size-xxxl) .input-wrapper .helper-text, .input-wrapper.size-xxxl .helper-text {
+  font-size: 16px;
+}
+:host(.size-xxxl) .input-wrapper .prefix-icon,
+:host(.size-xxxl) .input-wrapper .suffix-icon,
+:host(.size-xxxl) .input-wrapper .prefix-text,
+:host(.size-xxxl) .input-wrapper .suffix-text, .input-wrapper.size-xxxl .prefix-icon,
+.input-wrapper.size-xxxl .suffix-icon,
+.input-wrapper.size-xxxl .prefix-text,
+.input-wrapper.size-xxxl .suffix-text {
+  padding: 0 24px;
+  font-size: 28px;
+}
+:host(.size-xxxl) .input-wrapper .otp-box, .input-wrapper.size-xxxl .otp-box {
+  height: 80px;
+  width: 64px;
+  max-width: 64px;
+  font-size: 26px;
+}
+
+.input-label {
+  display: block;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--ui-input-label-color, var(--ui-input-label));
+  margin-bottom: 8px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  opacity: 0.65;
+}
+.input-label .required-indicator {
+  color: var(--color-danger-hover, #dc2626);
+  margin-left: 3px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+
+.input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--ui-input-border);
+  border-radius: var(--ui-input-radius);
+  background: var(--ui-input-bg);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02), inset 0 1px 1px rgba(255, 255, 255, 0.5);
+  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow: visible;
+  padding: 0 !important;
+  z-index: 1;
+}
+.input-container .clipping-layer {
+  position: absolute;
+  inset: -1px;
+  overflow: hidden;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 0;
+}
+.density-cozy .input-container {
+  gap: 6px;
+}
+.density-compact .input-container {
+  gap: 4px;
+}
+
+.input-field {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  color: var(--ui-input-color);
+  width: 100%;
+  min-width: 0;
+  font-weight: 400;
+  text-align: var(--ui-input-text-align, left);
+  padding: 0 var(--ui-input-padding-x, 12px) !important;
+  transition: color 0.2s, opacity 0.2s;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.input-field::placeholder {
+  color: var(--ui-input-placeholder);
+  font-weight: 400;
+  opacity: var(--ui-input-placeholder-opacity);
+}
+.input-field:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  color: var(--text-muted, #6b7280);
+}
+.input-field:read-only {
+  cursor: default;
+  color: var(--text-secondary, #374151);
+}
+
+:host(.variant-outlined) .input-container {
+  border: 1px solid var(--ui-input-border);
+  background: var(--ui-input-bg);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
+}
+
+:host(.variant-outlined.focused) .input-container {
+  border-color: var(--ui-input-focus) !important;
+  box-shadow: 0 0 0 3px rgba(var(--ui-input-focus-rgb, 99, 102, 241), 0.15), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
+}
+
+:host(.variant-filled) .input-container {
+  border-bottom: 2px solid transparent;
+  border-radius: 10px 10px 0 0;
+  border: none;
+  background: var(--ui-input-filled-bg);
+  box-shadow: inset 0 -1px 0 0 var(--border-strong, #d1d5db);
+}
+
+:host(.variant-filled.focused) .input-container {
+  background: var(--bg-primary, #e5e7eb);
+  border-bottom-color: var(--ui-input-focus);
+  box-shadow: inset 0 -2px 0 0 var(--ui-input-focus);
+}
+
+:host(.variant-underlined) .input-container {
+  border-bottom: 1px solid var(--ui-input-underlined-border, var(--border-strong, #d1d5db));
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
+  border: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+:host(.variant-underlined.focused) .input-container {
+  border-bottom-color: var(--ui-input-focus);
+  box-shadow: 0 1px 0 0 var(--ui-input-focus);
+}
+
+:host(.variant-soft) .input-container {
+  border: 1px solid var(--ui-input-soft-border);
+  background: var(--ui-input-soft-bg);
+  box-shadow: none;
+}
+
+:host(.variant-soft.focused) .input-container {
+  background: var(--ui-input-bg);
+  border-color: var(--ui-input-focus);
+  box-shadow: 0 0 0 3px rgba(var(--ui-input-focus-rgb, 99, 102, 241), 0.1), 0 2px 6px 0 rgba(0, 0, 0, 0.04) !important;
+}
+
+.variant-borderless .input-container,
+.variant-plain .input-container {
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+}
+
+.floating-label {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: transparent;
+  padding: 0 4px;
+  color: var(--ui-input-label, var(--label-subtitle-color));
+  pointer-events: none;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: 14px;
+  line-height: 1;
+  z-index: 2;
+}
+.input-wrapper.has-prefix .floating-label {
+  left: 56px;
+}
+.input-wrapper.has-prefix-text .floating-label {
+  left: 76px;
+}
+
+.focused .floating-label,
+.has-value .floating-label,
+.is-always-floated .floating-label {
+  top: 0;
+  left: 12px;
+  transform: translateY(-56%) scale(0.8);
+  transform-origin: left bottom;
+  background: var(--ui-input-bg);
+  padding: 0 6px;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--label-color, #111827);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  z-index: 5;
+}
+.input-wrapper.has-prefix .focused .floating-label,
+.input-wrapper.has-prefix .has-value .floating-label,
+.input-wrapper.has-prefix .is-always-floated .floating-label {
+  left: 56px;
+}
+.input-wrapper.has-prefix-text .focused .floating-label,
+.input-wrapper.has-prefix-text .has-value .floating-label,
+.input-wrapper.has-prefix-text .is-always-floated .floating-label {
+  left: 76px;
+}
+
+.prefix-text,
+.suffix-text,
+.prefix-icon,
+.suffix-icon {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  background: var(--ui-input-addon-bg);
+  border-color: var(--ui-input-addon-border);
+}
+.prefix-text.prefix-text, .prefix-text.prefix-icon,
+.suffix-text.prefix-text,
+.suffix-text.prefix-icon,
+.prefix-icon.prefix-text,
+.prefix-icon.prefix-icon,
+.suffix-icon.prefix-text,
+.suffix-icon.prefix-icon {
+  border-right: 1px solid var(--ui-input-addon-border);
+  border-radius: calc(var(--ui-input-radius) - 1px) 0 0 calc(var(--ui-input-radius) - 1px);
+  margin-right: 2px;
+}
+.prefix-text.suffix-text, .prefix-text.suffix-icon,
+.suffix-text.suffix-text,
+.suffix-text.suffix-icon,
+.prefix-icon.suffix-text,
+.prefix-icon.suffix-icon,
+.suffix-icon.suffix-text,
+.suffix-icon.suffix-icon {
+  border-left: 1px solid var(--ui-input-addon-border);
+  border-radius: 0 calc(var(--ui-input-radius) - 1px) calc(var(--ui-input-radius) - 1px) 0;
+  margin-left: 2px;
+}
+
+.prefix-text,
+.suffix-text,
+.prefix-icon,
+.suffix-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 12px;
+  color: var(--label-icon-color, var(--label-subtitle-color));
+  font-weight: 500;
+}
+.prefix-text--clickable,
+.suffix-text--clickable,
+.prefix-icon--clickable,
+.suffix-icon--clickable {
+  cursor: pointer;
+  border: none;
+  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
+  user-select: none;
+}
+.prefix-text--clickable:hover,
+.suffix-text--clickable:hover,
+.prefix-icon--clickable:hover,
+.suffix-icon--clickable:hover {
+  background: var(--ui-input-border-hover, rgba(var(--ui-input-focus-rgb, 99, 102, 241), 0.12));
+  filter: brightness(0.92);
+}
+.prefix-text--clickable:active,
+.suffix-text--clickable:active,
+.prefix-icon--clickable:active,
+.suffix-icon--clickable:active {
+  transform: scale(0.93);
+}
+.prefix-text--clickable:focus-visible,
+.suffix-text--clickable:focus-visible,
+.prefix-icon--clickable:focus-visible,
+.suffix-icon--clickable:focus-visible {
+  outline: 2px solid var(--ui-input-focus);
+  outline-offset: -2px;
+}
+
+.input-field-stack {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+}
+.input-field-stack .input-field {
+  flex: 1 !important;
+  z-index: 2 !important;
+  background: transparent !important;
+}
+
+.ghost-text-overlay {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: rgba(var(--ui-input-color-rgb), 0.35);
+  font-size: inherit;
+  padding-left: inherit;
+  z-index: 1;
+  white-space: pre;
+}
+
+.otp-container {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding: 6px 16px;
+  box-sizing: border-box;
+}
+.otp-container input.input-field {
+  position: absolute;
+  opacity: 0;
+  inset: 0;
+  z-index: 2;
+  cursor: pointer;
+}
+
+.otp-box {
+  flex: 0 0 auto;
+  width: 38px;
+  height: 46px;
+  max-width: 38px;
+  overflow: hidden;
+  border: 2px solid var(--ui-input-border);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 400;
+  background: var(--bg-primary, #ffffff);
+  transition: border-color 0.2s, box-shadow 0.2s;
+  line-height: 1;
+  user-select: none;
+}
+.otp-box.filled {
+  border-color: var(--ui-input-focus);
+  box-shadow: 0 0 0 3px rgba(var(--ui-input-focus-rgb), 0.15), 0 4px 12px rgba(var(--ui-input-focus-rgb), 0.12);
+}
+.otp-box.active {
+  border-color: var(--ui-input-focus);
+  box-shadow: 0 0 0 3px rgba(var(--ui-input-focus-rgb), 0.2);
+}
+.otp-box.active::after {
+  content: "";
+  width: 2px;
+  height: 1.2em;
+  background: var(--ui-input-focus);
+  animation: otp-cursor 1s infinite;
+}
+
+@keyframes otp-cursor {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+.has-gradient-border .clipping-layer::before {
+  content: "";
+  position: absolute;
+  inset: -150%;
+  background: conic-gradient(from 0deg, var(--color-primary, #8b5cf6), var(--color-danger, #ec4899), var(--color-success, #10b981), var(--color-warning, #f59e0b), var(--color-primary, #8b5cf6));
+  animation: spin-shader 4s linear infinite;
+  z-index: -1;
+}
+.has-gradient-border .input-container {
+  border-color: transparent !important;
+}
+
+@keyframes spin-shader {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.has-backdrop-sheen .clipping-layer::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -150%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  animation: sheen-flow 3s ease-in-out infinite;
+  transform: skewX(-20deg);
+}
+
+@keyframes sheen-flow {
+  0% {
+    left: -150%;
+  }
+  100% {
+    left: 150%;
+  }
+}
+.liquid-ripple {
+  position: absolute;
+  background: rgba(var(--ui-input-focus-rgb, 61, 205, 88), 0.25);
+  border-radius: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  pointer-events: none;
+  animation: ripple-animation 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes ripple-animation {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0.5;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(4);
+    opacity: 0;
+  }
+}
+.range-input-wrapper {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: 12px;
+  height: 100%;
+  padding: 0 14px;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  position: relative;
+}
+.range-input-wrapper input[type=range] {
+  -webkit-appearance: none;
+  appearance: none;
+  flex: 1;
+  background: transparent;
+  cursor: pointer;
+  height: 38px;
+  z-index: 2;
+  margin: 0;
+}
+.range-input-wrapper input[type=range]:focus {
+  outline: none;
+}
+.range-input-wrapper input[type=range]::-webkit-slider-runnable-track {
+  height: 6px;
+  background: linear-gradient(to right, var(--ui-input-focus) 0%, var(--ui-input-focus) var(--range-progress), var(--border-subtle, #e2e8f0) var(--range-progress), var(--border-subtle, #e2e8f0) 100%);
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+.range-input-wrapper input[type=range]::-moz-range-track {
+  height: 6px;
+  background: var(--border-subtle, #e2e8f0);
+  border-radius: 6px;
+}
+.range-input-wrapper input[type=range]::-moz-range-progress {
+  background: var(--ui-input-focus);
+  height: 6px;
+  border-radius: 6px 0 0 6px;
+}
+.range-input-wrapper input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 18px;
+  width: 18px;
+  background: #ffffff;
+  border: 2px solid var(--ui-input-focus);
+  border-radius: 50%;
+  margin-top: -6px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(var(--ui-input-focus-rgb), 0);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 10;
+}
+.range-input-wrapper input[type=range]:hover::-webkit-slider-thumb {
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(var(--ui-input-focus-rgb), 0.1);
+  transform: scale(1.1);
+}
+.range-input-wrapper input[type=range]:active::-webkit-slider-thumb {
+  transform: scale(0.95);
+  background: var(--ui-input-focus);
+  border-color: #ffffff;
+}
+.range-input-wrapper input[type=range]::-moz-range-thumb {
+  height: 16px;
+  width: 16px;
+  background: #ffffff;
+  border: 2px solid var(--ui-input-focus);
+  border-radius: 50%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+}
+.range-input-wrapper input[type=range]:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.range-input-wrapper input[type=range]:disabled::-webkit-slider-runnable-track {
+  background: var(--border-subtle, #e2e8f0);
+}
+.range-input-wrapper input[type=range]:disabled::-webkit-slider-thumb {
+  border-color: var(--text-muted);
+}
+.range-input-wrapper .range-manual-adornment {
+  display: flex;
+  align-items: center;
+  margin-left: 12px;
+}
+.range-input-wrapper .range-manual-input {
+  width: 60px;
+  height: 28px;
+  border: 1px solid var(--ui-input-focus);
+  border-radius: 6px;
+  background: rgba(var(--ui-input-focus-rgb), 0.05);
+  color: var(--ui-input-focus);
+  font-size: 13px;
+  font-weight: 700;
+  text-align: center;
+  outline: none;
+  transition: all 0.2s;
+  font-family: inherit;
+}
+.range-input-wrapper .range-manual-input::-webkit-inner-spin-button, .range-input-wrapper .range-manual-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.range-input-wrapper .range-manual-input:focus {
+  background: #ffffff;
+  box-shadow: 0 0 0 2px rgba(var(--ui-input-focus-rgb), 0.2);
+}
+
+.status-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+  margin: 0 8px;
+  padding: 4px 10px;
+  border-radius: 20px;
+  font-size: 11px;
+  font-weight: 700;
+  background: var(--bg-primary, #ffffff);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+.status-indicator .status-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+}
+.status-indicator.status-online {
+  color: var(--color-success);
+}
+.status-indicator.status-online .status-dot {
+  background: var(--color-success);
+  box-shadow: 0 0 10px var(--color-success);
+}
+.status-indicator.status-away {
+  color: var(--color-warning);
+}
+.status-indicator.status-away .status-dot {
+  background: var(--color-warning);
+  box-shadow: 0 0 10px var(--color-warning);
+}
+.status-indicator.status-listening {
+  color: var(--color-danger);
+  background: rgba(var(--color-danger-rgb, 239, 68, 68), 0.05);
+  border-color: rgba(var(--color-danger-rgb, 239, 68, 68), 0.2);
+}
+.status-indicator.status-listening .mic-pulse {
+  animation: mic-pulse 1.5s infinite;
+  font-size: 14px;
+}
+.status-indicator .status-label {
+  margin-left: 2px;
+  text-transform: capitalize;
+  color: var(--text-secondary);
+}
+
+@keyframes mic-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+.typing-animation {
+  display: inline-flex;
+  gap: 2px;
+}
+.typing-animation span {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: currentColor;
+  animation: typing-blink 1.4s infinite both;
+}
+.typing-animation span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.typing-animation span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes typing-blink {
+  0%, 80%, 100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+.linear-loading-bar {
+  position: absolute;
+  bottom: -1.5px;
+  left: -1.5px;
+  right: -1.5px;
+  height: 3px;
+  background: rgba(var(--ui-input-focus-rgb), 0.1);
+  overflow: hidden;
+  z-index: 5;
+}
+.linear-loading-bar::after {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, var(--ui-input-focus), transparent);
+  animation: linear-loading-flow 1.5s infinite;
+}
+
+@keyframes linear-loading-flow {
+  0% {
+    left: -50%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+.input-footer {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 13px;
+  margin-top: 6px;
+}
+
+.helper-text {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--ui-input-helper-color, var(--ui-input-helper));
+  flex: 1;
+}
+.helper-text .validation-icon {
+  font-size: 1.15em;
+}
+.helper-text.success-text {
+  color: var(--color-success, #10b981);
+}
+.helper-text.error-text {
+  color: var(--color-danger, #ef4444);
+}
+.helper-text.warning-text {
+  color: var(--color-warning, #f59e0b);
+}
+.helper-text.info-text {
+  color: var(--color-primary, #0ea5e9);
+}
+
+.character-counter {
+  color: var(--text-muted);
+  font-size: 12px;
+  margin-left: auto;
+}
+
+.autocomplete-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--ui-input-bg);
+  border: 1.5px solid var(--ui-input-border);
+  border-radius: 12px;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+  margin-top: 6px;
+  max-height: 280px;
+  overflow-y: auto;
+  z-index: 1000;
+  padding: 6px;
+}
+.autocomplete-dropdown .autocomplete-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.autocomplete-dropdown .autocomplete-item:hover {
+  background: rgba(var(--ui-input-focus-rgb), 0.08);
+  color: var(--ui-input-focus);
+  transform: translateX(4px);
+}
+
+.input-field[type=date],
+.input-field[type=datetime-local],
+.input-field[type=month],
+.input-field[type=week],
+.input-field[type=time] {
+  cursor: pointer;
+}
+.input-field[type=date]::-webkit-calendar-picker-indicator,
+.input-field[type=datetime-local]::-webkit-calendar-picker-indicator,
+.input-field[type=month]::-webkit-calendar-picker-indicator,
+.input-field[type=week]::-webkit-calendar-picker-indicator,
+.input-field[type=time]::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.15s ease;
+}
+.input-field[type=date]::-webkit-calendar-picker-indicator:hover,
+.input-field[type=datetime-local]::-webkit-calendar-picker-indicator:hover,
+.input-field[type=month]::-webkit-calendar-picker-indicator:hover,
+.input-field[type=week]::-webkit-calendar-picker-indicator:hover,
+.input-field[type=time]::-webkit-calendar-picker-indicator:hover {
+  opacity: 1;
+}
+
+.input-field[type=file] {
+  cursor: pointer;
+}
+.input-field[type=file]::-webkit-file-upload-button {
+  cursor: pointer;
+}
+.input-field[type=file]::file-selector-button {
+  cursor: pointer;
+}
+
+.input-field[type=color] {
+  cursor: pointer;
+}
+.input-field[type=color]::-webkit-color-swatch-wrapper, .input-field[type=color]::-webkit-color-swatch {
+  cursor: pointer;
+}
+
+.otp-container input.input-field {
+  cursor: pointer;
+}
+
+.otp-box {
+  cursor: pointer;
+}
+
+.shortcut-hint {
+  cursor: default;
+  user-select: none;
+}
+
+.dirty-indicator {
+  cursor: default;
+}
+
+@keyframes shake {
+  0%, 100% {
+    transform: translate3d(0, 0, 0);
+  }
+  10%, 90% {
+    transform: translate3d(-3px, 0, 0);
+  }
+  20%, 80% {
+    transform: translate3d(6px, 0, 0);
+  }
+  30%, 50%, 70% {
+    transform: translate3d(-10px, 0, 0);
+  }
+  40%, 60% {
+    transform: translate3d(10px, 0, 0);
+  }
+}