@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;400;500;700&display=swap");

*,
*::after,
*::before {
  box-sizing: inherit
}

html,
body,
div,
span,
object,
h1,
p,
a,
address,
img,
s,
var,
b,
i,
ul,
li,
form,
label,
header,
menu,
nav {
  margin: 0;
  padding: 0;
  border: 0
}

html {
  box-sizing: border-box
}

body {
  background-color: var(--color-bg)
}

header,
menu,
nav,
main {
  display: block
}

ul {
  list-style: none
}

.modal__block[data-type="signup"] {
    min-width: 560px;
}

@media (max-width: 560px) {
  #signup-form [style*="grid-template-columns"] {
    display: block !important;
  }

  #signup-form [style*="grid-template-columns"] > div {
    margin-bottom: 14px;
  }

  .modal__block[data-type="signup"] {
    min-width: unset !important;
    width: 100% !important;
    padding: 16px !important;
  }
}

button,
input {
  margin: 0
}

.btn,
.form-control,
.link,
.reset {
  background-color: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}

input::-ms-clear {
  display: none
}

img,
svg {
  max-width: 100%
}

:root {
  --space-unit: 1em
}

:root,
* {
  --space-xxxxs: calc(0.125 * var(--space-unit));
  --space-xxxs: calc(0.25 * var(--space-unit));
  --space-xxs: calc(0.375 * var(--space-unit));
  --space-xs: calc(0.5 * var(--space-unit));
  --space-sm: calc(0.75 * var(--space-unit));
  --space-md: calc(1.25 * var(--space-unit));
  --space-lg: calc(2 * var(--space-unit));
  --space-xl: calc(3.25 * var(--space-unit));
  --space-xxl: calc(5.25 * var(--space-unit));
  --space-xxxl: calc(8.5 * var(--space-unit));
  --space-xxxxl: calc(13.75 * var(--space-unit));
  --component-padding: var(--space-md)
}

[class*="gap-xxs"] {
  margin-bottom: -0.75em;
  margin-left: -0.75em
}

[class*="gap-xxs"]>* {
  margin-bottom: 0.75em;
  margin-left: 0.75em
}

@supports (--css: variables) {
  .flex[class*="gap-"] {
    margin-bottom: calc(-1 * var(--gap-y, 0));
    margin-left: calc(-1 * var(--gap-x, 0))
  }

  .flex[class*="gap-"]>* {
    margin-bottom: var(--gap-y, 0);
    margin-left: var(--gap-x, 0)
  }

  .gap-xxs {
    --gap-x: var(--space-xxs);
    --gap-y: var(--space-xxs)
  }
}

@media (min-width: 32rem) {}

@media (min-width: 48rem) {}

@media (min-width: 64rem) {}

@media (min-width: 80rem) {}

@media (min-width: 90rem) {}

:root {
  --radius-sm: calc(var(--radius, 0.25em)/2);
  --radius-md: var(--radius, 0.25em);
  --radius-lg: calc(var(--radius, 0.25em)*2);
  --shadow-xs: 0 0.1px 0.3px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 0.3px 0.4px rgba(0, 0, 0, 0.025),
    0 0.9px 1.5px rgba(0, 0, 0, 0.05),
    0 3.5px 6px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 0.9px 1.5px rgba(0, 0, 0, 0.03),
    0 3.1px 5.5px rgba(0, 0, 0, 0.08),
    0 14px 25px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 1.2px 1.9px -1px rgba(0, 0, 0, 0.014),
    0 3.3px 5.3px -1px rgba(0, 0, 0, 0.038),
    0 8.5px 12.7px -1px rgba(0, 0, 0, 0.085),
    0 30px 42px -1px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 1.5px 2.1px -6px rgba(0, 0, 0, 0.012),
    0 3.6px 5.2px -6px rgba(0, 0, 0, 0.035),
    0 7.3px 10.6px -6px rgba(0, 0, 0, 0.07),
    0 16.2px 21.9px -6px rgba(0, 0, 0, 0.117),
    0 46px 60px -6px rgba(0, 0, 0, 0.2);
  --bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --interactive-glow: rgba(107, 208, 255, 0.22);
  --interactive-glow-strong: rgba(155, 226, 255, 0.35)
}

:root {
  --heading-line-height: 1.2;
  --body-line-height: 1.4
}

body {
  font-size: var(--text-base-size, 1em);
  font-family: var(--font-primary, sans-serif);
  color: var(--color-contrast-high, #e3e3e3)
}

h1 {
  color: var(--color-contrast-higher, #fff);
  line-height: var(--heading-line-height, 1.2)
}

h1 {
  font-size: var(--text-xxl, 2.074em)
}

a,
.link {
  color: var(--color-primary, #2a6df4);
  text-decoration: none
}

s {
  text-decoration: line-through
}

.text-component h1 {
  line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1));
  margin-bottom: calc(var(--space-unit) * 0.25 * var(--text-vspace-multiplier, 1))
}

.text-component p,
.text-component ul li {
  line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1))
}

.text-component ul,
.text-component p {
  margin-bottom: calc(var(--space-unit) * 0.75 * var(--text-vspace-multiplier, 1))
}

.text-component ul {
  list-style-position: inside
}

.text-component ul {
  list-style-type: disc
}

.text-component img {
  display: block;
  margin: 0 auto
}

.text-component>*:first-child {
  margin-top: 0
}

.text-component>*:last-child {
  margin-bottom: 0
}

:root {
  --icon-xxxs: 8px;
  --icon-xxs: 12px;
  --icon-xs: 16px;
  --icon-sm: 24px;
  --icon-md: 32px;
  --icon-lg: 48px;
  --icon-xl: 64px;
  --icon-xxl: 96px;
  --icon-xxxl: 128px
}

.icon {
  --size: 1em;
  display: inline-block;
  color: inherit;
  fill: currentColor;
  height: var(--size);
  width: var(--size);
  line-height: 1;
  flex-shrink: 0;
  max-width: initial
}

@keyframes icon-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

.btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  font-size: var(--btn-font-size, 1em);
  padding-top: var(--btn-padding-y, 0.5em);
  padding-bottom: var(--btn-padding-y, 0.5em);
  padding-left: var(--btn-padding-x, 0.75em);
  padding-right: var(--btn-padding-x, 0.75em);
  border-radius: var(--btn-radius, 0.25em)
}

.btn--md {
  font-size: var(--btn-font-size-md, 1.2em)
}

.form-control {
  font-size: var(--form-control-font-size, 1em);
  padding-top: var(--form-control-padding-y, 0.25em);
  padding-bottom: var(--form-control-padding-y, 0.25em);
  padding-left: var(--form-control-padding-x, 0.5em);
  padding-right: var(--form-control-padding-x, 0.5em);
  border-radius: var(--form-control-radius, 0.25em)
}

.form-label {
  display: inline-block
}

:root {
  --zindex-header: 3;
  --zindex-popover: 5;
  --zindex-fixed-element: 10;
  --zindex-overlay: 15
}

:root {
  --display: block
}

.sr-only {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  white-space: nowrap
}

.flex {
  display: flex
}

.flex-center {
  justify-content: center;
  align-items: center
}

.justify-center {
  justify-content: center
}

.block {
  display: block
}

.margin-bottom-sm {
  margin-bottom: var(--space-sm)
}

.margin-bottom-lg {
  margin-bottom: var(--space-lg)
}

.margin-bottom-xl {
  margin-bottom: var(--space-xl)
}

.margin-y-md {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md)
}

.padding-top-sm {
  padding-top: var(--space-sm)
}

.padding-x-xs {
  padding-left: var(--space-xs);
  padding-right: var(--space-xs)
}

.padding-y-xxs {
  padding-top: var(--space-xxs);
  padding-bottom: var(--space-xxs)
}

.text-sm {
  font-size: var(--text-sm, 0.833em)
}

.font-normal {
  font-weight: 400
}

.text-center {
  text-align: center
}

[class^="color-"] {
  --color-o: 1
}

.color-contrast-medium {
  color: hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), var(--color-o, 1))
}

.width-50\% {
  width: 50%
}

.width-100\% {
  width: 100%
}

:root {
  --max-width-xxxxs: 20rem;
  --max-width-xxxs: 26rem;
  --max-width-xxs: 32rem;
  --max-width-xs: 38rem;
  --max-width-sm: 48rem;
  --max-width-md: 64rem;
  --max-width-lg: 80rem;
  --max-width-xl: 90rem;
  --max-width-xxl: 100rem;
  --max-width-xxxl: 120rem;
  --max-width-xxxxl: 150rem
}

.float-right {
  float: right
}

.visible {
  visibility: visible
}

.hidden {
  visibility: hidden
}

:root {
  --color-primary-darker: hsl(201, 65%, 42%);
  --color-primary-darker-h: 201;
  --color-primary-darker-s: 65%;
  --color-primary-darker-l: 42%;
  --color-primary-dark: hsl(201, 65%, 52%);
  --color-primary-dark-h: 201;
  --color-primary-dark-s: 65%;
  --color-primary-dark-l: 52%;
  --color-primary: hsl(201, 65%, 62%);
  --color-primary-h: 201;
  --color-primary-s: 65%;
  --color-primary-l: 62%;
  --color-primary-light: hsl(201, 65%, 72%);
  --color-primary-light-h: 201;
  --color-primary-light-s: 65%;
  --color-primary-light-l: 72%;
  --color-primary-lighter: hsl(201, 65%, 82%);
  --color-primary-lighter-h: 201;
  --color-primary-lighter-s: 65%;
  --color-primary-lighter-l: 82%;
  --color-accent-darker: hsl(358, 97%, 43%);
  --color-accent-darker-h: 358;
  --color-accent-darker-s: 97%;
  --color-accent-darker-l: 43%;
  --color-accent-dark: hsl(358, 97%, 53%);
  --color-accent-dark-h: 358;
  --color-accent-dark-s: 97%;
  --color-accent-dark-l: 53%;
  --color-accent: hsl(358, 97%, 63%);
  --color-accent-h: 358;
  --color-accent-s: 97%;
  --color-accent-l: 63%;
  --color-accent-light: hsl(358, 97%, 73%);
  --color-accent-light-h: 358;
  --color-accent-light-s: 97%;
  --color-accent-light-l: 73%;
  --color-accent-lighter: hsl(358, 97%, 83%);
  --color-accent-lighter-h: 358;
  --color-accent-lighter-s: 97%;
  --color-accent-lighter-l: 83%;
  --color-secondary-darker: hsl(165, 2%, 24%);
  --color-secondary-darker-h: 165;
  --color-secondary-darker-s: 2%;
  --color-secondary-darker-l: 24%;
  --color-secondary-dark: hsl(165, 2%, 34%);
  --color-secondary-dark-h: 165;
  --color-secondary-dark-s: 2%;
  --color-secondary-dark-l: 34%;
  --color-secondary: hsl(165, 2%, 44%);
  --color-secondary-h: 165;
  --color-secondary-s: 2%;
  --color-secondary-l: 44%;
  --color-secondary-light: hsl(165, 2%, 54%);
  --color-secondary-light-h: 165;
  --color-secondary-light-s: 2%;
  --color-secondary-light-l: 54%;
  --color-secondary-lighter: hsl(165, 2%, 64%);
  --color-secondary-lighter-h: 165;
  --color-secondary-lighter-s: 2%;
  --color-secondary-lighter-l: 64%;
  --color-warning-darker: hsl(46, 100%, 41%);
  --color-warning-darker-h: 46;
  --color-warning-darker-s: 100%;
  --color-warning-darker-l: 41%;
  --color-warning-dark: hsl(46, 100%, 51%);
  --color-warning-dark-h: 46;
  --color-warning-dark-s: 100%;
  --color-warning-dark-l: 51%;
  --color-warning: hsl(46, 100%, 61%);
  --color-warning-h: 46;
  --color-warning-s: 100%;
  --color-warning-l: 61%;
  --color-warning-light: hsl(46, 100%, 71%);
  --color-warning-light-h: 46;
  --color-warning-light-s: 100%;
  --color-warning-light-l: 71%;
  --color-warning-lighter: hsl(46, 100%, 81%);
  --color-warning-lighter-h: 46;
  --color-warning-lighter-s: 100%;
  --color-warning-lighter-l: 81%;
  --color-success-darker: hsl(94, 48%, 36%);
  --color-success-darker-h: 94;
  --color-success-darker-s: 48%;
  --color-success-darker-l: 36%;
  --color-success-dark: hsl(94, 48%, 46%);
  --color-success-dark-h: 94;
  --color-success-dark-s: 48%;
  --color-success-dark-l: 46%;
  --color-success: hsl(94, 48%, 56%);
  --color-success-h: 94;
  --color-success-s: 48%;
  --color-success-l: 56%;
  --color-success-light: hsl(94, 48%, 66%);
  --color-success-light-h: 94;
  --color-success-light-s: 48%;
  --color-success-light-l: 66%;
  --color-success-lighter: hsl(94, 48%, 76%);
  --color-success-lighter-h: 94;
  --color-success-lighter-s: 48%;
  --color-success-lighter-l: 76%;
  --color-error-darker: hsl(358, 97%, 43%);
  --color-error-darker-h: 358;
  --color-error-darker-s: 97%;
  --color-error-darker-l: 43%;
  --color-error-dark: hsl(358, 97%, 53%);
  --color-error-dark-h: 358;
  --color-error-dark-s: 97%;
  --color-error-dark-l: 53%;
  --color-error: hsl(358, 97%, 63%);
  --color-error-h: 358;
  --color-error-s: 97%;
  --color-error-l: 63%;
  --color-error-light: hsl(358, 97%, 73%);
  --color-error-light-h: 358;
  --color-error-light-s: 97%;
  --color-error-light-l: 73%;
  --color-error-lighter: hsl(358, 97%, 83%);
  --color-error-lighter-h: 358;
  --color-error-lighter-s: 97%;
  --color-error-lighter-l: 83%;
  --color-contrast-lower: hsl(240, 6%, 19%);
  --color-contrast-lower-h: 240;
  --color-contrast-lower-s: 6%;
  --color-contrast-lower-l: 19%;
  --color-contrast-low: hsl(240, 3%, 27%);
  --color-contrast-low-h: 240;
  --color-contrast-low-s: 3%;
  --color-contrast-low-l: 27%;
  --color-contrast-medium: hsl(240, 1%, 57%);
  --color-contrast-medium-h: 240;
  --color-contrast-medium-s: 1%;
  --color-contrast-medium-l: 57%;
  --color-contrast-high: hsl(0, 0%, 89%);
  --color-contrast-high-h: 0;
  --color-contrast-high-s: 0%;
  --color-contrast-high-l: 89%;
  --color-contrast-higher: hsl(0, 0%, 100%);
  --color-contrast-higher-h: 0;
  --color-contrast-higher-s: 0%;
  --color-contrast-higher-l: 100%;
  --color-bg: hsl(240, 8%, 12%);
  --color-bg-h: 240;
  --color-bg-s: 8%;
  --color-bg-l: 12%;
  --color-black: hsl(240, 8%, 12%);
  --color-black-h: 240;
  --color-black-s: 8%;
  --color-black-l: 12%;
  --color-white: hsl(0, 0%, 100%);
  --color-white-h: 0;
  --color-white-s: 0%;
  --color-white-l: 100%;
  --color-1: hsl(209, 42%, 23%);
  --color-1-h: 209;
  --color-1-s: 42%;
  --color-1-l: 23%;
  --color-2: hsl(203, 79%, 44%);
  --color-2-h: 203;
  --color-2-s: 79%;
  --color-2-l: 44%
}

