/* Desktop clinical form polish — reference layout */
@media (min-width: 901px) {
  .main {
    max-width: none;
  }

  .procedure-detail {
    padding: 22px;
  }

  .clinical-form-section {
    border-radius: 14px;
    margin: 16px 0;
  }

  .clinical-form-section > header {
    padding: 18px 22px;
  }

  .clinical-form-section > header h4 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
  }

  .clinical-form-section > header span {
    font-size: 24px;
  }

  .clinical-form-grid {
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 22px 24px;
    padding: 24px;
  }

  .clinical-form-grid label {
    display: block;
    min-width: 0;
  }

  .clinical-form-grid label > span {
    display: block;
    min-height: 17px;
    margin: 0 0 8px;
    color: #31485b !important;
    font-size: 12px !important;
    font-weight: 650;
    letter-spacing: 0 !important;
    line-height: 1.35;
    text-transform: none;
  }

  .clinical-form-grid input,
  .clinical-form-grid select,
  .clinical-form-grid textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid #cfd8e3 !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: #172b3c;
    font: inherit;
    font-size: 14px;
    line-height: 1.35;
    box-shadow: 0 1px 2px rgba(22, 45, 70, .025);
  }

  .clinical-form-grid textarea {
    min-height: 72px;
    resize: vertical;
  }

  .clinical-form-grid input:focus,
  .clinical-form-grid select:focus,
  .clinical-form-grid textarea:focus {
    border-color: #1779d2 !important;
    outline: 3px solid rgba(23, 121, 210, .12);
  }

  .demographic-inline label > span {
    display: block;
    margin-bottom: 8px;
    color: #31485b;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
  }

  .demographic-inline input,
  .demographic-inline select,
  .demographic-inline button {
    box-sizing: border-box;
    height: 46px;
    font-size: 14px;
  }

  .inline-save button,
  .editor-actions button {
    min-height: 44px;
    padding: 0 22px !important;
    font-size: 13px;
  }
}

/* Prevent wide forms from enlarging the application beyond the viewport. */
@media (min-width: 901px) {
  .shell { grid-template-columns: 245px minmax(0, 1fr); }
  .main, .module, .patient-hero, .demographic-inline { min-width: 0; }
}

