* { box-sizing: border-box; }
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #07111d;
  color: #edf3ff;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  overflow: hidden;
}
#map {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.flow-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 410;
}
.panel {
  position: absolute;
  z-index: 1000;
  background: rgba(8, 16, 30, 0.9);
  border: 1px solid rgba(255, 191, 77, 0.18);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.38);
}
#title-box {
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  padding: 12px 18px;
  min-width: 420px;
}
#title-box h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #ffbf4d;
  letter-spacing: 0.2px;
}
#title-box p {
  margin: 4px 0 0;
  font-size: 11px;
  color: rgba(235, 244, 255, 0.68);
}
#scenario-box, #timeline-box, #impact-box, #stats {
  width: 388px;
  padding: 14px 16px 16px;
}
#scenario-box {
  top: 16px;
  left: 16px;
  max-height: calc(100vh - 110px);
  overflow: auto;
}
#timeline-box {
  top: 16px;
  right: 16px;
}
#impact-box {
  left: 16px;
  bottom: 16px;
  max-height: 43vh;
  overflow: auto;
}
#stats {
  right: 16px;
  bottom: 16px;
  max-height: 43vh;
  overflow: auto;
}
#legend {
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 12px 14px;
  width: 350px;
}
.box-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 191, 77, 0.82);
  margin-bottom: 10px;
}
.search-wrap {
  position: relative;
  margin-bottom: 10px;
}
#search-input, select {
  width: 100%;
  border: 1px solid rgba(255, 191, 77, 0.18);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(235, 244, 255, 0.92);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
}
#search-input::placeholder {
  color: rgba(235, 244, 255, 0.45);
}
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1200;
  border: 1px solid rgba(255, 191, 77, 0.16);
  border-radius: 10px;
  background: rgba(8, 16, 30, 0.98);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  max-height: 240px;
  overflow: auto;
}
.search-results.hidden { display: none; }
.search-result {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
}
.search-result:last-child { border-bottom: 0; }
.search-result:hover { background: rgba(255, 191, 77, 0.08); }
.search-result .name { font-size: 12px; font-weight: 700; }
.search-result .meta { font-size: 11px; color: rgba(235, 244, 255, 0.6); }
.selected-card {
  border-radius: 12px;
  border: 1px solid rgba(255, 191, 77, 0.14);
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.selected-card.empty {
  border-color: rgba(255, 255, 255, 0.08);
}

.quick-help-card {
  border-radius: 12px;
  border: 1px solid rgba(124, 240, 166, 0.18);
  background: linear-gradient(180deg, rgba(124, 240, 166, 0.08), rgba(255, 255, 255, 0.02));
  padding: 10px 12px;
  margin-bottom: 12px;
}
.quick-help-title {
  font-size: 12px;
  font-weight: 700;
  color: #d8ffe6;
  margin-bottom: 6px;
}
.quick-help-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(235, 244, 255, 0.82);
}
.quick-help-list li {
  margin-bottom: 4px;
}
.quick-scenario-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.quick-scenario-btn {
  flex: 1 1 calc(50% - 4px);
  border: 1px solid rgba(99, 216, 255, 0.22);
  background: linear-gradient(180deg, rgba(99, 216, 255, 0.16), rgba(255, 255, 255, 0.03));
  color: #ecf8ff;
  border-radius: 11px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.quick-scenario-btn:hover {
  background: linear-gradient(180deg, rgba(99, 216, 255, 0.22), rgba(255, 255, 255, 0.05));
}
.quick-scenario-btn.active {
  border-color: rgba(255, 209, 102, 0.42);
  background: linear-gradient(180deg, rgba(255, 209, 102, 0.22), rgba(255, 255, 255, 0.06));
  color: #fff5d8;
  box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.16) inset;
}
.quick-scenario-btn.danger {
  border-color: rgba(255, 108, 122, 0.35);
  background: linear-gradient(180deg, rgba(255, 108, 122, 0.18), rgba(255, 255, 255, 0.03));
  color: #ffe7eb;
}
.scenario-readout-card {
  border-radius: 12px;
  border: 1px solid rgba(255, 191, 77, 0.18);
  background: linear-gradient(180deg, rgba(255, 191, 77, 0.12), rgba(255, 255, 255, 0.03));
  padding: 10px 12px;
}
.scenario-readout-card .headline {
  font-size: 13px;
  font-weight: 700;
  color: #fff2cb;
  margin-bottom: 4px;
}
.scenario-readout-card .copy {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(235, 244, 255, 0.82);
}
.timeline-item {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.timeline-item:last-child {
  margin-bottom: 0;
}
.timeline-item .phase {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(124, 240, 166, 0.9);
  margin-bottom: 4px;
}
.timeline-item .title {
  font-size: 12px;
  font-weight: 700;
  color: #eef6ff;
  margin-bottom: 4px;
}
.timeline-item .copy {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(235, 244, 255, 0.78);
}
.help-section {
  margin-bottom: 14px;
}
.help-section h3 {
  margin: 0 0 6px;
  font-size: 13px;
  color: #d8ffe6;
}
#selected-name {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 2px;
}
#selected-type {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(235, 244, 255, 0.62);
}
.control-block { margin-bottom: 12px; }
.control-block.compact { margin-bottom: 10px; }
.control-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.control-row label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: rgba(235, 244, 255, 0.58);
}
.inline-tools {
  display: flex;
  gap: 6px;
}
#availability-value {
  font-size: 14px;
  font-weight: 700;
  color: #ffbf4d;
}
input[type="range"] {
  width: 100%;
  accent-color: #ffbf4d;
}
.preset-row, .action-row, .mode-buttons, .product-buttons, .toggle-grid, .service-filter-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.product-btn, .preset-btn, .action-row button, .toggle-btn, .service-chip, .tiny-btn {
  border: 1px solid rgba(255, 191, 77, 0.16);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(235, 244, 255, 0.84);
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: 0.2s ease;
}
.product-btn:hover, .preset-btn:hover, .action-row button:hover, .toggle-btn:hover, .service-chip:hover, .tiny-btn:hover {
  background: rgba(255, 191, 77, 0.09);
}
.product-btn, .toggle-btn { flex: 1 1 calc(50% - 4px); }
.action-row button { flex: 1; }
.action-row-bottom { margin-top: 8px; }
.product-btn.active, .toggle-btn.active, .service-chip.active {
  background: rgba(99, 216, 255, 0.14);
  border-color: rgba(99, 216, 255, 0.3);
  color: #d6f6ff;
}
.preset-btn.danger { border-color: rgba(255, 106, 106, 0.28); color: #ffd4d4; }
.tiny-btn { padding: 5px 8px; font-size: 11px; }
.time-label {
  font-size: 12px;
  color: rgba(235, 244, 255, 0.86);
  margin-top: 8px;
}
.small-note, .source-note {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(235, 244, 255, 0.58);
}
.list-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(235, 244, 255, 0.56);
  margin: 10px 0 8px;
}
.stat-row, .supplier-item, .impact-item, .storage-item, .priority-item, .weak-item, .region-item, .monthly-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.stat-row:last-child, .supplier-item:last-child, .impact-item:last-child, .storage-item:last-child, .priority-item:last-child, .weak-item:last-child, .region-item:last-child, .monthly-item:last-child {
  border-bottom: 0;
}
.stat-row .label, .supplier-item .name, .impact-item .name, .storage-item .name, .priority-item .name, .weak-item .name, .region-item .name, .monthly-item .name {
  font-size: 12px;
  color: #eef6ff;
}
.stat-row .value, .supplier-item .share, .impact-item .share, .monthly-item .share {
  font-size: 12px;
  font-weight: 700;
  color: #ffbf4d;
  white-space: nowrap;
}
.meta {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(235, 244, 255, 0.6);
}
.meta.sub { margin-top: 3px; }
.badge {
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-stable, .badge-protected {
  background: rgba(66, 243, 207, 0.14);
  color: #9affeb;
}
.badge-buffered, .badge-reduced {
  background: rgba(99, 216, 255, 0.14);
  color: #cff6ff;
}
.badge-tight {
  background: rgba(255, 191, 77, 0.14);
  color: #ffd180;
}
.badge-risk {
  background: rgba(255, 133, 82, 0.14);
  color: #ffb89c;
}
.badge-critical, .badge-severe {
  background: rgba(255, 86, 86, 0.16);
  color: #ffc0c0;
}
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.compare-card {
  border-radius: 12px;
  border: 1px solid rgba(255, 191, 77, 0.14);
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 12px;
}
.compare-card h3 {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: rgba(235, 244, 255, 0.62);
}
.bar-wrap {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  margin: 5px 0 8px;
}
.bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(99,216,255,0.9), rgba(255,191,77,0.95));
}
.bar.scenario { background: linear-gradient(90deg, rgba(255,120,120,0.9), rgba(255,191,77,0.95)); }
.explanation-box {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(235, 244, 255, 0.82);
  white-space: pre-wrap;
}
.legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(235, 244, 255, 0.82);
  margin-bottom: 7px;
}
.l-line {
  width: 24px;
  height: 0;
  border-top-width: 3px;
  border-top-style: solid;
  border-radius: 999px;
  flex: 0 0 auto;
}
.l-crude { border-color: #b084ff; }
.l-refined { border-color: #ffb454; }
.l-domestic { border-color: #63d8ff; }
.l-reroute { border-color: #42f3cf; }
.l-reduced { border-color: rgba(255,255,255,0.45); border-top-style: dashed; }
.l-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.d-main { background: #ffd166; }
.d-inland { background: #42f3cf; }
.d-region { background: #7cf0a6; }
.d-service { background: #ff8fd1; }
.label-upstream, .label-hub, .label-main, .label-secondary, .label-inland, .label-region, .label-service {
  color: #fff;
  font-size: 11px;
  line-height: 1.25;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
.label-hub strong { color: #ffd180; }
.label-main { color: #fff0a8; }
.label-region { color: #d7ffd8; }
.label-service { color: #ffd0eb; }
#tooltip {
  position: absolute;
  z-index: 1200;
  display: none;
  width: 290px;
  background: rgba(8, 16, 30, 0.97);
  border: 1px solid rgba(255, 191, 77, 0.16);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.tt-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.tt-role {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255, 191, 77, 0.8);
  margin: 2px 0 8px;
}
.tt-data {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(235, 244, 255, 0.84);
}
@media (max-width: 1200px) {
  #scenario-box, #timeline-box, #impact-box, #stats {
    width: 340px;
  }
}
@media (max-width: 920px) {
  #title-box {
    min-width: 0;
    width: calc(100vw - 32px);
  }
  #scenario-box, #timeline-box, #impact-box, #stats {
    position: absolute;
    width: calc(50vw - 24px);
  }
  #impact-box, #stats { bottom: 12px; }
  #legend { display: none; }
}
@media (max-width: 760px) {
  body { overflow: auto; }
  #map { min-height: 1500px; }
  #title-box, #scenario-box, #timeline-box, #impact-box, #stats {
    position: absolute;
    width: calc(100vw - 24px);
    left: 12px;
    right: 12px;
    transform: none;
  }
  #title-box { top: 12px; }
  #scenario-box { top: 88px; }
  #timeline-box { top: 540px; }
  #impact-box { top: 900px; bottom: auto; max-height: 260px; }
  #stats { top: 1180px; bottom: auto; max-height: 280px; }
  #legend { display: none; }
}


#display-toolbar {
  top: 14px;
  right: 16px;
  display: flex;
  gap: 8px;
  padding: 10px;
  align-items: center;
  flex-wrap: wrap;
  max-width: min(760px, calc(100vw - 32px));
}
.toolbar-btn {
  border: 1px solid rgba(255, 191, 77, 0.16);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(235, 244, 255, 0.88);
  border-radius: 10px;
  padding: 8px 11px;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
}
.toolbar-btn:hover {
  background: rgba(255, 191, 77, 0.09);
}
.toolbar-link {
  display: inline-flex;
  align-items: center;
}
#embed-summary {
  top: 70px;
  right: 16px;
  width: 280px;
  padding: 10px 12px;
  display: none;
}
.embed-title {
  font-size: 12px;
  font-weight: 700;
  color: #ffbf4d;
  margin-bottom: 4px;
}
.embed-copy {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(235, 244, 255, 0.72);
}
.panel-hidden {
  display: none !important;
}
body.embed-mode #display-toolbar {
  top: 12px;
  left: 12px;
  right: auto;
  max-width: calc(100vw - 24px);
}
body.embed-mode #title-box {
  top: 64px;
  left: 12px;
  transform: none;
  min-width: 0;
  width: calc(100vw - 24px);
  text-align: left;
}
body.embed-mode #embed-summary {
  display: block;
  top: 64px;
  right: 12px;
}
body.embed-mode #scenario-box,
body.embed-mode #timeline-box,
body.embed-mode #impact-box,
body.embed-mode #stats,
body.embed-mode #legend {
  top: 118px;
  max-height: calc(100vh - 130px);
  overflow: auto;
}
body.embed-mode #scenario-box {
  left: 12px;
  width: min(360px, calc(100vw - 24px));
}
body.embed-mode #timeline-box,
body.embed-mode #impact-box,
body.embed-mode #stats {
  right: 12px;
  left: auto;
  width: min(360px, calc(100vw - 24px));
}
body.embed-mode #impact-box,
body.embed-mode #stats,
body.embed-mode #legend {
  bottom: 12px;
  top: auto;
  max-height: 48vh;
}
body.embed-mode #legend {
  left: 50%;
  transform: translateX(-50%);
  width: min(350px, calc(100vw - 24px));
}
body.embed-mode.compact-panels #scenario-box,
body.embed-mode.compact-panels #timeline-box,
body.embed-mode.compact-panels #impact-box,
body.embed-mode.compact-panels #stats,
body.embed-mode.compact-panels #legend {
  display: none;
}
.modal.hidden {
  display: none;
}
.modal {
  position: absolute;
  inset: 0;
  z-index: 2000;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 9, 18, 0.72);
}
.modal-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(620px, calc(100vw - 32px));
  max-height: min(72vh, 720px);
  overflow: auto;
  transform: translate(-50%, -50%);
  background: rgba(8, 16, 30, 0.98);
  border: 1px solid rgba(255, 191, 77, 0.18);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.modal-head h2 {
  margin: 0;
  font-size: 16px;
  color: #ffbf4d;
}
.modal-close {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.modal-body {
  padding: 14px 16px 18px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(235, 244, 255, 0.86);
}
.modal-body ul {
  margin: 10px 0 10px 18px;
  padding: 0;
}
.modal-body li {
  margin-bottom: 6px;
}
@media (max-width: 1180px) {
  #display-toolbar {
    left: 16px;
    right: 16px;
    max-width: none;
  }
  #embed-summary {
    display: none !important;
  }
}
@media (max-width: 760px) {
  #display-toolbar {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    max-width: none;
  }
  body.embed-mode #title-box {
    top: 114px;
  }
  body.embed-mode #scenario-box,
  body.embed-mode #timeline-box,
  body.embed-mode #impact-box,
  body.embed-mode #stats,
  body.embed-mode #legend {
    top: 168px;
    left: 12px;
    right: 12px;
    width: calc(100vw - 24px);
  }
}