:root {
  --radius: 0.5em
}

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

*:focus {
  outline: 0
}

*::-moz-focus-inner {
  border: 0
}

html,
body {
  height: 100%;
  font-size: 100%;
  font-family: var(--font-primary);
  background-color: var(--color-1);
  -webkit-font-smoothing: antialiased;
  overflow: hidden
}

a {
  color: var(--color-2);
  text-decoration: none
}

::-webkit-scrollbar {
  width: 0px;
  background: transparent
}

:root {
  --font-primary: 'Titillium Web', sans-serif;
  --text-base-size: 1em;
  --text-scale-ratio: 1.2;
  --heading-line-height: 2;
  --body-line-height: 1.25
}

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

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

html,
body {
  height: 100%
}

body {
  min-height: 100vh;
  background: url("../img/bg.gif");
  background-position: top;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat
}

a,
.link {
  text-decoration: none;
  color: var(--color-2)
}

a,
.link,
.btn,
button,
.nav-trigger,
.password__btn,
.nav__list .nav__item a,
.nav__sub-list a,
.side-nav a,
.js-modal-trigger {
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, color 0.2s ease, background-color 0.2s ease
}

a:hover,
a:focus-visible,
.link:hover,
.link:focus-visible,
.nav__list .nav__item a:hover,
.nav__list .nav__item a:focus-visible,
.nav__sub-list a:hover,
.nav__sub-list a:focus-visible,
.side-nav a:hover,
.side-nav a:focus-visible,
.js-modal-trigger:hover,
.js-modal-trigger:focus-visible {
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 12px rgba(155, 226, 255, 0.95), 0 0 22px rgba(107, 208, 255, 0.7);
  filter: drop-shadow(0 0 10px rgba(155, 226, 255, 0.85)) drop-shadow(0 0 16px rgba(107, 208, 255, 0.55))
}

.nav__sub-link--glow:hover,
.nav__sub-link--glow:focus-visible {
  color: #fff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 12px rgba(155, 226, 255, 0.95), 0 0 22px rgba(107, 208, 255, 0.7);
  filter: drop-shadow(0 0 10px rgba(155, 226, 255, 0.85)) drop-shadow(0 0 16px rgba(107, 208, 255, 0.55));
}

button:hover,
button:focus-visible {
  filter: drop-shadow(0 0 10px var(--interactive-glow));
  transform: translateY(-1px)
}

*:focus {
  outline: 0
}

*::-moz-focus-inner {
  border: 0
}

:root {
  --btn-padding-y: var(--space-xxs);
  --btn-padding-x: var(--space-sm);
  --btn-radius: 0.25em;
  --btn-font-size: 1em
}

.btn {
  font-family: 'Titillium Web', sans-serif;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 0 4px 20px hsla var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 50em;
  transition: transform 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s, filter 0.2s, -webkit-transform 0.2s;
  transition: transform 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s, filter 0.2s;
  transition: transform 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s, filter 0.2s, -webkit-transform 0.2s
}

.btn:hover {
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--interactive-glow-strong), 0 0 18px var(--interactive-glow), var(--shadow-sm);
  filter: brightness(1.05)
}

.btn:focus {
  box-shadow: 0px 0px 0px 2px hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.15), 0 0 18px var(--interactive-glow)
}

.btn:active {
  -webkit-transform: translateY(2px);
  transform: translateY(2px)
}

.btn--primary {
  background-color: var(--color-primary-darker);
  color: var(--color-white)
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  box-shadow: 0 0 0 1px rgba(155, 226, 255, 0.95), 0 0 16px rgba(107, 208, 255, 0.9), 0 0 30px rgba(69, 175, 255, 0.55)
}

.btn--primary:focus {
  box-shadow: 0px 0px 0px 2px rgba(155, 226, 255, 0.85), 0 0 18px rgba(107, 208, 255, 0.7)
}

#login-form .btn--primary:hover,
#login-form .btn--primary:focus-visible,
#signup-form .btn--primary:hover,
#signup-form .btn--primary:focus-visible {
  box-shadow: 0 0 0 1px rgba(155, 226, 255, 0.95), 0 0 18px rgba(107, 208, 255, 0.95), 0 0 34px rgba(69, 175, 255, 0.6)
}

.portal-submit-button {
  min-width: 15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.btn--md {
  font-size: 1.2em
}

.form-control {
  background: var(--color-bg);
  border: 1px solid var(--color-contrast-medium);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: all 0.2s ease
}

.form-control::-webkit-input-placeholder {
  letter-spacing: 0.1em;
  opacity: 1;
  color: var(--color-contrast-medium)
}

.form-control::-moz-placeholder {
  letter-spacing: 0.1em;
  opacity: 1;
  color: var(--color-contrast-medium)
}

.form-control:-ms-input-placeholder {
  letter-spacing: 0.1em;
  opacity: 1;
  color: var(--color-contrast-medium)
}

.form-control::-ms-input-placeholder {
  letter-spacing: 0.1em;
  opacity: 1;
  color: var(--color-contrast-medium)
}

.form-control::placeholder {
  letter-spacing: 0.1em;
  opacity: 1;
  color: var(--color-contrast-medium)
}

.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0px 0px 0px 2px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
  outline: none
}

.form-control.form-control--error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 2px hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), 0.22);
}

.form-control.form-control--error:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 2px hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), 0.28);
}

.form-label {
  color: var(--color-contrast-medium);
  font-family: var(--font-primary);
  font-size: var(--form-control-font-size, 1em);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-xxs)
}

:root {
  --header-height: 45px;
  --sidebar-width: 100%;
  --font-primary: 'Titillium Web', sans-serif
}

@supports (--css: variables) {
  @media (min-width: 48rem) {
    :root {
      --header-height: 55px;
      --sidebar-width: 260px
    }
  }
}

body {
  min-height: 100vh;
  /*background: url("../img/bg.gif");*/
  background-position: top;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat
}

.main-header {
  position: relative;
  z-index: var(--zindex-fixed-element);
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.main-header a {
  text-decoration: none;
  line-height: 2em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500
}

.logo-wrapper {
  flex-shrink: 0;
  margin: 4px 0 0 .75em;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transform: scale(0.8);
  transform: scale(0.8)
}

.logo-wrapper::after {
  display: none;
  content: 'mobile'
}

@media (min-width: 48rem) {
  .logo-wrapper {
    display: flex;
    margin: 10px 0 0 1em;
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  .logo-wrapper::after {
    content: 'desktop'
  }
}

.top-nav {
  align-items: center;
  display: flex;
  text-align: center
}

.nav__list {
  display: none;
  opacity: 0;
  visibility: hidden
}

@media (min-width: 48rem) {
  .nav__list {
    display: flex;
    opacity: 1;
    visibility: visible;
    align-items: center;
    height: var(--header-height)
  }
}

.nav__list .nav__item {
  margin-left: auto;
  display: inline-block;
  align-items: center;
  height: var(--header-height);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  padding: 0 var(--space-xs);
  line-height: 1.2
}

.nav__list .nav__item a {
  display: flex;
  align-items: center;
  height: var(--header-height);
  color: var(--color-white);
  text-align: center;
  padding: 0 var(--space-xxxs);
  border: none;
  transition: all 0.2s ease
}

.top-nav .nav__list .nav__item a,
.top-nav .nav__item--account > a,
.top-nav .nav-trigger {
  position: relative;
}

/* Auth Icon Dropdown section */

/*Dropdown Animation keyframes */
@keyframes growDown {
  0% {
    transform: scaleY(0)
  }
  80% {
    transform: scaleY(1.1)
  }
  100% {
    transform: scaleY(1)
  }
}


.nav__list .nav__item a:hover {
  color: var(--color-2);
  text-shadow: 0 0 10px var(--interactive-glow-strong);
  filter: drop-shadow(0 0 10px var(--interactive-glow))
}

.top-nav .nav__list .nav__item a:hover,
.top-nav .nav__list .nav__item a:focus-visible {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 1), 0 0 14px rgba(155, 226, 255, 1), 0 0 28px rgba(107, 208, 255, 0.85);
  filter: drop-shadow(0 0 12px rgba(155, 226, 255, 0.95)) drop-shadow(0 0 20px rgba(107, 208, 255, 0.65));
  transform: none
}

.nav__item--account {
  position: relative;
}

.nav__item--account img, 
.nav__item--account svg{
  color: var(--color-white);
  display: flex;
  padding: auto 0;
  text-align: center;
  filter: brightness(0) invert(1);
  width: 2em;
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease
}

.top-nav .nav__item--account > a:hover img,
.top-nav .nav__item--account > a:focus-visible img {
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.75)) drop-shadow(0 0 12px rgba(155, 226, 255, 0.7)) drop-shadow(0 0 18px rgba(107, 208, 255, 0.45));
}

.nav__item--account.loggedin:hover .nav__sub-list {
  display: block;
}

.nav__sub-list--clicked {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
}

.nav__item--account .nav__sub-list {
  right: -50px;
  border: 1px solid black;
  text-align: left;
  position: absolute;
  /*top: var(--header-height);*/
  z-index: var(--zindex-header);
  perspective: 1000;
  width: 200px;
  background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0.666);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-clip: padding-box;
  animation: growDown 300ms ease-in-out forwards;
  transform-origin: top center;
  /*border-left: 2.5em solid hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0.333);*/
  display: none
}

.nav__sub-list a:hover {
  color: #fff;
  text-shadow: 0 0 10px var(--interactive-glow-strong);
  filter: drop-shadow(0 0 10px var(--interactive-glow))
}

.nav__item--account .nav__sub-link--glow:hover,
.nav__item--account .nav__sub-link--glow:focus-visible {
  color: #fff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 12px rgba(155, 226, 255, 0.95), 0 0 22px rgba(107, 208, 255, 0.7);
  filter: drop-shadow(0 0 10px rgba(155, 226, 255, 0.85)) drop-shadow(0 0 16px rgba(107, 208, 255, 0.55)) !important;
}

.nav__sub-list * {
  margin-left: 0.5rem;
  font-size: 0.9em;
  text-align: left;
  width: 100%;
}

@media (min-width: 48rem) {
  .nav__item--account .nav__sub-item {
    padding: .25em;
    text-align: left
  }
}

.nav-trigger {
  position: relative;
  display: block;
  width: 32px;
  height: var(--header-height);
  margin-right: var(--space-sm);
  margin-left: var(--space-sm);
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease
}

@media (min-width: 48rem) {
  .nav-trigger {
    height: var(--header-height)
  }
}

.nav-trigger span,
.nav-trigger span::before,
.nav-trigger span::after {
  position: absolute;
  height: 2px;
  width: 24px;
  background: var(--color-white)
}

.nav-trigger span {
  top: calc(50% - 2px);
  right: 4px;
  transition: background .2s
}

.nav-trigger span::before,
.nav-trigger span::after {
  content: '';
  right: 0;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s
}

.nav-trigger:hover span,
.nav-trigger:hover span::before,
.nav-trigger:hover span::after,
.nav-trigger:focus-visible span,
.nav-trigger:focus-visible span::before,
.nav-trigger:focus-visible span::after {
  background: #ffffff;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.75), 0 0 10px rgba(155, 226, 255, 0.7), 0 0 18px rgba(107, 208, 255, 0.45);
  filter: drop-shadow(0 0 8px rgba(155, 226, 255, 0.75)) drop-shadow(0 0 12px rgba(107, 208, 255, 0.45))
}

.nav-trigger:hover,
.nav-trigger:focus-visible {
  box-shadow: none;
  background-color: transparent;
  transform: none
}

.nav-trigger span::before {
  top: -6px
}

.nav-trigger span::after {
  top: 6px
}

.nav-trigger.is-clicked span {
  background: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0)
}

.nav-trigger.is-clicked span::before,
.nav-trigger.is-clicked span::after {
  background: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 1)
}

.nav-trigger.is-clicked span::before {
  -webkit-transform: translateX(4px) translateY(-3px) rotate(45deg);
  transform: translateX(4px) translateY(-3px) rotate(45deg)
}

.nav-trigger.is-clicked span::after {
  -webkit-transform: translateX(4px) translateY(2px) rotate(-45deg);
  transform: translateX(4px) translateY(2px) rotate(-45deg)
}

.modal {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  z-index: var(--zindex-overlay);
  overflow-x: hidden;
  background-color: hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 0.2);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none
}

.modal.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: inherit
}

.modal__block {
  display: none;
  opacity: 0;
  visibility: hidden;
  padding: 1.5em;
  position: absolute;
  width: 100vw;
  top: 50%;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  min-width: var(--max-width-xxxxs);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: fadeIn 1000ms ease-in forwards;
  background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0.9);
  letter-spacing: 0.1em
}


@keyframes enter {
  10%{
    transform: translate(0, -50%) rotateY(170deg);
    opacity: 0.1;
  }
  50%{
    transform: translate(0, -50%) rotateY(120deg);
    opacity: 0.3;
  }

  70% {
    transform:  translate(0, -50%)rotateY(50deg);
    opacity: 0.5;
  }
  100%{
    opacity: 1;
    transform: translate(0, -50%) rotateY(0deg);
  }
}
.modal__block.is-selected {
  display: block;
  opacity: 1;
  animation: enter 0.4s ease-in;
  visibility: visible
}

