:root {
  color-scheme: light;
  --app-background: #d8e3ee;
  --ink: #1b232e;
  --muted: #697780;
  --line: #acd0f2;
  --panel: #ffffff;
  --soft: #eef9fe;
  --source: #f4fbff;
  --endosoft-blue: #0d589a;
  --blue: #236eaf;
  --blue-dark: #1a3e6d;
  --blue-2: #d4effb;
  --panel-tab-bg: #e9eef3;
  --report-card-bg: #ffffff;
  --section-heading-color: #1a3e6d;
  --status-pill-bg: #236eaf;
  --teal: #5cc4bd;
  --teal-dark: #328f89;
  --field: #f5f9fc;

  --grid-header-bg: #cfe0f1;
  --grid-line: #c4d4e3;
  --row-selected: #d4effb;

  --radius-sm: 6px;
  --radius-md: 10px;
  --stroke-weight: 1px;
  --text-scale: 100%;
  --app-font: "Segoe UI", Arial, sans-serif;

  --app-page-bg: #e8f5fc;
  --app-shell-bg: #dfeaf4;
  --app-shell-gradient: linear-gradient(180deg, #eef6fb 0, #dfeaf4 120px, #d8e6f1 100%);
  --app-statusbar-bg: linear-gradient(180deg, #1d2f3d 0%, #142331 100%);
  --app-statusbar-border: rgba(28, 69, 103, .18);
  --app-statusbar-link: #8deaff;
  --app-on-dark: #ffffff;
  --app-nav-bg: linear-gradient(180deg, #174d83 0%, #123b66 55%, #102f54 100%);
  --app-nav-border: rgba(10, 42, 74, .72);
  --app-nav-item: rgba(255, 255, 255, .84);
  --app-nav-item-border: rgba(255, 255, 255, 0);
  --app-nav-item-hover-bg: rgba(255, 255, 255, .1);
  --app-nav-item-hover-border: rgba(255, 255, 255, .16);
  --app-nav-item-active-bg: #d4effb;
  --app-nav-item-active-border: rgba(255, 255, 255, .65);
  --app-nav-item-active-text: #1a3e6d;
  --app-on-dark-border-soft: rgba(255, 255, 255, .2);
  --app-on-dark-border-hover: rgba(255, 255, 255, .36);
  --app-on-dark-bg-soft: rgba(255, 255, 255, .1);
  --app-on-dark-bg-hover: rgba(255, 255, 255, .16);
  --app-on-dark-button-border: rgba(172, 208, 242, .28);
  --app-on-dark-button-bg: rgba(255, 255, 255, .08);
  --app-panel-border: rgba(133, 173, 207, .52);
  --app-panel-border-strong: rgba(133, 173, 207, .82);
  --app-panel-inner-border: rgba(178, 204, 226, .82);
  --app-panel-bg: rgba(247, 252, 255, .94);
  --app-panel-tint-bg: rgba(238, 248, 253, .92);
  --app-panel-soft-bg: rgba(229, 243, 251, .9);
  --app-panel-glass-bg: rgba(255, 255, 255, .74);
  --app-panel-hover-bg: rgba(255, 255, 255, .58);
  --app-card-bg: rgba(255, 255, 255, .92);
  --app-card-bg-strong: rgba(255, 255, 255, .96);
  --app-field-bg: #ffffff;
  --app-field-alt-bg: #f8fcff;
  --app-field-border: rgba(172, 208, 242, .75);
  --app-field-border-light: rgba(172, 208, 242, .58);
  --app-control-border: rgba(35, 110, 175, .38);
  --app-focus: rgba(20, 164, 222, .95);
  --app-focus-ring: rgba(20, 164, 222, .15);
  --app-shadow-panel: 0 10px 28px rgba(42, 74, 102, .08);
  --app-shadow-card: 0 8px 18px rgba(29, 58, 89, .08);
  --app-shadow-control: 0 4px 12px rgba(26, 62, 109, .07);
  --app-primary-bg: linear-gradient(135deg, #68d0ca 0%, #43aaa5 100%);
  --app-primary-border: rgba(92, 196, 189, .68);
  --app-primary-shadow: 0 8px 18px rgba(50, 143, 137, .2);
  --app-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, .85);
  --app-control-hover-border: #0f4f8a;
  --app-soft-blue-bg: rgba(212, 239, 251, .88);
  --app-soft-blue-bg-strong: rgba(212, 239, 251, .95);
  --app-soft-blue-bg-hover: rgba(212, 239, 251, .82);
  --app-soft-blue-bg-muted: rgba(212, 239, 251, .78);
  --app-danger-bg: linear-gradient(135deg, #f06a6e 0%, #d53b40 100%);
  --app-danger-border: rgba(239, 39, 45, .44);
  --app-danger-shadow: 0 8px 18px rgba(213, 59, 64, .18);
  --app-camera-bg: #000000;
  --app-image-badge-bg: rgba(0, 0, 0, .72);
  --app-capture-prompt-bg: rgba(240, 253, 255, .96);
  --app-capture-prompt-shadow: 0 14px 32px rgba(0, 0, 0, .24);
  --app-welcome-bg: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .92) 0 12%, rgba(255, 255, 255, 0) 38%), radial-gradient(circle at 18% 84%, rgba(91, 196, 189, .18), transparent 32%), radial-gradient(circle at 88% 18%, rgba(0, 165, 223, .16), transparent 34%), linear-gradient(145deg, #f8fcff 0%, #e7f4fb 44%, #dbeaf5 100%);
  --app-welcome-grid-bg: linear-gradient(90deg, rgba(255, 255, 255, .24) 1px, transparent 1px), linear-gradient(180deg, rgba(255, 255, 255, .24) 1px, transparent 1px);
  --app-brand-heading: #173f66;
  --app-brand-text: #153f74;
  --app-logo-shadow: drop-shadow(0 18px 28px rgba(23, 77, 131, .13));
  --app-text-highlight-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  --app-user-bubble-bg: rgba(239, 251, 249, .95);
  --app-user-bubble-border: rgba(133, 212, 198, .6);
  --app-code-bg: rgba(15, 34, 53, .08);
  --app-pre-bg: rgba(12, 30, 45, .06);
  --app-scroll-thumb: rgba(23, 58, 87, .28);
  --app-composer-bg: rgba(235, 245, 251, .94);
  --app-modal-shadow: 0 12px 28px rgba(26, 62, 109, .18);
  --app-overlay-bg: rgba(225, 238, 248, .82);
  --app-overlay-panel-bg: rgba(255, 255, 255, .95);
  --app-version-text: rgba(26, 62, 109, .7);
  --app-inactive-text: rgba(42, 74, 102, .72);
  --app-report-toolbar-border: rgba(35, 110, 175, .22);
  --app-subtab-border: rgba(35, 110, 175, .24);
  --app-select-border: rgba(80, 80, 80, .28);
  --app-mobile-nav-border: rgba(133, 173, 207, .58);
  --auth-heading: #22313f;
  --auth-label: #43505c;
  --auth-muted-link: #557088;
  --auth-input-border: rgba(154, 178, 196, .62);
  --auth-input-border-soft: rgba(154, 178, 196, .42);
  --auth-error-bg: rgba(255, 241, 241, .95);
  --auth-error-border: rgba(239, 39, 45, .28);
  --auth-error-text: #8c1f24;
  --auth-success-bg: rgba(240, 251, 246, .95);
  --auth-success-border: rgba(104, 217, 155, .38);
  --auth-success-text: #23664d;
  --auth-submit-bg: #328f89;
  --auth-submit-hover-bg: #2b817c;
  --auth-submit-border: rgba(50, 143, 137, .5);
  --auth-submit-shadow: 0 10px 20px rgba(50, 143, 137, .16);
  --auth-submit-hover-shadow: 0 12px 24px rgba(50, 143, 137, .22);
  --auth-logo-shadow: drop-shadow(0 12px 24px rgba(29, 68, 103, .12));
  --auth-divider-shadow: -16px 0 42px rgba(29, 68, 103, .08);
  --auth-input-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  --auth-control-hover-bg: rgba(26, 62, 109, .07);
  --auth-focus-ring: rgba(92, 196, 189, .18);
  --auth-focus-outline: rgba(92, 196, 189, .7);
  --auth-link-bg: rgba(255, 255, 255, .72);
  --auth-link-hover-border: rgba(35, 110, 175, .3);
  --auth-footer-text: rgba(67, 80, 92, .76);
  --auth-version-text: rgba(67, 80, 92, .68);
  --auth-mobile-panel-shadow: 0 -16px 42px rgba(0, 34, 66, .08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--app-font);
  font-size: var(--text-scale);
  color: var(--ink);
  background: var(--app-background);
}

button,
select,
textarea {
  font: inherit;
}

i {
  font-size: .92em;
}

button i {
  margin-right: 7px;
}

.quick-tools button i {
  margin-right: 0;
}

button {
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

button:hover {
  box-shadow: 0 3px 10px rgba(26, 62, 109, .1);
}

.primary-action {
  border: var(--stroke-weight) solid rgba(26, 62, 109, .22);
  border-radius: var(--radius-sm);
  background: #f8fcff;
  color: var(--blue-dark);
  font-weight: 700;
  min-height: 32px;
  padding: 0 14px;
}

.primary-action:hover {
  background: #ffffff;
}

.primary-action {
  border-color: rgba(50, 143, 137, .58);
  background: var(--teal);
  color: #ffffff;
}

.primary-action:hover {
  background: #3e9f97;
}

.quick-tools {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  background: #eaf6fd;
  border-bottom: var(--stroke-weight) solid rgba(172, 208, 242, .75);
}

.quick-tools button,
.subtabs button {
  min-height: 32px;
  border: var(--stroke-weight) solid rgba(35, 110, 175, .35);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .86);
  color: var(--blue-dark);
  cursor: pointer;
}

.subtabs button:hover {
  background: #ffffff;
  border-color: rgba(35, 110, 175, .55);
  box-shadow: none;
}

.quick-tools button:hover {
  background: #14A4DE;
  border-color: #14A4DE;
  color: #ffffff;
  box-shadow: none;
}

.quick-tools .mic:hover {
  background: #ffffff;
  border-color: rgba(35, 110, 175, .55);
  color: var(--blue-dark);
  box-shadow: none;
}

.quick-tools button {
  width: 38px;
  font-weight: 700;
}

.quick-tools .mic {
  background: #38b973;
  color: #fff;
  border-color: rgba(56, 185, 115, .8);
}

.subtabs {
  display: flex;
  gap: 8px;
  padding: 10px 14px 0;
  background: transparent;
}

.subtabs button {
  padding: 0 16px;
  font-weight: 700;
  border-color: rgba(35, 110, 175, .24);
  background: var(--panel-tab-bg);
}

.subtabs .active {
  background: var(--blue-dark);
  color: #ffffff;
  border-color: var(--blue-dark);
  box-shadow: 0 4px 12px rgba(26, 62, 109, .16);
}

.subtabs .active:hover {
  background: var(--blue-dark);
}

.tab-view {
  min-height: 0;
  display: none;
}

.tab-view.active {
  min-height: 0;
  display: grid;
}

.tab-view[data-tab-view="procedure"].active {
  grid-template-rows: 1fr auto;
}

.quality-view.active {
  grid-template-rows: auto auto minmax(210px, auto) auto;
  gap: 14px;
  padding: 12px 14px 14px;
  overflow: auto;
}

.quality-card,
.quality-landmark-panel,
.bowel-prep-panel article {
  background: #ffffff;
  border: var(--stroke-weight) solid rgba(172, 208, 242, .75);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(26, 62, 109, .03);
}

.quality-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}

.quality-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
  align-items: center;
  padding: 12px;
}

.quality-card h2 {
  grid-column: 1 / -1;
  font-size: 14px;
  color: var(--blue-dark);
}

.quality-card label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}

