:root {
  color-scheme: light;
  --ink: #142f46;
  --muted: #64788a;
  --navy: #112c45;
  --mint: #8ce6d4;
  --teal: #207f78;
  --bg: #f4f7fa;
  --line: #e1e9ef;
  --white: #fff;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "DejaVu Sans",
    sans-serif;
  font-synthesis: none;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
  opacity: 0.5;
}
button:disabled:hover {
  transform: none;
  box-shadow: none;
}
img,
svg {
  max-width: 100%;
}
img {
  display: block;
}
button .icon,
a .icon {
  flex-shrink: 0;
}
.icon {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  flex-shrink: 0;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  letter-spacing: -0.035em;
  line-height: 1.2;
}
h1 {
  font-size: 38px;
  margin-bottom: 16px;
}
h2 {
  font-size: 26px;
  margin-bottom: 15px;
}
h3 {
  font-size: 21px;
  margin-bottom: 12px;
}
p {
  margin-bottom: 20px;
}
small {
  font-size: 12px;
}
strong {
  font-weight: 650;
}
em {
  font-style: normal;
}
::selection {
  background: #bcefe4;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #0b857c;
  outline-offset: 4px;
}
main:focus {
  outline: none;
}
.skip-link {
  position: fixed;
  z-index: 100;
  left: 24px;
  top: 12px;
  background: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  transform: translateY(-150%);
}
.skip-link:focus {
  transform: none;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 220px;
  background: var(--white);
  border-right: 1px solid var(--line);
  padding: 36px 22px 24px;
  z-index: 20;
  display: flex;
  flex-direction: column;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  line-height: 1.25;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.03em;
}
.brand img {
  width: 42px;
  height: 42px;
}
.brand strong {
  display: block;
  font-size: 23px;
  letter-spacing: 0.07em;
}
.nav-label {
  font-size: 9px;
  letter-spacing: 0.09em;
  color: #84919e;
  margin: 42px 0 14px 8px;
  font-weight: 650;
}
.sidebar nav {
  display: grid;
  gap: 8px;
}
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 11px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 550;
  color: var(--muted);
  line-height: 1.5;
}
.sidebar nav a:hover {
  background: #f1f7f7;
  color: var(--ink);
}
.sidebar nav a[aria-current] {
  background: #e8f4f0;
  color: #246f63;
}
.sidebar nav .icon {
  width: 20px;
  height: 20px;
}
.side-bottom {
  margin-top: auto;
  text-align: center;
  padding-top: 30px;
}
.side-bottom img {
  width: 76px;
  margin: 0 auto 14px;
}
.side-bottom p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 12px;
}
.side-bottom small {
  font-size: 10px;
  letter-spacing: 0.07em;
  color: #91a0ad;
}
.workspace {
  margin-left: 220px;
  max-width: 1560px;
  padding: 0 36px 32px;
}
.topbar {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 12px;
  color: var(--muted);
}
.top-title {
  font-weight: 600;
  margin-right: auto;
  color: var(--ink);
}
.signal-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 8px 13px;
  white-space: nowrap;
  color: #607485;
}
.signal-pill strong {
  color: var(--ink);
}
.signal-pill .icon {
  width: 16px;
  height: 16px;
  color: var(--teal);
}
.local-pill {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 10px;
}
.local-pill i,
.orin-name i,
.map-caption i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #66bd9f;
  display: inline-block;
  flex-shrink: 0;
}
footer {
  font-size: 10px;
  color: #758897;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding: 24px 0 0;
  letter-spacing: 0.03em;
}
footer > span:last-child {
  padding-right: 190px;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 0.11em;
  font-weight: 700;
  color: #52746f;
  display: block;
  margin-bottom: 11px;
}
.eyebrow.light {
  color: #a8cbc8;
}
.primary,
.secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 19px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
  transition:
    background 0.15s,
    transform 0.15s;
  max-width: 100%;
  text-align: center;
}
.primary {
  background: var(--navy);
  color: white;
}
.primary:hover {
  background: #234661;
  transform: translateY(-1px);
}
.primary.mint {
  background: var(--mint);
  color: #143e3b;
}
.primary.mint:hover {
  background: #b0f0e3;
}
.secondary {
  background: #fff;
  border-color: #d8e3e9;
  color: var(--ink);
}
.secondary:hover {
  background: #eef6f5;
  border-color: #accdc5;
}
.primary .icon,
.secondary .icon {
  width: 18px;
  height: 18px;
}
.text-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #277767;
  font-weight: 650;
  font-size: 12px;
}
.text-link .icon {
  width: 16px;
  height: 16px;
}
.text-button {
  border: 0;
  background: transparent;
  color: #647585;
  font-size: 12px;
  padding: 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  background:
    radial-gradient(ellipse at 83% 53%, #2d655f 0, transparent 50%),
    linear-gradient(115deg, #112a43, #16364c);
  border-radius: 23px;
  color: white;
  overflow: hidden;
  padding: 35px 40px 53px;
  min-height: 348px;
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(#c8f2eb33 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, transparent 30%, black);
}
.hero-copy {
  position: relative;
  z-index: 2;
}
.hero h1 {
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: -0.055em;
  margin: 17px 0;
}
.hero h1 em {
  color: var(--mint);
}
.hero p {
  color: #c2d6e0;
  font-size: 14px;
  line-height: 1.75;
  max-width: 465px;
  margin-bottom: 22px;
}
.hero-orin {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-orin img {
  width: 173px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 16px 15px #02152040);
  transform: rotate(-3deg);
  margin-top: -5px;
}
.orin-name {
  position: absolute;
  bottom: -8px;
  z-index: 3;
  background: #244c52d9;
  border: 1px solid #8bd1c147;
  backdrop-filter: blur(8px);
  border-radius: 24px;
  padding: 5px 14px;
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #e0f8ef;
}
.orbit {
  position: absolute;
  border: 1px solid #8be2d448;
  border-radius: 50%;
  width: 250px;
  height: 250px;
  transform: rotate(-20deg);
}
.orbit-a::before,
.orbit-b::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--mint);
  border-radius: 50%;
  top: 43px;
  left: 20px;
  box-shadow: 0 0 18px #a0efdc;
}
.orbit-b {
  width: 205px;
  height: 205px;
  transform: rotate(175deg);
}
.hero-coordinate {
  position: absolute;
  left: 40px;
  bottom: 17px;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #84b9b6;
}
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 32px 0 19px;
}
.section-heading h2 {
  font-size: 24px;
  margin: 0;
}
.section-heading .eyebrow {
  margin-bottom: 8px;
}
.count-chip {
  font-size: 10px;
  border: 1px solid #d6e2e9;
  color: #667d8d;
  padding: 6px 11px;
  border-radius: 20px;
  white-space: nowrap;
  margin-bottom: 3px;
}
.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 20px;
}
.map-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.map-caption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 20px 0;
  font-size: 9px;
  letter-spacing: 0.07em;
  color: #738995;
}
.map-caption > span:first-child {
  display: flex;
  gap: 7px;
  align-items: center;
}
.map-caption > span:last-child {
  font-size: 10px;
  letter-spacing: 0;
  color: #8a9aa6;
}
.city-map {
  position: relative;
  width: 100%;
  aspect-ratio: 960/610;
  background: radial-gradient(ellipse, #f7fbf9, transparent 70%);
  overflow: hidden;
}
.city-map > svg {
  width: 100%;
  height: 100%;
  display: block;
}
.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #e8eeed;
  padding: 5px 8px 5px 5px;
  border-radius: 25px;
  box-shadow: 0 3px 12px #243b5320;
  min-height: 35px;
  white-space: nowrap;
  transition:
    transform 0.18s,
    box-shadow 0.18s;
  z-index: 1;
}
.map-pin:hover {
  transform: translate(-50%, -57%);
  box-shadow: 0 6px 17px #243b5330;
  z-index: 3;
}
.map-pin > span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--district) 15%, white);
  color: var(--district);
}
.map-pin .icon {
  width: 15px;
  height: 15px;
}
.map-pin strong {
  font-size: 10px;
  letter-spacing: -0.01em;
}
.map-pin small {
  font-size: 8px;
  color: #8a9caa;
}
.map-pin.done {
  border-color: #90cbb8;
}
.map-pin.done > span {
  background: #d9f2e6;
  color: #267250;
}
.map-pin.done small {
  color: #267250;
}
.map-legend {
  font-size: 9px;
  color: #7c8e9d;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 0 20px 17px;
  align-items: center;
  margin-top: auto;
}
.map-legend > span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.map-legend > span:last-child {
  margin-left: auto;
}
.legend-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #829bab;
}
.legend-dot.green {
  background: #39987b;
}
.mission-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.guide-card {
  background: #eaf3ef;
  border-radius: 18px;
  padding: 24px 22px;
  flex: 1;
}
.guide-card .eyebrow {
  font-size: 9px;
}
.guide-card h3 {
  font-size: 24px;
  color: #254b40;
  line-height: 1.15;
}
.guide-card p {
  font-size: 12px;
  line-height: 1.7;
  color: #5c776e;
  margin-bottom: 14px;
}
.small-orin {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 9px;
  font-weight: 600;
  color: #4b7769;
}
.small-orin img {
  width: 28px;
}
.final-card {
  background: #e9edf8;
  border: 1px solid #dfe5f1;
  border-radius: 18px;
  padding: 18px 22px;
  display: block;
}
.final-card > .icon {
  color: #5772b0;
  width: 20px;
  height: 20px;
  margin-bottom: 7px;
}
.final-card .eyebrow {
  font-size: 8px;
  color: #6378a0;
}
.final-card h3 {
  font-size: 17px;
  margin-bottom: 7px;
}
.final-card p {
  font-size: 11px;
  color: #687a93;
  line-height: 1.6;
  margin-bottom: 10px;
}
.final-card .text-link {
  color: #435f96;
  font-size: 10px;
}
.district-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 23px;
}
.district-card {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 23px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 17px;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.district-card:hover {
  transform: translateY(-3px);
  border-color: #a8cec3;
}
.district-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--district) 12%, white);
  border-radius: 13px;
  color: var(--district);
  flex-shrink: 0;
}
.district-icon .icon {
  width: 21px;
  height: 21px;
}
.district-card > div {
  min-width: 0;
}
.district-card small {
  font-size: 8px;
  color: #8296a4;
  letter-spacing: 0.065em;
}
.district-card h3 {
  font-size: 17px;
  margin: 6px 0 10px;
}
.district-card p {
  font-size: 11px;
  color: #708391;
  line-height: 1.7;
  margin-bottom: 14px;
}
.district-card .text-link {
  font-size: 10px;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: #587384;
  margin: 7px 0 24px;
}
.back-link .icon {
  width: 16px;
  height: 16px;
}
.mission-title {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 25px;
}
.mission-title > .district-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
}
.mission-title > .district-icon .icon {
  width: 31px;
  height: 31px;
}
.mission-title h1 {
  font-size: 32px;
  margin-bottom: 9px;
}
.mission-title .eyebrow {
  margin-bottom: 6px;
}
.mission-title p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}
.mission-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 252px;
  gap: 24px;
  align-items: start;
}
.activity-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  min-width: 0;
  overflow: hidden;
}
.stepper {
  list-style: none;
  margin: 0;
  display: flex;
  gap: 10px;
  padding: 20px 26px;
  background: #fafcfd;
  border-bottom: 1px solid var(--line);
}
.stepper li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  color: #8797a5;
  font-size: 10px;
  line-height: 1.4;
}
.stepper li > button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font-size: 12px;
  line-height: 1.5;
}
.stepper li > button:disabled {
  cursor: default;
  opacity: 0.65;
}
.draft-status {
  margin: 0;
  padding: 10px 26px;
  color: #476b68;
  background: #f1f8f5;
  border-bottom: 1px solid #e2eee8;
  font-size: 12px;
  line-height: 1.6;
}
.activity-back {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  min-height: 44px;
}
.stepper li > button > span {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid #d7e2e8;
  background: #fff;
  color: #8b9dac;
  display: grid;
  place-items: center;
  font-size: 10px;
}
.stepper .passed > button > span {
  background: #e8f5ee;
  color: #2b8266;
  border-color: #b6dacc;
}
.stepper li.active {
  color: #24736a;
  font-weight: 650;
}
.stepper li.active > button > span {
  background: #24796c;
  color: #fff;
  border-color: #24796c;
}
.stepper .icon {
  width: 14px;
  height: 14px;
}
.activity-body {
  padding: 30px;
}
.activity-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #3d8477;
  font-weight: 650;
  display: block;
  margin-bottom: 12px;
}
.activity-body h2 {
  font-size: 26px;
}
.activity-body > p {
  font-size: 15px;
  color: #607588;
  line-height: 1.75;
}
.simulation {
  border: 1px solid #dce9e9;
  border-radius: 15px;
  background: linear-gradient(120deg, #f5fbfa, #f0f6f9);
  padding: 18px 23px;
  margin: 24px 0;
}
.simulation-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #688b8b;
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.05em;
}
.simulation-head > .icon {
  width: 16px;
  height: 16px;
  color: var(--district);
}
.simulation-head .sample-counter {
  margin-left: auto;
  font-size: 9px;
  color: #517b76;
  letter-spacing: 0;
}
.sensor-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0 14px;
}
.sensor-display small {
  font-size: 11px;
  display: block;
  color: #718895;
}
.sensor-display strong {
  display: block;
  font-size: 46px;
  line-height: 1.3;
  letter-spacing: -0.04em;
}
.sensor-display .unit {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: #607a88;
  margin-left: 7px;
}
.sensor-visual {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--district);
}
.sensor-visual > .icon {
  width: 45px;
  height: 45px;
  opacity: 0.7;
}
.meter {
  height: 65px;
  width: 12px;
  background: #dce7e9;
  border-radius: 7px;
  overflow: hidden;
  position: relative;
}
.meter i {
  background: var(--district);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 7px;
  transition: height 0.12s;
}
.range-label {
  font-size: 11px;
  font-weight: 650;
  display: block;
  margin: 10px 0 3px;
}
input[type="range"] {
  width: 100%;
  height: 34px;
  accent-color: var(--teal);
  cursor: pointer;
  margin: 0;
}
.range-ends {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #7a909b;
}
.help-text {
  font-size: 11px;
  color: #708a94;
  margin: 13px 0 0;
}
.activity-body fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 24px;
  min-width: 0;
}
.activity-body legend {
  font-size: 16px;
  line-height: 1.7;
  font-weight: 650;
  margin-bottom: 18px;
  padding: 0;
  max-width: 100%;
}
.options {
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}
.option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid #dde6ee;
  border-radius: 11px;
  min-height: 55px;
  font-size: 14px;
  line-height: 1.65;
  cursor: pointer;
  position: relative;
}
.option:hover {
  border-color: #9fcac0;
  background: #fbfdfc;
}
.option:has(input:checked) {
  border-color: #358c79;
  background: #eef8f3;
}
.option:has(input:focus-visible) {
  outline: 3px solid #0b857c;
  outline-offset: 3px;
}
.option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.option-marker {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid #d3e0e8;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 650;
  color: #7b91a2;
  flex-shrink: 0;
}
.option:has(input:checked) .option-marker {
  color: white;
  border-color: #348b79;
  background: #348b79;
}
.option:has(input[type="checkbox"]) .option-marker {
  border-radius: 6px;
  width: 21px;
  height: 21px;
}
.option:has(input[type="checkbox"]:checked) .option-marker::after {
  content: "✓";
  font-size: 13px;
}
.options:last-child {
  margin-bottom: 0;
}
.rule-builder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  padding: 23px;
  background: #eff7f5;
  border: 1px solid #dfece7;
  border-radius: 15px;
  margin: 25px 0;
}
.rule-builder > strong {
  align-self: center;
  font-size: 14px;
}
.rule-word {
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.12em;
  color: #30846f;
  align-self: center;
}
.rule-builder label {
  min-width: 0;
  display: block;
}
.rule-builder label > span,
.match-list label > strong {
  font-size: 11px;
  color: #5c7d77;
  display: block;
  margin-bottom: 7px;
}
.rule-builder > strong {
  grid-column: 2;
}
.rule-builder .action-select {
  grid-column: 2;
}
.rule-builder select,
.match-list select {
  display: block;
  min-height: 45px;
  border: 1px solid #cfdfe0;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  width: 100%;
  padding: 9px 30px 9px 12px;
  cursor: pointer;
}
.test-values {
  margin: 22px 0;
}
.test-values .eyebrow {
  font-size: 9px;
  color: #7c929f;
}
.test-values > div {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.test-values > div > span {
  padding: 9px 14px;
  background: #f1f5f8;
  border: 1px solid #e3eaee;
  border-radius: 9px;
  font-size: 18px;
  font-weight: 650;
}
.test-values small {
  font-weight: 400;
  color: #778d9d;
  font-size: 11px;
}
.rule-test-results {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}
.rule-test-results > div {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f1f8f4;
  border-radius: 8px;
  padding: 11px;
  font-size: 11px;
  border: 1px solid #dcebe1;
}
.rule-test-results strong {
  min-width: 55px;
}
.rule-test-results b {
  margin-left: auto;
  color: #237559;
  font-size: 15px;
}
.rule-test-results .test-fail {
  background: #fff7e8;
  border-color: #f1e4c8;
}
.rule-test-results .test-fail b {
  color: #9a692b;
}
.feedback {
  border: 1px solid #cce6db;
  background: #eff9f3;
  border-radius: 13px;
  padding: 18px 20px;
  margin: 22px 0 18px;
  font-size: 13px;
  color: #426759;
  line-height: 1.8;
}
.feedback strong {
  color: #276e58;
  font-size: 14px;
}
.feedback p {
  margin: 7px 0 0;
}
.feedback.retry {
  background: #fff8ec;
  border-color: #efe0bf;
  color: #856534;
}
.feedback.retry strong {
  color: #8b6222;
}
.lesson-aside {
  display: grid;
  gap: 20px;
}
.orin-lesson {
  text-align: center;
  padding: 25px 21px;
  background: #e9f2ee;
  border-radius: 19px;
}
.orin-lesson > img {
  width: 80px;
  margin: 0 auto 20px;
}
.orin-lesson .eyebrow {
  font-size: 8px;
}
.orin-lesson h3 {
  font-size: 21px;
  color: #2b5146;
}
.orin-lesson p {
  font-size: 12px;
  line-height: 1.75;
  color: #678176;
}
.orin-lesson .secondary {
  font-size: 11px;
  padding: 10px 13px;
  min-height: 40px;
}
.learning-chain {
  padding: 22px 25px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 17px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.learning-chain .eyebrow {
  font-size: 8px;
  margin-bottom: 6px;
}
.learning-chain > span:not(.eyebrow) {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: #667f8d;
}
.learning-chain i {
  font-style: normal;
  font-size: 9px;
  display: grid;
  place-items: center;
  border: 1px solid #dbe6e9;
  background: #f6f9fa;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  position: relative;
}
.learning-chain > span:not(:last-child):not(.eyebrow) i::after {
  content: "";
  position: absolute;
  top: 22px;
  height: 10px;
  border-left: 1px solid #dbe6e9;
}
.privacy-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 10px;
  color: #7a8b95;
  line-height: 1.7;
  padding: 0 10px;
}
.privacy-note .icon {
  width: 15px;
  height: 15px;
  margin-top: 4px;
}
.match-list {
  display: grid;
  gap: 12px;
  margin: 22px 0;
}
.match-list label {
  display: block;
  background: #eff7f5;
  border: 1px solid #dfece7;
  border-radius: 12px;
  padding: 16px;
}
.match-list label > strong {
  font-size: 13px;
}
.finished {
  text-align: center;
  padding: 12px 0;
}
.finished .achievement {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  margin: 0 auto 23px;
  background: #e6f6ed;
  color: #328167;
  border: 1px solid #c7e8d9;
}
.finished .achievement .icon {
  width: 32px;
  height: 32px;
}
.finished > p {
  font-size: 15px;
  color: #71818d;
  margin: 0 auto 22px;
  max-width: 450px;
}
.earned {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: #39866c;
  margin-bottom: 25px;
}
.earned > .icon {
  width: 17px;
  height: 17px;
}
.earned span {
  display: block;
  width: 100%;
  font-size: 11px;
  margin-top: 5px;
}
.field-card {
  padding: 22px;
  text-align: left;
  border: 1px solid #dfebee;
  background: #f5f9fa;
  border-radius: 12px;
  margin-bottom: 25px;
}
.field-card h3 {
  font-size: 16px;
}
.field-card p {
  font-size: 13px;
  color: #6b7f8f;
  line-height: 1.8;
  margin-bottom: 0;
}
.finished .button-row {
  justify-content: center;
}
.empty-state {
  text-align: center;
  padding: 80px 24px;
}
.empty-state > .icon {
  width: 50px;
  height: 50px;
  color: #7487b1;
  margin-bottom: 20px;
}
.empty-state p {
  color: var(--muted);
}
.page-intro {
  font-size: 15px;
  color: var(--muted);
}
.journal-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 26px 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  margin: 28px 0 15px;
}
.journal-stats > div {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  padding-right: 15px;
}
.journal-stats > div:last-child {
  border-right: 0;
  padding-right: 0;
}
.journal-stats strong {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.4;
}
.journal-stats small {
  font-size: 15px;
  font-weight: 400;
  color: #8ca0af;
  margin-left: 7px;
  letter-spacing: 0;
}
.journal-stats span {
  font-size: 11px;
  color: #778d9b;
  margin-top: 7px;
}
.progress-track {
  height: 7px;
  border-radius: 4px;
  background: #e3eeeb;
  overflow: hidden;
  margin-bottom: 30px;
}
.progress-track > span {
  display: block;
  background: #4b9c81;
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}
.journal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.journal-card {
  display: flex;
  gap: 17px;
  align-items: center;
  padding: 23px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
}
.journal-card:hover {
  border-color: #a8cec3;
}
.journal-card > div {
  min-width: 0;
}
.journal-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.journal-card p {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 12px;
}
.journal-card > .icon {
  margin-left: auto;
  width: 18px;
  height: 18px;
  color: #96aaba;
}
.step-dots {
  display: flex;
  gap: 6px;
}
.step-dots > span {
  width: 19px;
  height: 19px;
  border: 1px solid #e1e9ef;
  background: #f3f6f9;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: transparent;
}
.step-dots .icon {
  width: 11px;
  height: 11px;
}
.step-dots .on {
  background: #dcf1e5;
  border-color: #b8ddc9;
  color: #3c8c6b;
}
.backup-card {
  display: flex;
  gap: 28px;
  padding: 30px;
  background: #eaf2f2;
  border: 1px solid #dce8e7;
  border-radius: 18px;
  margin-top: 27px;
  align-items: center;
}
.backup-card > div:first-child {
  flex: 1;
}
.backup-card h2 {
  font-size: 22px;
}
.backup-card p {
  font-size: 13px;
  color: #6a828d;
  line-height: 1.75;
  margin-bottom: 0;
}
.backup-actions {
  display: grid;
  gap: 8px;
  min-width: 210px;
}
.backup-actions .text-button {
  margin-top: 4px;
  font-size: 10px;
}
.storage-warning {
  color: #90602c !important;
  margin-top: 12px;
}
.orin-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 48px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  padding: 40px;
  overflow: hidden;
}
.orin-page h1 {
  font-size: 44px;
}
.orin-page p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.9;
}
.orin-page > img {
  height: 325px;
  width: 100%;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 16px;
}
.method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 26px 0;
}
.method-grid article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 27px;
}
.method-grid article > span {
  display: grid;
  place-items: center;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background: #e8f5ee;
  color: #357a64;
  font-size: 13px;
  margin-bottom: 17px;
}
.method-grid h2 {
  font-size: 21px;
}
.method-grid p {
  font-size: 13px;
  color: #7a8b99;
  line-height: 1.8;
  margin: 0;
}
.guide-disclosure {
  padding: 28px;
  border-radius: 17px;
  background: #eaf2f2;
}
.guide-disclosure h2 {
  font-size: 20px;
}
.guide-disclosure p {
  font-size: 13px;
  color: #6b838f;
  line-height: 1.8;
  margin-bottom: 0;
}
.mentor-fab {
  position: fixed;
  right: 28px;
  bottom: 22px;
  z-index: 25;
  border-radius: 28px;
  border: 1px solid #39617a;
  background: #183d55;
  color: #fff;
  font-weight: 550;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 17px;
  min-height: 46px;
  font-size: 11px;
  box-shadow: 0 5px 20px #193a4b25;
}
.mentor-fab .icon {
  width: 17px;
  height: 17px;
  color: #91e0ce;
}
.mentor-fab:hover {
  background: #28617a;
}
.mentor-fab:focus-visible {
  outline-color: #3dbaa4;
}
dialog {
  color: var(--ink);
  border: 1px solid #c8dedd;
  border-radius: 22px;
  background: #fff;
  width: min(560px, calc(100% - 32px));
  padding: 30px;
  box-shadow: 0 24px 100px #061a3440;
  max-height: calc(100dvh - 50px);
  overflow: auto;
}
dialog::backdrop {
  background: #132b4666;
  backdrop-filter: blur(3px);
}
dialog h2 {
  font-size: 24px;
}
dialog p {
  font-size: 14px;
  color: #607787;
  line-height: 1.8;
}
dialog .dialog-top {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: space-between;
}
dialog .dialog-top h2 {
  margin: 0;
}
.close-button {
  display: grid;
  place-items: center;
  border: 1px solid #e0e9ee;
  background: #f6f9fa;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 22px;
  color: #6b8294;
  line-height: 1;
}
.mentor-body {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 25px 0;
}
.mentor-body img {
  width: 90px;
  flex-shrink: 0;
}
.mentor-body p {
  margin-bottom: 0;
}
.mentor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.mentor-actions .secondary {
  font-size: 11px;
  padding: 10px 14px;
  min-height: 40px;
}
dialog > small {
  font-size: 10px;
  color: #8599a7;
}
#notifications {
  position: fixed;
  bottom: 80px;
  right: 24px;
  background: #183d55;
  color: #fff;
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 12px;
  line-height: 1.6;
  max-width: calc(100% - 48px);
  width: max-content;
  z-index: 70;
  box-shadow: 0 8px 40px #061a3430;
  pointer-events: none;
}
#notifications:empty {
  display: none;
}
@media (min-width: 1560px) {
  .workspace {
    margin-right: auto;
  }
}
@media (max-width: 1250px) {
  .sidebar {
    width: 192px;
    padding: 30px 16px;
  }
  .workspace {
    margin-left: 192px;
    padding: 0 26px 30px;
  }
  .hero {
    grid-template-columns: minmax(0, 1fr) 205px;
    padding: 32px 30px 53px;
  }
  .hero-orin img {
    width: 152px;
  }
  .orbit-a {
    width: 215px;
    height: 215px;
  }
  .orbit-b {
    width: 180px;
    height: 180px;
  }
  .hero-coordinate {
    left: 30px;
  }
  .hero h1 {
    font-size: 43px;
  }
  .map-layout {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 16px;
  }
  .guide-card {
    padding: 19px;
  }
  .final-card {
    padding: 16px 19px;
  }
  .district-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mission-layout {
    grid-template-columns: minmax(0, 1fr) 215px;
    gap: 18px;
  }
  .activity-body {
    padding: 26px;
  }
  .stepper {
    padding: 18px;
  }
  .local-pill {
    display: none;
  }
  .orin-page {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 28px;
    padding: 30px;
  }
  .orin-page h1 {
    font-size: 36px;
  }
}
@media (max-width: 1000px) {
  .map-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .mission-aside {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
  }
  .guide-card {
    padding: 20px;
  }
  .guide-card h3 br {
    display: none;
  }
  .guide-card h3 {
    font-size: 21px;
  }
  .small-orin {
    display: none;
  }
  .guide-card p {
    margin: 0;
  }
  .mission-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .lesson-aside {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
  }
  .orin-lesson {
    text-align: left;
    position: relative;
    padding-right: 100px;
    min-height: 200px;
  }
  .orin-lesson > img {
    position: absolute;
    width: 58px;
    right: 22px;
    top: 30px;
  }
  .orin-lesson h3 {
    font-size: 19px;
  }
  .orin-lesson .secondary {
    min-height: 44px;
  }
  .privacy-note {
    grid-column: 1/-1;
    margin: 0;
  }
  .journal-card {
    padding: 18px;
    gap: 12px;
  }
  .journal-card h3 {
    font-size: 16px;
  }
  .backup-card {
    flex-direction: column;
    align-items: stretch;
    padding: 25px;
  }
  .backup-actions {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
  }
  .orin-page {
    grid-template-columns: minmax(0, 1fr) 185px;
    padding: 27px;
    gap: 23px;
  }
  .orin-page p {
    font-size: 14px;
  }
  .orin-page > img {
    height: 295px;
  }
  .method-grid {
    gap: 13px;
  }
  .method-grid article {
    padding: 21px;
  }
}
@media (max-width: 800px) {
  .sidebar {
    position: relative;
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 17px 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 25px;
  }
  .brand {
    font-size: 10px;
    flex-shrink: 0;
    gap: 9px;
  }
  .brand img {
    width: 34px;
    height: 34px;
  }
  .brand strong {
    font-size: 19px;
  }
  .nav-label,
  .side-bottom {
    display: none;
  }
  .sidebar nav {
    display: flex;
    gap: 4px;
    margin-left: auto;
  }
  .sidebar nav a {
    font-size: 11px;
    padding: 10px;
    gap: 8px;
  }
  .sidebar nav a:last-child span {
    max-width: 70px;
  }
  .sidebar nav .icon {
    width: 17px;
    height: 17px;
  }
  .workspace {
    margin-left: 0;
    padding: 0 24px 30px;
  }
  .topbar {
    min-height: 70px;
  }
  .map-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero {
    min-height: 330px;
    grid-template-columns: minmax(0, 1fr) 220px;
  }
  .hero h1 {
    font-size: 44px;
  }
  .hero-orin img {
    width: 161px;
  }
  .orin-page {
    grid-template-columns: minmax(0, 1fr) 220px;
  }
  .mentor-fab {
    right: 22px;
    bottom: 18px;
  }
  .journal-stats strong {
    font-size: 29px;
  }
  .journal-stats {
    padding: 24px;
  }
  .city-map .map-pin {
    min-height: 38px;
    padding: 5px 9px 5px 5px;
  }
  .map-pin > span {
    width: 27px;
    height: 27px;
  }
  .map-pin strong {
    font-size: 11px;
  }
}
@media (max-width: 560px) {
  .sidebar {
    padding: 16px 18px;
  }
  .brand {
    font-size: 11px;
  }
  .brand strong {
    font-size: 21px;
  }
  .sidebar nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 35;
    background: #fffffff5;
    backdrop-filter: blur(12px);
    border-top: 1px solid #dfe8ee;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 7px 10px max(8px, env(safe-area-inset-bottom));
    border-radius: 17px 17px 0 0;
    box-shadow: 0 -3px 18px #1537500a;
  }
  .sidebar nav a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 4px;
    font-size: 9px;
    line-height: 1.2;
    min-height: 49px;
    justify-content: center;
    border-radius: 10px;
  }
  .sidebar nav a span {
    white-space: nowrap;
  }
  .sidebar nav a:last-child span {
    max-width: none;
  }
  .sidebar nav .icon {
    width: 20px;
    height: 20px;
  }
  .workspace {
    padding: 0 16px 110px;
  }
  .topbar {
    min-height: 58px;
    gap: 10px;
  }
  .top-title {
    font-size: 10px;
  }
  .signal-pill {
    font-size: 10px;
    padding: 6px 10px;
  }
  .hero {
    padding: 27px 23px 48px;
    min-height: 385px;
    display: block;
  }
  .hero-copy {
    max-width: 100%;
  }
  .hero .eyebrow {
    font-size: 8px;
    letter-spacing: 0.09em;
  }
  .hero h1 {
    font-size: 39px;
    max-width: 220px;
    margin: 19px 0 18px;
  }
  .hero p {
    font-size: 12px;
    max-width: 240px;
    margin-bottom: 23px;
    line-height: 1.8;
  }
  .hero .primary {
    font-size: 11px;
    min-height: 45px;
    padding: 11px 15px;
    position: relative;
    z-index: 4;
  }
  .hero-orin {
    position: absolute;
    top: 55px;
    right: 9px;
    width: 125px;
    height: 200px;
    pointer-events: none;
  }
  .hero-orin img {
    width: 95px;
    transform: rotate(-4deg);
  }
  .orbit-a {
    width: 132px;
    height: 132px;
  }
  .orbit-b {
    width: 109px;
    height: 109px;
  }
  .orbit-a::before,
  .orbit-b::before {
    top: 17px;
    left: 13px;
    width: 5px;
    height: 5px;
  }
  .orin-name {
    font-size: 7px;
    padding: 4px 8px;
    bottom: 19px;
    right: 4px;
    gap: 5px;
  }
  .hero-coordinate {
    left: 23px;
    bottom: 17px;
    font-size: 7px;
    letter-spacing: 0.11em;
  }
  .desktop-only {
    display: none;
  }
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
    margin: 28px 0 17px;
  }
  .section-heading h2 {
    font-size: 23px;
    max-width: 310px;
  }
  .section-heading .eyebrow {
    font-size: 9px;
    margin-bottom: 8px;
  }
  .count-chip {
    font-size: 10px;
    padding: 5px 10px;
  }
  .map-card {
    border-radius: 16px;
  }
  .map-caption {
    font-size: 7px;
    padding: 15px 13px 0;
    gap: 7px;
  }
  .map-caption > span:last-child {
    font-size: 8px;
  }
  .city-map {
    aspect-ratio: 1.26;
    min-height: 260px;
  }
  .city-map > svg {
    object-fit: cover;
    height: 100%;
    width: 100%;
    overflow: visible;
  }
  .map-pin {
    min-height: 44px !important;
    padding: 5px 7px 5px 4px !important;
    border-radius: 20px;
    gap: 5px;
  }
  .map-pin > span {
    width: 24px;
    height: 24px !important;
  }
  .map-pin strong {
    font-size: 9px !important;
  }
  .map-pin small {
    display: none;
  }
  .map-pin .icon {
    width: 14px;
    height: 14px;
  }
  .map-legend {
    font-size: 8px;
    gap: 8px 12px;
    padding: 0 13px 14px;
  }
  .map-legend > span:last-child {
    width: 100%;
    margin: 0;
  }
  .mission-aside {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .guide-card {
    padding: 17px;
  }
  .guide-card .eyebrow {
    font-size: 7px;
    line-height: 1.7;
  }
  .guide-card h3 {
    font-size: 20px;
  }
  .guide-card p {
    font-size: 10px;
    line-height: 1.75;
  }
  .final-card {
    padding: 17px 14px;
  }
  .final-card .eyebrow {
    font-size: 7px;
  }
  .final-card h3 {
    font-size: 17px;
  }
  .final-card p {
    font-size: 10px;
  }
  .final-card .text-link {
    font-size: 9px;
    gap: 5px;
  }
  .district-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 18px;
  }
  .district-card {
    padding: 22px 20px;
    gap: 17px;
  }
  .district-card h3 {
    font-size: 19px;
  }
  .district-card p {
    font-size: 12px;
    margin-bottom: 13px;
  }
  .district-card small {
    font-size: 9px;
  }
  .district-card .text-link {
    font-size: 12px;
  }
  .district-icon {
    width: 42px;
    height: 42px;
  }
  .back-link {
    margin: 10px 0 22px;
    font-size: 11px;
  }
  .mission-title {
    gap: 13px;
    align-items: flex-start;
    margin-bottom: 23px;
  }
  .mission-title > .district-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    margin-top: 5px;
  }
  .mission-title > .district-icon .icon {
    width: 24px;
    height: 24px;
  }
  .mission-title h1 {
    font-size: 27px;
    line-height: 1.2;
  }
  .mission-title .eyebrow {
    font-size: 8px;
  }
  .mission-title p {
    font-size: 12px;
  }
  .mission-layout {
    gap: 18px;
  }
  .activity-card {
    border-radius: 17px;
  }
  .stepper {
    padding: 18px 14px;
    gap: 8px;
  }
  .stepper li {
    font-size: 9px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 7px;
  }
  .stepper li > button > span {
    width: 24px;
    height: 24px;
  }
  .activity-body {
    padding: 24px 19px;
  }
  .activity-body h2 {
    font-size: 25px;
    line-height: 1.25;
  }
  .activity-body > p {
    font-size: 14px;
    line-height: 1.8;
  }
  .activity-label {
    font-size: 8px;
  }
  .simulation {
    padding: 17px;
    margin: 21px 0;
  }
  .simulation-head {
    font-size: 7px;
    gap: 5px;
    flex-wrap: wrap;
  }
  .simulation-head .sample-counter {
    font-size: 8px;
  }
  .sensor-display {
    padding: 19px 0 10px;
  }
  .sensor-display strong {
    font-size: 41px;
  }
  .sensor-display small {
    font-size: 10px;
  }
  .sensor-visual > .icon {
    width: 35px;
    height: 35px;
  }
  .sensor-visual {
    gap: 9px;
  }
  .sensor-display .unit {
    font-size: 13px;
  }
  .range-label {
    font-size: 10px;
  }
  .help-text {
    font-size: 10px;
  }
  .activity-body legend {
    font-size: 15px;
    line-height: 1.7;
  }
  .option {
    font-size: 13px;
    padding: 13px 12px;
    gap: 10px;
    line-height: 1.8;
  }
  .option-marker {
    width: 23px;
    height: 23px;
    font-size: 10px;
  }
  .activity-body > .primary {
    width: 100%;
    font-size: 12px;
    min-height: 47px;
  }
  .rule-builder {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px;
    gap: 12px;
    margin: 21px 0;
  }
  .rule-builder > strong {
    grid-column: auto;
    font-size: 13px;
    margin-bottom: 3px;
  }
  .rule-builder .action-select {
    grid-column: auto;
  }
  .rule-word {
    margin-top: 2px;
  }
  .rule-builder select,
  .match-list select {
    font-size: 12px;
    min-height: 48px;
  }
  .test-values .eyebrow {
    font-size: 8px;
  }
  .test-values > div {
    gap: 9px;
  }
  .test-values > div > span {
    font-size: 16px;
    padding: 8px 10px;
  }
  .rule-test-results > div {
    font-size: 10px;
    gap: 8px;
    align-items: flex-start;
    line-height: 1.7;
  }
  .rule-test-results strong {
    min-width: 47px;
  }
  .feedback {
    padding: 17px;
    font-size: 12px;
    line-height: 1.9;
  }
  .feedback strong {
    font-size: 13px;
  }
  .lesson-aside {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
  }
  .orin-lesson {
    padding: 25px 105px 25px 22px;
  }
  .orin-lesson > img {
    width: 60px;
    right: 24px;
    top: 27px;
  }
  .orin-lesson p {
    font-size: 12px;
  }
  .learning-chain {
    display: none;
  }
  .privacy-note {
    font-size: 10px;
    padding: 0 7px;
  }
  .finished {
    padding: 7px 0;
  }
  .finished h2 {
    font-size: 25px;
  }
  .finished > p {
    font-size: 13px;
  }
  .earned span {
    font-size: 10px;
  }
  .field-card {
    padding: 18px;
  }
  .field-card h3 {
    font-size: 15px;
  }
  .field-card p {
    font-size: 12px;
  }
  .finished .primary,
  .finished .secondary {
    width: 100%;
    font-size: 12px;
  }
  .page-intro {
    font-size: 13px;
  }
  h1 {
    font-size: 32px;
  }
  .journal-stats {
    grid-template-columns: 1fr 1fr;
    gap: 17px;
    padding: 23px;
  }
  .journal-stats > div:nth-child(2) {
    border: 0;
  }
  .journal-stats > div:last-child {
    grid-column: 1/-1;
    border-top: 1px solid var(--line);
    padding-top: 18px;
  }
  .journal-stats strong {
    font-size: 30px;
  }
  .journal-stats > div:last-child strong {
    font-size: 24px;
  }
  .journal-stats span {
    font-size: 10px;
    margin-top: 3px;
  }
  .journal-stats small {
    font-size: 13px;
  }
  .journal-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .journal-card {
    padding: 21px;
    gap: 16px;
  }
  .journal-card h3 {
    font-size: 18px;
  }
  .journal-card p {
    font-size: 11px;
  }
  .backup-card {
    padding: 23px;
  }
  .backup-card h2 {
    font-size: 23px;
  }
  .backup-card p {
    font-size: 12px;
  }
  .backup-actions {
    display: grid;
    width: 100%;
  }
  .backup-actions .primary,
  .backup-actions .secondary {
    font-size: 12px;
  }
  .orin-page {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 27px;
    gap: 28px;
  }
  .orin-page h1 {
    font-size: 34px;
  }
  .orin-page p {
    font-size: 14px;
  }
  .orin-page > img {
    height: 310px;
    width: 100%;
    object-position: center 26%;
  }
  .method-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .method-grid article {
    padding: 24px;
  }
  .method-grid h2 {
    font-size: 22px;
  }
  .method-grid p {
    font-size: 13px;
  }
  .guide-disclosure {
    padding: 24px;
  }
  .guide-disclosure h2 {
    font-size: 22px;
  }
  .guide-disclosure p {
    font-size: 12px;
  }
  .mentor-fab {
    bottom: 82px;
    right: 16px;
    padding: 10px 14px;
    font-size: 10px;
    min-height: 43px;
  }
  .mentor-fab .icon {
    width: 16px;
    height: 16px;
  }
  dialog {
    padding: 24px;
    max-height: calc(100dvh - 42px);
    border-radius: 18px;
  }
  dialog h2 {
    font-size: 23px;
  }
  .mentor-body {
    gap: 18px;
    padding: 24px 0;
    align-items: flex-start;
  }
  .mentor-body img {
    width: 58px;
    margin-top: 7px;
  }
  .mentor-body .eyebrow {
    font-size: 8px;
  }
  .mentor-body p {
    font-size: 12px;
    line-height: 1.9;
  }
  .mentor-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .mentor-actions .secondary {
    min-height: 44px;
  }
  .button-row .primary,
  .button-row .secondary {
    flex: 1;
    min-width: 140px;
  }
  #notifications {
    bottom: 134px;
    right: 16px;
    max-width: calc(100% - 32px);
    padding: 13px 17px;
    font-size: 11px;
  }
  footer {
    font-size: 8px;
    gap: 8px;
    margin-top: 29px;
    padding-top: 20px;
  }
  footer > span:last-child {
    padding-right: 0;
  }
}
@media (max-width: 365px) {
  .hero {
    padding: 25px 20px 48px;
    min-height: 395px;
  }
  .hero h1 {
    font-size: 35px;
    max-width: 180px;
  }
  .hero-orin {
    right: -5px;
    top: 58px;
    width: 110px;
  }
  .hero-orin img {
    width: 87px;
  }
  .hero p {
    max-width: 196px;
  }
  .hero .primary {
    font-size: 10px;
    padding: 12px;
  }
  .hero-coordinate {
    left: 20px;
    font-size: 6px;
  }
  .mission-aside {
    grid-template-columns: 1fr;
  }
  .guide-card h3 br {
    display: none;
  }
  .final-card p {
    font-size: 11px;
  }
  .map-pin > span {
    width: 20px;
  }
  .map-pin strong {
    font-size: 8px !important;
  }
  .map-pin {
    gap: 3px;
  }
  .mission-title h1 {
    font-size: 24px;
  }
  .activity-body {
    padding: 22px 16px;
  }
  .sensor-display .unit {
    font-size: 10px;
  }
  .orin-lesson {
    padding-right: 95px;
  }
  .journal-card {
    padding: 18px;
  }
  .journal-card h3 {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 560px) {
  .map-pin[data-district="energie"] {
    top: 18% !important;
  }
  .map-pin[data-district="gradina"] {
    top: 40% !important;
  }
  .map-pin[data-district="mobilitate"] {
    top: 62% !important;
  }
  .map-pin[data-district="apa"] {
    top: 68% !important;
  }
  .map-pin[data-district="lumina"] {
    top: 90% !important;
  }
  .mentor-fab {
    font-size: 0;
    gap: 6px;
    padding: 10px 13px;
  }
  .mentor-fab::after {
    content: "ORIN";
    font-size: 10px;
    letter-spacing: 0.04em;
  }
}

.activity-body > p {
  font-size: 16px;
}
.option {
  font-size: 15px;
}
.feedback {
  font-size: 14px;
}
.rule-builder .action-select,
.rule-builder > .rule-word:nth-of-type(2) {
  grid-column: 1/-1;
}
@media (max-width: 560px) {
  .activity-body > p {
    font-size: 15px;
  }
  .option {
    font-size: 14px;
  }
  .feedback {
    font-size: 13px;
  }
  .district-card p {
    font-size: 13px;
  }
}

/* The lab shows the same values that pupils record and test. */
.lab-scene {
  margin-top: 16px;
}
.scene-svg {
  width: 100%;
  max-height: 190px;
  display: block;
  border-radius: 14px;
}
.scene-description {
  font-size: 13px;
  line-height: 1.7;
  color: #4d6a7d;
  margin: 11px 0 0;
}
.sample-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 15px;
  margin-top: 16px;
}
.sample-actions .secondary {
  min-height: 44px;
  font-size: 13px;
  padding: 10px 14px;
}
.sample-actions > span,
.notes-empty {
  font-size: 12px;
  color: #5e7786;
}
.simulation .help-text,
.park-lab .help-text {
  font-size: 13px;
  line-height: 1.7;
}
.measurement-table {
  margin-top: 18px;
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}
.measurement-table caption {
  text-align: left;
  font-weight: 650;
  color: #355769;
  padding-bottom: 10px;
}
.measurement-table th,
.measurement-table td {
  padding: 9px 5px;
  border-bottom: 1px solid #d7e5e4;
  overflow-wrap: anywhere;
}
.measurement-table th {
  color: #587383;
  font-weight: 500;
  font-size: 12px;
}
.measurement-table td strong {
  color: #234b58;
}
.park-lab {
  border: 1px solid #d9e7e4;
  border-radius: 15px;
  padding: 20px;
  margin: 20px 0 26px;
  background: #f5faf8;
}
.park-lab-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.park-lab-heading h3 {
  font-size: 17px;
  margin: 0;
}
.park-lab-heading > span {
  color: #47716a;
  font-size: 12px;
}
.park-outputs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.park-outputs > span {
  font-size: 12px;
  padding: 7px 11px;
  border: 1px solid #d4e0e2;
  border-radius: 7px;
  color: #4b6574;
  background: #edf2f3;
}
.park-outputs strong {
  margin-left: 5px;
}
.park-outputs .on {
  color: #2d6652;
  background: #e4f3e7;
  border-color: #badcc7;
}
.park-rules {
  display: grid;
  gap: 7px;
  margin: 16px 0;
  color: #365b69;
  font-size: 12px;
  line-height: 1.7;
  border-left: 3px solid #85baaa;
  padding-left: 12px;
}
.park-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.park-controls > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #355b68;
}
.park-controls output {
  display: block;
  font-weight: 700;
  margin-top: 6px;
}
.park-controls .presence-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  grid-column: 1 / -1;
  border: 1px solid #cbdcd8;
  border-radius: 9px;
  min-height: 48px;
  padding: 10px 14px;
  cursor: pointer;
  background: #fff;
}
.presence-toggle input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: #267967;
}
.presence-toggle:has(input:checked) {
  background: #eaf6ee;
  border-color: #85baa6;
}
.park-cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.park-case {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  text-align: left;
  padding: 13px 36px 13px 13px;
  min-height: 82px;
  border: 1px solid #d1e0de;
  border-radius: 10px;
  background: #fff;
  color: #567180;
  line-height: 1.6;
}
.park-case > span {
  font-size: 13px;
}
.park-case strong {
  font-size: 12px;
  color: #355b68;
}
.park-case > .icon {
  width: 16px;
  position: absolute;
  top: 16px;
  right: 12px;
}
.park-case.tested {
  border-color: #bddacd;
}
.park-case[aria-pressed="true"] {
  background: #eaf6ee;
  border-color: #388b76;
  box-shadow: inset 0 0 0 1px #388b76;
}
.model-note {
  font-size: 12px;
  line-height: 1.7;
  margin-bottom: 0;
  color: #5a7784;
}
@media (max-width: 560px) {
  .stepper li > button {
    flex-direction: column;
    gap: 6px;
    font-size: 11px;
    text-align: center;
  }
  .draft-status {
    padding: 10px 16px;
    font-size: 11px;
  }
  .simulation,
  .park-lab {
    padding: 16px 14px;
  }
  .simulation-head {
    flex-wrap: wrap;
  }
  .simulation-head .sample-counter {
    font-size: 11px;
  }
  .park-cases,
  .park-controls {
    grid-template-columns: minmax(0, 1fr);
  }
  .park-case {
    min-height: 76px;
  }
}
.question-scenario {
  margin: 0 0 24px;
  padding: 18px;
  border-radius: 12px;
  border: 1px solid #dce8eb;
  background: #f5f9fb;
}
.question-scenario > p {
  font-size: 13px;
  line-height: 1.7;
  color: #4d6a7d;
  margin: 9px 0 14px;
}
.question-scenario .secondary {
  min-height: 44px;
  font-size: 13px;
  padding: 11px 14px;
}


