:root {
  --tech-blue: #0866ff;
  --tech-blue-deep: #073b8f;
  --navy: #0c2340;
  --surface: #ffffff;
  --surface-soft: #f4f8ff;
  --line-blue: #d8e5f5;
  --bg: #eef4fb;
  --paper: var(--surface);
  --ink: #10233f;
  --muted: #667b96;
  --line: var(--line-blue);
  --green: var(--tech-blue);
  --mint: #e8f1ff;
  --nav: #092a5e;
  --amber: #b86c08;
  --red: #c43f3f;
  --blue: var(--tech-blue);
  color-scheme: light;
}

body {
  background:
    linear-gradient(rgba(8, 102, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 102, 255, .025) 1px, transparent 1px),
    var(--bg);
  background-size: 30px 30px;
}

.topbar {
  background: rgba(255, 255, 255, .96);
  border-color: var(--line-blue);
  box-shadow: 0 8px 30px rgba(25, 67, 120, .07);
  backdrop-filter: blur(14px);
}

.topbar h1, .panel h2, .moss-title h2, .dialog-head h2 { color: var(--navy); }
.topbar p, .panel-head p, .moss-title p, .dialog-head p { color: var(--tech-blue); }

.mode {
  color: var(--tech-blue-deep);
  background: #eaf2ff;
  border: 1px solid #cfe0f8;
}

.button {
  color: #fff;
  background: var(--tech-blue);
  border-color: var(--tech-blue);
  box-shadow: 0 6px 16px rgba(8, 102, 255, .16);
}

.button:hover { background: #0058e7; }
.button.ghost { color: var(--tech-blue-deep); background: #fff; border-color: #bcd1ea; box-shadow: none; }

.sidebar {
  color: #e9f2ff;
  background: linear-gradient(180deg, #082c63 0%, #0a3978 100%);
  box-shadow: 8px 0 30px rgba(4, 35, 78, .14);
}

.sidebar::before { color: #fff; }
.nav, .category-button { color: #c5d8f1; }
.nav.active, .category-button.active, .nav:hover, .category-button:hover {
  color: #fff;
  background: rgba(83, 157, 255, .28);
}

.side-title { color: #88b5ef; }
.category-button span { color: #9ec2f0; }
.legend { color: #b8cee8; }
.legend b { color: #fff; }
.legend .l1 { background: #6bb0ff; }
.legend .l2 { background: #23c3dd; }
.legend .l3 { background: #ffbd4a; }

.summary article, .panel {
  border-color: var(--line-blue);
  box-shadow: 0 10px 28px rgba(23, 65, 116, .07);
}

.summary article { position: relative; overflow: hidden; }
.summary article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tech-blue);
}

.summary strong, .level { color: var(--tech-blue-deep); }
.panel-head input, .form-grid input, .form-grid select {
  color: var(--ink);
  background: #fff;
  border-color: #cbdced;
}

.panel-head input:focus, .form-grid input:focus, .form-grid select:focus {
  border-color: var(--tech-blue);
  outline: 3px solid rgba(8, 102, 255, .12);
}

th { color: #5d718b; background: #f3f7fc; }
th, td { border-color: #e3ebf4; }
tbody tr:hover, tbody tr.active { background: #eef5ff; }

.status { color: #53667d; background: #eef2f6; }
.status.pending { color: #8a5409; background: #fff2dc; }
.status.approved { color: #0b5a93; background: #e5f3ff; }
.status.returned { color: #9c3732; background: #ffe9e6; }

.meta-card, .mean-card { background: #f3f7fc; }
.calculation { background: #edf5ff; border-left-color: var(--tech-blue); }
.calculation strong, .mean-card strong, .chain-item b { color: var(--tech-blue-deep); }

.evidence-item, .timeline-item, .chain-item { border-color: #d6e3f1; background: #fff; }

.l1-chip {
  color: var(--tech-blue-deep) !important;
  background: #e8f1ff;
  border: 1px solid #c5daf6;
}

.moss-kpis article {
  color: #fff;
  background: linear-gradient(135deg, #0b3f91, #0878ff);
  box-shadow: 0 10px 22px rgba(8, 84, 184, .17);
}

.moss-kpis span { color: #d5e7ff; }
.warning-card { background: #fff8e9; border-color: #f0d39f; }

.evidence-slot {
  color: var(--ink);
  background: #f5f9ff center / cover;
  border-color: #9fbfe4;
}

.evidence-slot:hover { border-color: var(--tech-blue); background-color: #edf5ff; }
.evidence-slot b { color: var(--tech-blue-deep); }
.audit-card { background: #fff8ea; }
.limitations { color: #893936; background: #fff0ee; }

dialog { background: #fff; box-shadow: 0 25px 90px rgba(8, 35, 72, .32); }
dialog::backdrop { background: rgba(5, 28, 61, .56); }

@media (max-width: 1100px) {
  .summary { grid-template-columns: repeat(2, 1fr); }
  .moss-kpis { grid-template-columns: repeat(5, 1fr); }
  .workspace { padding-inline: 16px; }
}