*{box-sizing:border-box}html,body{margin:0;height:100%;background:#02080e;color:#eef8ff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden}body{background:radial-gradient(circle at 48% 45%,#082030 0,#030b12 44%,#010509 100%)}button{font:inherit;color:inherit}.app-shell{height:100vh;display:flex;flex-direction:column}.topbar{height:82px;display:flex;align-items:center;border-bottom:1px solid #173340;background:rgba(2,10,16,.95);padding:10px 20px;gap:28px}.brand{display:flex;align-items:center;gap:12px;min-width:330px}.brand-mark{width:58px;height:58px;display:grid;place-items:center;flex:0 0 58px;position:relative}.brand-mark img{width:58px;height:58px;display:block;object-fit:contain;filter:drop-shadow(0 0 6px rgba(0,229,255,.55))}.brand-name{font-size:22px;font-weight:800;letter-spacing:.3px}.brand-name span{color:#19d8ff}.brand-sub{font-size:11px;letter-spacing:4px;color:#c7e4ee}.brand-micro{font-size:9px;color:#4fb4c7;letter-spacing:2px;margin-top:3px}.top-metrics{display:flex;align-items:stretch;flex:1}.top-metrics>div{min-width:105px;padding:0 18px;border-left:1px solid #173340;display:flex;flex-direction:column;justify-content:center}.top-metrics span{font-size:9px;color:#56a6b8;letter-spacing:1.5px}.top-metrics b{font-size:20px;margin-top:3px}.top-right{min-width:210px;text-align:right;font-size:11px;color:#7ee8ff}.top-right small{display:block;color:#65808b;margin-top:5px;font-size:8px;letter-spacing:1.5px}.workspace{display:grid;grid-template-columns:76px 1fr 360px;grid-template-rows:minmax(0,1fr);flex:1;min-height:0}.left-rail{border-right:1px solid #173340;background:#031019;display:flex;flex-direction:column;align-items:center;padding:12px 7px;gap:8px}.rail-btn{width:62px;min-height:72px;background:transparent;border:0;border-bottom:1px solid #132b36;color:#7896a1;font-size:9px;letter-spacing:1px;cursor:pointer}.rail-btn span{display:block;font-size:25px;color:#58dff2;margin-bottom:6px}.rail-btn.active,.rail-btn:hover{color:#fff;background:linear-gradient(180deg,rgba(0,220,255,.13),transparent)}.main-stage{min-width:0;min-height:0;display:grid;grid-template-columns:260px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 180px 120px;gap:10px;padding:10px}.layer-panel,.event-panel,.map-panel,.metric-card,.signals-card,.assessment,.feed-summary{border:1px solid #1a4353;background:rgba(3,14,22,.78);box-shadow:inset 0 0 30px rgba(0,170,255,.035)}.layer-panel{grid-column:1;grid-row:1;padding:13px;overflow:auto}.layer-panel h3,.section-title b{font-size:11px;letter-spacing:1.2px}.layer-panel nav{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}.layer-panel button{border:1px solid #234755;background:#06131b;padding:7px 5px;border-radius:4px;font-size:10px;text-align:left;cursor:pointer}.layer-panel button:hover,.layer-panel .active-layer{border-color:#00c9e8;color:#fff;background:#07303c}.map-panel{position:relative;min-width:0;min-height:0;overflow:hidden;grid-column:2;grid-row:1/3}.map-head{position:absolute;z-index:3;left:14px;right:14px;top:12px;display:flex;justify-content:space-between;pointer-events:none}.map-head b{font-size:13px}.map-head small{display:block;color:#718b96;font-size:9px;margin-top:3px}.map-head-status{font-size:10px;color:#31e5a4}.map-head-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#24e78e;box-shadow:0 0 9px #24e78e;margin-right:4px}.map-panel #globalMap{position:absolute;inset:0}.map-overlay{position:absolute;z-index:4}.legend{left:13px;top:62px;background:rgba(2,10,16,.84);border:1px solid #245162;border-radius:6px;padding:9px 12px;display:grid;gap:7px;font-size:9px}.legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}.event{background:#ff3028}.aviation{background:#ffd21e}.port{background:#00e5ff}.choke{background:#ff8c00}.map-actions{right:12px;bottom:12px;display:flex;gap:5px}.map-actions button{background:rgba(3,17,26,.92);border:1px solid #2c6173;border-radius:4px;padding:7px 9px;font-size:9px;cursor:pointer}.map-actions button:hover{border-color:#00e5ff}.osiris{left:13px;bottom:12px;background:rgba(2,10,16,.92);border:1px solid #245162;border-radius:5px;padding:7px 10px;font-size:9px}.osiris span{display:inline-block;width:8px;height:8px;border-radius:50%;background:#f0a900;margin-right:5px}.osiris span.online{background:#25e68d;box-shadow:0 0 8px #25e68d}.osiris span.degraded{background:#ffad00}.event-panel{grid-column:1;grid-row:2;padding:12px;overflow:auto}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.section-title a,.view-all{font-size:9px;color:#15d7ff;text-decoration:none;cursor:pointer}.event-row{display:flex;vertical-align:top;flex-direction:column;width:100%;padding:7px 8px;border-right:1px solid #17323d;cursor:pointer}.event-row:hover,.event-row.active,.signal-row:hover,.signal-row.active{background:rgba(0,216,255,.07)}.event-country{font-size:9px;color:#8bdff0}.event-row strong{font-size:10px;line-height:1.25;margin-top:2px}.event-row small{font-size:8px;color:#718b96;margin-top:3px}.bottom-grid{grid-column:2;grid-row:3;display:grid;grid-template-columns:1fr 1.5fr 1fr 1fr;gap:10px}.metric-card{padding:11px;overflow:hidden}.metric-card>span{display:block;font-size:8px;color:#72b9c8;letter-spacing:1.2px}.metric-card>strong{display:block;font-size:21px;color:#33e89d;margin-top:8px}.metric-card small{font-size:8px;color:#66818c}.metric-card p{font-size:9px;margin:6px 0;color:#91aab4}.metric-card p b{float:right}.thumbs{display:flex;gap:5px;margin-top:12px}.thumbs i{height:36px;flex:1;background:linear-gradient(145deg,#163746,#4b6972);border:1px solid #2b5665}.right-column{min-width:0;display:grid;grid-template-rows:minmax(0,1fr) 300px 145px;gap:10px;padding:10px 10px 10px 0}.signals-card,.assessment,.feed-summary{padding:14px;overflow:auto}.signals-card .section-title small{display:block;color:#25e8a0;font-size:8px;margin-top:4px}.tabs{display:flex;gap:5px;flex-wrap:wrap;margin:11px 0;border-bottom:1px solid #193946;padding-bottom:9px}.tabs button{border:1px solid #254958;background:#06141d;border-radius:5px;padding:6px 8px;font-size:8px;cursor:pointer}.tabs button.active,.tabs button:hover{background:#0879a0;border-color:#19dfff}.signal-row{position:relative;padding:9px 5px;border-bottom:1px solid #19343e;cursor:pointer}.signal-main{display:flex;justify-content:space-between;align-items:center}.signal-country{font-size:10px;font-weight:700}.signal-row>b{display:block;font-size:10px;line-height:1.25;margin:3px 0}.signal-row small{display:block;color:#839da7;font-size:8px}.signal-row time{position:absolute;right:5px;bottom:8px;color:#68818b;font-size:7px}.priority{font-size:7px;padding:4px 6px;border-radius:4px;font-weight:800}.priority.high{background:#e31b28;color:white}.priority.med{background:#e3b400;color:#081017}.priority.low{background:#18c779;color:#02140b}.assessment-title{font-size:10px;color:#38dfff;letter-spacing:1.2px;font-weight:700}.assessment-country{color:#27e99c;font-size:20px;font-weight:800;margin-top:12px}.assessment h3{font-size:15px;margin:5px 0 12px}.assessment p{color:#809ba5;font-size:10px;line-height:1.5}.assessment-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.assessment-grid div{background:#071a24;padding:8px}.assessment-grid small,.assessment-description>small{display:block;color:#5e8794;font-size:7px;letter-spacing:1px}.assessment-grid strong{display:block;margin-top:4px;font-size:10px}.assessment-description{margin-top:10px}.feed-summary{display:grid;grid-template-columns:1fr 1fr;gap:7px}.feed-summary div{background:#061720;border:1px solid #163845;padding:8px}.feed-summary span{display:block;color:#5faabb;font-size:7px}.feed-summary b{display:block;font-size:17px;margin:3px 0}.feed-summary small{display:block;color:#607a84;font-size:7px}.empty-state{padding:18px 5px;color:#637e89;font-size:9px}@media(max-width:1050px){.workspace{grid-template-columns:60px 1fr 300px}.top-metrics{display:none}.main-stage{grid-template-columns:190px 1fr}.event-row{width:50%}}
/* === AFRICAN GEOMETRIC INTELLIGENCE GLYPHS === */

.afro-glyph {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  color: #00e5ff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 9px rgba(0,229,255,.75);
  transition: transform .2s ease, text-shadow .2s ease;
}

.rail-btn:hover .afro-glyph,
.rail-btn.active .afro-glyph {
  transform: scale(1.12);
  text-shadow: 0 0 15px rgba(0,229,255,1);
}

.glyph-global {
  border: 1px solid #176a78;
  border-radius: 50%;
}

.glyph-africa {
  transform: rotate(45deg);
}

.glyph-diaspora {
  font-size: 24px;
}

.glyph-layers {
  font-size: 18px;
}

.glyph-analytics {
  font-size: 23px;
}

.glyph-settings {
  font-size: 22px;
}


.adinkra-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

.adinkra-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter:
    brightness(0)
    saturate(100%)
    invert(75%)
    sepia(90%)
    saturate(1900%)
    hue-rotate(150deg)
    brightness(105%)
    drop-shadow(0 0 6px rgba(0,229,255,.75));
  transition: .2s ease;
}