@media (min-width: 32rem) {
  .modal__block {
    height: auto;
    width: auto;
    padding: 1.5em;
    width: var(--max-width-xxxs)
  }
}

@media (min-width: 48rem) {
  .modal__block {
    padding: 2em;
    width: var(--max-width-xxxs)
  }
}

form {
  margin-bottom: var(--space-sm)
}

:root {
  --modal-transition-duration: 0.2s
}

@media (prefers-reduced-motion: no-preference) {
  .modal--animate-scale {
    --modal-transition-duration: .4s;
    transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration)
  }

  .modal--animate-scale.is-visible {
    transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s
  }
}

:root {
  --password-btn-width: 3.5em;
  --password-icon-size: 1.75em
}

.password {
  position: relative
}

.password__btn {
  background-color: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  height: 100%;
  width: var(--password-btn-width);
  background-color: rgba(255, 255, 255, 0);
  justify-content: center;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--color-contrast-medium);
  line-height: inherit;
  appearance: none;
  display: none
}

.password__btn:focus {
  color: var(--color-primary);
  filter: drop-shadow(0 0 10px var(--interactive-glow))
}

.password__btn:hover {
  color: var(--color-primary);
  filter: drop-shadow(0 0 10px var(--interactive-glow-strong))
}

.password__btn-label:last-child {
  display: none
}

.password__btn-label .icon {
  width: var(--password-icon-size);
  height: var(--password-icon-size)
}

.password--text-is-visible .password__btn-label:first-child {
  display: none
}

.password--text-is-visible .password__btn-label:last-child {
  display: inline-block
}

.js .password__btn {
  display: flex
}

:root {
  --checkbox-radio-size: 18px;
  --checkbox-radio-gap: calc((var(--checkbox-radio-size)) / 2);
  --checkbox-radio-border-width: 2px;
  --checkbox-radio-line-height: var(--body-line-height);
  --radio-marker-size: 8px;
  --checkbox-marker-size: 12px;
  --checkbox-radius: 4px
}

.checkbox {
  position: absolute;
  padding: 0;
  margin: 0;
  margin-top: calc((1em * var(--checkbox-radio-line-height) - var(--checkbox-radio-size)) / 2);
  opacity: 0;
  height: var(--checkbox-radio-size);
  width: var(--checkbox-radio-size);
  pointer-events: none
}

.checkbox+label {
  display: inline-block;
  line-height: var(--checkbox-radio-line-height);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  padding-left: calc(var(--checkbox-radio-size) + var(--checkbox-radio-gap))
}

.checkbox+label::before {
  content: '';
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  top: -0.1em;
  margin-left: calc(-1 * (var(--checkbox-radio-size) + var(--checkbox-radio-gap)));
  flex-shrink: 0;
  width: var(--checkbox-radio-size);
  height: var(--checkbox-radio-size);
  background-color: var(--color-bg);
  border-width: var(--checkbox-radio-border-width);
  border-color: var(--color-contrast-low);
  border-style: solid;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: var(--checkbox-radio-gap);
  transition: border .2s, -webkit-transform .2s;
  transition: transform .2s, border .2s;
  transition: transform .2s, border .2s, -webkit-transform .2s
}

.checkbox:not(:checked):not(:focus)+label:hover::before {
  border-color: hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), 0.7)
}

.checkbox+label::before {
  border-radius: var(--checkbox-radius)
}

.checkbox:checked+label::before {
  background-color: var(--color-primary);
  box-shadow: none;
  border-color: var(--color-primary);
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s
}

.checkbox:active+label::before {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s
}

.checkbox:checked:active+label::before {
  -webkit-transform: none;
  transform: none;
  transition: none
}

.checkbox:checked+label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1 6.5 4 9.5 11 2.5' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  background-size: var(--checkbox-marker-size)
}

.checkbox:checked:active+label::before,
.checkbox:focus+label::before {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2)
}

:root {
  --search-size-compact: 2.2em;
  --search-size-expanded: 90vw;
  --search-radius: 50em;
  --search-icon-size: 1.5em
}

@supports (--css: variables) {
  @media (min-width: 48rem) {
    :root {
      --search-size-expanded: 100%
    }
  }
}

.search {
  position: relative;
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: var(--space-sm) var(--space-md) 0
}

.search__input {
  width: var(--search-size-compact);
  height: var(--search-size-compact);
  padding: 0;
  color: transparent;
  overflow: hidden;
  border-color: transparent;
  border-style: solid;
  border-width: 1px;
  border-radius: var(--search-radius);
  transition: .3s ease
}

.search__input::-webkit-input-placeholder {
  opacity: 0;
  color: transparent
}

.search__input::-moz-placeholder {
  opacity: 0;
  color: transparent
}

.search__input:-ms-input-placeholder {
  opacity: 0;
  color: transparent
}

.search__input::-ms-input-placeholder {
  opacity: 0;
  color: transparent
}

.search__input::placeholder {
  opacity: 0;
  color: transparent
}

.search__input:hover {
  border-color: var(--color-contrast-medium);
  cursor: pointer;
  transition: .3s ease
}

.search__input:focus {
  width: var(--search-size-expanded);
  padding-top: 0;
  padding-right: calc(4px + var(--search-size-compact));
  padding-bottom: 0;
  padding-left: var(--space-sm);
  outline: none;
  border: 1px solid #51cbee;
  box-shadow: 0 0 5px #51cbee;
  color: var(--color-white);
  cursor: auto;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
  transition: all .3s ease
}

.search__input:focus::-webkit-input-placeholder {
  opacity: 1;
  color: var(--color-contrast-medium)
}

.search__input:focus::-moz-placeholder {
  opacity: 1;
  color: var(--color-contrast-medium)
}

.search__input:focus:-ms-input-placeholder {
  opacity: 1;
  color: var(--color-contrast-medium)
}

.search__input:focus::-ms-input-placeholder {
  opacity: 1;
  color: var(--color-contrast-medium)
}

.search__input:focus::placeholder {
  opacity: 1;
  color: var(--color-contrast-medium)
}

.search__input:focus+.search__btn {
  pointer-events: auto
}

.search__input::-webkit-search-decoration,
.search__input::-webkit-search-cancel-button,
.search__input::-webkit-search-results-button,
.search__input::-webkit-search-results-decoration {
  display: none
}

.search__btn {
  position: absolute;
  display: flex;
  top: 2px;
  right: 2px;
  width: var(--search-size-compact);
  height: var(--search-size-compact);
  border-radius: var(--search-radius);
  z-index: 1;
  pointer-events: none;
  transition: all .3s
}

.search__btn .icon {
  display: block;
  margin: auto;
  height: var(--search-icon-size);
  width: var(--search-icon-size)
}

.search__btn:focus {
  outline: none
}

:root {
  --header-height: 45px;
  --sidebar-width: 100%;
  --font-primary: 'Titillium Web', sans-serif
}

@supports (--css: variables) {
  @media (min-width: 48rem) {
    :root {
      --header-height: 55px;
      --sidebar-width: 260px
    }
  }
}

.side-nav {
  position: absolute;
  display: block;
  height: 100vh;
  z-index: var(--zindex-header);
  width: 100%;
  right: 0;
  top: 0;
  padding-top: calc(var(--header-height) + 1em);
  padding-left: 1em;
  background-color: rgba(0, 0, 0, 0.666);
  box-shadow: var(--shadow-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translateX(var(--sidebar-width));
  transform: translateX(var(--sidebar-width));
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-clip: padding-box;
  /* overflow-y: auto */
}

.side-nav ul.side__list {
  overflow-y: auto;
  height: calc(100vh - 70px);
}

.side-nav a {
  text-decoration: none
}

.side-nav a:hover {
  color: #fff;
  filter:drop-shadow(0 0 8px rgba(255,255,255,1)) drop-shadow(0 0 20px rgba(255,255,255,.8)) drop-shadow(0 0 40px rgba(255,255,255,.4))
}

.side__list .side__item > a:hover,
.side__list .side__item > a:focus-visible,
.side__list .js-nav__login > a:hover,
.side__list .js-nav__login > a:focus-visible {
  color: #fff;
  filter:drop-shadow(0 0 8px rgba(255,255,255,1)) drop-shadow(0 0 20px rgba(255,255,255,.8)) drop-shadow(0 0 40px rgba(255,255,255,.4))
}

.side__list .sub-menu a:hover,
.side__list .sub-menu a:focus-visible {
  color: #00e5ff;
  filter:drop-shadow(0 0 8px rgba(0,229,255,1)) drop-shadow(0 0 20px rgba(0,229,255,.8)) drop-shadow(0 0 40px rgba(0,229,255,.4))
}

.modal__block .js-modal-trigger:hover,
.modal__block .js-modal-trigger:focus-visible {
  color: #00e5ff;
  filter:drop-shadow(0 0 8px rgba(0,229,255,1)) drop-shadow(0 0 20px rgba(0,229,255,.8)) drop-shadow(0 0 40px rgba(0,229,255,.4));
  transition:filter .3s ease;
}

#signup-form a[href="#0"]:hover,
#signup-form a[href="#0"]:focus-visible,
#signup-form a[href="TermsOfService.html"]:hover,
#signup-form a[href="TermsOfService.html"]:focus-visible,
#login-form a[href="#0"]:hover,
#login-form a[href="#0"]:focus-visible {
  color: #00e5ff;
  filter:drop-shadow(0 0 8px rgba(0,229,255,1)) drop-shadow(0 0 20px rgba(0,229,255,.8)) drop-shadow(0 0 40px rgba(0,229,255,.4));
  transition:filter .3s ease;
}

.status-card {
  margin-top: 20px;
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.status-card h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
}

.status-card p {
  margin: 0;
  color: var(--color-contrast-medium);
  line-height: 1.65;
}

.status-loading-line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.status-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(155, 226, 255, 0.28);
  border-top-color: #6bd0ff;
  vertical-align: -2px;
  animation: spinner-spin 0.8s linear infinite;
}

@keyframes spinner-spin {
  to {
    transform: rotate(360deg);
  }
}

.status-card--loading {
  border-color: rgba(107, 208, 255, 0.28);
}

.status-card--success {
  border-color: rgba(103, 211, 154, 0.35);
}

.status-card--error {
  border-color: rgba(255, 141, 141, 0.35);
}

.menu-message {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: min(92vw, 420px);
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(107, 208, 255, 0.24);
  background: rgba(7, 15, 26, 0.94);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(155, 226, 255, 0.08), 0 0 30px rgba(107, 208, 255, 0.16);
  color: var(--color-white);
  z-index: 50;
  backdrop-filter: blur(10px);
}

.menu-message h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.menu-message p {
  margin: 0;
  color: var(--color-contrast-medium);
  line-height: 1.55;
}

.menu-message--show {
  display: block !important;
  animation: menu-message-in 160ms ease-out;
}

@keyframes menu-message-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ── SHARED MODAL CLOSE BUTTON ── */

.modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-contrast-medium);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--color-white);
  transform: rotate(90deg);
}

.modal-close-btn:focus-visible {
  outline: 2px solid rgba(107, 208, 255, 0.5);
  outline-offset: 3px;
}

/* ── AVATAR MODAL ── */

.modal__block.avatar-modal-block {
  width: min(860px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  left: 50%;
  top: 50%;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  letter-spacing: normal;
}

.avatar-modal-shell {
  width: 100%;
  padding: 0;
}

.avatar-modal-card {
  width: 100%;
  border-radius: 30px;
  border: 1px solid rgba(134, 215, 255, 0.16);
  background: rgba(8, 18, 29, 0.92);
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(18px);
  padding: 34px;
}

.avatar-modal-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.avatar-modal-top h1 {
  margin: 0 0 6px;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.1;
  font-weight: 600;
  color: var(--color-white);
}

.avatar-modal-lead {
  margin: 0;
  color: var(--color-contrast-medium);
  font-size: 0.95rem;
  line-height: 1.6;
}

.avatar-modal-actions {
  flex-shrink: 0;
}

/* Shared button styles */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  text-decoration: none;
  font-weight: 700;
  color: #04111a;
  background: linear-gradient(135deg, #9be2ff 0%, #63cdf8 100%);
  box-shadow: 0 18px 34px rgba(54, 164, 218, 0.24);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(155, 226, 255, 0.35), 0 22px 42px rgba(99, 205, 248, 0.34), 0 0 26px rgba(107, 208, 255, 0.22);
  filter: brightness(1.05);
}

.button:focus-visible {
  outline: 2px solid rgba(155, 226, 255, 0.65);
  outline-offset: 3px;
}

.button--ghost {
  color: var(--color-white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: none;
}

/* Inline status */
.avatar-inline-status {
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 0.88rem;
  margin-bottom: 18px;
}

.avatar-inline-status--loading {
  background: rgba(107, 208, 255, 0.07);
  border: 1px solid rgba(107, 208, 255, 0.2);
  color: var(--color-2);
}

.avatar-inline-status--success {
  background: rgba(72, 220, 130, 0.07);
  border: 1px solid rgba(72, 220, 130, 0.25);
  color: #48dc82;
}

.avatar-inline-status--error {
  background: rgba(255, 80, 80, 0.07);
  border: 1px solid rgba(255, 80, 80, 0.25);
  color: #ff7070;
}

/* Unified layout */
.avatar-modal-unified {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* Summary panel */
.avatar-modal-summary {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.avatar-modal-summary-avatar {
  width: 100%;
  display: grid;
  place-items: center;
  padding: 16px;
  border-radius: 18px;
  background: radial-gradient(circle at top, rgba(107, 208, 255, 0.18), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(107, 208, 255, 0.14);
}

.avatar-modal-summary-avatar img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.avatar-summary-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.3;
  word-break: break-word;
}

.avatar-summary-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.avatar-summary-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  width: 100%;
  text-align: center;
}

.avatar-summary-badge--karma {
  background: rgba(255, 180, 60, 0.1);
  color: #ffb43c;
  border: 1px solid rgba(255, 180, 60, 0.28);
}

.avatar-summary-badge--xp {
  background: rgba(107, 208, 255, 0.1);
  color: var(--color-2);
  border: 1px solid rgba(107, 208, 255, 0.22);
}

.avatar-summary-badge--type {
  background: rgba(130, 220, 150, 0.08);
  color: #82dc96;
  border: 1px solid rgba(130, 220, 150, 0.22);
}

/* Field panel */
.avatar-modal-fields {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.avatar-field-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-2);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.avatar-field-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.avatar-field-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-contrast-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: right;
  flex-shrink: 0;
}

.avatar-field-input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-white);
  font: inherit;
  font-size: 0.9rem;
  transition: border-color 0.15s, background 0.15s;
}

