:root{--bg-primary:#202020;--bg-secondary:#2d2d2d;--bg-tertiary:#383838;--bg-card:#2d2d2d;--bg-hover:#3d3d3d;--bg-active:#4d4d4d;--text-primary:#fff;--text-secondary:#b3b3b3;--text-muted:grey;--accent:#60cdff;--accent-hover:#7dd4ff;--border:#404040;--shadow:rgba(0,0,0,.3);--blur:20px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--transition:.2s cubic-bezier(.4,0,.2,1)}*{box-sizing:border-box;margin:0;padding:0}body,html{background:var(--bg-primary);color:var(--text-primary);font-family:Segoe UI Variable,Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--bg-hover)}.container{margin:0 auto;max-width:1400px;padding:0 24px}.fluent-card{-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 2px 8px var(--shadow);transition:all var(--transition)}.fluent-card:hover{background:var(--bg-hover);border-color:var(--accent);box-shadow:0 8px 24px var(--shadow);transform:translateY(-2px)}.fluent-btn{align-items:center;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:8px;justify-content:center;padding:8px 16px;text-decoration:none;transition:all var(--transition)}.fluent-btn:hover{background:var(--bg-hover);border-color:var(--accent)}.fluent-btn:active{background:var(--bg-active);transform:scale(.98)}.fluent-btn-primary{background:var(--accent);border-color:var(--accent);color:#000}.fluent-btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.fluent-input{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:14px;outline:none;padding:10px 16px;transition:all var(--transition);width:100%}.fluent-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px #60cdff33}.fluent-input::-moz-placeholder{color:var(--text-muted)}.fluent-input::placeholder{color:var(--text-muted)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-fade-in{animation:fadeIn .3s ease-out forwards}.animate-slide-in{animation:slideIn .3s ease-out forwards}.animate-scale-in{animation:scaleIn .2s ease-out forwards}.skeleton{animation:shimmer 1.5s infinite;background:linear-gradient(90deg,var(--bg-tertiary) 25%,var(--bg-hover) 50%,var(--bg-tertiary) 75%);background-size:200% 100%;border-radius:var(--radius-md)}.badge{align-items:center;background:var(--bg-tertiary);border-radius:var(--radius-sm);color:var(--text-secondary);display:inline-flex;font-size:12px;padding:4px 8px}.badge-accent{background:#60cdff26;color:var(--accent)}.grid{display:grid;gap:20px}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}.grid-cols-5{grid-template-columns:repeat(5,1fr)}@media(max-width:1200px){.grid-cols-5{grid-template-columns:repeat(4,1fr)}}@media(max-width:992px){.grid-cols-4,.grid-cols-5{grid-template-columns:repeat(3,1fr)}}@media(max-width:768px){.grid-cols-3,.grid-cols-4,.grid-cols-5{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.grid-cols-2,.grid-cols-3,.grid-cols-4,.grid-cols-5{grid-template-columns:1fr}}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.text-center{text-align:center}.text-sm{font-size:13px}.text-lg{font-size:18px}.text-xl{font-size:24px}.text-muted{color:var(--text-secondary)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-2,.line-clamp-3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3}.page-enter-active,.page-leave-active{transition:opacity .25s ease,transform .25s ease}.page-enter-from{opacity:0;transform:translateY(10px)}.page-leave-to{opacity:0;transform:translateY(-10px)}.toast-container{display:flex;flex-direction:column;gap:10px;position:fixed;right:20px;top:20px;z-index:9999}.toast{background:#2d2d2d;border:1px solid hsla(0,0%,100%,.1);border-radius:10px;box-shadow:0 10px 30px #0000004d;color:#fff;font-size:14px;max-width:360px;padding:14px 20px}.toast-success{border-left:3px solid #4ade80}.toast-error{border-left:3px solid #f87171}.toast-warning{border-left:3px solid #fbbf24}.toast-info{border-left:3px solid #60cdff}.toast-enter-active{animation:toastIn .3s ease}.toast-leave-active{animation:toastOut .3s ease}@keyframes toastIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes toastOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.modal-overlay{align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000bf;display:flex;inset:0;justify-content:center;padding:20px;position:fixed;z-index:2000}.login-modal{background:#242424;border:1px solid hsla(0,0%,100%,.1);border-radius:16px;max-width:400px;padding:32px;position:relative;text-align:center;width:100%}.modal-close{align-items:center;background:#ffffff0d;border:none;border-radius:8px;color:#888;cursor:pointer;display:flex;height:32px;justify-content:center;position:absolute;right:16px;top:16px;transition:all .2s;width:32px}.modal-close:hover{background:#ffffff1a;color:#fff}.modal-close svg{height:18px;width:18px}.modal-icon{margin-bottom:16px}.modal-icon svg{color:#fbbf24;height:48px;width:48px}.login-modal h2{font-size:20px;font-weight:600;margin-bottom:8px}.modal-subtitle{color:#60cdff;font-size:14px;font-weight:500;margin-bottom:8px}.modal-desc{color:#888;font-size:13px;line-height:1.6;margin-bottom:24px}.discord-btn{align-items:center;background:#5865f2;border:none;border-radius:10px;color:#fff;cursor:pointer;display:inline-flex;font-size:15px;font-weight:600;gap:10px;justify-content:center;padding:14px 24px;transition:all .2s;width:100%}.discord-btn:hover{background:#4752c4;transform:translateY(-2px)}.discord-btn svg{height:22px;width:22px}.modal-enter-active,.modal-leave-active{transition:opacity .25s ease}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-active .login-modal,.modal-leave-active .login-modal{transition:transform .25s ease}.modal-enter-from .login-modal,.modal-leave-to .login-modal{transform:scale(.95)}