/* Khet Nazar — shared design tokens and components.
   A deliberate single dark theme: night sky over the fields, wheat-gold accent,
   NDVI greens for crop health, orbit-cyan for everything satellite.
   Two themes: "night" (dark, default when the device is dark) and "day" (light: field-paper greens
   and ink). html[data-theme] wins over the device setting; the toggle stores the choice. */
:root{
  color-scheme:dark;
  --night:#0A1024; --night-2:#0D1530; --panel:#111A35; --panel-2:#17223F; --panel-3:#1D2A4B;
  --line:#26335A; --line-soft:#1C2748;
  --ink:#EAF0FA; --ink-2:#C4CEE2; --muted:#8B98B8; --faint:#5E6B8C;
  --wheat:#EDBE4F; --wheat-2:#F6D685; --wheat-soft:rgba(237,190,79,.12);
  --orbit:#6CC6F2; --orbit-soft:rgba(108,198,242,.12);
  --leaf:#6ED492; --leaf-soft:rgba(110,212,146,.13);
  --warn:#F3A447; --warn-soft:rgba(243,164,71,.14);
  --crit:#FF6D61; --crit-soft:rgba(255,109,97,.14);
  --display:"Unbounded","Trebuchet MS",system-ui,sans-serif;
  --sans:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --hindi:"Noto Sans Devanagari","Nirmala UI","Mangal",sans-serif;
  --r:12px; --r-sm:8px;
  --shadow:0 18px 50px -20px rgba(0,0,0,.6);
  --glass:rgba(10,16,36,.74); --glass-2:rgba(13,21,48,.7); --scrim:rgba(3,6,16,.72);
  --img-bg:#050915; --img-tag:rgba(5,9,21,.78); --img-tag-ink:#FFFFFF;
  --wa-bg:#16301F; --wa-ink:#EAF6EE; --on-gold:#1A1405;
  --hero-glow-1:rgba(108,198,242,.14); --hero-glow-2:rgba(237,190,79,.08);
  --foot-1:#0D1530; --foot-2:#070C1C; --stars:.6;
}
/* day theme */
:root[data-theme="light"]{
  color-scheme:light;
  --night:#F3F5EF; --night-2:#EAEFE7; --panel:#FFFFFF; --panel-2:#F2F5EF; --panel-3:#E4EAE1;
  --line:#CFD8CC; --line-soft:#E1E7DE;
  --ink:#13211A; --ink-2:#33453A; --muted:#5F6E64; --faint:#94A198;
  --wheat:#B98010; --wheat-2:#CF951F; --wheat-soft:rgba(185,128,16,.12);
  --orbit:#1868A0; --orbit-soft:rgba(24,104,160,.10);
  --leaf:#1C8246; --leaf-soft:rgba(28,130,70,.11);
  --warn:#B0640A; --warn-soft:rgba(176,100,10,.11);
  --crit:#C4352A; --crit-soft:rgba(196,53,42,.10);
  --shadow:0 18px 44px -22px rgba(30,50,35,.35);
  --glass:rgba(255,255,255,.82); --glass-2:rgba(255,255,255,.78); --scrim:rgba(20,33,26,.45);
  --img-bg:#E3E9E0; --img-tag:rgba(255,255,255,.88); --img-tag-ink:#13211A;
  --wa-bg:#DDF2E3; --wa-ink:#173322; --on-gold:#1A1405;
  --hero-glow-1:rgba(24,104,160,.10); --hero-glow-2:rgba(185,128,16,.10);
  --foot-1:#E9EEE6; --foot-2:#DFE6DC; --stars:0;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  color-scheme:light;
  --night:#F3F5EF; --night-2:#EAEFE7; --panel:#FFFFFF; --panel-2:#F2F5EF; --panel-3:#E4EAE1;
  --line:#CFD8CC; --line-soft:#E1E7DE;
  --ink:#13211A; --ink-2:#33453A; --muted:#5F6E64; --faint:#94A198;
  --wheat:#B98010; --wheat-2:#CF951F; --wheat-soft:rgba(185,128,16,.12);
  --orbit:#1868A0; --orbit-soft:rgba(24,104,160,.10);
  --leaf:#1C8246; --leaf-soft:rgba(28,130,70,.11);
  --warn:#B0640A; --warn-soft:rgba(176,100,10,.11);
  --crit:#C4352A; --crit-soft:rgba(196,53,42,.10);
  --shadow:0 18px 44px -22px rgba(30,50,35,.35);
  --glass:rgba(255,255,255,.82); --glass-2:rgba(255,255,255,.78); --scrim:rgba(20,33,26,.45);
  --img-bg:#E3E9E0; --img-tag:rgba(255,255,255,.88); --img-tag-ink:#13211A;
  --wa-bg:#DDF2E3; --wa-ink:#173322; --on-gold:#1A1405;
  --hero-glow-1:rgba(24,104,160,.10); --hero-glow-2:rgba(185,128,16,.10);
  --foot-1:#E9EEE6; --foot-2:#DFE6DC; --stars:0;
}}
:root[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ink);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.01em;margin:0;text-wrap:balance;line-height:1.15}
p{margin:0}
.hi{font-family:var(--hindi)}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.label{font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.icon{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}
.icon.sm{width:16px;height:16px}.icon.lg{width:28px;height:28px}
:focus-visible{outline:2px solid var(--orbit);outline-offset:2px;border-radius:6px}
::selection{background:var(--wheat);color:var(--on-gold)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font:700 13.5px var(--sans);padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);cursor:pointer;text-decoration:none;transition:border-color .2s,background .2s,transform .15s}
.btn:hover{border-color:var(--muted)}
.btn:active{transform:translateY(1px)}
.btn.gold{background:var(--wheat);border-color:var(--wheat);color:var(--on-gold)}
.btn.gold:hover{background:var(--wheat-2)}
.btn.ghost{background:transparent}
.btn.sm{padding:7px 12px;font-size:12.5px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* status */
.pill{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.critical{color:var(--crit);background:var(--crit-soft)}
.pill.watch{color:var(--warn);background:var(--warn-soft)}
.pill.healthy,.pill.operational,.pill.on{color:var(--leaf);background:var(--leaf-soft)}
.pill.unchecked,.pill.off{color:var(--muted);background:rgba(139,152,184,.12)}
.pill.planned{color:var(--orbit);background:var(--orbit-soft)}
.pill.extended{color:var(--wheat);background:var(--wheat-soft)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:999px;background:var(--panel-3);color:var(--ink-2)}

/* surfaces */
.card{background:linear-gradient(180deg,var(--panel),var(--night-2));border:1px solid var(--line-soft);border-radius:var(--r)}

/* forms */
.field{display:grid;gap:6px}
.field label{font-size:12.5px;color:var(--ink-2);font-weight:600}
input,select,textarea{font:inherit;color:var(--ink);background:var(--night-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--orbit);box-shadow:0 0 0 3px var(--orbit-soft)}
textarea{min-height:90px;resize:vertical;font-family:var(--mono);font-size:12.5px}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:90;background:var(--ink);color:var(--night);font-weight:600;padding:11px 18px;border-radius:999px;box-shadow:var(--shadow);max-width:calc(100% - 32px);display:none}

/* motion */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}
@keyframes scan{0%,100%{opacity:.15}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* theme toggle */
.theme-btn{all:unset;cursor:pointer;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;color:var(--ink-2);border:1px solid var(--line);background:var(--panel);transition:background .2s,color .2s,transform .3s}
.theme-btn:hover{color:var(--wheat)}
.theme-btn:focus-visible{outline:2px solid var(--orbit);outline-offset:2px}
.theme-btn svg{width:18px;height:18px}
.theme-btn .moon{display:none}
:root[data-theme="light"] .theme-btn .sun{display:none}
:root[data-theme="light"] .theme-btn .moon{display:block}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .theme-btn .sun{display:none}:root:not([data-theme="dark"]) .theme-btn .moon{display:block}}
/* smooth cross-fade only while switching, so normal hovers keep their own timing */
.theme-swap,.theme-swap *{transition:background-color .35s,border-color .35s,color .35s,fill .35s,stroke .35s!important}