/* ================================================================
   atoms.css — Button, Input, Textarea, Avatar, Badge, Divider
   ================================================================ */

/* ── 文字樣式 ── */
.ui-text {
  font-family: var(--font-display);
  text-shadow: 2px 2px 0px #000, -1px -1px 0 var(--color-blood-red);
}

.data-label {
  font-family: var(--font-mono);
  font-weight: bold;
  color: var(--color-text-primary);
  background: rgba(0, 0, 0, 0.7);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  text-shadow: 0 0 5px var(--color-blood-red);
}

.subtitle-cyber {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-ultra);
  color: var(--color-cyber-cyan);
}

/* ── Button ── */
.btn {
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.btn--primary {
  background: var(--color-blood-red);
  color: var(--color-text-primary);
  border-color: var(--color-blood-red);
  box-shadow: var(--shadow-glow-red);
}
.btn--primary:hover {
  background: #e60036;
  box-shadow: 0 0 30px rgba(255, 0, 60, 0.5);
}
.btn--primary:active {
  transform: scale(0.97);
}

.btn--secondary {
  background: transparent;
  color: var(--color-blood-red);
  border-color: var(--color-border-active);
}
.btn--secondary:hover {
  background: rgba(255, 0, 60, 0.1);
  box-shadow: var(--shadow-glow-red);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
  padding: var(--space-2) var(--space-4);
}
.btn--ghost:hover {
  color: var(--color-cyber-cyan);
  text-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
}

.btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  box-shadow: none;
}

.btn--sm { font-size: var(--text-xs); padding: var(--space-1) var(--space-4); }
.btn--lg { font-size: var(--text-base); padding: var(--space-3) var(--space-8); }
.btn--full { width: 100%; }

/* ── Input ── */
.input {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: var(--color-bg-input);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  outline: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.input::placeholder {
  color: var(--color-text-muted);
}

.input:focus {
  border-color: var(--color-blood-red);
  box-shadow: var(--shadow-glow-red);
}

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

/* ── Textarea ── */
.textarea {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: var(--color-bg-input);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  min-height: 100px;
  resize: vertical;
  outline: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.textarea:focus {
  border-color: var(--color-blood-red);
  box-shadow: var(--shadow-glow-red);
}

/* ── Avatar ── */
.avatar--triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  overflow: hidden;
  position: relative;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
}

.avatar--circle {
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 2px solid var(--color-border-active);
}

.avatar--xs { width: 24px; height: 24px; }
.avatar--sm { width: 32px; height: 32px; }
.avatar--md { width: 48px; height: 48px; }
.avatar--lg { width: 80px; height: 80px; }
.avatar--xl { width: 120px; height: 120px; }

.avatar-profile {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border-active);
  box-shadow: var(--shadow-glow-red);
}

.avatar-matrix {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) sepia(100%) hue-rotate(-50deg) saturate(500%) contrast(1.2);
  opacity: 0.8;
  mix-blend-mode: hard-light;
}

/* ── Badge ── */
.badge {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.badge--online  { background: rgba(0,255,102,0.15); color: var(--color-online-green); border: 1px solid rgba(0,255,102,0.3); }
.badge--offline { background: rgba(255,255,255,0.05); color: var(--color-text-muted); border: 1px solid rgba(255,255,255,0.1); }
.badge--voted   { background: rgba(0,243,255,0.1); color: var(--color-cyber-cyan); border: 1px solid rgba(0,243,255,0.2); }
.badge--locked  { background: rgba(255,0,60,0.15); color: var(--color-blood-red); border: 1px solid rgba(255,0,60,0.3); }

/* ── Divider ── */
.divider {
  border: none;
  height: 1px;
  background: var(--color-border-default);
  margin: var(--space-6) 0;
}