/* style.css — GHS Console UI (full) */
/* Dark glass + green stream aesthetic. */

:root{
  --bg0:#06110e;
  --bg1:#071714;
  --card: rgba(255,255,255,0.045);
  --card2: rgba(255,255,255,0.06);
  --stroke: rgba(255,255,255,0.10);
  --stroke2: rgba(255,255,255,0.14);

  --txt: rgba(226,255,236,0.92);
  --muted: rgba(226,255,236,0.62);
  --faint: rgba(226,255,236,0.42);

  --green: rgba(90, 255, 165, 0.80);
  --green2: rgba(90, 255, 165, 0.35);
  --blue: rgba(110, 210, 255, 0.65);
  --amber: rgba(255, 210, 90, 0.55);
  --violet: rgba(170, 120, 255, 0.55);

  --radius: 18px;
  --radius2: 14px;

  --shadow: 0 18px 60px rgba(0,0,0,0.55);
  --shadow2: 0 10px 30px rgba(0,0,0,0.45);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--txt);
  background: radial-gradient(1200px 700px at 50% 35%, rgba(45, 255, 155, 0.18), transparent 65%),
              radial-gradient(900px 700px at 60% 65%, rgba(70, 180, 255, 0.08), transparent 70%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden;
}

/* background canvas */
#bgCanvas{
  position: fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity: 0.9;
}

/* topbar */
.topbar{
  position: relative;
  z-index: 5;
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 14px 18px;
  gap: 14px;
}

.topLeft{
  display:flex;
  align-items:center;
  gap: 10px;
}
.logo{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--shadow2);
}
.sub{
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.topRight{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--txt);
  font-size: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
}

.pillSelect select{
  appearance: none;
  background: transparent;
  border: none;
  color: var(--txt);
  font-size: 12px;
  outline: none;
  cursor:pointer;
  padding-right: 10px;
}
.pillSelect{
  gap: 10px;
}

/* layout */
.layout{
  position: relative;
  z-index: 2;
  display:grid;
  grid-template-columns: 290px 1fr 330px;
  gap: 14px;
  padding: 0 14px 14px;
  height: calc(100% - 66px);
}

/* panels */
.panel{
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  overflow:hidden;
}

