@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:opsz,wght@14..32,300;400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap");

* {
  box-sizing: border-box;
}

:root {
  /* ── Brand ── */
  --wz-mint: #2DFFA8;
  --wz-teal: #1B9B8C;
  --wz-teal-deep: #0F6B60;

  /* ── Surfaces ── */
  --bg: #f0f0f0;
  --fg: #1a1a1a;
  --card: #ffffff;

  /* ── Text scale ── */
  --muted: #465462;
  --muted-2: #627384;

  /* ── Borders ── */
  --line: rgba(25, 33, 42, 0.10);
  --line-strong: rgba(25, 33, 42, 0.18);

  /* ── Neumorphic (legacy compat) ── */
  --neu-flat: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 50%, #f8f8f8 100%);
  --neu-bg: #f0f0f0;
  --neu-light: #ffffff;
  --neu-dark: #d0d0d0;

  /* ── Panels ── */
  --panel: rgba(255, 255, 255, 0.90);
  --panel-strong: rgba(255, 255, 255, 0.96);
  --panel-soft: rgba(255, 255, 255, 0.78);

  /* ── Semantic text ── */
  --text: var(--fg);
  --text-soft: #354757;
  --text-dim: #617689;
  --text-2: #738a9f;

  /* ── Brand aliases ── */
  --wasabi: var(--wz-mint);
  --wasabi-soft: #26e69a;
  --teal: var(--wz-teal);

  /* ── Status ── */
  --danger: #ff6f84;
  --warn: #ffc166;
  --ok: #2DFFA8;

  /* ── Radius (8px base, professional scale) ── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ── Elevation (multi-layer, brand-tinted) ── */
  --shadow-xs: 0 1px 2px rgba(16, 24, 32, 0.06);
  --shadow-sm: 0 2px 8px rgba(16, 24, 32, 0.06), 0 1px 2px rgba(16, 24, 32, 0.04);
  --shadow-md:
    rgba(15, 107, 96, 0.07) 0px 12px 28px -8px,
    rgba(0, 0, 0, 0.06) 0px 8px 16px -8px;
  --shadow-lg:
    rgba(15, 107, 96, 0.10) 0px 24px 48px -16px,
    rgba(0, 0, 0, 0.08) 0px 16px 32px -12px;
  --shadow-xl:
    rgba(15, 107, 96, 0.12) 0px 32px 64px -20px,
    rgba(0, 0, 0, 0.10) 0px 20px 40px -16px;

  /* ── Fonts ── */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-title: "Space Grotesk", "Inter", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 220ms;
  --duration-slow: 360ms;
}

.dark {
  --bg: #0B0E0C;
  --fg: #E8EDE9;
  --card: #141816;
  --muted: #8A948C;
  --muted-2: #6E786F;
  --line: rgba(140, 160, 145, 0.08);
  --line-strong: rgba(140, 160, 145, 0.15);
  --neu-flat: linear-gradient(135deg, #121612 0%, #0E120F 50%, #141816 100%);
  --neu-bg: #080B09;
  --neu-light: #1A1F1B;
  --neu-dark: #000000;
  --panel: rgba(20, 24, 22, 0.86);
  --panel-strong: rgba(20, 24, 22, 0.94);
  --panel-soft: rgba(20, 24, 22, 0.74);
  --text: var(--fg);
  --text-soft: #9BA69D;
  --text-dim: #616C63;
  --text-2: #7E8A80;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.14);
  --shadow-md:
    rgba(0, 0, 0, 0.32) 0px 12px 28px -8px,
    rgba(15, 107, 96, 0.06) 0px 4px 12px -4px;
  --shadow-lg:
    rgba(0, 0, 0, 0.40) 0px 24px 48px -16px,
    rgba(15, 107, 96, 0.08) 0px 8px 24px -8px;
  --shadow-xl:
    rgba(0, 0, 0, 0.50) 0px 32px 64px -20px,
    rgba(15, 107, 96, 0.10) 0px 12px 32px -12px;
}

/* ── Base ── */
html, body {
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--text);
  background:
    radial-gradient(ellipse 720px 520px at 8% -6%, rgba(45, 255, 168, 0.08), transparent 64%),
    radial-gradient(ellipse 760px 520px at 100% 4%, rgba(27, 155, 140, 0.09), transparent 68%),
    radial-gradient(ellipse 920px 620px at 50% 120%, rgba(45, 255, 168, 0.04), transparent 72%),
    linear-gradient(180deg, rgba(7, 10, 9, 0.98), rgba(11, 14, 13, 1)),
    var(--bg);
  letter-spacing: -0.011em;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv01", "cv03", "cv04", "cv11";
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: auto;
  pointer-events: none;
  z-index: 0;
  filter: blur(48px);
  opacity: 0.40;
}

