atomicuilibrary 0.0.1

package/dist/collection/components/button/button.css

@@ -0,0 +1,1862 @@
+@charset "UTF-8";
+.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;
+}
+
+.btn-label-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  transition: all 0.2s ease;
+}
+.btn-label-row.icon-pos-left {
+  flex-direction: row;
+}
+.btn-label-row.icon-pos-right {
+  flex-direction: row-reverse;
+}
+.btn-label-row.icon-pos-top {
+  flex-direction: column;
+}
+.btn-label-row.icon-pos-bottom {
+  flex-direction: column-reverse;
+}
+
+.btn-label-block {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  align-items: center;
+  text-align: center;
+}
+
+.icon-pos-left .btn-label-block {
+  align-items: flex-start;
+  text-align: left;
+}
+
+.icon-pos-right .btn-label-block {
+  align-items: flex-end;
+  text-align: right;
+}
+
+.icon-pos-top .btn-label-block,
+.icon-pos-bottom .btn-label-block,
+.icon-pos-none .btn-label-block {
+  align-items: center;
+  text-align: center;
+}
+
+.btn-title {
+  font-size: inherit;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.btn-subtitle {
+  font-size: 0.85em;
+  font-weight: 400;
+  color: var(--btn-subtitle-color, var(--label-subtitle-color, var(--dd-muted, #62748a)));
+  line-height: 1.2;
+  opacity: 1;
+  transition: color 0.2s ease;
+  margin-top: 2px;
+}
+.btn-subtitle.btn-subtitle-above {
+  margin-top: 0;
+  margin-bottom: 2px;
+}
+
+.btn-icon-block {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+:host {
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  position: relative;
+  /* Added for absolute badge positioning */
+}
+
+:host(.is-full-width) {
+  display: block;
+  width: 100%;
+}
+
+:host(.is-grow) {
+  flex: 1;
+  display: inline-flex;
+}
+
+/* Base Button */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.btn.btn-align-start {
+  justify-content: flex-start;
+  text-align: left;
+}
+.btn.btn-align-start .btn-label-block {
+  align-items: flex-start;
+  text-align: left;
+}
+.btn.btn-align-end {
+  justify-content: flex-end;
+  text-align: right;
+}
+.btn.btn-align-end .btn-label-block {
+  align-items: flex-end;
+  text-align: right;
+}
+.btn.btn-align-center {
+  justify-content: center;
+  text-align: center;
+}
+.btn.btn-align-center .btn-label-block {
+  align-items: center;
+  text-align: center;
+}
+.btn.btn-justify-start {
+  justify-content: flex-start;
+}
+.btn.btn-justify-end {
+  justify-content: flex-end;
+}
+.btn.btn-justify-center {
+  justify-content: center;
+}
+.btn.btn-justify-between {
+  justify-content: space-between;
+}
+.btn.btn-justify-around {
+  justify-content: space-around;
+}
+.btn .btn-content,
+.btn .btn-label-row {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: inherit;
+  min-width: 0;
+  width: 100%;
+  gap: 8px;
+}
+.btn .btn-content.is-vertical,
+.btn .btn-label-row.is-vertical {
+  flex-direction: column;
+  justify-content: center;
+}
+.btn .btn-label-block {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+  justify-content: center;
+}
+.btn .btn-label-block .btn-title {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  align-items: center;
+  justify-content: inherit;
+}
+.btn {
+  position: relative;
+  width: var(--button-width, auto);
+  height: var(--ui-button-height, 40px);
+  min-height: 100%;
+  padding: var(--button-padding, 0 20px);
+  border: 1px solid transparent;
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  font-family: inherit;
+  font-weight: var(--button-font-weight, 600);
+  font-size: var(--button-font-size, 14px);
+  line-height: var(--button-line-height, normal);
+  white-space: nowrap;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: visible;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  color: var(--text-primary, #000);
+  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2);
+}
+.btn.btn-is-vertical {
+  height: auto;
+  min-height: var(--ui-button-height, 44px);
+  padding: 10px 16px;
+}
+.btn.btn-is-vertical .btn-label-block {
+  align-items: center;
+  text-align: center;
+}
+.btn.btn-type-image {
+  background: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+  width: auto;
+  height: auto;
+  min-width: 0;
+}
+.btn.btn-type-image .btn-image {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+}
+
+@media (hover: hover) {
+  .btn:hover:not(.btn-disabled) {
+    box-shadow: 0 4px 14px rgba(var(--color-primary-rgb, 59, 130, 246), 0.25);
+    filter: brightness(1.08);
+    transform: scale(1.01);
+  }
+}
+.btn:active:not(.btn-disabled) {
+  transform: scale(0.97);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
+  filter: brightness(0.94);
+  transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.btn-selected {
+  background: var(--btn-selected-bg, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1));
+  border-color: var(--btn-selected-border, var(--color-primary, #3b82f6));
+  color: var(--btn-selected-color, var(--color-primary, #3b82f6));
+  z-index: 2;
+}
+.btn-selected[style*="--hide-button-selection: 1"] {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+
+.btn-shortcut {
+  font-size: 0.8em;
+  padding: 1px 4px;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  margin-inline-start: 6px;
+  font-family: monospace;
+  opacity: 0.7;
+  letter-spacing: 1px;
+}
+
+.btn-primary .btn-shortcut {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.btn-outline .btn-shortcut {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.btn:focus-visible {
+  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.4);
+}
+
+/* Variants */
+.btn-primary {
+  background: var(--color-primary, #10b981);
+  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2);
+}
+
+.btn-secondary {
+  background: var(--color-primary, #6b7280);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.btn-success {
+  background: var(--color-success, #10b981);
+  box-shadow: 0 2px 8px rgba(var(--color-success-rgb, 16, 185, 129), 0.2);
+}
+
+.btn-danger {
+  background: var(--color-danger, #ef4444);
+  box-shadow: 0 2px 8px rgba(var(--color-danger-rgb, 239, 68, 68), 0.2);
+}
+
+.btn-warning {
+  background: var(--color-warning, #f59e0b);
+  box-shadow: 0 2px 8px rgba(var(--color-warning-rgb, 245, 158, 11), 0.2);
+}
+
+.btn-info {
+  background: var(--color-primary, #10b981);
+  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2);
+}
+
+.btn-dark {
+  background: var(--bg-primary, #1f2937);
+  color: var(--text-standard, #ffffff);
+}
+
+/*
+ * Outline / ghost / raised / plain variants: text color follows the strict
+ * black-or-white label tokens defined in the theme files.
+ *   Light theme → near-black   (#0a0a0a)
+ *   Dark  theme → near-white   (#f5f5f5)
+ *
+ * Override per-instance:  style="--btn-label-color: #your-color"
+ * Override globally:      set --label-color on :root / .theme-*
+ */
+.btn-outline {
+  background: transparent;
+  border-color: var(--border-strong, #d1d5db);
+  color: var(--btn-label-color, var(--label-color, var(--text-secondary, #374151)));
+  box-shadow: none;
+}
+
+.btn-outline:hover:not(.btn-disabled) {
+  border-color: var(--color-primary, #9ca3af);
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--btn-label-color, var(--label-color, var(--text-secondary, #374151)));
+  box-shadow: none;
+}
+
+.btn-ghost:hover:not(.btn-disabled) {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.btn-plain {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  color: inherit;
+  padding: 0;
+  height: 100%;
+  min-width: 0;
+  width: 100%;
+  border-radius: inherit;
+}
+.btn-plain:hover:not(.btn-disabled) {
+  transform: none;
+  box-shadow: none;
+  filter: none;
+  background: transparent;
+}
+.btn-plain:active:not(.btn-disabled) {
+  transform: none;
+  filter: none;
+}
+
+.btn-raised {
+  background: var(--bg-primary, #ffffff);
+  color: var(--btn-label-color, var(--label-color, var(--text-primary, #1f2937)));
+  border: 1px solid var(--border-default, #e5e7eb);
+  border-bottom: 3px solid var(--border-strong, #d1d5db);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.btn-raised:active:not(.btn-disabled) {
+  border-bottom-width: 1px;
+  transform: translateY(2px);
+}
+
+.btn-glass {
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: inherit;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.btn-glass:hover:not(.btn-disabled) {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+/* Soft Variant (Premium Refinement) */
+.btn-soft {
+  color: var(--label-color, var(--text-primary, #1e293b));
+  border-color: transparent;
+  box-shadow: none;
+}
+.btn-soft:hover:not(.btn-disabled) {
+  background: var(--btn-soft-hover-bg, rgba(var(--color-primary-rgb, 59, 130, 246), 0.12));
+  transform: translateY(-1px);
+}
+.btn-soft.btn-success {
+  background: rgba(var(--color-success-rgb, 16, 185, 129), 0.1);
+  color: var(--label-color, #10b981);
+}
+.btn-soft.btn-success:hover:not(.btn-disabled) {
+  background: rgba(var(--color-success-rgb, 16, 185, 129), 0.16);
+}
+.btn-soft.btn-danger {
+  background: rgba(var(--color-danger-rgb, 239, 68, 68), 0.1);
+  color: var(--label-color, #ef4444);
+}
+.btn-soft.btn-danger:hover:not(.btn-disabled) {
+  background: rgba(var(--color-danger-rgb, 239, 68, 68), 0.16);
+}
+.btn-soft.btn-warning {
+  background: rgba(var(--color-warning-rgb, 245, 158, 11), 0.1);
+  color: var(--label-color, #f59e0b);
+}
+.btn-soft.btn-warning:hover:not(.btn-disabled) {
+  background: rgba(var(--color-warning-rgb, 245, 158, 11), 0.16);
+}
+.btn-soft.btn-info {
+  background: rgba(var(--color-info-rgb, 6, 182, 212), 0.1);
+  color: var(--label-color, #06b6d4);
+}
+.btn-soft.btn-info:hover:not(.btn-disabled) {
+  background: rgba(var(--color-info-rgb, 6, 182, 212), 0.16);
+}
+
+/* Accordion Specific Variant (Pure Layout) */
+.btn-accordion {
+  background: transparent;
+  color: var(--btn-label-color, var(--label-color, var(--text-secondary, #374151)));
+  box-shadow: none;
+  width: 100%;
+  --button-padding: 16px 0px;
+  --ui-button-height: auto;
+  justify-content: space-between !important;
+  border: none;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.btn-accordion:hover:not(.btn-disabled) {
+  background: transparent;
+  transform: none !important;
+  box-shadow: none !important;
+  filter: none !important;
+}
+
+.btn-accordion:active:not(.btn-disabled) {
+  transform: none !important;
+  background: transparent;
+  box-shadow: none !important;
+  filter: none !important;
+}
+
+.btn-accordion:focus-visible,
+.btn-accordion:focus,
+.btn-accordion:active {
+  outline: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+}
+
+/* ===================== Gradient Variants ===================== */
+/* Green (default brand gradient) */
+.btn-gradient {
+  background: linear-gradient(135deg, var(--color-success, #3dcd58) 0%, var(--color-success, #00b894) 100%);
+  color: var(--text-standard, #ffffff);
+  border: none;
+  box-shadow: 0 4px 15px rgba(var(--color-success-rgb, 61, 205, 88), 0.35);
+}
+
+.btn-gradient:hover:not(.btn-disabled) {
+  background: linear-gradient(135deg, var(--color-success, #2ebd4a) 0%, var(--color-success, #00a381) 100%);
+  box-shadow: 0 6px 20px rgba(var(--color-success-rgb, 61, 205, 88), 0.5);
+  transform: translateY(-1px);
+}
+
+.btn-gradient:active:not(.btn-disabled) {
+  box-shadow: 0 2px 8px rgba(var(--color-success-rgb, 61, 205, 88), 0.3);
+  transform: translateY(0);
+}
+
+/* Blue → Purple */
+.btn-gradient-blue {
+  background: linear-gradient(135deg, var(--color-primary, #10b981) 0%, var(--color-primary, #8b5cf6) 100%);
+  color: var(--text-standard, #ffffff);
+  border: none;
+  box-shadow: 0 4px 15px rgba(var(--color-primary-rgb, 59, 130, 246), 0.35);
+}
+
+.btn-gradient-blue:hover:not(.btn-disabled) {
+  background: linear-gradient(135deg, var(--color-primary-hover, #2563eb) 0%, var(--color-primary, #7c3aed) 100%);
+  box-shadow: 0 6px 20px rgba(var(--color-primary-rgb, 59, 130, 246), 0.5);
+  transform: translateY(-1px);
+}
+
+.btn-gradient-blue:active:not(.btn-disabled) {
+  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3);
+  transform: translateY(0);
+}
+
+/* Purple → Pink */
+.btn-gradient-purple {
+  background: linear-gradient(135deg, var(--color-primary, #8b5cf6) 0%, var(--color-danger, #ec4899) 100%);
+  color: var(--text-standard, #ffffff);
+  border: none;
+  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.35);
+}
+
+.btn-gradient-purple:hover:not(.btn-disabled) {
+  background: linear-gradient(135deg, var(--color-primary, #7c3aed) 0%, var(--color-danger, #db2777) 100%);
+  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
+  transform: translateY(-1px);
+}
+
+.btn-gradient-purple:active:not(.btn-disabled) {
+  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
+  transform: translateY(0);
+}
+
+/* Orange → Red */
+.btn-gradient-orange {
+  background: linear-gradient(135deg, var(--color-danger, #f97316) 0%, var(--color-danger, #ef4444) 100%);
+  color: var(--text-standard, #ffffff);
+  border: none;
+  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.35);
+}
+
+.btn-gradient-orange:hover:not(.btn-disabled) {
+  background: linear-gradient(135deg, var(--color-danger, #ea6c0a) 0%, var(--color-danger-hover, #dc2626) 100%);
+  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
+  transform: translateY(-1px);
+}
+
+.btn-gradient-orange:active:not(.btn-disabled) {
+  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
+  transform: translateY(0);
+}
+
+/* Blue → Teal (Ocean) */
+.btn-gradient-ocean {
+  background: linear-gradient(135deg, var(--color-primary, #0ea5e9) 0%, var(--color-info, #06b6d4) 100%);
+  color: var(--text-standard, #ffffff);
+  border: none;
+  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.35);
+}
+
+.btn-gradient-ocean:hover:not(.btn-disabled) {
+  background: linear-gradient(135deg, var(--color-primary, #0284c7) 0%, var(--color-info-hover, #0891b2) 100%);
+  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5);
+  transform: translateY(-1px);
+}
+
+.btn-gradient-ocean:active:not(.btn-disabled) {
+  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
+  transform: translateY(0);
+}
+
+/* Orange → Yellow (Sunset) */
+.btn-gradient-sunset {
+  background: linear-gradient(135deg, var(--color-warning, #f59e0b) 0%, var(--color-danger, #f97316) 100%);
+  color: var(--text-standard, #ffffff);
+  border: none;
+  box-shadow: 0 4px 15px rgba(var(--color-warning-rgb, 245, 158, 11), 0.35);
+}
+
+.btn-gradient-sunset:hover:not(.btn-disabled) {
+  background: linear-gradient(135deg, var(--color-warning-hover, #d97706) 0%, var(--color-danger, #ea6c0a) 100%);
+  box-shadow: 0 6px 20px rgba(var(--color-warning-rgb, 245, 158, 11), 0.5);
+  transform: translateY(-1px);
+}
+
+.btn-gradient-sunset:active:not(.btn-disabled) {
+  box-shadow: 0 2px 8px rgba(var(--color-warning-rgb, 245, 158, 11), 0.3);
+  transform: translateY(0);
+}
+
+/* Pink → Red (Candy) */
+.btn-gradient-candy {
+  background: linear-gradient(135deg, var(--color-danger, #ec4899) 0%, var(--color-danger, #ef4444) 100%);
+  color: var(--text-standard, #ffffff);
+  border: none;
+  box-shadow: 0 4px 15px rgba(236, 72, 153, 0.35);
+}
+
+.btn-gradient-candy:hover:not(.btn-disabled) {
+  background: linear-gradient(135deg, var(--color-danger, #db2777) 0%, var(--color-danger-hover, #dc2626) 100%);
+  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.5);
+  transform: translateY(-1px);
+}
+
+.btn-gradient-candy:active:not(.btn-disabled) {
+  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
+  transform: translateY(0);
+}
+
+/* Yellow → Gold */
+.btn-gradient-gold {
+  background: linear-gradient(135deg, var(--color-danger, #fbbf24) 0%, var(--color-warning-hover, #d97706) 100%);
+  color: var(--text-standard, #ffffff);
+  border: none;
+  box-shadow: 0 4px 15px rgba(251, 191, 36, 0.35);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+.btn-gradient-gold:hover:not(.btn-disabled) {
+  background: linear-gradient(135deg, var(--color-warning, #f59e0b) 0%, var(--color-danger, #b45309) 100%);
+  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.5);
+  transform: translateY(-1px);
+}
+
+.btn-gradient-gold:active:not(.btn-disabled) {
+  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
+  transform: translateY(0);
+}
+
+/* ============================================================ */
+/* Sizes & Height Consistency */
+.btn-xxxs {
+  --ui-button-height: 20px;
+  font-size: 10px;
+  padding: 0 6px;
+}
+
+.btn-xxs {
+  --ui-button-height: 24px;
+  font-size: 11px;
+  padding: 0 8px;
+}
+
+.btn-xs {
+  --ui-button-height: 28px;
+  font-size: 12px;
+  padding: 0 10px;
+}
+
+.btn-sm {
+  --ui-button-height: 32px;
+  font-size: 13px;
+  padding: 0 12px;
+}
+
+.btn-md {
+  --ui-button-height: 44px;
+  /* W3C Mobile Standard */
+  font-size: 14px;
+  padding: 0 18px;
+}
+
+.btn-lg {
+  --ui-button-height: 52px;
+  font-size: 15px;
+  padding: 0 22px;
+}
+
+.btn-xl {
+  --ui-button-height: 60px;
+  font-size: 16px;
+  padding: 0 28px;
+}
+
+.btn-xxl {
+  --ui-button-height: 68px;
+  font-size: 18px;
+  padding: 0 36px;
+}
+
+.btn-xxxl {
+  --ui-button-height: 84px;
+  font-size: 20px;
+  padding: 0 48px;
+}
+
+/* Shapes & Icon Only Overrides */
+.btn-shape-square,
+.btn-shape-sharp {
+  border-radius: 0;
+}
+
+.btn-shape-rounded {
+  border-radius: var(--button-border-radius, 8px);
+}
+
+.btn-shape-rounded-lg {
+  border-radius: var(--button-border-radius, 12px);
+}
+
+.btn-shape-pill,
+.btn-shape-oval {
+  border-radius: var(--button-border-radius, 9999px);
+  padding-left: 1.5rem !important;
+  padding-right: 1.5rem !important;
+}
+
+.btn-icon-only {
+  padding: 0 !important;
+  width: var(--ui-button-height, 40px) !important;
+  min-width: var(--ui-button-height, 40px) !important;
+  max-width: var(--ui-button-height, 40px) !important;
+  flex: 0 0 var(--ui-button-height, 40px) !important;
+  aspect-ratio: 1/1 !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.btn-icon-only .btn-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  gap: 0;
+}
+.btn-icon-only .btn-label-group {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  gap: 0;
+}
+.btn-icon-only .btn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+}
+.btn-icon-only .btn-label {
+  margin: 0;
+  font-size: 0.95em;
+  font-weight: 700;
+  line-height: 1;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.btn-shape-circle {
+  border-radius: 50% !important;
+  aspect-ratio: 1/1 !important;
+  padding: 0 !important;
+  width: var(--ui-button-height, 40px) !important;
+  min-width: var(--ui-button-height, 40px) !important;
+  max-width: var(--ui-button-height, 40px) !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn-shape-chip {
+  border-radius: 100px;
+  height: 28px !important;
+  font-size: 11px;
+  padding: 0 12px;
+}
+
+/* States */
+.btn-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  filter: grayscale(0.8);
+  pointer-events: none;
+}
+
+.btn-loading {
+  cursor: wait;
+}
+
+.btn-selected {
+  /* Use a refined, professional tinted background with a soft inner stroke */
+  background: var(--btn-selected-bg, rgba(var(--color-primary-rgb, 59, 130, 246), 0.12));
+  color: var(--btn-selected-color, var(--color-primary, #2563eb));
+  font-weight: 700;
+  outline: none;
+  box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb, 59, 130, 246), 0.25);
+}
+.btn-selected::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: 0 0 8px rgba(var(--color-primary-rgb, 59, 130, 246), 0.15);
+  pointer-events: none;
+  z-index: -1;
+}
+
+.btn-ghost.btn-selected {
+  background: var(--btn-selected-bg, rgba(37, 99, 235, 0.1));
+  color: var(--btn-selected-color, var(--text-standard));
+}
+
+.btn-ghost.btn-selected:hover:not(.btn-disabled) {
+  background: var(--btn-selected-hover-bg, rgba(37, 99, 235, 0.16));
+}
+
+/* Layout Container */
+.btn-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: auto;
+  min-width: 0;
+  max-width: 100%;
+  position: relative;
+  z-index: 1;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.btn-icon-pos-left .btn-label-row {
+  flex-direction: row;
+}
+
+.btn-icon-pos-right .btn-label-row {
+  flex-direction: row;
+}
+
+.btn-icon-pos-top,
+.btn-icon-pos-bottom {
+  height: auto;
+  min-height: var(--ui-button-height);
+  padding-top: 10px !important;
+  padding-bottom: 10px !important;
+}
+.btn-icon-pos-top .btn-label-row,
+.btn-icon-pos-bottom .btn-label-row {
+  gap: 4px !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+.btn-icon-pos-top .btn-title-block,
+.btn-icon-pos-bottom .btn-title-block {
+  align-items: center !important;
+  text-align: center !important;
+}
+
+.btn-icon-pos-top .btn-label-row {
+  flex-direction: column;
+}
+
+.btn-icon-pos-bottom .btn-label-row {
+  flex-direction: column;
+}
+
+.btn-label-group {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+.btn-label-group.is-column {
+  flex-direction: column;
+  gap: 4px;
+}
+
+.btn-counter {
+  margin-inline-start: 8px;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
+/* Components */
+.btn-icon,
+.btn-spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.btn-label {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: normal;
+}
+
+/* Image Features */
+.btn-img {
+  height: 1.5em;
+  width: auto;
+  margin: 0 4px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.btn-avatar {
+  position: relative;
+  flex-shrink: 0;
+  border-radius: 50%;
+  overflow: visible;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--ui-button-height) * 0.65);
+  height: calc(var(--ui-button-height) * 0.65);
+  background: rgba(0, 0, 0, 0.05);
+  margin-right: 8px;
+}
+.btn-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+.btn-avatar .status-dot {
+  position: absolute;
+  bottom: -1px;
+  right: -1px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 1.5px solid var(--bg-primary, #ffffff);
+  z-index: 1;
+}
+.btn-avatar .status-dot.status-online {
+  background-color: var(--color-success, #10b981);
+}
+.btn-avatar .status-dot.status-offline {
+  background-color: var(--text-muted, #6b7280);
+}
+.btn-avatar .status-dot.status-busy {
+  background-color: var(--color-danger, #ef4444);
+}
+.btn-avatar .status-dot.status-away {
+  background-color: var(--color-warning, #f59e0b);
+}
+
+/* Icon only version doesn't need margin */
+.btn-icon-only .btn-avatar,
+.btn-shape-circle .btn-avatar {
+  margin-inline-end: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+.btn-icon-only .btn-avatar img,
+.btn-shape-circle .btn-avatar img {
+  border-radius: inherit;
+}
+
+.btn-has-bg {
+  background-size: cover;
+  background-position: center;
+  position: relative;
+}
+
+.btn-has-bg::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  transition: opacity 0.2s;
+}
+
+.btn-has-bg:hover::before {
+  background: rgba(0, 0, 0, 0.4);
+}
+
+/* Elevation Levels */
+.elevation-0 {
+  box-shadow: none;
+}
+
+.elevation-1 {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.elevation-2 {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
+}
+
+.elevation-3 {
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+}
+
+.elevation-4 {
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
+}
+
+.elevation-5 {
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+}
+
+/* Badges */
+ui-badge.is-inline {
+  margin: 0px;
+}
+
+ui-badge.is-absolute {
+  position: absolute;
+  z-index: 10;
+  pointer-events: none;
+  width: 0;
+  height: 0;
+}
+
+/* Perfect Corner Anchors - Let ui-badge's internal transforms handle the overlap */
+.pos-top-right {
+  top: -1rem;
+  inset-inline-end: 0;
+}
+
+.pos-top-left {
+  top: -1rem;
+  inset-inline-start: 0;
+}
+
+.pos-bottom-right {
+  bottom: 1rem;
+  inset-inline-end: 0;
+}
+
+.pos-bottom-left {
+  bottom: 1rem;
+  inset-inline-start: 0;
+}
+
+/* Ripple Container */
+.btn-ripple-container {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 0;
+}
+
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  transform: scale(0);
+  animation: ripple-anim 0.6s linear;
+}
+
+@keyframes ripple-anim {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+/* ===== NEW PREMIUM FEATURES ===== */
+/* Soft Variants */
+.btn-soft {
+  box-shadow: none;
+  border: none;
+}
+.btn-soft.btn-primary, .btn-soft.btn-success, .btn-soft.btn-danger, .btn-soft.btn-warning, .btn-soft.btn-info {
+  color: var(--label-color);
+}
+.btn-soft.btn-secondary {
+  color: var(--label-subtitle-color);
+}
+.btn-soft:hover:not(.btn-disabled) {
+  background: currentColor;
+  color: var(--text-standard, #ffffff);
+  filter: none;
+}
+
+/* Force Active State */
+.btn-active {
+  transform: translateY(1px);
+  filter: brightness(0.9) !important;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Skeleton State */
+.btn-skeleton {
+  pointer-events: none;
+  background: var(--bg-secondary, #f1f5f9) !important;
+  border: none !important;
+  color: transparent !important;
+  box-shadow: none !important;
+  position: relative;
+  overflow: hidden;
+}
+.btn-skeleton * {
+  opacity: 0 !important;
+}
+.btn-skeleton::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
+  animation: btn-shimmer 1.5s infinite;
+}
+
+@keyframes btn-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+/* Gradient Presets */
+.btn-gradient-sunset {
+  background: linear-gradient(135deg, var(--color-primary, #f093fb) 0%, var(--color-danger, #f5576c) 100%);
+  color: var(--bg-primary, var(--text-standard, #ffffff));
+}
+
+.btn-gradient-ocean {
+  background: linear-gradient(135deg, var(--color-primary, #4facfe) 0%, var(--color-primary, #00f2fe) 100%);
+  color: var(--bg-primary, var(--text-standard, #ffffff));
+}
+
+.btn-gradient-midnight {
+  background: linear-gradient(135deg, var(--bg-primary, #232526) 0%, var(--bg-secondary, #414345) 100%);
+  color: var(--bg-primary, var(--text-standard, #ffffff));
+}
+
+.btn-gradient-forest {
+  background: linear-gradient(135deg, var(--color-primary, #11998e) 0%, var(--color-success, #38ef7d) 100%);
+  color: var(--bg-primary, var(--text-standard, #ffffff));
+}
+
+.btn-gradient-blaze {
+  background: linear-gradient(135deg, var(--color-danger, #ff512f) 0%, var(--color-danger, #dd2476) 100%);
+  color: var(--bg-primary, var(--text-standard, #ffffff));
+}
+
+/* Dropdown Support */
+.btn-dropdown-icon {
+  margin-inline-start: 4px;
+  display: flex;
+  align-items: center;
+  opacity: 0.8;
+  transition: transform 0.2s;
+}
+
+.btn:hover .btn-dropdown-icon {
+  transform: translateY(1px);
+}
+
+/* ===== LEGENDARY FEATURES ===== */
+/* Magnetic Pull & 3D Tilt */
+.btn-magnetic,
+.btn-tilt {
+  transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+  will-change: transform;
+  transform-style: preserve-3d;
+}
+
+/* Glow Mode */
+.btn-glow {
+  position: relative;
+}
+.btn-glow::before {
+  content: "";
+  position: absolute;
+  inset: -2px;
+  background: currentColor;
+  border-radius: inherit;
+  filter: blur(8px);
+  opacity: 0.4;
+  z-index: -1;
+  animation: btn-glow-pulse 2s ease-in-out infinite;
+}
+
+@keyframes btn-glow-pulse {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.05);
+  }
+}
+/* Confetti Particles */
+.confetti-particle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  background-color: var(--particle-color);
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 10;
+  animation: confetti-burst 0.8s ease-out forwards;
+}
+
+@keyframes confetti-burst {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(calc(cos(var(--particle-angle)) * 100px * var(--particle-velocity)), calc(sin(var(--particle-angle)) * 100px * var(--particle-velocity))) rotate(720deg) scale(0);
+    opacity: 0;
+  }
+}
+/* Utility to ensure currentColor works for glow */
+.btn-primary.btn-glow {
+  color: var(--bg-primary, var(--text-standard, #ffffff));
+}
+.btn-primary.btn-glow::before {
+  background: var(--ui-primary, var(--color-success, #3dcd58));
+}
+
+.btn-success.btn-glow {
+  color: var(--bg-primary, var(--text-standard, #ffffff));
+}
+.btn-success.btn-glow::before {
+  background: var(--ui-success, var(--color-success, #10b981));
+}
+
+.btn-danger.btn-glow {
+  color: var(--bg-primary, var(--text-standard, #ffffff));
+}
+.btn-danger.btn-glow::before {
+  background: var(--ui-danger, var(--color-danger, #ef4444));
+}
+
+.btn-warning.btn-glow {
+  color: var(--bg-primary, var(--text-standard, #ffffff));
+}
+.btn-warning.btn-glow::before {
+  background: var(--ui-warning, var(--color-warning, #f59e0b));
+}
+
+.btn-info.btn-glow {
+  color: var(--bg-primary, var(--text-standard, #ffffff));
+}
+.btn-info.btn-glow::before {
+  background: var(--ui-info, var(--color-info-hover, #0891b2));
+}
+
+/* Glossy Sweep Effect */
+.btn-glossy {
+  position: relative;
+  overflow: hidden;
+}
+.btn-glossy::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 50%;
+  height: 100%;
+  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
+  transform: skewX(-25deg);
+  animation: glossy-sweep 4s infinite ease-in-out;
+}
+
+@keyframes glossy-sweep {
+  0% {
+    left: -100%;
+  }
+  30% {
+    left: 150%;
+  }
+  100% {
+    left: 150%;
+  }
+}
+/* Icon Swap Transition */
+.btn-icon {
+  display: inline-flex;
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.btn-icon ui-icon {
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.btn:hover .btn-icon ui-icon {
+  transform: scale(1.1);
+}
+
+/* Hold Progress Track */
+.btn-hold-track {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.15);
+  pointer-events: none;
+  z-index: 0;
+  transition: width 0.05s linear;
+}
+
+/* Custom Hex Theme Support */
+.btn-has-theme {
+  --btn-theme-bg: var(--btn-theme-color, var(--color-primary, #10b981));
+  --btn-theme-text: var(--text-standard, #ffffff);
+  background: var(--btn-theme-bg);
+  color: var(--btn-theme-text);
+  border: none;
+}
+.btn-has-theme:hover:not(.btn-disabled) {
+  background: color-mix(in srgb, var(--btn-theme-bg), #000 10%);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--btn-theme-bg), transparent 70%);
+}
+.btn-has-theme.btn-outline {
+  background: transparent;
+  color: var(--btn-theme-bg);
+  border: 1px solid var(--btn-theme-bg);
+}
+.btn-has-theme.btn-outline:hover:not(.btn-disabled) {
+  background: var(--btn-theme-bg);
+  color: var(--text-standard, #ffffff);
+}
+.btn-has-theme.btn-soft {
+  color: var(--btn-theme-bg);
+}
+.btn-has-theme.btn-soft:hover:not(.btn-disabled) {
+  background: var(--btn-theme-bg);
+  color: var(--text-standard, #ffffff);
+}
+
+/* Action Progress Track */
+.btn-progress-track {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: color-mix(in srgb, currentColor, transparent 80%);
+  z-index: 1;
+  pointer-events: none;
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.btn-primary .btn-progress-track {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.btn-outline .btn-progress-track {
+  background: color-mix(in srgb, currentColor, transparent 85%);
+}
+
+/* Accordion Variant */
+.btn-accordion {
+  background: transparent;
+  border: none;
+  padding: 0;
+  height: auto;
+  min-height: 48px;
+  width: 100%;
+  border-radius: 0;
+  box-shadow: none;
+  color: inherit;
+  --button-width: 100%;
+}
+.btn-accordion .btn-content,
+.btn-accordion .btn-label-row {
+  padding: 0 20px;
+  justify-content: space-between;
+}
+.btn-accordion .btn-label-block,
+.btn-accordion .btn-title {
+  align-items: stretch;
+  text-align: left;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.btn-accordion:hover:not(.btn-disabled) {
+  background: rgba(0, 0, 0, 0.02);
+  transform: none;
+  box-shadow: none;
+  filter: none;
+}
+.btn-accordion:active:not(.btn-disabled) {
+  background: rgba(0, 0, 0, 0.05);
+  transform: none;
+}
+
+/* ===== HYPER-ELITE FEATURES ===== */
+/* Interaction Shake */
+.btn-shaking {
+  animation: btn-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+}
+
+@keyframes btn-shake {
+  10%, 90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+  20%, 80% {
+    transform: translate3d(2px, 0, 0);
+  }
+  30%, 50%, 70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+  40%, 60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
+/* Rainbow Glow */
+.btn-rainbow.btn-glow::before {
+  animation: btn-rainbow-glow 4s linear infinite;
+  opacity: 0.6;
+}
+
+@keyframes btn-rainbow-glow {
+  0% {
+    background: var(--color-danger, #ff0000);
+    filter: hue-rotate(0deg) blur(10px);
+  }
+  100% {
+    background: var(--color-danger, #ff0000);
+    filter: hue-rotate(360deg) blur(10px);
+  }
+}
+/* Liquid Wave Progress */
+.btn-liquid-progress {
+  overflow: hidden;
+}
+.btn-liquid-progress::after {
+  content: "";
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 38%;
+  animation: btn-liquid-wave 3s linear infinite;
+}
+
+@keyframes btn-liquid-wave {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* Split Button Support */
+.btn-split {
+  padding-right: 0 !important;
+}
+.btn-split .btn-dropdown-icon {
+  height: 100%;
+  padding: 0 12px;
+  margin-inline-start: 8px;
+  border-inline-start: 1px solid rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  transition: background 0.2s;
+}
+.btn-split .btn-dropdown-icon:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+/* Confirmation Bubble */
+.btn-confirm-pop {
+  position: absolute;
+  bottom: calc(100% + 12px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--bg-primary, #1f2937);
+  color: var(--text-standard, #ffffff);
+  padding: 12px 16px;
+  border-radius: 12px;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  white-space: nowrap;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  z-index: 100;
+  animation: pop-in 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.btn-confirm-pop::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 6px solid transparent;
+  border-top-color: var(--border-strong, #1f2937);
+}
+.btn-confirm-pop .pop-actions {
+  display: flex;
+  gap: 6px;
+}
+.btn-confirm-pop .pop-actions button {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  transition: transform 0.1s;
+}
+.btn-confirm-pop .pop-actions button:active {
+  transform: scale(0.9);
+}
+.btn-confirm-pop .pop-actions .pop-btn-no {
+  background: var(--text-secondary, #374151);
+  color: var(--bg-primary, #ffffff);
+}
+.btn-confirm-pop .pop-actions .pop-btn-yes {
+  background: var(--color-success, #10b981);
+  color: var(--bg-primary, #ffffff);
+}
+
+@keyframes pop-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(10px) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+/* Reveal Animations */
+.btn-reveal-fade-in {
+  animation: btn-fade-in 0.6s ease-out forwards;
+}
+
+.btn-reveal-slide-up {
+  animation: btn-slide-up 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
+
+.btn-reveal-zoom {
+  animation: btn-zoom-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+@keyframes btn-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes btn-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes btn-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+/* Tooltip Popover */
+.btn-tooltip-pop {
+  position: absolute;
+  top: -10px;
+  left: 50%;
+  transform: translateX(-50%) translateY(-100%);
+  background: var(--bg-primary, #1f2937);
+  color: var(--text-standard, #ffffff);
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 11px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 1000;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  animation: tooltip-in 0.2s ease-out;
+}
+.btn-tooltip-pop::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: var(--border-strong, #1f2937);
+}
+
+@keyframes tooltip-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-90%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(-100%) scale(1);
+  }
+}
+/* Living Gradient Animation */
+.btn-animate-gradient {
+  background-size: 240% 240% !important;
+  animation: bg-living-gradient 6s ease infinite !important;
+}
+
+@keyframes bg-living-gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+/* Energy Pulse (Attention) */
+.btn-pulse {
+  position: relative;
+}
+.btn-pulse::before {
+  content: "";
+  position: absolute;
+  inset: -6px;
+  background: inherit;
+  border-radius: inherit;
+  opacity: 0.4;
+  z-index: -1;
+  animation: btn-energy-pulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
+}
+
+@keyframes btn-energy-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.4;
+    filter: blur(2px);
+  }
+  100% {
+    transform: scale(1.3);
+    opacity: 0;
+    filter: blur(8px);
+  }
+}
+/* Precision Button Grouping */
+.btn-group-start {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  border-right: 0.5px solid rgba(0, 0, 0, 0.1) !important;
+}
+
+.btn-group-middle {
+  border-radius: 0 !important;
+  border-right: 0.5px solid rgba(0, 0, 0, 0.1) !important;
+}
+
+.btn-group-end {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+/* ===== ULTIMATE ELITE FEATURES ===== */
+/* Slide to Action */
+.btn-is-slider {
+  background: rgba(0, 0, 0, 0.05) !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+  color: var(--text-muted, #64748b) !important;
+  cursor: default !important;
+  overflow: hidden;
+  position: relative;
+}
+.btn-is-slider:hover {
+  transform: none !important;
+}
+.btn-is-slider .btn-slider-handle {
+  position: absolute;
+  top: 4px;
+  height: calc(100% - 8px);
+  width: 52px;
+  background: var(--bg-primary, #ffffff);
+  border-radius: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  cursor: grab;
+  z-index: 10;
+  transition: left 0.05s linear;
+  color: var(--ui-primary, var(--color-success, #3dcd58));
+}
+.btn-is-slider .btn-slider-handle:active {
+  cursor: grabbing;
+}
+.btn-is-slider.btn-primary .btn-slider-handle {
+  color: var(--ui-primary, var(--color-success, #3dcd58));
+}
+.btn-is-slider.btn-danger .btn-slider-handle {
+  color: var(--ui-danger, var(--color-danger, #ef4444));
+}
+.btn-is-slider.btn-success .btn-slider-handle {
+  color: var(--ui-success, var(--color-success, #10b981));
+}
+
+/* Icon Hover Organic Tilt */
+.btn-icon-hover-rotate:hover:not(.btn-disabled) .btn-icon {
+  transform: rotate(15deg);
+  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+/* Follow-Glow Cursor Light */
+.btn-follow-glow::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle 80px at var(--glow-x, 0) var(--glow-y, 0), rgba(255, 255, 255, 0.15), transparent);
+  opacity: 0;
+  transition: opacity 0.3s;
+  pointer-events: none;
+  z-index: 1;
+}
+.btn-follow-glow:hover::before {
+  opacity: 1;
+}
+
+/* Icon Spin Animation */
+.btn-spinning .btn-icon {
+  animation: btn-icon-spin 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes btn-icon-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* Shatter Destruction Fragments */
+.btn-shatter {
+  position: absolute;
+  background: rgba(0, 0, 0, 0.6);
+  pointer-events: none;
+  z-index: 100;
+  animation: btn-shatter-explode 0.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
+}
+
+@keyframes btn-shatter-explode {
+  0% {
+    transform: translate(0, 0) rotate(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(var(--vx), var(--vy)) rotate(var(--vr));
+    opacity: 0;
+  }
+}
+/* Progress Ring Spinner */
+.btn-spinner.is-ring {
+  width: 24px;
+  height: 24px;
+}
+.btn-spinner.is-ring .progress-ring {
+  transform: rotate(-90deg);
+  width: 100%;
+  height: 100%;
+}
+.btn-spinner.is-ring .progress-ring circle {
+  stroke-linecap: round;
+}
+.btn-spinner.is-ring .progress-ring .ring-bg {
+  stroke: rgba(255, 255, 255, 0.1);
+}
+.btn-spinner.is-ring .progress-ring .ring-fg {
+  stroke: currentColor;
+  transition: stroke-dasharray 0.3s ease;
+}
+
+.btn-primary .ring-bg {
+  stroke: rgba(0, 0, 0, 0.1);
+}
+
+/* Elite Focus Ring */
+.btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--ui-surface), 0 0 0 4px var(--ui-primary, var(--color-success, #3dcd58)) !important;
+  z-index: 100;
+}
+
+/* Shadow-Depth Sqashing (Physical Physics) */
+.btn:active:not(.btn-disabled),
+.btn-active:not(.btn-disabled) {
+  transform: translateY(1px) scale(0.96);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+  filter: brightness(0.95);
+}
+
+.btn-raised:active:not(.btn-disabled) {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
+}
+
+/* Responsive Hide Label */
+@media (max-width: 640px) {
+  .btn-hide-mobile {
+    padding: 0 !important;
+    width: var(--ui-button-height) !important;
+    min-width: var(--ui-button-height) !important;
+  }
+  .btn-hide-mobile .btn-label,
+  .btn-hide-mobile .btn-label-group,
+  .btn-hide-mobile .btn-dropdown-icon {
+    display: none !important;
+  }
+  .btn-hide-mobile .btn-icon {
+    margin: 0 !important;
+  }
+}
+/* ===== PROGRESS FILL ===== */
+.btn-progress-fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: inherit;
+  pointer-events: none;
+  transition: width 0.4s ease;
+  z-index: 0;
+}
+
+/* ===== IMAGE BUTTON ===== */
+.btn-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+  display: block;
+}