.rail-btn:hover .adinkra-icon img,
.rail-btn.active .adinkra-icon img {
  transform: scale(1.12);
  filter:
    brightness(0)
    saturate(100%)
    invert(80%)
    sepia(100%)
    saturate(2300%)
    hue-rotate(150deg)
    brightness(110%)
    drop-shadow(0 0 11px rgba(0,229,255,1));
}


/* =========================================
   ADINKRA NAVIGATION SYMBOLS
   ========================================= */

.adinkra-icon {
  display: inline-flex !important;
  width: 34px !important;
  height: 34px !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 0 !important;
}

.adinkra-icon img {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  filter:
    brightness(0)
    saturate(100%)
    invert(74%)
    sepia(95%)
    saturate(2000%)
    hue-rotate(150deg)
    brightness(105%)
    drop-shadow(0 0 6px rgba(0,229,255,.8));
  transition: transform .2s ease, filter .2s ease;
}

.rail-btn:hover .adinkra-icon img,
.rail-btn.active .adinkra-icon img {
  transform: scale(1.12);
  filter:
    brightness(0)
    saturate(100%)
    invert(78%)
    sepia(100%)
    saturate(2400%)
    hue-rotate(150deg)
    brightness(110%)
    drop-shadow(0 0 11px rgba(0,229,255,1));
}


