/* ═══════════════════════════════════════════════════════════════════
   COMMAND.CSS v4 — Alleanza Speranza Animali e Milieu
   Institutional environmental monitoring software aesthetic
   Reference: panel 1-4 — dense glass HUD, telemetry everywhere,
   nature+tech fusion, glowing markers, scan effects, depth layers
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --cc-bg:         #08111E;
  --cc-bg-2:       #0B1826;
  --cc-bg-3:       #0E1F30;
  --cc-panel:      rgba(12, 24, 40, 0.78);
  --cc-panel-2:    rgba(16, 30, 50, 0.60);
  --cc-panel-solid:rgba(10, 18, 32, 0.94);
  --cc-border:     rgba(64, 128, 172, 0.32);
  --cc-border-lit: rgba(100, 188, 248, 0.62);
  --cc-border-dim: rgba(40, 80, 110, 0.22);
  --cc-glow:       0 0 0 1px rgba(60,120,170,0.14), 0 4px 28px rgba(0,0,0,0.55);
  --cc-glow-lit:   0 0 0 1px rgba(100,188,248,0.28), 0 0 28px rgba(34,148,228,0.22), 0 10px 40px rgba(0,0,0,0.65);
  --cc-glow-green: 0 0 0 1px rgba(61,224,138,0.2), 0 0 20px rgba(61,224,138,0.18), 0 6px 24px rgba(0,0,0,0.5);
  --cc-glow-red:   0 0 0 1px rgba(255,77,94,0.25), 0 0 24px rgba(255,77,94,0.2), 0 8px 28px rgba(0,0,0,0.5);

  /* Operational color system */
  --cc-green:   #3DE08A;  /* active / online / confirmed */
  --cc-green-2: #28C070;
  --cc-green-3: rgba(61,224,138,0.12);
  --cc-amber:   #F0A030;  /* projects / infrastructure / pending */
  --cc-amber-2: #FFB84D;
  --cc-amber-3: rgba(240,160,48,0.12);
  --cc-cyan:    #34C8E8;  /* data / cameras / satellite */
  --cc-cyan-2:  #1AB0D0;
  --cc-cyan-3:  rgba(52,200,232,0.10);
  --cc-red:     #FF4D5E;  /* alerts / critical */
  --cc-red-2:   #E8384A;
  --cc-purple:  #9B6DFF;  /* research / analytics */
  --cc-teal:    #1ADBA0;  /* corridors / habitat */

  --cc-text:    #D8EAF4;
  --cc-text-2:  #88A8C0;
  --cc-text-3:  #507090;
  --cc-text-dim:#364E60;

  --cc-blur: blur(20px) saturate(1.6) brightness(1.05);
  --cc-blur-heavy: blur(32px) saturate(1.9) brightness(1.08);
}

/* ═══ ENVIRONMENTAL BACKDROP ════════════════════════════════ */
.env-backdrop {
  position: fixed; inset: 0; z-index: -3;
  background-size: cover; background-position: center 30%;
  filter: brightness(0.28) saturate(0.85) contrast(1.08);
  transition: background-image 1s ease;
}
.env-backdrop::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 30%, rgba(0,60,120,0.3), transparent 60%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(20,80,40,0.15), transparent 50%),
    linear-gradient(180deg, rgba(8,17,30,0.8) 0%, rgba(8,17,30,0.45) 30%, rgba(8,17,30,0.3) 55%, rgba(8,17,30,0.95) 100%);
}
.env-fog {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 30% at 25% 90%, rgba(61,224,138,0.035), transparent 55%),
    radial-gradient(ellipse 45% 35% at 78% 15%, rgba(52,200,232,0.03), transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(34,148,228,0.02), transparent 55%);
  animation: fog-shift 18s ease-in-out infinite;
}
@keyframes fog-shift {
  0%,100%{opacity:1} 50%{opacity:.7}
}

/* Atmospheric particle canvas */
.env-particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .4; }

/* ═══ SCAN LINE EFFECT ══════════════════════════════════════ */
.scan-panel {
  overflow: hidden;
}
.scan-panel::after {
  content: ''; position: absolute; left: 0; right: 0; height: 80px; top: -80px;
  background: linear-gradient(180deg, transparent 0%, rgba(52,200,232,0.04) 50%, transparent 100%);
  animation: scan-sweep 7s linear infinite; pointer-events: none; z-index: 10;
}
@keyframes scan-sweep { from{top:-80px} to{top:100%} }

/* ═══ THE COMMAND PANEL ═════════════════════════════════════ */
.cc-panel {
  background: var(--cc-panel);
  backdrop-filter: var(--cc-blur);
  -webkit-backdrop-filter: var(--cc-blur);
  border: 1px solid var(--cc-border);
  border-radius: 12px;
  box-shadow: var(--cc-glow);
  position: relative;
  transition: border-color .28s, box-shadow .28s, transform .28s;
}
.cc-panel:hover { border-color: var(--cc-border-lit); box-shadow: var(--cc-glow-lit); }
.cc-panel.lit { border-color: var(--cc-border-lit); box-shadow: var(--cc-glow-lit); }
.cc-panel.green-lit { border-color: rgba(61,224,138,0.35); box-shadow: var(--cc-glow-green); }
.cc-panel.red-lit { border-color: rgba(255,77,94,0.4); box-shadow: var(--cc-glow-red); }
.cc-panel.solid { background: var(--cc-panel-solid); backdrop-filter: var(--cc-blur-heavy); -webkit-backdrop-filter: var(--cc-blur-heavy); }

