:root{--primary:#6366f1;--primary-hover:#4f46e5;--bg-dark:#0f172a;--card-bg:#1e293b;--text-main:#f8fafc;--text-muted:#94a3b8;--border:#334155}body{background-color:var(--bg-dark);color:var(--text-main);font-family:Inter,system-ui,-apple-system,sans-serif;margin:0}.app-container{display:flex;flex-direction:column;min-height:100vh}.navbar{align-items:center;background-color:var(--card-bg);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;padding:1rem 2rem}.logo{background:linear-gradient(90deg,#818cf8,#c084fc);-webkit-background-clip:text;font-size:1.5rem;font-weight:800;-webkit-text-fill-color:transparent}.nav-links a{color:var(--text-muted);font-weight:500;margin-left:1.5rem;text-decoration:none;transition:color .2s}.nav-links a.router-link-active,.nav-links a:hover{color:var(--primary)}.content{flex:1;margin:0 auto;max-width:1200px;padding:2rem;width:100%}.card{background-color:var(--card-bg);border:1px solid var(--border);border-radius:12px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;padding:1.5rem}h1,h2{margin-top:0}button{background-color:var(--primary);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:.6rem 1.2rem;transition:background .2s,transform .1s}button:hover{background-color:var(--primary-hover)}button:active{transform:scale(.98)}