/* ============================================================
   SMART CITY 5.0 · WORKBOOK VISUAL SYSTEM
   Digital adaptation of the original Vol. 1 visual language.
   ============================================================ */
:root {
  --sc-navy: #0b2f6a;
  --sc-blue: #1477d4;
  --sc-cyan: #16a7c8;
  --sc-teal: #0d8f8a;
  --sc-green: #55a630;
  --sc-lime: #8bc34a;
  --sc-orange: #f39a22;
  --sc-purple: #6f4bb8;
  --sc-paper: #ffffff;
  --sc-soft-blue: #eef8fb;
  --sc-soft-green: #f2f9ee;
  --sc-soft-orange: #fff6e8;
  --sc-line: #b9dde2;
  --ink: #14324d;
  --muted: #637b8c;
  --navy: var(--sc-navy);
  --mint: #79ddd2;
  --teal: var(--sc-teal);
  --bg: #f7fbfc;
  --line: #dbecef;
  --white: #fff;
}

body {
  background:
    radial-gradient(circle at 88% 8%, rgba(22, 167, 200, 0.09), transparent 28rem),
    radial-gradient(circle at 8% 95%, rgba(85, 166, 48, 0.08), transparent 26rem),
    #f7fbfc;
}

h1, h2, h3 {
  color: var(--sc-navy);
  letter-spacing: -0.025em;
}