/* Top edge specular highlight */
.cc-panel::before {
  content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(140,210,255,0.55) 40%, rgba(200,240,255,0.35) 55%, rgba(140,210,255,0.4) 70%, transparent 100%);
  pointer-events: none; border-radius: inherit;
}

/* HUD corner brackets — 4-corner tactical indicator */
.cc-panel.hud > .hc { position: absolute; width: 13px; height: 13px; pointer-events: none; z-index: 5; }
.cc-panel.hud > .hc { border: 1.5px solid rgba(52,200,232,0.55); }
.cc-panel.hud > .hc.tl { top: 5px; left: 5px; border-right: none; border-bottom: none; }
.cc-panel.hud > .hc.tr { top: 5px; right: 5px; border-left: none; border-bottom: none; }
.cc-panel.hud > .hc.bl { bottom: 5px; left: 5px; border-right: none; border-top: none; }
.cc-panel.hud > .hc.br { bottom: 5px; right: 5px; border-left: none; border-top: none; }

/* Panel header */
.cc-head {
  display: flex; align-items: center; gap: .5em; padding: .8em 1.1em;
  border-bottom: 1px solid rgba(64,128,172,0.16);
  font-family: var(--f-mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cc-text);
}
.cc-head-ico { width: 14px; height: 14px; color: var(--cc-green); flex: none; }
.cc-head-right { margin-left: auto; display: flex; align-items: center; gap: .4em; font-size: .56rem; color: var(--cc-green); }
.cc-body { padding: 1em 1.1em; }

/* ═══ STATUS INDICATORS ═════════════════════════════════════ */
.cc-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.cc-dot.green  { background: var(--cc-green); box-shadow: 0 0 10px rgba(61,224,138,.8); animation: pulse-g 2.2s ease-in-out infinite; }
.cc-dot.amber  { background: var(--cc-amber); box-shadow: 0 0 10px rgba(240,160,48,.8); animation: pulse-a 2.5s ease-in-out infinite; }
.cc-dot.red    { background: var(--cc-red);   box-shadow: 0 0 10px rgba(255,77,94,.8);  animation: pulse-r 1.6s ease-in-out infinite; }
.cc-dot.cyan   { background: var(--cc-cyan);  box-shadow: 0 0 10px rgba(52,200,232,.8); }
.cc-dot.purple { background: var(--cc-purple);box-shadow: 0 0 8px rgba(155,109,255,.8); }
.cc-dot.sm { width: 5px; height: 5px; }
.cc-dot.lg { width: 9px; height: 9px; }
@keyframes pulse-g { 0%,100%{box-shadow:0 0 0 0 rgba(61,224,138,.5)}  70%{box-shadow:0 0 0 7px rgba(61,224,138,0)} }
@keyframes pulse-a { 0%,100%{box-shadow:0 0 0 0 rgba(240,160,48,.5)}  70%{box-shadow:0 0 0 7px rgba(240,160,48,0)} }
@keyframes pulse-r { 0%,100%{box-shadow:0 0 0 0 rgba(255,77,94,.5)}   70%{box-shadow:0 0 0 7px rgba(255,77,94,0)} }
@keyframes pulse-ring { 0%{transform:scale(.7);opacity:.8} 100%{transform:scale(2.2);opacity:0} }

/* ═══ STAT TILES ════════════════════════════════════════════ */
.stat-tiles { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
@media(max-width:900px){ .stat-tiles{ grid-template-columns:1fr 1fr; } }
@media(max-width:460px){ .stat-tiles{ grid-template-columns:1fr; } }
.stat-tile { padding: 1.1em 1.2em; display: flex; flex-direction: column; gap: .25em; }
.stat-tile-ico { width: 20px; height: 20px; color: var(--cc-green); margin-bottom: .3em; opacity: .85; }
.stat-tile-num { font-family: var(--f-mono); font-size: 1.95rem; font-weight: 700; line-height: 1; color: var(--cc-text); }
.stat-tile-num .unit { font-size: .5em; color: var(--cc-green); vertical-align: top; }
.stat-tile-label { font-family: var(--f-mono); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-text-3); }
.stat-tile-trend { font-size: .6rem; color: var(--cc-green); margin-top: .1em; }
.stat-tile.amber .stat-tile-ico { color: var(--cc-amber); }
.stat-tile.amber .stat-tile-num .unit { color: var(--cc-amber); }
.stat-tile.cyan .stat-tile-ico { color: var(--cc-cyan); }
.stat-tile.red .stat-tile-ico { color: var(--cc-red); }

