:root {
  --bg-a: #dae3f0;
  --bg-b: #b8c5d8;
  --chrome: #d5dbe5;
  --chrome-dark: #a5afbd;
  --panel: #eef2f8;
  --line: #6d7580;
  --line-soft: #9aa6b8;
  --ink: #19212d;
  --accent: #1d4e92;
  --accent-soft: #3d74bf;
  --ok: #2c7a3f;
  --warn: #8b5c16;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Trebuchet MS", Verdana, Tahoma, sans-serif;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0)),
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.12) 0px,
      rgba(255, 255, 255, 0.12) 6px,
      transparent 6px,
      transparent 12px
    ),
    linear-gradient(180deg, var(--bg-a), var(--bg-b));
}

.hidden {
  display: none !important;
}

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.boot-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}

.boot-window {
  width: min(460px, 100%);
  border: 2px solid var(--line);
  box-shadow: 0 0 0 2px #f3f6fb inset, 0 8px 22px rgba(17, 28, 44, 0.25);
  background: var(--panel);
}

.boot-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: linear-gradient(180deg, #315f9b, #244a7a);
  color: #f6fbff;
  font-size: 13px;
}

.boot-titlebar-dots {
  font-size: 11px;
  opacity: 0.9;
}

.boot-content {
  padding: 18px;
  text-align: center;
}

.boot-logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
}

.boot-message {
  margin: 12px 0 10px;
  font-size: 15px;
}

.boot-progress {
  height: 16px;
  border: 1px solid #616a76;
  background: #f8fbff;
  padding: 2px;
}

#boot-progress-bar {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #2f5d9b, #5c8fd7);
  transition: width 150ms linear;
}

.portal-app {
  width: min(1200px, calc(100vw - 24px));
  margin: 12px auto;
  border: 2px solid var(--line);
  background: #dce4ef;
  box-shadow: 0 0 0 2px #eff4fb inset, 0 10px 28px rgba(12, 20, 31, 0.24);
}

.portal-chrome {
  border-bottom: 2px solid var(--line);
  background: var(--chrome);
}

.tab-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, #e6ebf3, #ccd4e1);
}

