* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --asl-green-deep:#0b3d2e;
  --asl-green:#1b5e3a;
  --asl-green-mid:#2e7d54;
  --asl-green-light:#4fae6f;
  --asl-gold:#c9a227;
  --asl-gold-light:#e9cf5e;
  --asl-earth:#6b4a2b;
  --asl-cream:#f6f1e3;
  --asl-ink:#0f1b16;
  --asl-ink-soft:#1c2b23;
  --asl-glass:rgba(15,27,22,0.72);
  --asl-glass-light:rgba(246,241,227,0.92);
  --asl-border:rgba(201,162,39,0.35);
  --asl-shadow:0 20px 60px rgba(0,0,0,0.35);
}
html,body{ height:100%; width:100%; }
body{
  font-family:'Inter','Segoe UI',Tahoma,sans-serif;
  overflow:hidden;
  background:radial-gradient(ellipse at top,#1a3a2e 0%,#0b1f18 60%,#050b08 100%);
  color:var(--asl-cream);
}
#canvas-container{ position:fixed; inset:0; width:100vw; height:100vh; }

/* ---------- LOADING ---------- */
#loading{
  position:fixed; inset:0; z-index:2000;
  background:radial-gradient(ellipse at center,#1b5e3a 0%,#0b3d2e 50%,#05190f 100%);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition:opacity .8s ease;
}
#loading.hidden{ opacity:0; pointer-events:none; }
.loading-logo{
  font-size:1.1rem; letter-spacing:.5em; color:var(--asl-gold-light);
  margin-bottom:2rem; font-weight:300;
}
.loading-title{
  font-size:2.4rem; font-weight:200; letter-spacing:.08em;
  margin-bottom:.5rem; color:var(--asl-cream);
}
.loading-sub{
  font-size:.72rem; letter-spacing:.22em; color:rgba(246,241,227,.5);
  margin-bottom:3rem;
  text-align:center;
  max-width:90vw;
}
.loader{
  width:80px; height:80px;
  border:2px solid rgba(201,162,39,.15);
  border-top-color:var(--asl-gold); border-radius:50%;
  animation:spin 1.2s linear infinite;
}
@keyframes spin{ to { transform:rotate(360deg); } }

/* ---------- TOP LEFT: PROJECT + REVENUE ---------- */
#project-panel{
  position:absolute; top:16px; left:16px;
  background:var(--asl-glass);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid var(--asl-border);
  border-radius:12px; padding:14px 16px;
  width:280px; z-index:100;
  box-shadow:var(--asl-shadow);
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
#project-panel.collapsed{
  width:auto; padding:10px 14px;
}
#project-panel.collapsed .panel-body{
  display:none;
}
.panel-toggle{
  position:absolute; top:10px; right:10px;
  width:22px; height:22px; border-radius:50%;
  background:rgba(201,162,39,.15);
  border:1px solid var(--asl-border);
  color:var(--asl-gold-light); cursor:pointer;
  font-size:.7rem; display:flex;
  align-items:center; justify-content:center;
  transition:all .2s;
}
.panel-toggle:hover{
  background:rgba(201,162,39,.3);
}
.brand-row{
  display:flex; align-items:center; gap:8px;
  padding-bottom:10px; margin-bottom:10px;
  border-bottom:1px solid rgba(201,162,39,.2);
  padding-right:28px;
}
.brand-mark{
  width:28px; height:28px; border-radius:7px;
  background:linear-gradient(135deg,var(--asl-gold) 0%,var(--asl-green-mid) 100%);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:var(--asl-ink); font-size:.85rem;
  box-shadow:0 4px 12px rgba(201,162,39,.3);
}
.brand-text{ display:flex; flex-direction:column; }
.brand-name{
  font-size:.7rem; letter-spacing:.22em;
  color:var(--asl-gold-light); font-weight:500;
}
.brand-tag{
  font-size:.55rem; letter-spacing:.15em;
  color:rgba(246,241,227,.55); margin-top:1px;
}
.project-title{
  font-size:1rem; font-weight:600; color:var(--asl-cream);
  margin-bottom:2px;
}
.project-sub{
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--asl-green-light); margin-bottom:8px;
}
.project-desc{
  font-size:.68rem; line-height:1.5; color:rgba(246,241,227,.75);
  margin-bottom:10px;
}
.capacity-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(90deg,var(--asl-green) 0%,var(--asl-green-mid) 100%);
  padding:5px 11px; border-radius:20px;
  font-size:.65rem; font-weight:600; letter-spacing:.1em;
  color:var(--asl-cream);
  box-shadow:0 4px 14px rgba(27,94,58,.4);
  margin-bottom:10px;
}
.capacity-pill .dot{
  width:6px; height:6px; border-radius:50%; background:var(--asl-gold-light);
  box-shadow:0 0 8px var(--asl-gold);
}