.quality-card select,
.prep-summary select {
  min-height: 30px;
  border: var(--stroke-weight) solid rgba(80, 80, 80, .28);
  border-radius: var(--radius-sm);
  background: var(--field);
  padding: 4px 8px;
}

.quality-landmark-panel {
  display: grid;
  grid-template-columns: minmax(480px, 1fr) 230px;
  gap: 10px;
  padding: 10px 12px;
  align-items: start;
}

.quality-panel-heading {
  grid-column: 1 / -1;
  color: var(--blue-dark);
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  line-height: 1;
}

.quality-landmark-panel table {
  align-self: start;
  background: #ffffff;
}

.quality-landmark-panel th,
.quality-landmark-panel td {
  padding: 7px 8px;
}

.quality-landmark-panel tbody tr {
  height: 30px;
}

.quality-landmark-panel tr.selected {
  background: rgba(92, 196, 189, .14);
}

.bowel-prep-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr)) minmax(190px, .75fr);
  gap: 10px;
}

.bowel-prep-panel article {
  padding: 12px;
}

.bowel-prep-panel h2 {
  margin-bottom: 14px;
  font-size: 14px;
}

.prep-summary {
  display: grid;
  gap: 10px;
}

.prep-summary strong {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--blue-dark);
}

.prep-summary #bbp-total-score {
  min-width: 34px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--line);
}