.tab {
  border: 1px solid var(--line);
  border-bottom-color: #edf2fa;
  background: #eff3fa;
  color: var(--ink);
  font-size: 12px;
  padding: 5px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tab.active {
  background: #f9fbff;
  font-weight: 700;
}

.tab.ghost {
  opacity: 0.88;
}

.tab-news-alert {
  animation: news-tab-pulse 0.85s step-end infinite;
  border-color: #8a1f1f;
}

@keyframes news-tab-pulse {
  0%,
  100% {
    background: #ffe5e5;
    color: #7b1111;
    box-shadow: 0 0 0 1px rgba(154, 28, 28, 0.45) inset;
  }
  50% {
    background: #fff39d;
    color: #5f4500;
    box-shadow: 0 0 0 1px rgba(176, 123, 0, 0.55) inset;
  }
}

.tab-favicon {
  width: 14px;
  height: 14px;
  border: 1px solid #3f4c63;
  background: #e2ebf9;
  color: #1f3f6b;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
}

.chrome-indicators {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.indicator {
  border: 1px solid var(--line-soft);
  font-size: 11px;
  padding: 3px 6px;
  background: #e7ecf4;
}

.indicator.connected {
  color: var(--ok);
}

.toolbar-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.nav-buttons,
.extra-buttons {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.address-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  min-width: 0;
}

.address-input {
  width: 100%;
  border: 1px solid #4b5668;
  padding: 7px 8px;
  font-size: 14px;
  background: #fff;
  font-family: "Trebuchet MS", Verdana, Tahoma, sans-serif;
}

.ui-btn {
  border: 1px solid #535f73;
  background: linear-gradient(180deg, #fdfefe, #d6deea);
  color: #162133;
  padding: 6px 9px;
  font-size: 12px;
  cursor: pointer;
  font-family: "Trebuchet MS", Verdana, Tahoma, sans-serif;
}

.ui-btn:hover {
  background: linear-gradient(180deg, #ffffff, #c9d4e3);
}

.ui-btn:active {
  background: linear-gradient(180deg, #c9d4e3, #f2f6fc);
}

.ui-btn.small {
  padding: 5px 7px;
  font-size: 11px;
}

.ui-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.ui-select {
  border: 1px solid #4f5b70;
  background: #fff;
  color: #1a2538;
  padding: 5px 8px;
  font-size: 12px;
  font-family: "Trebuchet MS", Verdana, Tahoma, sans-serif;
  height: 30px;
}

.ui-select.small {
  height: 28px;
  font-size: 12px;
  padding: 4px 6px;
}

.go-btn {
  min-width: 64px;
}

.bookmark-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px;
  background: #d2dae8;
}

.bookmark-btn {
  border: 1px solid #657088;
  background: #ecf1f9;
  font-size: 12px;
  padding: 5px 8px;
  cursor: pointer;
  color: #253147;
}

.bookmark-btn.active {
  background: #dce8fb;
  border-color: #2d5e9f;
  color: #1d477f;
  font-weight: 700;
}

.bookmark-news-alert {
  animation: news-tab-pulse 0.85s step-end infinite;
}

.workspace {
  min-height: 62vh;
  background: #f5f8fd;
  border-top: 1px solid #fff;
  position: relative;
}

.page-loader {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, #3c67a7, #82a9e4);
  opacity: 0;
  transition: width 180ms linear, opacity 120ms linear;
}

.page-loader.running {
  opacity: 1;
}

.view-root {
  padding: 18px;
}

.page h1 {
  margin: 0 0 12px;
  font-size: 26px;
  color: #1a406f;
}

.page h2 {
  margin: 18px 0 10px;
  font-size: 20px;
  color: #233f66;
}

.page p,
.page li {
  line-height: 1.5;
  font-size: 15px;
}

.home-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 14px;
  border: 1px solid #8a97aa;
  background: linear-gradient(180deg, #fefefe, #e8eef8);
}

.home-hero img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.home-logo-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  overflow: hidden;
}

.home-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-mouth-slot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  clip-path: ellipse(18px 6px at 57% 66%);
  pointer-events: none;
}

.logo-mouth-top,
.logo-mouth-bottom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 57% 66%;
  transform: translateY(0px);
}

.logo-mouth-top {
  clip-path: inset(0 0 50% 0);
}

.logo-mouth-bottom {
  clip-path: inset(50% 0 0 0);
}

.home-logo-wrap.talking .logo-mouth-slot {
  opacity: 1;
}

.home-logo-wrap.talking .logo-mouth-top {
  animation: logo-mouth-top-talk 240ms ease-in-out infinite;
}

.home-logo-wrap.talking .logo-mouth-bottom {
  animation: logo-mouth-bottom-talk 240ms ease-in-out infinite;
}

@keyframes logo-mouth-top-talk {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-0.6px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes logo-mouth-bottom-talk {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(2.4px);
  }
  100% {
    transform: translateY(0px);
  }
}

.home-typing-line {
  min-height: 48px;
  margin: 0;
}

.typing-caret {
  display: inline-block;
  width: 1ch;
  color: #1f4d85;
  animation: caret-blink 800ms step-end infinite;
}

@keyframes caret-blink {
  0%,
  45% {
    opacity: 1;
  }
  46%,
  100% {
    opacity: 0;
  }
}

.home-quick-hint {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px dashed #8a98ad;
  background: #f7fafd;
  font-size: 13px;
}

.window-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.app-tile {
  border: 1px solid #7a879c;
  background: #edf2fa;
  cursor: pointer;
  position: relative;
  min-height: 128px;
  display: flex;
  flex-direction: column;
}

.app-tile:focus-visible {
  outline: 2px solid #2f66ad;
  outline-offset: 2px;
}

.app-tile.selected {
  border-color: #3367ad;
  box-shadow: 0 0 0 2px rgba(51, 103, 173, 0.2) inset;
}

.tile-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #dbe5f2, #bdcada);
  border-bottom: 1px solid #8f9cb0;
  padding: 6px 8px;
  font-size: 13px;
  color: #1f3453;
}

.tile-body {
  padding: 8px;
  display: grid;
  gap: 8px;
}

.tile-icon {
  width: 22px;
  height: 22px;
  border: 1px solid #68758a;
  background: #f8faff;
  display: grid;
  place-items: center;
  color: #264a7a;
  font-weight: 700;
  font-size: 12px;
}

.tile-open-btn {
  display: none;
  justify-self: start;
}

.tile-tooltip {
  position: fixed;
  z-index: 12;
  border: 1px solid #6f7a8e;
  background: #fffde8;
  color: #332b0d;
  font-size: 12px;
  max-width: 260px;
  padding: 6px 8px;
  box-shadow: 2px 2px 0 rgba(80, 66, 21, 0.25);
  pointer-events: none;
}

table.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.spec-table th,
table.spec-table td {
  border: 1px solid #8d9ab0;
  padding: 8px;
  text-align: left;
}

table.spec-table th {
  background: #e2e9f5;
}

.download-list,
.link-list,
.faq-list {
  border: 1px solid #8a96a8;
  background: #fdfefe;
  padding: 10px;
}

.about-page {
  display: grid;
  gap: 12px;
}

.about-intro {
  margin: 0;
}

.about-adv {
  border: 1px solid #b7c4d6;
  background: #f7faff;
  padding: 10px;
}

.about-adv-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #ccd6e5;
  padding-bottom: 6px;
}

.about-adv-head h2 {
  margin: 0;
  font-size: 20px;
}

.about-adv-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.about-adv-card {
  position: relative;
  border: 1px solid #bdcadc;
  background: #f9fbff;
  padding: 10px 10px 10px 40px;
}