body::before {
  top: 96px;
  left: -100px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 255, 168, 0.15), transparent 68%);
}

body::after {
  right: -60px;
  bottom: 96px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27, 155, 140, 0.13), transparent 70%);
}

/* ── Scroll Progress ── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(to right, var(--wz-teal), var(--wz-mint), var(--wz-teal));
  z-index: 1000;
  pointer-events: none;
}

/* ── Grid Pattern ── */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.028;
  background-image:
    linear-gradient(to right, rgba(136, 136, 136, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(136, 136, 136, 0.18) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 80% at 30% 50%, #000 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 30% 50%, #000 50%, transparent 100%);
}

/* ── Container ── */
.container, .wrap {
  position: relative;
  z-index: 1;
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0 32px;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6,
.title, .section-title, .token-title,
.feed-title, .doc-title {
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.title {
  margin: 0;
  font-weight: 700;
  line-height: 1.04;
  font-size: clamp(26px, 2.8vw, 42px);
  letter-spacing: -0.035em;
}

.ticker {
  display: inline-block;
  margin-left: 6px;
  color: var(--wasabi);
  font-family: var(--mono);
  font-size: 0.65em;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.sub, .tagline {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.muted, .muted2, .k, .stat-label {
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 400;
}

.muted-sm {
  color: var(--text-dim);
  font-size: 12px;
}

.mono, .log, .v, code {
  font-family: var(--mono);
  font-feature-settings: "tnum";
}

a {
  color: var(--text);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

a:hover {
  color: var(--wz-mint);
}

/* ── Topbar ── */
.topbar, .top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 60%),
    linear-gradient(
      to right,
      rgba(250, 250, 250, 0.95),
      rgba(245, 245, 245, 0.96),
      rgba(250, 250, 250, 0.95)
    );
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: var(--shadow-lg);
  margin-bottom: 16px;
}

.dark .topbar, .dark .top {
  background:
    linear-gradient(135deg, rgba(45, 255, 168, 0.03), transparent 60%),
    linear-gradient(
      to right,
      rgba(16, 20, 17, 0.95),
      rgba(13, 16, 14, 0.97),
      rgba(16, 20, 17, 0.95)
    );
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: var(--shadow-xl);
}

/* ── Brand ── */
.brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.wordmark-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  text-decoration: none;
}

.brand-wordmark {
  display: block;
  width: clamp(154px, 15vw, 230px);
  height: auto;
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-title);
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

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

.logo span {
  color: var(--wasabi);
}

/* ── Actions ── */
.top-actions, .row, .action-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

/* ── Cards & Panels ── */
.card, .panel, .stat, .table-card {
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%),
    var(--panel-strong);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition:
    transform var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) ease,
    box-shadow var(--duration-normal) ease;
}

.card::before, .panel::before,
.stat::before, .table-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(45, 255, 168, 0.04), transparent 54%, rgba(27, 155, 140, 0.03));
  opacity: 0.15;
  transition: opacity var(--duration-normal) ease;
}

.card::after, .panel::after,
.stat::after, .table-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.02);
}

.card:hover, .panel:hover,
.stat:hover, .table-card:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
}

.card:hover::before, .panel:hover::before,
.stat:hover::before, .table-card:hover::before {
  opacity: 0.3;
}

.card {
  padding: 20px;
}

/* ── Buttons ── */
.btn, .filter-btn, .btnlike {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.015);
  color: var(--text-soft);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 16px;
  line-height: 1;
  cursor: pointer;
  transition:
    all var(--duration-normal) var(--ease-out);
  user-select: none;
}

.dark .btn, .dark .filter-btn, .dark .btnlike {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.01);
}

.btn.small {
  padding: 6px 12px;
  font-size: 12px;
}

.btn.primary, .filter-btn.active, .btn-stylish {
  border-color: rgba(45, 255, 168, 0.35);
  background: linear-gradient(135deg, rgba(45, 255, 168, 0.92), rgba(27, 155, 140, 0.92));
  color: #05110c;
  font-weight: 600;
  box-shadow:
    0 0 0 1px rgba(45, 255, 168, 0.12),
    0 8px 24px rgba(45, 255, 168, 0.18);
}

.btn-stylish {
  position: relative;
  overflow: hidden;
}

.btn-stylish::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: skewX(-25deg);
  transition: left 0.5s var(--ease-out);
}

.btn-stylish:hover::before {
  left: 150%;
}