.horizon-row {
  margin-top: 10px;
}
.horizon-btn {
  border: 1px solid rgba(124, 240, 166, 0.2);
  background: rgba(124, 240, 166, 0.08);
  color: #e7fff0;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 11px;
  cursor: pointer;
}
.horizon-btn.active {
  background: linear-gradient(180deg, rgba(124, 240, 166, 0.22), rgba(255, 255, 255, 0.05));
  border-color: rgba(124, 240, 166, 0.42);
  box-shadow: 0 0 0 1px rgba(124, 240, 166, 0.14) inset;
}
body.compact-ui #title-box {
  min-width: 0;
}
body.compact-ui #display-toolbar {
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: thin;
}
body.compact-ui #display-toolbar .toolbar-btn {
  white-space: nowrap;
  flex: 0 0 auto;
}
body.compact-ui #scenario-box,
body.compact-ui #timeline-box,
body.compact-ui #impact-box,
body.compact-ui #stats,
body.compact-ui #legend {
  left: 12px;
  right: 12px;
  width: auto;
  max-width: none;
  max-height: min(56vh, 540px);
  overflow: auto;
  top: auto;
  bottom: 12px;
}
body.compact-ui #legend {
  width: calc(100vw - 24px);
  transform: none;
  left: 12px;
}
body.compact-ui #map {
  height: 100vh;
  min-height: 100vh;
}
body.compact-ui #embed-summary {
  display: none !important;
}
@media (max-width: 760px) {
  body { overflow: hidden; }
  #title-box {
    top: 62px;
    width: calc(100vw - 24px);
    left: 12px;
    transform: none;
    text-align: left;
  }
  #display-toolbar {
    top: 12px;
    left: 12px;
    right: 12px;
    max-width: none;
  }
  body.compact-ui #scenario-box,
  body.compact-ui #timeline-box,
  body.compact-ui #impact-box,
  body.compact-ui #stats,
  body.compact-ui #legend {
    bottom: 12px;
    top: auto;
    max-height: min(58vh, 560px);
  }
  body.compact-ui #title-box h1 {
    font-size: 15px;
  }
  body.compact-ui #title-box p {
    font-size: 11px;
  }
}