/* =========================================
   FINAL ADINKRA NAV FIX
   Remove old geometric glyph styling
   ========================================= */

.rail-btn .afro-glyph {
  all: unset !important;
  display: flex !important;
  width: 42px !important;
  height: 42px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 5px auto !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  text-shadow: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.rail-btn .afro-glyph img {
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  object-fit: contain !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;

  filter:
    brightness(0)
    saturate(100%)
    invert(74%)
    sepia(96%)
    saturate(2100%)
    hue-rotate(150deg)
    brightness(108%)
    drop-shadow(0 0 5px rgba(0,229,255,.8));

  transition: transform .2s ease, filter .2s ease;
}

.rail-btn:hover .afro-glyph img,
.rail-btn.active .afro-glyph img {
  transform: scale(1.08);

  filter:
    brightness(0)
    saturate(100%)
    invert(80%)
    sepia(100%)
    saturate(2400%)
    hue-rotate(150deg)
    brightness(110%)
    drop-shadow(0 0 10px rgba(0,229,255,1));
}

/* Keep navigation labels clean */
.rail-btn {
  overflow: visible !important;
}

.rail-btn > span:last-child {
  display: block !important;
  position: static !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  line-height: 1.2 !important;
}


/* =========================================
   INTELLIGENCE ANALYTICS / SETTINGS
   ========================================= */

.command-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(0,5,12,.78);
  backdrop-filter: blur(8px);
}

