.app{min-height:100%;display:flex;flex-direction:column;font-family:Segoe UI,system-ui,sans-serif}.navbar{position:relative;display:flex;align-items:center;gap:12px;padding:10px 20px;background:#2c3e50;color:#fff;height:64px;width:100%;box-sizing:border-box}.logo{height:40px}.nav-title{position:absolute;left:50%;transform:translate(-50%);margin:0;font-size:22px;white-space:nowrap}.navbar h1{margin:0;font-size:22px}.grid{flex:1;display:grid;grid-template-columns:repeat(2,220px);grid-template-rows:repeat(2,160px);gap:32px;place-content:center;place-items:center;width:100%;padding:24px}.card{width:220px;height:160px;background:#fff;border-radius:14px;box-shadow:0 4px 12px #00000014;display:flex;align-items:center;justify-content:center;font-weight:600;color:#2c3e50;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}.card:hover{transform:translateY(-6px);box-shadow:0 10px 24px #0000002e;background:#3498db;color:#fff}@media (max-width: 520px){.grid{grid-template-columns:1fr;grid-template-rows:none}}*{box-sizing:border-box}html,body,#root{height:100%;width:100%}body{margin:0;display:block;background:#f5f7fa;color:#222}#root{max-width:none;margin:0;padding:0}