/* ── Inputs ── */
.input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 11px var(--sp-4);
  color: var(--text-1);
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.input:focus { border-color: var(--gold-dim); box-shadow: 0 0 0 3px var(--gold-glow); }
.input::placeholder { color: var(--text-3); }

.input-wrapper {
  position: relative; display: flex; align-items: center;
}
.input-wrapper .input { padding-right: 44px; }
.input-wrapper__icon {
  position: absolute; right: 12px;
  background: none; border: none; cursor: pointer;
  color: var(--text-3); font-size: 14px; padding: 4px;
  transition: color .15s;
}
.input-wrapper__icon:hover { color: var(--text-1); }

select.input option { background: var(--bg-elevated); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 11px var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  user-select: none;
  transition: transform .15s var(--ease-spring), box-shadow .2s, background .2s, opacity .15s;
  position: relative; overflow: hidden;
}
.btn:active   { transform: scale(.97); }
.btn:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* Loading state */
.btn.loading::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
}

/* Primary — Gold */
.btn--primary {
  background: linear-gradient(135deg, var(--gold-dim) 0%, var(--gold) 50%, var(--gold-bright) 100%);
  color: #0A0800; font-weight: 700;
  border-color: transparent;
  box-shadow: 0 2px 14px var(--gold-glow);
}
.btn--primary:hover {
  box-shadow: 0 4px 24px rgba(201,168,76,.45);
  transform: translateY(-1px);
}

/* Gold */
.btn--gold {
  background: linear-gradient(135deg, var(--gold-dim), var(--gold), var(--gold-bright));
  color: #0A0800; font-weight: 700;
  box-shadow: 0 2px 14px var(--gold-glow);
}
.btn--gold:hover { box-shadow: 0 4px 24px rgba(201,168,76,.45); transform: translateY(-1px); }

/* Danger — Red */
.btn--danger {
  background: linear-gradient(135deg, #9B1C1C, var(--ruby));
  color: #fff; font-weight: 700;
  box-shadow: 0 2px 14px var(--danger-glow);
}
.btn--danger:hover { box-shadow: 0 4px 24px rgba(239,68,68,.35); transform: translateY(-1px); }

/* Ghost */
.btn--ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border-light);
}
.btn--ghost:hover { background: var(--bg-elevated); color: var(--text-1); border-color: var(--border-gold); }

/* Outline green/jade */
.btn--outline-green {
  background: transparent;
  color: var(--jade);
  border-color: var(--jade);
}
.btn--outline-green:hover { background: var(--jade-glow); }

/* Sizes */
.btn--sm  { padding: 7px var(--sp-4); font-size: 12px; }
.btn--lg  { padding: 14px var(--sp-8); font-size: 16px; }
.btn--full { width: 100%; }
.btn--icon { padding: 8px; border-radius: var(--radius-md); }

/* ── Badge ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase;
}
.badge--green  { background: rgba(34,197,94,.12);  color: var(--jade);   border: 1px solid rgba(34,197,94,.25); }
.badge--gold   { background: rgba(201,168,76,.1);   color: var(--gold);   border: 1px solid var(--border-gold); }
.badge--blue   { background: rgba(96,165,250,.1);   color: var(--info);   border: 1px solid rgba(96,165,250,.25); }
.badge--red    { background: rgba(239,68,68,.1);    color: var(--ruby);   border: 1px solid rgba(239,68,68,.25); }
.badge--gray   { background: rgba(255,255,255,.05); color: var(--text-2); border: 1px solid var(--border); }
.badge--purple { background: rgba(167,139,250,.1);  color: #a78bfa;       border: 1px solid rgba(167,139,250,.25); }
.badge--dot::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }

/* Status dot */
.status-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-2); font-weight: 500;
  text-transform: uppercase; letter-spacing: .5px;
}
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
}
.status-dot--active  { background: var(--jade); box-shadow: 0 0 6px var(--jade); animation: dot-pulse 2s ease-in-out infinite; }
.status-dot--waiting { background: var(--gold); }
.status-dot--closed  { background: var(--text-3); }
@keyframes dot-pulse {
  0%,100% { opacity:1; }
  50%      { opacity:.4; }
}

/* Chip slider */
.chip-slider {
  flex: 1;
  -webkit-appearance: none;
  height: 4px;
  background: var(--border-light);
  border-radius: 99px;
  outline: none;
  cursor: pointer;
}
.chip-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-dim), var(--gold));
  box-shadow: 0 0 8px var(--gold-glow);
  cursor: pointer;
  transition: transform .15s;
}
.chip-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }

/* Avatar */
.avatar {
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-gold);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--text-1);
}
.avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.avatar--md { width: 44px; height: 44px; font-size: 16px; }