.command-window {
  width: min(760px, 92vw);
  max-height: 82vh;
  overflow-y: auto;
  padding: 24px;
  background:
    linear-gradient(
      145deg,
      rgba(4,20,31,.98),
      rgba(2,10,18,.98)
    );
  border: 1px solid rgba(0,229,255,.65);
  box-shadow:
    0 0 35px rgba(0,229,255,.16),
    inset 0 0 30px rgba(0,229,255,.025);
}

.command-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(0,229,255,.22);
}

.command-header small {
  color: #00e5ff;
  letter-spacing: 2px;
}

.command-header h2 {
  margin: 5px 0;
  color: #fff;
  letter-spacing: 1px;
}

.command-header span {
  color: #6d9aaa;
  font-size: 11px;
}

.command-close {
  width: 36px;
  height: 36px;
  color: #00e5ff;
  background: transparent;
  border: 1px solid #126b7b;
  font-size: 24px;
  cursor: pointer;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}

.analytics-card {
  padding: 16px;
  border: 1px solid rgba(0,229,255,.28);
  background: rgba(0,229,255,.035);
}

.analytics-card small {
  display: block;
  color: #70a5b4;
  font-size: 9px;
  letter-spacing: 1.5px;
}

.analytics-card strong {
  display: block;
  margin-top: 6px;
  color: #00e5ff;
  font-size: 26px;
}

.analytics-section {
  margin-top: 22px;
}

.analytics-section h3 {
  color: #00e5ff;
  font-size: 12px;
  letter-spacing: 1.5px;
}

.analytics-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 12px;
  margin: 3px 0;
  border-bottom: 1px solid rgba(0,229,255,.09);
}

.analytics-row span {
  color: #b8d1d8;
}

.analytics-row strong {
  color: #00e5ff;
}

.analytics-footer {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(0,229,255,.2);
  color: #7198a5;
  font-size: 11px;
}

.analytics-footer strong {
  color: #00e5ff;
}

.settings-section label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 5px;
  border-bottom: 1px solid rgba(0,229,255,.12);
  color: #b8d1d8;
}

.setting-action {
  min-width: 110px;
  padding: 8px 12px;
  color: #00e5ff;
  background: rgba(0,229,255,.06);
  border: 1px solid #176b7a;
  cursor: pointer;
}

.settings-note {
  margin-top: 20px;
  padding: 15px;
  border-left: 2px solid #00e5ff;
  background: rgba(0,229,255,.035);
}

.settings-note strong {
  color: #00e5ff;
}

.settings-note p {
  color: #8eabb4;
  font-size: 12px;
  line-height: 1.6;
}

@media(max-width:700px) {
  .analytics-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .command-overlay {
    padding: 12px;
  }
}


/* ===== LIVE ANALYTICS UPGRADE ===== */

.analytics-live-window {
  width: min(900px, 94vw);
}

.analytics-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.region-row {
  margin-bottom: 13px;
}

.region-name {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  color: #b8d1d8;
  font-size: 12px;
}

.region-name strong {
  color: #00e5ff;
}

