:root { --navy:#16324f; --navy2:#244d70; --bg:#edf2f6; --panel:#fff; --text:#17212b; --muted:#667582; --ok:#0b6b3a; --danger:#aa2525; }
*{box-sizing:border-box} body{margin:0;font-family:Arial,sans-serif;background:var(--bg);color:var(--text)} a{color:inherit}.shell{min-height:100vh}.topbar{background:var(--navy);color:#fff;padding:16px 22px;display:flex;justify-content:space-between;align-items:center}.brand{font-weight:800}.container{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:32px 0}.card{background:#fff;border:1px solid #d6e0e8;border-radius:14px;box-shadow:0 10px 32px rgba(20,43,64,.08);padding:24px}.btn{display:inline-block;border:0;border-radius:8px;padding:11px 16px;font-weight:700;cursor:pointer;text-decoration:none}.btn-primary{background:var(--navy2);color:#fff}.btn-secondary{background:#e8eef3;color:#19334a}.grid{display:grid;gap:16px}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.metric{padding:18px;border:1px solid #dbe3ea;border-radius:10px;background:#fff}.metric strong{display:block;font-size:25px;color:var(--navy);margin-top:6px}.muted{color:var(--muted)}@media(max-width:760px){.grid-3{grid-template-columns:1fr}.container{width:min(100% - 20px,1120px)}}