#compact-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 16, 0.36);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 580;
}
#compact-dock {
  display: none;
}
.panel-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -16px -16px 12px;
  padding: 12px 14px 10px;
  background: linear-gradient(180deg, rgba(7, 18, 34, 0.98), rgba(7, 18, 34, 0.94));
  border-bottom: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px 14px 0 0;
}
.panel-head .box-title {
  margin: 0;
}
.panel-close-btn {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: rgba(235, 244, 255, 0.92);
  border-radius: 999px;
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.panel-close-btn:hover {
  background: rgba(255,255,255,0.10);
}
body.compact-ui #compact-dock {
  position: absolute;
  display: flex;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 1200;
  padding: 8px;
  gap: 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: thin;
}
body.compact-ui #compact-dock .dock-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  border: 1px solid rgba(255, 191, 77, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(235, 244, 255, 0.88);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
}
body.compact-ui #compact-dock .dock-btn.active {
  border-color: rgba(255, 191, 77, 0.44);
  background: rgba(255, 191, 77, 0.14);
  color: #fff6df;
}
body.compact-ui #compact-dock .dock-close {
  border-color: rgba(255,255,255,0.18);
}
body.compact-ui.panel-open #compact-scrim {
  opacity: 1;
  pointer-events: auto;
}
body.compact-ui #display-toolbar [data-toggle-panel],
body.compact-ui #display-toolbar #help-btn,
body.compact-ui #display-toolbar #close-panels-btn {
  display: none;
}
body.compact-ui #display-toolbar {
  gap: 6px;
  padding: 8px;
}
body.compact-ui #display-toolbar .toolbar-btn {
  padding: 8px 10px;
}
body.compact-ui #title-box {
  top: 64px;
  left: 12px;
  right: auto;
  width: min(420px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  padding: 12px 14px;
  text-align: left;
}
body.compact-ui #scenario-box,
body.compact-ui #timeline-box,
body.compact-ui #impact-box,
body.compact-ui #stats,
body.compact-ui #legend {
  z-index: 1100;
  top: 116px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  max-height: none;
  overflow: auto;
  padding-top: 16px;
}
body.compact-ui #legend {
  width: auto;
}
body.compact-ui.panel-open #title-box {
  opacity: 0.92;
}
body.compact-ui #title-box h1 {
  margin-bottom: 3px;
}
@media (max-width: 980px) {
  body.compact-ui #title-box {
    width: min(360px, calc(100vw - 24px));
  }
}
@media (max-width: 760px) {
  body.compact-ui #compact-dock {
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding: 7px;
    gap: 7px;
  }
  body.compact-ui #compact-dock .dock-btn {
    padding: 9px 12px;
    font-size: 12px;
  }
  body.compact-ui #title-box {
    top: 60px;
    width: min(300px, calc(100vw - 20px));
    left: 10px;
  }
  body.compact-ui #scenario-box,
  body.compact-ui #timeline-box,
  body.compact-ui #impact-box,
  body.compact-ui #stats,
  body.compact-ui #legend {
    left: 10px;
    right: 10px;
    top: 106px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    border-radius: 14px;
  }
  .panel-head {
    margin: -16px -16px 10px;
    padding: 10px 12px 9px;
  }
}