.about-adv-index {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  border: 1px solid #7a8aa2;
  background: #e6eefb;
  color: #1f4372;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.about-adv-card h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: #1f3658;
}

.about-adv-card p {
  margin: 0;
}

.wallets-page {
  display: grid;
  gap: 12px;
}

.wallets-intro {
  margin: 0;
}

.wallet-ui-shell {
  border: 1px solid #8f96a3;
  background: #edf0f6;
  box-shadow: inset 0 1px 0 #f8fbff;
  font-family: "DejaVu Sans Mono", Consolas, "Lucida Console", monospace;
  color: #1f2b3c;
  overflow: hidden;
}

.wallet-ui-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  border-bottom: 1px solid #aab2bf;
  background: linear-gradient(180deg, #d7d9df, #c7ccd4);
  color: #2f3644;
  font-size: 13px;
  font-weight: 700;
}

.wallet-ui-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.wallet-ui-logo {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #5f6b7d;
  object-fit: cover;
  background: #f1f4f9;
  display: block;
}

.wallet-ui-badge {
  width: 18px;
  height: 18px;
  border: 1px solid #62708a;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f2d574;
  color: #1b2d48;
  font-size: 11px;
}

.wallet-ui-controls {
  letter-spacing: 2px;
  color: #485164;
  font-size: 12px;
}

.wallet-ui-menubar {
  display: flex;
  gap: 24px;
  padding: 8px 12px;
  border-bottom: 1px solid #b6becc;
  background: #eef2f8;
  font-size: 13px;
  color: #283448;
}

.wallet-ui-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 10px 12px;
}

.wallet-ui-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #9fb5d4;
  border-radius: 9px;
  padding: 8px 14px;
  background: linear-gradient(180deg, #e8edf4, #dbe3ed);
  color: #2a3851;
  font-size: 12px;
  cursor: pointer;
}

.wallet-ui-tab.active {
  background: linear-gradient(180deg, #58a7e3, #2f86cb);
  border-color: #4d93c9;
  color: #f5faff;
}

.wallet-tab-ico {
  width: 15px;
  height: 15px;
  position: relative;
  flex: 0 0 15px;
  color: #3187cd;
}

.wallet-tab-ico::before {
  content: "";
  position: absolute;
  inset: 0;
  font-size: 14px;
  line-height: 15px;
  text-align: center;
  color: currentColor;
}

.wallet-tab-ico-overview::before {
  content: "⌂";
}

.wallet-tab-ico-send::before {
  content: "➶";
}

.wallet-tab-ico-receive::before {
  content: "⊔";
}

.wallet-tab-ico-transactions::before {
  content: "▭";
}

.wallet-tab-ico-nicknames::before {
  content: "@";
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
}

.wallet-ui-tab.active .wallet-tab-ico {
  color: #eff7ff;
}

.wallet-ui-tab.active .wallet-tab-ico::before {
  color: currentColor;
}

.wallet-tab-panels {
  margin: 0 12px 10px;
  height: 420px;
  position: relative;
  border: 1px solid #aeb6c3;
  background: #e3e7ee;
}

.wallet-tab-panel {
  display: none;
  position: absolute;
  inset: 0;
  padding: 10px;
  overflow: auto;
}

.wallet-tab-panel.active {
  display: block;
}

.wallet-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 10px;
}

.wallet-panel {
  border: 1px solid #a8b0be;
  background: #eceff4;
  padding: 10px;
}

.wallet-panel h2 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #1f2939;
}

.wallet-balance-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
}

.wallet-balance-row strong {
  font-weight: 700;
  white-space: nowrap;
}

.wallet-panel hr {
  border: 0;
  border-top: 1px solid #a9b1bf;
  margin: 8px 0 12px;
}

.wallet-tx-list {
  border: 1px solid #b3bccb;
  border-radius: 10px;
  background: #dfe3ea;
  padding: 6px 8px;
}

.wallet-tx-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #c4cad7;
}

.wallet-tx-row:last-child {
  border-bottom: 0;
}

.wallet-tx-icon {
  width: 34px;
  height: 34px;
  border: 1px solid #9baac0;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #eff3f9;
  position: relative;
}

.wallet-tx-icon::before {
  display: block;
  font-size: 15px;
  line-height: 1;
}

.wallet-tx-icon-generated::before {
  content: "⬢";
  color: #4e6f95;
}

.wallet-tx-icon-sent::before {
  content: "➜";
  color: #8f3b3b;
}

.wallet-tx-meta {
  min-width: 0;
}

.wallet-tx-time {
  font-size: 13px;
  font-weight: 700;
}

.wallet-tx-id {
  font-size: 12px;
  color: #6c7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wallet-tx-amount {
  font-size: 13px;
  white-space: nowrap;
}

.wallet-tx-amount-in {
  color: #2f4057;
  font-weight: 700;
}

.wallet-tx-amount-out {
  color: #b62a2a;
  font-weight: 700;
}

.wallet-screen-footer {
  margin-top: 16px;
  margin-left: 0;
  max-width: none;
  padding: 2px 0 0;
  font-size: 13px;
  line-height: 1.35;
}

