:root{--bg:#f8fafc;--card:#fff;--muted:#64748b;--primary:#4f46e5;--primary-600:#4338ca;--border:#e2e8f0}*{-webkit-box-sizing:border-box;box-sizing:border-box}#app,body,html{height:100%;margin:0;background:var(--bg);color:#1e293b;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,sans-serif}.app-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);position:sticky;top:0;background:hsla(0,0%,100%,.85);backdrop-filter:blur(10px);z-index:10}.app-header .brand{font-weight:700;letter-spacing:.3px;color:#0f172a}.app-header a{color:#64748b;margin-left:16px;text-decoration:none}.app-header a.router-link-exact-active{color:#0f172a}.app-main{padding:20px;max-width:1100px;margin:0 auto}.card{background:var(--card);border:1px solid var(--border);border-radius:10px;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}.btn{background:var(--primary);border:none;color:#fff;padding:10px 14px;border-radius:8px;cursor:pointer}.btn:hover{background:var(--primary-600)}.input{width:100%;padding:10px 12px;background:#fff;border:1px solid var(--border);color:#1e293b;border-radius:8px}.label{color:var(--muted);font-size:12px;margin-bottom:6px}.grid{display:grid;grid-gap:16px}.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:900px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}}@media (max-width:600px){.grid.cols-2,.grid.cols-4{grid-template-columns:1fr}}