.avatar-field-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.avatar-field-input:focus {
  outline: none;
  border-color: rgba(107, 208, 255, 0.45);
  background: rgba(107, 208, 255, 0.04);
}

.avatar-field-footer {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.avatar-save-btn {
  min-height: 42px;
  font-size: 0.88rem;
}

@media (max-width: 680px) {
  .avatar-modal-unified {
    grid-template-columns: 1fr;
  }

  .avatar-modal-summary {
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left;
    align-items: center;
  }

  .avatar-modal-summary-avatar {
    width: 80px;
    flex-shrink: 0;
    padding: 10px;
  }

  .avatar-modal-summary-avatar img {
    width: 60px;
    height: 60px;
  }

  .avatar-field-row {
    grid-template-columns: 80px minmax(0, 1fr);
  }
}

@media (min-width: 48rem) {
  .side-nav {
    width: var(--sidebar-width);
    -webkit-transform: translateX(var(--sidebar-width));
    transform: translateX(var(--sidebar-width));
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    padding-left: .5em
  }
}

.side-nav.is-visible {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  transition: all .3s ease;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s
}

.side__list .side__item {
  position: relative;
  display: block;
  line-height: 2em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  padding: 4px 16px;
  color: var(--color-2);
  transition: all .1s
}

.side__list .side__item a {
  padding-left: .25em;
  border-left: .25em solid #00000000;
  transition: all .1s;
  display: block;
  line-height: 22px;
}
.side__list .side__item .sub-menu li {
  margin: 0 0 10px;
}
.side__list .side__item .sub-menu li:last-child {
  margin: 0;
}

.side__list .js-nav__login>a {
  color: var(--color-white)
}

@media (min-width: 48rem) {
  .side__list .js-nav__login>a {
    display: none;
    opacity: 0;
    visibility: hidden
  }
}

.side__list .item--has-children .submenu-open {
  border-color: #1885c9;
  transition: all .3s;
  color: #fff
}

.side__list .sub-menu {
  padding: 15px;
  display: none;
  background: rgba(4, 12, 22, 0.85);
  border-radius: 12px;
  margin-top: 4px;
}

.side__list .sub-menu li a {
  color: rgba(180, 220, 255, 0.82) !important;
}

.side__list .sub-menu li a:hover {
  color: #fff !important;
}

@media (min-width: 48rem) {
  .side__list .sub-menu {
    padding: 10px 10px 10px 15px;
  }
}

/* Native select option colours — prevents white-on-white in browser dropdowns */
select option {
  background-color: #0a1825;
  color: #d0eaff;
}

#login-form, #signup-form {
  position: relative;
}


@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

/* .alert {
  position: absolute;
  padding: 0.1rem 0.3rem;
  font-size: 0.7rem;
  width: 70%;
  top: 1rem;
  left: 50%;
  transform: translate(-50%, 0%);
  text-align: center;
  animation: fadeIn 500ms ease-in-out forwards;
  border-radius: 10px;
  color: #fff;
}

.alert.error, .error {
  background-color: var(--color-error);
}

.alert.success{
  background-color: var(--color-success);
} */

.alert {
  position: relative;
  padding: 0.75rem 1rem;
  font-size: 0.7rem;
  width: 100%;
  text-align: center;
  animation: fadeIn 500ms ease-in-out forwards;
  border-radius: 10px;
  color: #fff;
  margin-bottom: 1rem;
}

.alert.error, .error {
  background-color: var(--color-error);
}

.alert.success {
  background-color: var(--color-success);
}

#signup-submit.error,
#login-submit.error {
  background-color: var(--color-error);
  color: var(--color-primary);
}

/* ── DEV PORTAL MODAL ── */

.modal__block.dev-portal-modal-block {
  width: min(1160px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  left: 50%;
  top: 50%;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  letter-spacing: normal;
}

.dev-portal-shell {
  width: 100%;
  padding: 0;
}

.dev-portal-card {
  width: 100%;
  border-radius: 30px;
  border: 1px solid rgba(134, 215, 255, 0.16);
  background: rgba(8, 18, 29, 0.92);
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(18px);
  padding: 34px;
}

.dev-portal-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.dev-portal-title {
  margin: 0 0 10px;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.1;
  font-weight: 600;
  color: var(--color-white);
}

.dev-portal-lead {
  margin: 0;
  color: var(--color-contrast-medium);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 680px;
}

.dev-portal-actions {
  flex-shrink: 0;
}

/* Section label */
.dev-portal-section {
  margin-bottom: 28px;
}

.dev-portal-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-2);
  margin-bottom: 14px;
  text-transform: uppercase;
}

/* Quick link grid */
.dev-portal-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.dev-portal-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border-radius: 18px;
  border: 1px solid rgba(107, 208, 255, 0.14);
  background: rgba(107, 208, 255, 0.04);
  color: var(--color-contrast-high);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}

.dev-portal-link:hover {
  background: rgba(107, 208, 255, 0.1);
  border-color: rgba(107, 208, 255, 0.38);
  transform: translateY(-2px);
  color: var(--color-white);
}

.dev-portal-link-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.dev-portal-link-label {
  line-height: 1.3;
}

/* Three-column panels */
.dev-portal-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.dev-portal-panel {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  padding: 20px;
}

.dev-portal-panel-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-2);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.dev-portal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.dev-portal-list a {
  color: var(--color-contrast-high);
  text-decoration: none;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s;
}

.dev-portal-list a:hover {
  color: var(--color-2);
}

.dev-portal-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.dev-portal-badge--live {
  background: rgba(72, 220, 130, 0.15);
  color: #48dc82;
  border: 1px solid rgba(72, 220, 130, 0.3);
}

.dev-portal-badge--staging {
  background: rgba(255, 180, 60, 0.12);
  color: #ffb43c;
  border: 1px solid rgba(255, 180, 60, 0.28);
}

/* SDK grid */
.dev-portal-sdk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.dev-portal-sdk-group {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
  padding: 18px;
}

.dev-portal-sdk-group-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-2);
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Footer links */
.dev-portal-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.dev-portal-footer-link {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-contrast-medium);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.dev-portal-footer-link:hover {
  color: var(--color-white);
  border-color: rgba(107, 208, 255, 0.35);
  background: rgba(107, 208, 255, 0.07);
}

@media (max-width: 900px) {
  .dev-portal-columns {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .dev-portal-columns {
    grid-template-columns: 1fr;
  }
  .dev-portal-top {
    flex-direction: column;
  }
  .dev-portal-link-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── NFT MODAL ── */

.modal__block.nft-modal-block {
  width: min(1100px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  left: 50%;
  top: 50%;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  letter-spacing: normal;
}

.nft-modal-shell {
  width: 100%;
  padding: 0;
}

.nft-modal-card {
  width: 100%;
  border-radius: 30px;
  border: 1px solid rgba(134, 215, 255, 0.16);
  background: rgba(8, 18, 29, 0.92);
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(18px);
  padding: 34px;
}

.nft-modal-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.nft-modal-title {
  margin: 0 0 8px;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.1;
  font-weight: 600;
  color: var(--color-white);
}

.nft-modal-lead {
  margin: 0;
  color: var(--color-contrast-medium);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 600px;
}

/* Provider bar */
.nft-provider-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.nft-provider-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-contrast-medium);
  flex-shrink: 0;
}

.nft-provider-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.nft-provider-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: var(--color-contrast-medium);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 5px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.nft-provider-pill.is-active,
.nft-provider-pill:hover {
  background: rgba(107, 208, 255, 0.1);
  border-color: rgba(107, 208, 255, 0.38);
  color: var(--color-white);
}

.nft-refresh-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: var(--color-contrast-medium);
  font-size: 1.1rem;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, transform 0.25s;
}

.nft-refresh-btn:hover {
  color: var(--color-white);
  border-color: rgba(107, 208, 255, 0.38);
  transform: rotate(180deg);
}

/* Status */
.nft-status {
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 0.88rem;
  margin-bottom: 16px;
}

.nft-status--loading {
  background: rgba(107, 208, 255, 0.07);
  border: 1px solid rgba(107, 208, 255, 0.2);
  color: var(--color-2);
}

.nft-status--warn {
  background: rgba(255, 180, 60, 0.07);
  border: 1px solid rgba(255, 180, 60, 0.25);
  color: #ffb43c;
}

.nft-status--error {
  background: rgba(255, 80, 80, 0.07);
  border: 1px solid rgba(255, 80, 80, 0.25);
  color: #ff7070;
}

/* Tabs */
.nft-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 20px;
}

.nft-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-contrast-medium);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 18px;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.nft-tab.is-active,
.nft-tab:hover {
  color: var(--color-white);
  border-bottom-color: var(--color-2);
}

/* NFT grid */
.nft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  min-height: 180px;
}

.nft-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  border-radius: 20px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  color: var(--color-contrast-medium);
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.6;
}

.nft-empty-icon {
  font-size: 2.4rem;
  line-height: 1;
}

/* NFT card */
.nft-card {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.nft-card:hover {
  border-color: rgba(107, 208, 255, 0.28);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.nft-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.nft-card-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: rgba(107, 208, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nft-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.nft-card-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.3;
}

.nft-card-desc {
  font-size: 0.78rem;
  color: var(--color-contrast-medium);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nft-card-hash {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 0.68rem;
  color: var(--color-contrast-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.7;
}

.nft-card-coords {
  font-size: 0.75rem;
  color: var(--color-contrast-medium);
}

.nft-card-badge {
  margin-top: auto;
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(107, 208, 255, 0.1);
  color: var(--color-2);
  border: 1px solid rgba(107, 208, 255, 0.22);
  width: fit-content;
}

.nft-card-badge--geo {
  background: rgba(130, 220, 150, 0.1);
  color: #82dc96;
  border-color: rgba(130, 220, 150, 0.25);
}

.nft-card-badge--oland {
  background: rgba(255, 200, 80, 0.1);
  color: #ffc850;
  border-color: rgba(255, 200, 80, 0.25);
}

/* OLAND price banner */
.nft-oland-price {
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255, 200, 80, 0.06);
  border: 1px solid rgba(255, 200, 80, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
}

.nft-oland-price-label {
  color: var(--color-contrast-medium);
  font-weight: 600;
}

.nft-oland-price-value {
  color: #ffc850;
  font-weight: 700;
  font-size: 1rem;
}

/* Footer actions */
.nft-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.nft-action-btn {
  font-size: 0.82rem;
  min-height: 38px;
  padding: 0 16px;
}

@media (max-width: 700px) {
  .nft-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .nft-modal-top {
    flex-direction: column;
  }
}

@media (max-width: 420px) {
  .nft-grid {
    grid-template-columns: 1fr;
  }
}

/* ── SEARCH AVATARS MODAL ── */

.modal__block.search-modal-block {
  width: min(860px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  left: 50%;
  top: 50%;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  letter-spacing: normal;
}

.search-modal-shell { width: 100%; padding: 0; }

.search-modal-card {
  width: 100%;
  border-radius: 30px;
  border: 1px solid rgba(134, 215, 255, 0.16);
  background: rgba(8, 18, 29, 0.92);
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(18px);
  padding: 34px;
}

.search-modal-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.search-modal-title {
  margin: 0 0 6px;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.1;
  font-weight: 600;
  color: var(--color-white);
}

.search-modal-lead {
  margin: 0;
  color: var(--color-contrast-medium);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Search form */
.search-avatar-form { margin-bottom: 20px; }

.search-avatar-input-wrap {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.search-avatar-input {
  flex: 1;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-white);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.15s, background 0.15s;
}

.search-avatar-input::placeholder { color: rgba(255, 255, 255, 0.28); }
.search-avatar-input:focus {
  outline: none;
  border-color: rgba(107, 208, 255, 0.5);
  background: rgba(107, 208, 255, 0.04);
}

.search-avatar-submit {
  min-height: 48px;
  padding: 0 22px;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.search-avatar-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--color-contrast-medium);
  cursor: pointer;
  user-select: none;
}

.search-avatar-option input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--color-2);
  cursor: pointer;
}

/* Status */
.search-status {
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 0.88rem;
  margin-bottom: 16px;
}
.search-status--loading { background: rgba(107,208,255,0.07); border: 1px solid rgba(107,208,255,0.2); color: var(--color-2); }
.search-status--error   { background: rgba(255,80,80,0.07);  border: 1px solid rgba(255,80,80,0.25); color: #ff7070; }

/* Results */
.search-results-header {
  margin-bottom: 14px;
}

.search-results-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-2);
}

.search-browse-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-2);
  margin-bottom: 14px;
}

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

.search-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 36px 20px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,0.1);
  color: var(--color-contrast-medium);
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.6;
}
.search-empty-icon { font-size: 2rem; line-height: 1; }

/* Avatar card */
.search-avatar-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  transition: border-color 0.15s, background 0.15s;
}
.search-avatar-card:hover {
  border-color: rgba(107,208,255,0.25);
  background: rgba(107,208,255,0.04);
}

.search-avatar-card-avatar {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(107,208,255,0.08);
  border: 1px solid rgba(107,208,255,0.14);
}

.search-avatar-card-body { flex: 1; min-width: 0; }