.wallet-screen-footer-title {
  font-weight: 700;
  margin-bottom: 2px;
}

.wallet-row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto auto;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
}

.wallet-row label {
  font-size: 12px;
  white-space: nowrap;
  line-height: 1.1;
  color: #2c4060;
}

.wallet-row input,
.wallet-row select {
  border: 1px solid #a9b4c6;
  background: #f6f8fb;
  padding: 6px 7px;
  color: #2a3952;
  font-size: 12px;
  font-family: inherit;
}

.wallet-row select {
  min-width: 74px;
}

.wallet-row-amount {
  grid-template-columns: 56px 150px 74px 1fr;
}

.wallet-amount-input {
  max-width: 150px;
}

.wallet-mini-btn {
  border: 1px solid #9db3d3;
  border-radius: 9px;
  background: linear-gradient(180deg, #f6f9fc, #e7edf5);
  color: #2f4f77;
  padding: 6px 9px;
  font-size: 12px;
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.wallet-mini-btn.wide {
  min-width: 84px;
}

.wallet-mini-btn-icon {
  width: 28px;
  min-width: 28px;
  padding: 0;
}

.wallet-mini-btn-icon::before {
  font-size: 13px;
  line-height: 1;
}

.wallet-mini-btn-add::before {
  content: "+";
}

.wallet-mini-btn-book::before {
  content: "▦";
}

.wallet-mini-btn-clear::before {
  content: "x";
}

.wallet-action-row {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.wallet-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #6b88ad;
  border-radius: 9px;
  background: linear-gradient(180deg, #5faee8, #458dca);
  color: #f4f9ff;
  padding: 7px 11px;
  font-size: 12px;
}

.wallet-action-btn.subtle {
  border-color: #9eb5d3;
  background: linear-gradient(180deg, #f6f9fc, #e7edf5);
  color: #2f4f77;
}

.wallet-btn-ico {
  width: 11px;
  height: 11px;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
}

.wallet-btn-ico-send::before {
  content: "➜";
}

.wallet-btn-ico-clear::before {
  content: "x";
}

.wallet-btn-ico-add::before {
  content: "+";
}

.wallet-btn-ico-receive::before {
  content: "⬇";
}

.wallet-btn-ico-show::before {
  content: "◻";
}

.wallet-btn-ico-remove::before {
  content: "-";
}

.wallet-btn-ico-export::before {
  content: "➶";
}

.wallet-btn-ico-check::before {
  content: "✓";
}

.wallet-btn-ico-actions::before {
  content: "≡";
}

.wallet-btn-ico-refresh::before {
  content: "↻";
}

.wallet-check {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.wallet-send-space {
  height: 190px;
  border-top: 1px solid #a7afbc;
  border-bottom: 1px solid #a7afbc;
  margin-bottom: 8px;
}

.wallet-send-fee {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid #a9b2c1;
  background: #e8edf4;
  font-size: 13px;
}

.wallet-send-actions {
  justify-content: flex-start;
}

.wallet-balance-foot {
  margin-left: auto;
  font-size: 14px;
  white-space: nowrap;
}

.wallet-screen-receive .wallet-row {
  grid-template-columns: 56px 1fr;
}

.wallet-screen-receive .wallet-row-amount {
  grid-template-columns: 56px 150px 74px;
}

.wallet-info-line {
  margin: 0 0 10px;
  font-size: 14px;
}

.wallet-history-box {
  margin-top: 10px;
  border: 1px solid #abb4c2;
  background: #e9edf4;
  padding: 8px;
}

.wallet-history-box h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.wallet-alert-line {
  margin-bottom: 8px;
  border: 1px solid #b7c5d8;
  background: #d5deea;
  color: #416083;
  padding: 7px;
}

.wallet-nick-folds {
  padding-top: 10px;
}

.wallet-nick-head {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.wallet-nick-head h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1;
}

.wallet-nick-head span {
  color: #5a7091;
  font-size: 12px;
}

.wallet-nick-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 2px;
}

.wallet-nick-tab {
  border: 1px solid #aeb9cb;
  border-bottom: 0;
  background: #dfdfdf;
  padding: 4px 12px;
  font-size: 13px;
  color: #1f2b3c;
  cursor: pointer;
}

.wallet-nick-tab + .wallet-nick-tab {
  margin-left: -1px;
}

.wallet-nick-tab.active {
  background: #f0f3f8;
  position: relative;
  z-index: 2;
}

.wallet-nick-panel {
  display: none;
  border: 1px solid #aeb9cb;
  background: #f0f3f8;
  padding: 2px;
}

.wallet-nick-panel.active {
  display: block;
}

.wallet-nick-panel .wallet-table {
  font-size: 12px;
}

.wallet-filter-row {
  display: grid;
  grid-template-columns: 110px 110px 1fr 98px;
  gap: 0;
  margin-bottom: 2px;
}

.wallet-filter-row select,
.wallet-filter-row input {
  border: 1px solid #9fb5d4;
  border-radius: 9px;
  background: #e7ebf1;
  padding: 6px 8px;
  color: #2a3952;
  font-size: 13px;
  font-family: inherit;
}

.wallet-filter-row select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #355d8f 50%), linear-gradient(135deg, #355d8f 50%, transparent 50%);
  background-position: calc(100% - 14px) 52%, calc(100% - 10px) 52%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.wallet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.wallet-table th,
.wallet-table td {
  border: 1px solid #b6c0cf;
  padding: 7px;
  text-align: left;
}

.wallet-table th {
  background: #e9eff8;
}

.wallet-history-actions {
  margin-top: 8px;
  justify-content: flex-start;
}

.wallet-amount-in {
  color: #2f3542;
  font-weight: 700;
}

.wallet-amount-out {
  color: #bf2b2b;
  font-weight: 700;
}

.wallet-transactions-actions {
  justify-content: flex-end;
}

.wallet-screen-transactions .wallet-table {
  table-layout: fixed;
  border: 1px solid #b9c4d4;
}

.wallet-screen-transactions .wallet-table th,
.wallet-screen-transactions .wallet-table td {
  font-size: 12px;
  padding: 5px 6px;
}

.wallet-screen-transactions .wallet-table th:nth-child(1),
.wallet-screen-transactions .wallet-table td:nth-child(1) {
  width: 28px;
}

.wallet-screen-transactions .wallet-table th:nth-child(2),
.wallet-screen-transactions .wallet-table td:nth-child(2) {
  width: 114px;
}

.wallet-screen-transactions .wallet-table th:nth-child(4),
.wallet-screen-transactions .wallet-table td:nth-child(4) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wallet-screen-transactions .wallet-table th:nth-child(5),
.wallet-screen-transactions .wallet-table td:nth-child(5) {
  width: 128px;
  text-align: right;
}

.wallet-screen-transactions .wallet-table th {
  background: #dce3ec;
}

.wallet-screen-transactions .wallet-table tbody tr:nth-child(odd) {
  background: #e0e3e8;
}

.wallet-screen-transactions .wallet-table tbody tr:nth-child(even) {
  background: #d7dce3;
}

.wallet-state-cell {
  text-align: center;
}

.wallet-state-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  position: relative;
  color: #111;
}

.wallet-state-icon::before {
  position: absolute;
  inset: 0;
  font-size: 13px;
  line-height: 14px;
  text-align: center;
}

.wallet-state-icon-confirmed::before {
  content: "✓";
}

.wallet-state-icon-confirming::before {
  content: "◔";
}

.wallet-state-icon-pending::before {
  content: "◷";
}

.wallet-tx-label-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wallet-type-icon {
  width: 13px;
  text-align: center;
  color: #111;
  flex: 0 0 13px;
}

.wallet-type-icon-mined::before {
  content: "⛏";
}

.wallet-type-icon-payment::before {
  content: "↻";
}

.wallet-tx-label-text {
  color: #7a7f87;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wallet-screen-nicknames {
  padding-top: 4px;
}

.wallet-nick-hub-title {
  text-align: center;
  margin: 2px 0 4px;
  font-size: 42px;
}

.wallet-nick-hub-sub {
  margin: 0 0 10px;
  text-align: center;
  color: #4e678a;
}

.wallet-screen-nicknames .wallet-row {
  grid-template-columns: 72px 1fr auto auto auto;
}

.wallet-nick-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 20px;
  margin-top: 6px;
  margin-bottom: 8px;
}

.wallet-nick-status div {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
}

.wallet-nick-status span {
  color: #4f6587;
}

.wallet-downloads {
  border: 2px solid #87a9d1;
  background: linear-gradient(180deg, #eaf4ff, #dcecff);
  padding: 12px;
  box-shadow: inset 0 1px 0 #f7fbff;
}

.wallet-downloads-prominent {
  margin-bottom: 10px;
}

.wallet-downloads-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #b4cae6;
  padding-bottom: 8px;
}

.wallet-downloads-head h2 {
  margin: 0;
  font-size: 21px;
  color: #1b3f73;
}

.wallet-downloads-head span {
  font-size: 13px;
  color: #2f5786;
}

.wallet-download-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.wallet-download-card {
  border: 1px solid #7ea5d1;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8fcff, #e4f0ff);
  padding: 12px;
  color: #17385f;
  display: grid;
  gap: 9px;
  transition: box-shadow 120ms ease, border-color 120ms ease;
}

.wallet-download-card:hover {
  border-color: #4f89c3;
  box-shadow: 0 2px 0 #7ca6d2, 0 5px 14px rgba(37, 86, 141, 0.18);
}

.wallet-download-card h3 {
  margin: 0;
  font-size: 20px;
  color: #0f315c;
}

.wallet-download-card p {
  margin: 0;
  color: #36557c;
  min-height: 18px;
}

.wallet-download-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.wallet-download-btn {
  text-decoration: none;
  font-size: 13px;
  color: #ffffff;
  background: linear-gradient(180deg, #5ca8e4, #2f86cb);
  border: 1px solid #4b8bc2;
  border-radius: 8px;
  padding: 7px 10px;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: filter 120ms ease, transform 120ms ease;
}

.wallet-download-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.wallet-download-btn-wide {
  grid-column: 1 / -1;
}

.wallet-download-btn-accent {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, #4cc29c, #2b9f7c);
  border-color: #2e9f7f;
}

.nick-page {
  display: grid;
  gap: 12px;
}

.nick-intro {
  margin: 0;
}

.nick-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.nick-hero-item {
  border: 1px solid #b4c1d3;
  background: linear-gradient(180deg, #f7fbff, #ebf1fa);
  padding: 10px;
}

.nick-hero-item h2 {
  margin: 0 0 6px;
  font-size: 19px;
}

.nick-rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.nick-card {
  border: 1px solid #bdcadc;
  background: #f9fbff;
  padding: 10px;
}

.nick-card h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: #1f3658;
}

.nick-card p {
  margin: 0;
}

.nick-lifecycle-table td:first-child {
  width: 120px;
}

.nick-action-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.nick-action-list li p {
  margin: 4px 0 0;
}

.nick-docs {
  border: 1px solid #b7c4d6;
  background: #f7faff;
  padding: 10px;
}

.nick-docs h2 {
  margin: 0 0 8px;
}

.nick-docs p {
  margin: 0 0 8px;
}

.nick-docs p:last-child {
  margin-bottom: 0;
}

.nick-docs ul {
  margin: 0;
  padding-left: 18px;
}

.community-page {
  display: grid;
  gap: 12px;
}

.community-intro {
  margin: 0;
}

.community-sections {
  display: grid;
  gap: 12px;
}

.community-section {
  border: 1px solid #b7c4d6;
  background: #f7faff;
  padding: 10px;
}

.community-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #ccd6e5;
  padding-bottom: 6px;
}

.community-section-head h2 {
  margin: 0;
  font-size: 19px;
}

.community-count {
  border: 1px solid #8b99ad;
  background: #e7eef9;
  color: #2a466d;
  padding: 3px 8px;
  font-size: 12px;
}

.community-lead {
  margin: 8px 0 10px;
  font-size: 14px;
  color: #314763;
}

.community-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.community-card {
  border: 1px solid #bdcadc;
  background: #f9fbff;
  padding: 10px;
}

.community-card h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: #1f3658;
}

.community-card p {
  margin: 0 0 8px;
}

.community-link {
  font-size: 13px;
  word-break: break-word;
}

.community-link-unavailable {
  color: #8a3a3a;
  font-weight: 600;
}

.whitepaper-page {
  display: grid;
  gap: 12px;
}

.whitepaper-intro {
  margin: 0;
}

.whitepaper-viewer {
  border: 1px solid #bdcadc;
  background: #f9fbff;
  padding: 8px;
}

.whitepaper-object {
  width: 100%;
  height: min(78vh, 980px);
  border: 1px solid #9fb0c7;
  background: #ffffff;
}

.roadmap-page {
  display: grid;
  gap: 16px;
}

.roadmap-hero {
  border: 1px solid #aebfda;
  background: linear-gradient(180deg, #f8fbff 0%, #ecf3ff 100%);
  padding: 12px;
  box-shadow: inset 0 1px 0 #ffffff;
}

.roadmap-intro {
  margin: 8px 0 10px;
  max-width: 900px;
}

.roadmap-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.roadmap-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid #8ea6cb;
  background: #e2ebfa;
  color: #2a476f;
  font-size: 12px;
  padding: 3px 8px;
  font-weight: 700;
}

.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.roadmap-phase {
  border: 1px solid #bdcadc;
  background: #f9fbff;
  padding: 12px;
  position: relative;
  overflow: hidden;
}

.roadmap-phase::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: #89a6ce;
}