/* Revenue breakdown */
.revenue-section{
  padding-top:10px; border-top:1px solid rgba(201,162,39,.2);
}
.revenue-head{
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--asl-gold-light); margin-bottom:8px;
  display:flex; align-items:center; gap:6px;
}
.revenue-head::before{
  content:''; width:16px; height:1px;
  background:linear-gradient(90deg,var(--asl-gold),transparent);
}
.revenue-item{
  display:grid; grid-template-columns:auto 1fr auto; gap:8px;
  align-items:center; margin-bottom:5px;
}
.rev-icon{
  width:18px; height:18px; border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  font-size:.65rem;
}
.rev-icon.tipping{ background:linear-gradient(135deg,#8b6914,#c9a227); }
.rev-icon.carbon{ background:linear-gradient(135deg,#1b5e3a,#4fae6f); }
.rev-icon.electricity{ background:linear-gradient(135deg,#3a6ea5,#6a9dd2); }
.rev-icon.fertilizer{ background:linear-gradient(135deg,#6b4a2b,#a07a4f); }
.rev-label{
  font-size:.68rem; color:rgba(246,241,227,.85);
}
.rev-pct{
  font-size:.68rem; font-weight:600; color:var(--asl-gold-light);
  font-variant-numeric:tabular-nums;
}
.rev-bar{
  grid-column:1/-1; height:2px; border-radius:2px;
  background:rgba(246,241,227,.08); overflow:hidden; margin-top:1px;
}
.rev-bar-fill{
  height:100%; border-radius:2px;
  background:linear-gradient(90deg,var(--asl-green-light),var(--asl-gold));
}

/* ---------- RIGHT-SIDE PANEL COLUMN ---------- */
#right-column{
  position:absolute; top:16px; right:16px; bottom:90px;
  width:260px; z-index:100;
  display:flex; flex-direction:column; gap:12px;
  overflow-y:auto; overflow-x:hidden;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(201,162,39,.4) transparent;
}
#right-column::-webkit-scrollbar{ width:4px; }
#right-column::-webkit-scrollbar-thumb{
  background:rgba(201,162,39,.4); border-radius:2px;
}
#right-column::-webkit-scrollbar-track{ background:transparent; }

#right-column > div{
  position:relative !important;
  top:auto !important; right:auto !important; bottom:auto !important;
  left:auto !important; transform:none !important;
  width:100% !important;
  flex-shrink:0;
}

/* ---------- TOP RIGHT: PIPELINE + STATS ---------- */
#stats-panel{
  background:var(--asl-glass);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid var(--asl-border);
  border-radius:12px; padding:14px 16px;
  width:240px;
  box-shadow:var(--asl-shadow);
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
#stats-panel.collapsed{
  padding:10px 14px;
}
#stats-panel.collapsed .panel-body{
  display:none;
}
.panel-head{
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--asl-gold-light); margin-bottom:10px;
  display:flex; align-items:center; gap:6px;
  padding-right:28px;
}
.panel-head::before{
  content:''; width:14px; height:1px;
  background:linear-gradient(90deg,var(--asl-gold),transparent);
}

.pipeline-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin-bottom:10px;
}
.pipeline-stat{
  background:rgba(27,94,58,.15);
  border:1px solid rgba(79,174,111,.25);
  border-radius:10px; padding:10px;
  text-align:center;
}
.pipeline-stat.contracted{
  background:rgba(201,162,39,.12);
  border-color:rgba(201,162,39,.35);
}
.pipeline-num{
  font-size:1.4rem; font-weight:300; line-height:1;
  color:var(--asl-cream);
}
.pipeline-stat.contracted .pipeline-num{ color:var(--asl-gold-light); }
.pipeline-lbl{
  font-size:.52rem; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(246,241,227,.6); margin-top:4px;
}

.site-list{
  font-size:.64rem; color:rgba(246,241,227,.7);
  line-height:1.5; padding-top:8px;
  border-top:1px solid rgba(201,162,39,.2);
}
.site-list-title{
  font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--asl-gold-light); margin-bottom:5px;
}