.search-avatar-card-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-avatar-card-username,
.search-avatar-card-email {
  font-size: 0.75rem;
  color: var(--color-contrast-medium);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-avatar-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.search-avatar-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(107,208,255,0.08);
  color: var(--color-2);
  border: 1px solid rgba(107,208,255,0.2);
}
.search-avatar-badge--level { background: rgba(130,220,150,0.08); color: #82dc96; border-color: rgba(130,220,150,0.22); }
.search-avatar-badge--karma { background: rgba(255,180,60,0.08); color: #ffb43c; border-color: rgba(255,180,60,0.22); }

@media (max-width: 600px) {
  .search-avatar-input-wrap { flex-direction: column; }
  .search-results-grid { grid-template-columns: 1fr; }
}

/* ── SETTINGS MODAL ── */

.modal__block.settings-modal-block {
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  left: 50%;
  top: 50%;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  letter-spacing: normal;
}

.settings-modal-shell { width: 100%; padding: 0; }

.settings-modal-card {
  width: 100%;
  border-radius: 30px;
  border: 1px solid rgba(134,215,255,0.16);
  background: rgba(8,18,29,0.92);
  box-shadow: 0 28px 100px rgba(0,0,0,0.46);
  backdrop-filter: blur(18px);
  padding: 34px;
}

.settings-modal-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.settings-modal-title {
  margin: 0 0 6px;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.1;
  font-weight: 600;
  color: var(--color-white);
}

.settings-modal-lead {
  margin: 0;
  color: var(--color-contrast-medium);
  font-size: 0.95rem;
  line-height: 1.6;
}

.settings-status {
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 0.88rem;
  margin-bottom: 18px;
}

/* Layout */
.settings-layout {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* Sidebar tabs */
.settings-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  padding: 10px;
}

.settings-tab {
  background: transparent;
  border: none;
  border-radius: 12px;
  color: var(--color-contrast-medium);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.settings-tab.is-active,
.settings-tab:hover {
  background: rgba(107,208,255,0.1);
  color: var(--color-white);
}

/* Panels */
.settings-panels {
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  padding: 24px;
}

.settings-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-2);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 999px;
}
.settings-badge--soon {
  background: rgba(255,180,60,0.1);
  color: #ffb43c;
  border: 1px solid rgba(255,180,60,0.25);
}

/* Info rows */
.settings-info-grid { display: flex; flex-direction: column; gap: 10px; }

.settings-info-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.settings-info-row:last-child { border-bottom: none; }

.settings-info-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-contrast-medium);
}

.settings-info-value {
  font-size: 0.9rem;
  color: var(--color-white);
  word-break: break-all;
}

.settings-monospace {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 0.78rem;
  opacity: 0.8;
}

/* Providers */
.settings-providers-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.settings-provider-chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(107,208,255,0.08);
  color: var(--color-2);
  border: 1px solid rgba(107,208,255,0.2);
}

/* Links */
.settings-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-ext-link {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-contrast-medium);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.settings-ext-link:hover {
  color: var(--color-white);
  border-color: rgba(107,208,255,0.35);
  background: rgba(107,208,255,0.07);
}

/* Blocks */
.settings-block {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
}
.settings-block--danger {
  border-color: rgba(255,80,80,0.2);
  background: rgba(255,80,80,0.03);
}

.settings-dim {
  font-size: 0.85rem;
  color: var(--color-contrast-medium);
  line-height: 1.6;
  margin: 0 0 14px;
}
.settings-dim:last-child { margin-bottom: 0; }

.settings-action-btn {
  min-height: 40px;
  font-size: 0.82rem;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.settings-action-btn--danger {
  border-color: rgba(255,80,80,0.4);
  color: #ff7070;
  background: rgba(255,80,80,0.08);
}

/* Pref rows */
.settings-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.settings-pref-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 3px;
}

/* Select */
.settings-select {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  color: var(--color-white);
  font: inherit;
  font-size: 0.82rem;
  padding: 6px 10px;
  cursor: pointer;
  flex-shrink: 0;
}
.settings-select:focus { outline: none; border-color: rgba(107,208,255,0.45); }

/* Toggle */
.settings-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; }
.settings-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.settings-toggle-track {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  transition: background 0.2s;
}
.settings-toggle-track::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-contrast-medium);
  top: 2px; left: 2px;
  transition: transform 0.2s, background 0.2s;
}
.settings-toggle input:checked + .settings-toggle-track { background: rgba(107,208,255,0.25); border-color: rgba(107,208,255,0.4); }
.settings-toggle input:checked + .settings-toggle-track::before { transform: translateX(20px); background: var(--color-2); }

/* Plan card */
.settings-plan-card {
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(107,208,255,0.18);
  background: rgba(107,208,255,0.04);
}
.settings-plan-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 8px;
}
.settings-plan-desc {
  font-size: 0.85rem;
  color: var(--color-contrast-medium);
  line-height: 1.6;
}

@media (max-width: 680px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-tabs { flex-direction: row; flex-wrap: wrap; }
  .settings-tab { text-align: center; flex: 1 1 auto; }
  .settings-info-row { grid-template-columns: 1fr; gap: 4px; }
  .settings-pref-row { flex-direction: column; align-items: flex-start; }
}

/* ── KARMA MODAL ── */

.modal__block.karma-modal-block {
  width: min(860px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  left: 50%; top: 50%;
  padding: 0; background: transparent; box-shadow: none; border-radius: 0; backdrop-filter: none;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  letter-spacing: normal;
}

.karma-modal-shell { width: 100%; padding: 0; }

.karma-modal-card {
  width: 100%;
  border-radius: 30px;
  border: 1px solid rgba(134, 215, 255, 0.16);
  background: rgba(8, 18, 29, 0.92);
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(18px);
  padding: 34px;
}

.karma-modal-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px;
}

.karma-modal-title {
  margin: 0 0 6px;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.1; font-weight: 600; color: var(--color-white);
}

.karma-modal-lead { margin: 0; color: var(--color-contrast-medium); font-size: 0.95rem; line-height: 1.6; }

/* Status */
.karma-status { padding: 12px 16px; border-radius: 14px; font-size: 0.88rem; margin-bottom: 16px; }
.karma-status--loading { background: rgba(107,208,255,0.07); border: 1px solid rgba(107,208,255,0.2); color: var(--color-2); }
.karma-status--warn    { background: rgba(255,180,60,0.07);  border: 1px solid rgba(255,180,60,0.25); color: #ffb43c; }
.karma-status--error   { background: rgba(255,80,80,0.07);   border: 1px solid rgba(255,80,80,0.25);  color: #ff7070; }

/* Score banner */
.karma-score-banner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.karma-score-block {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  padding: 20px 16px;
  text-align: center;
}

.karma-score-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--color-2); margin-bottom: 10px;
}

.karma-score-value {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 700; color: var(--color-white); line-height: 1;
}

.karma-score-value--xp    { color: #82dc96; }
.karma-score-value--level { color: #ffb43c; }
.karma-score-value--type  { font-size: clamp(0.9rem, 2vw, 1.3rem); color: var(--color-2); }

/* Tabs */
.karma-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 20px;
}

.karma-tab {
  background: transparent; border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-contrast-medium);
  font-family: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 18px; cursor: pointer; margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.karma-tab.is-active, .karma-tab:hover { color: var(--color-white); border-bottom-color: var(--color-2); }

/* Records list */
.karma-records-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 360px; overflow-y: auto;
}

.karma-record-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  transition: background 0.15s;
}
.karma-record-row:hover { background: rgba(255,255,255,0.05); }

.karma-record-action {
  font-size: 0.88rem; color: var(--color-white);
  display: flex; flex-direction: column; gap: 3px;
}

.karma-record-date { font-size: 0.75rem; color: var(--color-contrast-medium); }

.karma-record-points { font-size: 1rem; font-weight: 700; flex-shrink: 0; }

.karma-positive { color: #48dc82; }
.karma-negative { color: #ff7070; }

.karma-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 40px 20px;
  border-radius: 18px; border: 1px dashed rgba(255,255,255,0.1);
  color: var(--color-contrast-medium); text-align: center;
  font-size: 0.88rem; line-height: 1.6;
}
.karma-empty-icon { font-size: 2.2rem; line-height: 1; }

/* Weightings */
.karma-weightings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
  max-height: 280px; overflow-y: auto;
}

.karma-weighting-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
}

.karma-weighting-action { font-size: 0.85rem; color: var(--color-white); }
.karma-weighting-points { font-size: 0.9rem; font-weight: 700; flex-shrink: 0; }

/* Vote banner */
.karma-vote-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  flex-wrap: wrap;
}

.karma-vote-text strong { display: block; font-size: 0.95rem; color: var(--color-white); margin-bottom: 4px; }
.karma-vote-text p { font-size: 0.82rem; color: var(--color-contrast-medium); margin: 0; line-height: 1.5; }

.karma-vote-btn { min-height: 40px; font-size: 0.82rem; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; }

.karma-soon-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(255,180,60,0.12); color: #ffb43c; border: 1px solid rgba(255,180,60,0.28);
}

@media (max-width: 640px) {
  .karma-score-banner { grid-template-columns: repeat(2, 1fr); }
  .karma-vote-banner { flex-direction: column; align-items: flex-start; }
}

/* ── DATA MODAL ── */

.modal__block.data-modal-block {
  width: min(960px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto; overflow-x: hidden;
  left: 50%; top: 50%;
  padding: 0; background: transparent; box-shadow: none; border-radius: 0; backdrop-filter: none;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  letter-spacing: normal;
}

.data-modal-shell { width: 100%; padding: 0; }

.data-modal-card {
  width: 100%;
  border-radius: 30px;
  border: 1px solid rgba(134,215,255,0.16);
  background: rgba(8,18,29,0.92);
  box-shadow: 0 28px 100px rgba(0,0,0,0.46);
  backdrop-filter: blur(18px);
  padding: 34px;
}

.data-modal-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px;
}

.data-modal-title {
  margin: 0 0 6px;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.1; font-weight: 600; color: var(--color-white);
}

.data-modal-lead { margin: 0; color: var(--color-contrast-medium); font-size: 0.95rem; line-height: 1.6; }

/* Status */
.data-status { padding: 12px 16px; border-radius: 14px; font-size: 0.88rem; margin-bottom: 16px; }
.data-status--loading { background: rgba(107,208,255,0.07); border: 1px solid rgba(107,208,255,0.2); color: var(--color-2); }
.data-status--success { background: rgba(72,220,130,0.07); border: 1px solid rgba(72,220,130,0.25); color: #48dc82; }
.data-status--warn    { background: rgba(255,180,60,0.07); border: 1px solid rgba(255,180,60,0.25); color: #ffb43c; }
.data-status--error   { background: rgba(255,80,80,0.07);  border: 1px solid rgba(255,80,80,0.25);  color: #ff7070; }

/* Tabs */
.data-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 20px;
}

.data-tab {
  background: transparent; border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-contrast-medium);
  font-family: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 18px; cursor: pointer; margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.data-tab.is-active, .data-tab:hover { color: var(--color-white); border-bottom-color: var(--color-2); }

/* Browse bar */
.data-browse-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}

.data-provider-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; }
.data-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-contrast-medium); flex-shrink: 0; }

.data-provider-pills { display: flex; gap: 6px; flex-wrap: wrap; }

.data-provider-pill {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: var(--color-contrast-medium);
  font-family: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; padding: 4px 12px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.data-provider-pill.is-active, .data-provider-pill:hover {
  background: rgba(107,208,255,0.1); border-color: rgba(107,208,255,0.38); color: var(--color-white);
}

/* Holon grid */
.data-holon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  min-height: 160px;
  max-height: 420px;
  overflow-y: auto;
}

.data-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 40px 20px;
  border-radius: 18px; border: 1px dashed rgba(255,255,255,0.1);
  color: var(--color-contrast-medium); text-align: center;
  font-size: 0.88rem; line-height: 1.6;
}
.data-empty-icon { font-size: 2.2rem; line-height: 1; }

/* Holon card */
.data-holon-card {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 0.15s, background 0.15s;
}
.data-holon-card:hover { border-color: rgba(107,208,255,0.22); background: rgba(107,208,255,0.03); }

.data-holon-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

.data-holon-card-name { font-size: 0.9rem; font-weight: 700; color: var(--color-white); line-height: 1.3; }

.data-card-delete {
  background: transparent; border: 1px solid rgba(255,80,80,0.25);
  border-radius: 50%; color: #ff7070;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; cursor: pointer; flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.data-card-delete:hover { background: rgba(255,80,80,0.12); border-color: rgba(255,80,80,0.5); }

.data-holon-card-desc { font-size: 0.78rem; color: var(--color-contrast-medium); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.data-holon-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.data-holon-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(107,208,255,0.08); color: var(--color-2); border: 1px solid rgba(107,208,255,0.2);
}
.data-holon-badge--provider { background: rgba(130,220,150,0.08); color: #82dc96; border-color: rgba(130,220,150,0.22); }

.data-holon-date { font-size: 0.72rem; color: var(--color-contrast-medium); margin-left: auto; }

.data-holon-id {
  font-family: 'Share Tech Mono','Courier New',monospace;
  font-size: 0.68rem; color: var(--color-contrast-medium); opacity: 0.6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Forms */
.data-form { display: flex; flex-direction: column; gap: 14px; max-width: 600px; }

.data-form-row { display: grid; grid-template-columns: 130px minmax(0,1fr); align-items: center; gap: 14px; }

.data-form-label { font-size: 0.8rem; font-weight: 600; color: var(--color-contrast-medium); text-transform: uppercase; letter-spacing: 0.08em; text-align: right; }

.data-form-input, .data-form-select {
  min-height: 44px; padding: 0 14px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: var(--color-white);
  font: inherit; font-size: 0.9rem;
  transition: border-color 0.15s, background 0.15s;
}
.data-form-input::placeholder { color: rgba(255,255,255,0.25); }
.data-form-input:focus, .data-form-select:focus { outline: none; border-color: rgba(107,208,255,0.45); background: rgba(107,208,255,0.04); }
.data-form-select { padding: 0 10px; cursor: pointer; }

.data-form-row--check { grid-template-columns: 130px auto; }

.data-check-label { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--color-contrast-medium); cursor: pointer; }
.data-check-label input { width: 15px; height: 15px; accent-color: var(--color-2); cursor: pointer; }

.data-submit-btn { min-height: 44px; font-size: 0.9rem; align-self: flex-start; margin-left: 144px; }

/* Info block (off-chain) */
.data-info-block {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px; border-radius: 18px;
  border: 1px solid rgba(107,208,255,0.14);
  background: rgba(107,208,255,0.04);
  margin-bottom: 20px;
}
.data-info-icon { font-size: 1.8rem; line-height: 1; flex-shrink: 0; }
.data-info-block strong { display: block; font-size: 0.95rem; color: var(--color-white); margin-bottom: 6px; }
.data-info-text { font-size: 0.85rem; color: var(--color-contrast-medium); line-height: 1.6; margin: 0; }

@media (max-width: 700px) {
  .data-holon-grid { grid-template-columns: 1fr; }
  .data-form-row { grid-template-columns: 1fr; }
  .data-form-label { text-align: left; }
  .data-submit-btn { margin-left: 0; }
}

/* ── HYPERDRIVE MODAL ── */

.modal__block.hd-modal-block {
  width: min(1080px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto; overflow-x: hidden;
  left: 50%; top: 50%; padding: 0;
  background: transparent; box-shadow: none; border-radius: 0; backdrop-filter: none;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  letter-spacing: normal;
}

.hd-shell { width: 100%; padding: 0; }

.hd-card {
  width: 100%; border-radius: 30px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  background: rgba(4, 12, 22, 0.95);
  box-shadow: 0 0 60px rgba(0, 180, 255, 0.08), 0 28px 100px rgba(0,0,0,0.6);
  backdrop-filter: blur(20px);
  padding: 34px;
}

/* Header */
.hd-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }

.hd-brand { display: flex; align-items: center; gap: 16px; }

.hd-brand-icon {
  font-size: 2.2rem; line-height: 1;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px;
  background: radial-gradient(circle, rgba(0,229,255,0.18), rgba(0,100,200,0.06));
  border: 1px solid rgba(0,229,255,0.22);
  flex-shrink: 0;
  animation: hd-brand-pulse 3s ease-in-out infinite;
}

@keyframes hd-brand-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,229,255,0.3); }
  50%      { box-shadow: 0 0 0 10px rgba(0,229,255,0); }
}