.timeline-steps, .future-view-buttons, .quick-focus-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.timeline-step-btn, .future-btn, .quick-focus-btn {
  border: 1px solid rgba(255, 191, 77, 0.16);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(235, 244, 255, 0.84);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  min-width: max-content;
}
.timeline-step-btn:hover, .future-btn:hover, .quick-focus-btn:hover {
  background: rgba(255, 191, 77, 0.09);
}
.timeline-step-btn.active, .future-btn.active, .quick-focus-btn.active {
  background: rgba(99, 216, 255, 0.14);
  border-color: rgba(99, 216, 255, 0.3);
  color: #d6f6ff;
}
.timeline-step-btn.future, .future-btn {
  border-color: rgba(124, 240, 166, 0.24);
}
.timeline-step-btn .step-kicker {
  display: block;
  font-size: 9px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(235, 244, 255, 0.48);
  margin-bottom: 2px;
}
.timeline-step-btn .step-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
}
.future-item {
  border-radius: 12px;
  border: 1px solid rgba(124, 240, 166, 0.16);
  background: linear-gradient(180deg, rgba(124, 240, 166, 0.08), rgba(255, 255, 255, 0.03));
  padding: 10px 12px;
  margin-bottom: 8px;
}
.future-item:last-child {
  margin-bottom: 0;
}
.future-item .phase {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(124, 240, 166, 0.9);
  margin-bottom: 4px;
}
.future-item .title {
  font-size: 12px;
  font-weight: 700;
  color: #eef6ff;
  margin-bottom: 4px;
}
.future-item .copy {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(235, 244, 255, 0.78);
}
body.compact-ui .timeline-steps,
body.compact-ui .future-view-buttons,
body.compact-ui .quick-focus-buttons {
  padding-bottom: 6px;
}
body.compact-ui .timeline-step-btn,
body.compact-ui .future-btn,
body.compact-ui .quick-focus-btn {
  padding: 9px 11px;
}


