:root {
  --bg-color: #e8e3df;
  --primary: #a8a39d;
  --secondary: #d1ccc6;
  --accent: #c9b8a8;
  --text-dark: #4a443f;
  --text-light: #f5f0eb;
  --glass-bg: rgba(255, 255, 255, 0.25);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-shadow: rgba(74, 68, 63, 0.08);
  --glass-dark-bg: rgba(74, 68, 63, 0.25);
  --glass-dark-border: rgba(255, 255, 255, 0.15);
  --success: #a8b5a0;
  --warning: #d4c4a8;
  --error: #c9a8a8;
  --info: #a8b5c9;
  --role-purple: #9b8aa8;
  --role-black: #3a3a3a;
  --role-orange: #d4a88c;
  --role-yellow: #d4c89c;
  --spring-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-dark);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 4px 24px var(--glass-shadow);
  transition: all 0.4s var(--spring-soft);
}

.glass-card:hover { box-shadow: 0 8px 32px rgba(74, 68, 63, 0.12); }

.glass-dark {
  background: var(--glass-dark-bg);
  border: 1px solid var(--glass-dark-border);
  color: var(--text-light);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  outline: none;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: var(--text-light);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(168, 163, 157, 0.4);
}

.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
  background: var(--glass-bg);
  color: var(--text-dark);
  border: 1px solid var(--glass-border);
}

.btn-secondary:hover { background: rgba(255, 255, 255, 0.4); }

.btn-danger {
  background: var(--error);
  color: var(--text-light);
}

.btn-danger:hover { background: #b89898; }

.btn-success {
  background: var(--success);
  color: var(--text-light);
}

.input-field {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  color: var(--text-dark);
  transition: all 0.3s ease;
  outline: none;
}

.input-field:focus {
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 3px rgba(168, 163, 157, 0.15);
}

.input-field.error {
  border-color: var(--error);
  animation: shake 0.4s ease-in-out;
}

.input-field::placeholder { color: rgba(74, 68, 63, 0.5); }

.error-text {
  color: var(--error);
  font-size: 12px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #8a8580; }

@media (max-width: 768px) {
  .glass-card { border-radius: 12px; }
  .btn { padding: 10px 20px; }
}