:root {
  --primary-color: #22c55e;
  --primary-rgb: 34, 197, 94;
  --primary-light: #4ade80;
  --primary-dark: #16a34a;
  --secondary-color: #10b981;
  --secondary-light: #34d399;
  --secondary-dark: #059669;
  --accent-color: #22c55e;
  --accent-rgb: 34, 197, 94;

  --success-color: #22c55e;
  --success-dark: #059669;
  --warning-color: #f59e0b;
  --warning-dark: #d97706;
  --error-color: #ef4444;
  --error-dark: #dc2626;
  --error-rgb: 239, 68, 68;
  --info-color: var(--primary-color);
  
  --danger-color: #ef4444;
  --primary-hover: #16a34a;
  
  --bg-warning: rgba(245, 158, 11, 0.1);
  --bg-danger: rgba(239, 68, 68, 0.1);
  --bg-success: rgba(16, 185, 129, 0.1);
  --bg-error: rgba(239, 68, 68, 0.1);
  
  --border-warning: rgba(245, 158, 11, 0.3);
  --border-danger: rgba(239, 68, 68, 0.3);
  --border-success: rgba(16, 185, 129, 0.3);
  --border-error: rgba(239, 68, 68, 0.2);
  
  --text-warning: #d97706;
  --text-danger: #dc2626;
  --text-success: #059669;
  
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --text-tertiary: #9ca3af;
  --text-inverse: #1e293b;
  --text-link: #22c55e;
  --text-link-hover: #16a34a;
  --text-white: #ffffff;
  --text-white-hover: #f0f9ff;
  
  --text-color: #f8fafc;
  --text-muted: #94a3b8;
  
  --bg-page: #121217;
  --bg-primary: #121217;
  --bg-section: #0d0d0d;
  --bg-secondary: #0d0d0d;
  --bg-tertiary: #0d0d0d;
  --bg-card: #171717;
  --bg-panel: #171717;
  --bg-panel-alt: #171717;
  --bg-header: rgba(23, 23, 23, 0.95);
  --header-blur: 20px;
  --header-border-color: rgba(255, 255, 255, 0.08);

  --bg-overlay: rgba(2, 6, 23, 0.92);
  --bg-hover: #111827;
  --bg-player: rgba(12, 22, 22, 0.74);
  --bg-placeholder: #333333;
  --text-muted-light: #9aa0a6;
  --text-muted-dark: #666666;
  --bg-waveform: rgba(0, 0, 0, 0.08);
  --play-btn-color: #ff4f6d;
  --play-btn-hover: #ff6b85;
  --accent-cyan: #00bcd4;
  --accent-cyan-rgb: 0, 188, 212;
  
  --hover-bg: #2a3142;
  
  --border-color: #3a4553;
  --border-light: #4a5568;
  --border-dark: #2d3748;
  --border-white-light: rgba(255, 255, 255, 0.08);
  --border-white-medium: rgba(255, 255, 255, 0.1);
  --border-white-strong: rgba(255, 255, 255, 0.2);
  
  --shadow-sm: 0 6px 20px rgba(15, 23, 42, 0.6);
  --shadow-md: 0 14px 40px rgba(15, 23, 42, 0.75);
  --shadow-lg: 0 24px 80px rgba(15, 23, 42, 0.9);
  --shadow-xl: 0 40px 140px rgba(15, 23, 42, 0.95);
  
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.35s ease;

  --gradient-primary: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #0f766e 100%);
  --gradient-secondary: linear-gradient(135deg, #4ade80 0%, #22c55e 50%, #a3e635 100%);
  --gradient-accent: linear-gradient(135deg, #22c55e 0%, #22c55e 100%);
  --gradient-footer: linear-gradient(180deg, var(--bg-footer-start) 0%, var(--bg-footer-middle) 60%, var(--bg-footer-end) 100%);
  --gradient-header: radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.18) 0%, transparent 45%),
                      radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.16) 0%, transparent 40%),
                      linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(2, 6, 23, 0.98) 45%, rgba(15, 23, 42, 0.98) 100%);
  --gradient-logo: linear-gradient(135deg, #022c22 0%, #020617 45%, #0f172a 100%);
  --dark-bg: #020617;
  --card-bg: #020617;
  --card-border: rgba(31, 41, 55, 0.9);
  --shadow-light: 0 4px 20px rgba(15, 23, 42, 0.75);
  --shadow-medium: 0 16px 40px rgba(15, 23, 42, 0.9);
  --shadow-heavy: 0 32px 80px rgba(0, 0, 0, 1);
  --border-radius: 12px;
  --border-radius-large: 20px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  --container-max-width: 1600px;
  --container-padding: 24px;
  --header-height: 64px;
}

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

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.6;
}

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-normal);
}

.btn-primary {
  background-color: var(--primary-color);
  color: var(--text-inverse);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
}

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

.btn-secondary:hover {
  background-color: var(--bg-tertiary);
}

.card {
  background-color: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: var(--transition-normal);
}

.input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: var(--transition-normal);
}

a:hover {
  color: var(--text-link-hover);
}

@media (max-width: 768px) {
  :root {
    --container-padding: 16px;
  }
}

@media (max-width: 480px) {
  :root {
    --container-padding: 12px;
  }
}