.site-item{
  display:flex; align-items:center; gap:7px; padding:2px 0;
}
.site-dot{
  width:5px; height:5px; border-radius:50%;
  flex-shrink:0;
}
.site-dot.green{ background:var(--asl-gold); box-shadow:0 0 6px var(--asl-gold); }
.site-dot.pending{ background:rgba(246,241,227,.3); }

/* ---------- LEGEND ---------- */
#legend{
  position:absolute; right:16px; top:50%;
  transform:translateY(-50%);
  background:var(--asl-glass);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid var(--asl-border);
  border-radius:12px; padding:12px 14px;
  width:200px; z-index:100;
  box-shadow:var(--asl-shadow);
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
#legend.collapsed{
  width:auto; padding:10px 14px;
}
#legend.collapsed .panel-body{
  display:none;
}
#legend .panel-head{
  margin-bottom:8px;
}

.legend-item{
  display:flex; align-items:center; gap:9px; 
  cursor:pointer; transition:all .15s ease;
  border-radius:5px; padding:4px 6px; margin:0 -6px;
}
.legend-item:hover{
  background:rgba(201,162,39,.1);
  transform:translateX(-2px);
}
.legend-swatch{
  width:12px; height:12px; border-radius:3px; flex-shrink:0;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.3);
}
.legend-label{
  font-size:.64rem; color:rgba(246,241,227,.88);
  line-height:1.2;
}
.legend-num{
  font-size:.55rem; color:var(--asl-gold-light); font-weight:700;
  min-width:16px; font-variant-numeric:tabular-nums;
  letter-spacing:.05em;
}

/* ---------- CONTROLS ---------- */
#controls{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; z-index:100;
  background:var(--asl-glass);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--asl-border);
  border-radius:12px; padding:6px;
  box-shadow:var(--asl-shadow);
}
.ctrl-btn{
  background:transparent; border:1px solid transparent;
  color:rgba(246,241,227,.85);
  padding:7px 12px; border-radius:8px;
  cursor:pointer; font-size:.65rem; font-weight:500;
  letter-spacing:.06em;
  transition:all .25s ease;
  display:flex; align-items:center; gap:5px;
  font-family:inherit;
}
.ctrl-btn:hover{
  background:rgba(201,162,39,.12);
  border-color:rgba(201,162,39,.3);
  color:var(--asl-cream);
}
.ctrl-btn.active{
  background:linear-gradient(135deg,var(--asl-green-mid),var(--asl-green));
  border-color:var(--asl-gold);
  color:var(--asl-cream);
  box-shadow:0 4px 12px rgba(27,94,58,.3);
}
.ctrl-sep{
  width:1px; background:rgba(201,162,39,.15); margin:4px 2px;
}

/* ---------- CAMERA HELP ---------- */
#camera-help{
  position:absolute; bottom:16px; left:16px;
  background:var(--asl-glass);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--asl-border);
  border-radius:10px; padding:10px 12px;
  font-size:.56rem; color:rgba(246,241,227,.6);
  line-height:1.5; z-index:100; max-width:200px;
  box-shadow:var(--asl-shadow);
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
#camera-help.collapsed .help-body{ display:none; }
#camera-help.collapsed{ padding:8px 12px; }
.help-title{
  font-size:.54rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--asl-gold-light); margin-bottom:5px;
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer;
}
.help-row{ display:flex; justify-content:space-between; gap:10px; padding:1px 0; }
.help-key{
  font-family:'SF Mono',Menlo,monospace;
  background:rgba(246,241,227,.08); padding:1px 5px;
  border-radius:3px; font-size:.52rem; color:var(--asl-cream);
  border:1px solid rgba(246,241,227,.1);
}

