/* ============================================================
   TERRA — shared design system (dedicated pages)
   Black + green earth-observation theme. Tailwind handles layout;
   this file owns theme tokens, brand colors, and components.
   ============================================================ */
:root{
  --bg:#06090A; --bg2:#0A0F0C;
  --ink:#E9F1EC; --mist:rgba(211,226,216,0.62); --faint:rgba(211,226,216,0.40);
  --green:#5BC98C; --green-b:#8FE6B4; --gold:#C9A875; --coral:#ff8a3d; --lime:#CFE044; --red:#ff6a5a;
  --line:rgba(120,205,160,0.12); --line-soft:rgba(255,255,255,0.06);
  --panel:linear-gradient(180deg,rgba(26,42,33,0.42),rgba(12,18,15,0.5));
  --panel-strong:linear-gradient(180deg,rgba(30,48,38,0.62),rgba(10,16,13,0.72));
  --shadow:0 24px 60px -30px rgba(0,0,0,0.95);
  --spring:cubic-bezier(.34,1.56,.64,1); --smooth:cubic-bezier(.4,0,.2,1);
}
:root[data-theme="light"]{
  --bg:#F7F5EE; --bg2:#EFEDE4; --ink:#1B2A20; --mist:#566B5C; --faint:#8A968C;
  --green:#2E7D52; --green-b:#3F7D4E; --gold:#9A7B3F; --coral:#B0652F;
  --line:rgba(20,48,31,0.12); --line-soft:rgba(20,48,31,0.08);
  --panel:rgba(255,255,255,0.7); --panel-strong:rgba(255,255,255,0.9);
  --shadow:0 16px 40px -18px rgba(20,48,31,0.18);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:
    radial-gradient(1200px 680px at 50% -12%, rgba(91,201,140,0.10), transparent 58%),
    radial-gradient(900px 600px at 88% 4%, rgba(201,168,117,0.045), transparent 60%),
    var(--bg);
  color:var(--ink); min-height:100vh; letter-spacing:-0.005em;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-0.03em;line-height:1.05}
p{margin:0}
img{max-width:100%;display:block}

/* text/color utilities */
.ink{color:var(--ink)} .mist{color:var(--mist)} .faint{color:var(--faint)}
.glow{color:var(--green-b)} .c-gold{color:var(--gold)} .c-coral{color:var(--coral)} .c-lime{color:var(--lime)} .c-red{color:var(--red)}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}
.label{font-size:10px;text-transform:uppercase;letter-spacing:.22em;color:var(--faint);font-weight:500}
.serif{font-family:"DM Serif Display",Georgia,serif;font-weight:400}
.wrap{max-width:80rem;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.wrap{padding:0 1.5rem}}

/* surfaces */
.glass{background:var(--panel);border:1px solid var(--line);border-radius:1rem;box-shadow:0 1px 0 rgba(143,230,180,.04) inset,var(--shadow)}
.glass-strong{background:var(--panel-strong);border:1px solid var(--line);border-radius:1rem;box-shadow:0 1px 0 rgba(143,230,180,.05) inset,var(--shadow)}
.lift{transition:transform .2s var(--smooth),border-color .2s var(--smooth),box-shadow .2s var(--smooth)}
.lift:hover{transform:translateY(-2px);border-color:rgba(91,201,140,.34)}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0;margin:0}

/* pills */
.pill{display:inline-flex;align-items:center;gap:.4em;padding:.28em .7em;border-radius:999px;font-size:11px;font-weight:500;border:1px solid var(--line);color:var(--mist);white-space:nowrap;transition:.15s var(--smooth);cursor:default}
button.pill{cursor:pointer}
.pill-green{background:rgba(91,201,140,.12);color:var(--green-b);border-color:rgba(91,201,140,.34)}
.pill-gold{background:rgba(201,168,117,.10);color:var(--gold);border-color:rgba(201,168,117,.30)}
.pill-coral{background:rgba(255,138,60,.12);color:var(--coral);border-color:rgba(255,138,60,.34)}
.pill-ghost{background:rgba(211,226,216,.04);color:var(--mist);border-color:var(--line)}
button.pill-ghost:hover{border-color:rgba(91,201,140,.4);color:var(--ink)}
.dot{width:.5em;height:.5em;border-radius:999px;background:currentColor;box-shadow:0 0 8px currentColor}
.live .dot{animation:pulse 2s var(--smooth) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.55em 1em;border-radius:.7rem;font-size:13px;font-weight:600;border:1px solid var(--line);background:rgba(211,226,216,.04);color:var(--ink);cursor:pointer;transition:.15s var(--smooth)}
.btn:hover{border-color:rgba(91,201,140,.4)}
.btn-accent{background:linear-gradient(90deg,var(--green),var(--green-b));color:#04140B;border:0}

/* header / nav */
.hdr{position:sticky;top:0;z-index:50;backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);background:rgba(6,9,10,.86);border-bottom:1px solid var(--line)}
:root[data-theme="light"] .hdr{background:rgba(247,245,238,.9)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:56px}
.brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.brand-mark{width:34px;height:34px;border-radius:.6rem;background:#0C1A12;border:1px solid rgba(91,201,140,.35);display:flex;align-items:center;justify-content:center}
:root[data-theme="light"] .brand-mark{background:#e7efe7}
.brand-name{font-size:15px;font-weight:600;letter-spacing:.12em}
.brand-sub{font-size:8.5px;text-transform:uppercase;letter-spacing:.2em;color:var(--faint)}
.nav{display:none;align-items:center;gap:1.25rem;font-size:13px;color:var(--mist)}
@media(min-width:900px){.nav{display:flex}}
.nav a{position:relative;padding:.25rem 0;transition:color .15s}
.nav a:hover{color:var(--green-b)}
.nav a.active{color:var(--green-b)}
.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--green),var(--gold))}
.icon-btn{width:36px;height:36px;border-radius:.6rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:transparent;color:var(--mist);cursor:pointer}
.icon-btn:hover{color:var(--green-b);border-color:rgba(91,201,140,.4)}
.mnav{display:flex;gap:.5rem;overflow-x:auto;padding:.5rem 0;font-size:12px}
@media(min-width:900px){.mnav{display:none}}
.mnav a{padding:.35rem .7rem;border-radius:999px;border:1px solid var(--line);color:var(--mist);white-space:nowrap}
.mnav a.active{color:var(--green-b);border-color:rgba(91,201,140,.4)}