/* ═══ MINI STATS (4-up in monitoring panel) ═════════════════ */
.mini-stats { display: flex; align-items: stretch; }
.mini-stat { flex: 1; padding: .6em .9em; display: flex; align-items: center; gap: .65em; border-right: 1px solid rgba(64,128,172,.14); }
.mini-stat:last-child { border-right: 0; }
.mini-stat-ico { width: 28px; height: 28px; border-radius: 8px; background: var(--cc-cyan-3); display: flex; align-items: center; justify-content: center; color: var(--cc-cyan); flex: none; }
.mini-stat-ico svg { width: 15px; height: 15px; }
.mini-stat-num { font-family: var(--f-mono); font-size: 1.35rem; font-weight: 700; color: var(--cc-text); line-height: 1; }
.mini-stat-label { font-family: var(--f-mono); font-size: .48rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cc-text-3); margin-top: .12em; }
@media(max-width:600px){ .mini-stats{flex-wrap:wrap} .mini-stat{min-width:45%;border-bottom:1px solid rgba(64,128,172,.1)} }

/* ═══ PROJECT CARDS ═════════════════════════════════════════ */
.pcard { border-radius: 12px; overflow: hidden; position: relative; cursor: pointer;
  background: var(--cc-panel); border: 1px solid var(--cc-border);
  transition: all .3s; display: flex; flex-direction: column; }
.pcard:hover { border-color: var(--cc-border-lit); transform: translateY(-3px); box-shadow: var(--cc-glow-lit); }
.pcard-media { aspect-ratio: 16/10; overflow: hidden; position: relative; flex: none; }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7) saturate(1.1); transition: .6s; }
.pcard:hover .pcard-media img { transform: scale(1.06); filter: brightness(.9) saturate(1.3); }
.pcard-badge { position: absolute; top: .65em; left: .65em; z-index: 2; }
.pcard-body { padding: .9em 1em 1.1em; flex: 1; display: flex; flex-direction: column; }
.pcard-title { font-family: var(--f-display); font-size: .95rem; font-weight: 600; line-height: 1.2; color: var(--cc-text); flex: 1; }
.pcard-loc { display: flex; align-items: center; gap: .35em; font-family: var(--f-mono); font-size: .58rem; color: var(--cc-text-3); margin-top: .4em; }
.pcard-loc svg { width: 10px; height: 10px; color: var(--cc-green); }
.pcard-progress { margin-top: .8em; }
.pcard-progress-label { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: .55rem; color: var(--cc-text-3); margin-bottom: .3em; }
.pcard-progress-label b { color: var(--cc-green); }
.pcard-progress-bar { height: 3px; border-radius: 2px; background: rgba(64,128,172,.2); overflow: hidden; }
.pcard-progress-fill { height: 100%; background: linear-gradient(90deg, var(--cc-green-2), var(--cc-green)); box-shadow: 0 0 8px rgba(61,224,138,.5); transition: width 1.3s cubic-bezier(0.16,1,0.3,1); }

/* ═══ OPERATIONAL BADGES ════════════════════════════════════ */
.cc-badge { display: inline-flex; align-items: center; gap: .3em; font-family: var(--f-mono); font-size: .52rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .28em .65em; border-radius: 5px; }
.cc-badge.active    { background: var(--cc-green-3); color: var(--cc-green); border: 1px solid rgba(61,224,138,.28); }
.cc-badge.completed { background: var(--cc-cyan-3);  color: var(--cc-cyan);  border: 1px solid rgba(52,200,232,.22); }
.cc-badge.new       { background: var(--cc-amber-3); color: var(--cc-amber-2);border: 1px solid rgba(240,160,48,.28); }
.cc-badge.critical  { background: rgba(255,77,94,.12); color: var(--cc-red);  border: 1px solid rgba(255,77,94,.28); }
.cc-badge.research  { background: rgba(155,109,255,.1);color: var(--cc-purple);border: 1px solid rgba(155,109,255,.22); }

/* ═══ FEED / ACTIVITY ROWS ══════════════════════════════════ */
.feed-row { display: flex; align-items: flex-start; gap: .65em; padding: .65em .9em; border-bottom: 1px solid rgba(64,128,172,.1); cursor: pointer; transition: background .18s; }
.feed-row:last-child { border-bottom: 0; }
.feed-row:hover { background: rgba(52,200,232,.04); }
.feed-ico { width: 28px; height: 28px; border-radius: 8px; background: var(--cc-green-3); display: flex; align-items: center; justify-content: center; color: var(--cc-green); flex: none; margin-top: .05em; }
.feed-ico svg { width: 14px; height: 14px; }
.feed-ico.amber { background: var(--cc-amber-3); color: var(--cc-amber); }
.feed-ico.cyan  { background: var(--cc-cyan-3);  color: var(--cc-cyan); }
.feed-ico.red   { background: rgba(255,77,94,.12); color: var(--cc-red); }
.feed-text { flex: 1; min-width: 0; }
.feed-title { font-size: .8rem; font-weight: 500; color: var(--cc-text); line-height: 1.25; }
.feed-sub   { font-family: var(--f-mono); font-size: .56rem; color: var(--cc-text-3); margin-top: .12em; }
.feed-time  { font-family: var(--f-mono); font-size: .56rem; color: var(--cc-text-2); flex: none; margin-top: .05em; }

