/* Design tokens + shared components (app-matched)
   Used by landing. Exo 2 loaded via HTML.
*/
:root {
  --font-enterprise: "Exo 2", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bg: linear-gradient(135deg, var(--bg1), var(--bg2));
  --panelBg: rgba(255,255,255,.04);
  --panelBg2: rgba(255,255,255,.06);
  --panelStroke: rgba(255,255,255,.10);
  --btnBg: rgba(255,255,255,.06);
  --btnBgHover: rgba(255,255,255,.09);
  --shadow: 0 20px 60px rgba(0,0,0,.35);
  --focus: rgba(0,255,200,.35);
  --bg1: #071024;
  --bg2: #2b0a3a;
  --glass: rgba(255,255,255,.06);
  --glass2: rgba(255,255,255,.085);
  --stroke: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --muted2: rgba(255,255,255,.45);
  --radius: 16px;
  --fs-h1: 26px;
  --fs-h2: 16px;
  --fs-h3: 14px;
  --lh-tight: 1.15;
  --lh-base: 1.35;
  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 14px;
  --space-lg: 18px;
  --link: rgba(0,255,200,.92);
  --linkHover: rgba(0,255,200,1);
  --chipBg: rgba(255,255,255,.04);
  --chipBgHover: rgba(255,255,255,.07);
  --chipBorder: rgba(255,255,255,.12);
}

html[data-theme="light"] {
  --bg1: #e9edf6;
  --bg2: #e3e8f4;
  --glass: rgba(18,24,40,.06);
  --glass2: rgba(18,24,40,.08);
  --stroke: rgba(15,23,42,.16);
  --text: rgba(12,18,33,.92);
  --muted: rgba(15,23,42,.68);
  --muted2: rgba(15,23,42,.50);
  --panelBg: rgba(255,255,255,.78);
  --panelBg2: rgba(255,255,255,.62);
  --panelStroke: rgba(15,23,42,.14);
  --btnBg: rgba(18,24,40,.06);
  --btnBgHover: rgba(18,24,40,.09);
  --shadow: 0 16px 40px rgba(15,23,42,.12);
  --focus: rgba(0,140,255,.35);
  --link: rgba(2,132,199,.98);
  --linkHover: rgba(3,105,161,.98);
  --chipBg: rgba(255,255,255,.70);
  --chipBgHover: rgba(255,255,255,.92);
  --chipBorder: rgba(15,23,42,.16);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; line-height: var(--lh-tight); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); font-weight: 900; }
h3 { font-size: var(--fs-h3); font-weight: 900; }

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-enterprise);
  color: var(--text);
  background:
    radial-gradient(1200px 900px at 20% 25%, rgba(0,140,255,.18), transparent 55%),
    radial-gradient(1000px 800px at 85% 25%, rgba(163,72,255,.16), transparent 55%),
    radial-gradient(900px 900px at 60% 75%, rgba(20,20,40,.40), transparent 55%),
    var(--bg);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}
html[data-theme="light"] body {
  background:
    radial-gradient(1200px 900px at 18% 20%, rgba(2,132,199,.12), transparent 58%),
    radial-gradient(1100px 900px at 88% 22%, rgba(124,58,237,.10), transparent 58%),
    radial-gradient(1000px 900px at 60% 85%, rgba(15,23,42,.10), transparent 60%),
    var(--bg);
}

.block { margin-top: 16px; }
.blockTitle {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted2);
  margin: 10px 2px 10px;
}

.envRow {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 12px;
  scroll-behavior: smooth;
}
.envRow > .envCard { flex-shrink: 0; flex-grow: 0; }

.envCard {
  display: flex;
  flex-direction: column;
  min-width: 230px;
  max-width: 230px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid var(--panelStroke);
  background: var(--panelBg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: .12s ease;
  overflow: visible;
}
.envCard:hover { background: rgba(255,255,255,.06); }
.envCard.selected {
  border-color: rgba(0,255,200,.25);
  box-shadow: 0 0 0 1px rgba(0,255,200,.12) inset;
}
html[data-theme="light"] .envCard { background: rgba(255,255,255,.92); border-color: rgba(18,24,40,.10); }
html[data-theme="light"] .envCard:hover { background: rgba(255,255,255,.96); }
html[data-theme="light"] .envCard.selected { border-color: rgba(2,132,199,.26); box-shadow: 0 0 0 1px rgba(2,132,199,.1) inset; }

.envTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  overflow: visible;
  min-height: 28px;
}
.envTop .envName {
  flex: 0 0 auto;
  min-width: 50px;
  white-space: nowrap;
  line-height: 1.2;
  margin: 0;
  font-weight: 900;
  font-size: 18px;
}
.envTop > .pill { flex-shrink: 0; flex-grow: 0; align-self: center; }
.envLines { margin-top: 10px; display: grid; gap: 6px; }
.line { font-size: 12px; color: rgba(255,255,255,.82); }
html[data-theme="light"] .line { color: rgba(12,18,33,.82); }

.pill {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  white-space: nowrap;
}
.pill.ddPill { padding: 3px 8px; font-size: 11px; line-height: 1; letter-spacing: .2px; opacity: .95; }
.pill.ddOk { border-color: rgba(45,212,191,.28); color: rgba(45,212,191,.95); background: rgba(45,212,191,.10); }
.pill.ddDeg { border-color: rgba(59,130,246,.28); color: rgba(59,130,246,.95); background: rgba(59,130,246,.10); }
.pill.ddAlert { border-color: rgba(244,63,94,.28); color: rgba(244,63,94,.95); background: rgba(244,63,94,.10); }
.pill.ddUnknown { border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.85); background: rgba(255,255,255,.06); }
.pill.healthy { border-color: rgba(0,255,200,.28); color: rgba(0,255,200,.95); background: rgba(0,255,200,.08); }
.pill.warn { border-color: rgba(255,200,0,.28); color: rgba(255,200,0,.95); background: rgba(255,200,0,.08); }
.pill.unknown { border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.85); }
html[data-theme="light"] .pill.healthy { background: rgba(5,122,85,.10); border-color: rgba(5,122,85,.28); color: rgba(5,122,85,.95); }
html[data-theme="light"] .pill.warn { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.24); color: rgba(180,83,9,.95); }
html[data-theme="light"] .pill.ddOk { background: rgba(45,212,191,.12); border-color: rgba(45,212,191,.26); color: rgba(13,148,136,.95); }
html[data-theme="light"] .pill.ddUnknown { background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.16); color: rgba(15,23,42,.70); }

.panel {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--panelStroke);
  background: var(--panelBg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.panelTop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panelTitle { margin: 0; font-weight: 900; }
.panelMeta { font-size: 12px; color: var(--muted); margin-top: 4px; }
html[data-theme="light"] .panel { background: rgba(255,255,255,.92); border-color: rgba(18,24,40,.10); }
html[data-theme="light"] .panelMeta { color: var(--muted); }

.muted { color: var(--muted); }
.mono { font-variant-numeric: tabular-nums; }