:root { --navy:#031a2b; --teal:#008477; }
body { font-family:Arial, Helvetica, sans-serif; color:#163248; }
.hero-shell { background:radial-gradient(ellipse at 75% 45%,#074461 0%,#03263d 40%,#031522 80%); color:#fff; overflow:hidden; }
.brand { color:#fff; }
.brand-leaf { width:42px; height:54px; flex-shrink:0; }
.brand-title { display:block; font-size:24px; font-weight:700; line-height:1.2; }
.brand-tagline { display:block; font-size:12px; font-weight:400; margin-top:3px; }
.navbar-dark .nav-link { color:#fff; font-size:14px; }
.login-button { background:#e4f3f9; color:#031a2b; padding:7px 18px; border-radius:6px; }
.login-button:hover { background:#fff; color:#031a2b; }
.register-button { color:#fff; border:1px solid #b3d5c3; padding:7px 18px; }
.register-button:hover { background:#e4f3f9; color:#031a2b; }
.hero { padding-top:24px; padding-bottom:48px; }
.hero-copy h1 { font-size:clamp(28px,3vw,42px); font-weight:700; line-height:1.15; }
.hero-subtitle { font-size:20px; margin:18px 0 26px; }
.line-icon { width:44px; height:44px; margin-bottom:10px; }
.contribution-row h2 { font-size:14px; font-weight:700; text-transform:uppercase; margin-bottom:4px; }
.contribution-row p,.values-row p { font-size:13px; line-height:1.3; }
.hero blockquote { text-align:center; font-family:Georgia,serif; font-style:italic; font-size:26px; margin:26px 0; }
.hero-art { position:relative; width:100%; aspect-ratio:430 / 420; overflow:hidden; }
.hero-art img { position:absolute; width:200%; max-width:none; height:115%; left:-100%; top:-15%; object-fit:fill; }
.information-section { padding:64px 0; }
.information-section h2 { font-size:30px; font-weight:700; }
.protocol-section { background:#f1f7f6; }
.eyebrow { color:#008477; text-transform:uppercase; font-size:12px; font-weight:700; letter-spacing:1.5px; }
.section-copy { color:#526473; font-size:17px; line-height:1.8; }
footer { background:var(--navy); color:#d0dce3; padding:24px 0; font-size:13px; }
.skip-link { position:absolute; z-index:1100; background:#fff; padding:10px; }
.registration-page { background:#f4f8fa; }
.registration-dialog { max-width:560px; }
.registration-card { background:linear-gradient(130deg,#fbfdff,#eef5fb); border:1px solid #d7e0e7; border-radius:12px; }
.registration-card h1 { font-size:32px; font-weight:700; color:#092b49; }
.registration-intro { font-size:14px; color:#526575; margin-top:6px; }
.registration-card .form-label { font-size:13px; font-weight:600; }
.registration-card .form-control,.registration-card .form-select { font-size:14px; min-height:42px; border-color:#d8e1e7; }
.required { color:#d33e4e; }
.registration-submit { background:linear-gradient(#086fa9,#034b7e); color:white; min-height:46px; font-weight:700; border-radius:9px; }
.registration-submit:hover { background:#034b7e; color:#fff; }
.terms-link,.registration-back { color:#135984; }
button.terms-link { background:none; border:0; padding:0; text-decoration:underline; }
.registration-login,.registration-card .form-check-label { font-size:13px; }
.login-dialog { max-width:380px; }
.login-card { background:rgba(245,251,252,.96); border:1px solid #dbe6e8; border-radius:14px; text-align:center; color:#082532; box-shadow:0 20px 60px #001b3040; }
.login-card .modal-body { padding:28px; }
.login-close { position:absolute; top:12px; right:12px; z-index:1; }
.login-lock { width:28px; height:38px; margin-bottom:12px; }
.login-card h2 { font-size:21px; font-weight:700; }
.login-input,.password-field { position:relative; }
.login-input > svg { position:absolute; left:12px; top:12px; width:20px; height:20px; pointer-events:none; }
.login-input .form-control { padding-left:42px; min-height:44px; }
.login-input input[type=password],.login-input input[type=text],.password-field .form-control { padding-right:46px; }
.password-toggle { position:absolute; right:7px; top:50%; transform:translateY(-50%); background:none; border:0; padding:6px; color:#506169; line-height:0; }
.password-toggle svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; }
.password-toggle[aria-pressed=true] .eye-slash { display:none; }
.password-toggle:focus-visible { outline:2px solid var(--teal); border-radius:4px; }
.forgot-password { background:none; border:0; color:#14535a; font-size:12px; padding:0; }
.portal-login-button { background:#008477; color:#fff; font-weight:700; min-height:40px; }
.portal-login-button:hover { background:#006f64; color:#fff; }
.request-access { font-size:13px; }
.request-access a { color:#00695e; font-weight:600; }
.dashboard-header { background:var(--navy); color:#fff; padding:22px 0; }
.dashboard-navigation { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; }
.dashboard-heading { font-size:24px; font-weight:700; margin:0; }
.dashboard-logout { justify-self:end; }
.dashboard-welcome { border-radius:16px; overflow:hidden; }
.dashboard-welcome .card-body { padding:28px; }
.dashboard-patient-list { padding:8px 28px 28px; }
.dashboard-welcome > .alert { margin:0 28px 20px; }
.patient-demographics-heading { font-size:18px; margin:44px 0 32px; color:#111; }
.patient-demographics-row { display:flex; align-items:center; justify-content:center; gap:24px; }
.patient-demographic-field { display:flex; align-items:center; gap:12px; min-width:0; }
.patient-demographic-field label { font-size:14px; color:#111; white-space:nowrap; }
.patient-demographic-field .form-control,.patient-demographic-field .form-select { width:130px; background-color:#f0f0f0; border:1px solid #a5b1ba; border-radius:0; text-align:center; min-height:40px; }
.patient-age-field .form-control { width:80px; }
.patient-demographic-field input::placeholder { color:#999; }
.patient-demographic-field input[type=number] { appearance:textfield; -moz-appearance:textfield; }
.patient-demographic-field input::-webkit-inner-spin-button,.patient-demographic-field input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.patient-comorbidities { margin:32px 0 28px; }
.patient-comorbidities legend { font-size:18px; margin-bottom:26px; color:#111; }
.comorbidity-options { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:18px 24px; }
.comorbidity-option { display:flex; align-items:center; gap:6px; color:#111; font-size:15px; white-space:nowrap; }
.comorbidity-option input { accent-color:var(--teal); }
.comorbidity-other { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.comorbidity-other .form-control { width:180px; }
.patient-step-actions { display:flex; justify-content:center; gap:16px; margin-top:32px; }
.patient-step-header .patient-code-preview { font-size:13px; max-width:65%; overflow-wrap:anywhere; }
.clinical-screening-heading { width:100%; margin:40px auto 28px; text-align:center; font-size:18px; letter-spacing:.3px; color:#c62828; }
.clinical-question-content { width:fit-content; max-width:100%; margin:0 auto; text-align:left; color:#111; }
.clinical-question-content:has(textarea) { width:100%; max-width:480px; }
.clinical-question-content h4 { font-size:17px; }
.question-section-content { width:100%; max-width:520px; margin:0 auto; text-align:left; }
.patient-question { padding:24px 0; border-bottom:1px solid #e3e9eb; scroll-margin-top:24px; }
.patient-question:last-child { border-bottom:0; }
.patient-question h4 { font-size:17px; }
.patient-question:focus { outline:2px solid #b5d9cd; outline-offset:8px; border-radius:4px; }
.patient-view-section { margin-top:36px; padding-top:24px; border-top:1px solid #dbe5e1; }
.clinical-option-group { margin-bottom:24px; }
.clinical-option-group legend { font-size:17px; font-weight:700; margin-bottom:16px; }
.clinical-option-group label { display:flex; align-items:center; gap:8px; margin-bottom:18px; font-size:16px; }
.clinical-option-group input { width:14px; height:14px; accent-color:var(--teal); flex-shrink:0; }
.stone-type-options legend { margin-bottom:26px; }
.stone-type-options label { margin-bottom:26px; }
.clinical-option-group:not(.stone-type-options) label { padding-left:50px; margin-bottom:12px; line-height:1.4; }
.patient-answers-summary { max-width:600px; margin:0 auto; }
.patient-answers-summary dt { margin-top:24px; font-weight:700; }
.patient-answers-summary dd { white-space:pre-wrap; overflow-wrap:anywhere; color:#52606b; padding-bottom:16px; margin:8px 0 0; border-bottom:1px solid #e3e9eb; }
.patient-view-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; padding-bottom:20px; border-bottom:1px solid #e3e9eb; }
.patient-view-header span { font-size:14px; overflow-wrap:anywhere; }
.patient-view-content { width:100%; max-width:600px; margin:32px auto 0; text-align:left; }
.patient-view-content .patient-answers-summary { max-width:none; margin:0; }
.patient-view-content .patient-view-section { margin:32px 0 0; padding-top:24px; }
.patient-view-section h3 { margin:0 0 20px; color:#c62828; font-size:17px; line-height:1.5; }
.patient-view-content dl { margin-bottom:0; }
.patient-view-content dt { margin:20px 0 8px; line-height:1.6; overflow-wrap:anywhere; }
.patient-view-content dt:first-child { margin-top:0; }
.patient-view-content dd { margin:0; padding:0 0 18px; line-height:1.7; }
.patient-view-content dd:last-child { padding-bottom:0; border-bottom:0; }
@media (max-width:991.98px) {
  .navbar-nav { gap:12px; padding-top:20px; }
  .hero-copy { max-width:650px; margin:auto; }
  .hero-art { max-width:550px; margin:auto; }
  .dashboard-navigation { grid-template-columns:1fr auto; }
  .dashboard-heading { grid-row:2; grid-column:1 / -1; text-align:center; }
}
@media (max-width:575.98px) {
  .brand-title { font-size:19px; }
  .brand-tagline { font-size:10px; }
  .brand-leaf { width:32px; height:42px; }
  .dashboard-navigation { gap:16px; }
  .dashboard-logout { gap:10px !important; }
  .dashboard-logout .login-button { padding:6px 10px; font-size:12px; }
  .dashboard-welcome .card-body { padding:20px; }
  .dashboard-patient-list { padding:8px 16px 20px; }
  .patient-demographics-row { flex-direction:column; align-items:stretch; gap:16px; }
  .patient-demographic-field label { width:80px; }
  .patient-demographic-field .form-control,.patient-demographic-field .form-select { width:100%; }
  .patient-step-header .patient-code-preview { max-width:100%; text-align:left; }
  .login-dialog { margin-left:16px; margin-right:16px; }
}