/* ═══ ALERT ROWS ════════════════════════════════════════════ */
.alert-panel { background: rgba(35,10,16,.68); border-color: rgba(255,77,94,.42); }
.alert-panel::before { background: linear-gradient(90deg, transparent, rgba(255,77,94,.5), transparent); }
.alert-panel .cc-head { border-bottom-color: rgba(255,77,94,.18); }
.alert-panel .cc-head-ico { color: var(--cc-red); }
.alert-panel .cc-head-right { color: var(--cc-red); }
.alert-row { display: flex; align-items: center; gap: .65em; padding: .6em .9em; border-bottom: 1px solid rgba(255,77,94,.1); cursor: pointer; transition: background .18s; }
.alert-row:last-child { border-bottom: 0; }
.alert-row:hover { background: rgba(255,77,94,.05); }
.alert-ico { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,77,94,.12); display: flex; align-items: center; justify-content: center; color: var(--cc-red); flex: none; }
.alert-ico svg { width: 13px; height: 13px; }
.alert-title { font-size: .79rem; font-weight: 500; color: var(--cc-text); flex: 1; min-width: 0; }
.alert-sub { font-family: var(--f-mono); font-size: .56rem; color: var(--cc-text-3); margin-top: .1em; }
.alert-time { font-family: var(--f-mono); font-size: .56rem; color: var(--cc-red); flex: none; }
.alert-arrow { color: var(--cc-red); flex: none; opacity: .5; }

/* ═══ TELEMETRY BAR ═════════════════════════════════════════ */
.telebar { display: flex; align-items: stretch; background: var(--cc-panel); backdrop-filter: var(--cc-blur); border: 1px solid var(--cc-border); border-radius: 12px; box-shadow: var(--cc-glow); overflow: hidden; }
.telebar-cell { flex: 1; padding: .85em 1.1em; border-right: 1px solid rgba(64,128,172,.13); min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.telebar-cell:last-child { border-right: 0; }
.telebar-label { font-family: var(--f-mono); font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-text-3); white-space: nowrap; }
.telebar-value { font-family: var(--f-mono); font-size: 1.45rem; font-weight: 700; color: var(--cc-text); line-height: 1.1; margin-top: .08em; }
.telebar-sub { font-family: var(--f-mono); font-size: .52rem; color: var(--cc-text-2); margin-top: .05em; }
.telebar-value.green  { color: var(--cc-green); text-shadow: 0 0 16px rgba(61,224,138,.4); }
.telebar-value.amber  { color: var(--cc-amber); text-shadow: 0 0 16px rgba(240,160,48,.3); }
.telebar-value.cyan   { color: var(--cc-cyan);  }
.telebar-value.red    { color: var(--cc-red);   }
.telebar-value.sm     { font-size: .88rem; line-height: 1.25; }

/* ═══ OPERATIONAL SYSTEMS BARS ══════════════════════════════ */
.opsys-row { display: flex; align-items: center; gap: .75em; padding: .4em 0; }
.opsys-ico { width: 24px; height: 24px; border-radius: 7px; background: var(--cc-green-3); display: flex; align-items: center; justify-content: center; color: var(--cc-green); flex: none; }
.opsys-ico svg { width: 13px; height: 13px; }
.opsys-ico.amber { background: var(--cc-amber-3); color: var(--cc-amber); }
.opsys-ico.cyan  { background: var(--cc-cyan-3);  color: var(--cc-cyan); }
.opsys-ico.red   { background: rgba(255,77,94,.1); color: var(--cc-red); }
.opsys-label  { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cc-text-2); white-space: nowrap; }
.opsys-val    { font-family: var(--f-mono); font-size: .88rem; font-weight: 700; color: var(--cc-text); margin-top: .1em; }
.opsys-val .max { color: var(--cc-text-3); font-size: .82em; }
.opsys-bar    { flex: 1; height: 3px; border-radius: 2px; background: rgba(64,128,172,.18); overflow: hidden; }
.opsys-fill   { height: 100%; background: linear-gradient(90deg, var(--cc-green-2), var(--cc-green)); box-shadow: 0 0 6px rgba(61,224,138,.5); }
.opsys-pct    { font-family: var(--f-mono); font-size: .62rem; color: var(--cc-text-2); min-width: 30px; text-align: right; flex: none; }

/* ═══ HEALTH BARS ═══════════════════════════════════════════ */
.health-row { display: flex; align-items: center; gap: .7em; margin-bottom: .6em; }
.health-label { font-family: var(--f-mono); font-size: .6rem; color: var(--cc-text-2); width: 76px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.health-bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(64,128,172,.18); overflow: hidden; }
.health-fill { height: 100%; background: linear-gradient(90deg, var(--cc-cyan), var(--cc-green)); }
.health-val { font-family: var(--f-mono); font-size: .6rem; color: var(--cc-text); width: 32px; text-align: right; flex: none; }