.hd-title {
  margin: 0 0 5px;
  font-family: 'Segoe UI','Helvetica Neue',Arial,sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.1; font-weight: 700; color: var(--color-white);
  background: linear-gradient(90deg, #00e5ff, #7eb8ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hd-lead { margin: 0; color: var(--color-contrast-medium); font-size: 0.9rem; line-height: 1.5; max-width: 560px; }

/* Mode banner */
.hd-mode-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  margin-bottom: 18px; flex-wrap: wrap;
}
.hd-mode-banner--online  { border-color: rgba(72,220,130,0.3); background: rgba(72,220,130,0.04); }
.hd-mode-banner--offline { border-color: rgba(255,180,60,0.3); background: rgba(255,180,60,0.04); }

.hd-mode-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.hd-mode-dot--online  { background: #48dc82; box-shadow: 0 0 8px #48dc82; animation: hd-blink 2s ease-in-out infinite; }
.hd-mode-dot--offline { background: #ffb43c; box-shadow: 0 0 8px #ffb43c; }

@keyframes hd-blink { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

.hd-mode-label { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-white); }
.hd-mode-desc { font-size: 0.82rem; color: var(--color-contrast-medium); flex: 1; }
.hd-mode-actions { margin-left: auto; }

.hd-pill-btn {
  background: rgba(0,229,255,0.08); border: 1px solid rgba(0,229,255,0.22);
  border-radius: 999px; color: var(--color-2); font: inherit; font-size: 11px;
  font-weight: 600; letter-spacing: 0.08em; padding: 5px 14px;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.hd-pill-btn:hover { background: rgba(0,229,255,0.16); border-color: rgba(0,229,255,0.45); }

/* Stats bar */
.hd-stats-bar {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 22px;
}
.hd-stat {
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03); padding: 14px 12px; text-align: center;
}
.hd-stat-label { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-contrast-medium); margin-bottom: 7px; }
.hd-stat-value { font-size: 0.95rem; font-weight: 700; color: var(--color-white); }
.hd-stat-value--on { color: #48dc82; }

/* Tabs */
.hd-tabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 22px; flex-wrap: wrap; }
.hd-tab {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--color-contrast-medium); font-family: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 16px; cursor: pointer; margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.hd-tab.is-active, .hd-tab:hover { color: var(--color-white); border-bottom-color: var(--color-2); }

/* Section label */
.hd-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-2); margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}

/* Badges */
.hd-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.hd-badge--live { background: rgba(72,220,130,0.12); color: #48dc82; border: 1px solid rgba(72,220,130,0.28); }
.hd-badge { background: rgba(255,255,255,0.07); color: var(--color-contrast-medium); border: 1px solid rgba(255,255,255,0.12); }
.hd-soon { font-size: 9px; font-weight: 700; background: rgba(255,180,60,0.12); color: #ffb43c; border-radius: 999px; padding: 1px 6px; margin-left: 4px; }

/* Empty */
.hd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 36px 20px; border-radius: 18px; border: 1px dashed rgba(255,255,255,0.1); color: var(--color-contrast-medium); text-align: center; font-size: 0.88rem; line-height: 1.6; }
.hd-empty-icon { font-size: 2rem; }

/* Provider grid */
.hd-provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 12px; }

.hd-provider-card {
  border-radius: 18px; border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03); padding: 16px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.hd-provider-card:hover { transform: translateY(-2px); }
.hd-provider-card--primary  { border-color: rgba(72,220,130,0.3); background: rgba(72,220,130,0.04); }
.hd-provider-card--replica  { border-color: rgba(0,229,255,0.2); background: rgba(0,229,255,0.03); }
.hd-provider-card--standby  { border-color: rgba(255,255,255,0.07); }

.hd-provider-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.hd-provider-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.hd-provider-name { font-size: 0.85rem; font-weight: 700; color: var(--color-white); }
.hd-provider-cat  { font-size: 0.7rem; color: var(--color-contrast-medium); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.08em; }

.hd-provider-pulse-wrap { margin-left: auto; }
.hd-provider-pulse { width: 10px; height: 10px; border-radius: 50%; }
.hd-provider-pulse--primary { background: #48dc82; box-shadow: 0 0 6px #48dc82; animation: hd-blink 1.5s ease-in-out infinite; }
.hd-provider-pulse--replica { background: var(--color-2); box-shadow: 0 0 6px var(--color-2); animation: hd-blink 2.5s ease-in-out infinite; }
.hd-provider-pulse--standby { background: rgba(255,255,255,0.2); }

.hd-provider-role { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
.hd-provider-role--primary { color: #48dc82; }
.hd-provider-role--replica { color: var(--color-2); }
.hd-provider-role--standby { color: var(--color-contrast-medium); }

.hd-provider-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hd-provider-metric { display: flex; flex-direction: column; gap: 2px; }
.hd-provider-metric-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-contrast-medium); }
.hd-provider-metric-val { font-size: 0.82rem; font-weight: 600; color: var(--color-white); }
.hd-latency--good { color: #48dc82; }
.hd-latency--ok   { color: #ffb43c; }
.hd-latency--slow { color: #ff7070; }

/* Replication canvas */
.hd-replication-canvas {
  position: relative;
  width: 100%; height: 320px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  overflow: hidden;
}

.hd-rep-center { position: absolute; z-index: 2; }

.hd-rep-hub {
  position: relative; width: 80px; height: 80px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,0.22), rgba(0,80,160,0.1));
  border: 2px solid rgba(0,229,255,0.5);
}

.hd-rep-hub-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(0,229,255,0.18);
  animation: hd-ring-expand 3s ease-out infinite;
}
.hd-rep-hub-ring--1 { width: 110px; height: 110px; animation-delay: 0s; }
.hd-rep-hub-ring--2 { width: 150px; height: 150px; animation-delay: 1s; }

@keyframes hd-ring-expand {
  0%   { opacity: 0.7; transform: scale(0.85); }
  100% { opacity: 0; transform: scale(1.1); }
}

.hd-rep-hub-icon { font-size: 1.6rem; line-height: 1; position: relative; z-index: 1; }
.hd-rep-hub-label { font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-2); margin-top: 3px; position: relative; z-index: 1; }

/* Provider nodes orbit */
.hd-rep-nodes { position: absolute; width: 100%; height: 100%; }

.hd-rep-node {
  position: absolute;
  top: 50%; left: 50%;
  --radius: 130px;
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translateX(var(--radius))
    rotate(calc(-1 * var(--angle)));
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  z-index: 2;
}

.hd-rep-node-icon { font-size: 1.4rem; line-height: 1; position: relative; z-index: 1; }
.hd-rep-node-label { font-size: 8px; font-weight: 600; color: var(--color-contrast-medium); text-align: center; white-space: nowrap; }

.hd-rep-node-pulse {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,229,255,0.06); border: 1px solid rgba(0,229,255,0.18);
}
.hd-rep-node--active .hd-rep-node-pulse { background: rgba(72,220,130,0.1); border-color: rgba(72,220,130,0.3); animation: hd-blink 1.5s ease-in-out infinite; }
.hd-rep-node--replica .hd-rep-node-pulse { animation: hd-blink 3s ease-in-out infinite var(--delay); }

/* Data pulse dots travelling from hub to nodes */
.hd-rep-line {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--radius);
  height: 1px;
  background: linear-gradient(90deg, rgba(0,229,255,0.15), transparent);
  transform-origin: left center;
  transform: rotate(calc(var(--angle) + 180deg));
  z-index: 0;
}

.hd-rep-pulse-dot {
  position: absolute;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-2);
  box-shadow: 0 0 6px var(--color-2);
  top: calc(50% - 3px);
  left: calc(50% - 3px);
  animation: hd-pulse-travel 2.5s ease-in-out infinite;
  animation-delay: var(--delay);
  z-index: 3;
}

@keyframes hd-pulse-travel {
  0%   { transform: rotate(calc(var(--angle) + 180deg)) translateX(0);         opacity: 1; }
  80%  { transform: rotate(calc(var(--angle) + 180deg)) translateX(calc(-1 * var(--radius) + 22px)); opacity: 1; }
  100% { transform: rotate(calc(var(--angle) + 180deg)) translateX(calc(-1 * var(--radius) + 22px)); opacity: 0; }
}

