:root{font-family:Inter,Arial,sans-serif;color:#1e293b;background:#f1f5f9;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}button{font:inherit;cursor:pointer}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:#12243a;color:#fff;padding:24px 32px}.header h1{margin:0 0 6px;font-size:28px}.subtitle{color:#b9c9df;font-size:14px}.navigation{display:flex;flex-wrap:wrap;gap:10px;padding:14px 32px;background:#fff;border-bottom:1px solid #dbe3ed}.navigation button{padding:10px 16px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#334155}.navigation button:hover{background:#e2e8f0}.navigation button.active{background:#2563eb;border-color:#2563eb;color:#fff}.content{width:100%;max-width:1200px;margin:0 auto;padding:32px;flex:1}.content h2{margin-top:0}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}.card{background:#fff;padding:24px;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 2px 8px #0000000a}.card h3{margin-top:0;color:#1d4ed8}.footer{padding:18px;text-align:center;color:#64748b;font-size:13px;background:#fff;border-top:1px solid #e2e8f0}@media(max-width:700px){.header,.navigation,.content{padding:20px}.cards{grid-template-columns:1fr}}