/* White / blue company theme. Status colours retain their semantic meaning. */
:root {
  --accent: #1769d2;
  --panel: #f2f7ff;
  --muted: #657c9c;
  color: #173152;
  background: #ffffff;
  accent-color: var(--accent);
}
body, main { background: #ffffff; }
aside {
  background: #ffffff;
  border-right: 1px solid #dce8f7;
}
.brand-mark {
  margin: 0 0 30px;
  padding: 0 1px;
  font-size: 0;
  letter-spacing: 0;
  line-height: 1;
}
.brand-mark img {
  display: block;
  width: 100%;
  max-width: 187px;
  height: auto;
  object-fit: contain;
}
.brand-mark span {
  display: block;
  margin: 13px 0 0;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.6;
  color: #52749d;
  text-align: center;
}
nav button { color: #355478; }
nav button:hover { background: #edf5ff; color: #1258b2; }
nav button.active, nav .active {
  background: #1769d2;
  color: #ffffff;
  box-shadow: 0 5px 15px #1769d219;
}
.btn, a.btn { background: #1769d2; color: #ffffff; }
.btn:hover, a.btn:hover { background: #1057b5; }
.btn.light { background: #eaf3ff; color: #175bb2; }
.btn.light:hover { background: #dcecff; }
.btn.danger { background: #a83c44; color: #ffffff; }
.filters, .section-card, .metric, .feedback-row, .empty {
  background: #f2f7ff;
}
.filters { border: 1px solid #e3edfb; }
.metric { border: 1px solid #e2edfc; }
.metric:first-child {
  background: #1769d2;
  border-color: #1769d2;
  color: #ffffff;
}
.metric:first-child small { color: #d7e7ff; }
.metric strong { color: #175bb2; }
.metric:first-child strong { color: #ffffff; }
.banner {
  background: #eff6ff;
  border-color: #cddff8;
  color: #285d99;
}
input, select, textarea, .filters select {
  border-color: #ccdcf1;
  color: #173152;
}
input::placeholder, textarea::placeholder { color: #7a91ae; }
input[type=checkbox], progress { accent-color: #1769d2; }
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline-color: #76aafa;
}
.table th { background: #edf5ff; color: #355b8b; }
.table td, .table th, .table-wrap { border-color: #dfebfa; }
.lead-card { border-color: #dfebfa; border-left-color: #bbd5f5; }
.lead-card.has-issues { border-left-color: #377fda; }
.card-bottom, .source, .feedback-form { border-color: #dfebfa; }
.badge { background: #e8f1fd; color: #3e6594; }
.badge.medium, .badge.demo { background: #e4efff; color: #175bb2; }
.badge.high { background: #fff0ef; color: #b83a40; }
.badge.low { background: #edf6ef; color: #3d744d; }
.limitations { color: #557197; }
.muted, .subtitle-note, .lead-meta, .foot, .sidebar-foot { color: #68809f; }
.eyebrow { color: #577aa6; }
.finding-box, .rule-editor, dialog { border-color: #d9e7fa; }
.finding-box .recommendation { color: #285f9d; }
.bar { background: #dceafb; }
.bar-fill, progress::-webkit-progress-value { background: #1769d2; }
progress::-webkit-progress-bar { background: #dceafb; }
.login-screen { background: #f0f6ff; }
.login-card { border: 1px solid #dce9fb; box-shadow: 0 16px 55px #1769d210; }
.login-card .brand-mark { margin-bottom: 25px; }
.login-card .brand-mark img { max-width: 250px; margin: 0 auto; }
.login-card .brand-mark span { color: #1769d2; }
.sticky-save { border-color: #d8e7fb; box-shadow: 0 -4px 20px #1769d20b; }
.close { background: #eaf3ff; color: #175bb2; }
a { color: #1769d2; }
@media (max-width: 1000px) {
  .brand-mark span { font-size: 8px; letter-spacing: .6px; }
}
@media (max-width: 700px) {
  aside { border-right: 0; border-bottom: 1px solid #dce8f7; }
  .brand-mark { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
  .brand-mark img { width: 155px; max-width: 55%; }
  .brand-mark span { margin: 0; font-size: 9px; text-align: left; max-width: 135px; }
  .login-card .brand-mark { display: block; }
  .login-card .brand-mark img { width: 100%; max-width: 235px; }
  .login-card .brand-mark span { margin: 13px 0 0; max-width: none; text-align: center; }
}

/* Gentle glass surfaces: low contrast, clear text, softly rounded corners. */
main {
  background:
    radial-gradient(ellipse at 96% 4%, #dcecff66 0, transparent 38%),
    radial-gradient(ellipse at 8% 65%, #e8f3ff66 0, transparent 44%),
    #ffffff;
}
.metric, .filters, .section-card, .feedback-row, .empty {
  background: rgba(240, 247, 255, .72);
  border: 1px solid rgba(206, 225, 249, .74);
  border-radius: 23px;
  -webkit-backdrop-filter: blur(12px) saturate(108%);
  backdrop-filter: blur(12px) saturate(108%);
  box-shadow: 0 6px 24px rgba(35, 87, 153, .035), inset 0 1px 0 rgba(255, 255, 255, .95);
}
.metric:first-child {
  background: rgba(23, 105, 210, .94);
  border-color: rgba(91, 159, 247, .45);
  box-shadow: 0 9px 25px rgba(23, 105, 210, .12), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.lead-card {
  background: rgba(255, 255, 255, .84);
  border-radius: 23px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 7px 24px rgba(35, 87, 153, .045), inset 0 1px 0 #ffffff;
}
.finding-box, .rule-editor { border-radius: 18px; background: rgba(255, 255, 255, .88); }
.table-wrap { border-radius: 20px; box-shadow: 0 6px 24px rgba(35, 87, 153, .035); }
dialog {
  border-radius: 27px;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 80px rgba(20, 63, 121, .16), inset 0 1px 0 #ffffff;
}
.login-card {
  border-radius: 28px;
  background: rgba(255, 255, 255, .87);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 55px rgba(23, 105, 210, .07), inset 0 1px 0 #ffffff;
}
.sticky-save {
  background: rgba(255, 255, 255, .88);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
@supports not (backdrop-filter: blur(1px)) {
  .metric, .filters, .section-card, .feedback-row, .empty { background: #f2f7ff; }
  .metric:first-child { background: #1769d2; }
  .lead-card, .login-card, dialog, .sticky-save { background: #ffffff; }
}