/* Rep legend */
.hd-rep-legend { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; font-size: 11px; }
.hd-rep-legend-item { color: var(--color-contrast-medium); }
.hd-rep-legend-item--active  { color: #48dc82; }
.hd-rep-legend-item--replica { color: var(--color-2); }
.hd-rep-legend-item--standby { color: rgba(255,255,255,0.35); }
.hd-rep-legend-item--offline { color: #ffb43c; }

/* Info blocks */
.hd-info-block {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px;
  border-radius: 16px; border: 1px solid rgba(0,229,255,0.14); background: rgba(0,229,255,0.04);
  margin-bottom: 20px;
}
.hd-info-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.hd-info-block strong { display: block; font-size: 0.92rem; color: var(--color-white); margin-bottom: 5px; }
.hd-info-text { font-size: 0.82rem; color: var(--color-contrast-medium); line-height: 1.6; margin: 0; }

/* Failover chain */
.hd-failover-chain { display: flex; flex-direction: column; gap: 4px; }

.hd-fo-row { display: flex; align-items: center; gap: 12px; }
.hd-fo-step {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  color: var(--color-contrast-medium);
}
.hd-fo-node {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.03);
}
.hd-fo-node--active { border-color: rgba(72,220,130,0.3); background: rgba(72,220,130,0.05); }
.hd-fo-icon { font-size: 1.1rem; }
.hd-fo-label { font-size: 0.88rem; font-weight: 600; color: var(--color-white); flex: 1; }
.hd-fo-latency { font-size: 0.78rem; color: var(--color-contrast-medium); flex-shrink: 0; width: 50px; text-align: right; }
.hd-fo-arrow { color: rgba(0,229,255,0.4); font-size: 1rem; padding-left: 36px; }

/* Trigger chips */
.hd-trigger-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-trigger-chip {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; padding: 6px 14px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  color: var(--color-contrast-medium);
}
.hd-trigger-chip--active { border-color: rgba(72,220,130,0.28); background: rgba(72,220,130,0.07); color: #82dc96; }

/* Replication modes */
.hd-rep-modes { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 20px; }
.hd-rep-mode-card {
  padding: 16px 12px; text-align: center; border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.03);
}
.hd-rep-mode-card--active { border-color: rgba(0,229,255,0.28); background: rgba(0,229,255,0.05); }
.hd-rep-mode-icon { font-size: 1.4rem; margin-bottom: 8px; }
.hd-rep-mode-name { font-size: 0.8rem; font-weight: 700; color: var(--color-white); margin-bottom: 4px; }
.hd-rep-mode-desc { font-size: 0.72rem; color: var(--color-contrast-medium); line-height: 1.4; }

/* Rep target list */
.hd-rep-target-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.hd-rep-target-row { display: flex; align-items: center; gap: 12px; }
.hd-rep-target-icon { font-size: 1.2rem; flex-shrink: 0; width: 28px; text-align: center; }
.hd-rep-target-info { flex: 1; }
.hd-rep-target-name { font-size: 0.82rem; font-weight: 600; color: var(--color-white); margin-bottom: 5px; }
.hd-rep-target-bar-wrap { height: 4px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.hd-rep-target-bar { height: 100%; border-radius: 999px; transition: width 0.6s ease; }
.hd-rep-target-status { font-size: 0.75rem; font-weight: 600; color: #48dc82; flex-shrink: 0; width: 70px; text-align: right; }
.hd-rep-target-status--syncing { color: var(--color-2); animation: hd-blink 1.5s ease-in-out infinite; }

/* Sync log */
.hd-sync-log-wrap { }
.hd-sync-log { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
.hd-sync-log-row {
  display: flex; gap: 12px; align-items: baseline;
  padding: 7px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.02); font-size: 0.78rem;
  transition: background 0.3s;
}
.hd-sync-log-row--new { background: rgba(0,229,255,0.07); }
.hd-sync-ts { color: var(--color-contrast-medium); flex-shrink: 0; font-size: 0.72rem; font-family: monospace; }
.hd-sync-msg { color: rgba(200,230,255,0.85); }

/* Load balancing */
.hd-lb-strategies { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.hd-lb-strategy {
  font-size: 11px; font-weight: 600; padding: 7px 14px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: var(--color-contrast-medium);
  display: flex; align-items: center; gap: 6px;
}
.hd-lb-strategy--active { border-color: rgba(0,229,255,0.3); background: rgba(0,229,255,0.08); color: var(--color-white); }

.hd-lb-bars { display: flex; flex-direction: column; gap: 12px; }
.hd-lb-row { display: flex; align-items: center; gap: 12px; }
.hd-lb-icon { font-size: 1.1rem; flex-shrink: 0; width: 24px; text-align: center; }
.hd-lb-name { font-size: 0.82rem; font-weight: 600; color: var(--color-white); width: 100px; flex-shrink: 0; }
.hd-lb-bar-wrap { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.hd-lb-bar { height: 100%; border-radius: 999px; transition: width 0.8s ease; }
.hd-lb-pct { font-size: 0.78rem; font-weight: 700; color: var(--color-white); width: 36px; text-align: right; flex-shrink: 0; }
.hd-lb-latency { font-size: 0.72rem; color: var(--color-contrast-medium); width: 42px; text-align: right; flex-shrink: 0; }

/* Offline */
.hd-offline-providers { margin-bottom: 18px; }
.hd-offline-provider-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-offline-provider-chip {
  font-size: 11px; font-weight: 600; padding: 5px 14px; border-radius: 999px;
  background: rgba(255,180,60,0.1); color: #ffb43c; border: 1px solid rgba(255,180,60,0.28);
}
.hd-queue-list { display: flex; flex-direction: column; gap: 8px; min-height: 80px; margin-bottom: 18px; }
.hd-queue-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 20px; border-radius: 16px; border: 1px dashed rgba(255,255,255,0.1); color: var(--color-contrast-medium); font-size: 0.85rem; text-align: center; }
.hd-offline-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hd-action-btn { min-height: 40px; font-size: 0.85rem; padding: 0 18px; }

@media (max-width: 800px) {
  .hd-stats-bar { grid-template-columns: repeat(3,1fr); }
  .hd-provider-grid { grid-template-columns: repeat(2,1fr); }
  .hd-rep-modes { grid-template-columns: repeat(2,1fr); }
  .hd-replication-canvas { height: 260px; }
}
@media (max-width: 560px) {
  .hd-stats-bar { grid-template-columns: repeat(2,1fr); }
  .hd-provider-grid { grid-template-columns: 1fr; }
  .hd-rep-modes { grid-template-columns: 1fr 1fr; }
  .hd-brand { flex-direction: column; }
}

/* ── SIDE-NAV SECTION LABELS ── */
.side__item--section-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0, 229, 255, 0.45);
  padding: 18px 16px 6px;
  pointer-events: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 6px;
}
.side__item--section-label:first-child { border-top: none; margin-top: 0; }

/* ── SHARED MODAL SHELL (reused across wallet/messaging/onet/onode/map) ── */
.modal__block.wallet-modal-block,
.modal__block.messaging-modal-block,
.modal__block.onet-modal-block,
.modal__block.onode-modal-block,
.modal__block.map-modal-block {
  max-height: calc(100vh - 24px);
  overflow-y: auto; overflow-x: hidden;
  left: 50%; top: 50%; padding: 0;
  background: transparent; box-shadow: none; border-radius: 0; backdrop-filter: none;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  letter-spacing: normal;
}
.modal__block.wallet-modal-block    { width: min(980px,  calc(100vw - 24px)); }
.modal__block.messaging-modal-block { width: min(860px,  calc(100vw - 24px)); }
.modal__block.onet-modal-block      { width: min(960px,  calc(100vw - 24px)); }
.modal__block.onode-modal-block     { width: min(960px,  calc(100vw - 24px)); }
.modal__block.map-modal-block       { width: min(900px,  calc(100vw - 24px)); }

.wallet-shell, .messaging-shell, .onet-shell, .onode-shell, .map-shell { width: 100%; padding: 0; }

.wallet-card, .messaging-card, .onet-card, .onode-card, .map-card {
  width: 100%; border-radius: 30px;
  border: 1px solid rgba(134,215,255,0.16);
  background: rgba(8,18,29,0.92);
  box-shadow: 0 28px 100px rgba(0,0,0,0.46);
  backdrop-filter: blur(18px); padding: 34px;
}

/* Modal tops */
.wallet-top, .messaging-top, .onet-top, .onode-top, .map-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 22px;
}
.wallet-title, .messaging-title, .onet-title, .onode-title, .map-title {
  margin: 0 0 6px;
  font-family: 'Segoe UI','Helvetica Neue',Arial,sans-serif;
  font-size: clamp(1.8rem,3.5vw,2.6rem);
  line-height: 1.1; font-weight: 600; color: var(--color-white);
}
.wallet-lead, .messaging-lead, .onet-lead, .onode-lead, .map-lead {
  margin: 0; color: var(--color-contrast-medium); font-size: 0.95rem; line-height: 1.6;
}

/* Shared stats bar */
.wallet-stats-bar, .messaging-stats-bar, .onet-stats-bar, .onode-stats-bar, .map-stats-bar {
  display: grid; gap: 10px; margin-bottom: 20px;
}
.wallet-stats-bar    { grid-template-columns: repeat(4,1fr); }
.messaging-stats-bar { grid-template-columns: repeat(3,1fr); }
.onet-stats-bar      { grid-template-columns: repeat(4,1fr); }
.onode-stats-bar     { grid-template-columns: repeat(4,1fr); }
.map-stats-bar       { grid-template-columns: repeat(3,1fr); }

.wallet-stat, .onet-stat, .onode-stat, .map-stat, .msg-stat {
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03); padding: 14px 12px; text-align: center;
}
.wallet-stat-label, .onet-stat-label, .onode-stat-label, .map-stat-label, .msg-stat-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-contrast-medium); margin-bottom: 7px;
}
.wallet-stat-value, .onet-stat-value, .onode-stat-value, .map-stat-value, .msg-stat-value {
  font-size: 0.95rem; font-weight: 700; color: var(--color-white);
}
.stat-value--on { color: #48dc82; }

/* Shared status messages */
.wallet-status, .messaging-status, .onet-status, .onode-status, .map-status {
  padding: 12px 16px; border-radius: 14px; font-size: 0.88rem; margin-bottom: 16px;
}
[class$="-status--loading"] { background: rgba(107,208,255,0.07); border: 1px solid rgba(107,208,255,0.2); color: var(--color-2); }
[class$="-status--success"] { background: rgba(72,220,130,0.07);  border: 1px solid rgba(72,220,130,0.25); color: #48dc82; }
[class$="-status--error"]   { background: rgba(255,80,80,0.07);   border: 1px solid rgba(255,80,80,0.25);  color: #ff7070; }
[class$="-status--warn"]    { background: rgba(255,180,60,0.07);  border: 1px solid rgba(255,180,60,0.25); color: #ffb43c; }

/* Shared tabs */
.wallet-tabs, .messaging-tabs, .onet-tabs, .onode-tabs, .map-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 20px; flex-wrap: wrap;
}
.wallet-tab, .messaging-tab, .onet-tab, .onode-tab, .map-tab {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--color-contrast-medium); font-family: inherit; font-size: 12px;
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 16px; cursor: pointer; margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.wallet-tab.is-active, .wallet-tab:hover,
.messaging-tab.is-active, .messaging-tab:hover,
.onet-tab.is-active, .onet-tab:hover,
.onode-tab.is-active, .onode-tab:hover,
.map-tab.is-active, .map-tab:hover {
  color: var(--color-white); border-bottom-color: var(--color-2);
}

/* Shared empty states */
.wallet-empty, .msg-empty, .onet-empty, .onode-empty, .map-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 36px 20px; border-radius: 18px;
  border: 1px dashed rgba(255,255,255,0.1);
  color: var(--color-contrast-medium); text-align: center; font-size: 0.88rem; line-height: 1.6;
}
.wallet-empty-icon, .msg-empty-icon, .onet-empty-icon, .onode-empty-icon, .map-empty-icon { font-size: 2rem; }

/* ── WALLET ── */

.wallet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 14px; }

.wallet-card-item {
  border-radius: 18px; border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.03); padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.15s, background 0.15s;
}
.wallet-card-item:hover { border-color: rgba(107,208,255,0.25); background: rgba(107,208,255,0.04); }
.wallet-card-item--default { border-color: rgba(72,220,130,0.28); background: rgba(72,220,130,0.04); }

.wallet-card-top { display: flex; align-items: center; gap: 12px; }
.wallet-card-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.wallet-card-name { font-size: 0.9rem; font-weight: 700; color: var(--color-white); }
.wallet-card-chain { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-contrast-medium); margin-top: 2px; }
.wallet-card-address {
  font-family: 'Share Tech Mono','Courier New',monospace; font-size: 0.72rem;
  color: var(--color-contrast-medium); opacity: 0.7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wallet-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wallet-default-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(72,220,130,0.12); color: #48dc82; border: 1px solid rgba(72,220,130,0.28);
}
.wallet-copy-btn {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px; color: var(--color-contrast-medium);
  font-size: 10px; padding: 3px 10px; cursor: pointer;
  transition: background 0.15s, color 0.15s; margin-left: auto;
}
.wallet-copy-btn:hover { background: rgba(107,208,255,0.1); color: var(--color-white); }

.wallet-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.wallet-bar-btn { min-height: 36px; font-size: 0.8rem; padding: 0 14px; }

.wallet-tokens-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 10px; }
.wallet-token-card {
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03); padding: 14px;
  display: flex; align-items: center; gap: 12px;
}
.wallet-token-icon { font-size: 1.4rem; flex-shrink: 0; }
.wallet-token-name { font-size: 0.82rem; font-weight: 700; color: var(--color-white); }
.wallet-token-symbol { font-size: 0.72rem; color: var(--color-contrast-medium); }
.wallet-token-balance { font-size: 0.82rem; font-weight: 600; color: var(--color-2); margin-top: 2px; }

.wallet-chains-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 10px; }
.wallet-chain-card {
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03); padding: 16px 12px; text-align: center;
}
.wallet-chain-icon { font-size: 1.6rem; margin-bottom: 6px; }
.wallet-chain-name { font-size: 0.8rem; font-weight: 600; color: var(--color-white); }

.wallet-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.wallet-form-row { display: grid; grid-template-columns: 110px minmax(0,1fr); align-items: center; gap: 14px; }
.wallet-form-label { font-size: 0.78rem; font-weight: 600; color: var(--color-contrast-medium); text-transform: uppercase; letter-spacing: 0.08em; text-align: right; }
.wallet-form-input, .wallet-form-select {
  min-height: 44px; padding: 0 14px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  color: var(--color-white); font: inherit; font-size: 0.9rem;
  transition: border-color 0.15s, background 0.15s;
}
.wallet-form-input::placeholder { color: rgba(255,255,255,0.25); }
.wallet-form-input:focus, .wallet-form-select:focus { outline: none; border-color: rgba(107,208,255,0.45); background: rgba(107,208,255,0.04); }
.wallet-form-select { padding: 0 10px; cursor: pointer; }
.wallet-form-submit { min-height: 44px; align-self: flex-start; margin-left: 124px; }

.wallet-portfolio-value {
  padding: 22px; border-radius: 20px; text-align: center;
  border: 1px solid rgba(72,220,130,0.2); background: rgba(72,220,130,0.04); margin-bottom: 18px;
}
.wallet-portfolio-label { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #48dc82; margin-bottom: 8px; }
.wallet-portfolio-amount { font-size: clamp(2rem,5vw,3.5rem); font-weight: 700; color: var(--color-white); line-height: 1; }

/* ── MESSAGING ── */

.msg-conversations-list, .msg-notifications-list { display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow-y: auto; }

.msg-convo-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03); cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.msg-convo-row:hover { border-color: rgba(107,208,255,0.22); background: rgba(107,208,255,0.04); }
.msg-convo-row--unread { border-color: rgba(107,208,255,0.2); background: rgba(107,208,255,0.05); }

.msg-avatar-circle {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(107,208,255,0.12); border: 1px solid rgba(107,208,255,0.2);
  font-size: 0.9rem; font-weight: 700; color: var(--color-2); text-transform: uppercase;
}
.msg-convo-body { flex: 1; min-width: 0; }
.msg-convo-name { font-size: 0.88rem; font-weight: 700; color: var(--color-white); }
.msg-convo-preview { font-size: 0.78rem; color: var(--color-contrast-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.msg-convo-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.msg-convo-time { font-size: 0.7rem; color: var(--color-contrast-medium); }
.msg-unread-badge {
  font-size: 9px; font-weight: 700; min-width: 18px; height: 18px;
  border-radius: 999px; background: var(--color-2); color: #04111a;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
}

.msg-notif-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
}
.msg-notif-row--unread { border-color: rgba(107,208,255,0.18); background: rgba(107,208,255,0.04); }
.msg-notif-icon { font-size: 1.1rem; flex-shrink: 0; }
.msg-notif-text { font-size: 0.84rem; color: var(--color-white); line-height: 1.5; flex: 1; }
.msg-notif-time { font-size: 0.72rem; color: var(--color-contrast-medium); margin-top: 3px; }

.msg-actions-bar { display: flex; gap: 10px; margin-bottom: 14px; }
.msg-actions-btn { min-height: 36px; font-size: 0.8rem; padding: 0 14px; }

.msg-send-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.msg-send-row { display: grid; grid-template-columns: 100px minmax(0,1fr); align-items: start; gap: 14px; }
.msg-send-label { font-size: 0.78rem; font-weight: 600; color: var(--color-contrast-medium); text-transform: uppercase; letter-spacing: 0.08em; text-align: right; padding-top: 11px; }
.msg-send-input, .msg-send-textarea {
  min-height: 44px; padding: 10px 14px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  color: var(--color-white); font: inherit; font-size: 0.9rem; resize: vertical;
  transition: border-color 0.15s;
}
.msg-send-input::placeholder, .msg-send-textarea::placeholder { color: rgba(255,255,255,0.25); }
.msg-send-input:focus, .msg-send-textarea:focus { outline: none; border-color: rgba(107,208,255,0.45); }
.msg-send-textarea { min-height: 90px; }
.msg-send-submit { min-height: 44px; align-self: flex-start; margin-left: 114px; }

.msg-chat-messages {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 200px; max-height: 300px; overflow-y: auto;
  padding: 14px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02);
  margin-bottom: 12px;
}
.msg-chat-bubble {
  max-width: 70%; padding: 10px 14px; border-radius: 18px; font-size: 0.85rem; line-height: 1.5;
}
.msg-chat-bubble--own {
  align-self: flex-end; background: rgba(0,229,255,0.14); color: var(--color-white);
  border-bottom-right-radius: 4px;
}
.msg-chat-bubble--other {
  align-self: flex-start; background: rgba(255,255,255,0.07); color: var(--color-contrast-high);
  border-bottom-left-radius: 4px;
}
.msg-chat-ts { font-size: 0.68rem; color: var(--color-contrast-medium); margin-top: 4px; }

.msg-chat-input-row { display: flex; gap: 10px; }
.msg-chat-input-row textarea {
  flex: 1; min-height: 44px; max-height: 120px; padding: 10px 14px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: var(--color-white);
  font: inherit; font-size: 0.9rem; resize: none;
}
.msg-chat-input-row textarea:focus { outline: none; border-color: rgba(107,208,255,0.45); }
.msg-chat-send { min-height: 44px; padding: 0 18px; }

