/* EFM design tokens. Everything visual references these variables.
   Change a colour here, it changes everywhere. */

:root {
  --efm:      #008bd2;
  --efm-dark: #006a9f;
  --efm-soft: rgba(0, 139, 210, .14);

  --bg:      #06111b;
  --panel:   #0b1d2b;
  --panel2:  #0f2637;
  --text:    #e9f6ff;
  --muted:   #8da9bc;
  --line:    #244154;

  --ok:   #1fca76;
  --bad:  #ff5f6d;
  --warn: #f0b84b;

  --shadow: 0 14px 36px rgba(0, 0, 0, .28);

  /* Environment accent — orange for dev so you can never confuse
     the two servers by accident. */
  --env-dev-accent:  #ff9e2c;
  --env-live-accent: #1fca76;
}

html[data-theme="light"] {
  --bg:     #edf5fa;
  --panel:  #ffffff;
  --panel2: #f5fbff;
  --text:   #0b2535;
  --muted:  #587386;
  --line:   #c8dce8;
  --shadow: 0 10px 28px rgba(14, 57, 82, .12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

body { overflow-x: hidden; }

button, input, select { font: inherit; }

button {
  border: 1px solid var(--efm);
  background: var(--efm);
  color: #fff;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
  transition: .18s;
}
button:hover  { filter: brightness(1.1); transform: translateY(-1px); }
button:disabled {
  opacity: .38; cursor: not-allowed;
  transform: none; filter: none;
}

.outline {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.icon-btn {
  padding: 8px 10px;
  background: transparent;
  border-color: var(--line);
}

input, select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  border-radius: 7px;
  padding: 10px 11px;
  outline: none;
}
input:focus, select:focus {
  border-color: var(--efm);
  box-shadow: 0 0 0 3px rgba(0, 139, 210, .16);
}

.ok   { color: var(--ok)   !important; }
.bad  { color: var(--bad)  !important; }
.wait { color: var(--warn) !important; }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
}

.eyebrow {
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--muted);
  display: block;
}

.empty {
  color: var(--muted);
  margin: 8px 0;
}