.btn-glass {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-normal) var(--ease-out);
  overflow: hidden;
}

.btn.danger {
  border-color: rgba(255, 111, 132, 0.4);
  color: #ffdbe2;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn:hover, .filter-btn:hover {
  color: var(--text);
  border-color: var(--line-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active, .filter-btn:active {
  transform: translateY(0);
  transition-duration: 60ms;
}

/* ── Inputs ── */
.input, input, select, textarea, .search, .sort-select, .inp {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.02);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  padding: 12px 14px;
  outline: none;
  transition:
    border-color var(--duration-normal) ease,
    box-shadow var(--duration-normal) ease;
}

.dark .input, .dark input, .dark select,
.dark textarea, .dark .search, .dark .sort-select, .dark .inp {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)),
    rgba(0, 0, 0, 0.22);
}

input::placeholder, textarea::placeholder {
  color: var(--text-dim);
  font-weight: 400;
}

input:focus, select:focus, textarea:focus,
.btn:focus-visible, .filter-btn:focus-visible {
  border-color: rgba(45, 255, 168, 0.5);
  box-shadow:
    0 0 0 3px rgba(45, 255, 168, 0.12),
    0 0 0 1px rgba(45, 255, 168, 0.25);
}

/* ── Pills & Badges ── */
.pill, .badge, .chip, .chain-badge, .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.01);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.pill.badge-accent, .badge.badge-accent, .chip.badge-accent {
  border-color: rgba(45, 255, 168, 0.35);
  color: #d9fff2;
  background: rgba(45, 255, 168, 0.12);
}

/* ── Status Indicators ── */
.status-dot, .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px rgba(45, 255, 168, 0.6);
}

.status-dot.degraded {
  background: var(--warn);
  box-shadow: 0 0 8px rgba(255, 193, 102, 0.6);
}

.status-dot.down {
  background: var(--danger);
  box-shadow: 0 0 8px rgba(255, 111, 132, 0.6);
}

/* ── Key-Value ── */
.kv {
  display: grid;
  grid-template-columns: minmax(126px, 190px) minmax(0, 1fr);
  gap: 0 16px;
}

.kv > div {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

/* ── Log ── */
.log {
  min-height: 110px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
  color: #c4f0e2;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow: auto;
  padding: 14px;
}

/* ── Grid Layouts ── */
.cards, .stats, .grid, .grid2 {
  display: grid;
  gap: 12px;
}

.stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat {
  padding: 16px;
}

.stat-value, .big {
  margin-top: 4px;
  font-family: var(--font-title);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}

/* ── Empty / Help ── */
.empty, .help {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-soft);
  padding: 16px;
  font-size: 14px;
}

/* ── Status Colors ── */
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.danger, .bad { color: var(--danger); }

/* ── Gradient Text ── */
.text-gradient-mint {
  background: linear-gradient(135deg, var(--wz-teal) 0%, var(--wz-mint) 50%, var(--wz-teal-deep) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Animations ── */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

.reveal {
  animation: fade-up 280ms var(--ease-out) both;
}

.reveal.delay-1 { animation-delay: 60ms; }
.reveal.delay-2 { animation-delay: 120ms; }
.reveal.delay-3 { animation-delay: 180ms; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ── Responsive ── */
@media (max-width: 1040px) {
  .topbar, .top {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .top-actions, .row, .action-rail {
    justify-content: flex-start;
  }

  .stats, .grid2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .container, .wrap {
    width: calc(100% - 24px);
    padding-top: 16px;
  }

  .card {
    padding: 16px;
  }

  .kv {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .kv > div {
    border-bottom: 0;
    padding: 3px 0;
  }

  .title {
    font-size: clamp(22px, 8vw, 34px);
  }
}

/* ── Tweet notification modal ── */
.tweet-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeIn 0.2s ease;
}

.tweet-modal {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  padding: 28px 32px 24px;
  max-width: 420px;
  width: calc(100% - 32px);
  text-align: center;
  box-shadow: var(--shadow-xl);
  animation: modalSlideUp 0.25s var(--ease-out);
}

.tweet-modal .tweet-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.tweet-modal h3 {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text);
  letter-spacing: -0.02em;
}

.tweet-modal p {
  font-size: 14px;
  color: var(--text-soft);
  margin: 0 0 20px;
  line-height: 1.5;
}

.tweet-modal .tweet-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.tweet-modal .btn-tweet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.tweet-modal .btn-tweet:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.tweet-modal .btn-tweet.primary {
  background: #1d9bf0;
  color: #fff;
}

.tweet-modal .btn-tweet.secondary {
  background: var(--line);
  color: var(--text);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}