/* v13 planning additions */

.guided-buttons, .assumption-grid { display:grid; gap:10px; }
.guided-buttons { grid-template-columns:1fr; }
.assumption-grid { grid-template-columns:1fr 1fr; }
.guide-btn, .timeline-step-btn, .future-btn, #lock-baseline-btn, #clear-baseline-btn, #export-briefing-btn { min-height:42px; }
.guide-btn { padding:12px 14px; border-radius:14px; background:rgba(17,41,74,0.88); border:1px solid rgba(94,172,255,0.22); color:#eaf6ff; text-align:left; font-weight:600; }
.guide-btn.active { border-color:rgba(255,190,84,0.65); box-shadow:0 0 0 1px rgba(255,190,84,0.18) inset; }
.assumption-item { padding:10px 12px; border-radius:14px; background:rgba(11,22,42,0.78); border:1px solid rgba(94,172,255,0.16); }
.assumption-head { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; font-weight:700; margin-bottom:8px; color:#dfeeff; }
.shortage-table { display:grid; gap:8px; }
.shortage-head, .shortage-row { display:grid; grid-template-columns:1.5fr 0.8fr 0.8fr 0.85fr 0.85fr; gap:10px; align-items:center; }
.shortage-head { color:#8fb7dc; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; padding:0 2px 4px; }
.shortage-row { padding:10px 12px; border-radius:12px; background:rgba(12,24,44,0.72); border:1px solid rgba(94,172,255,0.12); font-size:13px; }
.shortage-row .name { font-weight:600; color:#edf6ff; }
.shortage-row .muted { color:#8fb7dc; }
.shortage-row .delta.negative { color:#ffbf78; }
.shortage-row .delta.positive { color:#7de5a3; }
.narrative-card { padding:12px 14px; border-radius:14px; background:linear-gradient(180deg, rgba(14,31,58,0.9), rgba(8,21,40,0.78)); border:1px solid rgba(94,172,255,0.14); margin-bottom:8px; }
.narrative-card .title { color:#ffd373; font-weight:700; margin-bottom:6px; }
.narrative-card .copy { color:#dfeeff; line-height:1.45; }
.legend-chokepoint .l-ring { width:16px; height:16px; display:inline-block; border-radius:999px; border:2px solid #ff77b8; box-shadow:0 0 0 2px rgba(255,119,184,0.24); vertical-align:middle; margin-right:6px; }
body.nz-focused #legend .legend-row:nth-child(-n+2) { display:none; }
body.nz-focused #legend .legend-row.legend-chokepoint { display:block; }
.compact-ui .shortage-head, .compact-ui .shortage-row { grid-template-columns:1.2fr 0.75fr 0.75fr 0.9fr; }
.compact-ui .shortage-head .days, .compact-ui .shortage-row .days { display:none; }
.compact-ui .guided-buttons, .compact-ui .assumption-grid { grid-template-columns:1fr; }
.compact-ui input[type="range"] { height:36px; }
.compact-ui .guide-btn, .compact-ui .product-btn, .compact-ui .quick-scenario-btn, .compact-ui .toggle-btn, .compact-ui .service-chip, .compact-ui .quick-focus-btn, .compact-ui .future-btn, .compact-ui .timeline-step-btn, .compact-ui button { min-height:44px; }
@media (max-width: 900px) {
  .shortage-head, .shortage-row { grid-template-columns:1.2fr 0.8fr 0.8fr 0.9fr; }
  .shortage-head .days, .shortage-row .days { display:none; }
  .assumption-grid { grid-template-columns:1fr; }
}