.region-bar {
  height: 5px;
  background: rgba(0,229,255,.08);
  overflow: hidden;
}

.region-bar i {
  display: block;
  height: 100%;
  background: #00e5ff;
  box-shadow: 0 0 8px rgba(0,229,255,.7);
}

@media(max-width:760px) {
  .analytics-two-column {
    grid-template-columns: 1fr;
  }
}


/* ===== RECENT INTELLIGENCE IMAGES ===== */

.recent-images-card {
  overflow: hidden;
}

.recent-images-card .thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 8px;
  min-height: 54px;
}

.recent-image {
  position: relative;
  display: block;
  min-width: 0;
  height: 58px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(0,229,255,.35);
  background: rgba(0,229,255,.04);
}

.recent-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}

.recent-image:hover img {
  transform: scale(1.08);
}

.recent-image span {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 2px;
  padding: 2px 3px;
  background: rgba(0,5,10,.8);
  color: #00e5ff;
  font-size: 7px;
  text-align: left;
}

.image-empty {
  grid-column: 1 / -1;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(0,229,255,.2);
  color: #00e5ff;
  letter-spacing: 1px;
  font-size: 8px;
}

.image-empty small {
  margin-top: 4px;
  color: #668b96;
  letter-spacing: 0;
  font-size: 8px;
}


/* ===== INTELLIGENCE ASSESSMENT ===== */

.assessment {
  overflow-y: auto;
}

.assessment-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin:12px 0;
}

.assessment-head h3 {
  margin:5px 0 0;
  color:#fff;
  font-size:16px;
  line-height:1.25;
}

.assessment-kind {
  color:#00e5ff;
  font-size:9px;
  letter-spacing:1.5px;
}

.assessment-level {
  border:1px solid;
  padding:5px 8px;
  font-size:9px;
  letter-spacing:1px;
  white-space:nowrap;
}

.assessment-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.assessment-grid > div {
  border:1px solid rgba(0,229,255,.22);
  padding:7px;
  min-width:0;
}

.assessment-grid span,
.assessment-summary span {
  display:block;
  color:#6fa3ad;
  font-size:7px;
  letter-spacing:1px;
  margin-bottom:3px;
}

.assessment-grid b {
  display:block;
  color:#dffaff;
  font-size:9px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.assessment-summary {
  margin-top:8px;
  border-left:2px solid #00e5ff;
  padding:7px 9px;
  background:rgba(0,229,255,.035);
}

.assessment-summary p {
  margin:3px 0 0;
  color:#b9d0d5;
  font-size:9px;
  line-height:1.45;
}

.assessment-footer {
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:9px;
  color:#4e7881;
  font-size:6px;
  letter-spacing:.7px;
}

/* ===== DARK MINERAL RESOURCE POPUPS ===== */
/* Applied to all mineral popups via className "pana-resource-popup".
   Overrides the default MapLibre white popup container. */
.pana-resource-popup .maplibregl-popup-content {
  background:#34383c;
  color:#ffffff;
  border:1px solid rgba(0,229,255,.35);
  border-radius:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.6);
  padding:14px 16px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

.pana-resource-popup .maplibregl-popup-close-button {
  color:#d0d5d9;
  font-size:18px;
  line-height:1;
}

.pana-resource-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
  border-top-color:#34383c;
}

.pana-resource-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip {
  border-bottom-color:#34383c;
}

.pana-resource-popup .pana-liberia-popup {
  color:#ffffff;
}

.pana-resource-popup .pana-mineral-kicker {
  color:#00e5ff;
  opacity:1;
}

.pana-resource-popup .pana-mineral-title {
  color:#ffffff;
}

.pana-resource-popup .pana-mineral-row {
  color:#ffffff;
}

.pana-resource-popup .pana-mineral-row b {
  color:#ffffff;
}

.pana-resource-popup .pana-mineral-row span {
  opacity:1;
  color:#d0d5d9;
}

.pana-resource-popup .pana-mineral-coords {
  opacity:1;
  color:#d0d5d9;
}