.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-5);border-radius:var(--r-md);font-weight:var(--fw-semibold);font-size:var(--fs-sm);line-height:1.2;cursor:pointer;transition:all var(--t-fast) var(--ease);border:1px solid transparent;text-decoration:none;white-space:nowrap;user-select:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-md);color:#fff}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn-secondary:hover:not(:disabled){background:var(--surface-alt);border-color:var(--border-strong)}
.btn-ghost{background:transparent;color:var(--text-muted)}
.btn-ghost:hover:not(:disabled){background:var(--surface-alt);color:var(--text)}
.btn-success{background:var(--gradient-success);color:#fff}
.btn-danger{background:var(--danger-500);color:#fff}
.btn-danger:hover{background:var(--danger-600)}
.btn-lg{padding:var(--sp-4) var(--sp-6);font-size:var(--fs-base)}
.btn-sm{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-xs)}
.btn-block{width:100%;display:flex}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-6);transition:box-shadow var(--t-fast) var(--ease)}
.card-hover:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.card-interactive{cursor:pointer}
.card-interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--indigo-300)}
.card-header{display:flex;justify-content:space-between;align-items:start;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.card-title{font-size:var(--fs-lg);font-weight:var(--fw-semibold);margin:0}
.card-body{color:var(--text-muted);line-height:1.6}
.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--border)}
.card-gradient{background:var(--gradient-hero);color:#fff;border:none;position:relative;overflow:hidden}
.card-gradient::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(255,255,255,.2),transparent 60%);pointer-events:none}
.card-gradient .card-title{color:#fff}
.card-gradient .card-body{color:rgba(255,255,255,.85)}

.stat-card{display:flex;flex-direction:column;gap:var(--sp-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5);position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-primary)}
.stat-card.success::before{background:var(--gradient-success)}
.stat-card.warning::before{background:var(--gradient-gold)}
.stat-card-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:var(--fw-semibold)}
.stat-card-value{font-size:var(--fs-3xl);font-weight:var(--fw-extrabold);color:var(--text);line-height:1.1}
.stat-card-sub{font-size:var(--fs-sm);color:var(--text-muted);display:flex;align-items:center;gap:var(--sp-2)}

.progress{width:100%;height:8px;background:var(--surface-alt);border-radius:var(--r-full);overflow:hidden}
.progress-bar{height:100%;background:var(--gradient-primary);border-radius:var(--r-full);transition:width var(--t-slow) var(--ease-out)}
.progress-lg{height:12px}
.progress-sm{height:4px}
.progress-success .progress-bar{background:var(--gradient-success)}

.progress-ring{position:relative;width:80px;height:80px}
.progress-ring svg{transform:rotate(-90deg)}
.progress-ring-bg{stroke:var(--surface-alt)}
.progress-ring-fg{stroke:url(#gradient-primary);transition:stroke-dashoffset var(--t-slow) var(--ease-out)}
.progress-ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:var(--fs-base);font-weight:var(--fw-bold)}

.badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);font-size:var(--fs-xs);font-weight:var(--fw-semibold);line-height:1.4}
.badge-indigo{background:var(--indigo-100);color:var(--indigo-700)}
.badge-violet{background:var(--violet-100);color:var(--violet-700)}
.badge-success{background:var(--success-100);color:var(--success-700)}
.badge-warning{background:var(--warning-100);color:var(--warning-700)}
.badge-danger{background:var(--danger-100);color:var(--danger-700)}
.badge-slate{background:var(--surface-alt);color:var(--slate-700)}

.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:var(--fw-medium);background:var(--surface-alt);color:var(--slate-600);border:1px solid var(--border)}

.achievement{display:flex;flex-direction:column;align-items:center;padding:var(--sp-4);background:var(--surface);border:2px solid var(--border);border-radius:var(--r-lg);transition:all var(--t-base) var(--ease);position:relative;text-align:center}
.achievement-locked{opacity:.4;filter:grayscale(1)}
.achievement-icon{font-size:2.5rem;margin-bottom:var(--sp-2);filter:drop-shadow(0 2px 8px rgba(99,102,241,.3))}
.achievement-name{font-size:var(--fs-sm);font-weight:var(--fw-semibold);margin-bottom:var(--sp-1)}
.achievement-desc{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.4}