.panel.left, .panel.right{
  padding: 12px;
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.panelTitle{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 4px 2px;
}

/* metric cards */
.metricGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.metricCard{
  border-radius: var(--radius2);
  padding: 10px 10px 8px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  overflow:hidden;
  position: relative;
}
.mName{
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.mVal{
  margin-top: 6px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.spark{
  width:100%;
  height: 18px;
  display:block;
  margin-top: 8px;
  opacity: 0.9;
}

/* cards */
.card{
  border-radius: var(--radius2);
  padding: 10px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 10px 28px rgba(0,0,0,0.30);
}
.cardTitle{
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}

.balanceBar{
  height: 10px;
  width: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  overflow:hidden;
}
.balanceFill{
  height: 100%;
  width: 60%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(90,255,165,0.65), rgba(90,255,165,0.18));
}
.balanceMeta{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

/* zones */
.zones{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.zoneRow{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}
.zoneName{ color: var(--txt); font-size: 12px; }
.zoneVal{ color: var(--muted); font-size: 12px; }

/* center */
.center{
  border-radius: var(--radius);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  overflow:hidden;
  display:flex;
  flex-direction: column;
}

.centerTitleRow{
  display:flex;
  justify-content: space-between;
  align-items:flex-end;
  gap: 10px;
  padding: 12px 14px;
}
.centerTitle{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.centerHint{
  font-size: 12px;
  color: var(--faint);
}

.stage{
  position: relative;
  flex: 1;
  display:flex;
  flex-direction: column;
  padding: 10px 12px 12px;
}

/* globe canvas - THE BALL */
#globeCanvas{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  width: min(820px, 78vw);
  height: min(520px, 58vh);
  max-width: calc(100% - 20px);
  max-height: calc(100% - 220px);
  opacity: 0.95;
  pointer-events:none;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,0.55));
}

/* bottom stats row */
.bottomStats{
  margin-top: auto;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  z-index: 2;
}

.statBox{
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
}
.statK{
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.statV{
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
}

/* actions */
.actionsWrap{
  margin-top: 10px;
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  z-index: 3;
}

.actionsTitle{
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 10px;
}

.actionsRow{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.act{
  border: 1px solid rgba(255,255,255,0.11);
  background: rgba(255,255,255,0.05);
  color: var(--txt);
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.act:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
}
.act:active{ transform: translateY(1px); }

/* share row */
.shareRow{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.shareBtn{
  border: 1px solid rgba(255,255,255,0.11);
  background: rgba(255,255,255,0.05);
  color: var(--txt);
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 12px;
  cursor: pointer;
}
.shareBtn:hover{ background: rgba(255,255,255,0.08); }
.shareHint{
  font-size: 12px;
  color: var(--faint);
}

/* input row (if not styled inline) */
.seedRow{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-top: 12px;
}
.seedInput{
  flex:1;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
  color: var(--txt);
  padding: 0 12px;
  outline:none;
}
.seedInput:focus{
  border-color: rgba(90,255,165,0.25);
  box-shadow: 0 0 0 3px rgba(90,255,165,0.08);
}
.seedBtn{
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(90,255,165,0.18);
  background: linear-gradient(180deg, rgba(90,255,165,0.14), rgba(255,255,255,0.04));
  color: var(--txt);
  cursor:pointer;
}
.seedBtn:hover{
  border-color: rgba(90,255,165,0.28);
  background: linear-gradient(180deg, rgba(90,255,165,0.18), rgba(255,255,255,0.05));
}
.seedHint{
  margin-top: 6px;
  font-size: 12px;
  color: var(--faint);
}

/* return card */
.returnBox{
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.12);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
}
.returnTitle{
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}

.footMini{
  padding: 10px 14px 12px;
  font-size: 11px;
  color: var(--faint);
  opacity: 0.9;
}

/* RIGHT panel */
.bigCard{
  border-radius: var(--radius2);
  padding: 12px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.bigTitle{
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 10px;
}
.opLine{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 12px;
  margin: 8px 0;
}
.opK{
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.opV{
  font-size: 12px;
  color: var(--txt);
  text-align:right;
  line-height: 1.35;
}
.opRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.opBtn{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--txt);
  border-radius: 12px;
  padding: 9px 12px;
  cursor:pointer;
}
.opBtn:hover{ background: rgba(255,255,255,0.09); }
.opMeta{
  font-size: 12px;
  color: var(--faint);
}

/* feed */
.feed{
  flex:1;
  overflow:auto;
  display:flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}
.feed::-webkit-scrollbar{ width: 8px; }
.feed::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.08); border-radius: 10px; }
.feedItem{
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}
.feedHead{
  display:flex;
  gap: 8px;
  align-items:center;
  color: var(--faint);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.feedText{
  font-size: 12px;
  color: var(--txt);
  line-height: 1.35;
}
.tag{
  display:inline-flex;
  align-items:center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
  color: var(--muted);
}

/* mission */
.mission{
  margin-top: 6px;
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}
.missionText{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

/* toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  color: var(--txt);
  font-size: 12px;
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 10000;
  backdrop-filter: blur(10px);
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* Responsive */
@media (max-width: 1200px){
  .layout{
    grid-template-columns: 280px 1fr 320px;
  }
  #globeCanvas{
    width: min(740px, 78vw);
    height: min(480px, 55vh);
  }
}

@media (max-width: 980px){
  body{ overflow:auto; }
  .layout{
    grid-template-columns: 1fr;
    height: auto;
  }
  .panel.left, .panel.right, .center{
    min-height: 520px;
  }
  #globeCanvas{
    position: absolute;
    width: min(820px, 92vw);
    height: min(520px, 56vh);
  }
}
/* ============================= */
/* GHS TONE AIR (ENGINE CONTROL) */
/* ============================= */

body[data-tone="calm"] {
  filter: saturate(1.02);
}

body[data-tone="hope"] {
  filter: saturate(1.03);
}

body[data-tone="energy"] {
  filter: contrast(1.01) saturate(1.03);
}

body[data-tone="tension"] {
  filter: contrast(1.02) saturate(0.98);
}

body[data-tone="mixed"] {
  filter: none;
}