/* footer */
.ftr{border-top:1px solid var(--line-soft);margin-top:3rem;padding:1.75rem 0}
.ftr small{color:var(--faint);font-size:11px;letter-spacing:.02em}

/* KPI tiles */
.kpi{padding:1.1rem 1.15rem}
.kpi .k-label{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--faint);margin-bottom:.4rem}
.kpi .k-val{font-size:28px;font-weight:600;line-height:1;letter-spacing:-0.02em}
.kpi .k-sub{font-size:11px;color:var(--mist);margin-top:.4rem}
.spark{height:34px;width:100%;margin-top:.5rem;opacity:.9}

/* meters / bars */
.bar{height:6px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--coral),#ffab5e)}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--green-b);padding:.5rem .6rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg2)}
.tbl td{padding:.5rem .6rem;border-bottom:1px solid var(--line-soft);color:var(--ink)}
.tbl tr:hover td{background:rgba(91,201,140,.05)}

/* range slider */
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:999px;background:linear-gradient(90deg,rgba(255,138,60,.6),rgba(255,171,94,.5));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:999px;background:#fff;border:1.5px solid var(--coral);box-shadow:0 2px 8px rgba(255,138,60,.4);cursor:pointer}

/* drawer */
.drawer-back{position:fixed;inset:0;background:rgba(4,7,5,.6);backdrop-filter:blur(4px);z-index:80;opacity:0;pointer-events:none;transition:opacity .25s var(--smooth)}
.drawer-back.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,92vw);z-index:90;background:linear-gradient(180deg,rgba(14,24,18,.98),rgba(7,11,9,.99));border-left:1px solid var(--line);box-shadow:-30px 0 80px -40px #000;transform:translateX(100%);transition:transform .32s var(--spring);overflow-y:auto}
.drawer.open{transform:translateX(0)}
:root[data-theme="light"] .drawer{background:linear-gradient(180deg,#fff,#f4f2ea)}
@media(max-width:560px){.drawer{width:100vw;top:auto;height:86vh;border-left:0;border-top:1px solid var(--line);border-radius:1.2rem 1.2rem 0 0;transform:translateY(100%)}.drawer.open{transform:translateY(0)}}

/* reveal */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .6s var(--smooth),transform .6s var(--smooth)}
.reveal.in{opacity:1;transform:none}

/* grids */
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}
.scrollbar-thin::-webkit-scrollbar{height:8px;width:8px}
.scrollbar-thin::-webkit-scrollbar-thumb{background:rgba(120,205,160,.16);border-radius:8px}

/* compact utilities (so pages need no Tailwind) */
.flex{display:flex}.inline-flex{display:inline-flex}.col{flex-direction:column}.wrap-w{flex-wrap:wrap}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-base{align-items:baseline}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}
.grow{flex:1 1 auto}.shrink0{flex-shrink:0}.gap1{gap:.25rem}.gap2{gap:.5rem}.gap3{gap:.75rem}.gap4{gap:1rem}.gap5{gap:1.25rem}.gap6{gap:1.5rem}
.rel{position:relative}.abs{position:absolute}.fixed{position:fixed}.hide{display:none}.block{display:block}
.mt1{margin-top:.25rem}.mt2{margin-top:.5rem}.mt3{margin-top:.75rem}.mt4{margin-top:1rem}.mt5{margin-top:1.25rem}.mt6{margin-top:1.5rem}.mt8{margin-top:2rem}
.mb1{margin-bottom:.25rem}.mb2{margin-bottom:.5rem}.mb3{margin-bottom:.75rem}.mb4{margin-bottom:1rem}.mb5{margin-bottom:1.25rem}.mb6{margin-bottom:1.5rem}.mb8{margin-bottom:2rem}
.p3{padding:.75rem}.p4{padding:1rem}.p5{padding:1.25rem}.p6{padding:1.5rem}
.t-xs{font-size:11px}.t-sm{font-size:13px}.t-base{font-size:14px}.t-lg{font-size:17px}.t-xl{font-size:20px}.t-2xl{font-size:26px}.t-3xl{font-size:34px}.t-4xl{font-size:clamp(30px,5vw,48px)}
.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.lh1{line-height:1.05}.lh15{line-height:1.5}
.center{text-align:center}.right{text-align:right}
.round-lg{border-radius:1.25rem}.round-sm{border-radius:.6rem}.round-full{border-radius:999px}
.w-full{width:100%}.h-full{height:100%}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.minw0{min-width:0}
.ov-x{overflow-x:auto}.ov-y{overflow-y:auto}.pointer{cursor:pointer}.nowrap{white-space:nowrap}
.sec{padding:2.25rem 0}.maxw-3xl{max-width:48rem}.maxw-4xl{max-width:56rem}