/* ═══ CAMERA TRAP DONUT ═════════════════════════════════════ */
.donut-wrap { display: flex; align-items: center; gap: 1em; }
.donut { width: 84px; height: 84px; position: relative; flex: none; }
.donut svg { transform: rotate(-90deg); }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-num { font-family: var(--f-mono); font-size: 1.25rem; font-weight: 700; color: var(--cc-text); line-height: 1; }
.donut-lbl { font-family: var(--f-mono); font-size: .47rem; text-transform: uppercase; color: var(--cc-text-3); }
.donut-legend { display: flex; flex-direction: column; gap: .4em; flex: 1; }
.donut-leg-row { display: flex; align-items: center; gap: .45em; font-family: var(--f-mono); font-size: .64rem; color: var(--cc-text-2); }
.donut-leg-row b { color: var(--cc-text); margin-left: auto; }

/* ═══ SIDEBAR NAV ═══════════════════════════════════════════ */
.cc-sidenav { display: flex; flex-direction: column; gap: 1px; }
.cc-navitem { display: flex; align-items: center; gap: .75em; padding: .68em .85em; border-radius: 9px; color: var(--cc-text-2); transition: all .2s; cursor: pointer; border: 1px solid transparent; text-decoration: none; }
.cc-navitem svg { width: 17px; height: 17px; flex: none; }
.cc-navitem span { font-size: .8rem; font-weight: 500; }
.cc-navitem .badge-c { font-family: var(--f-mono); font-size: .5rem; padding: .2em .5em; border-radius: 999px; background: rgba(255,77,94,.15); color: var(--cc-red); border: 1px solid rgba(255,77,94,.2); margin-left: auto; }
.cc-navitem:hover { background: var(--cc-cyan-3); color: var(--cc-text); }
.cc-navitem.active { background: var(--cc-green-3); color: var(--cc-green); border-color: rgba(61,224,138,.2); box-shadow: inset 3px 0 0 var(--cc-green); }

/* ═══ ACTIVITY TICKER ═══════════════════════════════════════════ */
.activity-ticker { display: flex; align-items: center; gap: 1.2em; padding: .75em 1.1em; background: var(--cc-panel-solid); backdrop-filter: var(--cc-blur); border: 1px solid var(--cc-border); border-radius: 12px; box-shadow: var(--cc-glow); overflow: hidden; }
.ticker-label { display: flex; align-items: center; gap: .45em; font-family: var(--f-mono); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-green); flex: none; white-space: nowrap; }
.ticker-scroll { flex: 1; overflow: hidden; position: relative; }
.ticker-items { display: flex; gap: 2.5em; animation: ticker-slide 30s linear infinite; white-space: nowrap; }
.ticker-items:hover { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: .45em; font-size: .7rem; color: var(--cc-text-2); }
.ticker-item svg { width: 12px; height: 12px; color: var(--cc-green); flex: none; }
.ticker-item b { color: var(--cc-text); font-weight: 500; }
.ticker-clock { font-family: var(--f-mono); font-size: .78rem; color: var(--cc-cyan); flex: none; letter-spacing: .05em; white-space: nowrap; }
@keyframes ticker-slide { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ═══ MAP LAYER BUTTONS ═════════════════════════════════════ */
.map-layer-btn { font-family: var(--f-mono); font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; padding: .42em .8em; border-radius: 6px; background: rgba(8,17,30,.82); border: 1px solid var(--cc-border); color: var(--cc-text-2); backdrop-filter: blur(10px); transition: all .2s; cursor: pointer; }
.map-layer-btn:hover { border-color: var(--cc-border-lit); color: var(--cc-text); }
.map-layer-btn.active { background: var(--cc-amber-3); border-color: rgba(240,160,48,.38); color: var(--cc-amber-2); }
.map-layer-btn.active.green { background: var(--cc-green-3); border-color: rgba(61,224,138,.3); color: var(--cc-green); }
.map-layer-btn.active.cyan { background: var(--cc-cyan-3); border-color: rgba(52,200,232,.3); color: var(--cc-cyan); }

/* ═══ FILTER CHECKBOXES ═════════════════════════════════════ */
.filter-check { display: flex; align-items: center; gap: .6em; padding: .45em .3em; cursor: pointer; user-select: none; }
.filter-check input { display: none; }
.filter-check .box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--cc-border-lit); display: flex; align-items: center; justify-content: center; flex: none; transition: all .18s; background: rgba(8,17,30,.6); }
.filter-check input:checked + .box { background: var(--cc-green); border-color: var(--cc-green); box-shadow: 0 0 8px rgba(61,224,138,.5); }
.filter-check input:checked + .box::after { content: '✓'; color: #061210; font-size: .64rem; font-weight: 900; line-height: 1; }
.filter-check .lbl { font-size: .77rem; color: var(--cc-text); }
.filter-check .lbl-ico { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .3em; vertical-align: middle; }
.filter-group-title { font-family: var(--f-mono); font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cc-text-3); margin: .9em 0 .3em; padding-top: .6em; border-top: 1px solid rgba(64,128,172,.12); }
.filter-group-title:first-child { border-top: 0; margin-top: .2em; padding-top: 0; }