.eyebrow,
.activity-label,
.nav-label {
  color: var(--sc-teal);
  font-weight: 800;
  letter-spacing: 0.11em;
}

.sidebar {
  background: rgba(255, 255, 255, 0.98);
  border-right: 2px solid #d9eef1;
  box-shadow: 14px 0 34px rgba(22, 75, 102, 0.05);
}

.brand {
  color: var(--sc-navy);
  font-weight: 800;
}
.brand img {
  width: 48px;
  height: 48px;
  padding: 4px;
  background: white;
  border: 1px solid #b9dde2;
  border-radius: 15px;
  box-shadow: 0 7px 18px rgba(20, 119, 212, 0.12);
}
.brand strong {
  color: var(--sc-navy);
}
.sidebar nav a {
  border: 1px solid transparent;
}
.sidebar nav a:hover {
  background: var(--sc-soft-blue);
  border-color: #d2ebf0;
}
.sidebar nav a[aria-current] {
  color: var(--sc-navy);
  background: linear-gradient(90deg, #e9f8fb, #f4fbf7);
  border-color: #a9dce4;
  box-shadow: inset 4px 0 0 var(--sc-teal);
}

.side-bottom {
  border-top: 1px solid #dceff1;
}
.side-bottom img {
  width: 90px;
  filter: drop-shadow(0 8px 13px rgba(11,47,106,.12));
}
.side-bottom small {
  color: var(--sc-teal);
  font-weight: 700;
}

.topbar {
  border-bottom: 1px solid #dcecef;
}
.top-title {
  color: var(--sc-navy);
  font-weight: 750;
}
.signal-pill {
  border-color: #b9dde2;
  background: #fff;
  box-shadow: 0 5px 14px rgba(19, 93, 125, .05);
}
.signal-pill .icon {
  color: var(--sc-orange);
}

.primary {
  background: linear-gradient(135deg, var(--sc-navy), #155eae);
  color: white;
  border-color: var(--sc-navy);
  box-shadow: 0 8px 18px rgba(11, 47, 106, .14);
}
.primary:hover {
  background: linear-gradient(135deg, #09295d, #1265bd);
}
.primary.mint {
  background: linear-gradient(135deg, var(--sc-teal), #21a899);
  color: white;
  border-color: transparent;
}
.secondary {
  color: var(--sc-navy);
  border-color: #a8d8df;
  background: #fff;
}
.secondary:hover {
  background: var(--sc-soft-blue);
  border-color: var(--sc-cyan);
}

.hero {
  background:
    linear-gradient(105deg, rgba(7,45,103,.97), rgba(13,143,138,.91)),
    linear-gradient(#0b2f6a,#0b2f6a);
  border: 1px solid #0b6f91;
  box-shadow: 0 20px 45px rgba(11, 47, 106, .14);
}
.hero h1,
.hero .eyebrow.light {
  color: white;
}
.hero h1 em {
  color: #a7efc2;
}
.hero p {
  color: #dceff4;
}
.hero-coordinate,
.orin-name {
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.1);
  color: #eafcff;
}
.hero-orin img {
  filter: drop-shadow(0 24px 22px rgba(3, 23, 55, .26));
}
.orbit {
  border-color: rgba(137, 226, 220, .33);
}

.section-heading h2,
.mission-title h1 {
  color: var(--sc-navy);
}
.count-chip {
  background: var(--sc-soft-green);
  border-color: #cce9bd;
  color: #397d24;
  font-weight: 700;
}

.map-card,
.activity-card,
.journal-stats,
.journal-card,
.orin-page,
.method-grid article,
.learning-chain {
  border: 1.5px solid #cde6ea;
  box-shadow: 0 9px 28px rgba(24, 84, 108, 0.055);
  background: #fff;
}

.map-caption {
  background: linear-gradient(90deg, #edf9fb, #f5fbf5);
  border-bottom-color: #cde6ea;
  color: var(--sc-navy);
}
.map-caption i {
  background: var(--sc-green);
}
.map-legend {
  color: #607d8c;
}
.legend-dot.green {
  background: var(--sc-green);
}

.guide-card {
  background: linear-gradient(145deg, #eff9fb, #f6fbf2);
  border-color: #c7e5e8;
}
.guide-card h3 {
  color: var(--sc-navy);
}
.small-orin img,
.orin-lesson > img {
  filter: drop-shadow(0 9px 11px rgba(11,47,106,.12));
}

.final-card {
  background: linear-gradient(150deg, #0d5f85, #0b2f6a);
  color: white;
  border: 0;
}
.final-card h3,
.final-card .eyebrow,
.final-card .text-link {
  color: white;
}
.final-card p {
  color: #dceef4;
}

.district-card {
  background: white;
  border: 1.5px solid #d0e7ea;
  box-shadow: 0 6px 18px rgba(14, 77, 105, .04);
}
.district-card:hover {
  border-color: #77c8d1;
  transform: translateY(-2px);
}
.district-card small {
  color: var(--sc-teal);
  font-weight: 800;
}
.district-card h3 {
  color: var(--sc-navy);
}

.district-icon {
  border: 2px solid color-mix(in srgb, var(--district) 35%, white);
  background: color-mix(in srgb, var(--district) 12%, white);
}

.mission-title {
  padding-bottom: 18px;
  border-bottom: 2px solid #d9ecef;
}
.back-link {
  color: var(--sc-teal);
  font-weight: 700;
}

.activity-card {
  overflow: hidden;
}
.stepper {
  background: linear-gradient(90deg, #f6fbfc, #f8fcf5);
  border-bottom-color: #d2e8eb;
}
.stepper li.active button > span {
  background: var(--sc-navy);
  color: white;
  border-color: var(--sc-navy);
}
.stepper li.passed button > span {
  background: var(--sc-green);
  border-color: var(--sc-green);
  color: white;
}
.stepper li.active button {
  color: var(--sc-navy);
  font-weight: 800;
}

.simulation,
.rule-builder,
.match-list label {
  background: linear-gradient(135deg, #edf8fb, #f5fbf2);
  border: 1.5px solid #bee0e5;
}
.simulation-head {
  color: var(--sc-teal);
  font-weight: 800;
}
.sensor-display strong {
  color: var(--sc-navy);
}
input[type="range"] {
  accent-color: var(--sc-teal);
}

.option {
  border: 1.5px solid #d7e7eb;
  background: #fff;
}
.option:hover {
  border-color: #69bfca;
  background: #f6fbfc;
}
.option:has(input:checked) {
  border-color: var(--sc-teal);
  background: #eef9f6;
  box-shadow: inset 4px 0 0 var(--sc-green);
}
.option:has(input:checked) .option-marker {
  border-color: var(--sc-teal);
  background: var(--sc-teal);
}

.rule-word {
  color: var(--sc-navy);
}
.rule-builder label > span,
.match-list label > strong {
  color: #397b79;
}
.rule-builder select,
.match-list select {
  border-color: #bcdde2;
}

.test-values > div > span {
  border-color: #cce3e7;
  background: #f3fafb;
  color: var(--sc-navy);
}

.feedback.correct,
.feedback {
  background: var(--sc-soft-green);
  border-color: #bfe2b0;
  color: #3d6d34;
}
.feedback.correct strong,
.feedback strong {
  color: #2c762f;
}
.feedback.retry {
  background: var(--sc-soft-orange);
  border-color: #f1d6a5;
}
.feedback.retry strong {
  color: #a5620b;
}

.orin-lesson {
  background:
    linear-gradient(160deg, rgba(238,248,251,.98), rgba(244,250,239,.98));
  border: 1.5px solid #c8e3e7;
}
.orin-lesson h3 {
  color: var(--sc-navy);
}
.orin-lesson p {
  color: #587684;
}

.learning-chain .eyebrow {
  color: var(--sc-teal);
}
.learning-chain i {
  background: #eef8fb;
  border-color: #c7e3e8;
  color: var(--sc-navy);
  font-weight: 800;
}
.learning-chain > span:nth-child(3) i {
  background: #f2faee;
  color: #3b8428;
}
.learning-chain > span:nth-child(4) i {
  background: #fff5e7;
  color: #bd710e;
}

.journal-stats strong {
  color: var(--sc-navy);
}
.progress-track {
  background: #e0eff1;
}
.progress-track > span {
  background: linear-gradient(90deg, var(--sc-teal), var(--sc-green));
}
.step-dots .on {
  background: #e9f7e5;
  border-color: #bfe1b1;
  color: var(--sc-green);
}
.backup-card,
.guide-disclosure {
  background: linear-gradient(135deg, #eef8fb, #f3f9ef);
  border-color: #c9e3e6;
}

.orin-page {
  background:
    linear-gradient(100deg, #fff 0 58%, #edf9fb 58% 100%);
}
.orin-page h1 {
  color: var(--sc-navy);
}
.method-grid article:nth-child(1) > span {
  background: #eaf7fb;
  color: var(--sc-blue);
}
.method-grid article:nth-child(2) > span {
  background: #eef8e8;
  color: var(--sc-green);
}
.method-grid article:nth-child(3) > span {
  background: #fff2de;
  color: var(--sc-orange);
}

.park-rules span:first-child {
  border-left-color: var(--sc-blue);
}
.park-rules span:last-child {
  border-left-color: var(--sc-green);
}
.park-case {
  border-color: #cae2e7;
}
.park-case.tested {
  background: #f0f9ee;
  border-color: #b8ddaa;
}

footer {
  color: #728995;
  border-top: 1px solid #d9ecef;
}
footer > span:first-child {
  color: var(--sc-teal);
  font-weight: 700;
}

/* Workbook-like accent bars: DATA → INFORMATION → ACTION */
.activity-body::before {
  content: "";
  display: block;
  height: 5px;
  border-radius: 5px;
  margin: -2px 0 22px;
  background: linear-gradient(
    90deg,
    var(--sc-blue) 0 33%,
    var(--sc-green) 33% 66%,
    var(--sc-orange) 66% 100%
  );
}

/* Mobile retains the workbook palette but removes unnecessary depth. */
@media (max-width: 760px) {
  .sidebar {
    box-shadow: none;
  }
  .hero {
    background: linear-gradient(150deg, #0b2f6a, #0d8f8a);
  }
  .activity-card,
  .map-card,
  .journal-card,
  .orin-page {
    box-shadow: none;
  }
}


/* ==========================================================
   VOL. 1 EXACT WORKBOOK ADAPTATION
   Based on the original Smart City 5.0 workbook visual logic.
   ========================================================== */

.workspace {
  background:
    linear-gradient(rgba(15,128,145,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,128,145,.025) 1px, transparent 1px);
  background-size: 28px 28px;
}

.workbook-cover.hero {
  min-height: 455px;
  color: var(--ink);
  background:
    radial-gradient(circle at 76% 18%, rgba(77,191,218,.11), transparent 19rem),
    radial-gradient(circle at 88% 85%, rgba(88,170,57,.10), transparent 18rem),
    #fff;
  border: 2px solid #9bcfd7;
  border-radius: 22px;
  box-shadow: 0 16px 42px rgba(14,74,97,.09);
  overflow: hidden;
  position: relative;
}
.workbook-cover.hero::before,
.workbook-cover.hero::after {
  content:"";
  position:absolute;
  height:3px;
  width:84px;
  background:#8bc34a;
  top:31px;
}
.workbook-cover.hero::before { left:38px; }
.workbook-cover.hero::after { right:38px; }

.workbook-cover .hero-copy {
  max-width: 720px;
  padding: 48px 20px 45px 44px;
  z-index: 2;
}
.workbook-cover .cover-author {
  color: #3e8f2c;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.workbook-cover .cover-author::before,
.workbook-cover .cover-author::after {
  content:"◆";
  font-size:8px;
  color:#58a93a;
}

.workbook-cover h1 {
  margin: 12px 0 3px;
  line-height: .98;
}
.workbook-cover h1 > span {
  display:block;
  font-size: clamp(52px, 5.3vw, 86px);
  color:#082f78;
  letter-spacing:-.055em;
  font-weight:900;
}
.workbook-cover h1 > strong {
  display:block;
  font-size: clamp(26px, 2.35vw, 39px);
  color:#0a8184;
  text-transform:uppercase;
  letter-spacing:.025em;
  margin-top:11px;
}
.cover-subtitle {
  color:#0a7f83 !important;
  font-size:18px !important;
  font-weight:800;
  margin:10px 0 21px !important;
}
.cover-intro {
  color:#45697d !important;
  max-width:590px;
  line-height:1.75;
  margin:18px 0 20px !important;
}

.workbook-domain-row {
  display:grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap:10px;
  max-width:630px;
}
.domain-chip {
  min-width:0;
  display:grid;
  justify-items:center;
  text-align:center;
  gap:3px;
  border:1px solid #d6e8eb;
  border-radius:15px;
  padding:11px 7px 9px;
  background:#fff;
}
.domain-chip .icon {
  width:28px;
  height:28px;
}
.domain-chip b {
  font-size:10px;
  letter-spacing:.055em;
}
.domain-chip small {
  font-size:9px;
  color:#6a7d88;
}
.domain-chip.tech .icon,.domain-chip.tech b { color:#0879c9; }
.domain-chip.eco .icon,.domain-chip.eco b { color:#55a630; }
.domain-chip.civic .icon,.domain-chip.civic b { color:#7449aa; }
.domain-chip.create .icon,.domain-chip.create b { color:#ef9a15; }

.workbook-start {
  background:#0b8087 !important;
  border-color:#0b8087 !important;
  box-shadow:none !important;
}
.workbook-cover .hero-orin {
  right: 52px;
  bottom: 24px;
  width: 310px;
  height: 380px;
}
.workbook-cover .hero-orin img {
  width: 265px;
  max-height: 335px;
  object-fit:contain;
  filter:drop-shadow(0 13px 14px rgba(15,66,96,.18));
}
.workbook-cover .orin-name {
  background:white;
  color:#0b5670;
  border:1px solid #abd6dc;
  box-shadow:0 6px 14px rgba(14,84,106,.08);
}
.workbook-cover .orin-name i { background:#55a630; }

.workbook-matrix {
  display:grid;
  grid-template-columns: 1.15fr 1fr auto 1fr auto 1fr;
  align-items:stretch;
  gap:13px;
  margin:25px 0 36px;
  padding:20px;
  border:1.5px solid #c4e1e5;
  border-radius:18px;
  background:white;
}
.matrix-title {
  align-self:center;
  padding:5px 12px 5px 4px;
}
.matrix-title strong {
  display:block;
  margin-top:7px;
  color:#082f78;
  font-size:18px;
  line-height:1.25;
}
.matrix-box {
  border-radius:12px;
  overflow:hidden;
  border:1px solid;
  background:#fff;
  min-height:112px;
}
.matrix-box > span {
  display:block;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  padding:7px 11px;
}
.matrix-box b,.matrix-box small {
  display:block;
  padding-left:12px;
  padding-right:12px;
}
.matrix-box b {
  color:#173a55;
  margin-top:13px;
  font-size:13px;
}
.matrix-box small {
  color:#70858f;
  margin-top:5px;
  font-size:10px;
  line-height:1.45;
}
.matrix-box.data { border-color:#83bce6; background:#f4faff; }
.matrix-box.data > span { background:#0e84d4; }
.matrix-box.info { border-color:#a8d38f; background:#f7fbf2; }
.matrix-box.info > span { background:#62a938; }
.matrix-box.action { border-color:#f0c57b; background:#fffaf1; }
.matrix-box.action > span { background:#ef921a; }
.matrix-arrow {
  display:grid;
  place-items:center;
  color:#6b8090;
  font-size:25px;
  font-weight:500;
}

.workbook-section-title {
  align-items:end;
  border-top:2px solid #d7ecef;
  padding-top:22px;
}
.workbook-section-title p {
  margin:3px 0 0;
  color:#6a828f;
  font-size:12px;
}

.map-card {
  border:2px solid #a9d5dc;
  border-radius:17px;
}
.map-caption {
  background:#fff;
  color:#0a6f7c;
  font-weight:800;
  border-bottom:2px solid #d7ecef;
}
.city-map {
  background:#fff;
}
.mission-aside .guide-card {
  background:#fff;
  border:2px solid #a9d5dc;
  border-radius:17px;
}
.guide-card::before {
  content:"";
  display:block;
  height:6px;
  background:#0b8087;
  border-radius:7px 7px 0 0;
  margin:-1px -1px 16px;
}
.guide-card .eyebrow {
  color:#0b8087;
}

.district-card {
  border:1.5px solid #b7dce1;
  border-radius:16px;
  box-shadow:none;
}
.district-card::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  border-radius:16px 0 0 16px;
  background:var(--district);
}
.district-card {
  position:relative;
  overflow:hidden;
}

.activity-card {
  border:2px solid #a9d5dc;
  box-shadow:none;
}
.activity-body {
  background:#fff;
}
.activity-body::before {
  height:0;
  margin:0;
}
.activity-label {
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:6px 11px;
  background:#0b8087;
  color:white !important;
  letter-spacing:.07em;
}
.activity-body h2 {
  color:#082f78;
  font-size:30px;
}
.activity-body fieldset {
  padding:18px;
  border:1.5px solid #b8dfe3;
  border-radius:14px;
  background:#fff;
}
.activity-body legend {
  color:#0a7280;
  background:#fff;
  padding:0 8px;
}
.option {
  border:1px solid #d7e7e9;
  border-radius:9px;
}
.option:has(input:checked) {
  box-shadow:none;
  border:2px solid #0b8087;
  background:#f2fbfa;
}
.orin-lesson {
  background:#fff;
  border:2px solid #a9d5dc;
}
.orin-lesson::before {
  content:"MISIUNE ORIN";
  display:inline-block;
  background:#0b8087;
  color:#fff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  padding:5px 10px;
  border-radius:999px;
  margin-bottom:12px;
}

.simulation {
  border:2px solid #a9d5dc;
  background:#fff;
}
.simulation-head {
  background:#edf8fa;
  margin:-18px -23px 14px;
  padding:10px 18px;
  border-bottom:1px solid #cbe4e8;
}

.rule-builder {
  border:2px solid #a9d5dc;
  background:#fff;
}
.rule-word {
  display:inline-flex;
  width:max-content;
  border-radius:999px;
  padding:5px 9px;
  background:#0b8087;
  color:white;
}

.feedback.correct,.feedback {
  border-left:6px solid #62a938;
  background:#f7fbf2;
}
.feedback.retry {
  border-left:6px solid #ef921a;
  background:#fff9ef;
}

.journal-card,
.method-grid article {
  box-shadow:none;
  border:1.5px solid #b7dce1;
}
.journal-card:hover {
  border-color:#0b8087;
}

@media (max-width: 1120px) {
  .workbook-domain-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .workbook-cover .hero-orin { opacity:.28; right:15px; }
  .workbook-cover .hero-copy { max-width:780px; }
  .workbook-matrix { grid-template-columns:1fr 1fr 1fr; }
  .matrix-title { grid-column:1/-1; }
  .matrix-arrow { display:none; }
}
@media (max-width: 680px) {
  .workbook-cover .hero-copy { padding:34px 22px 30px; }
  .workbook-cover h1 > span { font-size:47px; }
  .workbook-cover h1 > strong { font-size:23px; }
  .workbook-domain-row { grid-template-columns:1fr 1fr; }
  .workbook-cover .hero-orin { display:none; }
  .workbook-matrix { grid-template-columns:1fr; }
  .matrix-title { grid-column:auto; }
}


/* ==========================================================
   SMART CITY 5.0 · HYBRID DIGITAL IDENTITY
   Preserve the modern gradient while retaining original brand DNA.
   ========================================================== */

.brand-original {
  align-items: center;
  gap: 10px;
}
.brand-original img {
  width: 66px;
  height: 52px;
  object-fit: contain;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.brand-original span {
  font-size: 11px;
  color: #082f78;
  letter-spacing: .045em;
}
.brand-original strong {
  font-size: 22px;
  line-height: 1;
  margin-top: 2px;
}

.top-title {
  color: #082f78;
  font-weight: 800;
}

/* Return to the successful digital gradient, not a literal paper-copy cover. */
.workbook-cover.hero {
  min-height: 430px;
  color: white;
  background:
    radial-gradient(circle at 82% 20%, rgba(120, 239, 217, .22), transparent 22rem),
    radial-gradient(circle at 92% 82%, rgba(94, 190, 103, .16), transparent 22rem),
    linear-gradient(112deg, #0a3879 0%, #075f88 46%, #0b8d88 100%);
  border: 1px solid rgba(34, 164, 174, .55);
  box-shadow: 0 20px 50px rgba(7, 53, 91, .18);
}
.workbook-cover.hero::before,
.workbook-cover.hero::after {
  background: rgba(151, 236, 190, .72);
}
.workbook-cover .hero-copy {
  padding-top: 34px;
}
.hero-brand-logo {
  width: 180px;
  height: 112px;
  object-fit: contain;
  object-position: left center;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 20px;
  padding: 10px 12px;
  margin-bottom: 9px;
  box-shadow: 0 12px 28px rgba(2, 39, 72, .18);
}
.workbook-cover .cover-author {
  color: #b6f0cc;
}
.workbook-cover .cover-author::before,
.workbook-cover .cover-author::after {
  color: #9ce9b8;
}
.workbook-cover h1 > span {
  color: white;
  font-size: clamp(46px, 5vw, 78px);
  text-shadow: 0 5px 18px rgba(3, 35, 65, .18);
}
.cover-subtitle {
  color: #d9fbf3 !important;
  font-size: 18px !important;
  letter-spacing: .015em;
}
.cover-intro {
  color: #e2f4f6 !important;
}
.workbook-domain-row {
  max-width: 650px;
}
.domain-chip {
  background: rgba(255,255,255,.96);
  border-color: rgba(255,255,255,.72);
  box-shadow: 0 7px 16px rgba(2, 39, 72, .10);
}
.workbook-start {
  background: linear-gradient(135deg, #18a49a, #31b998) !important;
  border-color: rgba(255,255,255,.15) !important;
  box-shadow: 0 10px 22px rgba(1, 43, 61, .16) !important;
}
.workbook-cover .hero-orin {
  width: 330px;
  height: 390px;
}
.workbook-cover .hero-orin img {
  width: 280px;
  max-height: 350px;
  filter: drop-shadow(0 22px 22px rgba(2, 34, 62, .32));
}
.workbook-cover .orin-name {
  background: rgba(255,255,255,.13);
  color: white;
  border: 1px solid rgba(255,255,255,.30);
  backdrop-filter: blur(7px);
}

/* Keep workbook logic below the hero, but lighter and more digital. */
.workbook-matrix {
  box-shadow: 0 9px 28px rgba(24,84,108,.055);
}
.matrix-box.data {
  background: linear-gradient(180deg, #f5fbff, #eef8ff);
}
.matrix-box.info {
  background: linear-gradient(180deg, #f8fcf5, #f1faec);
}
.matrix-box.action {
  background: linear-gradient(180deg, #fffaf2, #fff4e3);
}

@media (max-width: 680px) {
  .hero-brand-logo {
    width: 145px;
    height: 90px;
  }
  .workbook-cover h1 > span {
    font-size: 43px;
  }
}

/* Compact original Smart City logo */
.brand-original img{
  width:46px !important;
  height:46px !important;
  object-fit:contain !important;
  border-radius:10px !important;
}
.hero-brand-logo{
  width:118px !important;
  height:auto !important;
  max-height:92px !important;
  object-fit:contain !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  margin-bottom:8px !important;
}
@media (max-width:680px){
  .brand-original img{width:40px !important;height:40px !important}
  .hero-brand-logo{width:96px !important;max-height:76px !important}
}


/* ==========================================================
   HERO REBALANCE · no logo inside gradient display
   ========================================================== */
.workbook-cover.hero{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 360px !important;
  align-items:center !important;
  min-height:430px !important;
  padding:42px 54px !important;
  column-gap:44px !important;
}
.workbook-cover .hero-copy{
  padding:0 !important;
  max-width:760px !important;
  align-self:center !important;
}
.workbook-cover .cover-author{
  margin-bottom:14px !important;
}
.workbook-cover h1{
  margin:0 0 10px !important;
}
.workbook-cover h1 > span{
  font-size:clamp(58px,5.2vw,86px) !important;
  line-height:.98 !important;
}
.workbook-cover .cover-subtitle{
  margin:0 0 24px !important;
}
.workbook-domain-row{
  grid-template-columns:repeat(4,minmax(120px,1fr)) !important;
  max-width:720px !important;
  gap:12px !important;
}
.workbook-cover .cover-intro{
  max-width:650px !important;
  margin:24px 0 22px !important;
}
.workbook-cover .hero-orin{
  position:relative !important;
  right:auto !important;
  bottom:auto !important;
  width:100% !important;
  height:auto !important;
  min-height:330px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  align-self:center !important;
}
.workbook-cover .hero-orin img{
  width:min(285px,86%) !important;
  max-height:320px !important;
  object-fit:contain !important;
  margin:0 auto !important;
}
.workbook-cover .orin-name{
  position:static !important;
  margin-top:10px !important;
}
.hero-brand-logo{
  display:none !important;
}
@media (max-width:1120px){
  .workbook-cover.hero{
    grid-template-columns:minmax(0,1fr) 280px !important;
    padding:38px 38px !important;
    column-gap:26px !important;
  }
  .workbook-cover .hero-orin{
    opacity:1 !important;
    right:auto !important;
  }
  .workbook-domain-row{
    grid-template-columns:repeat(2,minmax(140px,1fr)) !important;
    max-width:560px !important;
  }
}
@media (max-width:760px){
  .workbook-cover.hero{
    grid-template-columns:1fr !important;
    padding:30px 24px !important;
  }
  .workbook-cover .hero-orin{
    display:none !important;
  }
  .workbook-domain-row{
    grid-template-columns:1fr 1fr !important;
  }
  .workbook-cover h1 > span{
    font-size:48px !important;
  }
}

/* SMART CITY 5.0 — ELECTRIC BLUE REDESIGN v1 */
:root {
  --ink: #08245a;
  --muted: #5575a8;
  --navy: #063bb6;
  --mint: #52f1d1;
  --teal: #00bfe8;
  --bg: #eaf6ff;
  --line: #bfe3ff;
  --white: #ffffff;
  --electric-blue: #0757e8;
  --electric-deep: #062ba4;
  --electric-cyan: #12d8ff;
  --electric-aqua: #61f6ff;
  --electric-green: #36e389;
  --electric-violet: #6b4dff;
  --electric-gold: #ffbf2f;
  --panel-blue: rgba(12, 86, 217, 0.90);
  --glass: rgba(255,255,255,0.92);
}

body {
  background:
    radial-gradient(circle at 88% 4%, rgba(18,216,255,.32), transparent 28%),
    radial-gradient(circle at 12% 18%, rgba(73,111,255,.24), transparent 34%),
    linear-gradient(180deg, #dff4ff 0%, #eff8ff 38%, #f8fbff 100%);
}

::selection {
  background: #79efff;
  color: #03235c;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline-color: var(--electric-cyan);
}

/* NAVIGATION */
.sidebar {
  width: 238px;
  padding: 28px 18px 22px;
  color: #fff;
  background:
    radial-gradient(circle at 18% 15%, rgba(50,233,255,.28), transparent 27%),
    radial-gradient(circle at 75% 80%, rgba(77,72,255,.30), transparent 36%),
    linear-gradient(180deg, #063bb6 0%, #042d9a 52%, #031d72 100%);
  border-right: 1px solid rgba(106,225,255,.48);
  box-shadow: 16px 0 44px rgba(1,48,146,.18);
}
.sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(125deg, transparent 0 42%, rgba(56,231,255,.10) 43% 43.6%, transparent 44% 100%),
    radial-gradient(circle at 50% 100%, rgba(20,216,255,.18), transparent 36%);
}
.sidebar > * { position: relative; z-index: 1; }

.brand {
  gap: 13px;
  color: #fff;
  font-weight: 800;
}
.brand img {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  padding: 3px;
  background: linear-gradient(145deg, rgba(255,255,255,.28), rgba(29,218,255,.08));
  border: 1px solid rgba(132,245,255,.56);
  box-shadow: 0 0 22px rgba(22,220,255,.45);
}
.brand strong {
  color: #59f1ff;
  font-size: 22px;
}
.nav-label {
  color: #8fdfff;
  margin-top: 38px;
  letter-spacing: .13em;
}
.sidebar nav { gap: 10px; }
.sidebar nav a {
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 15px;
  color: #d9efff;
  font-size: 13px;
  border: 1px solid transparent;
  transition: .18s ease;
}
.sidebar nav a:hover {
  background: rgba(31,163,255,.18);
  color: #fff;
  border-color: rgba(80,219,255,.35);
  transform: translateX(3px);
}
.sidebar nav a[aria-current] {
  color: #fff;
  background: linear-gradient(90deg, rgba(17,218,255,.38), rgba(27,118,255,.35));
  border-color: #48e8ff;
  box-shadow: 0 0 20px rgba(26,220,255,.25), inset 0 0 20px rgba(255,255,255,.05);
}
.sidebar nav .icon { color: #82efff; }
.side-bottom p { color: #c6e8ff; }
.side-bottom small { color: #72dfff; }
.side-bottom img {
  width: 88px;
  filter: drop-shadow(0 0 18px rgba(33,228,255,.44));
}

/* WORKSPACE */
.workspace {
  margin-left: 238px;
  max-width: 1720px;
  padding: 0 32px 34px;
}
.topbar {
  min-height: 80px;
  color: #5476a3;
}
.top-title {
  color: #08338e;
  font-weight: 800;
  letter-spacing: .01em;
}
.signal-pill {
  color: #0c4d9e;
  background: rgba(255,255,255,.88);
  border-color: #9fdfff;
  box-shadow: 0 8px 24px rgba(10,92,190,.10);
}
.signal-pill strong { color: #072c83; }
.signal-pill .icon { color: #00c9e9; }
.local-pill { color: #50739e; }
.local-pill i,
.orin-name i,
.map-caption i {
  background: #36e389;
  box-shadow: 0 0 10px rgba(54,227,137,.6);
}

/* HERO / HOME */
.hero {
  min-height: 380px;
  grid-template-columns: minmax(0, 1fr) 330px;
  padding: 42px 48px 58px;
  border-radius: 28px;
  border: 1px solid rgba(109,227,255,.65);
  background:
    radial-gradient(circle at 78% 28%, rgba(83,242,255,.52), transparent 24%),
    radial-gradient(circle at 62% 76%, rgba(79,92,255,.28), transparent 35%),
    linear-gradient(125deg, #0631a6 0%, #0754df 42%, #009fdd 100%);
  box-shadow:
    0 22px 60px rgba(4,62,181,.22),
    inset 0 0 56px rgba(59,227,255,.14);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 22% 22%, rgba(255,255,255,.11) 0 2px, transparent 3px) 0 0/32px 32px,
    linear-gradient(135deg, transparent 0 48%, rgba(108,242,255,.12) 49% 49.6%, transparent 50%);
}
.hero::after {
  background:
    radial-gradient(circle at 82% 45%, rgba(114,247,255,.20), transparent 23%),
    radial-gradient(circle at 75% 52%, rgba(30,235,255,.16), transparent 42%);
  mask-image: none;
}
.hero h1 {
  font-size: clamp(44px, 5vw, 68px);
  margin: 10px 0 12px;
  text-shadow: 0 4px 20px rgba(3,36,120,.28);
}
.hero h1 span {
  background: linear-gradient(90deg, #fff 0%, #c7fbff 46%, #56f5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cover-author {
  color: #a8f6ff;
  letter-spacing: .18em;
}
.cover-subtitle {
  color: #d7f5ff !important;
  font-size: 19px !important;
  font-weight: 650;
}
.cover-intro {
  color: #ddf5ff !important;
  font-size: 15px !important;
  max-width: 620px !important;
}
.hero-orin img {
  width: 225px;
  filter:
    drop-shadow(0 20px 18px rgba(0,21,82,.28))
    drop-shadow(0 0 22px rgba(34,224,255,.42));
}
.orin-name {
  color: #eaffff;
  background: rgba(3,49,141,.70);
  border-color: rgba(112,240,255,.55);
  box-shadow: 0 0 18px rgba(31,219,255,.24);
}
.workbook-start,
.primary {
  background: linear-gradient(135deg, #075fe8, #00bfe8);
  border-color: rgba(120,239,255,.72);
  box-shadow: 0 10px 24px rgba(3,103,220,.22), inset 0 0 18px rgba(255,255,255,.09);
}
.primary:hover,
.workbook-start:hover {
  background: linear-gradient(135deg, #064dd1, #06d1f3);
  box-shadow: 0 14px 32px rgba(3,103,220,.28), 0 0 18px rgba(21,219,255,.22);
}

.workbook-domain-row {
  gap: 10px;
  margin: 18px 0 20px;
}
.domain-chip {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(131,239,255,.33) !important;
  color: #fff !important;
  backdrop-filter: blur(8px);
}
.domain-chip small { color: #b9edff !important; }

/* MATRIX + SECTIONS */
.workbook-matrix {
  border: 1px solid #9cddff;
  background:
    radial-gradient(circle at 100% 0, rgba(40,220,255,.16), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,249,255,.96));
  box-shadow: 0 12px 32px rgba(22,85,158,.10);
}
.matrix-title .eyebrow,
.workbook-section-title .eyebrow,
.activity-label,
.eyebrow {
  color: #0b6ed5;
}
.matrix-box {
  border-color: #bfe5ff !important;
  box-shadow: 0 8px 22px rgba(15,94,181,.07);
}
.matrix-box.data { background: linear-gradient(180deg,#f2fbff,#eaf6ff); }
.matrix-box.info { background: linear-gradient(180deg,#f5f1ff,#edf3ff); }
.matrix-box.action { background: linear-gradient(180deg,#effff7,#e7fbf2); }
.matrix-arrow { color: #16bfe9; }

.section-heading h2,
.mission-title h1,
.activity-body h2,
.page-intro + h1 {
  color: #06328b;
}
.count-chip {
  color: #0c55ae;
  border-color: #a9dcff;
  background: #f4fbff;
}

/* MAP + CARDS */
.map-card,
.district-card,
.activity-card,
.journal-card,
.backup-card {
  border-color: #bde4ff;
  box-shadow: 0 12px 28px rgba(16,83,161,.08);
}
.map-card {
  background: linear-gradient(180deg,#fff,#f6fbff);
}
.city-map {
  background:
    radial-gradient(circle at 50% 45%, rgba(74,214,255,.18), transparent 47%),
    linear-gradient(180deg,#f6fcff,#edf8ff);
}
.map-pin {
  border-color: #b9e7ff;
  box-shadow: 0 5px 16px rgba(3,75,160,.16);
}
.map-pin:hover {
  border-color: #2bd9ff;
  box-shadow: 0 10px 24px rgba(0,120,216,.22);
}
.guide-card {
  color: #073b88;
  background:
    radial-gradient(circle at 80% 15%, rgba(93,241,255,.24), transparent 30%),
    linear-gradient(155deg,#eaf9ff,#dff5ff);
  border: 1px solid #a9e4ff;
}
.guide-card h3 { color: #073b88; }
.guide-card p { color: #4e76a4; }
.final-card {
  background: linear-gradient(145deg,#eef2ff,#e7f8ff);
  border-color: #bddcff;
}
.final-card > .icon,
.final-card .text-link { color: #315fea; }

.district-card {
  background: linear-gradient(180deg,#fff,#f7fbff);
}
.district-card:hover {
  border-color: #37d7ff;
  box-shadow: 0 14px 30px rgba(8,115,212,.14);
}
.district-card h3 { color: #083789; }
.text-link { color: #0876d8; }

/* MISSIONS */
.activity-card {
  background: rgba(255,255,255,.97);
}
.stepper {
  background: linear-gradient(180deg,#f6fbff,#eef7ff);
  border-bottom-color: #cbe8ff;
}
.stepper li.active {
  color: #075ac7;
}
.stepper li.active > button > span {
  background: linear-gradient(145deg,#0878ee,#05c9ea);
  border-color: #37dfff;
  box-shadow: 0 0 14px rgba(8,191,232,.24);
}
.stepper .passed > button > span {
  background: #e9fff5;
  color: #1aaf73;
  border-color: #92e5c1;
}
.draft-status {
  color: #13649f;
  background: #effaff;
  border-bottom-color: #ccecff;
}
.simulation {
  background:
    radial-gradient(circle at 92% 10%, rgba(53,224,255,.15), transparent 28%),
    linear-gradient(120deg,#f5fbff,#ecf7ff);
  border-color: #bce7ff;
}
.sensor-display strong { color: #08388f; }
.meter { background: #d8efff; }
.meter i {
  background: linear-gradient(180deg,#23e4ff,#075ce3);
}
input[type="range"] { accent-color: #08aee8; }
.option {
  border-color: #cce6fb;
  background: #fff;
}
.option:hover {
  border-color: #53d9f8;
  background: #f5fcff;
}
.option:has(input:checked) {
  border-color: #159ce1;
  background: #edf9ff;
}
.option:has(input:checked) .option-marker {
  background: linear-gradient(145deg,#0775e8,#03c8e7);
  border-color: #0dcbe8;
}
.rule-builder {
  background: linear-gradient(145deg,#effaff,#eef4ff);
  border-color: #c2e6ff;
}
.rule-word { color: #076acb; }
.feedback.correct {
  border-color: #79e3bd !important;
  background: #effff7 !important;
}
.feedback.retry {
  border-color: #ffd48a !important;
  background: #fff9ed !important;
}

/* JOURNAL / ORIN */
.journal-stats > div {
  background: linear-gradient(180deg,#fff,#f4faff);
  border-color: #bfe3ff;
  box-shadow: 0 8px 22px rgba(22,88,164,.07);
}
.journal-stats strong { color: #07348a; }
.progress-track {
  background: #d9efff;
}
.progress-track span {
  background: linear-gradient(90deg,#0b67e8,#08d8e9,#38e58b);
}
.orin-page {
  border: 1px solid #9edfff;
  background:
    radial-gradient(circle at 82% 40%, rgba(63,231,255,.42), transparent 26%),
    linear-gradient(130deg,#0630a3,#0759df 52%,#00a8df);
  box-shadow: 0 20px 50px rgba(2,67,175,.18);
}
.orin-page h1,
.orin-page p { color: #fff; }
.orin-page img {
  filter: drop-shadow(0 0 24px rgba(37,232,255,.40));
}

/* DIALOGS / FLOATING ORIN */
.mentor-fab {
  color: #fff;
  background: linear-gradient(135deg,#075fe8,#00cfe8);
  border-color: #6cefff;
  box-shadow: 0 10px 30px rgba(2,83,203,.24), 0 0 20px rgba(24,218,255,.18);
}
dialog {
  border-color: #9ddfff !important;
  box-shadow: 0 24px 70px rgba(2,46,132,.26) !important;
}
.mentor-body {
  background: linear-gradient(145deg,#f2fbff,#edf6ff);
}

/* FOOTER */
footer {
  color: #567aa5;
  border-top-color: #bde0f8;
}

/* MOBILE */
@media (max-width: 820px) {
  body {
    background: linear-gradient(180deg,#dff4ff,#f7fbff 26%,#eef8ff);
  }
  .sidebar {
    width: 100%;
    height: 74px;
    inset: auto 0 0 0;
    flex-direction: row;
    padding: 8px 10px;
    border-right: 0;
    border-top: 1px solid rgba(95,228,255,.55);
    box-shadow: 0 -10px 30px rgba(2,44,133,.18);
  }
  .brand,
  .nav-label,
  .side-bottom { display: none; }
  .sidebar nav {
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .sidebar nav a {
    min-height: 56px;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    border-radius: 14px;
    font-size: 10px;
  }
  .workspace {
    margin-left: 0;
    padding: 0 14px 94px;
  }
  .topbar {
    min-height: 64px;
    gap: 8px;
  }
  .local-pill { display: none; }
  .signal-pill { padding: 7px 10px; }
  .hero {
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 28px 22px 34px;
    border-radius: 23px;
  }
  .hero h1 {
    font-size: 39px;
  }
  .cover-subtitle {
    font-size: 16px !important;
  }
  .hero-orin {
    min-height: 220px;
    order: -1;
  }
  .hero-orin img {
    width: 190px;
  }
  .orin-name {
    bottom: 0;
  }
  .workbook-domain-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .workbook-matrix,
  .map-layout,
  .district-grid,
  .mission-layout,
  .journal-grid,
  .method-grid {
    grid-template-columns: 1fr !important;
  }
  .matrix-arrow { transform: rotate(90deg); }
  .mission-aside { order: -1; }
  .city-map { aspect-ratio: 1/1; }
  .map-pin strong { display: none; }
  .map-pin { padding-right: 5px; }
  .activity-body { padding: 22px 18px; }
  .stepper {
    padding: 14px 12px;
    overflow-x: auto;
  }
  .stepper li {
    min-width: 120px;
  }
  footer {
    flex-direction: column;
    padding-bottom: 8px;
  }
  footer > span:last-child { padding-right: 0; }
  .mentor-fab {
    bottom: 86px;
    right: 14px;
  }
}

@media (max-width: 480px) {
  .hero { padding-inline: 18px; }
  .hero h1 { font-size: 34px; }
  .workbook-domain-row { grid-template-columns: 1fr; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .map-caption { flex-direction: column; }
  .sensor-display strong { font-size: 38px; }
}

/* SMART CITY 5.0 — DASHBOARD STRUCTURE v2 */
.dashboard-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  min-height: 430px;
  overflow: hidden;
  border-radius: 30px;
  padding: 46px 54px 42px;
  color: #fff;
  border: 1px solid rgba(116,232,255,.72);
  background:
    radial-gradient(circle at 77% 42%, rgba(79,236,255,.34), transparent 28%),
    radial-gradient(circle at 92% 5%, rgba(78,246,255,.25), transparent 22%),
    linear-gradient(120deg,#07309d 0%,#085bdc 45%,#04a9df 100%);
  box-shadow: 0 24px 64px rgba(5,58,173,.24), inset 0 0 80px rgba(35,228,255,.11);
}
.dashboard-hero::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(130deg,transparent 0 54%,rgba(96,241,255,.14) 54.5% 55%,transparent 55.5%),
    radial-gradient(circle at 18% 90%,rgba(97,108,255,.22),transparent 38%);
  pointer-events:none;
}
.dashboard-copy,.dashboard-orin{position:relative;z-index:1}
.dashboard-series{color:#9ff7ff;letter-spacing:.18em}
.dashboard-hero h1{
  margin:12px 0 10px;
  font-size:clamp(52px,5.5vw,82px);
  line-height:.98;
  letter-spacing:-.055em;
  color:#fff;
  text-shadow:0 8px 28px rgba(0,30,116,.3);
}
.dashboard-hero h1 em{
  background:linear-gradient(90deg,#fff,#8cf5ff 48%,#54ffd8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.dashboard-subtitle{font-size:21px!important;color:#e5f7ff!important;font-weight:700}
.dashboard-intro{font-size:16px!important;max-width:720px!important;color:#d8f3ff!important}
.dashboard-domains{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));max-width:800px}
.dashboard-domains .domain-chip{min-height:92px;justify-content:center;text-align:center}
.dashboard-cta{margin-top:2px}

.dashboard-orin{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:330px;
}
.dashboard-orin img{
  width:min(300px,85%);
  z-index:2;
  filter:drop-shadow(0 24px 24px rgba(0,26,94,.3)) drop-shadow(0 0 28px rgba(40,229,255,.48));
}
.orin-halo{
  position:absolute;
  width:320px;height:320px;
  border-radius:50%;
  border:1px solid rgba(122,244,255,.45);
  box-shadow:0 0 0 34px rgba(41,215,255,.05),0 0 60px rgba(23,225,255,.26);
}
.dashboard-orin .orin-name{bottom:18px}

.dashboard-overview{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  margin:20px 0 18px;
}
.progress-panel,.badges-panel{
  border:1px solid #8cdfff;
  border-radius:24px;
  padding:22px 24px;
  background:
    radial-gradient(circle at 90% 0,rgba(45,215,255,.16),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(239,249,255,.98));
  box-shadow:0 14px 36px rgba(15,79,163,.10);
}
.panel-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.panel-title h2{font-size:18px;margin:0;color:#07368f}
.panel-title .eyebrow{margin-bottom:4px}
.level-pill{
  flex:0 0 auto;
  padding:8px 14px;
  border-radius:999px;
  color:#fff;
  font-size:11px;
  font-weight:800;
  background:linear-gradient(135deg,#7a4cff,#0ccce5);
  box-shadow:0 8px 20px rgba(91,80,255,.18);
}
.progress-summary{
  display:grid;
  grid-template-columns:150px repeat(3,minmax(110px,1fr));
  gap:12px;
  align-items:stretch;
}
.progress-ring{
  --pct:0;
  width:138px;height:138px;
  border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(#25e58e calc(var(--pct)*1%),#09b8ec calc(var(--pct)*1%),#d9efff 0);
  padding:12px;
  box-shadow:0 0 28px rgba(13,188,221,.20);
}
.progress-ring::before{
  content:"";
  position:absolute;
}
.progress-ring>div{
  width:100%;height:100%;
  border-radius:50%;
  background:#fff;
  display:grid;place-items:center;
  text-align:center;
  box-shadow:inset 0 0 22px rgba(16,126,218,.08);
}
.progress-ring strong{font-size:31px;color:#07368f;line-height:1}
.progress-ring span{font-size:10px;color:#5575a8}
.stat-card{
  border:1px solid #d2eaff;
  border-radius:18px;
  background:#fff;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.stat-card strong{font-size:28px;color:#07368f}
.stat-card span{font-size:11px;color:#6b85aa;line-height:1.45}

.badge-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.achievement{
  display:grid;
  justify-items:center;
  gap:8px;
  padding:16px 8px;
  border-radius:18px;
  border:1px solid #d7e9ff;
  background:linear-gradient(180deg,#fff,#f5faff);
  opacity:.45;
}
.achievement.active{
  opacity:1;
  border-color:#70deff;
  box-shadow:0 10px 24px rgba(15,115,214,.12);
}
.achievement>span{
  width:58px;height:58px;
  border-radius:18px;
  display:grid;place-items:center;
  color:#fff;
  background:linear-gradient(145deg,#0aa8e8,#5b4dff);
  box-shadow:0 0 22px rgba(28,190,241,.28);
}
.achievement:nth-child(1)>span{background:linear-gradient(145deg,#19bd75,#55e89f)}
.achievement:nth-child(3)>span{background:linear-gradient(145deg,#ffad1f,#ffd64d)}
.achievement:nth-child(4)>span{background:linear-gradient(145deg,#7b4df5,#c65cff)}
.achievement .icon{width:28px;height:28px}
.achievement small{text-align:center;color:#31558e;font-size:10px;line-height:1.35}

.dashboard-matrix{
  margin-top:0;
  border-radius:24px;
}

@media (max-width:1100px){
  .dashboard-hero{grid-template-columns:1fr 300px;padding:38px 34px}
  .dashboard-domains{grid-template-columns:repeat(2,1fr)}
  .dashboard-overview{grid-template-columns:1fr}
}
@media (max-width:820px){
  .dashboard-hero{grid-template-columns:1fr;padding:28px 20px 30px}
  .dashboard-orin{order:-1;min-height:240px}
  .dashboard-orin img{width:190px}
  .orin-halo{width:230px;height:230px}
  .dashboard-hero h1{font-size:42px}
  .dashboard-subtitle{font-size:16px!important}
  .dashboard-domains{grid-template-columns:1fr 1fr}
  .progress-summary{grid-template-columns:1fr 1fr}
  .progress-ring{grid-column:1/-1;justify-self:center}
  .badge-row{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .dashboard-domains{grid-template-columns:1fr}
  .progress-summary{grid-template-columns:1fr}
  .progress-ring{grid-column:auto}
  .badge-row{grid-template-columns:1fr 1fr}
}

/* SMART CITY 5.0 — BALANCED HOME + DRAWER v3 */
.compact-hero{
  min-height:360px;
  grid-template-columns:minmax(0,1fr) 340px;
  padding:38px 44px 42px;
}
.top-right-orin{
  align-self:start;
  justify-self:end;
  width:100%;
  min-height:280px;
  padding-top:2px;
}
.top-right-orin img{
  width:255px;
  margin:0 8px 0 auto;
}
.top-right-orin .orin-halo{
  width:285px;
  height:285px;
  right:0;
}
.top-right-orin .orin-name{
  right:22px;
  bottom:6px;
}
.balanced-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:stretch;
}
.dashboard-secondary{
  margin:18px 0 0;
}
.matrix-panel,
.city-summary-panel{
  border:1px solid #8cdfff;
  border-radius:24px;
  background:
    radial-gradient(circle at 90% 0,rgba(45,215,255,.14),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(239,249,255,.98));
  box-shadow:0 14px 36px rgba(15,79,163,.10);
}
.matrix-panel{
  padding:22px 24px;
}
.panel-title.compact{margin-bottom:14px}
.matrix-compact{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:10px;
  align-items:center;
}
.matrix-compact .matrix-box{
  min-height:132px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.city-summary-panel{
  overflow:hidden;
}
.city-summary-panel>summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  padding:22px 24px;
}
.city-summary-panel>summary::-webkit-details-marker{display:none}
.city-summary-panel>summary h2{
  margin:0 0 8px;
  color:#07368f;
  font-size:22px;
}
.city-summary-panel>summary p{
  margin:0;
  color:#6481a7;
  font-size:13px;
}
.city-summary-stats{
  display:grid;
  grid-template-columns:auto auto;
  gap:10px;
  align-items:center;
}
.city-summary-stats>span:not(.drawer-action){
  min-width:86px;
  padding:10px 12px;
  border:1px solid #d2eaff;
  border-radius:14px;
  background:#fff;
  text-align:center;
}
.city-summary-stats strong{
  display:block;
  color:#07368f;
  font-size:21px;
  line-height:1.1;
}
.city-summary-stats small{
  display:block;
  color:#6e87a9;
  font-size:9px;
  margin-top:3px;
}
.drawer-action{
  grid-column:1/-1;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  color:#0876d8;
  font-weight:750;
  font-size:12px;
  padding-top:2px;
}
.city-summary-panel[open] .drawer-action .icon{
  transform:rotate(90deg);
}
.district-drawer{
  border-top:1px solid #cdeaff;
  padding:18px 20px 22px;
  background:linear-gradient(180deg,#f8fcff,#eef8ff);
}
.drawer-map{
  margin-bottom:18px;
}
.drawer-grid{
  margin-top:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.drawer-grid .district-card{
  padding:18px 16px;
}
.drawer-grid .district-card p{
  display:none;
}
.drawer-grid .district-card h3{
  margin-bottom:8px;
}
@media (max-width:1100px){
  .compact-hero{grid-template-columns:1fr 300px}
  .balanced-two{grid-template-columns:1fr}
  .matrix-compact{grid-template-columns:1fr}
  .matrix-compact .matrix-arrow{transform:rotate(90deg);justify-self:center}
}
@media (max-width:820px){
  
  .compact-hero{grid-template-columns:1fr;padding:24px 18px 28px}
  .top-right-orin{order:-1;min-height:210px;justify-self:center}
  .top-right-orin img{width:180px;margin:auto}
  .top-right-orin .orin-halo{width:215px;height:215px;left:50%;right:auto;transform:translateX(-50%)}
  .top-right-orin .orin-name{right:50%;transform:translateX(50%);bottom:0}
  .city-summary-panel>summary{grid-template-columns:1fr}
  .city-summary-stats{grid-template-columns:1fr 1fr}
  .drawer-grid{grid-template-columns:1fr}
}


/* SMART CITY 5.0 — SIDEBAR LOGO B1 v4 */
.brand.brand-original img{
  width:62px;
  height:62px;
  object-fit:cover;
  border-radius:17px;
  padding:0;
  background:none;
  border:1px solid rgba(117,239,255,.70);
  box-shadow:0 0 18px rgba(24,222,255,.38);
}
.brand.brand-original span{
  line-height:1.12;
}
@media (max-width:820px){
  .brand.brand-original img{width:52px;height:52px}
}

/* SMART CITY 5.0 — RESTORE ORIGINAL SIDEBAR LOGO */
.brand.brand-original img{
  width:58px;
  height:58px;
  object-fit:cover;
  border-radius:18px;
  padding:3px;
  background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(29,218,255,.08));
  border:1px solid rgba(132,245,255,.56);
  box-shadow:0 0 22px rgba(22,220,255,.45);
  filter:none;
}
.brand.brand-original{gap:13px;}
@media (max-width:820px){
  .brand.brand-original img{width:52px;height:52px;}
}

/* SMART CITY 5.0 — MAP POPUP v8 */
.popup-launch-panel{
  padding:0;
  overflow:hidden;
}
.city-summary-button{
  width:100%;
  min-height:100%;
  border:0;
  background:transparent;
  color:inherit;
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  padding:22px 24px;
  text-align:left;
  cursor:pointer;
}
.city-summary-button:hover{
  background:linear-gradient(90deg,rgba(17,144,255,.035),rgba(16,217,255,.08));
}
.city-summary-button:focus-visible{
  outline:3px solid #19c8ee;
  outline-offset:-3px;
  border-radius:22px;
}
.city-summary-button h2{
  margin:0 0 8px;
  color:#07368f;
  font-size:22px;
}
.city-summary-button p{
  margin:0;
  color:#6481a7;
  font-size:13px;
}
.city-map-dialog{
  width:min(1180px,94vw);
  max-width:none;
  max-height:92vh;
  padding:0;
  border:1px solid #8fdfff!important;
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(180deg,#fafdff,#eef8ff);
  box-shadow:0 30px 90px rgba(1,42,130,.30),0 0 0 1px rgba(255,255,255,.7) inset;
}
.city-map-dialog::backdrop{
  background:rgba(3,23,73,.68);
  backdrop-filter:blur(7px);
}
.city-dialog-shell{
  max-height:92vh;
  overflow:auto;
  padding:24px;
}
.city-dialog-top{
  position:sticky;
  top:-24px;
  z-index:6;
  margin:-24px -24px 18px;
  padding:22px 24px 18px;
  background:rgba(247,252,255,.96);
  border-bottom:1px solid #cbe9fb;
  backdrop-filter:blur(12px);
}
.city-dialog-top h2{
  margin:3px 0 4px;
  color:#07368f;
  font-size:25px;
}
.city-dialog-top p{
  margin:0;
  color:#6481a7;
}
.city-map-dialog .close-button{
  width:42px;
  height:42px;
  border-radius:50%;
  font-size:28px;
  color:#075ab8;
  border:1px solid #b8e4ff;
  background:#fff;
  box-shadow:0 7px 18px rgba(19,96,181,.11);
}
.popup-map-layout{
  grid-template-columns:minmax(0,1.7fr) minmax(260px,.65fr);
  gap:18px;
}
.popup-map-layout .map-card{
  margin:0;
}
.popup-map-layout .city-map{
  min-height:520px;
}
.popup-mission-aside{
  display:grid;
  gap:16px;
  align-content:start;
}
.popup-district-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
.popup-district-grid .district-card{
  padding:16px;
}
.popup-district-grid .district-card p{
  display:none;
}
@media (max-width:900px){
  .popup-map-layout{grid-template-columns:1fr}
  .popup-map-layout .city-map{min-height:450px}
  .popup-district-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .city-summary-button{grid-template-columns:1fr}
  .city-map-dialog{width:96vw;border-radius:22px}
  .city-dialog-shell{padding:16px}
  .city-dialog-top{
    top:-16px;
    margin:-16px -16px 14px;
    padding:18px 16px 14px;
  }
  .popup-map-layout .city-map{min-height:360px}
  .popup-district-grid{grid-template-columns:1fr}
}

/* SMART CITY 5.0 — DOMAIN CARDS HIGH CONTRAST v9 */
.dashboard-domains{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.dashboard-domains .domain-chip{
  min-height:112px;
  padding:18px 14px 14px;
  border-radius:22px;
  background:#ffffff!important;
  border:1px solid rgba(120,210,255,.45)!important;
  box-shadow:0 12px 28px rgba(0,45,120,.16);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  backdrop-filter:none!important;
}
.dashboard-domains .domain-chip .icon{
  width:34px;
  height:34px;
  margin-bottom:4px;
  opacity:1!important;
  filter:none!important;
}
.dashboard-domains .domain-chip b{
  display:block;
  margin:0;
  font-size:18px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.1;
  opacity:1!important;
  text-shadow:none!important;
}
.dashboard-domains .domain-chip small{
  display:block;
  margin:0;
  font-size:14px;
  font-weight:600;
  color:#4e6488!important;
  line-height:1.2;
  opacity:1!important;
  text-shadow:none!important;
}
.dashboard-domains .domain-chip.tech b,
.dashboard-domains .domain-chip.tech .icon{color:#0072d9!important;}
.dashboard-domains .domain-chip.eco b,
.dashboard-domains .domain-chip.eco .icon{color:#52a61f!important;}
.dashboard-domains .domain-chip.civic b,
.dashboard-domains .domain-chip.civic .icon{color:#8b47d8!important;}
.dashboard-domains .domain-chip.create b,
.dashboard-domains .domain-chip.create .icon{color:#ff9800!important;}
.dashboard-domains .domain-chip:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(0,58,148,.20);
}
@media (max-width:980px){
  .dashboard-domains{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
  .dashboard-domains{grid-template-columns:1fr;}
}

/* SMART CITY 5.0 — FINAL MISSION ACCESS BUTTON v10 */
.final-card.unlocked{
  border-color:#71e6c0;
  background:linear-gradient(145deg,#effff9,#eef8ff);
  box-shadow:0 12px 28px rgba(27,177,132,.12);
}
.final-access-button{
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
}
.locked-note{
  display:inline-flex;
  margin-top:12px;
  padding:7px 10px;
  border-radius:999px;
  background:#edf4fa;
  color:#6e87a9;
  font-size:10px;
  font-weight:800;
}

/* WEB educational audit — observation comparison and readable district prompts */
.district-question { margin: .35rem 0 .7rem; font-weight: 600; color: #175e68; }
.observation-chart { display: grid; gap: .6rem; margin: 1rem 0; padding: 1rem; background: #eef6fa; border-radius: 14px; }
.observation-bar-row { display: grid; grid-template-columns: 4.5rem minmax(0,1fr) 4.5rem; align-items: center; gap: .65rem; font-size: .9rem; }
.observation-bar-row strong { text-align: right; }
.observation-bar-track { min-width: 0; height: 13px; background: #d4e2eb; border-radius: 8px; overflow: hidden; }
.observation-bar-track i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg,#207f78,#447db8); }
@media (max-width: 480px) {
  .observation-bar-row { grid-template-columns: 3.65rem minmax(0,1fr) 3.8rem; gap: .35rem; font-size: .78rem; }
  .observation-chart { padding: .65rem; }
}

/* PR #18 – mobile visual audit corrections, web only */
@media (max-width: 820px) {
  .sidebar.app-sidebar {
    height: calc(66px + env(safe-area-inset-bottom, 0px));
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    z-index: 40;
  }
  .sidebar.app-sidebar nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    min-width: 0;
  }
  .sidebar.app-sidebar nav a {
    min-width: 0;
    min-height: 54px;
    padding: 5px 2px;
    gap: 3px;
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
    color: #143c75;
    opacity: 1;
  }
  .sidebar.app-sidebar nav a span {
    display: block;
    max-width: 100%;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.15;
    color: #143c75;
    opacity: 1;
    overflow-wrap: anywhere;
  }
  .sidebar.app-sidebar nav a[aria-current="page"] {
    background: #dcefff;
    color: #064a9c;
  }
  .workspace {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }
  .mentor-fab {
    position: fixed;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    z-index: 35;
    min-height: 42px;
    max-width: min(150px, 45vw);
    padding: 9px 12px;
    font-size: 11px;
  }
  #notifications {
    bottom: calc(132px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 380px) {
  .sidebar.app-sidebar nav a span { font-size: 9px; }
  .sidebar.app-sidebar nav { gap: 1px; }
}
/* The skip link is keyboard-only and must never cover an open dialog. */
.skip-link:not(:focus-visible) {
  transform: translateY(calc(-100% - 30px));
}
body:has(dialog[open]) .skip-link { visibility: hidden; pointer-events: none; }
body:has(dialog[open]) .mentor-fab { visibility: hidden; pointer-events: none; }
.city-map-dialog .city-dialog-top p { color: #375b87; }
.locked-note { color: #284b78; }

/* Ensure the fixed mobile navigation is attached to the viewport bottom, not stretched from the top. */
@media (max-width: 820px) {
  aside.sidebar.app-sidebar {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    bottom: 0 !important;
    min-height: 0;
    max-height: calc(66px + env(safe-area-inset-bottom, 0px));
  }
}

/* Extended Smart City field journal */
.journal-extended{margin:26px 0;padding:22px;border-radius:24px;border:1px solid #b9dcca;background:linear-gradient(130deg,#e9f8ef,#edf6ff)}
.journal-ext-head h2{margin:6px 0}.journal-ext-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}.journal-ext-stats article,.journal-ext-grid article{background:#fff;border:1px solid #c7e0d6;border-radius:14px;padding:15px}
.journal-ext-stats article{display:grid;gap:5px}.journal-ext-stats strong{font-size:1.5rem;color:#146f64}.journal-ext-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.journal-ext-grid article{min-width:0}.journal-ext-grid ul{padding-left:20px;max-height:230px;overflow:auto}.journal-ext-grid li{margin-bottom:8px;overflow-wrap:anywhere}
.journal-ext-grid textarea{box-sizing:border-box;width:100%;padding:10px;border:1px solid #aed2c8;border-radius:10px;font:inherit}.journal-ext-grid label{display:block;margin:10px 0 6px;font-weight:700}
.journal-photos{grid-column:1/-1}.journal-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:14px}.journal-photo-grid figure{margin:0;padding:8px;background:#e9f7f1;border-radius:12px}.journal-photo-grid img{width:100%;height:120px;object-fit:cover;border-radius:8px}.journal-photo-grid figcaption{overflow-wrap:anywhere}.journal-note-list p{border-bottom:1px solid #e1eae6;padding:8px 0;overflow-wrap:anywhere}
@media(max-width:720px){.journal-ext-stats,.journal-ext-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:510px){.journal-ext-stats,.journal-ext-grid{grid-template-columns:1fr}.journal-extended{padding:13px}}

/* Final report and earned mission badges */
.report-entry,.report-shell{border-radius:22px;background:linear-gradient(135deg,#edf9ef,#edf5ff);border:1px solid #bcdccd;padding:24px;margin:22px 0}
.report-shell{max-width:1000px;margin:0 auto;background:#fff}.report-top{text-align:center}.report-top h1{font-size:clamp(2rem,5vw,3rem);margin:.3rem}.report-top label{display:block;font-weight:700;margin:15px 0 4px}.report-top input{width:min(450px,100%);border:1px solid #bed5cc;border-radius:10px;padding:10px;font:inherit}
.report-score{display:grid;grid-template-columns:repeat(3,auto 1fr);align-items:center;gap:9px;background:#e7f6ec;border-radius:12px;padding:14px}.report-score strong{font-size:1.5rem;color:#13745d}
.report-table{border-collapse:collapse;width:100%}.report-table td,.report-table th{border-bottom:1px solid #d8e7e0;padding:8px;text-align:left;overflow-wrap:anywhere}
.report-missions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.report-missions article{border:1px solid #c5e0d3;border-radius:13px;padding:12px}.report-missions article span{display:block;color:#397260}
.report-badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px}.report-badges>div{display:grid;place-items:center;text-align:center;padding:12px;border:1px solid #b8ddcb;border-radius:16px;background:linear-gradient(145deg,#e5f8e9,#ecf6ff)}.report-badges span{font-size:2rem}.report-badges small{color:#527166}
.report-solution{border-left:4px solid #16856d;padding:16px;background:#f0faf3;white-space:pre-wrap}
.report-diploma{margin-top:32px;text-align:center;padding:34px;border:7px double #73b89b;background:linear-gradient(155deg,#f7fffa,#e8f6ff)}.report-diploma h2{font-size:2rem;color:#116956}.report-diploma small{display:block;margin-top:12px}
.report-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
@media(max-width:700px){.report-score{grid-template-columns:repeat(3,1fr);text-align:center}.report-score strong{grid-row:1}.report-missions{grid-template-columns:1fr}.report-shell{padding:12px}}
@media print{.sidebar,.app-sidebar,.report-actions,.report-entry,#notifications,.skip-link{display:none!important}body,.report-shell{background:#fff!important}.report-shell{border:0;max-width:unset;padding:0}.report-diploma{break-before:page;page-break-before:always}.report-badges>div,.report-missions article{break-inside:avoid}#main{max-width:unset!important}.report-top input{border:0;text-align:center}}