/* ---------- COMPONENT INFO MODAL ---------- */
#component-info{
  position:absolute; bottom:80px; left:16px;
  background:var(--asl-glass);
  backdrop-filter:blur(30px) saturate(1.3);
  -webkit-backdrop-filter:blur(30px) saturate(1.3);
  border:1px solid var(--asl-border);
  border-radius:14px; padding:20px 22px;
  width:380px; max-width:calc(100vw - 32px); z-index:500;
  box-shadow:var(--asl-shadow);
  opacity:0; pointer-events:none;
  transform:translateY(20px) scale(.95);
  transition:all .35s cubic-bezier(.16,1,.3,1);
}
#component-info.visible{
  opacity:1; pointer-events:auto;
  transform:translateY(0) scale(1);
}
@media (max-width:900px){
  #component-info{ width:calc(100vw - 32px); }
}
.ci-head{
  display:flex; align-items:center; gap:12px;
  padding-bottom:12px; margin-bottom:12px;
  border-bottom:1px solid rgba(201,162,39,.2);
}
.ci-num{
  width:36px; height:36px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; font-weight:700;
  background:linear-gradient(135deg,var(--asl-gold) 0%,var(--asl-green-mid) 100%);
  color:var(--asl-ink);
  box-shadow:0 4px 14px rgba(201,162,39,.3);
}
.ci-titles{ flex:1; }
.ci-title{
  font-size:.98rem; font-weight:600; color:var(--asl-cream);
  margin-bottom:2px;
}
.ci-subtitle{
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--asl-green-light);
}
.ci-close{
  background:transparent; border:1px solid rgba(246,241,227,.2);
  color:rgba(246,241,227,.7);
  width:26px; height:26px; border-radius:50%;
  cursor:pointer; font-size:.9rem; transition:all .2s;
  display:flex; align-items:center; justify-content:center;
}
.ci-close:hover{
  background:rgba(246,241,227,.1); color:var(--asl-cream);
}
.ci-desc{
  font-size:.74rem; line-height:1.55; color:rgba(246,241,227,.85);
  margin-bottom:12px;
}
.ci-specs{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding-top:10px; border-top:1px solid rgba(201,162,39,.15);
}
.ci-spec{
  background:rgba(27,94,58,.15);
  border:1px solid rgba(79,174,111,.2);
  border-radius:7px; padding:8px 10px;
}
.ci-spec-label{
  font-size:.54rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--asl-gold-light); margin-bottom:3px;
}
.ci-spec-value{
  font-size:.78rem; font-weight:500; color:var(--asl-cream);
}

/* ---------- TOOLTIP ---------- */
#tooltip{
  position:absolute; z-index:300;
  background:var(--asl-glass);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--asl-border);
  padding:10px 14px; border-radius:10px;
  pointer-events:none; opacity:0;
  transition:opacity .2s ease;
  box-shadow:var(--asl-shadow);
  max-width:220px;
}
.tt-title{
  font-size:.78rem; font-weight:600; color:var(--asl-cream);
  margin-bottom:2px;
}
.tt-hint{
  font-size:.62rem; color:var(--asl-gold-light);
  letter-spacing:.12em; text-transform:uppercase;
}

/* ---------- SCALE WATERMARK ---------- */
.scale-badge{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:22vw; font-weight:100; letter-spacing:-.02em;
  color:rgba(201,162,39,.03);
  pointer-events:none; z-index:1;
  white-space:nowrap; user-select:none;
}

@media (max-width:1200px){
  #legend{ width:170px; }
  .legend-label{ font-size:.6rem; }
}
@media (max-width:900px){
  #legend{ display:none; }
  #project-panel{ width:240px; }
  #stats-panel{ width:200px; }
}
@media (max-width:700px){
  .project-desc{ display:none; }
  #camera-help{ display:none; }
}