.roadmap-phase-live::before {
  background: #3b76be;
}

.roadmap-phase-build::before {
  background: #5f8fc4;
}

.roadmap-phase-plan::before {
  background: #7a95b8;
}

.roadmap-phase-grow::before {
  background: #6a7e9b;
}

.roadmap-phase-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  padding-left: 8px;
  flex-wrap: wrap;
}

.roadmap-phase-head h2 {
  margin: 0;
  font-size: 18px;
}

.roadmap-phase-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border: 1px solid #7f95b7;
  background: #eaf1fb;
  color: #2f4767;
}

.roadmap-state {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
  padding: 2px 7px;
}

.roadmap-state-live {
  color: #0d4b8a;
  background: #dbe9fb;
  border-color: #8eb0dc;
}

.roadmap-state-build {
  color: #2c4f7d;
  background: #e2ebf8;
  border-color: #9ab0cd;
}

.roadmap-state-plan {
  color: #4b4b63;
  background: #ececf4;
  border-color: #b1b1c6;
}

.roadmap-state-grow {
  color: #3c4c63;
  background: #e7ecf3;
  border-color: #a3b1c2;
}

.roadmap-phase ul {
  margin: 0;
  padding: 0 0 0 22px;
  display: grid;
  gap: 6px;
}

.news-page {
  display: grid;
  gap: 12px;
}

