* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-main); background: var(--bg-main); color: var(--text-primary); font-size: var(--font-size-md); line-height: 1.6; }

.btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 10px 20px; border-radius: var(--radius-full); border: none; cursor: pointer; font-family: var(--font-main); font-size: var(--font-size-sm); font-weight: 600; transition: var(--transition); text-decoration: none; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-success { background: var(--success); color: white; }
.btn-danger { background: var(--danger); color: white; }
.btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.btn-full { width: 100%; justify-content: center; }

.card { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-card); border: 1px solid var(--border-light); }
.card-title { font-size: var(--font-size-lg); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-md); }

.form-group { margin-bottom: var(--space-md); }
.form-label { display: block; font-size: var(--font-size-sm); font-weight: 500; color: var(--text-secondary); margin-bottom: var(--space-xs); }
.form-input { width: 100%; padding: 12px 16px; border: 2px solid var(--border); border-radius: var(--radius-md); font-family: var(--font-main); font-size: var(--font-size-md); color: var(--text-primary); background: var(--bg-card); transition: var(--transition); outline: none; }
.form-input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(91,107,245,0.12); }

.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; }
.badge-primary { background: var(--primary-light); color: var(--primary); }
.badge-success { background: var(--success-light); color: var(--success); }
.badge-warning { background: var(--warning-light); color: var(--warning); }
.badge-danger { background: var(--danger-light); color: var(--danger); }

.stat-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-card); border: 1px solid var(--border-light); display: flex; align-items: center; gap: var(--space-md); }
.stat-icon { width: 52px; height: 52px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.stat-icon-blue { background: var(--primary-light); }
.stat-icon-purple { background: var(--secondary-light); }
.stat-icon-green { background: var(--success-light); }
.stat-icon-yellow { background: var(--warning-light); }
.stat-value { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.stat-label { font-size: var(--font-size-xs); color: var(--text-secondary); margin-top: 2px; }

.alert { padding: 12px 16px; border-radius: var(--radius-md); font-size: var(--font-size-sm); margin-bottom: var(--space-md); }
.alert-success { background: var(--success-light); color: var(--success); }
.alert-danger { background: var(--danger-light); color: var(--danger); }
.alert-warning { background: var(--warning-light); color: var(--warning); }
.alert-info { background: var(--info-light); color: var(--info); }

.divider { border: none; border-top: 1px solid var(--border); margin: var(--space-md) 0; }
.points-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--primary-light); color: var(--primary); padding: 6px 14px; border-radius: var(--radius-full); font-weight: 700; font-size: var(--font-size-sm); }