/* ═══ WILDLIFE INTELLIGENCE WIDGET ══════════════════════════ */
.wi-species-row { display: flex; align-items: center; gap: .7em; padding: .55em 0; border-bottom: 1px solid rgba(64,128,172,.1); }
.wi-species-row:last-child { border-bottom: 0; }
.wi-species-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--cc-green-3); display: flex; align-items: center; justify-content: center; flex: none; font-size: 1rem; }
.wi-species-name { font-size: .8rem; font-weight: 600; color: var(--cc-text); }
.wi-species-count { font-family: var(--f-mono); font-size: 1rem; font-weight: 700; color: var(--cc-green); margin-left: auto; }
.wi-species-trend { font-family: var(--f-mono); font-size: .55rem; color: var(--cc-text-3); text-align: right; }
.wi-species-bar { flex: 1; height: 2px; border-radius: 1px; background: rgba(64,128,172,.15); overflow: hidden; max-width: 60px; }
.wi-species-fill { height: 100%; background: var(--cc-green); }

/* ═══ CAMERA NETWORK WIDGET ══════════════════════════════════ */
.cam-row { display: flex; align-items: center; gap: .6em; padding: .5em .9em; border-bottom: 1px solid rgba(64,128,172,.1); }
.cam-row:last-child { border-bottom: 0; }
.cam-status { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.cam-status.online { background: var(--cc-green); box-shadow: 0 0 6px rgba(61,224,138,.7); }
.cam-status.offline { background: var(--cc-text-3); }
.cam-status.maintenance { background: var(--cc-amber); }
.cam-id { font-family: var(--f-mono); font-size: .62rem; color: var(--cc-cyan); min-width: 55px; }
.cam-loc { font-size: .75rem; color: var(--cc-text-2); flex: 1; }
.cam-signal { font-family: var(--f-mono); font-size: .56rem; color: var(--cc-text-3); flex: none; }
.cam-battery { font-family: var(--f-mono); font-size: .56rem; flex: none; }

/* ═══ COMPATIBLE OLD CLASSES ════════════════════════════════ */
/* Remap old cc-panel.hud-frame to new .hud */
.cc-panel.hud-frame > .hud-c { position: absolute; width: 13px; height: 13px; pointer-events: none; z-index: 5; border: 1.5px solid rgba(52,200,232,.55); }
.cc-panel.hud-frame > .hud-c.tl { top: 5px; left: 5px; border-right: none; border-bottom: none; }
.cc-panel.hud-frame > .hud-c.tr { top: 5px; right: 5px; border-left: none; border-bottom: none; }
.cc-panel.hud-frame > .hud-c.bl { bottom: 5px; left: 5px; border-right: none; border-top: none; }
.cc-panel.hud-frame > .hud-c.br { bottom: 5px; right: 5px; border-left: none; border-top: none; }
/* Compat: glass → cc-panel */
body[data-page] .glass, body[data-page] .glass-gold, body[data-page] .glass-heavy {
  background: var(--cc-panel) !important; backdrop-filter: var(--cc-blur) !important;
  border: 1px solid var(--cc-border) !important; box-shadow: var(--cc-glow) !important;
}
body[data-page] { background: var(--cc-bg); }
body[data-page] .site-header.scrolled { background: rgba(8,17,30,.9) !important; border-bottom-color: var(--cc-border) !important; backdrop-filter: blur(20px) !important; }
body[data-page] .page-head, body[data-page] .section-dark, body[data-page] .section-surface { background: transparent !important; }
body[data-page] .eyebrow { color: var(--cc-green); }
body[data-page] .badge-active { background: var(--cc-green-3); color: var(--cc-green); border-color: rgba(61,224,138,.28); }
body[data-page] .badge-completed { background: var(--cc-cyan-3); color: var(--cc-cyan); }
body[data-page] .badge-archived { background: rgba(64,128,172,.12); color: var(--cc-text-2); }

/* ═══ RESPONSIVE ════════════════════════════════════════════ */
@media(max-width:768px){
  .home-hero { grid-template-columns: 1fr !important; }
  .home-hero-right { order: -1; }
  .home-hero-bear { display: none; }
  .stat-tiles { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .featured-grid { grid-template-columns: 1fr !important; }
  .home-ops, .news-tl-grid { grid-template-columns: 1fr !important; }
  .home-bottom { grid-template-columns: 1fr !important; }
  .exp-sidebar { width: 82vw; max-width: 272px; }
  .exp-sidebar.open { box-shadow: 4px 0 40px rgba(0,0,0,.6); }
  .exp-main { margin-left: 0 !important; }
  .exp-mapzone { margin: 0; border-radius: 0; }
  .exp-filters { width: calc(100% - 20px); left: 10px; right: 10px; }
  .exp-sighting { display: none; }
  .exp-dashboard { grid-template-columns: 1fr 1fr !important; }
  .telebar { flex-wrap: wrap; }
  .telebar-cell { min-width: 45%; flex: 1 1 45%; border-bottom: 1px solid rgba(64,128,172,.1); }
  .mini-stats { flex-wrap: wrap; }
  .mini-stat { min-width: 45%; border-bottom: 1px solid rgba(64,128,172,.1); }
  .ticker-items { animation-duration: 15s; }
}
@media(max-width:480px){
  .stat-tiles { grid-template-columns: 1fr !important; }
  .home-hero-title { font-size: clamp(1.7rem,8vw,2.6rem); }
  .home-hero-actions { flex-direction: column; }
  .exp-dashboard { grid-template-columns: 1fr !important; }
  .telebar-value { font-size: 1.1rem; }
}

/* ═══ MAP POPUP STYLES ══════════════════════════════════════ */
.leaflet-popup-content-wrapper { background: var(--cc-panel-solid) !important; backdrop-filter: var(--cc-blur) !important; border: 1px solid var(--cc-border-lit) !important; border-radius: 10px !important; box-shadow: var(--cc-glow-lit) !important; color: var(--cc-text) !important; }
.leaflet-popup-tip { background: rgba(12,24,40,.95) !important; }
.map-popup h4 { font-family: var(--f-display); font-size: .9rem; font-weight: 700; color: var(--cc-text); margin: .4em 0; }
.map-popup { padding: .2em; min-width: 200px; }
.leaflet-popup-close-button { color: var(--cc-text-2) !important; font-size: 1.1rem !important; }
.leaflet-control-zoom a { background: rgba(10,18,32,.85) !important; border-color: var(--cc-border) !important; color: var(--cc-text) !important; }



/* ===== FINAL COMMAND-CENTER PATCH V6 ===== */
:root{--logo-big:clamp(112px,18vw,210px);--safe-bottom:calc(70px + env(safe-area-inset-bottom,0px));}
*{box-sizing:border-box} html,body{max-width:100%;overflow-x:hidden} img,svg,canvas,video{max-width:100%}.container{width:min(1180px,calc(100% - 32px));margin-inline:auto}.brand{min-width:0}.brand-word{min-width:0}.brand-mark{border-radius:50%;background:rgba(255,255,245,.94);padding:2px;box-shadow:0 0 0 1px rgba(240,160,48,.4),0 0 28px rgba(240,160,48,.22)!important}.intro-logo{width:128px!important;height:128px!important;border-radius:50%;background:#fff;padding:4px;box-shadow:0 0 60px rgba(240,160,48,.35)}
.hero-logo-lockup{display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:1rem;width:min(100%,620px);padding:1rem 1.1rem;border:1px solid rgba(240,160,48,.28);border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(240,160,48,.08) 45%,rgba(20,40,30,.20));backdrop-filter:blur(22px);box-shadow:0 22px 70px rgba(0,0,0,.34),0 0 70px rgba(240,160,48,.12);position:relative;overflow:hidden}.hero-logo-lockup:before{content:'';position:absolute;inset:-1px;background:radial-gradient(circle at 15% 10%,rgba(240,160,48,.22),transparent 34%),radial-gradient(circle at 85% 80%,rgba(61,224,138,.16),transparent 35%);pointer-events:none}.hero-logo-ring{width:var(--logo-big)!important;height:var(--logo-big)!important;min-width:var(--logo-big);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#fff 0 56%,rgba(255,255,245,.92) 57% 100%);border:2px solid rgba(240,160,48,.48);box-shadow:inset 0 0 20px rgba(0,0,0,.12),0 0 55px rgba(240,160,48,.32),0 24px 50px rgba(0,0,0,.30)}.hero-logo-main{width:94%!important;height:94%!important;object-fit:contain;border-radius:50%;display:block}.hero-logo-copy{position:relative;z-index:1}.hero-logo-copy strong{font-size:clamp(1.25rem,3vw,2.4rem);letter-spacing:.08em;color:var(--cc-text);text-shadow:0 0 28px rgba(240,160,48,.25)}.hero-logo-copy small{display:block;max-width:34ch;line-height:1.45;color:var(--cc-text-2)}.hero-logo-overline{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cc-amber)}
.home-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:clamp(1rem,3vw,2.2rem);align-items:stretch}.home-hero-left,.home-hero-right{min-width:0}.home-hero-actions,.nav-actions,.social-row,.home-map-layers{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}.home-hero-actions .btn{white-space:normal}.home-hero-bear{position:relative;margin-top:1rem;border-radius:28px;overflow:hidden;border:1px solid rgba(240,160,48,.25);box-shadow:0 25px 90px rgba(0,0,0,.35)}.home-hero-bear:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.45));pointer-events:none}.home-hero-bear img{width:100%;height:clamp(180px,24vw,330px);object-fit:cover;display:block;filter:saturate(1.1) contrast(1.08) brightness(.86)}.cc-panel,.pcard,.stat-tile,.doc-card,.res-card,.bear-card,.contact-info-card,.masonry-item{transition:transform .18s ease,border-color .22s ease,box-shadow .22s ease}.cc-panel:hover,.pcard:hover,.stat-tile:hover,.doc-card:hover,.res-card:hover,.bear-card:hover{border-color:rgba(240,160,48,.35)!important;box-shadow:0 24px 70px rgba(0,0,0,.32),0 0 50px rgba(240,160,48,.08)}
#home-map,#map-explorer,#map-region,#map-project,#map-propose,#obs-map,#modal-mini-map,#map-admin{width:100%;min-height:320px;border-radius:18px;overflow:hidden;background:#07111f}.leaflet-container{font-family:var(--f-body);border-radius:inherit}.home-map-layers{position:absolute;z-index:500;left:12px;right:12px;bottom:12px;justify-content:center;pointer-events:auto}.map-layer-btn,[data-layer]{min-height:34px;border-radius:999px!important;white-space:nowrap;background:rgba(5,12,22,.74)!important;border:1px solid rgba(140,210,255,.22)!important;color:var(--cc-text)!important;backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.25)}.map-layer-btn.active,[data-layer].active{border-color:rgba(61,224,138,.7)!important;background:rgba(61,224,138,.16)!important;color:#dfffee!important}.map-popup{max-width:240px}.mini-stats,.stat-tiles,.feature-grid,.project-grid,.gallery-grid,.doc-grid,.research-grid,#featured-grid,#grid-container,#bear-grid{display:grid;gap:clamp(.8rem,2vw,1.25rem);align-items:stretch}.pcard,.doc-card,.res-card,.bear-card{min-width:0;overflow:hidden}.pcard-title,.feed-title,.alert-title,.bear-name,.bear-id{overflow-wrap:anywhere}.input,select,textarea,button,.btn{max-width:100%}.bottom-nav{padding-bottom:max(.45rem,env(safe-area-inset-bottom,0px));z-index:850}.bottom-nav a{min-width:0;text-align:center;gap:.22rem}.bottom-nav svg{flex:none}.admin-shell{min-width:0}.admin-content{min-width:0}.admin-table-wrap,.table-wrap{overflow:auto;-webkit-overflow-scrolling:touch}.admin-sidebar .brand img{width:54px!important;height:54px!important;border-radius:50%;background:white;padding:2px}.admin-sidebar .brand{align-items:center}.admin-nav a{white-space:normal}.form-grid,.contact-grid{min-width:0}.field{min-width:0}.filter-check .lbl{line-height:1.35}
body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 12% 18%,rgba(240,160,48,.10),transparent 24%),radial-gradient(circle at 82% 22%,rgba(61,224,138,.08),transparent 26%),radial-gradient(circle at 50% 100%,rgba(52,200,232,.08),transparent 32%)}
@media(max-width:980px){.home-hero{grid-template-columns:1fr}.home-hero-right{min-height:auto}.hero-logo-lockup{grid-template-columns:1fr;text-align:center;justify-items:center}.hero-logo-ring{--logo-big:clamp(128px,46vw,190px)}.home-map-layers{position:relative;left:auto;right:auto;bottom:auto;margin-top:.75rem}.site-header .container{gap:.75rem}.brand-word{font-size:.78rem}.brand-word small{font-size:.58rem}.nav-actions{margin-left:auto}.contact-grid{grid-template-columns:1fr!important}.admin-shell{display:block}.admin-sidebar{position:fixed;z-index:950;transform:translateX(-105%);transition:.25s}.admin-sidebar.open{transform:translateX(0)}.admin-main{margin-left:0!important}.admin-topbar{position:sticky;top:0;z-index:800}.exp-layout,.region-body{grid-template-columns:1fr!important}.exp-sidebar{max-width:min(360px,88vw)}}
@media(max-width:640px){body{padding-bottom:var(--safe-bottom)}.container{width:min(100% - 22px,1180px)}.home-hero-title{font-size:clamp(2rem,12vw,3.4rem)!important}.hero-logo-lockup{padding:.85rem;border-radius:20px}.hero-logo-ring{--logo-big:clamp(120px,54vw,176px)}.home-metrics,.mini-stats,.stat-tiles{grid-template-columns:1fr!important}.home-hero-actions .btn{width:100%;justify-content:center}.cc-head{gap:.55rem;flex-wrap:wrap}.cc-head-right{margin-left:0}.home-map-foot{font-size:.68rem}.pcard-media img{min-height:180px}.bottom-nav{display:grid!important;grid-template-columns:repeat(5,1fr)}.bottom-nav a{font-size:.58rem;padding:.4rem .2rem}.bottom-nav svg{width:18px!important;height:18px!important}.site-header .brand-mark{height:44px!important;width:44px!important}.site-header .brand-word{max-width:150px}.mobile-menu{max-width:100vw}.display-lg{font-size:clamp(2rem,11vw,3.2rem)!important}.section-tight{padding-inline:0}#home-map,#map-explorer,#map-region,#map-project,#map-propose,#obs-map,#modal-mini-map,#map-admin{min-height:300px}.filter-grid,.form-grid{grid-template-columns:1fr!important}.contact-form-wrap{padding:1.15rem!important}.admin-content{padding:1rem!important}.admin-topbar-tools{flex-wrap:wrap;justify-content:flex-end}.news-card,.res-card,.doc-card,.bear-card{border-radius:16px}}