/* ---------- CLICK INSTRUCTION BANNER ---------- */
#click-banner{
  position:absolute; top:16px; left:50%;
  transform:translateX(-50%);
  background:var(--asl-glass);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid var(--asl-border);
  border-radius:20px; padding:7px 16px;
  font-size:.68rem; color:var(--asl-cream);
  letter-spacing:.08em; z-index:90;
  box-shadow:var(--asl-shadow);
  display:flex; align-items:center; gap:8px;
  animation:banner-pulse 3s ease-in-out infinite;
  transition:opacity .4s ease;
}
#click-banner.fade{ opacity:.5; }
.banner-cursor{
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle,var(--asl-gold-light),var(--asl-gold));
  box-shadow:0 0 12px var(--asl-gold);
  animation:banner-dot 2s ease-in-out infinite;
}
@keyframes banner-pulse{
  0%,100%{ box-shadow:var(--asl-shadow),0 0 0 rgba(201,162,39,0); }
  50%{ box-shadow:var(--asl-shadow),0 0 20px rgba(201,162,39,.3); }
}
@keyframes banner-dot{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(.7); opacity:.6; }
}

.panel-icon{
  display:inline-block; width:14px; text-align:center;
  color:var(--asl-gold); font-size:.8rem;
  margin-right:2px; margin-left:-2px;
}

/* ---------- STREAMS PANEL ---------- */
#streams-panel{
  position:absolute; top:calc(16px + 260px); right:16px;
  background:var(--asl-glass);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid var(--asl-border);
  border-radius:12px; padding:14px 16px;
  width:240px; z-index:100;
  box-shadow:var(--asl-shadow);
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
#streams-panel.collapsed{ width:auto; padding:10px 14px; }
#streams-panel.collapsed .panel-body{ display:none; }

.stream-item{
  display:flex; align-items:center; gap:9px;
  padding:6px 0;
  border-bottom:1px solid rgba(201,162,39,.08);
}
.stream-item:last-child{ border-bottom:none; }
.stream-dot{
  width:8px; height:8px; border-radius:50%;
  flex-shrink:0;
}
.stream-dot.primary{
  background:var(--asl-gold);
  box-shadow:0 0 8px var(--asl-gold);
}
.stream-dot.alt{
  background:var(--asl-green-light);
  box-shadow:0 0 6px rgba(79,174,111,.5);
}
.stream-text{ flex:1; min-width:0; }
.stream-name{
  font-size:.72rem; font-weight:600; color:var(--asl-cream);
  line-height:1.2;
}
.stream-sub{
  font-size:.58rem; color:rgba(246,241,227,.55);
  margin-top:2px; letter-spacing:.04em;
}

/* ---------- RESOURCES PANEL ---------- */
#resources-panel{
  position:absolute; bottom:170px; right:16px;
  background:var(--asl-glass);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid var(--asl-border);
  border-radius:12px; padding:14px 16px;
  width:240px; z-index:100;
  box-shadow:var(--asl-shadow);
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
#resources-panel.collapsed{ width:auto; padding:10px 14px; }
#resources-panel.collapsed .panel-body{ display:none; }

.resource-link{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; margin:3px -10px;
  text-decoration:none;
  color:var(--asl-cream);
  border-radius:8px;
  transition:all .2s ease;
  border:1px solid transparent;
}
.resource-link:hover{
  background:rgba(201,162,39,.12);
  border-color:rgba(201,162,39,.3);
  transform:translateX(-3px);
}
.resource-icon{
  width:24px; height:24px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; flex-shrink:0;
}
.resource-icon.video{
  background:linear-gradient(135deg,var(--asl-green-mid),var(--asl-green));
  color:var(--asl-cream);
  box-shadow:0 2px 8px rgba(27,94,58,.3);
}
.resource-icon.photo{
  background:linear-gradient(135deg,var(--asl-gold-light),var(--asl-gold));
  color:var(--asl-ink);
  box-shadow:0 2px 8px rgba(201,162,39,.3);
}
.resource-label{
  flex:1;
  font-size:.72rem; color:rgba(246,241,227,.9);
  font-weight:500;
}
.resource-ext{
  font-size:.7rem; color:var(--asl-gold-light);
  opacity:.6;
}

@media (max-height:720px){
  #streams-panel{ display:none; }
}
@media (max-width:900px){
  #streams-panel{ display:none; }
}