.report-card {
  background: var(--report-card-bg);
  border: var(--stroke-weight) solid rgba(172, 208, 242, .7);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(26, 62, 109, .03);
}

.report-card {
  padding: 14px 16px;
}

.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

h2 {
  margin: 0;
  color: var(--section-heading-color);
  font-size: 18px;
}

.card-title span {
  flex: 0 0 auto;
  padding: 3px 9px;
  background: var(--status-pill-bg);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}

ol,
p {
  margin: 0;
}

ol {
  padding-left: 22px;
}

select,
textarea {
  width: 100%;
  border: var(--stroke-weight) solid rgba(80, 80, 80, .28);
  border-radius: var(--radius-sm);
  background: var(--field);
  padding: 7px 8px;
}

select:focus {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.report-card ol {
  width: 100%;
  margin: 0;
  padding: 8px 8px 8px 30px;
  border: var(--stroke-weight) solid rgba(80, 80, 80, .28);
  border-radius: var(--radius-sm);
  background: var(--field);
}

.report-card ol:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(35, 110, 175, .12);
}

textarea {
  min-height: 72px;
  resize: vertical;
}

.report-card textarea {
  min-height: 118px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  padding: 7px 9px;

  border-bottom: var(--stroke-weight) solid var(--grid-line);
  border-right: var(--stroke-weight) solid var(--grid-line);
  text-align: left;
}

th:last-child,
td:last-child {
  border-right: 0;
}

tbody tr.selected { background: var(--row-selected); }

th {
  background: var(--grid-header-bg);
  color: var(--blue-dark);
  font-weight: 700;
  border-bottom-color: #a9c2da;
}

.subtabs {
  gap: 0 !important;
  padding: 8px 14px 0 !important;
  border-bottom: var(--stroke-weight) solid rgba(172, 208, 242, .9);
}

.subtabs button {
  min-height: 36px;
  padding: 0 18px !important;
  margin-right: 4px;
  border: var(--stroke-weight) solid rgba(172, 208, 242, .9) !important;
  border-bottom: 0 !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  background: #eef7fd !important;
  color: #31516d !important;
  box-shadow: none !important;
  position: relative;
  top: 1px;
}

.subtabs .active {
  background: var(--blue-dark) !important;
  border-color: var(--blue-dark) !important;
  color: #ffffff !important;
  z-index: 1;
}

.subtabs button:not(.active) {
  opacity: .86;
}

.subtabs button:not(.active):hover {
  color: var(--ink) !important;
  background: #e3eef8 !important;
  opacity: 1;
  box-shadow: none !important;
}