/* ==========================================================================
   GOD'S EYE DESIGN SYSTEM -- Components Part 1
   Version: 2.0.0
   Contents: Buttons, Cards, Form Elements
   Dependencies: variables.css
   ========================================================================== */


/* ==========================================================================
   1. BUTTONS (.ge-btn)
   ========================================================================== */

/* -------------------------------------------------------------------------
   1a. Button Base
   ------------------------------------------------------------------------- */
.ge-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ge-btn-icon-gap);
  height: var(--ge-btn-height-md);
  padding: 0 var(--ge-btn-px-md);
  font-family: var(--ge-font-body);
  font-size: var(--ge-btn-font-md);
  font-weight: var(--ge-btn-font-weight);
  letter-spacing: var(--ge-btn-letter-spacing);
  line-height: 1;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: var(--ge-border-width-thin) solid transparent;
  border-radius: var(--ge-btn-radius);
  outline: none;
  background-color: var(--ge-cyan);
  color: var(--ge-text-on-cyan);
  transition: var(--ge-btn-transition);
  -webkit-tap-highlight-color: transparent;
}

.ge-btn:hover {
  background-color: var(--ge-cyan-bright);
  color: var(--ge-text-on-cyan);
  box-shadow: var(--ge-glow-cyan-subtle);
}

.ge-btn:active {
  background-color: var(--ge-cyan-dim);
  transform: scale(0.98);
  box-shadow: none;
}

.ge-btn:focus-visible {
  outline: var(--ge-btn-focus-ring-width) solid var(--ge-btn-focus-ring-color);
  outline-offset: var(--ge-btn-focus-ring-offset);
}

.ge-btn:disabled,
.ge-btn.ge-btn-disabled {
  opacity: var(--ge-btn-disabled-opacity);
  cursor: not-allowed;
  box-shadow: none;
}

/* -------------------------------------------------------------------------
   1b. Button Variants
   ------------------------------------------------------------------------- */

/* Secondary */
.ge-btn-secondary {
  background-color: var(--ge-bg-tertiary);
  color: var(--ge-text-primary);
  border-color: var(--ge-border-default);
}

.ge-btn-secondary:hover {
  background-color: var(--ge-bg-elevated);
  border-color: var(--ge-border-dark);
  box-shadow: var(--ge-shadow-sm);
}

.ge-btn-secondary:active {
  background-color: var(--ge-bg-secondary);
  transform: scale(0.98);
  box-shadow: none;
}

.ge-btn-secondary:focus-visible {
  outline: var(--ge-btn-focus-ring-width) solid var(--ge-btn-focus-ring-color);
  outline-offset: var(--ge-btn-focus-ring-offset);
}

.ge-btn-secondary:disabled,
.ge-btn-secondary.ge-btn-disabled {
  opacity: var(--ge-btn-disabled-opacity);
  cursor: not-allowed;
}

/* Outline */
.ge-btn-outline {
  background-color: transparent;
  color: var(--ge-cyan);
  border-color: var(--ge-cyan-alpha-40);
}

.ge-btn-outline:hover {
  background-color: var(--ge-cyan-alpha-10);
  border-color: var(--ge-cyan-alpha-60);
  color: var(--ge-cyan-bright);
  box-shadow: var(--ge-glow-cyan-subtle);
}

.ge-btn-outline:active {
  background-color: var(--ge-cyan-alpha-15);
  border-color: var(--ge-cyan);
  transform: scale(0.98);
  box-shadow: none;
}

.ge-btn-outline:focus-visible {
  outline: var(--ge-btn-focus-ring-width) solid var(--ge-btn-focus-ring-color);
  outline-offset: var(--ge-btn-focus-ring-offset);
}

.ge-btn-outline:disabled,
.ge-btn-outline.ge-btn-disabled {
  opacity: var(--ge-btn-disabled-opacity);
  cursor: not-allowed;
}

/* Ghost */
.ge-btn-ghost {
  background-color: transparent;
  color: var(--ge-text-primary);
  border-color: transparent;
}

.ge-btn-ghost:hover {
  background-color: var(--ge-cyan-alpha-8);
  color: var(--ge-text-primary);
}

.ge-btn-ghost:active {
  background-color: var(--ge-cyan-alpha-15);
  transform: scale(0.98);
}

.ge-btn-ghost:focus-visible {
  outline: var(--ge-btn-focus-ring-width) solid var(--ge-btn-focus-ring-color);
  outline-offset: var(--ge-btn-focus-ring-offset);
}

.ge-btn-ghost:disabled,
.ge-btn-ghost.ge-btn-disabled {
  opacity: var(--ge-btn-disabled-opacity);
  cursor: not-allowed;
}

/* Destructive */
.ge-btn-destructive {
  background-color: var(--ge-error);
  color: #ffffff;
  border-color: transparent;
}

.ge-btn-destructive:hover {
  background-color: var(--ge-error-bright);
  color: #ffffff;
  box-shadow: var(--ge-glow-error-subtle);
}

.ge-btn-destructive:active {
  background-color: var(--ge-error-dim);
  transform: scale(0.98);
  box-shadow: none;
}

.ge-btn-destructive:focus-visible {
  outline: var(--ge-btn-focus-ring-width) solid var(--ge-focus-ring-color-error);
  outline-offset: var(--ge-btn-focus-ring-offset);
}

.ge-btn-destructive:disabled,
.ge-btn-destructive.ge-btn-disabled {
  opacity: var(--ge-btn-disabled-opacity);
  cursor: not-allowed;
}

/* Link */
.ge-btn-link {
  background-color: transparent;
  color: var(--ge-text-link);
  border-color: transparent;
  padding: 0;
  height: auto;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ge-btn-link:hover {
  color: var(--ge-text-link-hover);
  text-decoration-color: var(--ge-cyan-alpha-50);
  background-color: transparent;
  box-shadow: none;
}

.ge-btn-link:active {
  color: var(--ge-cyan-dim);
  transform: none;
}

.ge-btn-link:focus-visible {
  outline: var(--ge-btn-focus-ring-width) solid var(--ge-btn-focus-ring-color);
  outline-offset: var(--ge-btn-focus-ring-offset);
  border-radius: var(--ge-radius-xs);
}

.ge-btn-link:disabled,
.ge-btn-link.ge-btn-disabled {
  opacity: var(--ge-btn-disabled-opacity);
  cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   1c. Button Sizes
   ------------------------------------------------------------------------- */

/* Extra Small */
.ge-btn-xs {
  height: var(--ge-btn-height-xs);
  padding: 0 var(--ge-btn-px-xs);
  font-size: var(--ge-btn-font-xs);
  border-radius: var(--ge-btn-radius-sm);
  gap: 0.25rem;
}

/* Small */
.ge-btn-sm {
  height: var(--ge-btn-height-sm);
  padding: 0 var(--ge-btn-px-sm);
  font-size: var(--ge-btn-font-sm);
  border-radius: var(--ge-btn-radius-sm);
  gap: 0.375rem;
}

/* Large */
.ge-btn-lg {
  height: var(--ge-btn-height-lg);
  padding: 0 var(--ge-btn-px-lg);
  font-size: var(--ge-btn-font-lg);
  border-radius: var(--ge-btn-radius-lg);
  gap: 0.625rem;
}

/* Extra Large */
.ge-btn-xl {
  height: var(--ge-btn-height-xl);
  padding: 0 var(--ge-btn-px-xl);
  font-size: var(--ge-btn-font-xl);
  border-radius: var(--ge-btn-radius-lg);
  gap: 0.75rem;
}

/* -------------------------------------------------------------------------
   1d. Button Icon (square)
   ------------------------------------------------------------------------- */
.ge-btn-icon {
  padding: 0;
  width: var(--ge-btn-height-md);
  height: var(--ge-btn-height-md);
  flex-shrink: 0;
}

.ge-btn-icon.ge-btn-xs {
  width: var(--ge-btn-height-xs);
  height: var(--ge-btn-height-xs);
}

.ge-btn-icon.ge-btn-sm {
  width: var(--ge-btn-height-sm);
  height: var(--ge-btn-height-sm);
}

.ge-btn-icon.ge-btn-lg {
  width: var(--ge-btn-height-lg);
  height: var(--ge-btn-height-lg);
}

.ge-btn-icon.ge-btn-xl {
  width: var(--ge-btn-height-xl);
  height: var(--ge-btn-height-xl);
}

/* -------------------------------------------------------------------------
   1e. Button Group
   ------------------------------------------------------------------------- */
.ge-btn-group {
  display: inline-flex;
  align-items: center;
}

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

.ge-btn-group > .ge-btn:first-child {
  border-top-left-radius: var(--ge-btn-radius);
  border-bottom-left-radius: var(--ge-btn-radius);
}

.ge-btn-group > .ge-btn:last-child {
  border-top-right-radius: var(--ge-btn-radius);
  border-bottom-right-radius: var(--ge-btn-radius);
}

.ge-btn-group > .ge-btn + .ge-btn {
  margin-left: -1px;
}

.ge-btn-group > .ge-btn:hover,
.ge-btn-group > .ge-btn:focus-visible,
.ge-btn-group > .ge-btn:active {
  z-index: 1;
}

/* -------------------------------------------------------------------------
   1f. Button Loading
   ------------------------------------------------------------------------- */
.ge-btn-loading {
  pointer-events: none;
  color: transparent !important;
}

.ge-btn-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--ge-radius-full);
  animation: ge-btn-spin 600ms linear infinite;
}

/* Restore visible color for the spinner */
.ge-btn.ge-btn-loading::after {
  color: var(--ge-text-on-cyan);
}

.ge-btn-secondary.ge-btn-loading::after {
  color: var(--ge-text-primary);
}

.ge-btn-outline.ge-btn-loading::after {
  color: var(--ge-cyan);
}

.ge-btn-ghost.ge-btn-loading::after {
  color: var(--ge-text-primary);
}

.ge-btn-destructive.ge-btn-loading::after {
  color: #ffffff;
}

.ge-btn-link.ge-btn-loading::after {
  color: var(--ge-text-link);
}

@keyframes ge-btn-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
   1g. Button Block (full width)
   ------------------------------------------------------------------------- */
.ge-btn-block {
  display: flex;
  width: 100%;
}

/* -------------------------------------------------------------------------
   1h. Button Light Mode Overrides
   ------------------------------------------------------------------------- */
[data-theme="light"] .ge-btn {
  background-color: var(--ge-cyan-dark);
  color: #ffffff;
}

[data-theme="light"] .ge-btn:hover {
  background-color: var(--ge-cyan-dim);
  color: #ffffff;
}

[data-theme="light"] .ge-btn:active {
  background-color: var(--ge-cyan-darker);
}

[data-theme="light"] .ge-btn-secondary {
  background-color: #f0f0f5;
  color: #1a1a2e;
  border-color: #d0d0dd;
}

[data-theme="light"] .ge-btn-secondary:hover {
  background-color: #e4e4ed;
  border-color: #b0b0c0;
}

[data-theme="light"] .ge-btn-secondary:active {
  background-color: #d8d8e5;
}

[data-theme="light"] .ge-btn-outline {
  color: var(--ge-cyan-dark);
  border-color: var(--ge-cyan-dim);
}

[data-theme="light"] .ge-btn-outline:hover {
  background-color: rgba(0, 240, 255, 0.08);
  color: var(--ge-cyan-darker);
  border-color: var(--ge-cyan-dark);
}

[data-theme="light"] .ge-btn-outline:active {
  background-color: rgba(0, 240, 255, 0.15);
}

[data-theme="light"] .ge-btn-ghost {
  color: #1a1a2e;
}

[data-theme="light"] .ge-btn-ghost:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .ge-btn-ghost:active {
  background-color: rgba(0, 0, 0, 0.10);
}

[data-theme="light"] .ge-btn-destructive {
  background-color: var(--ge-error);
  color: #ffffff;
}

[data-theme="light"] .ge-btn-destructive:hover {
  background-color: var(--ge-error-bright);
}

[data-theme="light"] .ge-btn-destructive:active {
  background-color: var(--ge-error-dim);
}

[data-theme="light"] .ge-btn-link {
  color: var(--ge-cyan-dark);
}

[data-theme="light"] .ge-btn-link:hover {
  color: var(--ge-cyan-darker);
}

[data-theme="light"] .ge-btn.ge-btn-loading::after {
  color: #ffffff;
}

[data-theme="light"] .ge-btn-secondary.ge-btn-loading::after {
  color: #1a1a2e;
}

[data-theme="light"] .ge-btn-outline.ge-btn-loading::after {
  color: var(--ge-cyan-dark);
}

[data-theme="light"] .ge-btn-ghost.ge-btn-loading::after {
  color: #1a1a2e;
}


/* ==========================================================================
   2. CARDS (.ge-card)
   ========================================================================== */

/* -------------------------------------------------------------------------
   2a. Card Base
   ------------------------------------------------------------------------- */
.ge-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--ge-card-padding);
  background-color: var(--ge-card-bg);
  border: var(--ge-border-width-thin) solid var(--ge-card-border);
  border-radius: var(--ge-card-radius);
  overflow: hidden;
  transition: var(--ge-card-transition);
}

/* -------------------------------------------------------------------------
   2b. Card Variants
   ------------------------------------------------------------------------- */

/* Outlined -- stronger border */
.ge-card-outlined {
  border-color: var(--ge-border-dark);
}

.ge-card-outlined:hover {
  border-color: var(--ge-border-accent);
}

.ge-card-outlined:focus-visible {
  border-color: var(--ge-border-accent);
  outline: 2px solid var(--ge-focus-ring-color);
  outline-offset: 2px;
}

/* Elevated -- shadow emphasis */
.ge-card-elevated {
  border-color: transparent;
  box-shadow: var(--ge-card-shadow);
}

.ge-card-elevated:hover {
  box-shadow: var(--ge-shadow-lg);
}

/* Glass -- backdrop blur frosted glass */
.ge-card-glass {
  background: var(--ge-gradient-glass);
  backdrop-filter: blur(var(--ge-blur-lg));
  -webkit-backdrop-filter: blur(var(--ge-blur-lg));
  border-color: rgba(136, 136, 160, 0.08);
}

.ge-card-glass:hover {
  border-color: rgba(136, 136, 160, 0.15);
}

.ge-card-glass:focus-visible {
  outline: 2px solid var(--ge-focus-ring-color);
  outline-offset: 2px;
}

/* Interactive -- hover lift + border color change */
.ge-card-interactive {
  cursor: pointer;
}

.ge-card-interactive:hover {
  border-color: var(--ge-card-border-hover);
  background-color: var(--ge-card-bg-hover);
  box-shadow: var(--ge-shadow-md);
  transform: translateY(-2px);
}

.ge-card-interactive:active {
  transform: translateY(0);
  box-shadow: var(--ge-shadow-sm);
}

.ge-card-interactive:focus-visible {
  outline: var(--ge-focus-ring-width) solid var(--ge-focus-ring-color);
  outline-offset: var(--ge-focus-ring-offset);
}

/* -------------------------------------------------------------------------
   2c. Card Sub-components
   ------------------------------------------------------------------------- */
.ge-card-header {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-1);
  padding: var(--ge-card-padding) var(--ge-card-padding) 0;
}

.ge-card-body {
  flex: 1;
  padding: var(--ge-card-padding);
}

/* When header is followed by body, reduce top padding of body */
.ge-card-header + .ge-card-body {
  padding-top: var(--ge-space-3);
}

.ge-card-footer {
  display: flex;
  align-items: center;
  gap: var(--ge-space-2);
  padding: 0 var(--ge-card-padding) var(--ge-card-padding);
}

/* When body is followed by footer, add spacing */
.ge-card-body + .ge-card-footer {
  padding-top: 0;
}

.ge-card-media {
  overflow: hidden;
  line-height: 0;
}

.ge-card-media img,
.ge-card-media video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Media at top of card -- no top radius needed since card has overflow hidden */
.ge-card-media:first-child {
  margin-top: 0;
}

.ge-card-title {
  font-family: var(--ge-font-display);
  font-size: var(--ge-text-lg);
  font-weight: var(--ge-font-semibold);
  line-height: var(--ge-leading-tight);
  color: var(--ge-text-primary);
  margin: 0;
}

.ge-card-description {
  font-size: var(--ge-text-sm);
  color: var(--ge-text-secondary);
  line-height: var(--ge-leading-normal);
  margin: 0;
}

/* -------------------------------------------------------------------------
   2d. Card Light Mode
   ------------------------------------------------------------------------- */
[data-theme="light"] .ge-card {
  background-color: #ffffff;
  border-color: #e0e0e8;
}

[data-theme="light"] .ge-card-outlined {
  border-color: #c0c0d0;
}

[data-theme="light"] .ge-card-outlined:hover {
  border-color: var(--ge-cyan-dim);
}

[data-theme="light"] .ge-card-elevated {
  background-color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .ge-card-elevated:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-card-glass {
  background: rgba(255, 255, 255, 0.70);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-card-glass:hover {
  border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .ge-card-interactive:hover {
  background-color: #fafafe;
  border-color: var(--ge-cyan-dim);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}

[data-theme="light"] .ge-card-title {
  color: #1a1a2e;
}

[data-theme="light"] .ge-card-description {
  color: #555570;
}


/* ==========================================================================
   3. FORM INPUTS (.ge-input)
   ========================================================================== */

/* -------------------------------------------------------------------------
   3a. Input Base
   ------------------------------------------------------------------------- */
.ge-input {
  display: block;
  width: 100%;
  height: var(--ge-input-height-md);
  padding: 0 var(--ge-input-px);
  font-family: var(--ge-font-body);
  font-size: var(--ge-input-font-size);
  font-weight: var(--ge-input-font-weight);
  line-height: 1;
  color: var(--ge-input-color);
  background-color: var(--ge-input-bg);
  border: var(--ge-input-border-width) solid var(--ge-input-border);
  border-radius: var(--ge-input-radius);
  outline: none;
  transition: var(--ge-input-transition);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.ge-input::placeholder {
  color: var(--ge-input-placeholder);
  opacity: 1;
}

.ge-input:hover {
  background-color: var(--ge-input-bg-hover);
  border-color: var(--ge-input-border-hover);
}

.ge-input:focus,
.ge-input:focus-visible {
  background-color: var(--ge-input-bg-focus);
  border-color: var(--ge-input-border-focus);
  box-shadow: 0 0 0 var(--ge-input-focus-ring-width) var(--ge-input-focus-ring-color);
}

.ge-input:disabled {
  background-color: var(--ge-input-bg-disabled);
  opacity: var(--ge-input-disabled-opacity);
  cursor: not-allowed;
}

/* Error State */
.ge-input-error,
.ge-input.ge-input-error {
  border-color: var(--ge-input-border-error);
}

.ge-input-error:hover,
.ge-input.ge-input-error:hover {
  border-color: var(--ge-error);
}

.ge-input-error:focus,
.ge-input-error:focus-visible,
.ge-input.ge-input-error:focus,
.ge-input.ge-input-error:focus-visible {
  border-color: var(--ge-error);
  box-shadow: 0 0 0 var(--ge-input-focus-ring-width) var(--ge-error-alpha-20);
}

/* Success State */
.ge-input-success,
.ge-input.ge-input-success {
  border-color: var(--ge-input-border-success);
}

.ge-input-success:hover,
.ge-input.ge-input-success:hover {
  border-color: var(--ge-success);
}

.ge-input-success:focus,
.ge-input-success:focus-visible,
.ge-input.ge-input-success:focus,
.ge-input.ge-input-success:focus-visible {
  border-color: var(--ge-success);
  box-shadow: 0 0 0 var(--ge-input-focus-ring-width) var(--ge-success-alpha-20);
}

/* -------------------------------------------------------------------------
   3b. Input Sizes
   ------------------------------------------------------------------------- */
.ge-input-sm {
  height: var(--ge-input-height-sm);
  padding: 0 var(--ge-space-2);
  font-size: var(--ge-text-sm);
  border-radius: var(--ge-radius-sm);
}

.ge-input-lg {
  height: var(--ge-input-height-lg);
  padding: 0 var(--ge-space-4);
  font-size: var(--ge-text-md);
  border-radius: var(--ge-radius-md);
}

/* -------------------------------------------------------------------------
   3c. Input Group (prepend/append addons)
   ------------------------------------------------------------------------- */
.ge-input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.ge-input-group > .ge-input {
  flex: 1;
  min-width: 0;
  border-radius: 0;
}

.ge-input-group > .ge-input:first-child {
  border-top-left-radius: var(--ge-input-radius);
  border-bottom-left-radius: var(--ge-input-radius);
}

.ge-input-group > .ge-input:last-child {
  border-top-right-radius: var(--ge-input-radius);
  border-bottom-right-radius: var(--ge-input-radius);
}

.ge-input-group-prepend,
.ge-input-group-append {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--ge-space-3);
  font-size: var(--ge-input-font-size);
  font-weight: var(--ge-font-medium);
  color: var(--ge-text-secondary);
  background-color: var(--ge-bg-tertiary);
  border: var(--ge-input-border-width) solid var(--ge-input-border);
  white-space: nowrap;
}

.ge-input-group-prepend {
  border-right: 0;
  border-top-left-radius: var(--ge-input-radius);
  border-bottom-left-radius: var(--ge-input-radius);
}

.ge-input-group-prepend + .ge-input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.ge-input-group-append {
  border-left: 0;
  border-top-right-radius: var(--ge-input-radius);
  border-bottom-right-radius: var(--ge-input-radius);
}

.ge-input-group > .ge-input:has(+ .ge-input-group-append) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Fallback for browsers without :has() -- use adjacent sibling on append */
.ge-input + .ge-input-group-append {
  border-top-right-radius: var(--ge-input-radius);
  border-bottom-right-radius: var(--ge-input-radius);
}

/* -------------------------------------------------------------------------
   3d. Input with Icons
   ------------------------------------------------------------------------- */
.ge-input-icon-left {
  padding-left: 2.5rem;
}

.ge-input-icon-right {
  padding-right: 2.5rem;
}

.ge-input-icon-left.ge-input-sm {
  padding-left: 2rem;
}

.ge-input-icon-right.ge-input-sm {
  padding-right: 2rem;
}

.ge-input-icon-left.ge-input-lg {
  padding-left: 3rem;
}

.ge-input-icon-right.ge-input-lg {
  padding-right: 3rem;
}

/* Icon wrapper -- position the icon inside input container */
.ge-input-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

.ge-input-wrapper .ge-input-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  color: var(--ge-text-muted);
  pointer-events: none;
  z-index: 1;
}

.ge-input-wrapper .ge-input-icon:first-child {
  left: 0;
}

.ge-input-wrapper .ge-input-icon:last-child {
  right: 0;
}

/* -------------------------------------------------------------------------
   3e. Input Autofill Fix
   ------------------------------------------------------------------------- */
.ge-input:-webkit-autofill,
.ge-input:-webkit-autofill:hover,
.ge-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ge-input-color);
  -webkit-box-shadow: 0 0 0 1000px var(--ge-input-bg) inset;
  box-shadow: 0 0 0 1000px var(--ge-input-bg) inset;
  border-color: var(--ge-input-border-focus);
  transition: background-color 5000s ease-in-out 0s;
}

[data-theme="light"] .ge-input:-webkit-autofill,
[data-theme="light"] .ge-input:-webkit-autofill:hover,
[data-theme="light"] .ge-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #1a1a2e;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  box-shadow: 0 0 0 1000px #ffffff inset;
}

/* -------------------------------------------------------------------------
   3f. Input Light Mode
   ------------------------------------------------------------------------- */
[data-theme="light"] .ge-input {
  background-color: #ffffff;
  color: #1a1a2e;
  border-color: #d0d0dd;
}

[data-theme="light"] .ge-input::placeholder {
  color: #9090a5;
}

[data-theme="light"] .ge-input:hover {
  background-color: #fafafe;
  border-color: #b0b0c0;
}

[data-theme="light"] .ge-input:focus,
[data-theme="light"] .ge-input:focus-visible {
  background-color: #ffffff;
  border-color: var(--ge-cyan-dim);
  box-shadow: 0 0 0 2px rgba(0, 154, 166, 0.20);
}

[data-theme="light"] .ge-input:disabled {
  background-color: #f0f0f5;
  color: #9090a5;
}

[data-theme="light"] .ge-input-group-prepend,
[data-theme="light"] .ge-input-group-append {
  background-color: #f0f0f5;
  border-color: #d0d0dd;
  color: #555570;
}


/* ==========================================================================
   4. TEXTAREA (.ge-textarea)
   ========================================================================== */

/* -------------------------------------------------------------------------
   4a. Textarea Base
   ------------------------------------------------------------------------- */
.ge-textarea {
  display: block;
  width: 100%;
  min-height: 5rem;
  padding: var(--ge-input-py) var(--ge-input-px);
  font-family: var(--ge-font-body);
  font-size: var(--ge-input-font-size);
  font-weight: var(--ge-input-font-weight);
  line-height: var(--ge-leading-normal);
  color: var(--ge-input-color);
  background-color: var(--ge-input-bg);
  border: var(--ge-input-border-width) solid var(--ge-input-border);
  border-radius: var(--ge-input-radius);
  outline: none;
  resize: vertical;
  transition: var(--ge-input-transition);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.ge-textarea::placeholder {
  color: var(--ge-input-placeholder);
  opacity: 1;
}

.ge-textarea:hover {
  background-color: var(--ge-input-bg-hover);
  border-color: var(--ge-input-border-hover);
}

.ge-textarea:focus,
.ge-textarea:focus-visible {
  background-color: var(--ge-input-bg-focus);
  border-color: var(--ge-input-border-focus);
  box-shadow: 0 0 0 var(--ge-input-focus-ring-width) var(--ge-input-focus-ring-color);
}

.ge-textarea:disabled {
  background-color: var(--ge-input-bg-disabled);
  opacity: var(--ge-input-disabled-opacity);
  cursor: not-allowed;
}

/* Error */
.ge-textarea.ge-input-error {
  border-color: var(--ge-input-border-error);
}

.ge-textarea.ge-input-error:focus,
.ge-textarea.ge-input-error:focus-visible {
  border-color: var(--ge-error);
  box-shadow: 0 0 0 var(--ge-input-focus-ring-width) var(--ge-error-alpha-20);
}

/* Success */
.ge-textarea.ge-input-success {
  border-color: var(--ge-input-border-success);
}

.ge-textarea.ge-input-success:focus,
.ge-textarea.ge-input-success:focus-visible {
  border-color: var(--ge-success);
  box-shadow: 0 0 0 var(--ge-input-focus-ring-width) var(--ge-success-alpha-20);
}

/* -------------------------------------------------------------------------
   4b. Textarea Sizes
   ------------------------------------------------------------------------- */
.ge-textarea-sm {
  min-height: 3.5rem;
  padding: var(--ge-space-1-5) var(--ge-space-2);
  font-size: var(--ge-text-sm);
  border-radius: var(--ge-radius-sm);
}

.ge-textarea-lg {
  min-height: 8rem;
  padding: var(--ge-space-3) var(--ge-space-4);
  font-size: var(--ge-text-md);
  border-radius: var(--ge-radius-md);
}

/* -------------------------------------------------------------------------
   4c. Textarea No Resize
   ------------------------------------------------------------------------- */
.ge-textarea-no-resize {
  resize: none;
}

/* -------------------------------------------------------------------------
   4d. Textarea with Character Count
   ------------------------------------------------------------------------- */
.ge-textarea-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

.ge-textarea-wrapper .ge-textarea {
  padding-bottom: 1.75rem;
}

.ge-textarea-count {
  position: absolute;
  bottom: var(--ge-space-2);
  right: var(--ge-space-3);
  font-size: var(--ge-text-xs);
  color: var(--ge-text-muted);
  pointer-events: none;
  line-height: 1;
}

.ge-textarea-count.ge-textarea-count-over {
  color: var(--ge-error);
}

/* -------------------------------------------------------------------------
   4e. Textarea Light Mode
   ------------------------------------------------------------------------- */
[data-theme="light"] .ge-textarea {
  background-color: #ffffff;
  color: #1a1a2e;
  border-color: #d0d0dd;
}

[data-theme="light"] .ge-textarea::placeholder {
  color: #9090a5;
}

[data-theme="light"] .ge-textarea:hover {
  background-color: #fafafe;
  border-color: #b0b0c0;
}

[data-theme="light"] .ge-textarea:focus,
[data-theme="light"] .ge-textarea:focus-visible {
  background-color: #ffffff;
  border-color: var(--ge-cyan-dim);
  box-shadow: 0 0 0 2px rgba(0, 154, 166, 0.20);
}

[data-theme="light"] .ge-textarea:disabled {
  background-color: #f0f0f5;
  color: #9090a5;
}

[data-theme="light"] .ge-textarea-count {
  color: #9090a5;
}


/* ==========================================================================
   5. SELECT (.ge-select)
   ========================================================================== */

/* -------------------------------------------------------------------------
   5a. Select Base
   ------------------------------------------------------------------------- */
.ge-select {
  display: block;
  width: 100%;
  height: var(--ge-input-height-md);
  padding: 0 2.5rem 0 var(--ge-input-px);
  font-family: var(--ge-font-body);
  font-size: var(--ge-input-font-size);
  font-weight: var(--ge-input-font-weight);
  line-height: 1;
  color: var(--ge-input-color);
  background-color: var(--ge-input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238888a0' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  border: var(--ge-input-border-width) solid var(--ge-input-border);
  border-radius: var(--ge-input-radius);
  outline: none;
  cursor: pointer;
  transition: var(--ge-input-transition);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.ge-select:hover {
  background-color: var(--ge-input-bg-hover);
  border-color: var(--ge-input-border-hover);
}

.ge-select:focus,
.ge-select:focus-visible {
  background-color: var(--ge-input-bg-focus);
  border-color: var(--ge-input-border-focus);
  box-shadow: 0 0 0 var(--ge-input-focus-ring-width) var(--ge-input-focus-ring-color);
}

.ge-select:disabled {
  background-color: var(--ge-input-bg-disabled);
  opacity: var(--ge-input-disabled-opacity);
  cursor: not-allowed;
}

/* Error */
.ge-select.ge-input-error {
  border-color: var(--ge-input-border-error);
}

.ge-select.ge-input-error:focus,
.ge-select.ge-input-error:focus-visible {
  border-color: var(--ge-error);
  box-shadow: 0 0 0 var(--ge-input-focus-ring-width) var(--ge-error-alpha-20);
}

/* Success */
.ge-select.ge-input-success {
  border-color: var(--ge-input-border-success);
}

/* -------------------------------------------------------------------------
   5b. Select Sizes
   ------------------------------------------------------------------------- */
.ge-select-sm {
  height: var(--ge-input-height-sm);
  padding: 0 2rem 0 var(--ge-space-2);
  font-size: var(--ge-text-sm);
  border-radius: var(--ge-radius-sm);
  background-position: right 0.5rem center;
  background-size: 10px;
}

.ge-select-lg {
  height: var(--ge-input-height-lg);
  padding: 0 3rem 0 var(--ge-space-4);
  font-size: var(--ge-text-md);
  border-radius: var(--ge-radius-md);
  background-position: right 1rem center;
  background-size: 14px;
}

/* -------------------------------------------------------------------------
   5c. Select Native (lets OS handle dropdown)
   ------------------------------------------------------------------------- */
.ge-select-native {
  /* Remove custom arrow for native dropdown */
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  appearance: menulist;
  background-image: none;
  padding-right: var(--ge-input-px);
}

/* -------------------------------------------------------------------------
   5d. Select Light Mode
   ------------------------------------------------------------------------- */
[data-theme="light"] .ge-select {
  background-color: #ffffff;
  color: #1a1a2e;
  border-color: #d0d0dd;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555570' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
}

[data-theme="light"] .ge-select:hover {
  background-color: #fafafe;
  border-color: #b0b0c0;
}

[data-theme="light"] .ge-select:focus,
[data-theme="light"] .ge-select:focus-visible {
  background-color: #ffffff;
  border-color: var(--ge-cyan-dim);
  box-shadow: 0 0 0 2px rgba(0, 154, 166, 0.20);
}

[data-theme="light"] .ge-select:disabled {
  background-color: #f0f0f5;
  color: #9090a5;
}


/* ==========================================================================
   6. CHECKBOX (.ge-checkbox)
   ========================================================================== */

/* -------------------------------------------------------------------------
   6a. Checkbox Base
   ------------------------------------------------------------------------- */
.ge-checkbox {
  position: relative;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--ge-input-bg);
  border: var(--ge-border-width-medium) solid var(--ge-input-border);
  border-radius: var(--ge-radius-sm);
  outline: none;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  flex-shrink: 0;
  vertical-align: middle;
}

.ge-checkbox:hover {
  border-color: var(--ge-input-border-hover);
  background-color: var(--ge-input-bg-hover);
}

.ge-checkbox:focus-visible {
  outline: var(--ge-focus-ring-width) solid var(--ge-focus-ring-color);
  outline-offset: var(--ge-focus-ring-offset);
}

/* Checked */
.ge-checkbox:checked {
  background-color: var(--ge-cyan);
  border-color: var(--ge-cyan);
}

.ge-checkbox:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4.5px;
  width: 5px;
  height: 9px;
  border: solid var(--ge-text-on-cyan);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ge-checkbox:checked:hover {
  background-color: var(--ge-cyan-bright);
  border-color: var(--ge-cyan-bright);
}

/* Indeterminate */
.ge-checkbox:indeterminate {
  background-color: var(--ge-cyan);
  border-color: var(--ge-cyan);
}

.ge-checkbox:indeterminate::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 2px;
  background-color: var(--ge-text-on-cyan);
  transform: translate(-50%, -50%);
  border: none;
}

/* Disabled */
.ge-checkbox:disabled {
  opacity: var(--ge-input-disabled-opacity);
  cursor: not-allowed;
}

.ge-checkbox:disabled:checked {
  background-color: var(--ge-cyan-dim);
  border-color: var(--ge-cyan-dim);
}

/* Error */
.ge-checkbox.ge-input-error {
  border-color: var(--ge-input-border-error);
}

.ge-checkbox.ge-input-error:checked {
  background-color: var(--ge-error);
  border-color: var(--ge-error);
}

/* -------------------------------------------------------------------------
   6b. Checkbox Label
   ------------------------------------------------------------------------- */
.ge-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: var(--ge-space-2);
  cursor: pointer;
  font-family: var(--ge-font-body);
  font-size: var(--ge-input-font-size);
  color: var(--ge-text-primary);
  line-height: var(--ge-leading-normal);
  user-select: none;
}

.ge-checkbox-label:has(.ge-checkbox:disabled) {
  opacity: var(--ge-input-disabled-opacity);
  cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   6c. Checkbox Card
   ------------------------------------------------------------------------- */
.ge-checkbox-card {
  display: flex;
  align-items: flex-start;
  gap: var(--ge-space-3);
  padding: var(--ge-space-4);
  background-color: var(--ge-card-bg);
  border: var(--ge-border-width-thin) solid var(--ge-card-border);
  border-radius: var(--ge-card-radius);
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.ge-checkbox-card:hover {
  border-color: var(--ge-input-border-hover);
  background-color: var(--ge-card-bg-hover);
}

.ge-checkbox-card:has(.ge-checkbox:checked) {
  border-color: var(--ge-cyan-alpha-40);
  background-color: var(--ge-cyan-alpha-5);
  box-shadow: var(--ge-glow-cyan-subtle);
}

.ge-checkbox-card:has(.ge-checkbox:focus-visible) {
  outline: var(--ge-focus-ring-width) solid var(--ge-focus-ring-color);
  outline-offset: var(--ge-focus-ring-offset);
}

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

/* -------------------------------------------------------------------------
   6d. Checkbox Light Mode
   ------------------------------------------------------------------------- */
[data-theme="light"] .ge-checkbox {
  background-color: #ffffff;
  border-color: #c0c0d0;
}

[data-theme="light"] .ge-checkbox:hover {
  border-color: #9090a5;
  background-color: #fafafe;
}

[data-theme="light"] .ge-checkbox:checked {
  background-color: var(--ge-cyan-dark);
  border-color: var(--ge-cyan-dark);
}

[data-theme="light"] .ge-checkbox:checked::after {
  border-color: #ffffff;
}

[data-theme="light"] .ge-checkbox:checked:hover {
  background-color: var(--ge-cyan-dim);
  border-color: var(--ge-cyan-dim);
}

[data-theme="light"] .ge-checkbox:indeterminate {
  background-color: var(--ge-cyan-dark);
  border-color: var(--ge-cyan-dark);
}

[data-theme="light"] .ge-checkbox:indeterminate::after {
  background-color: #ffffff;
}

[data-theme="light"] .ge-checkbox-label {
  color: #1a1a2e;
}

[data-theme="light"] .ge-checkbox-card {
  background-color: #ffffff;
  border-color: #e0e0e8;
}

[data-theme="light"] .ge-checkbox-card:hover {
  background-color: #fafafe;
  border-color: #c0c0d0;
}

[data-theme="light"] .ge-checkbox-card:has(.ge-checkbox:checked) {
  border-color: var(--ge-cyan-dim);
  background-color: rgba(0, 154, 166, 0.06);
}


/* ==========================================================================
   7. RADIO (.ge-radio)
   ========================================================================== */

/* -------------------------------------------------------------------------
   7a. Radio Base
   ------------------------------------------------------------------------- */
.ge-radio {
  position: relative;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--ge-input-bg);
  border: var(--ge-border-width-medium) solid var(--ge-input-border);
  border-radius: var(--ge-radius-full);
  outline: none;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  flex-shrink: 0;
  vertical-align: middle;
}

.ge-radio:hover {
  border-color: var(--ge-input-border-hover);
  background-color: var(--ge-input-bg-hover);
}

.ge-radio:focus-visible {
  outline: var(--ge-focus-ring-width) solid var(--ge-focus-ring-color);
  outline-offset: var(--ge-focus-ring-offset);
}

/* Checked */
.ge-radio:checked {
  border-color: var(--ge-cyan);
  background-color: transparent;
}

.ge-radio:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: var(--ge-cyan);
  border-radius: var(--ge-radius-full);
  transform: translate(-50%, -50%);
}

.ge-radio:checked:hover {
  border-color: var(--ge-cyan-bright);
}

.ge-radio:checked:hover::after {
  background-color: var(--ge-cyan-bright);
}

/* Disabled */
.ge-radio:disabled {
  opacity: var(--ge-input-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

.ge-radio:disabled:checked {
  border-color: var(--ge-cyan-dim);
}

.ge-radio:disabled:checked::after {
  background-color: var(--ge-cyan-dim);
}

/* Error */
.ge-radio.ge-input-error {
  border-color: var(--ge-input-border-error);
}

.ge-radio.ge-input-error:checked {
  border-color: var(--ge-error);
}

.ge-radio.ge-input-error:checked::after {
  background-color: var(--ge-error);
}

/* -------------------------------------------------------------------------
   7b. Radio Label
   ------------------------------------------------------------------------- */
.ge-radio-label {
  display: inline-flex;
  align-items: center;
  gap: var(--ge-space-2);
  cursor: pointer;
  font-family: var(--ge-font-body);
  font-size: var(--ge-input-font-size);
  color: var(--ge-text-primary);
  line-height: var(--ge-leading-normal);
  user-select: none;
}

.ge-radio-label:has(.ge-radio:disabled) {
  opacity: var(--ge-input-disabled-opacity);
  cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   7c. Radio Card
   ------------------------------------------------------------------------- */
.ge-radio-card {
  display: flex;
  align-items: flex-start;
  gap: var(--ge-space-3);
  padding: var(--ge-space-4);
  background-color: var(--ge-card-bg);
  border: var(--ge-border-width-thin) solid var(--ge-card-border);
  border-radius: var(--ge-card-radius);
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.ge-radio-card:hover {
  border-color: var(--ge-input-border-hover);
  background-color: var(--ge-card-bg-hover);
}

.ge-radio-card:has(.ge-radio:checked) {
  border-color: var(--ge-cyan-alpha-40);
  background-color: var(--ge-cyan-alpha-5);
  box-shadow: var(--ge-glow-cyan-subtle);
}

.ge-radio-card:has(.ge-radio:focus-visible) {
  outline: var(--ge-focus-ring-width) solid var(--ge-focus-ring-color);
  outline-offset: var(--ge-focus-ring-offset);
}

.ge-radio-card:has(.ge-radio:disabled) {
  opacity: var(--ge-input-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   7d. Radio Light Mode
   ------------------------------------------------------------------------- */
[data-theme="light"] .ge-radio {
  background-color: #ffffff;
  border-color: #c0c0d0;
}

[data-theme="light"] .ge-radio:hover {
  border-color: #9090a5;
  background-color: #fafafe;
}

[data-theme="light"] .ge-radio:checked {
  border-color: var(--ge-cyan-dark);
}

[data-theme="light"] .ge-radio:checked::after {
  background-color: var(--ge-cyan-dark);
}

[data-theme="light"] .ge-radio:checked:hover {
  border-color: var(--ge-cyan-dim);
}

[data-theme="light"] .ge-radio:checked:hover::after {
  background-color: var(--ge-cyan-dim);
}

[data-theme="light"] .ge-radio-label {
  color: #1a1a2e;
}

[data-theme="light"] .ge-radio-card {
  background-color: #ffffff;
  border-color: #e0e0e8;
}

[data-theme="light"] .ge-radio-card:hover {
  background-color: #fafafe;
  border-color: #c0c0d0;
}

[data-theme="light"] .ge-radio-card:has(.ge-radio:checked) {
  border-color: var(--ge-cyan-dim);
  background-color: rgba(0, 154, 166, 0.06);
}


/* ==========================================================================
   8. TOGGLE / SWITCH (.ge-toggle)
   ========================================================================== */

/* -------------------------------------------------------------------------
   8a. Toggle Base
   ------------------------------------------------------------------------- */
.ge-toggle {
  position: relative;
  width: var(--ge-toggle-width);
  height: var(--ge-toggle-height);
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--ge-toggle-bg-off);
  border: var(--ge-border-width-thin) solid var(--ge-toggle-border);
  border-radius: var(--ge-toggle-radius);
  outline: none;
  transition: var(--ge-toggle-transition);
  flex-shrink: 0;
  vertical-align: middle;
}

/* Thumb via pseudo-element */
.ge-toggle::after {
  content: "";
  position: absolute;
  top: var(--ge-toggle-thumb-offset);
  left: var(--ge-toggle-thumb-offset);
  width: var(--ge-toggle-thumb-size);
  height: var(--ge-toggle-thumb-size);
  background-color: var(--ge-toggle-thumb-color);
  border-radius: var(--ge-radius-full);
  box-shadow: var(--ge-toggle-thumb-shadow);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ge-toggle:hover {
  border-color: rgba(136, 136, 160, 0.40);
}

.ge-toggle:focus-visible {
  outline: var(--ge-focus-ring-width) solid var(--ge-focus-ring-color);
  outline-offset: var(--ge-focus-ring-offset);
}

/* Checked (on) */
.ge-toggle:checked {
  background-color: var(--ge-toggle-bg-on);
  border-color: var(--ge-toggle-bg-on);
}

.ge-toggle:checked::after {
  /* translate thumb to the right: track width - thumb size - 2*offset */
  transform: translateX(calc(var(--ge-toggle-width) - var(--ge-toggle-thumb-size) - var(--ge-toggle-thumb-offset) * 2 - 2px));
}

.ge-toggle:checked:hover {
  background-color: var(--ge-cyan-bright);
  border-color: var(--ge-cyan-bright);
}

/* Disabled */
.ge-toggle:disabled {
  opacity: var(--ge-toggle-disabled-opacity);
  cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   8b. Toggle Sizes
   ------------------------------------------------------------------------- */

/* Small */
.ge-toggle-sm {
  --ge-toggle-width: 2.25rem;
  --ge-toggle-height: 1.25rem;
  --ge-toggle-thumb-size: 1rem;
  --ge-toggle-thumb-offset: 1.5px;
}

/* Large */
.ge-toggle-lg {
  --ge-toggle-width: 3.5rem;
  --ge-toggle-height: 1.875rem;
  --ge-toggle-thumb-size: 1.5rem;
  --ge-toggle-thumb-offset: 2.5px;
}

/* -------------------------------------------------------------------------
   8c. Toggle Light Mode
   ------------------------------------------------------------------------- */
[data-theme="light"] .ge-toggle {
  background-color: #d0d0dd;
  border-color: #c0c0d0;
}

[data-theme="light"] .ge-toggle::after {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .ge-toggle:hover {
  background-color: #c0c0d0;
  border-color: #b0b0c0;
}

[data-theme="light"] .ge-toggle:checked {
  background-color: var(--ge-cyan-dark);
  border-color: var(--ge-cyan-dark);
}

[data-theme="light"] .ge-toggle:checked:hover {
  background-color: var(--ge-cyan-dim);
  border-color: var(--ge-cyan-dim);
}


/* ==========================================================================
   9. SLIDER / RANGE (.ge-slider)
   ========================================================================== */

/* -------------------------------------------------------------------------
   9a. Slider Base
   ------------------------------------------------------------------------- */
.ge-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--ge-border-default);
  border-radius: var(--ge-radius-full);
  outline: none;
  cursor: pointer;
  transition: opacity 200ms ease;
}

/* WebKit Track */
.ge-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: var(--ge-border-default);
  border-radius: var(--ge-radius-full);
  border: none;
}

/* Firefox Track */
.ge-slider::-moz-range-track {
  width: 100%;
  height: 4px;
  background: var(--ge-border-default);
  border-radius: var(--ge-radius-full);
  border: none;
}

/* Firefox Progress (filled portion) */
.ge-slider::-moz-range-progress {
  height: 4px;
  background: var(--ge-cyan);
  border-radius: var(--ge-radius-full);
}

/* WebKit Thumb */
.ge-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--ge-cyan);
  border: 2px solid var(--ge-bg-primary);
  border-radius: var(--ge-radius-full);
  cursor: pointer;
  margin-top: -6px;
  box-shadow: 0 0 0 2px var(--ge-cyan-alpha-30);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

/* Firefox Thumb */
.ge-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--ge-cyan);
  border: 2px solid var(--ge-bg-primary);
  border-radius: var(--ge-radius-full);
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--ge-cyan-alpha-30);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

/* Hover states */
.ge-slider:hover::-webkit-slider-thumb {
  transform: scale(1.15);
  box-shadow: 0 0 0 3px var(--ge-cyan-alpha-40);
}

.ge-slider:hover::-moz-range-thumb {
  transform: scale(1.15);
  box-shadow: 0 0 0 3px var(--ge-cyan-alpha-40);
}

/* Focus states */
.ge-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--ge-focus-ring-color);
}

.ge-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--ge-focus-ring-color);
}

/* Active states */
.ge-slider:active::-webkit-slider-thumb {
  transform: scale(1.1);
  box-shadow: var(--ge-glow-cyan);
}

.ge-slider:active::-moz-range-thumb {
  transform: scale(1.1);
  box-shadow: var(--ge-glow-cyan);
}

/* Disabled */
.ge-slider:disabled {
  opacity: var(--ge-input-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

.ge-slider:disabled::-webkit-slider-thumb {
  box-shadow: none;
}

.ge-slider:disabled::-moz-range-thumb {
  box-shadow: none;
}

/* -------------------------------------------------------------------------
   9b. Slider Sizes
   ------------------------------------------------------------------------- */
.ge-slider-sm {
  height: 2px;
}

.ge-slider-sm::-webkit-slider-runnable-track {
  height: 2px;
}

.ge-slider-sm::-moz-range-track {
  height: 2px;
}

.ge-slider-sm::-moz-range-progress {
  height: 2px;
}

.ge-slider-sm::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -5px;
}

.ge-slider-sm::-moz-range-thumb {
  width: 12px;
  height: 12px;
}

.ge-slider-lg {
  height: 6px;
}

.ge-slider-lg::-webkit-slider-runnable-track {
  height: 6px;
}

.ge-slider-lg::-moz-range-track {
  height: 6px;
}

.ge-slider-lg::-moz-range-progress {
  height: 6px;
}

.ge-slider-lg::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -7px;
}

.ge-slider-lg::-moz-range-thumb {
  width: 20px;
  height: 20px;
}

/* -------------------------------------------------------------------------
   9c. Slider Light Mode
   ------------------------------------------------------------------------- */
[data-theme="light"] .ge-slider {
  background: #d0d0dd;
}

[data-theme="light"] .ge-slider::-webkit-slider-runnable-track {
  background: #d0d0dd;
}

[data-theme="light"] .ge-slider::-moz-range-track {
  background: #d0d0dd;
}

[data-theme="light"] .ge-slider::-webkit-slider-thumb {
  background: var(--ge-cyan-dark);
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(0, 110, 117, 0.30);
}

[data-theme="light"] .ge-slider::-moz-range-thumb {
  background: var(--ge-cyan-dark);
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(0, 110, 117, 0.30);
}

[data-theme="light"] .ge-slider::-moz-range-progress {
  background: var(--ge-cyan-dark);
}

[data-theme="light"] .ge-slider:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(0, 110, 117, 0.40);
}

[data-theme="light"] .ge-slider:hover::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(0, 110, 117, 0.40);
}


/* ==========================================================================
   10. FORM GROUP (.ge-form-group)
   ========================================================================== */

/* -------------------------------------------------------------------------
   10a. Form Group Base
   ------------------------------------------------------------------------- */
.ge-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--ge-input-label-spacing);
  width: 100%;
}

/* -------------------------------------------------------------------------
   10b. Label
   ------------------------------------------------------------------------- */
.ge-label {
  display: inline-block;
  font-family: var(--ge-font-body);
  font-size: var(--ge-input-label-font-size);
  font-weight: var(--ge-input-label-font-weight);
  color: var(--ge-input-label-color);
  letter-spacing: var(--ge-tracking-wide);
  text-transform: uppercase;
  line-height: var(--ge-leading-normal);
}

/* Required asterisk */
.ge-form-required::after {
  content: " *";
  color: var(--ge-error);
  font-weight: var(--ge-font-bold);
}

/* -------------------------------------------------------------------------
   10c. Helper Text
   ------------------------------------------------------------------------- */
.ge-form-text {
  font-family: var(--ge-font-body);
  font-size: var(--ge-input-helper-font-size);
  color: var(--ge-input-helper-color);
  line-height: var(--ge-leading-normal);
  margin: 0;
}

/* Error Message */
.ge-form-error {
  font-family: var(--ge-font-body);
  font-size: var(--ge-input-helper-font-size);
  color: var(--ge-error);
  line-height: var(--ge-leading-normal);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--ge-space-1);
}

/* Success Message */
.ge-form-success {
  font-family: var(--ge-font-body);
  font-size: var(--ge-input-helper-font-size);
  color: var(--ge-success);
  line-height: var(--ge-leading-normal);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--ge-space-1);
}

/* -------------------------------------------------------------------------
   10d. Form Row (horizontal layout)
   ------------------------------------------------------------------------- */
.ge-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ge-space-4);
  align-items: flex-start;
}

.ge-form-row > .ge-form-group {
  flex: 1;
  min-width: 0;
}

/* -------------------------------------------------------------------------
   10e. Form Group Light Mode
   ------------------------------------------------------------------------- */
[data-theme="light"] .ge-label {
  color: #555570;
}

[data-theme="light"] .ge-form-text {
  color: #9090a5;
}

[data-theme="light"] .ge-form-error {
  color: var(--ge-error);
}

[data-theme="light"] .ge-form-success {
  color: var(--ge-success-dark);
}


/* ==========================================================================
   11. EXTENDED COMPONENT DETAILS
   ========================================================================== */

/* -------------------------------------------------------------------------
   11a. Button Variant + Size Combinations
   ------------------------------------------------------------------------- */

/* Secondary sizes */
.ge-btn-secondary.ge-btn-xs {
  height: var(--ge-btn-height-xs);
  padding: 0 var(--ge-btn-px-xs);
  font-size: var(--ge-btn-font-xs);
  border-radius: var(--ge-btn-radius-sm);
}

.ge-btn-secondary.ge-btn-sm {
  height: var(--ge-btn-height-sm);
  padding: 0 var(--ge-btn-px-sm);
  font-size: var(--ge-btn-font-sm);
  border-radius: var(--ge-btn-radius-sm);
}

.ge-btn-secondary.ge-btn-lg {
  height: var(--ge-btn-height-lg);
  padding: 0 var(--ge-btn-px-lg);
  font-size: var(--ge-btn-font-lg);
  border-radius: var(--ge-btn-radius-lg);
}

.ge-btn-secondary.ge-btn-xl {
  height: var(--ge-btn-height-xl);
  padding: 0 var(--ge-btn-px-xl);
  font-size: var(--ge-btn-font-xl);
  border-radius: var(--ge-btn-radius-lg);
}

/* Outline sizes */
.ge-btn-outline.ge-btn-xs {
  height: var(--ge-btn-height-xs);
  padding: 0 var(--ge-btn-px-xs);
  font-size: var(--ge-btn-font-xs);
  border-radius: var(--ge-btn-radius-sm);
}

.ge-btn-outline.ge-btn-sm {
  height: var(--ge-btn-height-sm);
  padding: 0 var(--ge-btn-px-sm);
  font-size: var(--ge-btn-font-sm);
  border-radius: var(--ge-btn-radius-sm);
}

.ge-btn-outline.ge-btn-lg {
  height: var(--ge-btn-height-lg);
  padding: 0 var(--ge-btn-px-lg);
  font-size: var(--ge-btn-font-lg);
  border-radius: var(--ge-btn-radius-lg);
}

.ge-btn-outline.ge-btn-xl {
  height: var(--ge-btn-height-xl);
  padding: 0 var(--ge-btn-px-xl);
  font-size: var(--ge-btn-font-xl);
  border-radius: var(--ge-btn-radius-lg);
}

/* Ghost sizes */
.ge-btn-ghost.ge-btn-xs {
  height: var(--ge-btn-height-xs);
  padding: 0 var(--ge-btn-px-xs);
  font-size: var(--ge-btn-font-xs);
  border-radius: var(--ge-btn-radius-sm);
}

.ge-btn-ghost.ge-btn-sm {
  height: var(--ge-btn-height-sm);
  padding: 0 var(--ge-btn-px-sm);
  font-size: var(--ge-btn-font-sm);
  border-radius: var(--ge-btn-radius-sm);
}

.ge-btn-ghost.ge-btn-lg {
  height: var(--ge-btn-height-lg);
  padding: 0 var(--ge-btn-px-lg);
  font-size: var(--ge-btn-font-lg);
  border-radius: var(--ge-btn-radius-lg);
}

.ge-btn-ghost.ge-btn-xl {
  height: var(--ge-btn-height-xl);
  padding: 0 var(--ge-btn-px-xl);
  font-size: var(--ge-btn-font-xl);
  border-radius: var(--ge-btn-radius-lg);
}

/* Destructive sizes */
.ge-btn-destructive.ge-btn-xs {
  height: var(--ge-btn-height-xs);
  padding: 0 var(--ge-btn-px-xs);
  font-size: var(--ge-btn-font-xs);
  border-radius: var(--ge-btn-radius-sm);
}

.ge-btn-destructive.ge-btn-sm {
  height: var(--ge-btn-height-sm);
  padding: 0 var(--ge-btn-px-sm);
  font-size: var(--ge-btn-font-sm);
  border-radius: var(--ge-btn-radius-sm);
}

.ge-btn-destructive.ge-btn-lg {
  height: var(--ge-btn-height-lg);
  padding: 0 var(--ge-btn-px-lg);
  font-size: var(--ge-btn-font-lg);
  border-radius: var(--ge-btn-radius-lg);
}

.ge-btn-destructive.ge-btn-xl {
  height: var(--ge-btn-height-xl);
  padding: 0 var(--ge-btn-px-xl);
  font-size: var(--ge-btn-font-xl);
  border-radius: var(--ge-btn-radius-lg);
}

/* -------------------------------------------------------------------------
   11b. Button Group with Sizes
   ------------------------------------------------------------------------- */
.ge-btn-group > .ge-btn-sm:first-child {
  border-top-left-radius: var(--ge-btn-radius-sm);
  border-bottom-left-radius: var(--ge-btn-radius-sm);
}

.ge-btn-group > .ge-btn-sm:last-child {
  border-top-right-radius: var(--ge-btn-radius-sm);
  border-bottom-right-radius: var(--ge-btn-radius-sm);
}

.ge-btn-group > .ge-btn-lg:first-child {
  border-top-left-radius: var(--ge-btn-radius-lg);
  border-bottom-left-radius: var(--ge-btn-radius-lg);
}

.ge-btn-group > .ge-btn-lg:last-child {
  border-top-right-radius: var(--ge-btn-radius-lg);
  border-bottom-right-radius: var(--ge-btn-radius-lg);
}

/* Vertical button group */
.ge-btn-group-vertical {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}

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

.ge-btn-group-vertical > .ge-btn:first-child {
  border-top-left-radius: var(--ge-btn-radius);
  border-top-right-radius: var(--ge-btn-radius);
}

.ge-btn-group-vertical > .ge-btn:last-child {
  border-bottom-left-radius: var(--ge-btn-radius);
  border-bottom-right-radius: var(--ge-btn-radius);
}

.ge-btn-group-vertical > .ge-btn + .ge-btn {
  margin-top: -1px;
  margin-left: 0;
}

.ge-btn-group-vertical > .ge-btn:hover,
.ge-btn-group-vertical > .ge-btn:focus-visible,
.ge-btn-group-vertical > .ge-btn:active {
  z-index: 1;
}

/* -------------------------------------------------------------------------
   11c. Card Padding Sizes
   ------------------------------------------------------------------------- */
.ge-card-sm .ge-card-header {
  padding: var(--ge-card-padding-sm) var(--ge-card-padding-sm) 0;
}

.ge-card-sm .ge-card-body {
  padding: var(--ge-card-padding-sm);
}

.ge-card-sm .ge-card-header + .ge-card-body {
  padding-top: var(--ge-space-2);
}

.ge-card-sm .ge-card-footer {
  padding: 0 var(--ge-card-padding-sm) var(--ge-card-padding-sm);
}

.ge-card-lg .ge-card-header {
  padding: var(--ge-card-padding-lg) var(--ge-card-padding-lg) 0;
}

.ge-card-lg .ge-card-body {
  padding: var(--ge-card-padding-lg);
}

.ge-card-lg .ge-card-header + .ge-card-body {
  padding-top: var(--ge-space-4);
}

.ge-card-lg .ge-card-footer {
  padding: 0 var(--ge-card-padding-lg) var(--ge-card-padding-lg);
}

/* Card no padding */
.ge-card-flush .ge-card-header,
.ge-card-flush .ge-card-body,
.ge-card-flush .ge-card-footer {
  padding: 0;
}

/* Card horizontal layout */
.ge-card-horizontal {
  flex-direction: row;
}

.ge-card-horizontal .ge-card-media {
  flex-shrink: 0;
  max-width: 40%;
}

.ge-card-horizontal .ge-card-media img,
.ge-card-horizontal .ge-card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card stacked footer (buttons at bottom, push down) */
.ge-card-footer-end {
  margin-top: auto;
}

/* Card divider between sections */
.ge-card-header-bordered {
  border-bottom: var(--ge-border-width-thin) solid var(--ge-card-border);
  padding-bottom: var(--ge-space-3);
}

.ge-card-footer-bordered {
  border-top: var(--ge-border-width-thin) solid var(--ge-card-border);
  padding-top: var(--ge-space-3);
}

/* -------------------------------------------------------------------------
   11d. Input Group Sizing
   ------------------------------------------------------------------------- */
.ge-input-group-sm .ge-input {
  height: var(--ge-input-height-sm);
  font-size: var(--ge-text-sm);
}

.ge-input-group-sm .ge-input-group-prepend,
.ge-input-group-sm .ge-input-group-append {
  padding: 0 var(--ge-space-2);
  font-size: var(--ge-text-sm);
}

.ge-input-group-lg .ge-input {
  height: var(--ge-input-height-lg);
  font-size: var(--ge-text-md);
}

.ge-input-group-lg .ge-input-group-prepend,
.ge-input-group-lg .ge-input-group-append {
  padding: 0 var(--ge-space-4);
  font-size: var(--ge-text-md);
}

/* -------------------------------------------------------------------------
   11e. Inline Form Group
   ------------------------------------------------------------------------- */
.ge-form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ge-space-3);
}

.ge-form-inline .ge-form-group {
  flex: none;
  width: auto;
  flex-direction: row;
  align-items: center;
}

.ge-form-inline .ge-label {
  margin-bottom: 0;
  text-transform: none;
}

/* -------------------------------------------------------------------------
   11f. Checkbox and Radio Groups
   ------------------------------------------------------------------------- */
.ge-checkbox-group,
.ge-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-3);
}

.ge-checkbox-group-horizontal,
.ge-radio-group-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ge-space-4);
}

/* Card group variant */
.ge-checkbox-card-group,
.ge-radio-card-group {
  display: grid;
  gap: var(--ge-space-3);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* -------------------------------------------------------------------------
   11g. Toggle with Label
   ------------------------------------------------------------------------- */
.ge-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: var(--ge-space-2);
  cursor: pointer;
  font-family: var(--ge-font-body);
  font-size: var(--ge-input-font-size);
  color: var(--ge-text-primary);
  line-height: var(--ge-leading-normal);
  user-select: none;
}

.ge-toggle-label:has(.ge-toggle:disabled) {
  opacity: var(--ge-toggle-disabled-opacity);
  cursor: not-allowed;
}

[data-theme="light"] .ge-toggle-label {
  color: #1a1a2e;
}

/* -------------------------------------------------------------------------
   11h. Slider with Labels
   ------------------------------------------------------------------------- */
.ge-slider-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-2);
  width: 100%;
}

.ge-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--ge-text-xs);
  color: var(--ge-text-muted);
}

.ge-slider-value {
  text-align: center;
  font-size: var(--ge-text-sm);
  font-weight: var(--ge-font-medium);
  color: var(--ge-cyan);
  font-variant-numeric: tabular-nums;
}

[data-theme="light"] .ge-slider-labels {
  color: #9090a5;
}

[data-theme="light"] .ge-slider-value {
  color: var(--ge-cyan-dark);
}

/* -------------------------------------------------------------------------
   11i. File Input Styling
   ------------------------------------------------------------------------- */
.ge-file-input {
  display: block;
  width: 100%;
  font-family: var(--ge-font-body);
  font-size: var(--ge-input-font-size);
  color: var(--ge-text-secondary);
}

.ge-file-input::file-selector-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ge-btn-height-sm);
  padding: 0 var(--ge-btn-px-sm);
  font-family: var(--ge-font-body);
  font-size: var(--ge-btn-font-sm);
  font-weight: var(--ge-btn-font-weight);
  letter-spacing: var(--ge-btn-letter-spacing);
  color: var(--ge-text-primary);
  background-color: var(--ge-bg-tertiary);
  border: var(--ge-border-width-thin) solid var(--ge-border-default);
  border-radius: var(--ge-btn-radius-sm);
  cursor: pointer;
  margin-right: var(--ge-space-3);
  transition: var(--ge-btn-transition);
}

.ge-file-input::file-selector-button:hover {
  background-color: var(--ge-bg-elevated);
  border-color: var(--ge-border-dark);
}

.ge-file-input:focus-visible {
  outline: var(--ge-focus-ring-width) solid var(--ge-focus-ring-color);
  outline-offset: var(--ge-focus-ring-offset);
}

.ge-file-input:disabled {
  opacity: var(--ge-input-disabled-opacity);
  cursor: not-allowed;
}

.ge-file-input:disabled::file-selector-button {
  pointer-events: none;
}

[data-theme="light"] .ge-file-input {
  color: #555570;
}

[data-theme="light"] .ge-file-input::file-selector-button {
  background-color: #f0f0f5;
  border-color: #d0d0dd;
  color: #1a1a2e;
}

[data-theme="light"] .ge-file-input::file-selector-button:hover {
  background-color: #e4e4ed;
  border-color: #b0b0c0;
}

/* -------------------------------------------------------------------------
   11j. Number Input Spinner Styling
   ------------------------------------------------------------------------- */
.ge-input[type="number"] {
  -moz-appearance: textfield;
}

.ge-input[type="number"]::-webkit-inner-spin-button,
.ge-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Show spinners variant */
.ge-input-number-arrows[type="number"]::-webkit-inner-spin-button,
.ge-input-number-arrows[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: inner-spin-button;
  opacity: 0.5;
}

.ge-input-number-arrows[type="number"]:hover::-webkit-inner-spin-button,
.ge-input-number-arrows[type="number"]:hover::-webkit-outer-spin-button {
  opacity: 0.8;
}

.ge-input-number-arrows[type="number"]:focus::-webkit-inner-spin-button,
.ge-input-number-arrows[type="number"]:focus::-webkit-outer-spin-button {
  opacity: 1;
}

/* -------------------------------------------------------------------------
   11k. Search Input Clear Button
   ------------------------------------------------------------------------- */
.ge-input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%238888a0' d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-size: contain;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 200ms ease;
}

.ge-input[type="search"]::-webkit-search-cancel-button:hover {
  opacity: 1;
}

[data-theme="light"] .ge-input[type="search"]::-webkit-search-cancel-button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23555570' d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   11l. Password Toggle Utility
   ------------------------------------------------------------------------- */
.ge-input-password-wrapper {
  position: relative;
  width: 100%;
}

.ge-input-password-wrapper .ge-input {
  padding-right: 2.75rem;
}

.ge-input-password-toggle {
  position: absolute;
  top: 50%;
  right: var(--ge-space-2);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: none;
  border: none;
  color: var(--ge-text-muted);
  cursor: pointer;
  border-radius: var(--ge-radius-sm);
  padding: 0;
  transition: color 200ms ease, background-color 200ms ease;
}

.ge-input-password-toggle:hover {
  color: var(--ge-text-secondary);
  background-color: var(--ge-cyan-alpha-8);
}

.ge-input-password-toggle:focus-visible {
  outline: var(--ge-focus-ring-width) solid var(--ge-focus-ring-color);
  outline-offset: 0;
}

[data-theme="light"] .ge-input-password-toggle {
  color: #9090a5;
}

[data-theme="light"] .ge-input-password-toggle:hover {
  color: #555570;
  background-color: rgba(0, 0, 0, 0.06);
}

/* -------------------------------------------------------------------------
   11m. Card Action Overlay
   ------------------------------------------------------------------------- */
.ge-card-actions {
  position: absolute;
  top: var(--ge-space-2);
  right: var(--ge-space-2);
  display: flex;
  gap: var(--ge-space-1);
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 1;
}

.ge-card:hover .ge-card-actions,
.ge-card:focus-within .ge-card-actions {
  opacity: 1;
}

.ge-card-actions .ge-btn-icon {
  background-color: var(--ge-bg-overlay-medium);
  backdrop-filter: blur(var(--ge-blur-sm));
  -webkit-backdrop-filter: blur(var(--ge-blur-sm));
}

[data-theme="light"] .ge-card-actions .ge-btn-icon {
  background-color: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(var(--ge-blur-sm));
}

/* -------------------------------------------------------------------------
   11n. Select Multiple
   ------------------------------------------------------------------------- */
.ge-select[multiple] {
  height: auto;
  min-height: var(--ge-input-height-lg);
  padding: var(--ge-space-1);
  background-image: none;
}

.ge-select[multiple] option {
  padding: var(--ge-space-1-5) var(--ge-space-2);
  border-radius: var(--ge-radius-xs);
}

.ge-select[multiple] option:checked {
  background-color: var(--ge-cyan-alpha-20);
  color: var(--ge-cyan);
}

[data-theme="light"] .ge-select[multiple] option:checked {
  background-color: rgba(0, 110, 117, 0.12);
  color: var(--ge-cyan-dark);
}

/* -------------------------------------------------------------------------
   11o. Textarea Auto-grow Utility (JS-driven class)
   ------------------------------------------------------------------------- */
.ge-textarea-auto {
  overflow: hidden;
  resize: none;
}

/* -------------------------------------------------------------------------
   11p. Form Fieldset and Legend
   ------------------------------------------------------------------------- */
.ge-fieldset {
  border: var(--ge-border-width-thin) solid var(--ge-border-default);
  border-radius: var(--ge-radius-lg);
  padding: var(--ge-space-4);
  margin: 0;
}

.ge-fieldset .ge-legend {
  font-family: var(--ge-font-body);
  font-size: var(--ge-text-sm);
  font-weight: var(--ge-font-semibold);
  color: var(--ge-text-primary);
  padding: 0 var(--ge-space-2);
  letter-spacing: var(--ge-tracking-wide);
  text-transform: uppercase;
}

[data-theme="light"] .ge-fieldset {
  border-color: #d0d0dd;
}

[data-theme="light"] .ge-fieldset .ge-legend {
  color: #1a1a2e;
}

/* -------------------------------------------------------------------------
   11q. Form Floating Label Pattern
   ------------------------------------------------------------------------- */
.ge-form-floating {
  position: relative;
  width: 100%;
}

.ge-form-floating .ge-input {
  padding-top: 1.25rem;
  padding-bottom: 0.25rem;
  height: 3.25rem;
}

.ge-form-floating .ge-label {
  position: absolute;
  top: 50%;
  left: var(--ge-input-px);
  transform: translateY(-50%);
  font-size: var(--ge-input-font-size);
  color: var(--ge-input-placeholder);
  text-transform: none;
  letter-spacing: normal;
  pointer-events: none;
  transition: transform 200ms ease, font-size 200ms ease, color 200ms ease;
  transform-origin: left top;
}

.ge-form-floating .ge-input:focus ~ .ge-label,
.ge-form-floating .ge-input:not(:placeholder-shown) ~ .ge-label {
  transform: translateY(-130%) scale(0.78);
  color: var(--ge-cyan);
  font-weight: var(--ge-font-medium);
}

[data-theme="light"] .ge-form-floating .ge-input:focus ~ .ge-label,
[data-theme="light"] .ge-form-floating .ge-input:not(:placeholder-shown) ~ .ge-label {
  color: var(--ge-cyan-dark);
}

/* -------------------------------------------------------------------------
   11r. Input Sizes with Icon Adjustments
   ------------------------------------------------------------------------- */
.ge-input-wrapper .ge-input-icon--sm {
  width: 2rem;
}

.ge-input-wrapper .ge-input-icon--lg {
  width: 3rem;
}

/* -------------------------------------------------------------------------
   11s. Card Badge Positioning
   ------------------------------------------------------------------------- */
.ge-card-badge {
  position: absolute;
  top: var(--ge-space-3);
  right: var(--ge-space-3);
  z-index: 1;
}

.ge-card-badge-left {
  right: auto;
  left: var(--ge-space-3);
}

/* -------------------------------------------------------------------------
   11t. Form Group Spacing Variants
   ------------------------------------------------------------------------- */
.ge-form-group-tight {
  gap: var(--ge-space-1);
}

.ge-form-group-loose {
  gap: var(--ge-space-3);
}

/* Form stack -- full form wrapper with spacing */
.ge-form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-5);
}

.ge-form-stack-sm {
  gap: var(--ge-space-3);
}

.ge-form-stack-lg {
  gap: var(--ge-space-8);
}

/* Form section divider */
.ge-form-divider {
  height: var(--ge-border-width-thin);
  background-color: var(--ge-border-default);
  border: none;
  margin: var(--ge-space-2) 0;
}

[data-theme="light"] .ge-form-divider {
  background-color: #e0e0e8;
}


/* ==========================================================================
   12. PRINT STYLES
   ========================================================================== */
@media print {
  .ge-btn,
  .ge-toggle,
  .ge-slider {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .ge-btn {
    border: 1px solid #000 !important;
    background: transparent !important;
    color: #000 !important;
  }

  .ge-card {
    border: 1px solid var(--ge-print-border) !important;
    background: var(--ge-print-bg) !important;
    box-shadow: none !important;
  }

  .ge-card-glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}


/* ==========================================================================
   12. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ge-btn,
  .ge-card,
  .ge-card-interactive,
  .ge-input,
  .ge-textarea,
  .ge-select,
  .ge-checkbox,
  .ge-radio,
  .ge-toggle,
  .ge-toggle::after,
  .ge-slider::-webkit-slider-thumb,
  .ge-slider::-moz-range-thumb {
    transition-duration: 0.01ms !important;
  }

  .ge-btn-loading::after {
    animation-duration: 1.5s !important;
  }

  .ge-card-interactive:hover {
    transform: none !important;
  }

  .ge-btn:active {
    transform: none !important;
  }
}
/* ============================================================
   GOD'S EYE DESIGN SYSTEM -- Components Part 2 (v2.0)
   Navigation, Layout & Overlay Components

   Contents:
     1. Component Tokens
     2. Navbar
     3. Sidebar
     4. Tabs
     5. Breadcrumbs
     6. Pagination
     7. Steps / Stepper
     8. Modal / Dialog
     9. Drawer / Sheet
    10. Dropdown Menu
    11. Light Theme Overrides
   ============================================================ */


/* ==========================================================================
   1. COMPONENT TOKENS
   ========================================================================== */

:root {

  /* -- Navbar tokens ---------------------------------------------------- */
  --ge-navbar-height: 3.75rem;
  --ge-navbar-height-compact: 2.75rem;
  --ge-navbar-bg: rgba(10, 10, 15, 0.75);
  --ge-navbar-bg-solid: var(--ge-bg-primary, #0a0a0f);
  --ge-navbar-border: var(--ge-border-default, rgba(136, 136, 160, 0.15));
  --ge-navbar-blur: 16px;
  --ge-navbar-z: var(--ge-z-sticky, 200);
  --ge-navbar-padding-x: var(--ge-space-6, 1.5rem);
  --ge-navbar-link-color: var(--ge-text-secondary, #8888a0);
  --ge-navbar-link-hover: var(--ge-text-primary, #e8e8f0);
  --ge-navbar-link-active: var(--ge-cyan, #00f0ff);
  --ge-navbar-brand-size: var(--ge-text-lg, 1.125rem);
  --ge-navbar-toggle-size: 2.25rem;

  /* -- Sidebar tokens --------------------------------------------------- */
  --ge-sidebar-width: 16rem;
  --ge-sidebar-width-collapsed: 4rem;
  --ge-sidebar-bg: var(--ge-bg-secondary, #111119);
  --ge-sidebar-border: var(--ge-border-default, rgba(136, 136, 160, 0.15));
  --ge-sidebar-item-height: 2.5rem;
  --ge-sidebar-item-radius: var(--ge-radius-md, 0.375rem);
  --ge-sidebar-item-color: var(--ge-text-secondary, #8888a0);
  --ge-sidebar-item-hover-bg: rgba(136, 136, 160, 0.08);
  --ge-sidebar-item-active-bg: var(--ge-cyan-alpha-10, rgba(0, 240, 255, 0.10));
  --ge-sidebar-item-active-color: var(--ge-cyan, #00f0ff);
  --ge-sidebar-section-label-color: var(--ge-text-muted, #555570);
  --ge-sidebar-icon-size: 1.25rem;
  --ge-sidebar-transition: 200ms;

  /* -- Tab tokens ------------------------------------------------------- */
  --ge-tab-height: 2.5rem;
  --ge-tab-color: var(--ge-text-secondary, #8888a0);
  --ge-tab-hover-color: var(--ge-text-primary, #e8e8f0);
  --ge-tab-active-color: var(--ge-cyan, #00f0ff);
  --ge-tab-border: var(--ge-border-default, rgba(136, 136, 160, 0.15));
  --ge-tab-indicator-color: var(--ge-cyan, #00f0ff);
  --ge-tab-indicator-height: 2px;
  --ge-tab-pill-bg: transparent;
  --ge-tab-pill-active-bg: var(--ge-cyan-alpha-15, rgba(0, 240, 255, 0.15));
  --ge-tab-pill-radius: var(--ge-radius-full, 9999px);
  --ge-tab-font-size: var(--ge-text-sm, 0.75rem);
  --ge-tab-gap: var(--ge-space-1, 0.25rem);

  /* -- Breadcrumb tokens ------------------------------------------------ */
  --ge-breadcrumb-color: var(--ge-text-secondary, #8888a0);
  --ge-breadcrumb-link-color: var(--ge-text-secondary, #8888a0);
  --ge-breadcrumb-link-hover: var(--ge-cyan, #00f0ff);
  --ge-breadcrumb-active-color: var(--ge-text-primary, #e8e8f0);
  --ge-breadcrumb-separator-color: var(--ge-text-muted, #555570);
  --ge-breadcrumb-font-size: var(--ge-text-sm, 0.75rem);

  /* -- Pagination tokens ------------------------------------------------ */
  --ge-pagination-item-size: 2.25rem;
  --ge-pagination-item-size-sm: 1.75rem;
  --ge-pagination-item-size-lg: 2.75rem;
  --ge-pagination-item-bg: transparent;
  --ge-pagination-item-border: var(--ge-border-default, rgba(136, 136, 160, 0.15));
  --ge-pagination-item-color: var(--ge-text-secondary, #8888a0);
  --ge-pagination-item-hover-bg: rgba(136, 136, 160, 0.08);
  --ge-pagination-item-hover-color: var(--ge-text-primary, #e8e8f0);
  --ge-pagination-item-active-bg: var(--ge-cyan-alpha-15, rgba(0, 240, 255, 0.15));
  --ge-pagination-item-active-color: var(--ge-cyan, #00f0ff);
  --ge-pagination-item-active-border: var(--ge-cyan-alpha-40, rgba(0, 240, 255, 0.40));
  --ge-pagination-item-radius: var(--ge-radius-md, 0.375rem);
  --ge-pagination-font-size: var(--ge-text-sm, 0.75rem);

  /* -- Steps tokens ----------------------------------------------------- */
  --ge-step-indicator-size: 2rem;
  --ge-step-indicator-font-size: var(--ge-text-sm, 0.75rem);
  --ge-step-connector-width: 2px;
  --ge-step-connector-gap: var(--ge-space-2, 0.5rem);
  --ge-step-pending-bg: var(--ge-bg-tertiary, #1a1a2e);
  --ge-step-pending-border: var(--ge-border-default, rgba(136, 136, 160, 0.15));
  --ge-step-pending-color: var(--ge-text-muted, #555570);
  --ge-step-active-bg: var(--ge-cyan-alpha-15, rgba(0, 240, 255, 0.15));
  --ge-step-active-border: var(--ge-cyan, #00f0ff);
  --ge-step-active-color: var(--ge-cyan, #00f0ff);
  --ge-step-completed-bg: var(--ge-success-alpha-15, rgba(0, 230, 118, 0.15));
  --ge-step-completed-border: var(--ge-success, #00e676);
  --ge-step-completed-color: var(--ge-success, #00e676);
  --ge-step-title-color: var(--ge-text-primary, #e8e8f0);
  --ge-step-description-color: var(--ge-text-secondary, #8888a0);

  /* -- Modal tokens ----------------------------------------------------- */
  --ge-modal-overlay-bg: rgba(0, 0, 0, 0.65);
  --ge-modal-bg: var(--ge-bg-elevated, #1e1e32);
  --ge-modal-border: var(--ge-border-default, rgba(136, 136, 160, 0.15));
  --ge-modal-radius: var(--ge-radius-xl, 0.75rem);
  --ge-modal-shadow: var(--ge-shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.70));
  --ge-modal-z: var(--ge-z-modal, 400);
  --ge-modal-width-sm: 24rem;
  --ge-modal-width-md: 32rem;
  --ge-modal-width-lg: 42rem;
  --ge-modal-width-xl: 56rem;
  --ge-modal-padding: var(--ge-space-6, 1.5rem);
  --ge-modal-header-gap: var(--ge-space-4, 1rem);
  --ge-modal-animation-duration: 200ms;

  /* -- Drawer tokens ---------------------------------------------------- */
  --ge-drawer-bg: var(--ge-bg-elevated, #1e1e32);
  --ge-drawer-border: var(--ge-border-default, rgba(136, 136, 160, 0.15));
  --ge-drawer-overlay-bg: rgba(0, 0, 0, 0.55);
  --ge-drawer-z: var(--ge-z-modal, 400);
  --ge-drawer-width-sm: 20rem;
  --ge-drawer-width-md: 28rem;
  --ge-drawer-width-lg: 40rem;
  --ge-drawer-height-sm: 30vh;
  --ge-drawer-height-md: 50vh;
  --ge-drawer-height-lg: 75vh;
  --ge-drawer-shadow: var(--ge-shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.70));
  --ge-drawer-padding: var(--ge-space-6, 1.5rem);
  --ge-drawer-radius: var(--ge-radius-xl, 0.75rem);
  --ge-drawer-animation-duration: 250ms;

  /* -- Dropdown tokens -------------------------------------------------- */
  --ge-dropdown-bg: var(--ge-bg-elevated, #1e1e32);
  --ge-dropdown-border: var(--ge-border-default, rgba(136, 136, 160, 0.15));
  --ge-dropdown-radius: var(--ge-radius-lg, 0.5rem);
  --ge-dropdown-shadow: var(--ge-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.50), 0 8px 10px -6px rgba(0, 0, 0, 0.40));
  --ge-dropdown-z: var(--ge-z-dropdown, 100);
  --ge-dropdown-min-width: 12rem;
  --ge-dropdown-max-height: 20rem;
  --ge-dropdown-padding: var(--ge-space-1, 0.25rem);
  --ge-dropdown-item-height: 2.25rem;
  --ge-dropdown-item-padding-x: var(--ge-space-3, 0.75rem);
  --ge-dropdown-item-color: var(--ge-text-secondary, #8888a0);
  --ge-dropdown-item-hover-bg: rgba(136, 136, 160, 0.08);
  --ge-dropdown-item-hover-color: var(--ge-text-primary, #e8e8f0);
  --ge-dropdown-item-active-bg: var(--ge-cyan-alpha-10, rgba(0, 240, 255, 0.10));
  --ge-dropdown-item-active-color: var(--ge-cyan, #00f0ff);
  --ge-dropdown-divider-color: var(--ge-border-default, rgba(136, 136, 160, 0.15));
  --ge-dropdown-group-label-color: var(--ge-text-muted, #555570);
  --ge-dropdown-animation-duration: 150ms;
}


/* ==========================================================================
   2. NAVBAR (.ge-navbar)
   ========================================================================== */

/* 2.1 Base Navbar
   -------------------------------------------------------------------------- */
.ge-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--ge-navbar-z);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--ge-navbar-height);
  padding: 0 var(--ge-navbar-padding-x);
  background: var(--ge-navbar-bg);
  -webkit-backdrop-filter: blur(var(--ge-navbar-blur));
  backdrop-filter: blur(var(--ge-navbar-blur));
  border-bottom: 1px solid var(--ge-navbar-border);
  transition: background 200ms ease, height 200ms ease, border-color 200ms ease;
}

/* 2.2 Navbar Variants
   -------------------------------------------------------------------------- */
.ge-navbar-solid {
  background: var(--ge-navbar-bg-solid);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.ge-navbar-compact {
  height: var(--ge-navbar-height-compact);
}

.ge-navbar-compact .ge-navbar-brand {
  font-size: var(--ge-text-base, 0.875rem);
}

/* 2.3 Navbar Brand
   -------------------------------------------------------------------------- */
.ge-navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--ge-space-3, 0.75rem);
  font-family: var(--ge-font-display, 'Syne', system-ui, sans-serif);
  font-size: var(--ge-navbar-brand-size);
  font-weight: var(--ge-font-bold, 700);
  color: var(--ge-text-primary, #e8e8f0);
  text-decoration: none;
  letter-spacing: var(--ge-tracking-wide, 0.025em);
  text-transform: uppercase;
  transition: color 200ms ease, opacity 200ms ease;
  flex-shrink: 0;
}

.ge-navbar-brand:hover {
  color: var(--ge-cyan, #00f0ff);
  opacity: 0.9;
}

.ge-navbar-brand:active {
  opacity: 0.7;
}

.ge-navbar-brand:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: 2px;
  border-radius: var(--ge-radius-sm, 0.25rem);
}

.ge-navbar-brand img,
.ge-navbar-brand svg {
  height: 1.75rem;
  width: auto;
  flex-shrink: 0;
}

/* 2.4 Navbar Navigation
   -------------------------------------------------------------------------- */
.ge-navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--ge-space-1, 0.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 2.5 Navbar Link
   -------------------------------------------------------------------------- */
.ge-navbar-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ge-space-2, 0.5rem);
  height: var(--ge-navbar-height);
  padding: 0 var(--ge-space-3, 0.75rem);
  font-family: var(--ge-font-mono, 'JetBrains Mono', monospace);
  font-size: var(--ge-text-sm, 0.75rem);
  font-weight: var(--ge-font-medium, 500);
  color: var(--ge-navbar-link-color);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--ge-tracking-wider, 0.05em);
  transition: color 200ms ease, background 200ms ease;
  white-space: nowrap;
  cursor: pointer;
}

.ge-navbar-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--ge-space-3, 0.75rem);
  right: var(--ge-space-3, 0.75rem);
  height: 2px;
  background: var(--ge-cyan, #00f0ff);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms ease;
}

.ge-navbar-link:hover {
  color: var(--ge-navbar-link-hover);
}

.ge-navbar-link:hover::after {
  transform: scaleX(1);
}

.ge-navbar-link:active {
  color: var(--ge-cyan, #00f0ff);
  opacity: 0.8;
}

.ge-navbar-link:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: -2px;
  border-radius: var(--ge-radius-sm, 0.25rem);
}

.ge-navbar-link[disabled],
.ge-navbar-link.ge-navbar-link-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* 2.6 Navbar Link Active State
   -------------------------------------------------------------------------- */
.ge-navbar-link-active,
.ge-navbar-link[aria-current="page"] {
  color: var(--ge-navbar-link-active);
}

.ge-navbar-link-active::after,
.ge-navbar-link[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--ge-cyan, #00f0ff);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

/* 2.7 Navbar Actions
   -------------------------------------------------------------------------- */
.ge-navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--ge-space-2, 0.5rem);
  flex-shrink: 0;
}

/* 2.8 Navbar Toggle (Hamburger)
   -------------------------------------------------------------------------- */
.ge-navbar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--ge-navbar-toggle-size);
  height: var(--ge-navbar-toggle-size);
  padding: 0;
  background: transparent;
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  border-radius: var(--ge-radius-md, 0.375rem);
  color: var(--ge-text-primary, #e8e8f0);
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
  flex-shrink: 0;
}

.ge-navbar-toggle:hover {
  background: rgba(136, 136, 160, 0.08);
  border-color: var(--ge-cyan-alpha-30, rgba(0, 240, 255, 0.30));
  color: var(--ge-cyan, #00f0ff);
}

.ge-navbar-toggle:active {
  background: rgba(136, 136, 160, 0.15);
}

.ge-navbar-toggle:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: 2px;
}

.ge-navbar-toggle[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.ge-navbar-toggle svg,
.ge-navbar-toggle .ge-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* 2.9 Navbar Mobile Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .ge-navbar-toggle {
    display: inline-flex;
  }

  .ge-navbar-nav {
    position: fixed;
    top: var(--ge-navbar-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ge-navbar-bg-solid);
    border-bottom: 1px solid var(--ge-navbar-border);
    padding: var(--ge-space-2, 0.5rem) 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 300ms ease, opacity 200ms ease, visibility 200ms ease;
  }

  .ge-navbar-nav.ge-navbar-nav-open {
    max-height: 100vh;
    opacity: 1;
    visibility: visible;
  }

  .ge-navbar-nav .ge-navbar-link {
    height: auto;
    padding: var(--ge-space-3, 0.75rem) var(--ge-navbar-padding-x);
  }

  .ge-navbar-nav .ge-navbar-link::after {
    bottom: auto;
    left: 0;
    top: 50%;
    width: 3px;
    height: 60%;
    right: auto;
    transform: translateY(-50%) scaleY(0);
  }

  .ge-navbar-nav .ge-navbar-link:hover::after {
    transform: translateY(-50%) scaleY(1);
  }

  .ge-navbar-nav .ge-navbar-link-active::after,
  .ge-navbar-nav .ge-navbar-link[aria-current="page"]::after {
    transform: translateY(-50%) scaleY(1);
  }

  .ge-navbar-compact .ge-navbar-nav {
    top: var(--ge-navbar-height-compact);
  }

  .ge-navbar-actions {
    gap: var(--ge-space-1, 0.25rem);
  }
}


/* ==========================================================================
   3. SIDEBAR (.ge-sidebar)
   ========================================================================== */

/* 3.1 Base Sidebar
   -------------------------------------------------------------------------- */
.ge-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--ge-sidebar-width);
  height: 100%;
  background: var(--ge-sidebar-bg);
  border-right: 1px solid var(--ge-sidebar-border);
  overflow: hidden;
  transition: width var(--ge-sidebar-transition) ease;
  flex-shrink: 0;
}

/* Custom scrollbar for sidebar */
.ge-sidebar-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--ge-space-2, 0.5rem);
}

.ge-sidebar-body::-webkit-scrollbar {
  width: 4px;
}

.ge-sidebar-body::-webkit-scrollbar-track {
  background: transparent;
}

.ge-sidebar-body::-webkit-scrollbar-thumb {
  background: rgba(136, 136, 160, 0.2);
  border-radius: var(--ge-radius-full, 9999px);
}

.ge-sidebar-body::-webkit-scrollbar-thumb:hover {
  background: rgba(136, 136, 160, 0.35);
}

/* Firefox scrollbar */
.ge-sidebar-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(136, 136, 160, 0.2) transparent;
}

/* 3.2 Sidebar Collapsed
   -------------------------------------------------------------------------- */
.ge-sidebar-collapsed {
  width: var(--ge-sidebar-width-collapsed);
}

.ge-sidebar-collapsed .ge-sidebar-item-text,
.ge-sidebar-collapsed .ge-sidebar-section-label,
.ge-sidebar-collapsed .ge-sidebar-header-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 150ms ease, width 150ms ease;
}

.ge-sidebar-collapsed .ge-sidebar-item {
  justify-content: center;
  padding: 0;
}

.ge-sidebar-collapsed .ge-sidebar-item-icon {
  margin: 0;
}

.ge-sidebar-collapsed .ge-sidebar-section {
  padding-left: 0;
  padding-right: 0;
}

.ge-sidebar-collapsed .ge-sidebar-toggle .ge-sidebar-toggle-icon {
  transform: rotate(180deg);
}

/* 3.3 Sidebar Header
   -------------------------------------------------------------------------- */
.ge-sidebar-header {
  display: flex;
  align-items: center;
  gap: var(--ge-space-3, 0.75rem);
  padding: var(--ge-space-4, 1rem) var(--ge-space-4, 1rem);
  border-bottom: 1px solid var(--ge-sidebar-border);
  min-height: var(--ge-navbar-height);
  flex-shrink: 0;
}

.ge-sidebar-header-text {
  font-family: var(--ge-font-display, 'Syne', system-ui, sans-serif);
  font-size: var(--ge-text-base, 0.875rem);
  font-weight: var(--ge-font-bold, 700);
  color: var(--ge-text-primary, #e8e8f0);
  text-transform: uppercase;
  letter-spacing: var(--ge-tracking-wide, 0.025em);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 150ms ease;
}

.ge-sidebar-header img,
.ge-sidebar-header svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* 3.4 Sidebar Section
   -------------------------------------------------------------------------- */
.ge-sidebar-section {
  padding: var(--ge-space-2, 0.5rem) 0;
}

.ge-sidebar-section-label {
  display: block;
  padding: var(--ge-space-2, 0.5rem) var(--ge-space-3, 0.75rem);
  font-family: var(--ge-font-mono, 'JetBrains Mono', monospace);
  font-size: var(--ge-text-xs, 0.625rem);
  font-weight: var(--ge-font-semibold, 600);
  color: var(--ge-sidebar-section-label-color);
  text-transform: uppercase;
  letter-spacing: var(--ge-tracking-widest, 0.1em);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 150ms ease;
  user-select: none;
}

/* 3.5 Sidebar Item
   -------------------------------------------------------------------------- */
.ge-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--ge-space-3, 0.75rem);
  width: 100%;
  height: var(--ge-sidebar-item-height);
  padding: 0 var(--ge-space-3, 0.75rem);
  font-family: var(--ge-font-body, 'Inter', system-ui, sans-serif);
  font-size: var(--ge-text-sm, 0.75rem);
  font-weight: var(--ge-font-medium, 500);
  color: var(--ge-sidebar-item-color);
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: var(--ge-sidebar-item-radius);
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease, box-shadow 200ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
}

.ge-sidebar-item:hover {
  color: var(--ge-text-primary, #e8e8f0);
  background: var(--ge-sidebar-item-hover-bg);
}

.ge-sidebar-item:active {
  background: rgba(136, 136, 160, 0.14);
}

.ge-sidebar-item:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: -2px;
}

.ge-sidebar-item[disabled],
.ge-sidebar-item.ge-sidebar-item-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* 3.6 Sidebar Item Active
   -------------------------------------------------------------------------- */
.ge-sidebar-item-active,
.ge-sidebar-item[aria-current="page"] {
  color: var(--ge-sidebar-item-active-color);
  background: var(--ge-sidebar-item-active-bg);
}

.ge-sidebar-item-active:hover,
.ge-sidebar-item[aria-current="page"]:hover {
  background: var(--ge-cyan-alpha-15, rgba(0, 240, 255, 0.15));
}

/* 3.7 Sidebar Item Icon
   -------------------------------------------------------------------------- */
.ge-sidebar-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ge-sidebar-icon-size);
  height: var(--ge-sidebar-icon-size);
  flex-shrink: 0;
  transition: color 200ms ease;
}

.ge-sidebar-item-icon svg {
  width: 100%;
  height: 100%;
}

/* 3.8 Sidebar Item Text
   -------------------------------------------------------------------------- */
.ge-sidebar-item-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 150ms ease;
}

/* 3.9 Sidebar Divider
   -------------------------------------------------------------------------- */
.ge-sidebar-divider {
  height: 1px;
  margin: var(--ge-space-2, 0.5rem) var(--ge-space-3, 0.75rem);
  background: var(--ge-sidebar-border);
  border: none;
}

/* 3.10 Sidebar Footer
   -------------------------------------------------------------------------- */
.ge-sidebar-footer {
  display: flex;
  align-items: center;
  gap: var(--ge-space-3, 0.75rem);
  padding: var(--ge-space-3, 0.75rem) var(--ge-space-4, 1rem);
  border-top: 1px solid var(--ge-sidebar-border);
  flex-shrink: 0;
}

/* 3.11 Sidebar Toggle Button (collapse/expand)
   -------------------------------------------------------------------------- */
.ge-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  border-radius: var(--ge-radius-md, 0.375rem);
  color: var(--ge-text-secondary, #8888a0);
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
  flex-shrink: 0;
}

.ge-sidebar-toggle:hover {
  color: var(--ge-text-primary, #e8e8f0);
  background: rgba(136, 136, 160, 0.08);
  border-color: var(--ge-cyan-alpha-30, rgba(0, 240, 255, 0.30));
}

.ge-sidebar-toggle:active {
  background: rgba(136, 136, 160, 0.15);
}

.ge-sidebar-toggle:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: 2px;
}

.ge-sidebar-toggle[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.ge-sidebar-toggle-icon {
  display: inline-flex;
  transition: transform 200ms ease;
}

.ge-sidebar-toggle-icon svg {
  width: 1rem;
  height: 1rem;
}


/* ==========================================================================
   4. TABS (.ge-tabs)
   ========================================================================== */

/* 4.1 Base Tabs Container
   -------------------------------------------------------------------------- */
.ge-tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 4.2 Tabs List
   -------------------------------------------------------------------------- */
.ge-tabs-list {
  display: flex;
  align-items: center;
  gap: var(--ge-tab-gap);
  border-bottom: 1px solid var(--ge-tab-border);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

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

/* 4.3 Individual Tab Button
   -------------------------------------------------------------------------- */
.ge-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ge-space-2, 0.5rem);
  height: var(--ge-tab-height);
  padding: 0 var(--ge-space-4, 1rem);
  font-family: var(--ge-font-mono, 'JetBrains Mono', monospace);
  font-size: var(--ge-tab-font-size);
  font-weight: var(--ge-font-medium, 500);
  color: var(--ge-tab-color);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--ge-tracking-wider, 0.05em);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 200ms ease, background 200ms ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Tab underline indicator */
.ge-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: var(--ge-tab-indicator-height);
  background: var(--ge-tab-indicator-color);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms ease, background 200ms ease;
  border-radius: var(--ge-tab-indicator-height) var(--ge-tab-indicator-height) 0 0;
}

.ge-tab:hover {
  color: var(--ge-tab-hover-color);
}

.ge-tab:active {
  opacity: 0.8;
}

.ge-tab:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: -2px;
  border-radius: var(--ge-radius-sm, 0.25rem);
}

/* 4.4 Tab Active State
   -------------------------------------------------------------------------- */
.ge-tab-active,
.ge-tab[aria-selected="true"] {
  color: var(--ge-tab-active-color);
}

.ge-tab-active::after,
.ge-tab[aria-selected="true"]::after {
  transform: scaleX(1);
}

/* 4.5 Tab Disabled
   -------------------------------------------------------------------------- */
.ge-tab-disabled,
.ge-tab[disabled],
.ge-tab[aria-disabled="true"] {
  color: var(--ge-text-disabled, #44445a);
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.ge-tab-disabled::after {
  display: none;
}

/* 4.6 Tab Panel
   -------------------------------------------------------------------------- */
.ge-tab-panel {
  display: none;
  padding: var(--ge-space-4, 1rem) 0;
  animation: ge-tab-panel-in 200ms ease;
}

.ge-tab-panel-active,
.ge-tab-panel[aria-hidden="false"] {
  display: block;
}

@keyframes ge-tab-panel-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 4.7 Tabs Variant: Pills
   -------------------------------------------------------------------------- */
.ge-tabs-pills .ge-tabs-list {
  border-bottom: none;
  gap: var(--ge-space-1, 0.25rem);
  background: var(--ge-bg-tertiary, #1a1a2e);
  padding: var(--ge-space-1, 0.25rem);
  border-radius: var(--ge-tab-pill-radius);
  width: fit-content;
}

.ge-tabs-pills .ge-tab {
  border-radius: var(--ge-tab-pill-radius);
  background: var(--ge-tab-pill-bg);
  height: calc(var(--ge-tab-height) - 0.5rem);
  padding: 0 var(--ge-space-4, 1rem);
}

.ge-tabs-pills .ge-tab::after {
  display: none;
}

.ge-tabs-pills .ge-tab:hover {
  background: rgba(136, 136, 160, 0.08);
}

.ge-tabs-pills .ge-tab-active,
.ge-tabs-pills .ge-tab[aria-selected="true"] {
  background: var(--ge-tab-pill-active-bg);
  color: var(--ge-tab-active-color);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.1);
}

/* 4.8 Tabs Variant: Underline (explicit)
   -------------------------------------------------------------------------- */
.ge-tabs-underline .ge-tabs-list {
  border-bottom: 2px solid var(--ge-tab-border);
}

.ge-tabs-underline .ge-tab::after {
  height: 2px;
  bottom: -2px;
}

/* 4.9 Tabs Variant: Vertical
   -------------------------------------------------------------------------- */
.ge-tabs-vertical {
  flex-direction: row;
}

.ge-tabs-vertical .ge-tabs-list {
  flex-direction: column;
  border-bottom: none;
  border-right: 1px solid var(--ge-tab-border);
  overflow-x: visible;
  overflow-y: auto;
  min-width: 10rem;
  gap: var(--ge-space-0-5, 0.125rem);
  padding-right: 0;
}

.ge-tabs-vertical .ge-tab {
  justify-content: flex-start;
  height: auto;
  padding: var(--ge-space-2, 0.5rem) var(--ge-space-4, 1rem);
  text-align: left;
  width: 100%;
}

.ge-tabs-vertical .ge-tab::after {
  top: 0;
  bottom: 0;
  left: auto;
  right: -1px;
  width: var(--ge-tab-indicator-height);
  height: 100%;
  border-radius: var(--ge-tab-indicator-height) 0 0 var(--ge-tab-indicator-height);
  transform: scaleY(0);
}

.ge-tabs-vertical .ge-tab:hover::after {
  transform: scaleY(0);
}

.ge-tabs-vertical .ge-tab-active::after,
.ge-tabs-vertical .ge-tab[aria-selected="true"]::after {
  transform: scaleY(1);
}

.ge-tabs-vertical .ge-tab-panel {
  flex: 1;
  padding: 0 var(--ge-space-4, 1rem);
}


/* ==========================================================================
   5. BREADCRUMBS (.ge-breadcrumb)
   ========================================================================== */

/* 5.1 Base Breadcrumb Container
   -------------------------------------------------------------------------- */
.ge-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ge-space-1, 0.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--ge-font-mono, 'JetBrains Mono', monospace);
  font-size: var(--ge-breadcrumb-font-size);
}

/* 5.2 Breadcrumb Item
   -------------------------------------------------------------------------- */
.ge-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ge-space-1, 0.25rem);
  color: var(--ge-breadcrumb-color);
}

/* 5.3 Breadcrumb Link
   -------------------------------------------------------------------------- */
.ge-breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ge-space-1, 0.25rem);
  color: var(--ge-breadcrumb-link-color);
  text-decoration: none;
  transition: color 200ms ease;
  padding: var(--ge-space-0-5, 0.125rem) var(--ge-space-1, 0.25rem);
  border-radius: var(--ge-radius-sm, 0.25rem);
  white-space: nowrap;
}

.ge-breadcrumb-link:hover {
  color: var(--ge-breadcrumb-link-hover);
}

.ge-breadcrumb-link:active {
  opacity: 0.7;
}

.ge-breadcrumb-link:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: 2px;
}

.ge-breadcrumb-link[disabled],
.ge-breadcrumb-link.ge-breadcrumb-link-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* 5.4 Breadcrumb Separator
   -------------------------------------------------------------------------- */
.ge-breadcrumb-separator {
  display: inline-flex;
  align-items: center;
  color: var(--ge-breadcrumb-separator-color);
  user-select: none;
  font-size: var(--ge-text-xs, 0.625rem);
  padding: 0 var(--ge-space-0-5, 0.125rem);
}

.ge-breadcrumb-separator::before {
  content: '/';
}

.ge-breadcrumb-separator:empty::before {
  content: '/';
}

/* 5.5 Breadcrumb Active (Current Page)
   -------------------------------------------------------------------------- */
.ge-breadcrumb-item-active {
  color: var(--ge-breadcrumb-active-color);
  font-weight: var(--ge-font-medium, 500);
}

.ge-breadcrumb-item-active .ge-breadcrumb-link {
  color: var(--ge-breadcrumb-active-color);
  pointer-events: none;
  cursor: default;
}

/* 5.6 Breadcrumb Truncation
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .ge-breadcrumb {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .ge-breadcrumb-item:not(:first-child):not(:last-child):not(.ge-breadcrumb-item-active) {
    display: none;
  }

  .ge-breadcrumb-item:first-child + .ge-breadcrumb-separator {
    display: inline-flex;
  }

  .ge-breadcrumb-item:first-child + .ge-breadcrumb-separator::before {
    content: '...';
  }
}


/* ==========================================================================
   6. PAGINATION (.ge-pagination)
   ========================================================================== */

/* 6.1 Base Pagination Container
   -------------------------------------------------------------------------- */
.ge-pagination {
  display: flex;
  align-items: center;
  gap: var(--ge-space-1, 0.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--ge-font-mono, 'JetBrains Mono', monospace);
  font-size: var(--ge-pagination-font-size);
}

/* 6.2 Pagination Item (page number)
   -------------------------------------------------------------------------- */
.ge-pagination-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ge-pagination-item-size);
  height: var(--ge-pagination-item-size);
  padding: 0 var(--ge-space-2, 0.5rem);
  font-weight: var(--ge-font-medium, 500);
  color: var(--ge-pagination-item-color);
  background: var(--ge-pagination-item-bg);
  border: 1px solid var(--ge-pagination-item-border);
  border-radius: var(--ge-pagination-item-radius);
  text-decoration: none;
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ge-pagination-item:hover {
  color: var(--ge-pagination-item-hover-color);
  background: var(--ge-pagination-item-hover-bg);
  border-color: rgba(136, 136, 160, 0.25);
}

.ge-pagination-item:active {
  background: rgba(136, 136, 160, 0.15);
}

.ge-pagination-item:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: 2px;
}

/* 6.3 Pagination Active
   -------------------------------------------------------------------------- */
.ge-pagination-item-active,
.ge-pagination-item[aria-current="page"] {
  color: var(--ge-pagination-item-active-color);
  background: var(--ge-pagination-item-active-bg);
  border-color: var(--ge-pagination-item-active-border);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.15);
  cursor: default;
}

.ge-pagination-item-active:hover,
.ge-pagination-item[aria-current="page"]:hover {
  background: var(--ge-pagination-item-active-bg);
  border-color: var(--ge-pagination-item-active-border);
}

/* 6.4 Pagination Disabled
   -------------------------------------------------------------------------- */
.ge-pagination-item-disabled,
.ge-pagination-item[disabled],
.ge-pagination-item[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* 6.5 Pagination Prev / Next
   -------------------------------------------------------------------------- */
.ge-pagination-prev,
.ge-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ge-pagination-item-size);
  height: var(--ge-pagination-item-size);
  padding: 0 var(--ge-space-2, 0.5rem);
  color: var(--ge-pagination-item-color);
  background: var(--ge-pagination-item-bg);
  border: 1px solid var(--ge-pagination-item-border);
  border-radius: var(--ge-pagination-item-radius);
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}

.ge-pagination-prev:hover,
.ge-pagination-next:hover {
  color: var(--ge-pagination-item-hover-color);
  background: var(--ge-pagination-item-hover-bg);
  border-color: rgba(136, 136, 160, 0.25);
}

.ge-pagination-prev:active,
.ge-pagination-next:active {
  background: rgba(136, 136, 160, 0.15);
}

.ge-pagination-prev:focus-visible,
.ge-pagination-next:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: 2px;
}

.ge-pagination-prev[disabled],
.ge-pagination-next[disabled],
.ge-pagination-prev[aria-disabled="true"],
.ge-pagination-next[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.ge-pagination-prev svg,
.ge-pagination-next svg {
  width: 1rem;
  height: 1rem;
}

/* 6.6 Pagination Ellipsis
   -------------------------------------------------------------------------- */
.ge-pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ge-pagination-item-size);
  height: var(--ge-pagination-item-size);
  color: var(--ge-text-muted, #555570);
  font-size: var(--ge-text-sm, 0.75rem);
  letter-spacing: var(--ge-tracking-widest, 0.1em);
  user-select: none;
  cursor: default;
}

/* 6.7 Pagination Sizes
   -------------------------------------------------------------------------- */
.ge-pagination-sm .ge-pagination-item,
.ge-pagination-sm .ge-pagination-prev,
.ge-pagination-sm .ge-pagination-next {
  min-width: var(--ge-pagination-item-size-sm);
  height: var(--ge-pagination-item-size-sm);
  font-size: var(--ge-text-xs, 0.625rem);
  padding: 0 var(--ge-space-1, 0.25rem);
}

.ge-pagination-sm .ge-pagination-ellipsis {
  min-width: var(--ge-pagination-item-size-sm);
  height: var(--ge-pagination-item-size-sm);
  font-size: var(--ge-text-xs, 0.625rem);
}

.ge-pagination-lg .ge-pagination-item,
.ge-pagination-lg .ge-pagination-prev,
.ge-pagination-lg .ge-pagination-next {
  min-width: var(--ge-pagination-item-size-lg);
  height: var(--ge-pagination-item-size-lg);
  font-size: var(--ge-text-base, 0.875rem);
  padding: 0 var(--ge-space-3, 0.75rem);
}

.ge-pagination-lg .ge-pagination-ellipsis {
  min-width: var(--ge-pagination-item-size-lg);
  height: var(--ge-pagination-item-size-lg);
  font-size: var(--ge-text-base, 0.875rem);
}

.ge-pagination-lg .ge-pagination-prev svg,
.ge-pagination-lg .ge-pagination-next svg {
  width: 1.25rem;
  height: 1.25rem;
}


/* ==========================================================================
   7. STEPS / STEPPER (.ge-steps)
   ========================================================================== */

/* 7.1 Steps Container
   -------------------------------------------------------------------------- */
.ge-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
}

/* 7.2 Individual Step
   -------------------------------------------------------------------------- */
.ge-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  text-align: center;
}

/* 7.3 Step Indicator (circle)
   -------------------------------------------------------------------------- */
.ge-step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ge-step-indicator-size);
  height: var(--ge-step-indicator-size);
  border-radius: var(--ge-radius-full, 9999px);
  font-family: var(--ge-font-mono, 'JetBrains Mono', monospace);
  font-size: var(--ge-step-indicator-font-size);
  font-weight: var(--ge-font-semibold, 600);
  background: var(--ge-step-pending-bg);
  border: 2px solid var(--ge-step-pending-border);
  color: var(--ge-step-pending-color);
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
  z-index: 1;
  flex-shrink: 0;
}

.ge-step-indicator svg {
  width: 1rem;
  height: 1rem;
}

/* 7.4 Step Connector (line between steps)
   -------------------------------------------------------------------------- */
.ge-step-connector {
  position: absolute;
  top: calc(var(--ge-step-indicator-size) / 2);
  left: calc(50% + var(--ge-step-indicator-size) / 2 + var(--ge-step-connector-gap));
  right: calc(-50% + var(--ge-step-indicator-size) / 2 + var(--ge-step-connector-gap));
  height: var(--ge-step-connector-width);
  background: var(--ge-step-pending-border);
  transition: background 200ms ease;
}

.ge-step:last-child .ge-step-connector {
  display: none;
}

/* 7.5 Step Title
   -------------------------------------------------------------------------- */
.ge-step-title {
  margin-top: var(--ge-space-2, 0.5rem);
  font-family: var(--ge-font-body, 'Inter', system-ui, sans-serif);
  font-size: var(--ge-text-sm, 0.75rem);
  font-weight: var(--ge-font-medium, 500);
  color: var(--ge-step-title-color);
  transition: color 200ms ease;
}

/* 7.6 Step Description
   -------------------------------------------------------------------------- */
.ge-step-description {
  margin-top: var(--ge-space-1, 0.25rem);
  font-family: var(--ge-font-body, 'Inter', system-ui, sans-serif);
  font-size: var(--ge-text-xs, 0.625rem);
  color: var(--ge-step-description-color);
  max-width: 10rem;
  transition: color 200ms ease;
}

/* 7.7 Step States
   -------------------------------------------------------------------------- */

/* Active */
.ge-step-active .ge-step-indicator {
  background: var(--ge-step-active-bg);
  border-color: var(--ge-step-active-border);
  color: var(--ge-step-active-color);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}

.ge-step-active .ge-step-title {
  color: var(--ge-step-active-color);
}

/* Completed */
.ge-step-completed .ge-step-indicator {
  background: var(--ge-step-completed-bg);
  border-color: var(--ge-step-completed-border);
  color: var(--ge-step-completed-color);
}

.ge-step-completed .ge-step-connector {
  background: var(--ge-step-completed-border);
}

.ge-step-completed .ge-step-title {
  color: var(--ge-step-completed-color);
}

/* Pending (default - explicitly named) */
.ge-step-pending .ge-step-indicator {
  background: var(--ge-step-pending-bg);
  border-color: var(--ge-step-pending-border);
  color: var(--ge-step-pending-color);
}

.ge-step-pending .ge-step-title {
  color: var(--ge-text-muted, #555570);
}

.ge-step-pending .ge-step-description {
  color: var(--ge-text-muted, #555570);
}

/* 7.8 Vertical Steps
   -------------------------------------------------------------------------- */
.ge-steps-vertical {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.ge-steps-vertical .ge-step {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  flex: none;
  width: 100%;
  padding-bottom: var(--ge-space-6, 1.5rem);
}

.ge-steps-vertical .ge-step:last-child {
  padding-bottom: 0;
}

.ge-steps-vertical .ge-step-connector {
  top: calc(var(--ge-step-indicator-size) + var(--ge-step-connector-gap));
  bottom: var(--ge-step-connector-gap);
  left: calc(var(--ge-step-indicator-size) / 2 - var(--ge-step-connector-width) / 2);
  right: auto;
  width: var(--ge-step-connector-width);
  height: auto;
}

.ge-steps-vertical .ge-step-content {
  margin-left: var(--ge-space-3, 0.75rem);
  padding-top: var(--ge-space-1, 0.25rem);
}

.ge-steps-vertical .ge-step-title {
  margin-top: 0;
}


/* ==========================================================================
   8. MODAL / DIALOG (.ge-modal)
   ========================================================================== */

/* 8.1 Modal Overlay (backdrop)
   -------------------------------------------------------------------------- */
.ge-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--ge-modal-z);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ge-modal-overlay-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ge-modal-animation-duration) ease,
              visibility var(--ge-modal-animation-duration) ease;
  padding: var(--ge-space-4, 1rem);
}

/* 8.2 Modal Active (visible)
   -------------------------------------------------------------------------- */
.ge-modal-active .ge-modal-overlay,
.ge-modal-overlay.ge-modal-active {
  opacity: 1;
  visibility: visible;
}

/* 8.3 Modal Content (the dialog box)
   -------------------------------------------------------------------------- */
.ge-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--ge-modal-width-md);
  max-height: calc(100vh - var(--ge-space-8, 2rem));
  background: var(--ge-modal-bg);
  border: 1px solid var(--ge-modal-border);
  border-radius: var(--ge-modal-radius);
  box-shadow: var(--ge-modal-shadow);
  overflow: hidden;
  transform: scale(0.95) translateY(8px);
  opacity: 0;
  transition: transform var(--ge-modal-animation-duration) ease,
              opacity var(--ge-modal-animation-duration) ease;
}

.ge-modal-active .ge-modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Focus trap helper */
.ge-modal-content:focus {
  outline: none;
}

/* 8.4 Modal Sizes
   -------------------------------------------------------------------------- */
.ge-modal-sm .ge-modal-content {
  max-width: var(--ge-modal-width-sm);
}

.ge-modal-lg .ge-modal-content {
  max-width: var(--ge-modal-width-lg);
}

.ge-modal-xl .ge-modal-content {
  max-width: var(--ge-modal-width-xl);
}

.ge-modal-full .ge-modal-content {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  border-radius: 0;
  margin: 0;
}

.ge-modal-full .ge-modal-overlay {
  padding: 0;
}

/* 8.5 Modal Header
   -------------------------------------------------------------------------- */
.ge-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ge-modal-header-gap);
  padding: var(--ge-modal-padding);
  padding-bottom: 0;
  flex-shrink: 0;
}

/* 8.6 Modal Title
   -------------------------------------------------------------------------- */
.ge-modal-title {
  font-family: var(--ge-font-display, 'Syne', system-ui, sans-serif);
  font-size: var(--ge-text-lg, 1.125rem);
  font-weight: var(--ge-font-semibold, 600);
  color: var(--ge-text-primary, #e8e8f0);
  line-height: var(--ge-leading-tight, 1.2);
  margin: 0;
}

/* 8.7 Modal Description
   -------------------------------------------------------------------------- */
.ge-modal-description {
  margin-top: var(--ge-space-2, 0.5rem);
  font-family: var(--ge-font-body, 'Inter', system-ui, sans-serif);
  font-size: var(--ge-text-sm, 0.75rem);
  color: var(--ge-text-secondary, #8888a0);
  line-height: var(--ge-leading-normal, 1.5);
}

/* 8.8 Modal Body
   -------------------------------------------------------------------------- */
.ge-modal-body {
  flex: 1;
  padding: var(--ge-modal-padding);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Modal body scrollbar */
.ge-modal-body::-webkit-scrollbar {
  width: 6px;
}

.ge-modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.ge-modal-body::-webkit-scrollbar-thumb {
  background: rgba(136, 136, 160, 0.25);
  border-radius: var(--ge-radius-full, 9999px);
}

.ge-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(136, 136, 160, 0.4);
}

.ge-modal-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(136, 136, 160, 0.25) transparent;
}

/* 8.9 Modal Footer
   -------------------------------------------------------------------------- */
.ge-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ge-space-3, 0.75rem);
  padding: var(--ge-modal-padding);
  padding-top: 0;
  flex-shrink: 0;
}

/* 8.10 Modal Close Button
   -------------------------------------------------------------------------- */
.ge-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--ge-radius-md, 0.375rem);
  color: var(--ge-text-secondary, #8888a0);
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease;
  flex-shrink: 0;
}

.ge-modal-close:hover {
  color: var(--ge-text-primary, #e8e8f0);
  background: rgba(136, 136, 160, 0.1);
}

.ge-modal-close:active {
  background: rgba(136, 136, 160, 0.2);
}

.ge-modal-close:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: 2px;
}

.ge-modal-close[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.ge-modal-close svg {
  width: 1.125rem;
  height: 1.125rem;
}


/* ==========================================================================
   9. DRAWER / SHEET (.ge-drawer)
   ========================================================================== */

/* 9.1 Drawer Overlay
   -------------------------------------------------------------------------- */
.ge-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--ge-drawer-z);
  background: var(--ge-drawer-overlay-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ge-drawer-animation-duration) ease,
              visibility var(--ge-drawer-animation-duration) ease;
}

.ge-drawer-active .ge-drawer-overlay,
.ge-drawer-overlay.ge-drawer-active {
  opacity: 1;
  visibility: visible;
}

/* 9.2 Drawer Content
   -------------------------------------------------------------------------- */
.ge-drawer-content {
  position: fixed;
  z-index: calc(var(--ge-drawer-z) + 1);
  display: flex;
  flex-direction: column;
  background: var(--ge-drawer-bg);
  border: 1px solid var(--ge-drawer-border);
  box-shadow: var(--ge-drawer-shadow);
  overflow: hidden;
  transition: transform var(--ge-drawer-animation-duration) cubic-bezier(0.32, 0.72, 0, 1);
}

/* 9.3 Drawer Direction: Right (default)
   -------------------------------------------------------------------------- */
.ge-drawer-content,
.ge-drawer-right .ge-drawer-content {
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--ge-drawer-width-md);
  max-width: 100vw;
  border-left: 1px solid var(--ge-drawer-border);
  border-right: none;
  border-radius: var(--ge-drawer-radius) 0 0 var(--ge-drawer-radius);
  transform: translateX(100%);
}

.ge-drawer-active .ge-drawer-content,
.ge-drawer-active.ge-drawer-right .ge-drawer-content,
.ge-drawer-right .ge-drawer-content.ge-drawer-active {
  transform: translateX(0);
}

/* 9.4 Drawer Direction: Left
   -------------------------------------------------------------------------- */
.ge-drawer-left .ge-drawer-content {
  top: 0;
  left: 0;
  bottom: 0;
  right: auto;
  width: var(--ge-drawer-width-md);
  max-width: 100vw;
  border-right: 1px solid var(--ge-drawer-border);
  border-left: none;
  border-radius: 0 var(--ge-drawer-radius) var(--ge-drawer-radius) 0;
  transform: translateX(-100%);
}

.ge-drawer-active.ge-drawer-left .ge-drawer-content,
.ge-drawer-left .ge-drawer-content.ge-drawer-active {
  transform: translateX(0);
}

/* 9.5 Drawer Direction: Top
   -------------------------------------------------------------------------- */
.ge-drawer-top .ge-drawer-content {
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  height: var(--ge-drawer-height-md);
  max-height: 100vh;
  border-bottom: 1px solid var(--ge-drawer-border);
  border-top: none;
  border-radius: 0 0 var(--ge-drawer-radius) var(--ge-drawer-radius);
  transform: translateY(-100%);
}

.ge-drawer-active.ge-drawer-top .ge-drawer-content,
.ge-drawer-top .ge-drawer-content.ge-drawer-active {
  transform: translateY(0);
}

/* 9.6 Drawer Direction: Bottom
   -------------------------------------------------------------------------- */
.ge-drawer-bottom .ge-drawer-content {
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  width: 100%;
  height: var(--ge-drawer-height-md);
  max-height: 100vh;
  border-top: 1px solid var(--ge-drawer-border);
  border-bottom: none;
  border-radius: var(--ge-drawer-radius) var(--ge-drawer-radius) 0 0;
  transform: translateY(100%);
}

.ge-drawer-active.ge-drawer-bottom .ge-drawer-content,
.ge-drawer-bottom .ge-drawer-content.ge-drawer-active {
  transform: translateY(0);
}

/* 9.7 Drawer Sizes -- Left/Right (width)
   -------------------------------------------------------------------------- */
.ge-drawer-sm .ge-drawer-content,
.ge-drawer-sm.ge-drawer-right .ge-drawer-content,
.ge-drawer-sm.ge-drawer-left .ge-drawer-content {
  width: var(--ge-drawer-width-sm);
}

.ge-drawer-lg .ge-drawer-content,
.ge-drawer-lg.ge-drawer-right .ge-drawer-content,
.ge-drawer-lg.ge-drawer-left .ge-drawer-content {
  width: var(--ge-drawer-width-lg);
}

.ge-drawer-full .ge-drawer-content,
.ge-drawer-full.ge-drawer-right .ge-drawer-content,
.ge-drawer-full.ge-drawer-left .ge-drawer-content {
  width: 100%;
  border-radius: 0;
}

/* 9.8 Drawer Sizes -- Top/Bottom (height)
   -------------------------------------------------------------------------- */
.ge-drawer-sm.ge-drawer-top .ge-drawer-content,
.ge-drawer-sm.ge-drawer-bottom .ge-drawer-content {
  height: var(--ge-drawer-height-sm);
}

.ge-drawer-lg.ge-drawer-top .ge-drawer-content,
.ge-drawer-lg.ge-drawer-bottom .ge-drawer-content {
  height: var(--ge-drawer-height-lg);
}

.ge-drawer-full.ge-drawer-top .ge-drawer-content,
.ge-drawer-full.ge-drawer-bottom .ge-drawer-content {
  height: 100%;
  border-radius: 0;
}

/* 9.9 Drawer Header
   -------------------------------------------------------------------------- */
.ge-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ge-space-4, 1rem);
  padding: var(--ge-drawer-padding);
  border-bottom: 1px solid var(--ge-drawer-border);
  flex-shrink: 0;
}

/* 9.10 Drawer Body
   -------------------------------------------------------------------------- */
.ge-drawer-body {
  flex: 1;
  padding: var(--ge-drawer-padding);
  overflow-y: auto;
  overflow-x: hidden;
}

.ge-drawer-body::-webkit-scrollbar {
  width: 6px;
}

.ge-drawer-body::-webkit-scrollbar-track {
  background: transparent;
}

.ge-drawer-body::-webkit-scrollbar-thumb {
  background: rgba(136, 136, 160, 0.25);
  border-radius: var(--ge-radius-full, 9999px);
}

.ge-drawer-body::-webkit-scrollbar-thumb:hover {
  background: rgba(136, 136, 160, 0.4);
}

.ge-drawer-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(136, 136, 160, 0.25) transparent;
}

/* 9.11 Drawer Footer
   -------------------------------------------------------------------------- */
.ge-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ge-space-3, 0.75rem);
  padding: var(--ge-drawer-padding);
  border-top: 1px solid var(--ge-drawer-border);
  flex-shrink: 0;
}

/* 9.12 Drawer Close
   -------------------------------------------------------------------------- */
.ge-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--ge-radius-md, 0.375rem);
  color: var(--ge-text-secondary, #8888a0);
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease;
  flex-shrink: 0;
}

.ge-drawer-close:hover {
  color: var(--ge-text-primary, #e8e8f0);
  background: rgba(136, 136, 160, 0.1);
}

.ge-drawer-close:active {
  background: rgba(136, 136, 160, 0.2);
}

.ge-drawer-close:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: 2px;
}

.ge-drawer-close[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.ge-drawer-close svg {
  width: 1.125rem;
  height: 1.125rem;
}


/* ==========================================================================
   10. DROPDOWN MENU (.ge-dropdown)
   ========================================================================== */

/* 10.1 Dropdown Wrapper
   -------------------------------------------------------------------------- */
.ge-dropdown {
  position: relative;
  display: inline-flex;
}

/* 10.2 Dropdown Trigger
   -------------------------------------------------------------------------- */
.ge-dropdown-trigger {
  cursor: pointer;
}

.ge-dropdown-trigger:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: 2px;
  border-radius: var(--ge-radius-sm, 0.25rem);
}

.ge-dropdown-trigger[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* 10.3 Dropdown Menu
   -------------------------------------------------------------------------- */
.ge-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--ge-dropdown-z);
  display: flex;
  flex-direction: column;
  min-width: var(--ge-dropdown-min-width);
  max-height: var(--ge-dropdown-max-height);
  padding: var(--ge-dropdown-padding);
  background: var(--ge-dropdown-bg);
  border: 1px solid var(--ge-dropdown-border);
  border-radius: var(--ge-dropdown-radius);
  box-shadow: var(--ge-dropdown-shadow);
  overflow-y: auto;
  overflow-x: hidden;
  list-style: none;
  margin: var(--ge-space-1, 0.25rem) 0 0 0;

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95);
  transform-origin: top left;
  transition: opacity var(--ge-dropdown-animation-duration) ease,
              visibility var(--ge-dropdown-animation-duration) ease,
              transform var(--ge-dropdown-animation-duration) ease;
}

/* Scrollbar */
.ge-dropdown-menu::-webkit-scrollbar {
  width: 4px;
}

.ge-dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}

.ge-dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(136, 136, 160, 0.2);
  border-radius: var(--ge-radius-full, 9999px);
}

.ge-dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(136, 136, 160, 0.35);
}

.ge-dropdown-menu {
  scrollbar-width: thin;
  scrollbar-color: rgba(136, 136, 160, 0.2) transparent;
}

/* 10.4 Dropdown Menu Open State
   -------------------------------------------------------------------------- */
.ge-dropdown-menu.ge-dropdown-open,
.ge-dropdown.ge-dropdown-open .ge-dropdown-menu,
.ge-dropdown-menu[aria-expanded="true"] {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/* Right-aligned dropdown */
.ge-dropdown-menu-right {
  left: auto;
  right: 0;
  transform-origin: top right;
}

/* Up-facing dropdown */
.ge-dropdown-menu-up {
  top: auto;
  bottom: 100%;
  margin: 0 0 var(--ge-space-1, 0.25rem) 0;
  transform-origin: bottom left;
}

.ge-dropdown-menu-up.ge-dropdown-menu-right {
  transform-origin: bottom right;
}

/* 10.5 Dropdown Item
   -------------------------------------------------------------------------- */
.ge-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--ge-space-3, 0.75rem);
  width: 100%;
  height: var(--ge-dropdown-item-height);
  padding: 0 var(--ge-dropdown-item-padding-x);
  font-family: var(--ge-font-body, 'Inter', system-ui, sans-serif);
  font-size: var(--ge-text-sm, 0.75rem);
  font-weight: var(--ge-font-normal, 400);
  color: var(--ge-dropdown-item-color);
  background: transparent;
  border: none;
  border-radius: var(--ge-radius-sm, 0.25rem);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: color 200ms ease, background 200ms ease;
  -webkit-tap-highlight-color: transparent;
}

.ge-dropdown-item:hover {
  color: var(--ge-dropdown-item-hover-color);
  background: var(--ge-dropdown-item-hover-bg);
}

.ge-dropdown-item:active {
  background: rgba(136, 136, 160, 0.14);
}

.ge-dropdown-item:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: -2px;
  border-radius: var(--ge-radius-sm, 0.25rem);
}

/* 10.6 Dropdown Item Active
   -------------------------------------------------------------------------- */
.ge-dropdown-item-active,
.ge-dropdown-item[aria-checked="true"],
.ge-dropdown-item[data-active] {
  color: var(--ge-dropdown-item-active-color);
  background: var(--ge-dropdown-item-active-bg);
}

.ge-dropdown-item-active:hover,
.ge-dropdown-item[aria-checked="true"]:hover {
  background: var(--ge-cyan-alpha-15, rgba(0, 240, 255, 0.15));
}

/* 10.7 Dropdown Item Disabled
   -------------------------------------------------------------------------- */
.ge-dropdown-item-disabled,
.ge-dropdown-item[disabled],
.ge-dropdown-item[aria-disabled="true"] {
  color: var(--ge-text-disabled, #44445a);
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* 10.8 Dropdown Item Icon
   -------------------------------------------------------------------------- */
.ge-dropdown-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.7;
}

.ge-dropdown-item-icon svg {
  width: 100%;
  height: 100%;
}

.ge-dropdown-item:hover .ge-dropdown-item-icon {
  opacity: 1;
}

/* 10.9 Dropdown Item Shortcut
   -------------------------------------------------------------------------- */
.ge-dropdown-item-shortcut {
  margin-left: auto;
  padding-left: var(--ge-space-4, 1rem);
  font-family: var(--ge-font-mono, 'JetBrains Mono', monospace);
  font-size: var(--ge-text-xs, 0.625rem);
  color: var(--ge-text-muted, #555570);
  letter-spacing: var(--ge-tracking-wider, 0.05em);
  flex-shrink: 0;
}

/* 10.10 Dropdown Divider
   -------------------------------------------------------------------------- */
.ge-dropdown-divider {
  height: 1px;
  margin: var(--ge-space-1, 0.25rem) var(--ge-dropdown-item-padding-x);
  background: var(--ge-dropdown-divider-color);
  border: none;
}

/* 10.11 Dropdown Group
   -------------------------------------------------------------------------- */
.ge-dropdown-group {
  padding: var(--ge-space-1, 0.25rem) 0;
}

.ge-dropdown-group-label {
  display: block;
  padding: var(--ge-space-2, 0.5rem) var(--ge-dropdown-item-padding-x);
  font-family: var(--ge-font-mono, 'JetBrains Mono', monospace);
  font-size: var(--ge-text-xs, 0.625rem);
  font-weight: var(--ge-font-semibold, 600);
  color: var(--ge-dropdown-group-label-color);
  text-transform: uppercase;
  letter-spacing: var(--ge-tracking-widest, 0.1em);
  user-select: none;
}

/* 10.12 Dropdown Submenu
   -------------------------------------------------------------------------- */
.ge-dropdown-submenu {
  position: relative;
}

.ge-dropdown-submenu-trigger {
  display: flex;
  align-items: center;
  gap: var(--ge-space-3, 0.75rem);
  width: 100%;
  height: var(--ge-dropdown-item-height);
  padding: 0 var(--ge-dropdown-item-padding-x);
  font-family: var(--ge-font-body, 'Inter', system-ui, sans-serif);
  font-size: var(--ge-text-sm, 0.75rem);
  font-weight: var(--ge-font-normal, 400);
  color: var(--ge-dropdown-item-color);
  background: transparent;
  border: none;
  border-radius: var(--ge-radius-sm, 0.25rem);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: color 200ms ease, background 200ms ease;
}

.ge-dropdown-submenu-trigger::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: auto;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  opacity: 0.5;
  transition: opacity 200ms ease;
}

.ge-dropdown-submenu-trigger:hover {
  color: var(--ge-dropdown-item-hover-color);
  background: var(--ge-dropdown-item-hover-bg);
}

.ge-dropdown-submenu-trigger:hover::after {
  opacity: 1;
}

.ge-dropdown-submenu-trigger:active {
  background: rgba(136, 136, 160, 0.14);
}

.ge-dropdown-submenu-trigger:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: -2px;
  border-radius: var(--ge-radius-sm, 0.25rem);
}

.ge-dropdown-submenu-trigger[disabled] {
  color: var(--ge-text-disabled, #44445a);
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Submenu panel positioning */
.ge-dropdown-submenu > .ge-dropdown-menu {
  top: 0;
  left: 100%;
  margin: 0 0 0 var(--ge-space-1, 0.25rem);
  transform-origin: top left;
}

.ge-dropdown-submenu:hover > .ge-dropdown-menu,
.ge-dropdown-submenu:focus-within > .ge-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}


/* ==========================================================================
   11. LIGHT THEME OVERRIDES
   ========================================================================== */

[data-theme="light"] {

  /* -- Navbar (light) ---------------------------------------------------- */
  --ge-navbar-bg: rgba(255, 255, 255, 0.85);
  --ge-navbar-bg-solid: #ffffff;
  --ge-navbar-border: rgba(0, 0, 0, 0.08);
  --ge-navbar-link-color: #555570;
  --ge-navbar-link-hover: #1a1a2e;
  --ge-navbar-link-active: #0077aa;

  /* -- Sidebar (light) -------------------------------------------------- */
  --ge-sidebar-bg: #f5f5f8;
  --ge-sidebar-border: rgba(0, 0, 0, 0.08);
  --ge-sidebar-item-color: #555570;
  --ge-sidebar-item-hover-bg: rgba(0, 0, 0, 0.04);
  --ge-sidebar-item-active-bg: rgba(0, 119, 170, 0.08);
  --ge-sidebar-item-active-color: #0077aa;
  --ge-sidebar-section-label-color: #8888a0;

  /* -- Tab (light) ------------------------------------------------------ */
  --ge-tab-color: #555570;
  --ge-tab-hover-color: #1a1a2e;
  --ge-tab-active-color: #0077aa;
  --ge-tab-border: rgba(0, 0, 0, 0.08);
  --ge-tab-indicator-color: #0077aa;
  --ge-tab-pill-active-bg: rgba(0, 119, 170, 0.1);

  /* -- Breadcrumb (light) ----------------------------------------------- */
  --ge-breadcrumb-color: #555570;
  --ge-breadcrumb-link-color: #555570;
  --ge-breadcrumb-link-hover: #0077aa;
  --ge-breadcrumb-active-color: #1a1a2e;
  --ge-breadcrumb-separator-color: #bbbbcc;

  /* -- Pagination (light) ----------------------------------------------- */
  --ge-pagination-item-border: rgba(0, 0, 0, 0.1);
  --ge-pagination-item-color: #555570;
  --ge-pagination-item-hover-bg: rgba(0, 0, 0, 0.04);
  --ge-pagination-item-hover-color: #1a1a2e;
  --ge-pagination-item-active-bg: rgba(0, 119, 170, 0.1);
  --ge-pagination-item-active-color: #0077aa;
  --ge-pagination-item-active-border: rgba(0, 119, 170, 0.35);

  /* -- Steps (light) ---------------------------------------------------- */
  --ge-step-pending-bg: #eeeef2;
  --ge-step-pending-border: rgba(0, 0, 0, 0.1);
  --ge-step-pending-color: #8888a0;
  --ge-step-active-bg: rgba(0, 119, 170, 0.1);
  --ge-step-active-border: #0077aa;
  --ge-step-active-color: #0077aa;
  --ge-step-completed-bg: rgba(0, 170, 80, 0.1);
  --ge-step-completed-border: #00aa50;
  --ge-step-completed-color: #00aa50;
  --ge-step-title-color: #1a1a2e;
  --ge-step-description-color: #555570;

  /* -- Modal (light) ---------------------------------------------------- */
  --ge-modal-overlay-bg: rgba(0, 0, 0, 0.3);
  --ge-modal-bg: #ffffff;
  --ge-modal-border: rgba(0, 0, 0, 0.08);
  --ge-modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

  /* -- Drawer (light) --------------------------------------------------- */
  --ge-drawer-bg: #ffffff;
  --ge-drawer-border: rgba(0, 0, 0, 0.08);
  --ge-drawer-overlay-bg: rgba(0, 0, 0, 0.25);
  --ge-drawer-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

  /* -- Dropdown (light) ------------------------------------------------- */
  --ge-dropdown-bg: #ffffff;
  --ge-dropdown-border: rgba(0, 0, 0, 0.08);
  --ge-dropdown-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -4px rgba(0, 0, 0, 0.06);
  --ge-dropdown-item-color: #555570;
  --ge-dropdown-item-hover-bg: rgba(0, 0, 0, 0.04);
  --ge-dropdown-item-hover-color: #1a1a2e;
  --ge-dropdown-item-active-bg: rgba(0, 119, 170, 0.08);
  --ge-dropdown-item-active-color: #0077aa;
  --ge-dropdown-divider-color: rgba(0, 0, 0, 0.06);
  --ge-dropdown-group-label-color: #8888a0;
}

/* Light theme element-level overrides that cannot use tokens alone */
[data-theme="light"] .ge-navbar {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .ge-navbar-brand {
  color: #1a1a2e;
}

[data-theme="light"] .ge-navbar-brand:hover {
  color: #0077aa;
}

[data-theme="light"] .ge-navbar-toggle {
  color: #1a1a2e;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ge-navbar-toggle:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 119, 170, 0.3);
  color: #0077aa;
}

[data-theme="light"] .ge-sidebar {
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ge-sidebar-header-text {
  color: #1a1a2e;
}

[data-theme="light"] .ge-sidebar-toggle {
  color: #555570;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ge-sidebar-toggle:hover {
  color: #0077aa;
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 119, 170, 0.3);
}

[data-theme="light"] .ge-sidebar-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .ge-sidebar-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .ge-sidebar-body {
  scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

[data-theme="light"] .ge-tabs-pills .ge-tabs-list {
  background: #eeeef2;
}

[data-theme="light"] .ge-tabs-pills .ge-tab:hover {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .ge-tabs-pills .ge-tab-active,
[data-theme="light"] .ge-tabs-pills .ge-tab[aria-selected="true"] {
  background: rgba(0, 119, 170, 0.12);
  box-shadow: 0 0 8px rgba(0, 119, 170, 0.08);
}

[data-theme="light"] .ge-pagination-item-active,
[data-theme="light"] .ge-pagination-item[aria-current="page"] {
  box-shadow: 0 0 8px rgba(0, 119, 170, 0.1);
}

[data-theme="light"] .ge-step-active .ge-step-indicator {
  box-shadow: 0 0 10px rgba(0, 119, 170, 0.15);
}

[data-theme="light"] .ge-modal-close {
  color: #555570;
}

[data-theme="light"] .ge-modal-close:hover {
  color: #1a1a2e;
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .ge-modal-close:active {
  background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ge-modal-title {
  color: #1a1a2e;
}

[data-theme="light"] .ge-modal-description {
  color: #555570;
}

[data-theme="light"] .ge-modal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .ge-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .ge-modal-body {
  scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

[data-theme="light"] .ge-drawer-close {
  color: #555570;
}

[data-theme="light"] .ge-drawer-close:hover {
  color: #1a1a2e;
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .ge-drawer-close:active {
  background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ge-drawer-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .ge-drawer-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .ge-drawer-body {
  scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

[data-theme="light"] .ge-dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .ge-dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .ge-dropdown-menu {
  scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

[data-theme="light"] .ge-dropdown-item-icon {
  opacity: 0.6;
}

[data-theme="light"] .ge-dropdown-item-shortcut {
  color: #8888a0;
}

[data-theme="light"] .ge-dropdown-submenu-trigger:hover {
  color: #1a1a2e;
  background: rgba(0, 0, 0, 0.04);
}

/* Light-theme focus overrides for all components */
[data-theme="light"] .ge-navbar-link:focus-visible,
[data-theme="light"] .ge-navbar-brand:focus-visible,
[data-theme="light"] .ge-navbar-toggle:focus-visible,
[data-theme="light"] .ge-sidebar-item:focus-visible,
[data-theme="light"] .ge-sidebar-toggle:focus-visible,
[data-theme="light"] .ge-tab:focus-visible,
[data-theme="light"] .ge-breadcrumb-link:focus-visible,
[data-theme="light"] .ge-pagination-item:focus-visible,
[data-theme="light"] .ge-pagination-prev:focus-visible,
[data-theme="light"] .ge-pagination-next:focus-visible,
[data-theme="light"] .ge-modal-close:focus-visible,
[data-theme="light"] .ge-drawer-close:focus-visible,
[data-theme="light"] .ge-dropdown-trigger:focus-visible,
[data-theme="light"] .ge-dropdown-item:focus-visible,
[data-theme="light"] .ge-dropdown-submenu-trigger:focus-visible {
  outline-color: #0077aa;
}

/* Light-theme disabled overrides */
[data-theme="light"] .ge-tab-disabled,
[data-theme="light"] .ge-tab[disabled] {
  color: #bbbbcc;
}

[data-theme="light"] .ge-dropdown-item-disabled,
[data-theme="light"] .ge-dropdown-item[disabled] {
  color: #bbbbcc;
}

[data-theme="light"] .ge-navbar-link[disabled],
[data-theme="light"] .ge-navbar-link.ge-navbar-link-disabled {
  opacity: 0.4;
}

@media (max-width: 768px) {
  [data-theme="light"] .ge-navbar-nav {
    background: #ffffff;
    border-bottom-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  }
}


/* ==========================================================================
   12. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ge-navbar,
  .ge-navbar-link::after,
  .ge-sidebar,
  .ge-sidebar-collapsed .ge-sidebar-item-text,
  .ge-sidebar-collapsed .ge-sidebar-section-label,
  .ge-sidebar-collapsed .ge-sidebar-header-text,
  .ge-sidebar-toggle-icon,
  .ge-sidebar-item,
  .ge-sidebar-toggle,
  .ge-tab,
  .ge-tab::after,
  .ge-breadcrumb-link,
  .ge-pagination-item,
  .ge-pagination-prev,
  .ge-pagination-next,
  .ge-step-indicator,
  .ge-step-connector,
  .ge-step-title,
  .ge-modal-overlay,
  .ge-modal-content,
  .ge-drawer-overlay,
  .ge-drawer-content,
  .ge-drawer-close,
  .ge-modal-close,
  .ge-dropdown-menu,
  .ge-dropdown-item,
  .ge-dropdown-submenu-trigger {
    transition-duration: 0.01ms !important;
  }

  @keyframes ge-tab-panel-in {
    from { opacity: 1; transform: none; }
    to   { opacity: 1; transform: none; }
  }
}
/* ============================================================
   GOD'S EYE DESIGN SYSTEM — Components Part 3 (v2.0)
   Data Display, Feedback & Utility Components
   ============================================================ */

/* ==========================================================================
   1. TABLE (.ge-table)
   ========================================================================== */

:root {
  --ge-table-bg: transparent;
  --ge-table-stripe-bg: rgba(136, 136, 160, 0.04);
  --ge-table-hover-bg: rgba(0, 240, 255, 0.06);
  --ge-table-selected-bg: rgba(0, 240, 255, 0.10);
  --ge-table-border: var(--ge-border-default, rgba(136, 136, 160, 0.15));
  --ge-table-header-bg: rgba(136, 136, 160, 0.06);
  --ge-table-header-color: var(--ge-text-secondary, #8888a0);
  --ge-table-cell-padding-y: 0.75rem;
  --ge-table-cell-padding-x: 1rem;
  --ge-table-compact-padding-y: 0.375rem;
  --ge-table-compact-padding-x: 0.625rem;
  --ge-table-sort-icon-color: var(--ge-text-muted, #555570);
  --ge-table-sort-active-color: var(--ge-cyan, #00f0ff);

  /* Avatar tokens */
  --ge-avatar-xs: 1.5rem;
  --ge-avatar-sm: 2rem;
  --ge-avatar-md: 2.5rem;
  --ge-avatar-lg: 3rem;
  --ge-avatar-xl: 3.5rem;
  --ge-avatar-2xl: 4.5rem;
  --ge-avatar-bg: var(--ge-bg-tertiary, #1a1a2e);
  --ge-avatar-color: var(--ge-text-secondary, #8888a0);
  --ge-avatar-border: var(--ge-border-default, rgba(136, 136, 160, 0.15));
  --ge-avatar-ring-color: var(--ge-cyan, #00f0ff);
  --ge-avatar-ring-width: 2px;
  --ge-avatar-ring-offset: 2px;
  --ge-avatar-status-size: 0.625rem;
  --ge-avatar-status-border: var(--ge-bg-primary, #0a0a0f);
  --ge-avatar-group-overlap: -0.5rem;

  /* Badge tokens */
  --ge-badge-bg: var(--ge-bg-tertiary, #1a1a2e);
  --ge-badge-color: var(--ge-text-secondary, #8888a0);
  --ge-badge-border: var(--ge-border-default, rgba(136, 136, 160, 0.15));
  --ge-badge-font-size: 0.625rem;
  --ge-badge-padding-y: 0.125rem;
  --ge-badge-padding-x: 0.5rem;
  --ge-badge-radius: var(--ge-radius-full, 9999px);
  --ge-badge-dot-size: 0.375rem;
  --ge-badge-sm-font-size: 0.5625rem;
  --ge-badge-sm-padding-y: 0.0625rem;
  --ge-badge-sm-padding-x: 0.375rem;
  --ge-badge-lg-font-size: 0.75rem;
  --ge-badge-lg-padding-y: 0.25rem;
  --ge-badge-lg-padding-x: 0.625rem;

  /* Chip tokens */
  --ge-chip-bg: var(--ge-bg-tertiary, #1a1a2e);
  --ge-chip-color: var(--ge-text-primary, #e8e8f0);
  --ge-chip-border: var(--ge-border-default, rgba(136, 136, 160, 0.15));
  --ge-chip-radius: var(--ge-radius-full, 9999px);
  --ge-chip-padding-y: 0.25rem;
  --ge-chip-padding-x: 0.75rem;
  --ge-chip-font-size: 0.75rem;
  --ge-chip-sm-padding-y: 0.125rem;
  --ge-chip-sm-padding-x: 0.5rem;
  --ge-chip-sm-font-size: 0.625rem;
  --ge-chip-lg-padding-y: 0.375rem;
  --ge-chip-lg-padding-x: 1rem;
  --ge-chip-lg-font-size: 0.875rem;
  --ge-chip-remove-size: 1rem;

  /* Alert tokens */
  --ge-alert-padding-y: 0.75rem;
  --ge-alert-padding-x: 1rem;
  --ge-alert-radius: var(--ge-radius-lg, 0.5rem);
  --ge-alert-border-width: 1px;
  --ge-alert-icon-size: 1.125rem;
  --ge-alert-info-bg: rgba(0, 240, 255, 0.08);
  --ge-alert-info-border: rgba(0, 240, 255, 0.25);
  --ge-alert-info-color: var(--ge-cyan, #00f0ff);
  --ge-alert-success-bg: rgba(0, 230, 118, 0.08);
  --ge-alert-success-border: rgba(0, 230, 118, 0.25);
  --ge-alert-success-color: var(--ge-success, #00e676);
  --ge-alert-warning-bg: rgba(255, 171, 0, 0.08);
  --ge-alert-warning-border: rgba(255, 171, 0, 0.25);
  --ge-alert-warning-color: var(--ge-warning, #ffab00);
  --ge-alert-error-bg: rgba(255, 23, 68, 0.08);
  --ge-alert-error-border: rgba(255, 23, 68, 0.25);
  --ge-alert-error-color: var(--ge-error, #ff1744);

  /* Toast tokens */
  --ge-toast-bg: var(--ge-bg-elevated, #1e1e32);
  --ge-toast-color: var(--ge-text-primary, #e8e8f0);
  --ge-toast-border: var(--ge-border-default, rgba(136, 136, 160, 0.15));
  --ge-toast-radius: var(--ge-radius-lg, 0.5rem);
  --ge-toast-shadow: 0 8px 32px rgba(0, 0, 0, 0.40);
  --ge-toast-padding: 0.75rem 1rem;
  --ge-toast-min-width: 18rem;
  --ge-toast-max-width: 26rem;
  --ge-toast-gap: 0.625rem;
  --ge-toast-z-index: 9999;

  /* Progress tokens */
  --ge-progress-bg: rgba(136, 136, 160, 0.12);
  --ge-progress-bar-bg: var(--ge-cyan, #00f0ff);
  --ge-progress-radius: var(--ge-radius-full, 9999px);
  --ge-progress-height-sm: 0.25rem;
  --ge-progress-height-md: 0.5rem;
  --ge-progress-height-lg: 0.75rem;
  --ge-progress-label-color: var(--ge-text-secondary, #8888a0);

  /* Spinner / Skeleton tokens */
  --ge-spinner-color: var(--ge-cyan, #00f0ff);
  --ge-spinner-track: rgba(136, 136, 160, 0.12);
  --ge-spinner-size-sm: 1rem;
  --ge-spinner-size-md: 1.5rem;
  --ge-spinner-size-lg: 2.5rem;
  --ge-spinner-width: 2px;
  --ge-skeleton-bg: rgba(136, 136, 160, 0.08);
  --ge-skeleton-shine: rgba(136, 136, 160, 0.14);
  --ge-skeleton-radius: var(--ge-radius-md, 0.375rem);

  /* Accordion tokens */
  --ge-accordion-border: var(--ge-border-default, rgba(136, 136, 160, 0.15));
  --ge-accordion-radius: var(--ge-radius-lg, 0.5rem);
  --ge-accordion-header-padding: 0.875rem 1rem;
  --ge-accordion-content-padding: 0 1rem 0.875rem;
  --ge-accordion-header-hover-bg: rgba(136, 136, 160, 0.06);
  --ge-accordion-icon-color: var(--ge-text-muted, #555570);
  --ge-accordion-active-icon-color: var(--ge-cyan, #00f0ff);

  /* Tooltip tokens */
  --ge-tooltip-bg: var(--ge-bg-elevated, #1e1e32);
  --ge-tooltip-color: var(--ge-text-primary, #e8e8f0);
  --ge-tooltip-border: var(--ge-border-default, rgba(136, 136, 160, 0.15));
  --ge-tooltip-radius: var(--ge-radius-md, 0.375rem);
  --ge-tooltip-padding: 0.375rem 0.625rem;
  --ge-tooltip-font-size: 0.6875rem;
  --ge-tooltip-shadow: 0 4px 16px rgba(0, 0, 0, 0.40);
  --ge-tooltip-arrow-size: 5px;
  --ge-tooltip-z-index: 9990;

  /* Popover tokens */
  --ge-popover-bg: var(--ge-bg-elevated, #1e1e32);
  --ge-popover-color: var(--ge-text-primary, #e8e8f0);
  --ge-popover-border: var(--ge-border-default, rgba(136, 136, 160, 0.15));
  --ge-popover-radius: var(--ge-radius-lg, 0.5rem);
  --ge-popover-padding: 0.75rem 1rem;
  --ge-popover-shadow: 0 8px 32px rgba(0, 0, 0, 0.40);
  --ge-popover-arrow-size: 6px;
  --ge-popover-z-index: 9980;
  --ge-popover-min-width: 12rem;
  --ge-popover-max-width: 20rem;

  /* Scrollbar tokens */
  --ge-scrollbar-width: 6px;
  --ge-scrollbar-track: transparent;
  --ge-scrollbar-thumb: rgba(136, 136, 160, 0.20);
  --ge-scrollbar-thumb-hover: rgba(136, 136, 160, 0.35);
  --ge-scrollbar-radius: var(--ge-radius-full, 9999px);
}


/* ==========================================================================
   TABLE — Component Styles
   ========================================================================== */

.ge-table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ge-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background: var(--ge-table-bg);
  font-family: var(--ge-font-body, 'Inter', sans-serif);
  font-size: var(--ge-text-sm, 0.75rem);
  color: var(--ge-text-primary, #e8e8f0);
}

.ge-table thead {
  background: var(--ge-table-header-bg);
}

.ge-table thead th {
  padding: var(--ge-table-cell-padding-y) var(--ge-table-cell-padding-x);
  text-align: left;
  font-weight: var(--ge-font-semibold, 600);
  font-size: var(--ge-text-xs, 0.625rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ge-table-header-color);
  border-bottom: 1px solid var(--ge-table-border);
  white-space: nowrap;
  user-select: none;
}

.ge-table tbody td {
  padding: var(--ge-table-cell-padding-y) var(--ge-table-cell-padding-x);
  border-bottom: 1px solid var(--ge-table-border);
  vertical-align: middle;
  transition: background 200ms ease;
}

.ge-table tbody tr:last-child td {
  border-bottom: none;
}

.ge-table tfoot td {
  padding: var(--ge-table-cell-padding-y) var(--ge-table-cell-padding-x);
  border-top: 2px solid var(--ge-table-border);
  font-weight: var(--ge-font-semibold, 600);
  color: var(--ge-text-secondary, #8888a0);
}

/* Striped */
.ge-table-striped tbody tr:nth-child(even) {
  background: var(--ge-table-stripe-bg);
}

/* Bordered */
.ge-table-bordered {
  border: 1px solid var(--ge-table-border);
}

.ge-table-bordered th,
.ge-table-bordered td {
  border: 1px solid var(--ge-table-border);
}

/* Compact */
.ge-table-compact th,
.ge-table-compact td {
  padding: var(--ge-table-compact-padding-y) var(--ge-table-compact-padding-x);
}

/* Hoverable */
.ge-table-hoverable tbody tr {
  transition: background 200ms ease;
}

.ge-table-hoverable tbody tr:hover {
  background: var(--ge-table-hover-bg);
}

/* Sort indicators */
.ge-table-sort {
  cursor: pointer;
  position: relative;
  padding-right: 1.5em;
}

.ge-table-sort::after {
  content: '\2195';
  position: absolute;
  right: var(--ge-table-cell-padding-x);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ge-table-sort-icon-color);
  font-size: 0.75em;
  opacity: 0.5;
  transition: opacity 200ms ease, color 200ms ease;
}

.ge-table-sort:hover::after {
  opacity: 0.8;
}

.ge-table-sort-asc::after {
  content: '\2191';
  color: var(--ge-table-sort-active-color);
  opacity: 1;
}

.ge-table-sort-desc::after {
  content: '\2193';
  color: var(--ge-table-sort-active-color);
  opacity: 1;
}

/* Row selected */
.ge-table-row-selected {
  background: var(--ge-table-selected-bg) !important;
}

.ge-table-row-selected td {
  border-color: rgba(0, 240, 255, 0.15);
}


/* ==========================================================================
   2. AVATAR (.ge-avatar)
   ========================================================================== */

.ge-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ge-avatar-md);
  height: var(--ge-avatar-md);
  border-radius: var(--ge-radius-full, 9999px);
  background: var(--ge-avatar-bg);
  color: var(--ge-avatar-color);
  font-family: var(--ge-font-body, 'Inter', sans-serif);
  font-size: 0.75rem;
  font-weight: var(--ge-font-semibold, 600);
  overflow: hidden;
  flex-shrink: 0;
  vertical-align: middle;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.ge-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.ge-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Sizes */
.ge-avatar-xs {
  width: var(--ge-avatar-xs);
  height: var(--ge-avatar-xs);
  font-size: 0.5rem;
}

.ge-avatar-sm {
  width: var(--ge-avatar-sm);
  height: var(--ge-avatar-sm);
  font-size: 0.625rem;
}

.ge-avatar-lg {
  width: var(--ge-avatar-lg);
  height: var(--ge-avatar-lg);
  font-size: 0.875rem;
}

.ge-avatar-xl {
  width: var(--ge-avatar-xl);
  height: var(--ge-avatar-xl);
  font-size: 1rem;
}

.ge-avatar-2xl {
  width: var(--ge-avatar-2xl);
  height: var(--ge-avatar-2xl);
  font-size: 1.25rem;
}

/* Status indicators */
.ge-avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: var(--ge-avatar-status-size);
  height: var(--ge-avatar-status-size);
  border-radius: var(--ge-radius-full, 9999px);
  border: 2px solid var(--ge-avatar-status-border);
  background: var(--ge-text-muted, #555570);
  z-index: 1;
}

.ge-avatar-status-online {
  background: var(--ge-success, #00e676);
}

.ge-avatar-status-offline {
  background: var(--ge-text-muted, #555570);
}

.ge-avatar-status-busy {
  background: var(--ge-error, #ff1744);
}

.ge-avatar-status-away {
  background: var(--ge-warning, #ffab00);
}

/* Avatar group */
.ge-avatar-group {
  display: inline-flex;
  flex-direction: row-reverse;
}

.ge-avatar-group .ge-avatar {
  margin-left: var(--ge-avatar-group-overlap);
  border: 2px solid var(--ge-avatar-status-border);
  box-sizing: content-box;
}

.ge-avatar-group .ge-avatar:last-child {
  margin-left: 0;
}

.ge-avatar-group .ge-avatar:hover {
  z-index: 2;
  transform: translateY(-2px);
}

/* Ring */
.ge-avatar-ring {
  box-shadow: 0 0 0 var(--ge-avatar-ring-offset) var(--ge-avatar-status-border),
              0 0 0 calc(var(--ge-avatar-ring-offset) + var(--ge-avatar-ring-width)) var(--ge-avatar-ring-color);
}


/* ==========================================================================
   3. BADGES (.ge-badge)
   ========================================================================== */

.ge-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ge-space-1, 0.25rem);
  padding: var(--ge-badge-padding-y) var(--ge-badge-padding-x);
  font-family: var(--ge-font-mono, 'Space Mono', monospace);
  font-size: var(--ge-badge-font-size);
  font-weight: var(--ge-font-semibold, 600);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ge-badge-color);
  background: var(--ge-badge-bg);
  border: 1px solid var(--ge-badge-border);
  border-radius: var(--ge-badge-radius);
  white-space: nowrap;
  vertical-align: middle;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.ge-badge-secondary {
  background: rgba(136, 136, 160, 0.12);
  color: var(--ge-text-secondary, #8888a0);
  border-color: rgba(136, 136, 160, 0.20);
}

.ge-badge-outline {
  background: transparent;
  color: var(--ge-text-secondary, #8888a0);
  border-color: var(--ge-border-default, rgba(136, 136, 160, 0.15));
}

.ge-badge-destructive {
  background: var(--ge-error-alpha-15, rgba(255, 23, 68, 0.15));
  color: var(--ge-error-bright, #ff4569);
  border-color: var(--ge-border-error, rgba(255, 23, 68, 0.30));
}

.ge-badge-cyan {
  background: var(--ge-cyan-alpha-15, rgba(0, 240, 255, 0.15));
  color: var(--ge-cyan, #00f0ff);
  border-color: rgba(0, 240, 255, 0.30);
}

.ge-badge-magenta {
  background: var(--ge-magenta-alpha-15, rgba(255, 0, 170, 0.15));
  color: var(--ge-magenta-bright, #ff33bb);
  border-color: rgba(255, 0, 170, 0.30);
}

.ge-badge-yellow {
  background: var(--ge-yellow-alpha-15, rgba(255, 230, 0, 0.15));
  color: var(--ge-yellow, #ffe600);
  border-color: rgba(255, 230, 0, 0.30);
}

.ge-badge-success {
  background: var(--ge-success-alpha-15, rgba(0, 230, 118, 0.15));
  color: var(--ge-success, #00e676);
  border-color: var(--ge-border-success, rgba(0, 230, 118, 0.30));
}

/* Badge dot */
.ge-badge-dot::before {
  content: '';
  display: inline-block;
  width: var(--ge-badge-dot-size);
  height: var(--ge-badge-dot-size);
  border-radius: var(--ge-radius-full, 9999px);
  background: currentColor;
  flex-shrink: 0;
}

/* Badge sizes */
.ge-badge-sm {
  font-size: var(--ge-badge-sm-font-size);
  padding: var(--ge-badge-sm-padding-y) var(--ge-badge-sm-padding-x);
}

.ge-badge-lg {
  font-size: var(--ge-badge-lg-font-size);
  padding: var(--ge-badge-lg-padding-y) var(--ge-badge-lg-padding-x);
}


/* ==========================================================================
   4. CHIP / TAG (.ge-chip)
   ========================================================================== */

.ge-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ge-space-1-5, 0.375rem);
  padding: var(--ge-chip-padding-y) var(--ge-chip-padding-x);
  font-family: var(--ge-font-body, 'Inter', sans-serif);
  font-size: var(--ge-chip-font-size);
  font-weight: var(--ge-font-medium, 500);
  line-height: 1.4;
  color: var(--ge-chip-color);
  background: var(--ge-chip-bg);
  border: 1px solid var(--ge-chip-border);
  border-radius: var(--ge-chip-radius);
  white-space: nowrap;
  vertical-align: middle;
  transition: all 200ms ease;
}

.ge-chip-outline {
  background: transparent;
}

.ge-chip-cyan {
  background: var(--ge-cyan-alpha-10, rgba(0, 240, 255, 0.10));
  color: var(--ge-cyan, #00f0ff);
  border-color: rgba(0, 240, 255, 0.25);
}

.ge-chip-magenta {
  background: var(--ge-magenta-alpha-10, rgba(255, 0, 170, 0.10));
  color: var(--ge-magenta-bright, #ff33bb);
  border-color: rgba(255, 0, 170, 0.25);
}

.ge-chip-yellow {
  background: var(--ge-yellow-alpha-10, rgba(255, 230, 0, 0.10));
  color: var(--ge-yellow, #ffe600);
  border-color: rgba(255, 230, 0, 0.25);
}

.ge-chip-success {
  background: var(--ge-success-alpha-10, rgba(0, 230, 118, 0.10));
  color: var(--ge-success, #00e676);
  border-color: rgba(0, 230, 118, 0.25);
}

.ge-chip-error {
  background: var(--ge-error-alpha-10, rgba(255, 23, 68, 0.10));
  color: var(--ge-error-bright, #ff4569);
  border-color: rgba(255, 23, 68, 0.25);
}

/* Removable */
.ge-chip-removable {
  padding-right: var(--ge-space-1, 0.25rem);
}

.ge-chip-removable .ge-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ge-chip-remove-size);
  height: var(--ge-chip-remove-size);
  border-radius: var(--ge-radius-full, 9999px);
  background: rgba(136, 136, 160, 0.15);
  color: inherit;
  font-size: 0.625rem;
  line-height: 1;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background 200ms ease, color 200ms ease;
}

.ge-chip-removable .ge-chip-remove:hover {
  background: rgba(255, 23, 68, 0.30);
  color: var(--ge-error-bright, #ff4569);
}

/* Interactive */
.ge-chip-interactive {
  cursor: pointer;
  user-select: none;
}

.ge-chip-interactive:hover {
  background: rgba(0, 240, 255, 0.10);
  border-color: rgba(0, 240, 255, 0.30);
}

.ge-chip-interactive:active {
  transform: scale(0.97);
}

.ge-chip-interactive:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: 2px;
}

/* Sizes */
.ge-chip-sm {
  font-size: var(--ge-chip-sm-font-size);
  padding: var(--ge-chip-sm-padding-y) var(--ge-chip-sm-padding-x);
}

.ge-chip-lg {
  font-size: var(--ge-chip-lg-font-size);
  padding: var(--ge-chip-lg-padding-y) var(--ge-chip-lg-padding-x);
}


/* ==========================================================================
   5. STAT CARD (.ge-stat)
   ========================================================================== */

.ge-stat {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-1, 0.25rem);
  padding: var(--ge-space-4, 1rem);
}

.ge-stat-label {
  font-family: var(--ge-font-mono, 'Space Mono', monospace);
  font-size: var(--ge-text-xs, 0.625rem);
  font-weight: var(--ge-font-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ge-text-muted, #555570);
}

.ge-stat-value {
  font-family: var(--ge-font-display, 'Syne', sans-serif);
  font-size: 1.75rem;
  font-weight: var(--ge-font-bold, 700);
  color: var(--ge-text-primary, #e8e8f0);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.ge-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--ge-space-1, 0.25rem);
  font-family: var(--ge-font-mono, 'Space Mono', monospace);
  font-size: var(--ge-text-xs, 0.625rem);
  font-weight: var(--ge-font-semibold, 600);
}

.ge-stat-trend-up {
  color: var(--ge-success, #00e676);
}

.ge-stat-trend-up::before {
  content: '\2191';
}

.ge-stat-trend-down {
  color: var(--ge-error, #ff1744);
}

.ge-stat-trend-down::before {
  content: '\2193';
}

.ge-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ge-radius-lg, 0.5rem);
  background: var(--ge-cyan-alpha-10, rgba(0, 240, 255, 0.10));
  color: var(--ge-cyan, #00f0ff);
  font-size: 1.125rem;
  flex-shrink: 0;
  margin-bottom: var(--ge-space-2, 0.5rem);
}

.ge-stat-description {
  font-size: var(--ge-text-xs, 0.625rem);
  color: var(--ge-text-muted, #555570);
  line-height: 1.4;
}


/* ==========================================================================
   6. TIMELINE (.ge-timeline)
   ========================================================================== */

.ge-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--ge-space-2, 0.5rem) 0;
}

.ge-timeline-item {
  position: relative;
  display: flex;
  gap: var(--ge-space-4, 1rem);
  padding-bottom: var(--ge-space-6, 1.5rem);
}

.ge-timeline-item:last-child {
  padding-bottom: 0;
}

.ge-timeline-item:last-child .ge-timeline-connector {
  display: none;
}

.ge-timeline-marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--ge-radius-full, 9999px);
  background: var(--ge-bg-tertiary, #1a1a2e);
  border: 2px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  flex-shrink: 0;
  z-index: 1;
  margin-top: 0.25rem;
  transition: all 200ms ease;
}

.ge-timeline-marker-active {
  background: var(--ge-cyan, #00f0ff);
  border-color: var(--ge-cyan, #00f0ff);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.40);
}

.ge-timeline-connector {
  position: absolute;
  left: calc(0.375rem - 0.5px);
  top: 1.25rem;
  bottom: 0;
  width: 1px;
  background: var(--ge-border-default, rgba(136, 136, 160, 0.15));
}

.ge-timeline-content {
  flex: 1;
  min-width: 0;
  padding-bottom: var(--ge-space-2, 0.5rem);
}

.ge-timeline-date {
  font-family: var(--ge-font-mono, 'Space Mono', monospace);
  font-size: var(--ge-text-xs, 0.625rem);
  color: var(--ge-text-muted, #555570);
  margin-bottom: var(--ge-space-1, 0.25rem);
}

/* Horizontal */
.ge-timeline-horizontal {
  flex-direction: row;
  overflow-x: auto;
  gap: 0;
  padding: 0;
}

.ge-timeline-horizontal .ge-timeline-item {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 0;
  padding-right: var(--ge-space-8, 2rem);
  min-width: 8rem;
}

.ge-timeline-horizontal .ge-timeline-connector {
  left: calc(50% + 0.625rem);
  top: calc(0.375rem - 0.5px);
  bottom: auto;
  width: 100%;
  height: 1px;
}

.ge-timeline-horizontal .ge-timeline-item:last-child {
  padding-right: 0;
}


/* ==========================================================================
   7. LIST GROUP (.ge-list-group)
   ========================================================================== */

.ge-list-group {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  border-radius: var(--ge-radius-lg, 0.5rem);
  overflow: hidden;
  background: var(--ge-bg-secondary, #111119);
}

.ge-list-group-item {
  display: flex;
  align-items: center;
  gap: var(--ge-space-3, 0.75rem);
  padding: var(--ge-space-3, 0.75rem) var(--ge-space-4, 1rem);
  font-family: var(--ge-font-body, 'Inter', sans-serif);
  font-size: var(--ge-text-sm, 0.75rem);
  color: var(--ge-text-primary, #e8e8f0);
  border-bottom: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  transition: background 200ms ease, color 200ms ease;
}

.ge-list-group-item:last-child {
  border-bottom: none;
}

.ge-list-group-item-active {
  background: var(--ge-cyan-alpha-10, rgba(0, 240, 255, 0.10));
  color: var(--ge-cyan, #00f0ff);
  border-left: 2px solid var(--ge-cyan, #00f0ff);
}

.ge-list-group-item-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

.ge-list-group-item-action {
  cursor: pointer;
  user-select: none;
}

.ge-list-group-item-action:hover {
  background: rgba(0, 240, 255, 0.06);
}

.ge-list-group-item-action:active {
  background: rgba(0, 240, 255, 0.12);
}

.ge-list-group-item-action:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: -2px;
  z-index: 1;
}

/* Flush */
.ge-list-group-flush {
  border: none;
  border-radius: 0;
}

.ge-list-group-flush .ge-list-group-item:first-child {
  border-top: none;
}

.ge-list-group-flush .ge-list-group-item:last-child {
  border-bottom: none;
}


/* ==========================================================================
   8. ALERTS (.ge-alert)
   ========================================================================== */

.ge-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ge-space-3, 0.75rem);
  padding: var(--ge-alert-padding-y) var(--ge-alert-padding-x);
  border: var(--ge-alert-border-width) solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  border-radius: var(--ge-alert-radius);
  background: var(--ge-bg-secondary, #111119);
  font-family: var(--ge-font-body, 'Inter', sans-serif);
  font-size: var(--ge-text-sm, 0.75rem);
  color: var(--ge-text-primary, #e8e8f0);
  position: relative;
  transition: all 200ms ease;
}

.ge-alert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ge-alert-icon-size);
  height: var(--ge-alert-icon-size);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.ge-alert-title {
  font-weight: var(--ge-font-semibold, 600);
  margin-bottom: var(--ge-space-1, 0.25rem);
  line-height: 1.4;
}

.ge-alert-description {
  color: var(--ge-text-secondary, #8888a0);
  line-height: 1.5;
}

.ge-alert-close {
  position: absolute;
  top: var(--ge-space-2, 0.5rem);
  right: var(--ge-space-2, 0.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: transparent;
  color: var(--ge-text-muted, #555570);
  cursor: pointer;
  border-radius: var(--ge-radius-sm, 0.25rem);
  padding: 0;
  transition: color 200ms ease, background 200ms ease;
}

.ge-alert-close:hover {
  color: var(--ge-text-primary, #e8e8f0);
  background: rgba(136, 136, 160, 0.10);
}

/* Alert - Info */
.ge-alert-info {
  background: var(--ge-alert-info-bg);
  border-color: var(--ge-alert-info-border);
}

.ge-alert-info .ge-alert-icon {
  color: var(--ge-alert-info-color);
}

.ge-alert-info .ge-alert-title {
  color: var(--ge-alert-info-color);
}

/* Alert - Success */
.ge-alert-success {
  background: var(--ge-alert-success-bg);
  border-color: var(--ge-alert-success-border);
}

.ge-alert-success .ge-alert-icon {
  color: var(--ge-alert-success-color);
}

.ge-alert-success .ge-alert-title {
  color: var(--ge-alert-success-color);
}

/* Alert - Warning */
.ge-alert-warning {
  background: var(--ge-alert-warning-bg);
  border-color: var(--ge-alert-warning-border);
}

.ge-alert-warning .ge-alert-icon {
  color: var(--ge-alert-warning-color);
}

.ge-alert-warning .ge-alert-title {
  color: var(--ge-alert-warning-color);
}

/* Alert - Error */
.ge-alert-error {
  background: var(--ge-alert-error-bg);
  border-color: var(--ge-alert-error-border);
}

.ge-alert-error .ge-alert-icon {
  color: var(--ge-alert-error-color);
}

.ge-alert-error .ge-alert-title {
  color: var(--ge-alert-error-color);
}

/* Filled variants */
.ge-alert-filled.ge-alert-info {
  background: var(--ge-cyan, #00f0ff);
  border-color: var(--ge-cyan, #00f0ff);
  color: var(--ge-text-on-cyan, #0a0a0f);
}

.ge-alert-filled.ge-alert-info .ge-alert-icon,
.ge-alert-filled.ge-alert-info .ge-alert-title,
.ge-alert-filled.ge-alert-info .ge-alert-description,
.ge-alert-filled.ge-alert-info .ge-alert-close {
  color: var(--ge-text-on-cyan, #0a0a0f);
}

.ge-alert-filled.ge-alert-success {
  background: var(--ge-success, #00e676);
  border-color: var(--ge-success, #00e676);
  color: var(--ge-text-inverse, #0a0a0f);
}

.ge-alert-filled.ge-alert-success .ge-alert-icon,
.ge-alert-filled.ge-alert-success .ge-alert-title,
.ge-alert-filled.ge-alert-success .ge-alert-description,
.ge-alert-filled.ge-alert-success .ge-alert-close {
  color: var(--ge-text-inverse, #0a0a0f);
}

.ge-alert-filled.ge-alert-warning {
  background: var(--ge-warning, #ffab00);
  border-color: var(--ge-warning, #ffab00);
  color: var(--ge-text-inverse, #0a0a0f);
}

.ge-alert-filled.ge-alert-warning .ge-alert-icon,
.ge-alert-filled.ge-alert-warning .ge-alert-title,
.ge-alert-filled.ge-alert-warning .ge-alert-description,
.ge-alert-filled.ge-alert-warning .ge-alert-close {
  color: var(--ge-text-inverse, #0a0a0f);
}

.ge-alert-filled.ge-alert-error {
  background: var(--ge-error, #ff1744);
  border-color: var(--ge-error, #ff1744);
  color: #ffffff;
}

.ge-alert-filled.ge-alert-error .ge-alert-icon,
.ge-alert-filled.ge-alert-error .ge-alert-title,
.ge-alert-filled.ge-alert-error .ge-alert-description,
.ge-alert-filled.ge-alert-error .ge-alert-close {
  color: #ffffff;
}


/* ==========================================================================
   9. TOAST (.ge-toast)
   ========================================================================== */

@keyframes ge-toast-slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes ge-toast-slide-in-left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes ge-toast-slide-in-top {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes ge-toast-slide-in-bottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes ge-toast-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

@keyframes ge-toast-progress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

.ge-toast-container {
  position: fixed;
  z-index: var(--ge-toast-z-index);
  display: flex;
  flex-direction: column;
  gap: var(--ge-toast-gap);
  pointer-events: none;
  padding: var(--ge-space-4, 1rem);
}

.ge-toast-container.ge-toast-top-left {
  top: 0;
  left: 0;
  align-items: flex-start;
}

.ge-toast-container.ge-toast-top-center {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

.ge-toast-container.ge-toast-top-right {
  top: 0;
  right: 0;
  align-items: flex-end;
}

.ge-toast-container.ge-toast-bottom-left {
  bottom: 0;
  left: 0;
  align-items: flex-start;
  flex-direction: column-reverse;
}

.ge-toast-container.ge-toast-bottom-center {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  flex-direction: column-reverse;
}

.ge-toast-container.ge-toast-bottom-right {
  bottom: 0;
  right: 0;
  align-items: flex-end;
  flex-direction: column-reverse;
}

.ge-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--ge-space-3, 0.75rem);
  min-width: var(--ge-toast-min-width);
  max-width: var(--ge-toast-max-width);
  padding: var(--ge-toast-padding);
  background: var(--ge-toast-bg);
  border: 1px solid var(--ge-toast-border);
  border-radius: var(--ge-toast-radius);
  box-shadow: var(--ge-toast-shadow);
  color: var(--ge-toast-color);
  font-family: var(--ge-font-body, 'Inter', sans-serif);
  font-size: var(--ge-text-sm, 0.75rem);
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  animation: ge-toast-slide-in-right 300ms ease-out;
}

.ge-toast.ge-toast-exiting {
  animation: ge-toast-fade-out 200ms ease-in forwards;
}

.ge-toast-top-left .ge-toast {
  animation-name: ge-toast-slide-in-left;
}

.ge-toast-top-center .ge-toast {
  animation-name: ge-toast-slide-in-top;
}

.ge-toast-bottom-left .ge-toast {
  animation-name: ge-toast-slide-in-left;
}

.ge-toast-bottom-center .ge-toast {
  animation-name: ge-toast-slide-in-bottom;
}

.ge-toast-bottom-right .ge-toast {
  animation-name: ge-toast-slide-in-bottom;
}

.ge-toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.0625rem;
}

.ge-toast-title {
  font-weight: var(--ge-font-semibold, 600);
  margin-bottom: var(--ge-space-0-5, 0.125rem);
}

.ge-toast-message {
  color: var(--ge-text-secondary, #8888a0);
  line-height: 1.4;
}

.ge-toast-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--ge-text-muted, #555570);
  cursor: pointer;
  border-radius: var(--ge-radius-sm, 0.25rem);
  padding: 0;
  flex-shrink: 0;
  transition: color 200ms ease, background 200ms ease;
}

.ge-toast-close:hover {
  color: var(--ge-text-primary, #e8e8f0);
  background: rgba(136, 136, 160, 0.10);
}

.ge-toast-action {
  display: inline-flex;
  align-items: center;
  padding: var(--ge-space-1, 0.25rem) var(--ge-space-2, 0.5rem);
  font-family: var(--ge-font-mono, 'Space Mono', monospace);
  font-size: var(--ge-text-xs, 0.625rem);
  font-weight: var(--ge-font-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ge-cyan, #00f0ff);
  background: transparent;
  border: 1px solid rgba(0, 240, 255, 0.30);
  border-radius: var(--ge-radius-sm, 0.25rem);
  cursor: pointer;
  transition: all 200ms ease;
  margin-top: var(--ge-space-2, 0.5rem);
}

.ge-toast-action:hover {
  background: rgba(0, 240, 255, 0.10);
  border-color: rgba(0, 240, 255, 0.50);
}

/* Toast progress bar */
.ge-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--ge-cyan, #00f0ff);
  border-radius: 0 0 var(--ge-toast-radius) var(--ge-toast-radius);
  animation: ge-toast-progress 5s linear forwards;
}

/* Toast types */
.ge-toast-info {
  border-left: 3px solid var(--ge-cyan, #00f0ff);
}

.ge-toast-info .ge-toast-icon {
  color: var(--ge-cyan, #00f0ff);
}

.ge-toast-info .ge-toast-progress {
  background: var(--ge-cyan, #00f0ff);
}

.ge-toast-success {
  border-left: 3px solid var(--ge-success, #00e676);
}

.ge-toast-success .ge-toast-icon {
  color: var(--ge-success, #00e676);
}

.ge-toast-success .ge-toast-progress {
  background: var(--ge-success, #00e676);
}

.ge-toast-warning {
  border-left: 3px solid var(--ge-warning, #ffab00);
}

.ge-toast-warning .ge-toast-icon {
  color: var(--ge-warning, #ffab00);
}

.ge-toast-warning .ge-toast-progress {
  background: var(--ge-warning, #ffab00);
}

.ge-toast-error {
  border-left: 3px solid var(--ge-error, #ff1744);
}

.ge-toast-error .ge-toast-icon {
  color: var(--ge-error, #ff1744);
}

.ge-toast-error .ge-toast-progress {
  background: var(--ge-error, #ff1744);
}


/* ==========================================================================
   10. PROGRESS (.ge-progress)
   ========================================================================== */

.ge-progress {
  position: relative;
  width: 100%;
  height: var(--ge-progress-height-md);
  background: var(--ge-progress-bg);
  border-radius: var(--ge-progress-radius);
  overflow: hidden;
}

.ge-progress-bar {
  height: 100%;
  background: var(--ge-progress-bar-bg);
  border-radius: var(--ge-progress-radius);
  transition: width 400ms ease;
  min-width: 0;
}

/* Sizes */
.ge-progress-sm {
  height: var(--ge-progress-height-sm);
}

.ge-progress-lg {
  height: var(--ge-progress-height-lg);
}

/* Variants */
.ge-progress-success .ge-progress-bar {
  background: var(--ge-success, #00e676);
}

.ge-progress-warning .ge-progress-bar {
  background: var(--ge-warning, #ffab00);
}

.ge-progress-error .ge-progress-bar {
  background: var(--ge-error, #ff1744);
}

/* Indeterminate */
@keyframes ge-progress-indeterminate {
  0% {
    left: -35%;
    width: 35%;
  }
  60% {
    left: 100%;
    width: 35%;
  }
  100% {
    left: 100%;
    width: 35%;
  }
}

.ge-progress-indeterminate .ge-progress-bar {
  position: absolute;
  top: 0;
  left: -35%;
  width: 35%;
  animation: ge-progress-indeterminate 2s ease infinite;
}

/* Circular progress */
.ge-progress-circular {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--ge-radius-full, 9999px);
  background: transparent;
  overflow: visible;
}

.ge-progress-circular::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--ge-radius-full, 9999px);
  border: 3px solid var(--ge-progress-bg);
}

.ge-progress-circular::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--ge-radius-full, 9999px);
  border: 3px solid transparent;
  border-top-color: var(--ge-progress-bar-bg);
  border-right-color: var(--ge-progress-bar-bg);
  transform: rotate(-90deg);
  transition: transform 400ms ease;
}

.ge-progress-circular .ge-progress-label {
  position: relative;
  z-index: 1;
}

/* Label */
.ge-progress-label {
  font-family: var(--ge-font-mono, 'Space Mono', monospace);
  font-size: var(--ge-text-xs, 0.625rem);
  font-weight: var(--ge-font-semibold, 600);
  color: var(--ge-progress-label-color);
}


/* ==========================================================================
   11. SPINNER / LOADER (.ge-spinner)
   ========================================================================== */

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

@keyframes ge-bounce-dots {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes ge-loader-bar-indeterminate {
  0% {
    left: -40%;
    width: 40%;
  }
  50% {
    left: 60%;
    width: 40%;
  }
  100% {
    left: 100%;
    width: 0%;
  }
}

@keyframes ge-skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.ge-spinner {
  display: inline-block;
  width: var(--ge-spinner-size-md);
  height: var(--ge-spinner-size-md);
  border: var(--ge-spinner-width) solid var(--ge-spinner-track);
  border-top-color: var(--ge-spinner-color);
  border-radius: var(--ge-radius-full, 9999px);
  animation: ge-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.ge-spinner-sm {
  width: var(--ge-spinner-size-sm);
  height: var(--ge-spinner-size-sm);
}

.ge-spinner-lg {
  width: var(--ge-spinner-size-lg);
  height: var(--ge-spinner-size-lg);
  border-width: 3px;
}

/* Dots loader */
.ge-loader-dots {
  display: inline-flex;
  align-items: center;
  gap: var(--ge-space-1, 0.25rem);
}

.ge-loader-dots::before,
.ge-loader-dots::after,
.ge-loader-dots span {
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--ge-radius-full, 9999px);
  background: var(--ge-spinner-color);
  animation: ge-bounce-dots 1.4s ease-in-out infinite both;
}

.ge-loader-dots span {
  animation-delay: 0.16s;
}

.ge-loader-dots::after {
  animation-delay: 0.32s;
}

/* Bar loader */
.ge-loader-bar {
  position: relative;
  width: 100%;
  height: 2px;
  background: var(--ge-spinner-track);
  overflow: hidden;
  border-radius: var(--ge-radius-full, 9999px);
}

.ge-loader-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  height: 100%;
  width: 40%;
  background: var(--ge-spinner-color);
  border-radius: inherit;
  animation: ge-loader-bar-indeterminate 1.5s ease infinite;
}

/* Skeletons */
.ge-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--ge-skeleton-bg) 25%,
    var(--ge-skeleton-shine) 50%,
    var(--ge-skeleton-bg) 75%
  );
  background-size: 200% 100%;
  animation: ge-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--ge-skeleton-radius);
}

.ge-skeleton-text {
  height: 0.75rem;
  width: 100%;
  border-radius: var(--ge-radius-sm, 0.25rem);
  margin-bottom: var(--ge-space-2, 0.5rem);
}

.ge-skeleton-text:last-child {
  width: 60%;
}

.ge-skeleton-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ge-radius-full, 9999px);
}

.ge-skeleton-card {
  width: 100%;
  height: 8rem;
  border-radius: var(--ge-radius-lg, 0.5rem);
}

.ge-skeleton-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ge-radius-full, 9999px);
}


/* ==========================================================================
   12. ACCORDION (.ge-accordion)
   ========================================================================== */

.ge-accordion {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ge-accordion-border);
  border-radius: var(--ge-accordion-radius);
  overflow: hidden;
}

.ge-accordion-item {
  border-bottom: 1px solid var(--ge-accordion-border);
}

.ge-accordion-item:last-child {
  border-bottom: none;
}

.ge-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--ge-accordion-header-padding);
  background: transparent;
  border: none;
  color: var(--ge-text-primary, #e8e8f0);
  font-family: var(--ge-font-body, 'Inter', sans-serif);
  font-size: var(--ge-text-sm, 0.75rem);
  font-weight: var(--ge-font-semibold, 600);
  text-align: left;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
  user-select: none;
}

.ge-accordion-header:hover {
  background: var(--ge-accordion-header-hover-bg);
}

.ge-accordion-header:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: -2px;
  z-index: 1;
}

.ge-accordion-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: var(--ge-accordion-icon-color);
  transition: transform 200ms ease, color 200ms ease;
  flex-shrink: 0;
}

/* Chevron pseudo-element */
.ge-accordion-icon::after {
  content: '';
  display: block;
  width: 0.375rem;
  height: 0.375rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -0.125rem;
  transition: transform 200ms ease;
}

.ge-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease, padding 300ms ease;
  padding: 0 1rem;
  font-family: var(--ge-font-body, 'Inter', sans-serif);
  font-size: var(--ge-text-sm, 0.75rem);
  color: var(--ge-text-secondary, #8888a0);
  line-height: 1.6;
}

/* Active / open state */
.ge-accordion-item-active .ge-accordion-icon {
  color: var(--ge-accordion-active-icon-color);
}

.ge-accordion-item-active .ge-accordion-icon::after {
  transform: rotate(-135deg);
  margin-top: 0.125rem;
}

.ge-accordion-item-active .ge-accordion-content {
  max-height: 40rem;
  padding: var(--ge-accordion-content-padding);
}

/* Flush */
.ge-accordion-flush {
  border: none;
  border-radius: 0;
}

.ge-accordion-flush .ge-accordion-item {
  border-left: none;
  border-right: none;
}

.ge-accordion-flush .ge-accordion-item:first-child {
  border-top: none;
}


/* ==========================================================================
   13. EMPTY STATE (.ge-empty-state)
   ========================================================================== */

.ge-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--ge-space-12, 3rem) var(--ge-space-6, 1.5rem);
  gap: var(--ge-space-3, 0.75rem);
}

.ge-empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--ge-radius-full, 9999px);
  background: rgba(136, 136, 160, 0.08);
  color: var(--ge-text-muted, #555570);
  font-size: 1.5rem;
  margin-bottom: var(--ge-space-2, 0.5rem);
}

.ge-empty-state-title {
  font-family: var(--ge-font-body, 'Inter', sans-serif);
  font-size: 1rem;
  font-weight: var(--ge-font-semibold, 600);
  color: var(--ge-text-primary, #e8e8f0);
  line-height: 1.3;
}

.ge-empty-state-description {
  font-family: var(--ge-font-body, 'Inter', sans-serif);
  font-size: var(--ge-text-sm, 0.75rem);
  color: var(--ge-text-muted, #555570);
  line-height: 1.5;
  max-width: 20rem;
}

.ge-empty-state-action {
  display: flex;
  align-items: center;
  gap: var(--ge-space-2, 0.5rem);
  margin-top: var(--ge-space-2, 0.5rem);
}


/* ==========================================================================
   14. CODE BLOCK (.ge-code-block)
   ========================================================================== */

.ge-code-block {
  position: relative;
  background: var(--ge-bg-primary, #0a0a0f);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  border-radius: var(--ge-radius-lg, 0.5rem);
  overflow: hidden;
  font-family: var(--ge-font-mono, 'Space Mono', monospace);
  font-size: var(--ge-text-sm, 0.75rem);
}

.ge-code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ge-space-2, 0.5rem) var(--ge-space-4, 1rem);
  background: rgba(136, 136, 160, 0.04);
  border-bottom: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  font-size: var(--ge-text-xs, 0.625rem);
  color: var(--ge-text-muted, #555570);
}

.ge-code-block-header span {
  letter-spacing: 0.04em;
}

.ge-code-block-header button {
  display: inline-flex;
  align-items: center;
  gap: var(--ge-space-1, 0.25rem);
  padding: var(--ge-space-1, 0.25rem) var(--ge-space-2, 0.5rem);
  background: transparent;
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  border-radius: var(--ge-radius-sm, 0.25rem);
  color: var(--ge-text-muted, #555570);
  font-family: inherit;
  font-size: var(--ge-text-xs, 0.625rem);
  cursor: pointer;
  transition: all 200ms ease;
}

.ge-code-block-header button:hover {
  background: rgba(0, 240, 255, 0.08);
  color: var(--ge-cyan, #00f0ff);
  border-color: rgba(0, 240, 255, 0.30);
}

.ge-code-block-body {
  overflow-x: auto;
  padding: var(--ge-space-4, 1rem);
  line-height: 1.65;
  color: var(--ge-text-primary, #e8e8f0);
  tab-size: 2;
  -moz-tab-size: 2;
}

.ge-code-block-body code {
  font-family: inherit;
}

/* Line numbers */
.ge-code-block-lines {
  display: flex;
}

.ge-code-block-lines .ge-code-line-numbers {
  display: flex;
  flex-direction: column;
  padding: var(--ge-space-4, 1rem) var(--ge-space-3, 0.75rem);
  text-align: right;
  color: var(--ge-text-muted, #555570);
  border-right: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  user-select: none;
  flex-shrink: 0;
  line-height: 1.65;
  font-size: var(--ge-text-xs, 0.625rem);
}

.ge-code-block-lines .ge-code-block-body {
  flex: 1;
  min-width: 0;
}

/* Inline code */
.ge-code-inline {
  display: inline;
  padding: 0.125rem 0.375rem;
  font-family: var(--ge-font-mono, 'Space Mono', monospace);
  font-size: 0.85em;
  color: var(--ge-cyan, #00f0ff);
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: var(--ge-radius-sm, 0.25rem);
}

/* Syntax highlighting classes */
.ge-code-keyword {
  color: var(--ge-magenta-bright, #ff33bb);
}

.ge-code-string {
  color: var(--ge-success, #00e676);
}

.ge-code-comment {
  color: var(--ge-text-muted, #555570);
  font-style: italic;
}

.ge-code-number {
  color: var(--ge-yellow, #ffe600);
}

.ge-code-function {
  color: var(--ge-cyan-bright, #33f5ff);
}


/* ==========================================================================
   15. COMMAND PALETTE (.ge-command-palette)
   ========================================================================== */

.ge-command-palette-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.60);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9995;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  animation: ge-fade-in 150ms ease;
}

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

@keyframes ge-scale-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.ge-command-palette-dialog {
  width: 100%;
  max-width: 32rem;
  max-height: 24rem;
  background: var(--ge-bg-elevated, #1e1e32);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  border-radius: var(--ge-radius-xl, 0.75rem);
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.60);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ge-scale-in 200ms ease;
}

.ge-command-palette-input {
  width: 100%;
  padding: var(--ge-space-3, 0.75rem) var(--ge-space-4, 1rem);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  color: var(--ge-text-primary, #e8e8f0);
  font-family: var(--ge-font-body, 'Inter', sans-serif);
  font-size: 0.875rem;
  outline: none;
}

.ge-command-palette-input::placeholder {
  color: var(--ge-text-muted, #555570);
}

.ge-command-palette-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--ge-space-2, 0.5rem);
}

.ge-command-palette-group {
  margin-bottom: var(--ge-space-1, 0.25rem);
}

.ge-command-palette-group-label {
  display: block;
  padding: var(--ge-space-2, 0.5rem) var(--ge-space-3, 0.75rem) var(--ge-space-1, 0.25rem);
  font-family: var(--ge-font-mono, 'Space Mono', monospace);
  font-size: var(--ge-text-xs, 0.625rem);
  font-weight: var(--ge-font-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ge-text-muted, #555570);
}

.ge-command-palette-item {
  display: flex;
  align-items: center;
  gap: var(--ge-space-3, 0.75rem);
  padding: var(--ge-space-2, 0.5rem) var(--ge-space-3, 0.75rem);
  border-radius: var(--ge-radius-md, 0.375rem);
  font-family: var(--ge-font-body, 'Inter', sans-serif);
  font-size: var(--ge-text-sm, 0.75rem);
  color: var(--ge-text-primary, #e8e8f0);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.ge-command-palette-item:hover {
  background: rgba(136, 136, 160, 0.08);
}

.ge-command-palette-item-active {
  background: var(--ge-cyan-alpha-10, rgba(0, 240, 255, 0.10));
  color: var(--ge-cyan, #00f0ff);
}

.ge-command-palette-item-active:hover {
  background: var(--ge-cyan-alpha-15, rgba(0, 240, 255, 0.15));
}

.ge-command-palette-shortcut {
  display: inline-flex;
  align-items: center;
  gap: var(--ge-space-1, 0.25rem);
  margin-left: auto;
}

.ge-command-palette-shortcut kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--ge-space-1, 0.25rem);
  font-family: var(--ge-font-mono, 'Space Mono', monospace);
  font-size: 0.5625rem;
  color: var(--ge-text-muted, #555570);
  background: rgba(136, 136, 160, 0.08);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  border-radius: var(--ge-radius-sm, 0.25rem);
}

.ge-command-palette-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ge-space-8, 2rem);
  color: var(--ge-text-muted, #555570);
  font-size: var(--ge-text-sm, 0.75rem);
}


/* ==========================================================================
   16. SEPARATOR / DIVIDER (.ge-separator)
   ========================================================================== */

.ge-separator {
  display: flex;
  align-items: center;
  width: 100%;
  height: 1px;
  background: var(--ge-border-default, rgba(136, 136, 160, 0.15));
  border: none;
  margin: var(--ge-space-4, 1rem) 0;
}

.ge-separator-vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
  margin: 0 var(--ge-space-4, 1rem);
}

.ge-separator-label {
  display: flex;
  align-items: center;
  gap: var(--ge-space-3, 0.75rem);
  width: 100%;
  height: auto;
  background: transparent;
  font-family: var(--ge-font-mono, 'Space Mono', monospace);
  font-size: var(--ge-text-xs, 0.625rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ge-text-muted, #555570);
  white-space: nowrap;
}

.ge-separator-label::before,
.ge-separator-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ge-border-default, rgba(136, 136, 160, 0.15));
}

.ge-separator-accent {
  background: rgba(0, 240, 255, 0.30);
}

.ge-separator-accent.ge-separator-label::before,
.ge-separator-accent.ge-separator-label::after {
  background: rgba(0, 240, 255, 0.30);
}

.ge-separator-accent.ge-separator-label {
  color: var(--ge-cyan, #00f0ff);
}


/* ==========================================================================
   17. TOOLTIP (.ge-tooltip)
   ========================================================================== */

.ge-tooltip {
  position: relative;
  display: inline-flex;
}

.ge-tooltip-content {
  position: absolute;
  z-index: var(--ge-tooltip-z-index);
  padding: var(--ge-tooltip-padding);
  background: var(--ge-tooltip-bg);
  color: var(--ge-tooltip-color);
  border: 1px solid var(--ge-tooltip-border);
  border-radius: var(--ge-tooltip-radius);
  box-shadow: var(--ge-tooltip-shadow);
  font-family: var(--ge-font-body, 'Inter', sans-serif);
  font-size: var(--ge-tooltip-font-size);
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease;
}

.ge-tooltip:hover .ge-tooltip-content,
.ge-tooltip:focus-within .ge-tooltip-content {
  opacity: 1;
}

/* Arrow */
.ge-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
}

/* Top position */
.ge-tooltip-top .ge-tooltip-content {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}

.ge-tooltip-top:hover .ge-tooltip-content,
.ge-tooltip-top:focus-within .ge-tooltip-content {
  transform: translateX(-50%) translateY(0);
}

.ge-tooltip-top .ge-tooltip-arrow {
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border-left: var(--ge-tooltip-arrow-size) solid transparent;
  border-right: var(--ge-tooltip-arrow-size) solid transparent;
  border-top: var(--ge-tooltip-arrow-size) solid var(--ge-tooltip-bg);
}

/* Bottom position */
.ge-tooltip-bottom .ge-tooltip-content {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
}

.ge-tooltip-bottom:hover .ge-tooltip-content,
.ge-tooltip-bottom:focus-within .ge-tooltip-content {
  transform: translateX(-50%) translateY(0);
}

.ge-tooltip-bottom .ge-tooltip-arrow {
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border-left: var(--ge-tooltip-arrow-size) solid transparent;
  border-right: var(--ge-tooltip-arrow-size) solid transparent;
  border-bottom: var(--ge-tooltip-arrow-size) solid var(--ge-tooltip-bg);
}

/* Left position */
.ge-tooltip-left .ge-tooltip-content {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
}

.ge-tooltip-left:hover .ge-tooltip-content,
.ge-tooltip-left:focus-within .ge-tooltip-content {
  transform: translateY(-50%) translateX(0);
}

.ge-tooltip-left .ge-tooltip-arrow {
  right: calc(100% + 3px);
  top: 50%;
  transform: translateY(-50%);
  border-top: var(--ge-tooltip-arrow-size) solid transparent;
  border-bottom: var(--ge-tooltip-arrow-size) solid transparent;
  border-left: var(--ge-tooltip-arrow-size) solid var(--ge-tooltip-bg);
}

/* Right position */
.ge-tooltip-right .ge-tooltip-content {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
}

.ge-tooltip-right:hover .ge-tooltip-content,
.ge-tooltip-right:focus-within .ge-tooltip-content {
  transform: translateY(-50%) translateX(0);
}

.ge-tooltip-right .ge-tooltip-arrow {
  left: calc(100% + 3px);
  top: 50%;
  transform: translateY(-50%);
  border-top: var(--ge-tooltip-arrow-size) solid transparent;
  border-bottom: var(--ge-tooltip-arrow-size) solid transparent;
  border-right: var(--ge-tooltip-arrow-size) solid var(--ge-tooltip-bg);
}


/* ==========================================================================
   18. POPOVER (.ge-popover)
   ========================================================================== */

.ge-popover {
  position: relative;
  display: inline-flex;
}

.ge-popover-trigger {
  cursor: pointer;
}

.ge-popover-content {
  position: absolute;
  z-index: var(--ge-popover-z-index);
  min-width: var(--ge-popover-min-width);
  max-width: var(--ge-popover-max-width);
  padding: var(--ge-popover-padding);
  background: var(--ge-popover-bg);
  color: var(--ge-popover-color);
  border: 1px solid var(--ge-popover-border);
  border-radius: var(--ge-popover-radius);
  box-shadow: var(--ge-popover-shadow);
  font-family: var(--ge-font-body, 'Inter', sans-serif);
  font-size: var(--ge-text-sm, 0.75rem);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
  pointer-events: none;
}

.ge-popover-active .ge-popover-content {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
}

.ge-popover-arrow {
  position: absolute;
  width: 0;
  height: 0;
}

/* Top */
.ge-popover-top .ge-popover-content {
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) scale(0.96);
}

.ge-popover-top.ge-popover-active .ge-popover-content {
  transform: translateX(-50%) scale(1);
}

.ge-popover-top .ge-popover-arrow {
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border-left: var(--ge-popover-arrow-size) solid transparent;
  border-right: var(--ge-popover-arrow-size) solid transparent;
  border-top: var(--ge-popover-arrow-size) solid var(--ge-popover-bg);
}

/* Bottom */
.ge-popover-bottom .ge-popover-content {
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) scale(0.96);
}

.ge-popover-bottom.ge-popover-active .ge-popover-content {
  transform: translateX(-50%) scale(1);
}

.ge-popover-bottom .ge-popover-arrow {
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border-left: var(--ge-popover-arrow-size) solid transparent;
  border-right: var(--ge-popover-arrow-size) solid transparent;
  border-bottom: var(--ge-popover-arrow-size) solid var(--ge-popover-bg);
}

/* Left */
.ge-popover-left .ge-popover-content {
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) scale(0.96);
}

.ge-popover-left.ge-popover-active .ge-popover-content {
  transform: translateY(-50%) scale(1);
}

.ge-popover-left .ge-popover-arrow {
  right: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  border-top: var(--ge-popover-arrow-size) solid transparent;
  border-bottom: var(--ge-popover-arrow-size) solid transparent;
  border-left: var(--ge-popover-arrow-size) solid var(--ge-popover-bg);
}

/* Right */
.ge-popover-right .ge-popover-content {
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) scale(0.96);
}

.ge-popover-right.ge-popover-active .ge-popover-content {
  transform: translateY(-50%) scale(1);
}

.ge-popover-right .ge-popover-arrow {
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  border-top: var(--ge-popover-arrow-size) solid transparent;
  border-bottom: var(--ge-popover-arrow-size) solid transparent;
  border-right: var(--ge-popover-arrow-size) solid var(--ge-popover-bg);
}


/* ==========================================================================
   19. CONTEXT MENU (.ge-context-menu)
   ========================================================================== */

.ge-context-menu {
  position: fixed;
  z-index: 9998;
  min-width: 10rem;
  padding: var(--ge-space-1, 0.25rem);
  background: var(--ge-bg-elevated, #1e1e32);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  border-radius: var(--ge-radius-lg, 0.5rem);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.50);
  font-family: var(--ge-font-body, 'Inter', sans-serif);
  font-size: var(--ge-text-sm, 0.75rem);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
}

.ge-context-menu.ge-context-menu-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.ge-context-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ge-space-3, 0.75rem);
  padding: var(--ge-space-1-5, 0.375rem) var(--ge-space-3, 0.75rem);
  border-radius: var(--ge-radius-sm, 0.25rem);
  color: var(--ge-text-primary, #e8e8f0);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
  user-select: none;
}

.ge-context-menu-item:hover {
  background: var(--ge-cyan-alpha-10, rgba(0, 240, 255, 0.10));
  color: var(--ge-cyan, #00f0ff);
}

.ge-context-menu-item:active {
  background: var(--ge-cyan-alpha-15, rgba(0, 240, 255, 0.15));
}

.ge-context-menu-item[disabled],
.ge-context-menu-item.ge-context-menu-item-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

.ge-context-menu-divider {
  height: 1px;
  margin: var(--ge-space-1, 0.25rem) var(--ge-space-2, 0.5rem);
  background: var(--ge-border-default, rgba(136, 136, 160, 0.15));
}

.ge-context-menu-shortcut {
  font-family: var(--ge-font-mono, 'Space Mono', monospace);
  font-size: var(--ge-text-xs, 0.625rem);
  color: var(--ge-text-muted, #555570);
  margin-left: auto;
}


/* ==========================================================================
   20. NOTIFICATION INDICATOR (.ge-notification)
   ========================================================================== */

@keyframes ge-notification-ping {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  75%, 100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.ge-notification-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--ge-radius-full, 9999px);
  background: var(--ge-error, #ff1744);
  border: 2px solid var(--ge-bg-primary, #0a0a0f);
  z-index: 2;
}

.ge-notification-count {
  position: absolute;
  top: -4px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  font-family: var(--ge-font-mono, 'Space Mono', monospace);
  font-size: 0.5625rem;
  font-weight: var(--ge-font-bold, 700);
  color: #ffffff;
  background: var(--ge-error, #ff1744);
  border: 2px solid var(--ge-bg-primary, #0a0a0f);
  border-radius: var(--ge-radius-full, 9999px);
  z-index: 2;
  line-height: 1;
}

.ge-notification-ping {
  position: relative;
}

.ge-notification-ping::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--ge-radius-full, 9999px);
  background: var(--ge-error, #ff1744);
  animation: ge-notification-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
  z-index: 1;
}


/* ==========================================================================
   21. SCROLL AREA (.ge-scroll-area)
   ========================================================================== */

.ge-scroll-area {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ge-scrollbar-thumb) var(--ge-scrollbar-track);
}

.ge-scroll-area::-webkit-scrollbar {
  width: var(--ge-scrollbar-width);
  height: var(--ge-scrollbar-width);
}

.ge-scroll-area::-webkit-scrollbar-track {
  background: var(--ge-scrollbar-track);
  border-radius: var(--ge-scrollbar-radius);
}

.ge-scroll-area::-webkit-scrollbar-thumb {
  background: var(--ge-scrollbar-thumb);
  border-radius: var(--ge-scrollbar-radius);
  transition: background 200ms ease;
}

.ge-scroll-area::-webkit-scrollbar-thumb:hover {
  background: var(--ge-scrollbar-thumb-hover);
}

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


/* ==========================================================================
   22. LIGHT MODE — [data-theme="light"]
   ========================================================================== */

[data-theme="light"] {
  /* Table */
  --ge-table-bg: #ffffff;
  --ge-table-stripe-bg: rgba(0, 0, 0, 0.025);
  --ge-table-hover-bg: rgba(0, 140, 150, 0.06);
  --ge-table-selected-bg: rgba(0, 140, 150, 0.10);
  --ge-table-border: rgba(0, 0, 0, 0.10);
  --ge-table-header-bg: rgba(0, 0, 0, 0.03);
  --ge-table-header-color: #5a5a72;
  --ge-table-sort-icon-color: #9999aa;
  --ge-table-sort-active-color: #008c96;

  /* Avatar */
  --ge-avatar-bg: #e8e8f0;
  --ge-avatar-color: #5a5a72;
  --ge-avatar-border: rgba(0, 0, 0, 0.10);
  --ge-avatar-ring-color: #008c96;
  --ge-avatar-status-border: #ffffff;

  /* Badge */
  --ge-badge-bg: #f0f0f5;
  --ge-badge-color: #5a5a72;
  --ge-badge-border: rgba(0, 0, 0, 0.10);

  /* Chip */
  --ge-chip-bg: #f0f0f5;
  --ge-chip-color: #2a2a3e;
  --ge-chip-border: rgba(0, 0, 0, 0.10);

  /* Alert */
  --ge-alert-info-bg: rgba(0, 140, 150, 0.06);
  --ge-alert-info-border: rgba(0, 140, 150, 0.20);
  --ge-alert-info-color: #006e75;
  --ge-alert-success-bg: rgba(0, 160, 80, 0.06);
  --ge-alert-success-border: rgba(0, 160, 80, 0.20);
  --ge-alert-success-color: #00773d;
  --ge-alert-warning-bg: rgba(200, 130, 0, 0.06);
  --ge-alert-warning-border: rgba(200, 130, 0, 0.20);
  --ge-alert-warning-color: #805600;
  --ge-alert-error-bg: rgba(200, 20, 50, 0.06);
  --ge-alert-error-border: rgba(200, 20, 50, 0.20);
  --ge-alert-error-color: #b31030;

  /* Toast */
  --ge-toast-bg: #ffffff;
  --ge-toast-color: #2a2a3e;
  --ge-toast-border: rgba(0, 0, 0, 0.10);
  --ge-toast-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* Progress */
  --ge-progress-bg: rgba(0, 0, 0, 0.08);
  --ge-progress-bar-bg: #008c96;
  --ge-progress-label-color: #5a5a72;

  /* Spinner / Skeleton */
  --ge-spinner-color: #008c96;
  --ge-spinner-track: rgba(0, 0, 0, 0.08);
  --ge-skeleton-bg: rgba(0, 0, 0, 0.05);
  --ge-skeleton-shine: rgba(0, 0, 0, 0.10);

  /* Accordion */
  --ge-accordion-border: rgba(0, 0, 0, 0.10);
  --ge-accordion-header-hover-bg: rgba(0, 0, 0, 0.03);
  --ge-accordion-icon-color: #9999aa;
  --ge-accordion-active-icon-color: #008c96;

  /* Tooltip */
  --ge-tooltip-bg: #2a2a3e;
  --ge-tooltip-color: #e8e8f0;
  --ge-tooltip-border: rgba(0, 0, 0, 0.20);
  --ge-tooltip-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);

  /* Popover */
  --ge-popover-bg: #ffffff;
  --ge-popover-color: #2a2a3e;
  --ge-popover-border: rgba(0, 0, 0, 0.10);
  --ge-popover-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* Scrollbar */
  --ge-scrollbar-thumb: rgba(0, 0, 0, 0.15);
  --ge-scrollbar-thumb-hover: rgba(0, 0, 0, 0.28);
}

/* Light mode overrides for components that use hardcoded colors */

[data-theme="light"] .ge-badge-cyan {
  background: rgba(0, 140, 150, 0.10);
  color: #006e75;
  border-color: rgba(0, 140, 150, 0.25);
}

[data-theme="light"] .ge-badge-magenta {
  background: rgba(200, 0, 130, 0.10);
  color: #800055;
  border-color: rgba(200, 0, 130, 0.25);
}

[data-theme="light"] .ge-badge-yellow {
  background: rgba(180, 160, 0, 0.10);
  color: #806f00;
  border-color: rgba(180, 160, 0, 0.25);
}

[data-theme="light"] .ge-badge-success {
  background: rgba(0, 160, 80, 0.10);
  color: #00773d;
  border-color: rgba(0, 160, 80, 0.25);
}

[data-theme="light"] .ge-badge-destructive {
  background: rgba(200, 20, 50, 0.10);
  color: #b31030;
  border-color: rgba(200, 20, 50, 0.25);
}

[data-theme="light"] .ge-chip-cyan {
  background: rgba(0, 140, 150, 0.08);
  color: #006e75;
  border-color: rgba(0, 140, 150, 0.20);
}

[data-theme="light"] .ge-chip-magenta {
  background: rgba(200, 0, 130, 0.08);
  color: #800055;
  border-color: rgba(200, 0, 130, 0.20);
}

[data-theme="light"] .ge-chip-yellow {
  background: rgba(180, 160, 0, 0.08);
  color: #806f00;
  border-color: rgba(180, 160, 0, 0.20);
}

[data-theme="light"] .ge-chip-success {
  background: rgba(0, 160, 80, 0.08);
  color: #00773d;
  border-color: rgba(0, 160, 80, 0.20);
}

[data-theme="light"] .ge-chip-error {
  background: rgba(200, 20, 50, 0.08);
  color: #b31030;
  border-color: rgba(200, 20, 50, 0.20);
}

[data-theme="light"] .ge-chip-interactive:hover {
  background: rgba(0, 140, 150, 0.08);
  border-color: rgba(0, 140, 150, 0.25);
}

[data-theme="light"] .ge-table-row-selected {
  background: rgba(0, 140, 150, 0.08) !important;
}

[data-theme="light"] .ge-table-row-selected td {
  border-color: rgba(0, 140, 150, 0.12);
}

[data-theme="light"] .ge-timeline-marker-active {
  background: #008c96;
  border-color: #008c96;
  box-shadow: 0 0 8px rgba(0, 140, 150, 0.30);
}

[data-theme="light"] .ge-list-group {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.10);
}

[data-theme="light"] .ge-list-group-item {
  border-color: rgba(0, 0, 0, 0.06);
  color: #2a2a3e;
}

[data-theme="light"] .ge-list-group-item-active {
  background: rgba(0, 140, 150, 0.08);
  color: #006e75;
  border-left-color: #008c96;
}

[data-theme="light"] .ge-list-group-item-action:hover {
  background: rgba(0, 140, 150, 0.05);
}

[data-theme="light"] .ge-stat-value {
  color: #1a1a2e;
}

[data-theme="light"] .ge-stat-icon {
  background: rgba(0, 140, 150, 0.08);
  color: #008c96;
}

[data-theme="light"] .ge-code-block {
  background: #f5f5fa;
  border-color: rgba(0, 0, 0, 0.10);
}

[data-theme="light"] .ge-code-block-header {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
  color: #5a5a72;
}

[data-theme="light"] .ge-code-block-header button {
  border-color: rgba(0, 0, 0, 0.10);
  color: #5a5a72;
}

[data-theme="light"] .ge-code-block-header button:hover {
  background: rgba(0, 140, 150, 0.08);
  color: #006e75;
  border-color: rgba(0, 140, 150, 0.25);
}

[data-theme="light"] .ge-code-block-body {
  color: #2a2a3e;
}

[data-theme="light"] .ge-code-inline {
  color: #006e75;
  background: rgba(0, 140, 150, 0.06);
  border-color: rgba(0, 140, 150, 0.15);
}

[data-theme="light"] .ge-code-keyword {
  color: #800055;
}

[data-theme="light"] .ge-code-string {
  color: #00773d;
}

[data-theme="light"] .ge-code-comment {
  color: #9999aa;
}

[data-theme="light"] .ge-code-number {
  color: #806f00;
}

[data-theme="light"] .ge-code-function {
  color: #006e75;
}

[data-theme="light"] .ge-command-palette-overlay {
  background: rgba(0, 0, 0, 0.30);
}

[data-theme="light"] .ge-command-palette-dialog {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.18);
}

[data-theme="light"] .ge-command-palette-input {
  color: #2a2a3e;
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-command-palette-input::placeholder {
  color: #9999aa;
}

[data-theme="light"] .ge-command-palette-item {
  color: #2a2a3e;
}

[data-theme="light"] .ge-command-palette-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ge-command-palette-item-active {
  background: rgba(0, 140, 150, 0.08);
  color: #006e75;
}

[data-theme="light"] .ge-command-palette-item-active:hover {
  background: rgba(0, 140, 150, 0.12);
}

[data-theme="light"] .ge-command-palette-shortcut kbd {
  color: #5a5a72;
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.10);
}

[data-theme="light"] .ge-separator {
  background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-separator-label::before,
[data-theme="light"] .ge-separator-label::after {
  background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-separator-label {
  color: #9999aa;
}

[data-theme="light"] .ge-separator-accent {
  background: rgba(0, 140, 150, 0.25);
}

[data-theme="light"] .ge-separator-accent.ge-separator-label::before,
[data-theme="light"] .ge-separator-accent.ge-separator-label::after {
  background: rgba(0, 140, 150, 0.25);
}

[data-theme="light"] .ge-separator-accent.ge-separator-label {
  color: #008c96;
}

[data-theme="light"] .ge-context-menu {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .ge-context-menu-item {
  color: #2a2a3e;
}

[data-theme="light"] .ge-context-menu-item:hover {
  background: rgba(0, 140, 150, 0.08);
  color: #006e75;
}

[data-theme="light"] .ge-context-menu-divider {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .ge-context-menu-shortcut {
  color: #9999aa;
}

[data-theme="light"] .ge-notification-dot {
  border-color: #ffffff;
}

[data-theme="light"] .ge-notification-count {
  border-color: #ffffff;
}

[data-theme="light"] .ge-empty-state-icon {
  background: rgba(0, 0, 0, 0.04);
  color: #9999aa;
}

[data-theme="light"] .ge-empty-state-title {
  color: #1a1a2e;
}

[data-theme="light"] .ge-empty-state-description {
  color: #9999aa;
}

[data-theme="light"] .ge-toast-info {
  border-left-color: #008c96;
}

[data-theme="light"] .ge-toast-info .ge-toast-icon {
  color: #008c96;
}

[data-theme="light"] .ge-toast-info .ge-toast-progress {
  background: #008c96;
}

[data-theme="light"] .ge-toast-success {
  border-left-color: #00a354;
}

[data-theme="light"] .ge-toast-success .ge-toast-icon {
  color: #00a354;
}

[data-theme="light"] .ge-toast-success .ge-toast-progress {
  background: #00a354;
}

[data-theme="light"] .ge-toast-warning {
  border-left-color: #b37800;
}

[data-theme="light"] .ge-toast-warning .ge-toast-icon {
  color: #b37800;
}

[data-theme="light"] .ge-toast-warning .ge-toast-progress {
  background: #b37800;
}

[data-theme="light"] .ge-toast-error {
  border-left-color: #b31030;
}

[data-theme="light"] .ge-toast-error .ge-toast-icon {
  color: #b31030;
}

[data-theme="light"] .ge-toast-error .ge-toast-progress {
  background: #b31030;
}

[data-theme="light"] .ge-toast-action {
  color: #008c96;
  border-color: rgba(0, 140, 150, 0.30);
}

[data-theme="light"] .ge-toast-action:hover {
  background: rgba(0, 140, 150, 0.08);
  border-color: rgba(0, 140, 150, 0.50);
}

[data-theme="light"] .ge-accordion {
  border-color: rgba(0, 0, 0, 0.10);
}

[data-theme="light"] .ge-accordion-item {
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-accordion-header {
  color: #2a2a3e;
}

[data-theme="light"] .ge-accordion-content {
  color: #5a5a72;
}

[data-theme="light"] .ge-progress-success .ge-progress-bar {
  background: #00a354;
}

[data-theme="light"] .ge-progress-warning .ge-progress-bar {
  background: #b37800;
}

[data-theme="light"] .ge-progress-error .ge-progress-bar {
  background: #b31030;
}

[data-theme="light"] .ge-timeline-connector {
  background: rgba(0, 0, 0, 0.10);
}

[data-theme="light"] .ge-timeline-marker {
  background: #f0f0f5;
  border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .ge-timeline-date {
  color: #9999aa;
}

[data-theme="light"] .ge-chip-removable .ge-chip-remove {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .ge-chip-removable .ge-chip-remove:hover {
  background: rgba(200, 20, 50, 0.15);
  color: #b31030;
}

[data-theme="light"] .ge-avatar-group .ge-avatar {
  border-color: #ffffff;
}

[data-theme="light"] .ge-stat-trend-up {
  color: #00773d;
}

[data-theme="light"] .ge-stat-trend-down {
  color: #b31030;
}

[data-theme="light"] .ge-stat-label {
  color: #9999aa;
}

[data-theme="light"] .ge-stat-description {
  color: #9999aa;
}

[data-theme="light"] .ge-code-block-lines .ge-code-line-numbers {
  color: #9999aa;
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-alert-filled.ge-alert-info {
  background: #008c96;
  border-color: #008c96;
}

[data-theme="light"] .ge-alert-filled.ge-alert-success {
  background: #00a354;
  border-color: #00a354;
}

[data-theme="light"] .ge-alert-filled.ge-alert-warning {
  background: #b37800;
  border-color: #b37800;
}

[data-theme="light"] .ge-alert-filled.ge-alert-error {
  background: #b31030;
  border-color: #b31030;
}


/* ==========================================================================
   BACKWARD-COMPATIBILITY & MISSING CLASSES
   Appended to restore class names used in HTML pages after the design system
   CSS rewrite. Maps aliases to existing variants and adds missing utilities.
   ========================================================================== */


/* ==========================================================================
   BC-1. BUTTON ALIASES
   ========================================================================== */

/* Primary -- alias for default .ge-btn (cyan) */
.ge-btn-primary {
  background-color: var(--ge-cyan);
  color: var(--ge-text-on-cyan, #0a0a0f);
  border-color: transparent;
}

.ge-btn-primary:hover {
  background-color: var(--ge-cyan-bright, #33f5ff);
  color: #0a0a0f;
  box-shadow: var(--ge-glow-cyan-subtle);
}

.ge-btn-primary:active {
  background-color: var(--ge-cyan-dim);
  color: #0a0a0f;
  transform: scale(0.98);
  box-shadow: none;
}

.ge-btn-primary:focus-visible {
  outline: var(--ge-btn-focus-ring-width) solid var(--ge-btn-focus-ring-color);
  outline-offset: var(--ge-btn-focus-ring-offset);
}

.ge-btn-primary:disabled,
.ge-btn-primary.ge-btn-disabled {
  opacity: var(--ge-btn-disabled-opacity);
  pointer-events: none;
  cursor: not-allowed;
  box-shadow: none;
}

/* Danger -- alias for .ge-btn-destructive */
.ge-btn-danger {
  background-color: var(--ge-error);
  color: #ffffff;
  border-color: transparent;
}

.ge-btn-danger:hover {
  background-color: var(--ge-error-bright);
  color: #ffffff;
  box-shadow: var(--ge-glow-error-subtle);
}

.ge-btn-danger:active {
  background-color: var(--ge-error-dim);
  color: #ffffff;
  transform: scale(0.98);
  box-shadow: none;
}

.ge-btn-danger:focus-visible {
  outline: var(--ge-btn-focus-ring-width) solid var(--ge-focus-ring-color-error);
  outline-offset: var(--ge-btn-focus-ring-offset);
}

.ge-btn-danger:disabled,
.ge-btn-danger.ge-btn-disabled {
  opacity: var(--ge-btn-disabled-opacity);
  pointer-events: none;
  cursor: not-allowed;
}

/* Glass button */
.ge-btn-glass {
  background: rgba(30, 30, 50, 0.40);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(136, 136, 160, 0.15);
  color: var(--ge-text-primary);
}

.ge-btn-glass:hover {
  background: rgba(30, 30, 50, 0.60);
  border-color: rgba(136, 136, 160, 0.30);
  color: var(--ge-text-primary);
  box-shadow: var(--ge-shadow-sm);
}

.ge-btn-glass:active {
  background: rgba(30, 30, 50, 0.70);
  color: var(--ge-text-primary);
  transform: scale(0.98);
}

/* Success button */
.ge-btn-success {
  background-color: var(--ge-success, #00e676);
  color: #0a0a0f;
  border-color: transparent;
}

.ge-btn-success:hover {
  background-color: #33eb91;
  color: #0a0a0f;
  box-shadow: 0 0 12px rgba(0, 230, 118, 0.30);
}

.ge-btn-success:active {
  background-color: #00b85c;
  color: #0a0a0f;
  transform: scale(0.98);
  box-shadow: none;
}

.ge-btn-success:focus-visible {
  outline: var(--ge-btn-focus-ring-width) solid var(--ge-success, #00e676);
  outline-offset: var(--ge-btn-focus-ring-offset);
}

.ge-btn-success:disabled,
.ge-btn-success.ge-btn-disabled {
  opacity: var(--ge-btn-disabled-opacity);
  pointer-events: none;
  cursor: not-allowed;
}

/* Warning button */
.ge-btn-warning {
  background-color: var(--ge-warning, #ffab00);
  color: #0a0a0f;
  border-color: transparent;
}

.ge-btn-warning:hover {
  background-color: #ffbb33;
  color: #0a0a0f;
  box-shadow: 0 0 12px rgba(255, 171, 0, 0.30);
}

.ge-btn-warning:active {
  background-color: #cc8900;
  color: #0a0a0f;
  transform: scale(0.98);
  box-shadow: none;
}

.ge-btn-warning:focus-visible {
  outline: var(--ge-btn-focus-ring-width) solid var(--ge-warning, #ffab00);
  outline-offset: var(--ge-btn-focus-ring-offset);
}

.ge-btn-warning:disabled,
.ge-btn-warning.ge-btn-disabled {
  opacity: var(--ge-btn-disabled-opacity);
  pointer-events: none;
  cursor: not-allowed;
}

/* Outline magenta */
.ge-btn-outline-magenta {
  background: transparent;
  color: var(--ge-magenta, #ff00aa);
  border-color: var(--ge-magenta-alpha-40, rgba(255, 0, 170, 0.40));
}

.ge-btn-outline-magenta:hover {
  background-color: rgba(255, 0, 170, 0.10);
  border-color: rgba(255, 0, 170, 0.60);
  color: var(--ge-magenta-bright, #ff33bb);
  box-shadow: 0 0 12px rgba(255, 0, 170, 0.15);
}

.ge-btn-outline-magenta:active {
  background-color: rgba(255, 0, 170, 0.15);
  border-color: var(--ge-magenta, #ff00aa);
  color: var(--ge-magenta-bright, #ff33bb);
  transform: scale(0.98);
}

/* Pill shape */
.ge-btn-pill {
  border-radius: 9999px;
}


/* -------------------------------------------------------------------------
   BC-1b. CRITICAL CONTRAST FIX -- explicit color on all hover states
   that change background color
   ------------------------------------------------------------------------- */
.ge-btn:hover {
  color: #0a0a0f;
}

.ge-btn-destructive:hover {
  color: #ffffff;
}


/* ==========================================================================
   BC-2. CARD VARIANTS
   ========================================================================== */

/* Cyan glow on hover */
.ge-card-glow {
  border-color: transparent;
  transition: border-color 300ms ease, box-shadow 300ms ease;
}

.ge-card-glow:hover {
  border-color: var(--ge-cyan-alpha-40, rgba(0, 240, 255, 0.40));
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.12), 0 0 6px rgba(0, 240, 255, 0.08);
}

/* Magenta glow on hover */
.ge-card-glow-magenta {
  border-color: transparent;
  transition: border-color 300ms ease, box-shadow 300ms ease;
}

.ge-card-glow-magenta:hover {
  border-color: rgba(255, 0, 170, 0.40);
  box-shadow: 0 0 20px rgba(255, 0, 170, 0.12), 0 0 6px rgba(255, 0, 170, 0.08);
}

/* Compact card */
.ge-card-compact {
  padding: var(--ge-card-padding-sm, 1rem);
}

.ge-card-compact .ge-card-header,
.ge-card-compact .ge-card-body,
.ge-card-compact .ge-card-footer {
  padding: var(--ge-card-padding-sm, 1rem);
}

/* Flat card */
.ge-card-flat {
  box-shadow: none;
  border: none;
}


/* ==========================================================================
   BC-3. FORM HELPERS
   ========================================================================== */

.ge-form-error-text {
  color: var(--ge-error, #ff1744);
  font-size: 0.75rem;
  margin-top: 0.375rem;
  line-height: 1.4;
}

.ge-form-success-text {
  color: var(--ge-success, #00e676);
  font-size: 0.75rem;
  margin-top: 0.375rem;
  line-height: 1.4;
}

.ge-form-hint {
  color: var(--ge-text-muted, #5a5a70);
  font-size: 0.6875rem;
  margin-top: 0.375rem;
  line-height: 1.4;
}

.ge-input-filled {
  background: var(--ge-bg-elevated, #1e1e2e);
  border-color: transparent;
}

.ge-input-filled:focus,
.ge-input-filled:focus-within {
  border-color: var(--ge-cyan, #00f0ff);
}

.ge-input-flush {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}

.ge-input-warning {
  border-color: var(--ge-warning-alpha-50, rgba(255, 171, 0, 0.50));
}

.ge-input-warning:focus {
  border-color: var(--ge-warning, #ffab00);
  box-shadow: 0 0 0 var(--ge-input-focus-ring-width, 3px) rgba(255, 171, 0, 0.20);
}


/* ==========================================================================
   BC-4. BADGE VARIANTS
   ========================================================================== */

/* Error badge (alias for destructive) */
.ge-badge-error {
  background: var(--ge-error-alpha-15, rgba(255, 23, 68, 0.15));
  color: var(--ge-error-bright, #ff4569);
  border-color: var(--ge-border-error, rgba(255, 23, 68, 0.30));
}

/* Warning badge */
.ge-badge-warning {
  background: rgba(255, 171, 0, 0.15);
  color: var(--ge-warning, #ffab00);
  border-color: rgba(255, 171, 0, 0.30);
}

/* Filled (solid bg) badge variants */
.ge-badge-filled-cyan {
  background: var(--ge-cyan, #00f0ff);
  color: #0a0a0f;
  border-color: var(--ge-cyan, #00f0ff);
}

.ge-badge-filled-magenta {
  background: var(--ge-magenta, #ff00aa);
  color: #ffffff;
  border-color: var(--ge-magenta, #ff00aa);
}

.ge-badge-filled-success {
  background: var(--ge-success, #00e676);
  color: #0a0a0f;
  border-color: var(--ge-success, #00e676);
}

.ge-badge-filled-warning {
  background: var(--ge-warning, #ffab00);
  color: #0a0a0f;
  border-color: var(--ge-warning, #ffab00);
}

.ge-badge-filled-error {
  background: var(--ge-error, #ff1744);
  color: #ffffff;
  border-color: var(--ge-error, #ff1744);
}


/* ==========================================================================
   BC-5. ALERT VARIANTS (filled aliases)
   ========================================================================== */

.ge-alert-filled-info {
  background: var(--ge-cyan, #00f0ff);
  border-color: var(--ge-cyan, #00f0ff);
  color: #0a0a0f;
}

.ge-alert-filled-info .ge-alert-icon,
.ge-alert-filled-info .ge-alert-title,
.ge-alert-filled-info .ge-alert-description,
.ge-alert-filled-info .ge-alert-close {
  color: #0a0a0f;
}

.ge-alert-filled-success {
  background: var(--ge-success, #00e676);
  border-color: var(--ge-success, #00e676);
  color: #0a0a0f;
}

.ge-alert-filled-success .ge-alert-icon,
.ge-alert-filled-success .ge-alert-title,
.ge-alert-filled-success .ge-alert-description,
.ge-alert-filled-success .ge-alert-close {
  color: #0a0a0f;
}

.ge-alert-filled-warning {
  background: var(--ge-warning, #ffab00);
  border-color: var(--ge-warning, #ffab00);
  color: #0a0a0f;
}

.ge-alert-filled-warning .ge-alert-icon,
.ge-alert-filled-warning .ge-alert-title,
.ge-alert-filled-warning .ge-alert-description,
.ge-alert-filled-warning .ge-alert-close {
  color: #0a0a0f;
}

.ge-alert-filled-error {
  background: var(--ge-error, #ff1744);
  border-color: var(--ge-error, #ff1744);
  color: #ffffff;
}

.ge-alert-filled-error .ge-alert-icon,
.ge-alert-filled-error .ge-alert-title,
.ge-alert-filled-error .ge-alert-description,
.ge-alert-filled-error .ge-alert-close {
  color: #ffffff;
}


/* ==========================================================================
   BC-6. PROGRESS VARIANTS
   ========================================================================== */

.ge-progress-bar-magenta {
  background: var(--ge-magenta, #ff00aa);
}

.ge-progress-bar-yellow {
  background: var(--ge-yellow, #ffe600);
}

.ge-progress-bar-success {
  background: var(--ge-success, #00e676);
}

.ge-progress-bar-error {
  background: var(--ge-error, #ff1744);
}

.ge-progress-md {
  height: var(--ge-progress-height-md, 8px);
}

.ge-progress-striped .ge-progress-bar {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.10) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.10) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

@keyframes ge-progress-stripe-move {
  0% { background-position: 1rem 0; }
  100% { background-position: 0 0; }
}

.ge-progress-striped.ge-progress-animated .ge-progress-bar {
  animation: ge-progress-stripe-move 1s linear infinite;
}


/* ==========================================================================
   BC-7. NAVIGATION
   ========================================================================== */

/* Glass navbar */
.ge-navbar-glass {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(10, 10, 15, 0.85);
  border-bottom: 1px solid rgba(136, 136, 160, 0.10);
}

/* Breadcrumbs aliases (old naming) */
.ge-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ge-space-1, 0.25rem);
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: var(--ge-font-size-sm, 0.875rem);
}

.ge-breadcrumbs-separator {
  display: inline-flex;
  align-items: center;
  color: var(--ge-text-muted, #5a5a70);
  margin: 0 var(--ge-space-1, 0.25rem);
  user-select: none;
}

.ge-breadcrumbs-separator::before {
  content: '/';
}

.ge-breadcrumbs-current {
  color: var(--ge-text-primary, #eeeef0);
  font-weight: var(--ge-font-medium, 500);
}

/* Table wrapper */
.ge-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}


/* ==========================================================================
   BC-8. DIVIDER VARIANTS
   ========================================================================== */

.ge-divider {
  border: none;
  border-top: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  margin: var(--ge-space-4, 1rem) 0;
}

.ge-divider-vertical {
  display: inline-block;
  width: 0;
  height: 1em;
  border: none;
  border-left: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  margin: 0 var(--ge-space-3, 0.75rem);
  vertical-align: middle;
}

.ge-divider-accent {
  border-top-color: var(--ge-cyan-alpha-40, rgba(0, 240, 255, 0.40));
}

.ge-divider-magenta {
  border-top-color: rgba(255, 0, 170, 0.40);
}

.ge-divider-dashed {
  border-top-style: dashed;
}

.ge-divider-dotted {
  border-top-style: dotted;
}

.ge-divider-thick {
  border-top-width: 2px;
}

.ge-divider-with-text {
  display: flex;
  align-items: center;
  gap: var(--ge-space-3, 0.75rem);
  border: none;
  margin: var(--ge-space-4, 1rem) 0;
  color: var(--ge-text-muted, #5a5a70);
  font-size: var(--ge-font-size-sm, 0.875rem);
}

.ge-divider-with-text::before,
.ge-divider-with-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ge-border-default, rgba(136, 136, 160, 0.15));
}


/* ==========================================================================
   BC-9. CODE & KBD
   ========================================================================== */

/* Inline code (alias for .ge-code-inline) */
.ge-code {
  display: inline;
  padding: 0.15em 0.4em;
  font-family: var(--ge-font-mono, 'Space Mono', monospace);
  font-size: 0.875em;
  color: var(--ge-cyan, #00f0ff);
  background: var(--ge-bg-tertiary, rgba(136, 136, 160, 0.08));
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  border-radius: var(--ge-radius-sm, 4px);
  word-break: break-word;
}

/* Keyboard shortcut */
.ge-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  padding: 0.15em 0.45em;
  font-family: var(--ge-font-mono, 'Space Mono', monospace);
  font-size: 0.75rem;
  font-weight: var(--ge-font-semibold, 600);
  color: var(--ge-text-secondary, #8888a0);
  background: var(--ge-bg-secondary, #141420);
  border: 1px solid var(--ge-border-dark, rgba(136, 136, 160, 0.25));
  border-bottom-width: 2px;
  border-radius: var(--ge-radius-sm, 4px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  line-height: 1.4;
}


/* ==========================================================================
   BC-10. LIST
   ========================================================================== */

.ge-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ge-list-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  color: var(--ge-text-primary, #eeeef0);
  transition: background 200ms ease;
}

.ge-list-item:last-child {
  border-bottom: none;
}

.ge-list-item-active {
  background: var(--ge-cyan-alpha-8, rgba(0, 240, 255, 0.08));
  color: var(--ge-cyan, #00f0ff);
}


/* ==========================================================================
   BC-11. CHIP VARIANTS
   ========================================================================== */

.ge-chip-warning {
  background: rgba(255, 171, 0, 0.15);
  color: var(--ge-warning, #ffab00);
  border-color: rgba(255, 171, 0, 0.30);
}


/* ==========================================================================
   BC-12. STAT CARD EXTRAS
   ========================================================================== */

.ge-stat-value-cyan {
  color: var(--ge-cyan, #00f0ff);
}

.ge-stat-value-magenta {
  color: var(--ge-magenta, #ff00aa);
}

.ge-stat-value-yellow {
  color: var(--ge-yellow, #ffe600);
}

.ge-stat-change {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: var(--ge-font-semibold, 600);
  font-variant-numeric: tabular-nums;
}

.ge-stat-change-up {
  color: var(--ge-success, #00e676);
}

.ge-stat-change-up::before {
  content: '\2191'; /* up arrow */
}

.ge-stat-change-down {
  color: var(--ge-error, #ff1744);
}

.ge-stat-change-down::before {
  content: '\2193'; /* down arrow */
}


/* ==========================================================================
   BC-13. TIMELINE EXTRAS
   ========================================================================== */

.ge-timeline-title {
  font-weight: var(--ge-font-semibold, 600);
  color: var(--ge-text-primary, #eeeef0);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.ge-timeline-description {
  color: var(--ge-text-secondary, #8888a0);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: 0.25rem;
}


/* ==========================================================================
   BC-14. SKELETON EXTRAS
   ========================================================================== */

.ge-skeleton-card-header {
  height: 1.25rem;
  width: 60%;
  border-radius: var(--ge-radius-sm, 4px);
  background: var(--ge-bg-tertiary, rgba(136, 136, 160, 0.08));
  animation: ge-skeleton-pulse 1.5s ease-in-out infinite;
}

.ge-skeleton-card-line {
  height: 0.75rem;
  width: 100%;
  border-radius: var(--ge-radius-sm, 4px);
  background: var(--ge-bg-tertiary, rgba(136, 136, 160, 0.08));
  animation: ge-skeleton-pulse 1.5s ease-in-out infinite;
}

.ge-skeleton-card-line:last-child {
  width: 75%;
}


/* ==========================================================================
   BC-15. STEPS EXTRAS
   ========================================================================== */

.ge-step-label {
  font-size: 0.75rem;
  color: var(--ge-text-secondary, #8888a0);
  margin-top: 0.25rem;
  text-align: center;
}


/* ==========================================================================
   BC-16. EMPTY STATE EXTRAS
   ========================================================================== */

.ge-empty-state-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}


/* ==========================================================================
   BC-17. FILE INPUT
   ========================================================================== */

.ge-file-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.75rem;
  color: var(--ge-cyan, #00f0ff);
  opacity: 0.7;
}

.ge-file-input-icon svg {
  width: 2rem;
  height: 2rem;
}

.ge-file-input-text {
  font-size: 0.875rem;
  color: var(--ge-text-primary, #eeeef0);
  font-weight: var(--ge-font-medium, 500);
  text-align: center;
}

.ge-file-input-hint {
  font-size: 0.75rem;
  color: var(--ge-text-muted, #5a5a70);
  margin-top: 0.25rem;
  text-align: center;
}


/* ==========================================================================
   BC-18. MISC UTILITIES
   ========================================================================== */

/* Modal open -- prevent body scroll */
.ge-modal-open {
  overflow: hidden;
}

/* Pulse / dots loader */
.ge-pulse-loader {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ge-pulse-loader::before,
.ge-pulse-loader::after,
.ge-pulse-loader span {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ge-cyan, #00f0ff);
  animation: ge-pulse-dot 1.4s ease-in-out infinite;
}

.ge-pulse-loader::after {
  animation-delay: 0.2s;
}

.ge-pulse-loader span {
  animation-delay: 0.4s;
}

@keyframes ge-pulse-dot {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Counter -- tabular numbers */
.ge-counter {
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   BC-19. LIGHT MODE OVERRIDES for backward-compat classes
   ========================================================================== */

/* Buttons */
[data-theme="light"] .ge-btn-primary {
  background-color: #008c96;
  color: #ffffff;
}

[data-theme="light"] .ge-btn-primary:hover {
  background-color: #007a84;
  color: #ffffff;
}

[data-theme="light"] .ge-btn-primary:active {
  background-color: #006970;
  color: #ffffff;
}

[data-theme="light"] .ge-btn-danger {
  background-color: #d50032;
  color: #ffffff;
}

[data-theme="light"] .ge-btn-danger:hover {
  background-color: #b31030;
  color: #ffffff;
}

[data-theme="light"] .ge-btn-danger:active {
  background-color: #990028;
  color: #ffffff;
}

[data-theme="light"] .ge-btn-glass {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(0, 0, 0, 0.08);
  color: #1a1a2e;
}

[data-theme="light"] .ge-btn-glass:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.12);
  color: #1a1a2e;
}

[data-theme="light"] .ge-btn-success {
  background-color: #00a354;
  color: #ffffff;
}

[data-theme="light"] .ge-btn-success:hover {
  background-color: #008c48;
  color: #ffffff;
}

[data-theme="light"] .ge-btn-warning {
  background-color: #cc8800;
  color: #ffffff;
}

[data-theme="light"] .ge-btn-warning:hover {
  background-color: #b37800;
  color: #ffffff;
}

[data-theme="light"] .ge-btn-outline-magenta {
  color: #c8007a;
  border-color: rgba(200, 0, 122, 0.40);
}

[data-theme="light"] .ge-btn-outline-magenta:hover {
  background-color: rgba(200, 0, 122, 0.08);
  border-color: rgba(200, 0, 122, 0.60);
  color: #a50066;
}

/* Cards */
[data-theme="light"] .ge-card-glow:hover {
  border-color: rgba(0, 140, 150, 0.35);
  box-shadow: 0 0 16px rgba(0, 140, 150, 0.10);
}

[data-theme="light"] .ge-card-glow-magenta:hover {
  border-color: rgba(200, 0, 122, 0.35);
  box-shadow: 0 0 16px rgba(200, 0, 122, 0.10);
}

/* Form helpers */
[data-theme="light"] .ge-form-error-text {
  color: #d50032;
}

[data-theme="light"] .ge-form-success-text {
  color: #00773d;
}

[data-theme="light"] .ge-form-hint {
  color: #9999aa;
}

[data-theme="light"] .ge-input-filled {
  background: #f0f0f5;
}

[data-theme="light"] .ge-input-warning {
  border-color: rgba(180, 120, 0, 0.50);
}

/* Badges */
[data-theme="light"] .ge-badge-error {
  background: rgba(213, 0, 50, 0.10);
  color: #b31030;
  border-color: rgba(213, 0, 50, 0.25);
}

[data-theme="light"] .ge-badge-warning {
  background: rgba(180, 120, 0, 0.10);
  color: #8a6600;
  border-color: rgba(180, 120, 0, 0.25);
}

[data-theme="light"] .ge-badge-filled-cyan {
  background: #008c96;
  color: #ffffff;
  border-color: #008c96;
}

[data-theme="light"] .ge-badge-filled-magenta {
  background: #c8007a;
  color: #ffffff;
  border-color: #c8007a;
}

[data-theme="light"] .ge-badge-filled-success {
  background: #00a354;
  color: #ffffff;
  border-color: #00a354;
}

[data-theme="light"] .ge-badge-filled-warning {
  background: #cc8800;
  color: #ffffff;
  border-color: #cc8800;
}

[data-theme="light"] .ge-badge-filled-error {
  background: #d50032;
  color: #ffffff;
  border-color: #d50032;
}

/* Alerts */
[data-theme="light"] .ge-alert-filled-info {
  background: #008c96;
  border-color: #008c96;
  color: #ffffff;
}

[data-theme="light"] .ge-alert-filled-info .ge-alert-icon,
[data-theme="light"] .ge-alert-filled-info .ge-alert-title,
[data-theme="light"] .ge-alert-filled-info .ge-alert-description,
[data-theme="light"] .ge-alert-filled-info .ge-alert-close {
  color: #ffffff;
}

[data-theme="light"] .ge-alert-filled-success {
  background: #00a354;
  border-color: #00a354;
  color: #ffffff;
}

[data-theme="light"] .ge-alert-filled-success .ge-alert-icon,
[data-theme="light"] .ge-alert-filled-success .ge-alert-title,
[data-theme="light"] .ge-alert-filled-success .ge-alert-description,
[data-theme="light"] .ge-alert-filled-success .ge-alert-close {
  color: #ffffff;
}

[data-theme="light"] .ge-alert-filled-warning {
  background: #b37800;
  border-color: #b37800;
  color: #ffffff;
}

[data-theme="light"] .ge-alert-filled-warning .ge-alert-icon,
[data-theme="light"] .ge-alert-filled-warning .ge-alert-title,
[data-theme="light"] .ge-alert-filled-warning .ge-alert-description,
[data-theme="light"] .ge-alert-filled-warning .ge-alert-close {
  color: #ffffff;
}

[data-theme="light"] .ge-alert-filled-error {
  background: #b31030;
  border-color: #b31030;
  color: #ffffff;
}

[data-theme="light"] .ge-alert-filled-error .ge-alert-icon,
[data-theme="light"] .ge-alert-filled-error .ge-alert-title,
[data-theme="light"] .ge-alert-filled-error .ge-alert-description,
[data-theme="light"] .ge-alert-filled-error .ge-alert-close {
  color: #ffffff;
}

/* Progress */
[data-theme="light"] .ge-progress-bar-magenta {
  background: #c8007a;
}

[data-theme="light"] .ge-progress-bar-yellow {
  background: #cc8800;
}

[data-theme="light"] .ge-progress-bar-success {
  background: #00a354;
}

[data-theme="light"] .ge-progress-bar-error {
  background: #d50032;
}

/* Navigation */
[data-theme="light"] .ge-navbar-glass {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-breadcrumbs-separator {
  color: #9999aa;
}

[data-theme="light"] .ge-breadcrumbs-current {
  color: #1a1a2e;
}

/* Dividers */
[data-theme="light"] .ge-divider {
  border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-divider-vertical {
  border-left-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-divider-accent {
  border-top-color: rgba(0, 140, 150, 0.35);
}

[data-theme="light"] .ge-divider-magenta {
  border-top-color: rgba(200, 0, 122, 0.35);
}

[data-theme="light"] .ge-divider-with-text {
  color: #9999aa;
}

[data-theme="light"] .ge-divider-with-text::before,
[data-theme="light"] .ge-divider-with-text::after {
  background: rgba(0, 0, 0, 0.08);
}

/* Code & Kbd */
[data-theme="light"] .ge-code {
  color: #008c96;
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-kbd {
  color: #5a5a70;
  background: #f0f0f5;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* List */
[data-theme="light"] .ge-list-item {
  border-bottom-color: rgba(0, 0, 0, 0.06);
  color: #1a1a2e;
}

[data-theme="light"] .ge-list-item-active {
  background: rgba(0, 140, 150, 0.08);
  color: #008c96;
}

/* Chip */
[data-theme="light"] .ge-chip-warning {
  background: rgba(180, 120, 0, 0.10);
  color: #8a6600;
  border-color: rgba(180, 120, 0, 0.25);
}

/* Stat extras */
[data-theme="light"] .ge-stat-value-cyan {
  color: #008c96;
}

[data-theme="light"] .ge-stat-value-magenta {
  color: #c8007a;
}

[data-theme="light"] .ge-stat-value-yellow {
  color: #8a6600;
}

[data-theme="light"] .ge-stat-change-up {
  color: #00773d;
}

[data-theme="light"] .ge-stat-change-down {
  color: #b31030;
}

/* Timeline extras */
[data-theme="light"] .ge-timeline-title {
  color: #1a1a2e;
}

[data-theme="light"] .ge-timeline-description {
  color: #6b6b80;
}

/* Skeleton extras */
[data-theme="light"] .ge-skeleton-card-header,
[data-theme="light"] .ge-skeleton-card-line {
  background: rgba(0, 0, 0, 0.06);
}

/* Step label */
[data-theme="light"] .ge-step-label {
  color: #6b6b80;
}

/* File input */
[data-theme="light"] .ge-file-input-icon {
  color: #008c96;
}

[data-theme="light"] .ge-file-input-text {
  color: #1a1a2e;
}

[data-theme="light"] .ge-file-input-hint {
  color: #9999aa;
}

/* Pulse loader */
[data-theme="light"] .ge-pulse-loader::before,
[data-theme="light"] .ge-pulse-loader::after,
[data-theme="light"] .ge-pulse-loader span {
  background: #008c96;
}


/* ==========================================================================
   ALERT DIALOG (.ge-alert-dialog)
   ========================================================================== */

/* -------------------------------------------------------------------------
   Alert Dialog Overlay (backdrop)
   ------------------------------------------------------------------------- */
.ge-alert-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--ge-modal-z, 1000);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
  padding: var(--ge-space-4, 1rem);
}

/* -------------------------------------------------------------------------
   Alert Dialog Active State
   ------------------------------------------------------------------------- */
.ge-alert-dialog.ge-alert-dialog-active,
.ge-alert-dialog-active .ge-alert-dialog {
  opacity: 1;
  visibility: visible;
}

/* -------------------------------------------------------------------------
   Alert Dialog Content Panel
   ------------------------------------------------------------------------- */
.ge-alert-dialog-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  padding: var(--ge-space-6, 1.5rem);
  background: var(--ge-bg-primary, #0a0a12);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.12));
  border-radius: var(--ge-radius-lg, 0.5rem);
  box-shadow: var(--ge-shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.5));
  overflow: hidden;
  transform: scale(0.95) translateY(8px);
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
}

.ge-alert-dialog-active .ge-alert-dialog-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.ge-alert-dialog-content:focus {
  outline: none;
}

/* -------------------------------------------------------------------------
   Alert Dialog Header
   ------------------------------------------------------------------------- */
.ge-alert-dialog-header {
  margin-bottom: var(--ge-space-3, 0.75rem);
  font-family: var(--ge-font-display, 'Syne', system-ui, sans-serif);
  font-size: var(--ge-text-lg, 1.125rem);
  font-weight: var(--ge-font-semibold, 600);
  color: var(--ge-text-primary, #e8e8f0);
  line-height: var(--ge-leading-tight, 1.2);
}

/* -------------------------------------------------------------------------
   Alert Dialog Description
   ------------------------------------------------------------------------- */
.ge-alert-dialog-description {
  margin-bottom: var(--ge-space-5, 1.25rem);
  font-family: var(--ge-font-body, 'Inter', system-ui, sans-serif);
  font-size: var(--ge-text-sm, 0.75rem);
  color: var(--ge-text-secondary, #8888a0);
  line-height: var(--ge-leading-normal, 1.5);
}

/* -------------------------------------------------------------------------
   Alert Dialog Footer
   ------------------------------------------------------------------------- */
.ge-alert-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ge-space-3, 0.75rem);
}

/* -------------------------------------------------------------------------
   Alert Dialog — Light Mode
   ------------------------------------------------------------------------- */
[data-theme="light"] .ge-alert-dialog {
  background: rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .ge-alert-dialog-content {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .ge-alert-dialog-header {
  color: #1a1a2e;
}

[data-theme="light"] .ge-alert-dialog-description {
  color: #555570;
}


/* ==========================================================================
   ASPECT RATIO (.ge-aspect-ratio)
   ========================================================================== */

/* -------------------------------------------------------------------------
   Aspect Ratio Base
   ------------------------------------------------------------------------- */
.ge-aspect-ratio {
  position: relative;
  overflow: hidden;
}

.ge-aspect-ratio > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -------------------------------------------------------------------------
   Aspect Ratio Variants
   ------------------------------------------------------------------------- */

/* Square (1:1) */
.ge-aspect-square {
  aspect-ratio: 1 / 1;
}

/* Fallback for aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .ge-aspect-square::before {
    content: "";
    display: block;
    padding-top: 100%;
  }
}

/* Video (16:9) */
.ge-aspect-video {
  aspect-ratio: 16 / 9;
}

@supports not (aspect-ratio: 16 / 9) {
  .ge-aspect-video::before {
    content: "";
    display: block;
    padding-top: 56.25%;
  }
}

/* Portrait (3:4) */
.ge-aspect-portrait {
  aspect-ratio: 3 / 4;
}

@supports not (aspect-ratio: 3 / 4) {
  .ge-aspect-portrait::before {
    content: "";
    display: block;
    padding-top: 133.333%;
  }
}

/* Wide (21:9) */
.ge-aspect-wide {
  aspect-ratio: 21 / 9;
}

@supports not (aspect-ratio: 21 / 9) {
  .ge-aspect-wide::before {
    content: "";
    display: block;
    padding-top: 42.857%;
  }
}

/* 4:3 */
.ge-aspect-4-3 {
  aspect-ratio: 4 / 3;
}

@supports not (aspect-ratio: 4 / 3) {
  .ge-aspect-4-3::before {
    content: "";
    display: block;
    padding-top: 75%;
  }
}


/* ==========================================================================
   CALENDAR (.ge-calendar)
   ========================================================================== */

/* -------------------------------------------------------------------------
   Calendar Container
   ------------------------------------------------------------------------- */
.ge-calendar {
  display: inline-flex;
  flex-direction: column;
  padding: var(--ge-space-4, 1rem);
  background: var(--ge-bg-primary, #0a0a12);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.12));
  border-radius: var(--ge-radius-lg, 0.5rem);
  font-family: var(--ge-font-body, 'Inter', system-ui, sans-serif);
}

/* -------------------------------------------------------------------------
   Calendar Header
   ------------------------------------------------------------------------- */
.ge-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ge-space-2, 0.5rem);
  margin-bottom: var(--ge-space-3, 0.75rem);
}

.ge-calendar-header-title {
  font-family: var(--ge-font-display, 'Syne', system-ui, sans-serif);
  font-size: var(--ge-text-sm, 0.75rem);
  font-weight: var(--ge-font-semibold, 600);
  color: var(--ge-text-primary, #e8e8f0);
}

.ge-calendar-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.12));
  border-radius: var(--ge-radius-md, 0.375rem);
  color: var(--ge-text-secondary, #8888a0);
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}

.ge-calendar-header-btn:hover {
  color: var(--ge-text-primary, #e8e8f0);
  background: var(--ge-bg-secondary, #12121e);
  border-color: var(--ge-border-dark, rgba(136, 136, 160, 0.2));
}

.ge-calendar-header-btn:active {
  background: var(--ge-bg-tertiary, #1a1a2e);
  transform: scale(0.95);
}

.ge-calendar-header-btn:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: 2px;
}

.ge-calendar-header-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   Calendar Grid
   ------------------------------------------------------------------------- */
.ge-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--ge-space-1, 0.25rem);
}

/* -------------------------------------------------------------------------
   Calendar Weekday Headers
   ------------------------------------------------------------------------- */
.ge-calendar-weekday {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  font-family: var(--ge-font-mono, 'JetBrains Mono', monospace);
  font-size: var(--ge-text-xs, 0.625rem);
  font-weight: var(--ge-font-medium, 500);
  color: var(--ge-text-muted, #555570);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  user-select: none;
}

/* -------------------------------------------------------------------------
   Calendar Day Cell
   ------------------------------------------------------------------------- */
.ge-calendar-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  font-size: var(--ge-text-sm, 0.75rem);
  color: var(--ge-text-primary, #e8e8f0);
  border-radius: var(--ge-radius-md, 0.375rem);
  cursor: pointer;
  user-select: none;
  transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
  background: transparent;
  border: none;
  padding: 0;
}

.ge-calendar-day:hover {
  background: var(--ge-bg-secondary, #12121e);
}

.ge-calendar-day:active {
  transform: scale(0.92);
}

.ge-calendar-day:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: 2px;
}

/* Today */
.ge-calendar-day-today {
  box-shadow: inset 0 0 0 1px var(--ge-cyan, #00f0ff);
}

/* Selected */
.ge-calendar-day-selected {
  background: var(--ge-cyan, #00f0ff);
  color: var(--ge-bg-primary, #0a0a12);
  font-weight: var(--ge-font-semibold, 600);
}

.ge-calendar-day-selected:hover {
  background: var(--ge-cyan-bright, #33f3ff);
}

/* Range selection */
.ge-calendar-day-range {
  background: var(--ge-cyan-alpha-10, rgba(0, 240, 255, 0.1));
  border-radius: 0;
}

/* Disabled */
.ge-calendar-day-disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}

/* Outside month */
.ge-calendar-day-outside {
  color: var(--ge-text-muted, #555570);
}

/* -------------------------------------------------------------------------
   Calendar — Light Mode
   ------------------------------------------------------------------------- */
[data-theme="light"] .ge-calendar {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ge-calendar-header-title {
  color: #1a1a2e;
}

[data-theme="light"] .ge-calendar-header-btn {
  color: #555570;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ge-calendar-header-btn:hover {
  color: #1a1a2e;
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .ge-calendar-weekday {
  color: #9999aa;
}

[data-theme="light"] .ge-calendar-day {
  color: #1a1a2e;
}

[data-theme="light"] .ge-calendar-day:hover {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ge-calendar-day-today {
  box-shadow: inset 0 0 0 1px #008c96;
}

[data-theme="light"] .ge-calendar-day-selected {
  background: #008c96;
  color: #ffffff;
}

[data-theme="light"] .ge-calendar-day-selected:hover {
  background: #00a0ab;
}

[data-theme="light"] .ge-calendar-day-range {
  background: rgba(0, 140, 150, 0.1);
}

[data-theme="light"] .ge-calendar-day-outside {
  color: #9999aa;
}


/* ==========================================================================
   CAROUSEL (.ge-carousel)
   ========================================================================== */

/* -------------------------------------------------------------------------
   Carousel Container
   ------------------------------------------------------------------------- */
.ge-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* -------------------------------------------------------------------------
   Carousel Track
   ------------------------------------------------------------------------- */
.ge-carousel-track {
  display: flex;
  transition: transform 500ms ease;
}

/* -------------------------------------------------------------------------
   Carousel Slide
   ------------------------------------------------------------------------- */
.ge-carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
}

/* -------------------------------------------------------------------------
   Carousel Navigation Dots
   ------------------------------------------------------------------------- */
.ge-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ge-space-2, 0.5rem);
  margin-top: var(--ge-space-4, 1rem);
}

.ge-carousel-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  padding: 0;
  background: var(--ge-bg-tertiary, #1a1a2e);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.12));
  border-radius: var(--ge-radius-full, 9999px);
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.ge-carousel-dot:hover {
  background: var(--ge-bg-elevated, #22223a);
  border-color: var(--ge-border-dark, rgba(136, 136, 160, 0.2));
}

.ge-carousel-dot:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: 2px;
}

/* Active dot */
.ge-carousel-dot-active,
.ge-carousel-dot[aria-selected="true"] {
  background: var(--ge-cyan, #00f0ff);
  border-color: var(--ge-cyan, #00f0ff);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.35);
}

/* -------------------------------------------------------------------------
   Carousel Prev / Next Buttons
   ------------------------------------------------------------------------- */
.ge-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: var(--ge-bg-secondary, #12121e);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.12));
  border-radius: var(--ge-radius-full, 9999px);
  color: var(--ge-text-secondary, #8888a0);
  cursor: pointer;
  z-index: 2;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.ge-carousel-btn:hover {
  background: var(--ge-cyan, #00f0ff);
  color: var(--ge-bg-primary, #0a0a12);
  border-color: var(--ge-cyan, #00f0ff);
  box-shadow: var(--ge-glow-cyan-subtle, 0 0 12px rgba(0, 240, 255, 0.25));
}

.ge-carousel-btn:active {
  transform: translateY(-50%) scale(0.95);
  box-shadow: none;
}

.ge-carousel-btn:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: 2px;
}

.ge-carousel-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.ge-carousel-btn-prev {
  left: 1rem;
}

.ge-carousel-btn-next {
  right: 1rem;
}

/* -------------------------------------------------------------------------
   Carousel — Light Mode
   ------------------------------------------------------------------------- */
[data-theme="light"] .ge-carousel-dot {
  background: #dddde4;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ge-carousel-dot:hover {
  background: #ccccdd;
  border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .ge-carousel-dot-active,
[data-theme="light"] .ge-carousel-dot[aria-selected="true"] {
  background: #008c96;
  border-color: #008c96;
  box-shadow: 0 0 8px rgba(0, 140, 150, 0.3);
}

[data-theme="light"] .ge-carousel-btn {
  background: #ffffff;
  color: #555570;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-carousel-btn:hover {
  background: #008c96;
  color: #ffffff;
  border-color: #008c96;
  box-shadow: 0 0 12px rgba(0, 140, 150, 0.25);
}


/* ==========================================================================
   CHART (.ge-chart)
   ========================================================================== */

/* -------------------------------------------------------------------------
   Chart Container
   ------------------------------------------------------------------------- */
.ge-chart {
  position: relative;
  padding: var(--ge-space-4, 1rem);
  background: var(--ge-bg-primary, #0a0a12);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.12));
  border-radius: var(--ge-radius-lg, 0.5rem);
  font-family: var(--ge-font-body, 'Inter', system-ui, sans-serif);
}

/* -------------------------------------------------------------------------
   Chart Header
   ------------------------------------------------------------------------- */
.ge-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ge-space-3, 0.75rem);
  margin-bottom: var(--ge-space-4, 1rem);
}

/* -------------------------------------------------------------------------
   Chart Title
   ------------------------------------------------------------------------- */
.ge-chart-title {
  font-family: var(--ge-font-display, 'Syne', system-ui, sans-serif);
  font-size: var(--ge-text-sm, 0.75rem);
  font-weight: var(--ge-font-semibold, 600);
  color: var(--ge-text-primary, #e8e8f0);
  line-height: var(--ge-leading-tight, 1.2);
  margin: 0;
}

/* -------------------------------------------------------------------------
   Chart Legend
   ------------------------------------------------------------------------- */
.ge-chart-legend {
  display: flex;
  align-items: center;
  gap: var(--ge-space-4, 1rem);
  flex-wrap: wrap;
}

.ge-chart-legend-item {
  display: flex;
  align-items: center;
  gap: var(--ge-space-2, 0.5rem);
  font-size: var(--ge-text-xs, 0.625rem);
  color: var(--ge-text-secondary, #8888a0);
}

.ge-chart-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--ge-radius-full, 9999px);
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Chart Body
   ------------------------------------------------------------------------- */
.ge-chart-body {
  position: relative;
  min-height: 200px;
}

/* -------------------------------------------------------------------------
   Chart Placeholder
   ------------------------------------------------------------------------- */
.ge-chart-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--ge-text-muted, #555570);
  font-size: var(--ge-text-sm, 0.75rem);
  border: 1px dashed var(--ge-border-default, rgba(136, 136, 160, 0.12));
  border-radius: var(--ge-radius-md, 0.375rem);
}

/* -------------------------------------------------------------------------
   Chart Bar
   ------------------------------------------------------------------------- */
.ge-chart-bar {
  display: inline-block;
  background: var(--ge-cyan, #00f0ff);
  border-radius: var(--ge-radius-sm, 0.25rem) var(--ge-radius-sm, 0.25rem) 0 0;
  transition: height 200ms ease;
}

.ge-chart-bar-magenta {
  background: var(--ge-magenta, #ff2afc);
}

.ge-chart-bar-yellow {
  background: var(--ge-yellow, #ffe156);
}

.ge-chart-bar-success {
  background: var(--ge-success, #00e676);
}

.ge-chart-bar-error {
  background: var(--ge-error, #ff3b5c);
}

/* -------------------------------------------------------------------------
   Chart — Light Mode
   ------------------------------------------------------------------------- */
[data-theme="light"] .ge-chart {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ge-chart-title {
  color: #1a1a2e;
}

[data-theme="light"] .ge-chart-legend-item {
  color: #555570;
}

[data-theme="light"] .ge-chart-placeholder {
  color: #9999aa;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ge-chart-bar {
  background: #008c96;
}

[data-theme="light"] .ge-chart-bar-magenta {
  background: #cc22ca;
}

[data-theme="light"] .ge-chart-bar-yellow {
  background: #c9a800;
}

[data-theme="light"] .ge-chart-bar-success {
  background: #00773d;
}

[data-theme="light"] .ge-chart-bar-error {
  background: #b31030;
}


/* ==========================================================================
   COLLAPSIBLE (.ge-collapsible)
   ========================================================================== */

/* -------------------------------------------------------------------------
   Collapsible Container
   ------------------------------------------------------------------------- */
.ge-collapsible {
  font-family: var(--ge-font-body, 'Inter', system-ui, sans-serif);
}

/* -------------------------------------------------------------------------
   Collapsible Trigger
   ------------------------------------------------------------------------- */
.ge-collapsible-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--ge-space-3, 0.75rem) var(--ge-space-4, 1rem);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.12));
  color: var(--ge-text-primary, #e8e8f0);
  font-family: inherit;
  font-size: var(--ge-text-sm, 0.75rem);
  font-weight: var(--ge-font-medium, 500);
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: background 200ms ease, color 200ms ease;
}

.ge-collapsible-trigger:hover {
  background: var(--ge-bg-secondary, #12121e);
}

.ge-collapsible-trigger:active {
  background: var(--ge-bg-tertiary, #1a1a2e);
}

.ge-collapsible-trigger:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: -2px;
}

.ge-collapsible-trigger:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Chevron arrow */
.ge-collapsible-trigger::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--ge-text-secondary, #8888a0);
  border-bottom: 2px solid var(--ge-text-secondary, #8888a0);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-left: var(--ge-space-3, 0.75rem);
  transition: transform 200ms ease;
}

/* -------------------------------------------------------------------------
   Collapsible Content
   ------------------------------------------------------------------------- */
.ge-collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease;
}

/* -------------------------------------------------------------------------
   Collapsible Open State
   ------------------------------------------------------------------------- */
.ge-collapsible-open .ge-collapsible-trigger::after {
  transform: rotate(225deg);
}

.ge-collapsible-open .ge-collapsible-content {
  max-height: 2000px;
}

/* -------------------------------------------------------------------------
   Collapsible — Light Mode
   ------------------------------------------------------------------------- */
[data-theme="light"] .ge-collapsible-trigger {
  color: #1a1a2e;
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ge-collapsible-trigger:hover {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ge-collapsible-trigger:active {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .ge-collapsible-trigger::after {
  border-color: #555570;
}


/* ==========================================================================
   COMBOBOX (.ge-combobox)
   ========================================================================== */

/* -------------------------------------------------------------------------
   Combobox Container
   ------------------------------------------------------------------------- */
.ge-combobox {
  position: relative;
  font-family: var(--ge-font-body, 'Inter', system-ui, sans-serif);
}

/* -------------------------------------------------------------------------
   Combobox Input
   ------------------------------------------------------------------------- */
.ge-combobox-input {
  display: block;
  width: 100%;
  height: var(--ge-input-height-md, 2.5rem);
  padding: 0 var(--ge-space-10, 2.5rem) 0 var(--ge-input-px, 0.75rem);
  font-family: var(--ge-font-body, 'Inter', system-ui, sans-serif);
  font-size: var(--ge-input-font-size, 0.75rem);
  font-weight: var(--ge-input-font-weight, 400);
  line-height: 1;
  color: var(--ge-input-color, #e8e8f0);
  background-color: var(--ge-input-bg, #0a0a12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238888a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  border: var(--ge-input-border-width, 1px) solid var(--ge-input-border, rgba(136, 136, 160, 0.18));
  border-radius: var(--ge-input-radius, 0.375rem);
  outline: none;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.ge-combobox-input::placeholder {
  color: var(--ge-input-placeholder, #555570);
  opacity: 1;
}

.ge-combobox-input:hover {
  background-color: var(--ge-input-bg-hover, #0e0e1a);
  border-color: var(--ge-input-border-hover, rgba(136, 136, 160, 0.28));
}

.ge-combobox-input:focus,
.ge-combobox-input:focus-visible {
  background-color: var(--ge-input-bg-focus, #0a0a14);
  border-color: var(--ge-input-border-focus, var(--ge-cyan, #00f0ff));
  box-shadow: 0 0 0 var(--ge-input-focus-ring-width, 3px) var(--ge-input-focus-ring-color, rgba(0, 240, 255, 0.15));
}

.ge-combobox-input:disabled {
  background-color: var(--ge-input-bg-disabled, #0a0a12);
  opacity: var(--ge-input-disabled-opacity, 0.45);
  cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   Combobox Dropdown List
   ------------------------------------------------------------------------- */
.ge-combobox-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--ge-dropdown-z, 50);
  display: none;
  flex-direction: column;
  max-height: 240px;
  margin-top: var(--ge-space-1, 0.25rem);
  padding: var(--ge-space-1, 0.25rem);
  background: var(--ge-bg-primary, #0a0a12);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.12));
  border-radius: var(--ge-radius-md, 0.375rem);
  box-shadow: var(--ge-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.4));
  overflow-y: auto;
  overflow-x: hidden;
  list-style: none;
}

/* Scrollbar */
.ge-combobox-list::-webkit-scrollbar {
  width: 4px;
}

.ge-combobox-list::-webkit-scrollbar-track {
  background: transparent;
}

.ge-combobox-list::-webkit-scrollbar-thumb {
  background: rgba(136, 136, 160, 0.2);
  border-radius: var(--ge-radius-full, 9999px);
}

.ge-combobox-list::-webkit-scrollbar-thumb:hover {
  background: rgba(136, 136, 160, 0.35);
}

.ge-combobox-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(136, 136, 160, 0.2) transparent;
}

/* -------------------------------------------------------------------------
   Combobox Open State
   ------------------------------------------------------------------------- */
.ge-combobox-open .ge-combobox-list {
  display: flex;
  animation: ge-scale-in 150ms ease;
}

/* -------------------------------------------------------------------------
   Combobox Item
   ------------------------------------------------------------------------- */
.ge-combobox-item {
  display: flex;
  align-items: center;
  padding: var(--ge-space-2, 0.5rem) var(--ge-space-3, 0.75rem);
  font-size: var(--ge-text-sm, 0.75rem);
  color: var(--ge-text-primary, #e8e8f0);
  border-radius: var(--ge-radius-sm, 0.25rem);
  cursor: pointer;
  user-select: none;
  transition: background 200ms ease, color 200ms ease;
}

.ge-combobox-item:hover {
  background: var(--ge-bg-secondary, #12121e);
}

.ge-combobox-item:active {
  background: var(--ge-bg-tertiary, #1a1a2e);
}

.ge-combobox-item:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: -2px;
}

/* Active item */
.ge-combobox-item-active {
  background: var(--ge-cyan-alpha-10, rgba(0, 240, 255, 0.1));
  color: var(--ge-cyan, #00f0ff);
}

.ge-combobox-item-active:hover {
  background: var(--ge-cyan-alpha-10, rgba(0, 240, 255, 0.15));
}

/* Disabled item */
.ge-combobox-item-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

/* -------------------------------------------------------------------------
   Combobox Empty State
   ------------------------------------------------------------------------- */
.ge-combobox-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ge-space-4, 1rem);
  font-size: var(--ge-text-sm, 0.75rem);
  color: var(--ge-text-muted, #555570);
  text-align: center;
}

/* -------------------------------------------------------------------------
   Combobox — Light Mode
   ------------------------------------------------------------------------- */
[data-theme="light"] .ge-combobox-input {
  color: #1a1a2e;
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555570' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

[data-theme="light"] .ge-combobox-input:hover {
  background-color: #fafafa;
  border-color: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .ge-combobox-input:focus,
[data-theme="light"] .ge-combobox-input:focus-visible {
  background-color: #ffffff;
  border-color: #008c96;
  box-shadow: 0 0 0 3px rgba(0, 140, 150, 0.12);
}

[data-theme="light"] .ge-combobox-list {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ge-combobox-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .ge-combobox-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .ge-combobox-list {
  scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

[data-theme="light"] .ge-combobox-item {
  color: #1a1a2e;
}

[data-theme="light"] .ge-combobox-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ge-combobox-item-active {
  background: rgba(0, 140, 150, 0.1);
  color: #008c96;
}

[data-theme="light"] .ge-combobox-empty {
  color: #9999aa;
}


/* ==========================================================================
   DATE PICKER (.ge-date-picker)
   ========================================================================== */

/* -------------------------------------------------------------------------
   Date Picker Container
   ------------------------------------------------------------------------- */
.ge-date-picker {
  position: relative;
  font-family: var(--ge-font-body, 'Inter', system-ui, sans-serif);
}

/* -------------------------------------------------------------------------
   Date Picker Input
   ------------------------------------------------------------------------- */
.ge-date-picker-input {
  display: block;
  width: 100%;
  height: var(--ge-input-height-md, 2.5rem);
  padding: 0 var(--ge-space-10, 2.5rem) 0 var(--ge-input-px, 0.75rem);
  font-family: var(--ge-font-body, 'Inter', system-ui, sans-serif);
  font-size: var(--ge-input-font-size, 0.75rem);
  font-weight: var(--ge-input-font-weight, 400);
  line-height: 1;
  color: var(--ge-input-color, #e8e8f0);
  background-color: var(--ge-input-bg, #0a0a12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238888a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  border: var(--ge-input-border-width, 1px) solid var(--ge-input-border, rgba(136, 136, 160, 0.18));
  border-radius: var(--ge-input-radius, 0.375rem);
  outline: none;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.ge-date-picker-input::placeholder {
  color: var(--ge-input-placeholder, #555570);
  opacity: 1;
}

.ge-date-picker-input:hover {
  background-color: var(--ge-input-bg-hover, #0e0e1a);
  border-color: var(--ge-input-border-hover, rgba(136, 136, 160, 0.28));
}

.ge-date-picker-input:focus,
.ge-date-picker-input:focus-visible {
  background-color: var(--ge-input-bg-focus, #0a0a14);
  border-color: var(--ge-input-border-focus, var(--ge-cyan, #00f0ff));
  box-shadow: 0 0 0 var(--ge-input-focus-ring-width, 3px) var(--ge-input-focus-ring-color, rgba(0, 240, 255, 0.15));
}

.ge-date-picker-input:disabled {
  background-color: var(--ge-input-bg-disabled, #0a0a12);
  opacity: var(--ge-input-disabled-opacity, 0.45);
  cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   Date Picker Dropdown
   ------------------------------------------------------------------------- */
.ge-date-picker-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: var(--ge-dropdown-z, 50);
  display: none;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 200ms ease, transform 200ms ease;
}

/* -------------------------------------------------------------------------
   Date Picker Open State
   ------------------------------------------------------------------------- */
.ge-date-picker-open .ge-date-picker-dropdown {
  display: block;
  opacity: 1;
  transform: scale(1);
  animation: ge-scale-in 150ms ease;
}

/* -------------------------------------------------------------------------
   Date Picker Range Mode
   ------------------------------------------------------------------------- */
.ge-date-picker-range {
  /* Used as a modifier on .ge-date-picker for range selection */
}

.ge-date-picker-range .ge-date-picker-input {
  /* Range inputs may be wider to accommodate "Start — End" text */
  min-width: 220px;
}

/* -------------------------------------------------------------------------
   Date Picker — Light Mode
   ------------------------------------------------------------------------- */
[data-theme="light"] .ge-date-picker-input {
  color: #1a1a2e;
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555570' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

[data-theme="light"] .ge-date-picker-input:hover {
  background-color: #fafafa;
  border-color: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .ge-date-picker-input:focus,
[data-theme="light"] .ge-date-picker-input:focus-visible {
  background-color: #ffffff;
  border-color: #008c96;
  box-shadow: 0 0 0 3px rgba(0, 140, 150, 0.12);
}
/* ==========================================================================
   GOD'S EYE DESIGN SYSTEM — Components Batch 2
   1. Hover Card
   2. Input Group
   3. Input OTP
   4. Menubar
   5. Resizable
   6. Sonner / Stacked Toasts
   7. Toggle Group
   8. Typography
   ========================================================================== */

/* ==========================================================================
   1. HOVER CARD (.ge-hover-card)
   ========================================================================== */

.ge-hover-card {
  position: relative;
  display: inline-block;
}

.ge-hover-card-trigger {
  cursor: pointer;
}

.ge-hover-card-content {
  position: absolute;
  z-index: 50;
  min-width: 280px;
  background: var(--ge-bg-primary, #0a0a0f);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  border-radius: var(--ge-radius-lg, 0.75rem);
  box-shadow: var(--ge-shadow-lg);
  padding: var(--ge-space-4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: all 200ms ease;
  pointer-events: none;
}

.ge-hover-card:hover .ge-hover-card-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Position: bottom (default) */
.ge-hover-card-content,
.ge-hover-card-content-bottom {
  top: calc(100% + 8px);
}

/* Position: top */
.ge-hover-card-content-top {
  bottom: calc(100% + 8px);
  top: auto;
}

/* Light mode */
[data-theme="light"] .ge-hover-card-content {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   2. INPUT GROUP (.ge-input-group)
   ========================================================================== */

.ge-input-group {
  display: flex;
  align-items: stretch;
}

.ge-input-group .ge-input {
  flex: 1;
  border-radius: 0;
}

.ge-input-group .ge-input:first-child {
  border-top-left-radius: var(--ge-radius-md, 0.5rem);
  border-bottom-left-radius: var(--ge-radius-md, 0.5rem);
}

.ge-input-group .ge-input:last-child {
  border-top-right-radius: var(--ge-radius-md, 0.5rem);
  border-bottom-right-radius: var(--ge-radius-md, 0.5rem);
}

.ge-input-group-prepend,
.ge-input-group-append {
  display: flex;
  align-items: center;
  padding: 0 var(--ge-space-3);
  background: var(--ge-bg-secondary, #12121a);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  font-size: 0.875rem;
  color: var(--ge-text-secondary, #9999aa);
  white-space: nowrap;
}

.ge-input-group-prepend {
  border-right: none;
  border-top-left-radius: var(--ge-radius-md, 0.5rem);
  border-bottom-left-radius: var(--ge-radius-md, 0.5rem);
}

.ge-input-group-append {
  border-left: none;
  border-top-right-radius: var(--ge-radius-md, 0.5rem);
  border-bottom-right-radius: var(--ge-radius-md, 0.5rem);
}

/* When prepend is before input, input loses left radius */
.ge-input-group-prepend + .ge-input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* When input is before append */
.ge-input-group .ge-input:has(+ .ge-input-group-append) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.ge-input-group .ge-btn {
  border-radius: 0;
}

.ge-input-group .ge-btn:first-child {
  border-top-left-radius: var(--ge-radius-md, 0.5rem);
  border-bottom-left-radius: var(--ge-radius-md, 0.5rem);
}

.ge-input-group .ge-btn:last-child {
  border-top-right-radius: var(--ge-radius-md, 0.5rem);
  border-bottom-right-radius: var(--ge-radius-md, 0.5rem);
}

/* Light mode */
[data-theme="light"] .ge-input-group-prepend,
[data-theme="light"] .ge-input-group-append {
  background: #f4f4f5;
  border-color: rgba(0, 0, 0, 0.1);
  color: #555;
}

/* ==========================================================================
   3. INPUT OTP (.ge-input-otp)
   ========================================================================== */

.ge-input-otp {
  display: flex;
  gap: var(--ge-space-2);
  align-items: center;
}

.ge-input-otp-slot {
  width: 48px;
  height: 56px;
  text-align: center;
  font-family: var(--ge-font-mono, ui-monospace, monospace);
  font-size: 1.5rem;
  background: var(--ge-bg-primary, #0a0a0f);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  border-radius: var(--ge-radius-md, 0.5rem);
  color: var(--ge-text-primary, #e8e8f0);
  caret-color: var(--ge-cyan);
  transition: all 200ms ease;
  outline: none;
}

.ge-input-otp-slot:focus {
  border-color: var(--ge-cyan);
  box-shadow: 0 0 0 3px var(--ge-cyan-alpha-10);
}

.ge-input-otp-slot-filled {
  border-color: var(--ge-cyan-alpha-50);
}

.ge-input-otp-separator {
  display: flex;
  align-items: center;
  color: var(--ge-text-muted, #666680);
  font-size: 1.5rem;
  padding: 0 var(--ge-space-1);
  user-select: none;
}

/* Size: small */
.ge-input-otp-sm .ge-input-otp-slot {
  width: 36px;
  height: 44px;
  font-size: 1.125rem;
}

.ge-input-otp-sm .ge-input-otp-separator {
  font-size: 1.125rem;
}

/* Size: large */
.ge-input-otp-lg .ge-input-otp-slot {
  width: 56px;
  height: 64px;
  font-size: 2rem;
}

.ge-input-otp-lg .ge-input-otp-separator {
  font-size: 2rem;
}

/* Light mode */
[data-theme="light"] .ge-input-otp-slot {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
  color: #1a1a2e;
}

[data-theme="light"] .ge-input-otp-slot:focus {
  border-color: var(--ge-cyan);
  box-shadow: 0 0 0 3px rgba(0, 200, 255, 0.1);
}

[data-theme="light"] .ge-input-otp-separator {
  color: #999;
}

/* ==========================================================================
   4. MENUBAR (.ge-menubar)
   ========================================================================== */

.ge-menubar {
  display: flex;
  align-items: center;
  padding: var(--ge-space-1);
  background: var(--ge-bg-secondary, #12121a);
  border-bottom: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  gap: var(--ge-space-1);
}

.ge-menubar-item {
  position: relative;
}

.ge-menubar-trigger {
  display: flex;
  align-items: center;
  padding: var(--ge-space-1) var(--ge-space-3);
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: var(--ge-radius-md, 0.5rem);
  transition: all 200ms ease;
  user-select: none;
  color: var(--ge-text-primary, #e8e8f0);
  background: transparent;
  border: none;
  white-space: nowrap;
}

.ge-menubar-trigger:hover {
  background: var(--ge-bg-tertiary, #1a1a2e);
}

.ge-menubar-trigger-active {
  background: var(--ge-bg-tertiary, #1a1a2e);
  color: var(--ge-cyan);
}

.ge-menubar-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--ge-bg-primary, #0a0a0f);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  border-radius: var(--ge-radius-md, 0.5rem);
  box-shadow: var(--ge-shadow-lg);
  padding: var(--ge-space-1) 0;
  z-index: 50;
  display: none;
}

.ge-menubar-item-active .ge-menubar-content {
  display: block;
}

.ge-menubar-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ge-space-2) var(--ge-space-3);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 200ms ease;
  color: var(--ge-text-primary, #e8e8f0);
}

.ge-menubar-menu-item:hover {
  background: var(--ge-bg-secondary, #12121a);
}

.ge-menubar-menu-item-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.ge-menubar-separator {
  height: 1px;
  background: var(--ge-border-default, rgba(136, 136, 160, 0.15));
  margin: var(--ge-space-1) 0;
}

.ge-menubar-shortcut {
  font-size: 0.75rem;
  color: var(--ge-text-muted, #666680);
  margin-left: auto;
  padding-left: var(--ge-space-4);
  font-family: var(--ge-font-mono, ui-monospace, monospace);
}

/* Light mode */
[data-theme="light"] .ge-menubar {
  background: #f8f8fa;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-menubar-trigger {
  color: #1a1a2e;
}

[data-theme="light"] .ge-menubar-trigger:hover {
  background: #ececf0;
}

[data-theme="light"] .ge-menubar-trigger-active {
  background: #ececf0;
  color: var(--ge-cyan);
}

[data-theme="light"] .ge-menubar-content {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-menubar-menu-item {
  color: #1a1a2e;
}

[data-theme="light"] .ge-menubar-menu-item:hover {
  background: #f4f4f5;
}

[data-theme="light"] .ge-menubar-separator {
  background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-menubar-shortcut {
  color: #999;
}

/* ==========================================================================
   5. RESIZABLE (.ge-resizable)
   ========================================================================== */

.ge-resizable {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ge-resizable-vertical {
  flex-direction: column;
}

.ge-resizable-panel {
  overflow: auto;
  min-width: 0;
  min-height: 0;
  flex-shrink: 0;
}

.ge-resizable-handle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: background 200ms ease;
}

.ge-resizable-handle:hover {
  background: var(--ge-cyan-alpha-10);
}

.ge-resizable-handle-horizontal {
  width: 4px;
  cursor: col-resize;
  flex-direction: column;
}

.ge-resizable-handle-vertical {
  height: 4px;
  cursor: row-resize;
  flex-direction: row;
}

.ge-resizable-handle-dot {
  width: 4px;
  height: 16px;
  border-radius: var(--ge-radius-full, 9999px);
  background: var(--ge-border-default, rgba(136, 136, 160, 0.15));
  transition: background 200ms ease;
}

.ge-resizable-handle-vertical .ge-resizable-handle-dot {
  width: 16px;
  height: 4px;
}

.ge-resizable-handle:hover .ge-resizable-handle-dot {
  background: var(--ge-cyan-alpha-50);
}

.ge-resizable-handle:active {
  background: var(--ge-cyan-alpha-10);
}

.ge-resizable-handle:active .ge-resizable-handle-dot {
  background: var(--ge-cyan);
}

/* Light mode */
[data-theme="light"] .ge-resizable-handle:hover {
  background: rgba(0, 150, 200, 0.06);
}

[data-theme="light"] .ge-resizable-handle-dot {
  background: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .ge-resizable-handle:hover .ge-resizable-handle-dot {
  background: rgba(0, 150, 200, 0.35);
}

[data-theme="light"] .ge-resizable-handle:active .ge-resizable-handle-dot {
  background: var(--ge-cyan);
}

/* ==========================================================================
   6. SONNER / STACKED TOASTS (.ge-sonner)
   ========================================================================== */

.ge-sonner {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-2);
  pointer-events: none;
  padding: var(--ge-space-4);
}

/* Position variants */
.ge-sonner-top-right {
  top: 0;
  right: 0;
}

.ge-sonner-top-left {
  top: 0;
  left: 0;
}

.ge-sonner-bottom-right {
  bottom: 0;
  right: 0;
}

.ge-sonner-bottom-left {
  bottom: 0;
  left: 0;
}

.ge-sonner-top-center {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.ge-sonner-bottom-center {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* Toast */
.ge-sonner-toast {
  pointer-events: auto;
  background: var(--ge-bg-primary, #0a0a0f);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  border-radius: var(--ge-radius-lg, 0.75rem);
  box-shadow: var(--ge-shadow-lg);
  padding: var(--ge-space-4);
  min-width: 320px;
  max-width: 420px;
  display: flex;
  gap: var(--ge-space-3);
  transition: all 300ms ease;
  align-items: flex-start;
}

/* Type variants */
.ge-sonner-toast-info {
  border-left: 3px solid var(--ge-cyan);
}

.ge-sonner-toast-success {
  border-left: 3px solid var(--ge-success);
}

.ge-sonner-toast-warning {
  border-left: 3px solid var(--ge-warning);
}

.ge-sonner-toast-error {
  border-left: 3px solid var(--ge-error);
}

.ge-sonner-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.ge-sonner-content {
  flex: 1;
  min-width: 0;
}

.ge-sonner-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ge-text-primary, #e8e8f0);
}

.ge-sonner-description {
  font-size: 0.75rem;
  color: var(--ge-text-secondary, #9999aa);
  margin-top: var(--ge-space-1);
}

.ge-sonner-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--ge-text-muted, #666680);
  cursor: pointer;
  padding: var(--ge-space-1);
  border-radius: var(--ge-radius-sm);
  transition: all 200ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ge-sonner-close:hover {
  background: var(--ge-bg-tertiary, #1a1a2e);
  color: var(--ge-text-primary, #e8e8f0);
}

.ge-sonner-action {
  margin-top: var(--ge-space-2);
}

/* Stacking effect */
.ge-sonner-toast:nth-child(2) {
  opacity: 0.8;
  transform: scale(0.95) translateY(-4px);
}

.ge-sonner-toast:nth-child(3) {
  opacity: 0.6;
  transform: scale(0.9) translateY(-8px);
}

.ge-sonner-toast:nth-child(n + 4) {
  opacity: 0;
  pointer-events: none;
}

/* Light mode */
[data-theme="light"] .ge-sonner-toast {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-sonner-title {
  color: #1a1a2e;
}

[data-theme="light"] .ge-sonner-description {
  color: #666;
}

[data-theme="light"] .ge-sonner-close {
  color: #999;
}

[data-theme="light"] .ge-sonner-close:hover {
  background: #f4f4f5;
  color: #1a1a2e;
}

/* ==========================================================================
   7. TOGGLE GROUP (.ge-toggle-group)
   ========================================================================== */

.ge-toggle-group {
  display: inline-flex;
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  border-radius: var(--ge-radius-md, 0.5rem);
  overflow: hidden;
}

.ge-toggle-group-item {
  padding: var(--ge-space-2) var(--ge-space-4);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 200ms ease;
  border: none;
  border-right: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  background: transparent;
  color: var(--ge-text-secondary, #9999aa);
  white-space: nowrap;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ge-space-2);
}

.ge-toggle-group-item:last-child {
  border-right: none;
}

.ge-toggle-group-item:hover {
  background: var(--ge-bg-secondary, #12121a);
  color: var(--ge-text-primary, #e8e8f0);
}

.ge-toggle-group-item:active {
  background: var(--ge-bg-tertiary, #1a1a2e);
}

.ge-toggle-group-item-active {
  background: var(--ge-cyan-alpha-10);
  color: var(--ge-cyan);
  font-weight: 500;
}

.ge-toggle-group-item-active:hover {
  background: var(--ge-cyan-alpha-10);
  color: var(--ge-cyan);
}

.ge-toggle-group-item:focus-visible {
  outline: 2px solid var(--ge-cyan);
  outline-offset: -2px;
  z-index: 1;
}

.ge-toggle-group-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Size: small */
.ge-toggle-group-sm .ge-toggle-group-item {
  padding: var(--ge-space-1) var(--ge-space-3);
  font-size: 0.75rem;
}

/* Size: large */
.ge-toggle-group-lg .ge-toggle-group-item {
  padding: var(--ge-space-3) var(--ge-space-6);
  font-size: 1rem;
}

/* Vertical */
.ge-toggle-group-vertical {
  flex-direction: column;
}

.ge-toggle-group-vertical .ge-toggle-group-item {
  border-right: none;
  border-bottom: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
}

.ge-toggle-group-vertical .ge-toggle-group-item:last-child {
  border-bottom: none;
}

/* Light mode */
[data-theme="light"] .ge-toggle-group {
  border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .ge-toggle-group-item {
  color: #666;
  border-right-color: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .ge-toggle-group-item:hover {
  background: #f4f4f5;
  color: #1a1a2e;
}

[data-theme="light"] .ge-toggle-group-item-active {
  background: rgba(0, 200, 255, 0.08);
  color: var(--ge-cyan);
}

[data-theme="light"] .ge-toggle-group-vertical .ge-toggle-group-item {
  border-bottom-color: rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   8. TYPOGRAPHY (.ge-typography)
   ========================================================================== */

.ge-typography {
  color: var(--ge-text-primary, #e8e8f0);
  line-height: 1.7;
  font-size: 1rem;
}

.ge-typography h1 {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: var(--ge-space-6);
  color: var(--ge-text-primary, #e8e8f0);
  letter-spacing: -0.025em;
}

.ge-typography h2 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  margin-top: var(--ge-space-8);
  margin-bottom: var(--ge-space-4);
  color: var(--ge-text-primary, #e8e8f0);
  letter-spacing: -0.02em;
}

.ge-typography h3 {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  margin-top: var(--ge-space-6);
  margin-bottom: var(--ge-space-3);
  color: var(--ge-text-primary, #e8e8f0);
}

.ge-typography h4 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  margin-top: var(--ge-space-6);
  margin-bottom: var(--ge-space-3);
  color: var(--ge-text-primary, #e8e8f0);
}

.ge-typography h5 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin-top: var(--ge-space-4);
  margin-bottom: var(--ge-space-2);
  color: var(--ge-text-primary, #e8e8f0);
}

.ge-typography h6 {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  margin-top: var(--ge-space-4);
  margin-bottom: var(--ge-space-2);
  color: var(--ge-text-secondary, #9999aa);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ge-typography p {
  margin-top: 0;
  margin-bottom: var(--ge-space-4);
  line-height: 1.7;
}

.ge-typography a {
  color: var(--ge-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: filter 200ms ease;
}

.ge-typography a:hover {
  filter: brightness(1.2);
}

.ge-typography strong {
  font-weight: 600;
  color: var(--ge-text-primary, #e8e8f0);
}

.ge-typography em {
  font-style: italic;
}

.ge-typography blockquote {
  border-left: 3px solid var(--ge-cyan);
  padding-left: var(--ge-space-4);
  color: var(--ge-text-secondary, #9999aa);
  margin: var(--ge-space-6) 0;
  font-style: italic;
}

.ge-typography blockquote p:last-child {
  margin-bottom: 0;
}

.ge-typography ul,
.ge-typography ol {
  padding-left: var(--ge-space-6);
  margin-top: 0;
  margin-bottom: var(--ge-space-4);
}

.ge-typography li {
  margin-bottom: var(--ge-space-2);
}

.ge-typography li:last-child {
  margin-bottom: 0;
}

.ge-typography hr {
  border: none;
  border-top: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  margin: var(--ge-space-8) 0;
}

.ge-typography img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ge-radius-md, 0.5rem);
}

.ge-typography table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--ge-space-4);
}

.ge-typography table th,
.ge-typography table td {
  padding: var(--ge-space-2) var(--ge-space-3);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  text-align: left;
}

.ge-typography table th {
  font-weight: 600;
  background: var(--ge-bg-secondary, #12121a);
  color: var(--ge-text-primary, #e8e8f0);
  font-size: 0.875rem;
}

.ge-typography table td {
  font-size: 0.875rem;
}

.ge-typography table tr:nth-child(even) {
  background: var(--ge-bg-secondary, #12121a);
}

.ge-typography code {
  background: var(--ge-bg-tertiary, #1a1a2e);
  padding: 0.15em 0.4em;
  border-radius: var(--ge-radius-sm);
  font-family: var(--ge-font-mono, ui-monospace, monospace);
  font-size: 0.875em;
  color: var(--ge-cyan);
}

.ge-typography pre {
  background: var(--ge-bg-tertiary, #1a1a2e);
  padding: var(--ge-space-4);
  border-radius: var(--ge-radius-md, 0.5rem);
  overflow-x: auto;
  margin-top: 0;
  margin-bottom: var(--ge-space-4);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
}

.ge-typography pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 0.875rem;
  color: var(--ge-text-primary, #e8e8f0);
}

/* Size: small */
.ge-typography-sm {
  font-size: 0.875rem;
  line-height: 1.6;
}

.ge-typography-sm h1 { font-size: 1.75rem; margin-bottom: var(--ge-space-4); }
.ge-typography-sm h2 { font-size: 1.375rem; margin-bottom: var(--ge-space-3); }
.ge-typography-sm h3 { font-size: 1.125rem; margin-bottom: var(--ge-space-2); }
.ge-typography-sm h4 { font-size: 1rem; }
.ge-typography-sm h5 { font-size: 0.875rem; }
.ge-typography-sm h6 { font-size: 0.75rem; }
.ge-typography-sm p { margin-bottom: var(--ge-space-3); }
.ge-typography-sm blockquote { margin: var(--ge-space-4) 0; }
.ge-typography-sm hr { margin: var(--ge-space-6) 0; }

/* Size: large */
.ge-typography-lg {
  font-size: 1.125rem;
  line-height: 1.8;
}

.ge-typography-lg h1 { font-size: 3rem; margin-bottom: var(--ge-space-8); }
.ge-typography-lg h2 { font-size: 2.25rem; margin-bottom: var(--ge-space-6); }
.ge-typography-lg h3 { font-size: 1.75rem; margin-bottom: var(--ge-space-4); }
.ge-typography-lg h4 { font-size: 1.375rem; }
.ge-typography-lg h5 { font-size: 1.125rem; }
.ge-typography-lg h6 { font-size: 1rem; }
.ge-typography-lg p { margin-bottom: var(--ge-space-6); }
.ge-typography-lg blockquote { margin: var(--ge-space-8) 0; padding-left: var(--ge-space-6); }
.ge-typography-lg hr { margin: var(--ge-space-10) 0; }

/* Light mode */
[data-theme="light"] .ge-typography {
  color: #1a1a2e;
}

[data-theme="light"] .ge-typography h1,
[data-theme="light"] .ge-typography h2,
[data-theme="light"] .ge-typography h3,
[data-theme="light"] .ge-typography h4,
[data-theme="light"] .ge-typography h5,
[data-theme="light"] .ge-typography strong {
  color: #1a1a2e;
}

[data-theme="light"] .ge-typography h6 {
  color: #666;
}

[data-theme="light"] .ge-typography blockquote {
  color: #555;
}

[data-theme="light"] .ge-typography hr {
  border-top-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ge-typography code {
  background: #f0f0f4;
  color: var(--ge-cyan);
}

[data-theme="light"] .ge-typography pre {
  background: #f4f4f8;
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-typography pre code {
  color: #1a1a2e;
}

[data-theme="light"] .ge-typography table th {
  background: #f4f4f5;
  color: #1a1a2e;
}

[data-theme="light"] .ge-typography table th,
[data-theme="light"] .ge-typography table td {
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-typography table tr:nth-child(even) {
  background: #f9f9fb;
}
/* ==========================================================================
   God's Eye Design System — Components Batch 3
   Social Media & Video Components
   ========================================================================== */

/* ==========================================================================
   SOCIAL MEDIA COMPONENTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SOCIAL POST (.ge-social-post)
   -------------------------------------------------------------------------- */

.ge-social-post {
  background: var(--ge-bg-primary, #0a0a0f);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  border-radius: var(--ge-radius-lg, 0.75rem);
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.ge-social-post:hover {
  border-color: rgba(136, 136, 160, 0.25);
}

.ge-social-post-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ge-space-3);
  padding: var(--ge-space-4) var(--ge-space-4) 0;
}

.ge-social-post-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--ge-radius-full, 9999px);
  overflow: hidden;
  flex-shrink: 0;
}

.ge-social-post-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ge-social-post-author {
  display: flex;
  flex-direction: column;
}

.ge-social-post-name {
  font-weight: 600;
  font-size: var(--ge-text-sm, 0.875rem);
  color: var(--ge-text-primary, #e8e8f0);
}

.ge-social-post-handle {
  font-size: var(--ge-text-xs, 0.75rem);
  color: var(--ge-text-muted, #666680);
}

.ge-social-post-time {
  margin-left: auto;
  font-size: var(--ge-text-xs, 0.75rem);
  color: var(--ge-text-muted, #666680);
}

.ge-social-post-body {
  padding: var(--ge-space-4);
  font-size: var(--ge-text-sm, 0.875rem);
  line-height: 1.6;
  color: var(--ge-text-primary, #e8e8f0);
}

.ge-social-post-media {
  width: 100%;
  overflow: hidden;
}

.ge-social-post-media img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.ge-social-post-media-grid {
  display: grid;
  gap: 2px;
}

.ge-social-post-media-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.ge-social-post-media-grid-3 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
}

.ge-social-post-media-grid-3 > :first-child {
  grid-column: 1 / -1;
}

.ge-social-post-media-grid-4 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.ge-social-post-media-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ge-social-post-actions {
  display: flex;
  flex-direction: row;
  padding: var(--ge-space-3) var(--ge-space-4);
  gap: var(--ge-space-6);
  border-top: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
}

.ge-social-post-action {
  display: flex;
  align-items: center;
  gap: var(--ge-space-2);
  font-size: var(--ge-text-xs, 0.75rem);
  color: var(--ge-text-muted, #666680);
  cursor: pointer;
  transition: color 200ms ease;
  background: none;
  border: none;
  padding: 0;
}

.ge-social-post-action:hover {
  color: var(--ge-cyan);
}

.ge-social-post-action:focus-visible {
  outline: 2px solid var(--ge-cyan);
  outline-offset: 2px;
  border-radius: var(--ge-radius-sm);
}

.ge-social-post-action:active {
  opacity: 0.8;
}

.ge-social-post-action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ge-social-post-action-liked {
  color: var(--ge-error);
}

.ge-social-post-action-liked:hover {
  color: var(--ge-error);
  opacity: 0.8;
}

.ge-social-post-action-retweeted {
  color: var(--ge-success);
}

.ge-social-post-action-retweeted:hover {
  color: var(--ge-success);
  opacity: 0.8;
}

.ge-social-post-verified {
  display: inline-flex;
  align-items: center;
  font-size: var(--ge-text-xs, 0.75rem);
  background: rgba(var(--ge-cyan-rgb, 0, 200, 255), 0.1);
  color: var(--ge-cyan);
  padding: 1px 6px;
  border-radius: var(--ge-radius-full, 9999px);
  font-weight: 500;
}

.ge-social-post-thread-line {
  border-left: 2px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  margin-left: calc(var(--ge-space-4) + 20px);
  padding-left: var(--ge-space-4);
}


/* --------------------------------------------------------------------------
   2. SOCIAL FEED (.ge-social-feed)
   -------------------------------------------------------------------------- */

.ge-social-feed {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-4);
}

.ge-social-feed-header {
  position: sticky;
  top: 0;
  background: var(--ge-bg-primary, #0a0a0f);
  padding: var(--ge-space-4);
  border-bottom: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  z-index: 10;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ge-social-feed-tabs {
  display: flex;
  flex-direction: row;
  gap: var(--ge-space-1);
}

.ge-social-feed-tab {
  padding: var(--ge-space-2) var(--ge-space-4);
  cursor: pointer;
  font-size: var(--ge-text-sm, 0.875rem);
  border-radius: var(--ge-radius-full, 9999px);
  transition: background 200ms ease, color 200ms ease;
  color: var(--ge-text-secondary, #9999aa);
  background: transparent;
  border: none;
}

.ge-social-feed-tab:hover {
  background: rgba(136, 136, 160, 0.1);
  color: var(--ge-text-primary, #e8e8f0);
}

.ge-social-feed-tab:focus-visible {
  outline: 2px solid var(--ge-cyan);
  outline-offset: 2px;
}

.ge-social-feed-tab:active {
  opacity: 0.8;
}

.ge-social-feed-tab:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ge-social-feed-tab-active {
  background: rgba(var(--ge-cyan-rgb, 0, 200, 255), 0.1);
  color: var(--ge-cyan);
  font-weight: 500;
}

.ge-social-feed-compose {
  padding: var(--ge-space-4);
  border-bottom: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  display: flex;
  flex-direction: row;
  gap: var(--ge-space-3);
}

.ge-social-feed-compose-input {
  flex: 1;
  background: transparent;
  border: none;
  resize: none;
  font-size: var(--ge-text-sm, 0.875rem);
  color: var(--ge-text-primary, #e8e8f0);
  outline: none;
  font-family: inherit;
}

.ge-social-feed-compose-input::placeholder {
  color: var(--ge-text-muted, #666680);
}

.ge-social-feed-load-more {
  padding: var(--ge-space-4);
  text-align: center;
  cursor: pointer;
  color: var(--ge-cyan);
  transition: opacity 200ms ease;
  font-size: var(--ge-text-sm, 0.875rem);
  background: none;
  border: none;
  width: 100%;
}

.ge-social-feed-load-more:hover {
  opacity: 0.8;
}

.ge-social-feed-load-more:focus-visible {
  outline: 2px solid var(--ge-cyan);
  outline-offset: -2px;
  border-radius: var(--ge-radius-md, 0.5rem);
}

.ge-social-feed-load-more:active {
  opacity: 0.6;
}

.ge-social-feed-load-more:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* --------------------------------------------------------------------------
   3. SOCIAL PROFILE (.ge-social-profile)
   -------------------------------------------------------------------------- */

.ge-social-profile {
  background: var(--ge-bg-primary, #0a0a0f);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  border-radius: var(--ge-radius-lg, 0.75rem);
  overflow: hidden;
}

.ge-social-profile-banner {
  height: 120px;
  background: var(--ge-bg-secondary, #12121a);
  overflow: hidden;
  position: relative;
}

.ge-social-profile-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ge-social-profile-avatar-wrapper {
  position: relative;
  margin-top: -40px;
  padding-left: var(--ge-space-4);
}

.ge-social-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--ge-radius-full, 9999px);
  border: 3px solid var(--ge-bg-primary, #0a0a0f);
  overflow: hidden;
}

.ge-social-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ge-social-profile-info {
  padding: var(--ge-space-4);
}

.ge-social-profile-name {
  font-family: var(--ge-font-display, inherit);
  font-weight: 700;
  font-size: var(--ge-text-lg, 1.125rem);
  color: var(--ge-text-primary, #e8e8f0);
}

.ge-social-profile-handle {
  font-size: var(--ge-text-sm, 0.875rem);
  color: var(--ge-text-muted, #666680);
}

.ge-social-profile-bio {
  font-size: var(--ge-text-sm, 0.875rem);
  color: var(--ge-text-secondary, #9999aa);
  margin-top: var(--ge-space-2);
  line-height: 1.5;
}

.ge-social-profile-stats {
  display: flex;
  flex-direction: row;
  gap: var(--ge-space-6);
  margin-top: var(--ge-space-3);
}

.ge-social-profile-stat {
  display: flex;
  flex-direction: column;
}

.ge-social-profile-stat-value {
  font-weight: 700;
  font-family: var(--ge-font-mono, monospace);
  color: var(--ge-text-primary, #e8e8f0);
}

.ge-social-profile-stat-label {
  font-size: var(--ge-text-xs, 0.75rem);
  color: var(--ge-text-muted, #666680);
}

.ge-social-profile-actions {
  display: flex;
  flex-direction: row;
  gap: var(--ge-space-2);
  margin-top: var(--ge-space-4);
}

.ge-social-profile-follow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ge-space-2) var(--ge-space-6);
  border-radius: var(--ge-radius-full, 9999px);
  font-size: var(--ge-text-sm, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
  background: var(--ge-cyan);
  color: var(--ge-bg-primary, #0a0a0f);
  border: 1px solid var(--ge-cyan);
}

.ge-social-profile-follow-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.ge-social-profile-follow-btn:active {
  transform: translateY(0);
  opacity: 0.8;
}

.ge-social-profile-follow-btn:focus-visible {
  outline: 2px solid var(--ge-cyan);
  outline-offset: 2px;
}

.ge-social-profile-follow-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.ge-social-profile-following {
  background: transparent;
  color: var(--ge-text-primary, #e8e8f0);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
}

.ge-social-profile-following:hover {
  border-color: var(--ge-error);
  color: var(--ge-error);
  opacity: 1;
}


/* --------------------------------------------------------------------------
   4. SOCIAL STORY (.ge-social-story)
   -------------------------------------------------------------------------- */

.ge-social-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ge-space-2);
  cursor: pointer;
}

.ge-social-story-ring {
  width: 64px;
  height: 64px;
  border-radius: var(--ge-radius-full, 9999px);
  padding: 2px;
  background: linear-gradient(135deg, var(--ge-cyan), var(--ge-magenta));
  transition: transform 200ms ease, opacity 200ms ease;
}

.ge-social-story:hover .ge-social-story-ring {
  transform: scale(1.05);
}

.ge-social-story:active .ge-social-story-ring {
  transform: scale(0.98);
}

.ge-social-story-ring-seen {
  background: linear-gradient(135deg, var(--ge-text-muted, #666680), rgba(136, 136, 160, 0.4));
}

.ge-social-story-avatar {
  width: 100%;
  height: 100%;
  border-radius: var(--ge-radius-full, 9999px);
  border: 2px solid var(--ge-bg-primary, #0a0a0f);
  overflow: hidden;
}

.ge-social-story-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ge-social-story-name {
  font-size: var(--ge-text-xs, 0.75rem);
  color: var(--ge-text-secondary, #9999aa);
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.ge-social-stories {
  display: flex;
  flex-direction: row;
  gap: var(--ge-space-4);
  overflow-x: auto;
  padding: var(--ge-space-2);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ge-social-stories::-webkit-scrollbar {
  display: none;
}


/* --------------------------------------------------------------------------
   5. SOCIAL COMMENT (.ge-social-comment)
   -------------------------------------------------------------------------- */

.ge-social-comment {
  display: flex;
  flex-direction: row;
  gap: var(--ge-space-3);
  padding: var(--ge-space-3);
}

.ge-social-comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--ge-radius-full, 9999px);
  flex-shrink: 0;
  overflow: hidden;
}

.ge-social-comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ge-social-comment-content {
  flex: 1;
}

.ge-social-comment-author {
  font-weight: 600;
  font-size: var(--ge-text-sm, 0.875rem);
  color: var(--ge-text-primary, #e8e8f0);
  display: inline;
  margin-right: var(--ge-space-2);
}

.ge-social-comment-text {
  font-size: var(--ge-text-sm, 0.875rem);
  color: var(--ge-text-primary, #e8e8f0);
  display: inline;
  line-height: 1.5;
}

.ge-social-comment-meta {
  display: flex;
  flex-direction: row;
  gap: var(--ge-space-4);
  margin-top: var(--ge-space-1);
  font-size: var(--ge-text-xs, 0.75rem);
  color: var(--ge-text-muted, #666680);
}

.ge-social-comment-action {
  cursor: pointer;
  transition: color 200ms ease;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

.ge-social-comment-action:hover {
  color: var(--ge-cyan);
}

.ge-social-comment-action:focus-visible {
  outline: 2px solid var(--ge-cyan);
  outline-offset: 2px;
  border-radius: var(--ge-radius-sm);
}

.ge-social-comment-action:active {
  opacity: 0.8;
}

.ge-social-comment-action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ge-social-comment-replies {
  margin-left: var(--ge-space-10);
  border-left: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
}

.ge-social-comment-liked {
  color: var(--ge-error);
}


/* --------------------------------------------------------------------------
   6. SOCIAL MESSAGE (.ge-social-message)
   -------------------------------------------------------------------------- */

.ge-social-message {
  display: flex;
  flex-direction: row;
  gap: var(--ge-space-2);
  padding: var(--ge-space-1);
  max-width: 70%;
}

.ge-social-message-sent {
  margin-left: auto;
  flex-direction: row-reverse;
}

.ge-social-message-bubble {
  padding: var(--ge-space-3);
  border-radius: var(--ge-radius-lg, 0.75rem);
  font-size: var(--ge-text-sm, 0.875rem);
  line-height: 1.5;
}

.ge-social-message-received .ge-social-message-bubble {
  background: var(--ge-bg-secondary, #12121a);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  color: var(--ge-text-primary, #e8e8f0);
}

.ge-social-message-sent .ge-social-message-bubble {
  background: var(--ge-cyan);
  color: #0a0a0f;
}

.ge-social-message-time {
  font-size: var(--ge-text-xs, 0.75rem);
  color: var(--ge-text-muted, #666680);
  align-self: flex-end;
  white-space: nowrap;
}

.ge-social-message-group {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-1);
}

.ge-social-messages {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-2);
  padding: var(--ge-space-4);
}


/* ==========================================================================
   VIDEO COMPONENTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   7. VIDEO PLAYER (.ge-video)
   -------------------------------------------------------------------------- */

.ge-video {
  position: relative;
  background: #000;
  border-radius: var(--ge-radius-lg, 0.75rem);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.ge-video video,
.ge-video iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
}

.ge-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 200ms ease;
  cursor: pointer;
  opacity: 0;
}

.ge-video:hover .ge-video-overlay {
  opacity: 1;
}

.ge-video-play-btn {
  width: 64px;
  height: 64px;
  border-radius: var(--ge-radius-full, 9999px);
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms ease, background 200ms ease;
  border: none;
  cursor: pointer;
  color: #0a0a0f;
}

.ge-video-play-btn:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 1);
}

.ge-video-play-btn:active {
  transform: scale(1.0);
}

.ge-video-play-btn:focus-visible {
  outline: 2px solid var(--ge-cyan);
  outline-offset: 2px;
}

.ge-video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--ge-space-3);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  display: flex;
  align-items: center;
  gap: var(--ge-space-3);
  opacity: 0;
  transition: opacity 200ms ease;
}

.ge-video:hover .ge-video-controls {
  opacity: 1;
}

.ge-video-progress {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--ge-radius-full, 9999px);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.ge-video-progress:hover {
  height: 6px;
}

.ge-video-progress-bar {
  height: 100%;
  background: var(--ge-cyan);
  border-radius: var(--ge-radius-full, 9999px);
  transition: width 100ms linear;
}

.ge-video-time {
  font-size: var(--ge-text-xs, 0.75rem);
  font-family: var(--ge-font-mono, monospace);
  color: #fff;
  white-space: nowrap;
}

.ge-video-btn {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: var(--ge-space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 200ms ease, transform 200ms ease;
}

.ge-video-btn:hover {
  opacity: 0.8;
}

.ge-video-btn:focus-visible {
  outline: 2px solid var(--ge-cyan);
  outline-offset: 2px;
  border-radius: var(--ge-radius-sm);
}

.ge-video-btn:active {
  opacity: 0.6;
}

.ge-video-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Size variants */
.ge-video-sm .ge-video-play-btn {
  width: 48px;
  height: 48px;
}

.ge-video-sm .ge-video-controls {
  padding: var(--ge-space-2);
  gap: var(--ge-space-2);
}

.ge-video-lg .ge-video-play-btn {
  width: 80px;
  height: 80px;
}

.ge-video-lg .ge-video-progress {
  height: 6px;
}

.ge-video-lg .ge-video-progress:hover {
  height: 8px;
}


/* --------------------------------------------------------------------------
   8. VIDEO CARD (.ge-video-card)
   -------------------------------------------------------------------------- */

.ge-video-card {
  background: var(--ge-bg-primary, #0a0a0f);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  border-radius: var(--ge-radius-lg, 0.75rem);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  cursor: pointer;
}

.ge-video-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ge-shadow-lg);
  border-color: rgba(136, 136, 160, 0.25);
}

.ge-video-card:active {
  transform: translateY(0);
}

.ge-video-card:focus-visible {
  outline: 2px solid var(--ge-cyan);
  outline-offset: 2px;
}

.ge-video-card-thumbnail {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.ge-video-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.ge-video-card:hover .ge-video-card-thumbnail img {
  transform: scale(1.05);
}

.ge-video-card-duration {
  position: absolute;
  bottom: var(--ge-space-2);
  right: var(--ge-space-2);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-family: var(--ge-font-mono, monospace);
  font-size: var(--ge-text-xs, 0.75rem);
  padding: 2px 6px;
  border-radius: var(--ge-radius-sm);
  line-height: 1;
}

.ge-video-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 200ms ease;
  background: rgba(0, 0, 0, 0.3);
}

.ge-video-card:hover .ge-video-card-play {
  opacity: 1;
}

.ge-video-card-body {
  padding: var(--ge-space-3);
}

.ge-video-card-title {
  font-weight: 600;
  font-size: var(--ge-text-sm, 0.875rem);
  color: var(--ge-text-primary, #e8e8f0);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--ge-space-1);
  line-height: 1.4;
}

.ge-video-card-channel {
  font-size: var(--ge-text-xs, 0.75rem);
  color: var(--ge-text-secondary, #9999aa);
}

.ge-video-card-meta {
  font-size: var(--ge-text-xs, 0.75rem);
  color: var(--ge-text-muted, #666680);
  display: flex;
  flex-direction: row;
  gap: var(--ge-space-2);
  margin-top: var(--ge-space-1);
}


/* --------------------------------------------------------------------------
   9. VIDEO GRID (.ge-video-grid)
   -------------------------------------------------------------------------- */

.ge-video-grid {
  display: grid;
  gap: var(--ge-space-4);
}

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

.ge-video-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.ge-video-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .ge-video-grid-3,
  .ge-video-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .ge-video-grid-2,
  .ge-video-grid-3,
  .ge-video-grid-4 {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   10. VIDEO PLAYLIST (.ge-video-playlist)
   -------------------------------------------------------------------------- */

.ge-video-playlist {
  background: var(--ge-bg-primary, #0a0a0f);
  border: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  border-radius: var(--ge-radius-lg, 0.75rem);
  overflow: hidden;
}

.ge-video-playlist-header {
  padding: var(--ge-space-4);
  border-bottom: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
  font-weight: 600;
  color: var(--ge-text-primary, #e8e8f0);
}

.ge-video-playlist-items {
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(136, 136, 160, 0.3) transparent;
}

.ge-video-playlist-items::-webkit-scrollbar {
  width: 6px;
}

.ge-video-playlist-items::-webkit-scrollbar-track {
  background: transparent;
}

.ge-video-playlist-items::-webkit-scrollbar-thumb {
  background: rgba(136, 136, 160, 0.3);
  border-radius: var(--ge-radius-full, 9999px);
}

.ge-video-playlist-item {
  display: flex;
  flex-direction: row;
  gap: var(--ge-space-3);
  padding: var(--ge-space-3);
  cursor: pointer;
  transition: background 200ms ease;
  border-bottom: 1px solid var(--ge-border-default, rgba(136, 136, 160, 0.15));
}

.ge-video-playlist-item:last-child {
  border-bottom: none;
}

.ge-video-playlist-item:hover {
  background: var(--ge-bg-secondary, #12121a);
}

.ge-video-playlist-item:focus-visible {
  outline: 2px solid var(--ge-cyan);
  outline-offset: -2px;
}

.ge-video-playlist-item:active {
  background: var(--ge-bg-tertiary, #1a1a2e);
}

.ge-video-playlist-item-active {
  background: rgba(var(--ge-cyan-rgb, 0, 200, 255), 0.1);
  border-left: 3px solid var(--ge-cyan);
}

.ge-video-playlist-item-active:hover {
  background: rgba(var(--ge-cyan-rgb, 0, 200, 255), 0.15);
}

.ge-video-playlist-item-thumb {
  width: 120px;
  aspect-ratio: 16 / 9;
  border-radius: var(--ge-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.ge-video-playlist-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ge-video-playlist-item-info {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-1);
  flex: 1;
  min-width: 0;
}

.ge-video-playlist-item-title {
  font-size: var(--ge-text-sm, 0.875rem);
  font-weight: 500;
  color: var(--ge-text-primary, #e8e8f0);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.ge-video-playlist-item-meta {
  font-size: var(--ge-text-xs, 0.75rem);
  color: var(--ge-text-muted, #666680);
}

.ge-video-playlist-item-duration {
  font-size: var(--ge-text-xs, 0.75rem);
  font-family: var(--ge-font-mono, monospace);
  color: var(--ge-text-muted, #666680);
}

.ge-video-playlist-item-playing {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.ge-video-playlist-item-playing span {
  display: block;
  width: 3px;
  background: var(--ge-cyan);
  border-radius: 1px;
  animation: ge-playlist-bar 0.8s ease-in-out infinite alternate;
}

.ge-video-playlist-item-playing span:nth-child(1) {
  height: 40%;
  animation-delay: 0s;
}

.ge-video-playlist-item-playing span:nth-child(2) {
  height: 70%;
  animation-delay: 0.2s;
}

.ge-video-playlist-item-playing span:nth-child(3) {
  height: 50%;
  animation-delay: 0.4s;
}

@keyframes ge-playlist-bar {
  0% {
    height: 30%;
  }
  100% {
    height: 100%;
  }
}


/* --------------------------------------------------------------------------
   11. VIDEO GALLERY (.ge-video-gallery)
   -------------------------------------------------------------------------- */

.ge-video-gallery {
  display: grid;
  gap: var(--ge-space-4);
}

.ge-video-gallery-main {
  aspect-ratio: 16 / 9;
  border-radius: var(--ge-radius-lg, 0.75rem);
  overflow: hidden;
  background: #000;
}

.ge-video-gallery-main video,
.ge-video-gallery-main iframe,
.ge-video-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ge-video-gallery-thumbs {
  display: flex;
  gap: var(--ge-space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ge-video-gallery-thumbs::-webkit-scrollbar {
  display: none;
}

.ge-video-gallery-thumb {
  width: 120px;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--ge-radius-md, 0.5rem);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 200ms ease, border-color 200ms ease;
  border: 2px solid transparent;
}

.ge-video-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ge-video-gallery-thumb:hover {
  opacity: 1;
}

.ge-video-gallery-thumb:focus-visible {
  outline: 2px solid var(--ge-cyan);
  outline-offset: 2px;
  opacity: 1;
}

.ge-video-gallery-thumb:active {
  opacity: 0.8;
}

.ge-video-gallery-thumb-active {
  opacity: 1;
  border-color: var(--ge-cyan);
}


/* ==========================================================================
   LIGHT MODE OVERRIDES
   ========================================================================== */

[data-theme="light"] .ge-social-post {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ge-social-post:hover {
  border-color: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .ge-social-post-name {
  color: #1a1a2e;
}

[data-theme="light"] .ge-social-post-handle,
[data-theme="light"] .ge-social-post-time {
  color: #666;
}

[data-theme="light"] .ge-social-post-body {
  color: #1a1a2e;
}

[data-theme="light"] .ge-social-post-actions {
  border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-social-post-action {
  color: #666;
}

[data-theme="light"] .ge-social-post-verified {
  background: rgba(var(--ge-cyan-rgb, 0, 200, 255), 0.08);
}

[data-theme="light"] .ge-social-post-thread-line {
  border-left-color: rgba(0, 0, 0, 0.1);
}

/* Light — Social Feed */
[data-theme="light"] .ge-social-feed-header {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-social-feed-tab {
  color: #666;
}

[data-theme="light"] .ge-social-feed-tab:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1a1a2e;
}

[data-theme="light"] .ge-social-feed-tab-active {
  background: rgba(var(--ge-cyan-rgb, 0, 200, 255), 0.08);
}

[data-theme="light"] .ge-social-feed-compose {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-social-feed-compose-input {
  color: #1a1a2e;
}

[data-theme="light"] .ge-social-feed-compose-input::placeholder {
  color: #999;
}

/* Light — Social Profile */
[data-theme="light"] .ge-social-profile {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ge-social-profile-banner {
  background: #f0f0f5;
}

[data-theme="light"] .ge-social-profile-avatar {
  border-color: #fff;
}

[data-theme="light"] .ge-social-profile-name {
  color: #1a1a2e;
}

[data-theme="light"] .ge-social-profile-handle {
  color: #666;
}

[data-theme="light"] .ge-social-profile-bio {
  color: #444;
}

[data-theme="light"] .ge-social-profile-stat-value {
  color: #1a1a2e;
}

[data-theme="light"] .ge-social-profile-stat-label {
  color: #666;
}

[data-theme="light"] .ge-social-profile-follow-btn {
  color: #fff;
}

[data-theme="light"] .ge-social-profile-following {
  background: transparent;
  color: #1a1a2e;
  border-color: rgba(0, 0, 0, 0.15);
}

/* Light — Social Story */
[data-theme="light"] .ge-social-story-avatar {
  border-color: #fff;
}

[data-theme="light"] .ge-social-story-name {
  color: #444;
}

[data-theme="light"] .ge-social-story-ring-seen {
  background: linear-gradient(135deg, #ccc, #ddd);
}

/* Light — Social Comment */
[data-theme="light"] .ge-social-comment-author {
  color: #1a1a2e;
}

[data-theme="light"] .ge-social-comment-text {
  color: #1a1a2e;
}

[data-theme="light"] .ge-social-comment-meta {
  color: #666;
}

[data-theme="light"] .ge-social-comment-replies {
  border-left-color: rgba(0, 0, 0, 0.1);
}

/* Light — Social Message */
[data-theme="light"] .ge-social-message-received .ge-social-message-bubble {
  background: #f0f0f5;
  border-color: rgba(0, 0, 0, 0.08);
  color: #1a1a2e;
}

[data-theme="light"] .ge-social-message-sent .ge-social-message-bubble {
  color: #fff;
}

[data-theme="light"] .ge-social-message-time {
  color: #999;
}

/* Light — Video Player */
[data-theme="light"] .ge-video {
  box-shadow: var(--ge-shadow-sm);
}

/* Light — Video Card */
[data-theme="light"] .ge-video-card {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ge-video-card:hover {
  border-color: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .ge-video-card-title {
  color: #1a1a2e;
}

[data-theme="light"] .ge-video-card-channel {
  color: #444;
}

[data-theme="light"] .ge-video-card-meta {
  color: #666;
}

/* Light — Video Playlist */
[data-theme="light"] .ge-video-playlist {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ge-video-playlist-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
  color: #1a1a2e;
}

[data-theme="light"] .ge-video-playlist-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .ge-video-playlist-item {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .ge-video-playlist-item:hover {
  background: #f5f5fa;
}

[data-theme="light"] .ge-video-playlist-item:active {
  background: #ebebf0;
}

[data-theme="light"] .ge-video-playlist-item-active {
  background: rgba(var(--ge-cyan-rgb, 0, 200, 255), 0.06);
}

[data-theme="light"] .ge-video-playlist-item-active:hover {
  background: rgba(var(--ge-cyan-rgb, 0, 200, 255), 0.1);
}

[data-theme="light"] .ge-video-playlist-item-title {
  color: #1a1a2e;
}

[data-theme="light"] .ge-video-playlist-item-meta,
[data-theme="light"] .ge-video-playlist-item-duration {
  color: #666;
}

/* Light — Video Gallery */
[data-theme="light"] .ge-video-gallery-thumb {
  opacity: 0.7;
}

[data-theme="light"] .ge-video-gallery-thumb:hover {
  opacity: 1;
}

[data-theme="light"] .ge-video-gallery-thumb-active {
  opacity: 1;
}