.news-intro {
  margin: 0;
}

.news-feed {
  display: grid;
  gap: 12px;
}

.news-card {
  border: 1px solid #b7c4d6;
  background: #f7faff;
  padding: 10px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 10px;
  min-width: 0;
}

.news-image {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border: 1px solid #afbdd0;
  background: #e7edf7;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.news-image-zoomable {
  cursor: zoom-in;
}

.news-image-zoomed {
  transform: scale(1.34);
  transform-origin: center center;
  box-shadow: 0 14px 28px rgba(15, 27, 47, 0.34);
  position: relative;
  z-index: 2;
  cursor: zoom-out;
}

.news-body {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.news-date {
  font-size: 12px;
  color: #456289;
}

.news-rich {
  display: grid;
  gap: 8px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.news-rich p,
.news-rich ul,
.news-rich ol,
.news-rich blockquote {
  margin: 0;
}

.news-rich ul,
.news-rich ol {
  padding-left: 18px;
}

.news-rich a {
  color: #1d4e92;
  text-decoration: underline;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.news-rich blockquote {
  border-left: 3px solid #8ea5c7;
  padding-left: 8px;
  color: #335075;
}

.news-empty {
  border: 1px dashed #9aabc1;
  background: #f8fbff;
  padding: 16px;
}

.news-empty h2 {
  margin: 0 0 8px;
}

.admin-page {
  display: grid;
  gap: 12px;
}

.admin-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.admin-intro {
  margin: 0;
}

.admin-form {
  border: 1px solid #b7c4d6;
  background: #f7faff;
  padding: 12px;
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: none;
}

.admin-form input,
.admin-form textarea {
  border: 1px solid #4b5668;
  padding: 7px 8px;
  font-size: 14px;
  background: #fff;
  font-family: "Trebuchet MS", Verdana, Tahoma, sans-serif;
}

.news-image-scale-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.news-image-scale-row input[type="range"] {
  width: 100%;
}

#news-image-scale-value {
  font-size: 13px;
  color: #27466f;
  min-width: 50px;
  text-align: right;
}

.news-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.news-lang-block {
  border: 1px solid #becbde;
  background: #f2f7ff;
  padding: 8px;
  display: grid;
  gap: 8px;
}

.news-lang-block h3,
.news-lang-block h4 {
  margin: 0;
  font-size: 14px;
  color: #244368;
}

.news-editor {
  width: 100%;
  min-height: 220px;
  border: 1px solid #4b5668;
  padding: 8px 9px;
  font-size: 14px;
  background: #fff;
  line-height: 1.5;
}

.news-editor:focus {
  outline: 1px solid #2f5d95;
  outline-offset: 0;
}

.news-editor[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: #677a97;
}

.news-preview {
  border: 1px solid #b7c4d6;
  background: #f7faff;
  padding: 10px;
  display: grid;
  gap: 10px;
}

.news-preview h2 {
  margin: 0;
}

.news-preview-lang-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-option-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.news-option-check input {
  margin: 0;
}

.news-card-preview {
  margin: 0;
}

.news-preview-image-wrap {
  display: grid;
}

.news-preview-image-empty {
  border: 1px dashed #9cb1cb;
  background: #eff5ff;
  min-height: 140px;
  display: grid;
  place-items: center;
  color: #4b6286;
  font-size: 13px;
  padding: 8px;
  text-align: center;
}

.news-preview-placeholder {
  margin: 0;
  color: #566f93;
}

.admin-error {
  min-height: 18px;
  margin: 0;
  color: #7f1d1d;
  font-size: 13px;
}

.admin-posts {
  display: grid;
  gap: 10px;
}

.admin-posts h2 {
  margin: 0;
}

.admin-post {
  border: 1px solid #b7c4d6;
  background: #f7faff;
  padding: 10px;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
}

.admin-post-image {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border: 1px solid #afbdd0;
}

.admin-post-body {
  display: grid;
  gap: 6px;
  align-content: start;
}

.admin-post-actions,
.admin-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.news-edit-panel {
  border: 1px solid #becbde;
  background: #f0f6ff;
  padding: 8px;
  display: grid;
  gap: 8px;
}

.news-editor-compact {
  min-height: 140px;
}

.admin-post-date {
  font-size: 12px;
  color: #456289;
}

.admin-empty {
  margin: 0;
  border: 1px dashed #9aabc1;
  background: #f8fbff;
  padding: 12px;
}

.faq-page {
  display: grid;
  gap: 12px;
}

.faq-intro {
  margin: 0;
}

.faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.faq-jump-link {
  border: 1px solid #71809a;
  background: linear-gradient(180deg, #f7fbff, #e1e8f4);
  color: #1f3f66;
  text-decoration: none;
  font-size: 13px;
  padding: 6px 10px;
}

.faq-jump-link:hover {
  background: linear-gradient(180deg, #ffffff, #d7e3f3);
}

.faq-categories {
  display: grid;
  gap: 12px;
}

.faq-category {
  border: 1px solid #b7c4d6;
  background: #f7faff;
  padding: 10px;
}

.faq-category-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #ccd6e5;
  padding-bottom: 6px;
}

.faq-category-head h2 {
  margin: 0;
  font-size: 19px;
}

.faq-category-count {
  border: 1px solid #8b99ad;
  background: #e7eef9;
  color: #2a466d;
  padding: 3px 8px;
  font-size: 12px;
}

.faq-category-lead {
  margin: 8px 0 10px;
  font-size: 14px;
  color: #314763;
}

.faq-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.faq-item {
  border: 1px solid #c7d1df;
  background: #f9fbff;
  padding: 10px;
}

.faq-item h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: #1f3658;
}

.faq-item p {
  margin: 0;
}

.note {
  border: 1px solid #a18a57;
  background: #fff8df;
  color: #473407;
  padding: 8px 10px;
}

.status-bar {
  border-top: 2px solid var(--line);
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  background: #d4dcea;
}

.status-right {
  display: flex;
  gap: 12px;
  color: #36465e;
}

.extension-modal {
  position: fixed;
  inset: 0;
  background: rgba(13, 19, 30, 0.45);
  display: grid;
  place-items: center;
  z-index: 30;
  padding: 16px;
}

.extension-window {
  width: min(480px, 100%);
  border: 2px solid #566176;
  background: #e9eff9;
  box-shadow: 0 10px 24px rgba(10, 16, 28, 0.35);
}

.extension-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid #7a889f;
  background: linear-gradient(180deg, #dce6f5, #c2cfdf);
}

.extension-titlebar h3 {
  margin: 0;
  font-size: 15px;
}

.extension-content {
  padding: 10px;
}

@media (max-width: 1024px) {
  .toolbar-row {
    grid-template-columns: 1fr;
  }

  .extra-buttons {
    width: 100%;
  }
}

@media (max-width: 780px) {
  .portal-app {
    width: calc(100vw - 10px);
    margin: 5px auto;
  }

  .tab-strip {
    gap: 4px;
  }

  .tab.ghost {
    display: none;
  }

  .window-grid {
    grid-template-columns: 1fr 1fr;
  }

  .home-hero {
    grid-template-columns: 1fr;
    text-align: center;
    place-items: center;
  }

  .home-logo-wrap {
    width: 82px;
    height: 82px;
  }

  .logo-mouth-slot {
    clip-path: ellipse(20px 7px at 57% 66%);
  }

  .community-grid {
    grid-template-columns: 1fr 1fr;
  }

  .roadmap-grid {
    grid-template-columns: 1fr;
  }

  .whitepaper-object {
    height: 68vh;
  }

  .news-card {
    grid-template-columns: 1fr;
  }

  .news-image {
    height: 220px;
  }

  .admin-post {
    grid-template-columns: 1fr;
  }

  .admin-post-image {
    height: 180px;
  }

  .about-adv-grid {
    grid-template-columns: 1fr;
  }

  .wallet-overview-grid {
    grid-template-columns: 1fr;
  }

  .wallet-screen-footer {
    max-width: 100%;
    margin-left: 0;
  }

  .wallet-tab-panels {
    height: auto;
    min-height: 420px;
  }

  .wallet-tab-panel {
    position: static;
    inset: auto;
    overflow: visible;
  }

  .wallet-row,
  .wallet-row-amount,
  .wallet-screen-receive .wallet-row,
  .wallet-screen-nicknames .wallet-row,
  .wallet-filter-row,
  .wallet-nick-status {
    grid-template-columns: 1fr;
  }

  .wallet-nick-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .wallet-send-space {
    height: 80px;
  }

  .wallet-balance-foot {
    margin-left: 0;
  }

  .wallet-download-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .view-root {
    padding: 12px;
  }

  .nick-hero {
    grid-template-columns: 1fr;
  }

  .nick-rules-grid {
    grid-template-columns: 1fr;
  }

  .roadmap-phase-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .roadmap-state {
    margin-left: 0;
  }

  .whitepaper-object {
    height: 62vh;
  }

  .faq-jump-link {
    width: 100%;
    text-align: center;
  }

  .faq-category-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .community-grid {
    grid-template-columns: 1fr;
  }

  .community-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .about-adv-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .wallet-download-grid {
    grid-template-columns: 1fr;
  }

  .wallet-downloads-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .window-grid {
    grid-template-columns: 1fr;
  }

  .tile-open-btn {
    display: inline-flex;
  }

  .status-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .status-right {
    width: 100%;
    justify-content: space-between;
  }

}