/* Compact desktop / browser zoom: keep every action inside the card. */
@media (min-width: 901px) and (max-width: 1500px) {
  .demographic-inline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .demographic-inline button[type="submit"] {
    grid-column: 4;
    justify-self: end;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .demographic-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demographic-inline button[type="submit"] { grid-column: 2; }
}

/* Editable dd-mm-yyyy field with native mouse calendar. */
.date-picker-shell{position:relative;display:flex;width:100%;min-width:0}
.date-picker-shell>input[type="text"]{width:100%;padding-right:48px!important}
.native-date-picker{position:absolute!important;width:1px!important;height:1px!important;right:16px!important;bottom:4px!important;opacity:0!important;pointer-events:none!important}
.date-picker-button{position:absolute;right:5px;bottom:5px;width:36px;height:36px;border:0;border-radius:8px;background:#eaf5ff;color:#086bd6;font-size:21px;line-height:1;cursor:pointer;transition:background .18s ease,transform .18s ease}
.date-picker-button:hover{background:#dceeff;transform:translateY(-1px)}
.date-picker-button:focus-visible{outline:3px solid rgba(8,107,214,.18)}
.demographic-inline .date-picker-button,
.create-card .date-picker-button{
  position:absolute!important;
  right:5px!important;
  bottom:5px!important;
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  padding:0!important;
  border:0!important;
  border-radius:8px!important;
  background:#eaf5ff!important;
  color:#086bd6!important;
  font-size:21px!important;
  line-height:1!important;
  box-shadow:none!important;
  display:grid!important;
  place-items:center!important;
}
.date-picker-button>span,
.demographic-inline .date-picker-button>span,
.create-card .date-picker-button>span{
  display:block!important;
  margin:0!important;
  padding:0!important;
  color:inherit!important;
  font:inherit!important;
  font-size:21px!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-transform:none!important;
}

/* Excel export panel. */
.export-card{margin-top:24px;background:#fff;border:1px solid #dbe7eb;border-radius:18px;padding:26px 30px;box-shadow:0 8px 24px rgba(18,59,79,.06)}
.export-card>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e6eef1;padding-bottom:18px;margin-bottom:18px}
.export-card h3{margin:5px 0 0;color:#123b53;font-size:23px}
.export-card>p{color:#718894;margin:0 0 20px}
.export-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:#e4f5f8;color:#087d9d;font-size:26px;font-weight:700}
.export-actions{display:flex;align-items:flex-end;gap:18px}
.export-actions form{margin:0}
.export-range{display:grid;grid-template-columns:minmax(190px,1fr) minmax(190px,1fr) auto;gap:14px;align-items:end;flex:1}
.export-range label>span{display:block;margin-bottom:7px;color:#294b5e;font-size:12px;font-weight:700}
.export-range input{width:100%;height:48px;border:1px solid #d2e2e7;border-radius:10px;padding:0 48px 0 14px;background:#fbfdfd;color:#163c50;font-size:14px}
.export-actions button{height:48px;border:0;border-radius:10px;padding:0 22px;background:#087d9d;color:#fff;font-weight:700;cursor:pointer;white-space:nowrap}
.export-actions .export-all{background:#0b70d1}
.export-actions button:hover{filter:brightness(.96)}
.export-range .date-picker-button{height:36px!important;width:36px!important;min-width:36px!important;padding:0!important;right:6px!important;bottom:6px!important;background:#eaf5ff!important;color:#086bd6!important}
.clinical-form-grid label:has([name$="_post_bbns"]){background:#f6fbff;border:1px solid #d8eafb;border-radius:10px;padding:12px}
.clinical-form-grid label:has([name="acute_bbns_response"]){grid-column:1/-1;max-width:420px;margin-top:8px;padding-top:16px;border-top:1px solid #dce8ed}
.clinical-form-grid .dependent-field-hidden{display:none!important}
@media(max-width:900px){.export-actions{align-items:stretch;flex-direction:column}.export-range{width:100%;grid-template-columns:1fr 1fr}.export-range button{grid-column:1/-1}}
@media(max-width:560px){.export-card{padding:20px}.export-range{grid-template-columns:1fr}.export-range button{grid-column:auto}}

/* Professional success confirmation. */
.saved-modal .app-modal-panel{max-width:470px;text-align:center;padding:38px}
.saved-modal-icon{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 18px;border-radius:50%;background:#e3f7f0;color:#168269;font-size:34px;font-weight:800;box-shadow:0 0 0 9px rgba(34,155,119,.08)}
.saved-modal-kicker{display:block;color:#168269;font-size:11px;font-weight:800;letter-spacing:.14em}
.saved-modal h2{margin:9px 0 10px;color:#173a4d;font-size:27px}
.saved-modal p{margin:0;color:#718994;font-size:15px;line-height:1.55}
.saved-modal footer{justify-content:center!important;margin-top:27px!important}
.saved-modal-accept{min-width:150px;border:0;border-radius:11px;background:#087d9d;color:#fff;padding:14px 24px;font-size:14px;font-weight:750;cursor:pointer;box-shadow:0 8px 20px rgba(8,125,157,.2)}

@media (min-width: 901px) and (max-width: 1300px) {
  .clinical-form-grid {
    grid-template-columns: repeat(3, minmax(170px, 1fr));
  }
}

@media (max-width: 900px) {
  .clinical-form-grid label > span {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 650;
  }

  .clinical-form-grid input,
  .clinical-form-grid select,
  .clinical-form-grid textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* Dashboard clínico */
.dashboard-wrap {
  max-width: 1450px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.dashboard-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 230px;
  margin-bottom: 22px;
  padding: 38px 44px;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(125deg, #083c5a 0%, #096982 55%, #18a4b4 100%);
  color: #fff;
  box-shadow: 0 18px 48px rgba(12, 67, 91, .18);
}

.dashboard-hero::after {
  position: absolute;
  right: -90px;
  bottom: -150px;
  width: 410px;
  height: 410px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(255,255,255,.035), 0 0 0 110px rgba(255,255,255,.025);
  content: "";
}

.dashboard-hero > div:first-child {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.dashboard-hero .k {
  color: #8fe9ef;
}

.dashboard-hero h2 {
  margin: 10px 0 12px;
  font-size: clamp(27px, 2.35vw, 40px);
  line-height: 1.12;
  letter-spacing: -.035em;
}

.dashboard-hero p {
  max-width: 650px;
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  gap: 11px;
  margin-top: 25px;
}

.hero-actions button {
  height: 44px;
  padding: 0 19px;
  border: 1px solid #fff;
  border-radius: 9px;
  background: #fff;
  color: #0a5b75;
  font-weight: 750;
  cursor: pointer;
}

.hero-actions button.secondary {
  border-color: rgba(255,255,255,.36);
  background: rgba(255,255,255,.09);
  color: #fff;
}

.hero-symbol {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 145px;
  height: 145px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
}

.hero-symbol b,
.hero-symbol span {
  display: block;
  text-align: center;
}

.hero-symbol b {
  margin-top: 29px;
  font-size: 31px;
  letter-spacing: .04em;
}

.hero-symbol span {
  align-self: start;
  color: #a9eef2;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}

.dashboard-stats article {
  display: flex;
  align-items: center;
  gap: 17px;
  min-height: 125px;
  padding: 23px 25px;
  border: 1px solid #dfe7ed;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(30, 58, 90, .045);
}

.stat-icon {
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 13px;
  background: #e8f7fa;
  color: #0785a4;
  font-size: 23px;
}

.stat-icon.warning {
  background: #fff4dc;
  color: #c27b00;
  font-weight: 800;
}

.dashboard-stats small,
.dashboard-stats strong,
.dashboard-stats p {
  display: block;
}

.dashboard-stats small {
  color: #78909c;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .11em;
}

.dashboard-stats strong {
  margin: 3px 0 1px;
  color: #173d50;
  font-size: 28px;
}

.dashboard-stats p {
  margin: 0;
  color: #8297a1;
  font-size: 11px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
  gap: 18px;
  align-items: start;
}

.dashboard-card {
  overflow: hidden;
  border: 1px solid #dfe7ed;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(30, 58, 90, .045);
}

.dashboard-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid #e8eef2;
}

.dashboard-card h3 {
  margin: 5px 0 0;
  color: #1e4052;
  font-size: 17px;
}

.recent-card header button {
  border: 0;
  background: transparent;
  color: #087d9d;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.recent-list a {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  min-height: 72px;
  padding: 11px 24px;
  border-bottom: 1px solid #edf2f4;
  color: inherit;
  text-decoration: none;
}

.recent-list a:last-child {
  border-bottom: 0;
}

.recent-list a:hover {
  background: #f7fbfc;
}

.recent-list time {
  display: grid;
  place-items: center;
  width: 46px;
  height: 48px;
  border-radius: 10px;
  background: #e9f7fa;
  color: #087d9d;
}

.recent-list time b {
  align-self: end;
  font-size: 16px;
}

body.modal-open {
  overflow: hidden;
}

.app-modal[hidden] {
  display: none;
}

.app-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 22px;
}

.app-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 30, 44, .62);
  backdrop-filter: blur(4px);
  animation: modal-fade .16s ease-out;
}

.app-modal-panel {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(100%, 500px);
  padding: 31px 32px 27px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(5, 30, 48, .3);
  animation: modal-rise .2s ease-out;
}

.app-modal-x {
  position: absolute;
  top: 16px;
  right: 17px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f1f5f7;
  color: #58717e;
  font-size: 21px;
  cursor: pointer;
}

.app-modal-icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 14px;
  background: #fff0ef;
  color: #c63c43;
  font-size: 24px;
  font-weight: 800;
}

.app-modal-kicker {
  color: #c43a41;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}

.app-modal-panel h2 {
  margin: 7px 0 8px;
  color: #173d50;
  font-size: 25px;
  letter-spacing: -.025em;
}

.app-modal-panel > p {
  margin: 0;
  color: #708792;
  font-size: 12px;
  line-height: 1.55;
}

.app-modal-patient {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid #e1e9ed;
  border-radius: 10px;
  background: #f7fafb;
}

.app-modal-patient small,
.app-modal-patient strong {
  display: block;
}

.app-modal-patient small {
  margin-bottom: 4px;
  color: #8699a2;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .11em;
}

.app-modal-patient strong {
  color: #23485a;
  font-size: 14px;
}

.app-modal-warning {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 10px;
}

.app-modal-warning.has-procedures {
  border: 1px solid #f1cdc9;
  background: #fff5f3;
  color: #9c3538;
}

.app-modal-warning.no-procedures {
  border: 1px solid #cfe9e1;
  background: #f0faf7;
  color: #287665;
}

.app-modal-warning strong,
.app-modal-warning span {
  display: block;
}

.app-modal-warning strong {
  font-size: 12px;
}

.app-modal-warning span {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.45;
}

.app-modal-panel .app-modal-audit {
  margin-top: 13px;
  color: #82949d;
  font-size: 9px;
}

.app-modal-panel footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 23px;
  padding-top: 19px;
  border-top: 1px solid #e8eef1;
}

.app-modal-panel footer button {
  height: 43px;
  padding: 0 17px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.modal-cancel {
  border: 1px solid #d5e0e5;
  background: #fff;
  color: #496371;
}

.modal-danger {
  border: 1px solid #c83c43;
  background: #cf3f45;
  color: #fff;
  box-shadow: 0 5px 14px rgba(207,63,69,.18);
}

.modal-danger:hover {
  background: #b83238;
}

.modal-danger:disabled {
  opacity: .58;
}

@keyframes modal-fade {
  from { opacity: 0; }
}

@keyframes modal-rise {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
}

@media (max-width: 560px) {
  .app-modal {
    align-items: end;
    padding: 10px;
  }

  .app-modal-panel {
    padding: 27px 22px 22px;
    border-radius: 17px;
  }

  .app-modal-panel footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .modal-danger {
    grid-row: 1;
  }
}

/* Keep both procedure actions in one visual action bar */
@media (min-width: 801px) {
  .procedure-detail {
    position: relative;
  }

  .procedure-detail .inline-save {
    box-sizing: border-box;
    min-height: 72px;
    padding-right: 226px !important;
  }

  .procedure-detail .procedure-controls {
    position: absolute;
    right: 36px;
    bottom: 36px;
    z-index: 4;
    width: 190px;
    margin: 0;
  }

  .procedure-detail .procedure-controls form,
  .procedure-detail .procedure-controls button {
    width: 100%;
  }
}

@media (max-width: 800px) {
  .procedure-detail .inline-save {
    display: grid;
    grid-template-columns: 1fr;
  }

  .procedure-detail .inline-save button,
  .procedure-detail .procedure-controls button {
    width: 100%;
  }
}

.recent-list time span {
  align-self: start;
  font-size: 8px;
  font-weight: 750;
}

.recent-list strong,
.recent-list small {
  display: block;
}

.recent-list strong {
  color: #24485a;
  font-size: 12px;
}

.recent-list small {
  margin-top: 5px;
  overflow: hidden;
  color: #8297a1;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-list em {
  color: #1687a2;
  font-size: 10px;
  font-style: normal;
}

.create-card > header {
  justify-content: flex-start;
  gap: 12px;
}

.create-icon {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border-radius: 10px;
  background: #e5f6f9;
  color: #0785a4;
  font-size: 20px;
  font-weight: 700;
}

.create-card > p {
  margin: 19px 24px 0;
  color: #78909c;
  font-size: 11px;
}

.create-card form {
  padding: 18px 24px 23px;
}

.create-card label,
.create-card label > span {
  display: block;
}

.create-card label > span {
  margin-bottom: 7px;
  color: #3a5362;
  font-size: 11px;
  font-weight: 700;
}

.create-card label > span b {
  color: #d05252;
}

.create-card input,
.create-card select {
  box-sizing: border-box;
  width: 100%;
  height: 43px;
  padding: 0 11px;
  border: 1px solid #d4e0e5;
  border-radius: 8px;
  background: #fff;
  color: #24485a;
  font-size: 12px;
}

.create-card input:focus,
.create-card select:focus {
  border-color: #1387a7;
  outline: 3px solid rgba(19,135,167,.1);
}

.create-patient-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-top: 12px;
}

.create-patient-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.create-patient-actions button {
  height: 43px;
  padding: 0 17px;
  border: 0;
  border-radius: 8px;
  background: #087d9d;
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.create-patient-actions button:disabled {
  opacity: .55;
}

#create-patient-status {
  color: #a3413a;
  font-size: 10px;
}

#create-patient-status.ok {
  color: #23826f;
}

/* Destructive action aligned with the primary procedure action */
.procedure-controls button {
  box-sizing: border-box;
  min-width: 190px;
  min-height: 44px;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #cf3f45 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  box-shadow: 0 5px 14px rgba(207, 63, 69, .18);
}

.procedure-controls button:hover {
  background: #b83238 !important;
}

.procedure-controls button:focus-visible {
  outline: 3px solid rgba(207, 63, 69, .2);
  outline-offset: 2px;
}

.delete-patient-form {
  margin: 0;
}

.delete-patient-form button {
  box-sizing: border-box;
  height: 44px;
  padding: 0 17px;
  border: 0;
  border-radius: 9px;
  background: #cf3f45;
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(207,63,69,.16);
}

.delete-patient-form button:hover {
  background: #b83238;
}

.procedure-date {
  box-sizing: border-box;
  width: 84px;
  padding: 9px 7px;
}

.procedure-date b {
  font-size: 11px;
  white-space: nowrap;
}

.procedure-card summary {
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 18px;
  padding: 17px 21px;
}

@media (max-width: 700px) {
  .procedure-card summary {
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 12px;
    padding: 14px;
  }
}

.procedure-summary-title strong {
  color: #183f53;
  font-size: 15px;
  font-weight: 750;
}

.recent-list a {
  grid-template-columns: 88px minmax(0, 1fr) auto;
}

.recent-list time {
  width: 80px;
}

.recent-list time b {
  align-self: center;
  font-size: 10px;
  white-space: nowrap;
}

@media (max-width: 800px) {
  .delete-patient-form,
  .delete-patient-form button {
    width: 100%;
  }
}

@media (max-width: 1100px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-hero {
    padding: 32px;
  }
}

@media (max-width: 760px) {
  .dashboard-hero {
    min-height: auto;
    padding: 27px 23px;
    border-radius: 16px;
  }

  .hero-symbol {
    display: none;
  }

  .hero-actions,
  .dashboard-stats,
  .create-patient-row {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    display: grid;
  }

  .dashboard-stats {
    display: grid;
  }

  .dashboard-grid {
    display: block;
  }

  .dashboard-card + .dashboard-card {
    margin-top: 16px;
  }

  .recent-list a {
    grid-template-columns: 48px minmax(0,1fr);
    padding: 10px 16px;
  }

  .recent-list em {
    display: none;
  }
}
/* Patient demographic card: spacious desktop layout */
@media (min-width: 901px) {
  .demographic-inline {
    grid-template-columns: minmax(190px,1.1fr) minmax(240px,1.35fr) minmax(150px,.75fr) minmax(220px,1fr) auto;
    column-gap: 24px;
    row-gap: 24px;
    padding: 0 30px 30px;
    margin-top: 22px;
    margin-bottom: 46px;
    border-radius: 18px;
  }
  .demographic-title { margin: 0 -30px 4px; padding: 23px 30px; gap: 15px; }
  .demographic-title .section-icon { display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#eaf5ff; }
  .demographic-title strong { font-size:18px; }
  .demographic-title small { font-size:12px;margin-top:4px; }
  .demographic-inline label span { margin-bottom:10px;color:#263f52;font-size:12px;font-weight:700;letter-spacing:0;text-transform:none; }
  .demographic-inline input,.demographic-inline select { height:54px;padding:0 16px;border-radius:11px;font-size:15px;background:#fff;transition:border-color .18s ease,box-shadow .18s ease; }
  .demographic-inline input:focus,.demographic-inline select:focus { outline:0;border-color:#138cac;box-shadow:0 0 0 4px rgba(19,140,172,.11); }
  .demographic-inline button { height:54px;min-width:132px;border-radius:11px;padding:0 24px;font-size:14px;box-shadow:0 7px 16px rgba(8,125,157,.16); }
  .demographic-inline #demographic-status { min-height:18px;margin-top:-10px;font-size:12px; }
}

/* Final responsive constraints: must remain after the desktop card rules. */
@media (min-width: 901px) {
  .shell { grid-template-columns: 245px minmax(0,1fr); }
  .main,.module,.patient-hero,.demographic-inline { min-width:0; }
}
@media (min-width: 901px) and (max-width: 1500px) {
  .demographic-inline { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .demographic-inline button[type="submit"] { grid-column:4;justify-self:end; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .demographic-inline { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .demographic-inline button[type="submit"] { grid-column:2; }
}