/* UnyKorn brand layer (2026-09-30). Loaded LAST so it wins over app.css / morpho-frost.css.
   Tokens match unykorn.ai and unykornenergy.com: graphite + steel + orange, Gate Mark logo. */
:root {
  --uk-graphite: #0b0f14;
  --uk-graphite-2: #141b24;
  --uk-graphite-3: #1c2531;
  --uk-steel: #8b97a5;
  --uk-steel-2: #c9d1da;
  --uk-steel-3: #e7ecf1;
  --uk-orange: #e8731c;
  --uk-orange-2: #ff9a3d;
  --btn-primary-bg: var(--uk-orange);
  --btn-primary-text: #fff;
}

/* ---------- buttons: one orange primary, quiet secondaries (was a purple-blue-red rainbow on every button) ---------- */
.btn, .btn--primary, button.primary, .btn-primary, [data-primary] {
  background: linear-gradient(180deg, var(--uk-orange-2) 0%, var(--uk-orange) 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 24px -12px rgba(232, 115, 28, .7) !important;
  font-weight: 600;
}
.btn:hover, .btn--primary:hover { filter: brightness(1.05); }
.btn--secondary, .btn--ghost, .btn.ghost, .btn.line {
  background: #fff !important;
  color: var(--uk-graphite) !important;
  border: 1px solid #d5dce4 !important;
  box-shadow: none !important;
}
.btn--secondary:hover, .btn--ghost:hover, .btn.ghost:hover { border-color: var(--uk-orange) !important; color: var(--uk-orange) !important; }
.btn:disabled, .btn--primary:disabled { opacity: .45 !important; filter: none; }

/* active tab in the bottom bar: orange, not purple */
nav button.on, .tab-bar__btn.on, .tab-bar__btn[aria-current="page"] {
  background: rgba(232, 115, 28, .12) !important;
  color: var(--uk-orange) !important;
  box-shadow: none !important;
}

/* ---------- every popup: centered, graphite scrim ---------- */
.modal-overlay {
  position: fixed !important; inset: 0 !important; z-index: 9999 !important;
  display: grid !important; place-items: center !important; padding: 16px !important;
  background: rgba(11, 15, 20, .72) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.modal-overlay > .modal { width: min(420px, 100%); border-radius: 20px !important; }

/* ---------- lock screen: full-screen, branded (passcode create / unlock) ---------- */
.modal-overlay.uk-lock {
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(232, 115, 28, .30), transparent 55%),
    radial-gradient(90% 60% at 0% 100%, rgba(255, 154, 61, .10), transparent 60%),
    linear-gradient(160deg, #141b24 0%, #0b0f14 60%, #07090c 100%) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.uk-lock > .modal {
  background: rgba(20, 27, 36, .86) !important;
  border: 1px solid rgba(201, 209, 218, .14) !important;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7) !important;
  color: var(--uk-steel-3) !important;
  padding: 26px 22px 22px !important;
  text-align: left;
}
.uk-lock .uk-lock-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.uk-lock .uk-lock-brand img { width: 44px; height: 44px; }
.uk-lock .uk-lock-brand b { display: block; font-weight: 800; letter-spacing: .22em; font-size: 15px; color: #fff; }
.uk-lock .uk-lock-brand small { display: block; font-size: 10px; letter-spacing: .18em; color: var(--uk-orange-2); text-transform: uppercase; margin-top: 2px; }
.uk-lock h3 { color: #fff !important; font-size: 22px !important; margin: 0 0 6px !important; }
.uk-lock .muted, .uk-lock p { color: var(--uk-steel-2) !important; }
.uk-lock input {
  background: #0b0f14 !important; color: #fff !important;
  border: 1px solid rgba(201, 209, 218, .22) !important; outline: none;
}
.uk-lock input::placeholder { color: var(--uk-steel) !important; }
.uk-lock input:focus { border-color: var(--uk-orange) !important; box-shadow: 0 0 0 3px rgba(232, 115, 28, .25) !important; }
.uk-lock .btn--ghost { background: transparent !important; color: var(--uk-steel-2) !important; border-color: rgba(201, 209, 218, .22) !important; }
.uk-lock .say { color: var(--uk-orange-2) !important; }
.uk-lock .uk-lock-foot { margin-top: 14px; font-size: 11px; color: var(--uk-steel) !important; text-align: center; }