:root {
  --bg:            #e9eef8;
  --bg-deep:       #e2e8f4;
  --surface:       #eef2fa;
  --surface-hi:    #f4f7fc;

  --sh-dark:       #c5cddb;
  --sh-light:      #ffffff;

  --accent:        #1a73e8;
  --accent-soft:   #e3edfd;
  --accent-glow:   rgba(26, 115, 232, .28);

  --ink:           #0d1b2a;
  --ink-soft:      #46566b;
  --ink-mute:      #8b97a8;
  --ink-faint:     #a8b3c3;

  --ok:            #16a34a;
  --ok-soft:       #e4f6ea;
  --warn:          #d97706;
  --warn-soft:     #fdf0dd;
  --err:           #dc2626;
  --err-soft:      #fdeaea;

  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  28px;
  --r-pill: 999px;

  --e-1: 4px 4px 10px var(--sh-dark), -4px -4px 10px var(--sh-light);
  --e-2: 7px 7px 16px var(--sh-dark), -7px -7px 16px var(--sh-light);
  --e-3: 11px 11px 24px var(--sh-dark), -11px -11px 24px var(--sh-light);
  --in-1: inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light);
  --in-2: inset 5px 5px 11px var(--sh-dark), inset -5px -5px 11px var(--sh-light);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --flip: cubic-bezier(.68, -.55, .27, 1.55);
}

:root[data-theme="dark"] {
  --bg:            #222833;
  --bg-deep:       #1c212a;
  --surface:       #272e3a;
  --surface-hi:    #2d3543;
  --sh-dark:       #1a1f27;
  --sh-light:      #333c4c;
  --accent:        #5b9bf8;
  --accent-soft:   #2b3547;
  --accent-glow:   rgba(91, 155, 248, .3);
  --ink:           #eef2f8;
  --ink-soft:      #c2ccdb;
  --ink-mute:      #8e9bad;
  --ink-faint:     #6d7a8c;
  --ok-soft:       #1e3327;
  --warn-soft:     #3a2d18;
  --err-soft:      #3a2222;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; min-height: 100%; }

html {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
button, a, label, select, summary, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button:focus, a:focus, label:focus, select:focus { outline: none; }
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .3s var(--ease), color .3s var(--ease);
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--accent); text-decoration: none; }
svg { display: block; }

.bg-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bg-orbs span {
  position: absolute;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: var(--e-3);
  opacity: .85;
}
.bg-orbs span:nth-child(1) { width: 260px; height: 260px; top: -90px;  left: -80px; }
.bg-orbs span:nth-child(2) { width: 200px; height: 200px; top: -60px;  right: -70px; }
.bg-orbs span:nth-child(3) { width: 320px; height: 320px; bottom: -140px; left: -110px; }
.bg-orbs span:nth-child(4) { width: 180px; height: 180px; bottom: 12%; right: -80px; }

.nm-badge {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--e-2);
  margin: 0 auto;
  position: relative;
}
.nm-badge::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  box-shadow: var(--in-1);
  pointer-events: none;
}
.nm-badge > svg { position: relative; z-index: 1; }

.nm-field { margin-bottom: 14px; }

.nm-field > label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 6px 4px;
  letter-spacing: .2px;
}

.nm-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--in-1);
  transition: box-shadow .25s var(--ease);
}
.nm-input:focus-within { box-shadow: var(--in-2), 0 0 0 2px var(--accent-glow); }
.nm-input > svg { flex: none; color: var(--ink-soft); }

.nm-input input,
.nm-input select {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
  color: var(--ink);
}
.nm-input input::placeholder { color: var(--ink-faint); }
.nm-input select { cursor: pointer; appearance: none; -webkit-appearance: none; }

.nm-suffix {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  padding-left: 4px;
  white-space: nowrap;
}

.nm-eye {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--ink-mute);
  transition: color .2s var(--ease), box-shadow .2s var(--ease);
}
.nm-eye:hover { color: var(--accent); box-shadow: var(--e-1); }

.nm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--e-2);
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
}
.nm-btn:hover { box-shadow: var(--e-3); transform: translateY(-1px); }
.nm-btn:active { box-shadow: var(--in-2); transform: translateY(0); }
.nm-btn:disabled { color: var(--ink-faint); box-shadow: var(--in-1); cursor: not-allowed; transform: none; }

.nm-btn--sm{ height: 44px; font-size: 13px; letter-spacing: .8px; width: auto; padding: 0 20px; }
.nm-btn--ghost { color: var(--ink-soft); letter-spacing: .4px; text-transform: none; font-weight: 600; }

.nm-circle {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--e-1);
  color: var(--ink-soft);
  flex: none;
  transition: box-shadow .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.nm-circle:hover { box-shadow: var(--e-2); color: var(--accent); transform: translateY(-2px); }
.nm-circle:active { box-shadow: var(--in-1); transform: translateY(0); }
.nm-circle--accent { color: var(--accent); }
.nm-circle--sm { width: 38px; height: 38px; }

.nm-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-soft);
  user-select: none;
}
.nm-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.nm-check .box {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--surface);
  box-shadow: var(--in-1);
  flex: none;
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.nm-check .box svg { opacity: 0; transform: scale(.4); transition: opacity .2s var(--ease), transform .2s var(--flip); color: #fff; }
.nm-check input:checked + .box { background: var(--accent); box-shadow: var(--e-1); }
.nm-check input:checked + .box svg { opacity: 1; transform: scale(1); }
.nm-check input:focus-visible + .box { box-shadow: var(--in-1), 0 0 0 2px var(--accent-glow); }

.nm-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.nm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.nm-switch .track {
  position: relative;
  width: 50px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--in-1);
  transition: background .25s var(--ease);
  flex: none;
}
.nm-switch .track::after {
  content: '';
  position: absolute;
  top: 4px; left: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface-hi);
  box-shadow: var(--e-1);
  transition: transform .28s var(--flip), background .25s var(--ease);
}
.nm-switch input:checked + .track { background: var(--accent); }
.nm-switch input:checked + .track::after { transform: translateX(22px); background: #fff; }

.nm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--e-1);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}
.nm-pill--ok   { color: var(--ok);   background: var(--ok-soft); }
.nm-pill--warn { color: var(--warn); background: var(--warn-soft); }
.nm-pill--err  { color: var(--err);  background: var(--err-soft); }

.u-hidden { display: none !important; }
.u-row { display: flex; align-items: center; }
.u-gap { gap: 10px; }
.u-between { justify-content: space-between; }