:root { --ink: #17324d; --blue: #005eb8; --line: #dce5ec; }
body { background: #f3f6f9; color: var(--ink); font-family: system-ui, sans-serif; }
.app-header { background: var(--ink); padding: 1.2rem 0; }
.app-header nav { display: flex; justify-content: space-between; gap: 1rem; }
.app-header a { color: white; }
.brand { font-weight: 700; text-decoration: none; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 750; }
h2 { font-size: 1.35rem; margin-bottom: 1.2rem; }
h3 { font-size: 1.2rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .09em; font-size: .75rem; margin-bottom: .5rem; }
.mode-badge { background: #d7ece5; color: #164c38; border-radius: 2rem; padding: .6rem 1rem; font-size: .8rem; font-weight: 700; }
.notice { background: #fff3d1; border-left: 4px solid #c78a0b; padding: 1rem; margin: 1.25rem 0; }
.sandbox-connection { margin-bottom: 1.5rem; }
.query-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1.5rem; align-items: start; }
.query-card { background: white; border: 1px solid var(--line); border-radius: .7rem; padding: 1.5rem; }
.form-label { font-weight: 600; }
small, .hint { display: block; color: #52677a; font-size: .85rem; margin-top: .4rem; }
.btn-primary { background: var(--blue); }
.examples dd { margin-bottom: 1rem; }
.results { min-width: 0; overflow-wrap: anywhere; }
.patient-card { margin: 1rem 0; }
.patient-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: .6rem 1rem; margin-bottom: 0; }
.patient-details dd { overflow-wrap: anywhere; }
.deceased { color: #a12626; background: #fff1f1; padding: .5rem; }
:focus-visible { outline: 3px solid #e4a300; outline-offset: 3px; }
@media (max-width: 768px) { .query-grid { grid-template-columns: 1fr; } .patient-details { grid-template-columns: 1fr; gap: .1rem; } }