.msg-session-bar {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: 14px; border: 1px solid rgba(72,220,130,0.2);
  background: rgba(72,220,130,0.04); margin-bottom: 14px; flex-wrap: wrap;
}
.msg-session-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #48dc82; }
.msg-session-id { font-family: monospace; font-size: 0.75rem; color: var(--color-contrast-medium); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.msg-no-session { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 20px; text-align: center; }
.msg-no-session p { font-size: 0.88rem; color: var(--color-contrast-medium); line-height: 1.6; }

/* ── ONET ── */

.onet-status-banner, .onode-status-banner {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03); margin-bottom: 18px; flex-wrap: wrap;
}
.onet-status-banner--online, .onode-status-banner--online { border-color: rgba(72,220,130,0.3); background: rgba(72,220,130,0.04); }
.onet-status-banner--offline, .onode-status-banner--offline { border-color: rgba(255,180,60,0.3); background: rgba(255,180,60,0.04); }

.onet-status-dot, .onode-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.onet-status-dot--online, .onode-status-dot--online { background: #48dc82; box-shadow: 0 0 8px #48dc82; animation: hd-blink 2s ease-in-out infinite; }
.onet-status-dot--offline, .onode-status-dot--offline { background: #ffb43c; }
.onet-status-label, .onode-status-label { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-white); }
.onet-status-desc, .onode-status-desc { font-size: 0.82rem; color: var(--color-contrast-medium); flex: 1; }

.onet-nodes-list, .onode-peers-list { display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow-y: auto; }

.onet-node-row, .onode-peer-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
}
.onet-node-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.onet-node-dot--online { background: #48dc82; }
.onet-node-dot--offline { background: #ff7070; }
.onet-node-dot--unknown { background: rgba(255,255,255,0.25); }
.onet-node-id { font-family: monospace; font-size: 0.78rem; color: var(--color-contrast-medium); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onet-node-address { font-size: 0.82rem; color: var(--color-white); }
.onet-node-peers, .onet-node-uptime { font-size: 0.75rem; color: var(--color-contrast-medium); flex-shrink: 0; }

.onet-topology, .onet-oasisdna, .onode-oasisdna, .onode-config {
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 16px; font-family: 'Share Tech Mono','Courier New',monospace;
  font-size: 0.75rem; color: rgba(200,230,255,0.85); line-height: 1.6;
  max-height: 360px; overflow-y: auto; white-space: pre-wrap; word-break: break-all;
}

.onet-stats-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 12px; margin-bottom: 18px; }
.onet-stat-card {
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03); padding: 16px; text-align: center;
}
.onet-stat-card-label { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-contrast-medium); margin-bottom: 8px; }
.onet-stat-card-value { font-size: 1.3rem; font-weight: 700; color: var(--color-white); }

.onet-actions-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.onet-action-btn, .onode-ctrl-btn { min-height: 40px; font-size: 0.82rem; padding: 0 16px; }

.onet-broadcast-form { display: flex; flex-direction: column; gap: 12px; }
.onet-broadcast-form textarea {
  min-height: 80px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  color: var(--color-white); font: inherit; font-size: 0.9rem; resize: vertical;
}
.onet-broadcast-form textarea:focus { outline: none; border-color: rgba(107,208,255,0.45); }
.onet-broadcast-submit { min-height: 44px; align-self: flex-start; }

/* ── ONODE ── */

.onode-info-grid { display: flex; flex-direction: column; gap: 8px; }
.onode-info-row {
  display: grid; grid-template-columns: 130px minmax(0,1fr); align-items: baseline;
  gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.onode-info-row:last-child { border-bottom: none; }
.onode-info-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-contrast-medium); }
.onode-info-value { font-size: 0.88rem; color: var(--color-white); word-break: break-all; }

.onode-metrics-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 12px; }
.onode-metric-card {
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03); padding: 16px;
}
.onode-metric-label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-2); margin-bottom: 10px; }
.onode-metric-bar-wrap { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; margin-bottom: 6px; }
.onode-metric-bar { height: 100%; border-radius: 999px; background: var(--color-2); transition: width 0.6s ease; }
.onode-metric-value { font-size: 0.88rem; font-weight: 700; color: var(--color-white); }

.onode-log-viewer {
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 14px; font-family: 'Share Tech Mono','Courier New',monospace;
  font-size: 0.72rem; color: rgba(180,220,180,0.9); line-height: 1.7;
  max-height: 340px; overflow-y: auto; white-space: pre-wrap; word-break: break-all;
}
.onode-log-controls { display: flex; gap: 8px; margin-bottom: 10px; }
.onode-log-clear { min-height: 32px; font-size: 0.78rem; padding: 0 12px; }

.onode-ctrl-bar {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-top: 18px; margin-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* ── MAP ── */

.map-location-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 12px; min-height: 120px; }

.map-location-card {
  border-radius: 18px; border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03); padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 0.15s, transform 0.15s;
}
.map-location-card:hover { border-color: rgba(107,208,255,0.25); transform: translateY(-2px); }
.map-location-icon { font-size: 1.6rem; line-height: 1; }
.map-location-name { font-size: 0.9rem; font-weight: 700; color: var(--color-white); }
.map-location-desc { font-size: 0.78rem; color: var(--color-contrast-medium); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.map-location-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.map-location-dist { font-size: 0.72rem; color: var(--color-contrast-medium); }
.map-visit-btn { min-height: 30px; font-size: 0.75rem; padding: 0 12px; margin-top: auto; align-self: flex-start; }

.map-history-list { display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow-y: auto; }
.map-history-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.03);
}
.map-history-icon { font-size: 1.1rem; flex-shrink: 0; }
.map-history-name { font-size: 0.88rem; font-weight: 600; color: var(--color-white); flex: 1; }
.map-history-date { font-size: 0.72rem; color: var(--color-contrast-medium); flex-shrink: 0; }

.map-search-bar { display: flex; gap: 10px; margin-bottom: 16px; }
.map-search-input {
  flex: 1; min-height: 46px; padding: 0 16px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05);
  color: var(--color-white); font: inherit; font-size: 0.95rem;
}
.map-search-input::placeholder { color: rgba(255,255,255,0.28); }
.map-search-input:focus { outline: none; border-color: rgba(107,208,255,0.5); }
.map-search-submit { min-height: 46px; padding: 0 20px; font-size: 0.9rem; }

.map-controls-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.map-control-group { display: flex; flex-direction: column; gap: 8px; }
.map-control-group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-2); margin-bottom: 4px; }
.map-control-row { display: flex; gap: 8px; align-items: center; }
.map-ctrl-input {
  flex: 1; min-height: 38px; padding: 0 12px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  color: var(--color-white); font: inherit; font-size: 0.85rem;
}
.map-ctrl-input:focus { outline: none; border-color: rgba(107,208,255,0.45); }
.map-ctrl-btn { min-height: 38px; font-size: 0.78rem; padding: 0 12px; }

.map-dir-grid { display: grid; grid-template-columns: repeat(3,40px); gap: 6px; }
.map-dir-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }

.map-stats-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 12px; }
.map-stat-card {
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03); padding: 16px; text-align: center;
}
.map-stat-card-label { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-contrast-medium); margin-bottom: 8px; }
.map-stat-card-value { font-size: 1.3rem; font-weight: 700; color: var(--color-white); }

/* ── KARMA STATS TAB ── */
.karma-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 12px;
}
.karma-stat-card {
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03); padding: 18px; text-align: center;
}
.karma-stat-card-label { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-2); margin-bottom: 10px; }
.karma-stat-card-value { font-size: 1.6rem; font-weight: 700; color: var(--color-white); line-height: 1; }
.karma-stat-card-value--positive { color: #48dc82; }
.karma-stat-card-value--negative { color: #ff7070; }

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
  .wallet-stats-bar, .onet-stats-bar, .onode-stats-bar { grid-template-columns: repeat(2,1fr); }
  .wallet-grid, .map-location-grid { grid-template-columns: 1fr; }
  .wallet-form-row, .msg-send-row, .messaging-form-row { grid-template-columns: 1fr; }
  .wallet-form-label, .msg-send-label, .messaging-form-label { text-align: left; padding-top: 0; }
  .wallet-form-submit, .msg-send-submit { margin-left: 0; }
  .map-controls-grid { grid-template-columns: 1fr; }
  .onode-info-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ── AGENT CLASS ALIASES (agents used -modal- prefix variants) ── */

/* Shells */
.wallet-modal-shell, .messaging-modal-shell, .onet-modal-shell, .onode-modal-shell, .map-modal-shell {
  width: 100%; padding: 0;
}

/* Cards */
.wallet-modal-card, .messaging-modal-card, .onet-modal-card, .onode-modal-card, .map-modal-card {
  width: 100%; border-radius: 30px;
  border: 1px solid rgba(134,215,255,0.16);
  background: rgba(8,18,29,0.92);
  box-shadow: 0 28px 100px rgba(0,0,0,0.46);
  backdrop-filter: blur(18px); padding: 34px;
}

/* Tops */
.wallet-modal-top, .messaging-modal-top, .onet-modal-top, .onode-modal-top, .map-modal-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 22px;
}

/* Titles */
.wallet-modal-title, .messaging-modal-title, .onet-modal-title, .onode-modal-title, .map-modal-title {
  margin: 0 0 6px;
  font-family: 'Segoe UI','Helvetica Neue',Arial,sans-serif;
  font-size: clamp(1.8rem,3.5vw,2.6rem);
  line-height: 1.1; font-weight: 600; color: var(--color-white);
}

/* Leads */
.wallet-modal-lead, .messaging-modal-lead, .onet-modal-lead, .onode-modal-lead, .map-modal-lead {
  margin: 0; color: var(--color-contrast-medium); font-size: 0.95rem; line-height: 1.6;
}

/* Stats bar item aliases (-stat-block → same as -stat) */
.wallet-stat-block, .onet-stat-block, .onode-stat-block, .map-stat-block {
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03); padding: 14px 12px; text-align: center;
}

/* Messaging uses messaging-stat (not msg-stat) */
.messaging-stat {
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03); padding: 14px 12px; text-align: center;
}
.messaging-stat-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-contrast-medium); margin-bottom: 7px;
}
.messaging-stat-value { font-size: 0.95rem; font-weight: 700; color: var(--color-white); }

/* Tab panels — block by default, hidden when [hidden] */
.wallet-tab-panel, .messaging-tab-panel, .onet-tab-panel, .onode-tab-panel, .map-tab-panel {
  display: block;
}
.wallet-tab-panel[hidden], .messaging-tab-panel[hidden],
.onet-tab-panel[hidden], .onode-tab-panel[hidden], .map-tab-panel[hidden] {
  display: none;
}

/* Panel action bars */
.wallet-panel-actions, .messaging-panel-actions {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}

/* Messaging empty states */
.messaging-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 36px 20px; border-radius: 18px;
  border: 1px dashed rgba(255,255,255,0.1);
  color: var(--color-contrast-medium); text-align: center; font-size: 0.88rem; line-height: 1.6;
}
.messaging-empty-icon { font-size: 2rem; }

/* Messaging send form */
.messaging-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.messaging-form-row { display: grid; grid-template-columns: 110px minmax(0,1fr); align-items: start; gap: 14px; }
.messaging-form-label {
  font-size: 0.78rem; font-weight: 600; color: var(--color-contrast-medium);
  text-transform: uppercase; letter-spacing: 0.08em; text-align: right; padding-top: 11px;
}
.messaging-form-input, .messaging-form-textarea {
  padding: 10px 14px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  color: var(--color-white); font: inherit; font-size: 0.9rem; width: 100%;
}
.messaging-form-input { min-height: 44px; padding: 0 14px; }
.messaging-form-textarea { min-height: 100px; resize: vertical; }
.messaging-form-input::placeholder, .messaging-form-textarea::placeholder { color: rgba(255,255,255,0.25); }
.messaging-form-input:focus, .messaging-form-textarea:focus { outline: none; border-color: rgba(107,208,255,0.45); }

/* Chat session header */
.msg-chat-session-header {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: 14px; border: 1px solid rgba(72,220,130,0.2);
  background: rgba(72,220,130,0.04); margin-bottom: 14px; flex-wrap: wrap;
}
.msg-chat-session-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #48dc82; }
.msg-chat-session-id { font-family: monospace; font-size: 0.75rem; color: var(--color-contrast-medium); }

/* Chat input textarea */
.msg-chat-input-textarea {
  flex: 1; min-height: 44px; max-height: 120px; padding: 10px 14px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: var(--color-white);
  font: inherit; font-size: 0.9rem; resize: none;
}
.msg-chat-input-textarea:focus { outline: none; border-color: rgba(107,208,255,0.45); }

/* HyperDrive banner reused by ONET/ONODE — left side flex fix */
.hd-mode-banner-left { display: flex; align-items: center; gap: 10px; flex: 1; }

/* Map utilities */
.map-search-form { display: flex; gap: 10px; margin-bottom: 16px; }
.map-nearby-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.map-controls-info { margin-bottom: 16px; }
.map-dim { font-size: 0.85rem; color: var(--color-contrast-medium); line-height: 1.6; margin: 0; }
.map-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-2); margin-bottom: 10px; margin-top: 4px;
}
.map-ctrl-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.map-ctrl-input--wide { flex: 1; min-width: 180px; }

/* ONET utilities */
.onet-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-2); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.onet-action-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.onet-health-bars { display: flex; flex-direction: column; gap: 10px; }
.onet-preformatted {
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 16px; font-family: 'Share Tech Mono','Courier New',monospace;
  font-size: 0.75rem; color: rgba(200,230,255,0.85); line-height: 1.6;
  max-height: 360px; overflow-y: auto; white-space: pre-wrap; word-break: break-all;
  margin: 0;
}
.onet-textarea {
  width: 100%; min-height: 80px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  color: var(--color-white); font: inherit; font-size: 0.9rem; resize: vertical;
  display: block; margin-bottom: 12px; box-sizing: border-box;
}
.onet-textarea:focus { outline: none; border-color: rgba(107,208,255,0.45); }

/* ONODE utilities */
.onode-preformatted {
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 16px; font-family: 'Share Tech Mono','Courier New',monospace;
  font-size: 0.75rem; color: rgba(200,230,255,0.85); line-height: 1.6;
  max-height: 360px; overflow-y: auto; white-space: pre-wrap; word-break: break-all;
  margin: 0;
}
.onode-logs-toolbar { display: flex; gap: 8px; margin-bottom: 10px; }
.onode-controls {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-top: 18px; margin-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
}