.achievement.common{border-color:var(--rarity-common)}
.achievement.uncommon{border-color:var(--rarity-uncommon);box-shadow:0 0 0 1px rgba(34,197,94,.1)}
.achievement.rare{border-color:var(--rarity-rare);box-shadow:0 0 0 1px rgba(59,130,246,.15),0 4px 12px rgba(59,130,246,.1)}
.achievement.epic{border-color:var(--rarity-epic);box-shadow:0 0 0 1px rgba(168,85,247,.15),0 4px 16px rgba(168,85,247,.15)}
.achievement.legendary{border-color:var(--rarity-legendary);box-shadow:0 0 0 2px rgba(245,158,11,.2),0 8px 24px rgba(245,158,11,.2);background:linear-gradient(135deg,#fffbeb 0%,#fff 100%)}

.rarity-label{position:absolute;top:-8px;right:-8px;font-size:9px;font-weight:var(--fw-bold);text-transform:uppercase;padding:2px 6px;border-radius:var(--r-full);color:#fff;letter-spacing:.05em}
.rarity-common{background:var(--rarity-common)}
.rarity-uncommon{background:var(--rarity-uncommon)}
.rarity-rare{background:var(--rarity-rare)}
.rarity-epic{background:var(--rarity-epic)}
.rarity-legendary{background:var(--rarity-legendary)}

.alert{padding:var(--sp-4);border-radius:var(--r-md);border:1px solid;display:flex;gap:var(--sp-3);align-items:flex-start;line-height:1.5}
.alert-icon{font-size:var(--fs-lg);flex-shrink:0}
.alert-info{background:var(--indigo-50);border-color:var(--indigo-200);color:var(--indigo-800)}
.alert-success{background:var(--success-50);border-color:#86efac;color:var(--success-700)}
.alert-warning{background:var(--warning-50);border-color:#fcd34d;color:var(--warning-700)}
.alert-danger{background:var(--danger-50);border-color:#fca5a5;color:var(--danger-700)}

.callout{margin:var(--sp-6) 0;padding:var(--sp-5);border-radius:var(--r-lg);background:linear-gradient(135deg,#eef2ff,#faf5ff);border-left:4px solid var(--primary)}
.callout-title{font-size:var(--fs-sm);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.05em;color:var(--indigo-700);margin-bottom:var(--sp-2);display:flex;align-items:center;gap:var(--sp-2)}

.input{width:100%;padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);font-size:var(--fs-base);transition:border var(--t-fast) var(--ease)}
.input:focus{outline:none;border-color:var(--primary);box-shadow:var(--shadow-glow)}

.search{position:relative}
.search-input{padding-left:2.5rem}
.search-icon{position:absolute;left:var(--sp-3);top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}

.divider{height:1px;background:var(--border);margin:var(--sp-6) 0;border:none}

.tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--border);margin-bottom:var(--sp-6);overflow-x:auto}
.tab{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--t-fast) var(--ease);white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.active{color:var(--primary);border-bottom-color:var(--primary)}

.skeleton{background:linear-gradient(90deg,var(--surface-alt) 25%,var(--border) 50%,var(--surface-alt) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:var(--r-md)}
@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}

.empty-state{text-align:center;padding:var(--sp-12) var(--sp-6);color:var(--text-muted)}
.empty-icon{font-size:3rem;margin-bottom:var(--sp-4);opacity:.5}

.toast-container{position:fixed;bottom:var(--sp-6);right:var(--sp-6);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--sp-3);pointer-events:none}
.toast{background:var(--slate-900);color:#fff;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);box-shadow:var(--shadow-xl);display:flex;align-items:center;gap:var(--sp-3);min-width:240px;max-width:360px;pointer-events:auto;animation:toast-in var(--t-base) var(--ease-out);font-size:var(--fs-sm)}
.toast.success{background:var(--success-600)}
.toast.warning{background:var(--warning-600)}
.toast.xp{background:var(--gradient-primary)}
.toast-icon{font-size:var(--fs-xl)}
.toast.hiding{animation:toast-out var(--t-base) var(--ease) forwards}

@keyframes toast-in{from{transform:translateX(100%) scale(.9);opacity:0}to{transform:translateX(0) scale(1);opacity:1}}
@keyframes toast-out{to{transform:translateX(120%);opacity:0}}