:root {
      color-scheme: dark;
      --bg: #0b0614;
      --surface: #161023;
      --surface-2: #201633;
      --surface-3: #2b1c42;
      --line: #3d3155;
      --text: #fbf8ff;
      --muted: #b8accb;
      --soft: #eee7ff;
      --accent: #a879ff;
      --accent-2: #69e6c4;
      --amber: #f3c76f;
      --danger: #ff7ca8;
      --info: #84b7ff;
      --radius: 8px;
      --shadow: 0 18px 50px rgba(4, 2, 12, .42);
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      background:
        radial-gradient(circle at 78% 8%, rgba(195, 102, 255, .2), transparent 34vw),
        linear-gradient(180deg, rgba(8, 4, 14, .42), #0b0614 620px),
        url("./assets/cosmic-field-bg.png") center top / cover fixed no-repeat,
        linear-gradient(135deg, #0b0614 0%, #171026 46%, #0d0718 100%);
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 70% 18%, rgba(168,121,255,.13), transparent 28vw),
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 100% 100%, 44px 44px, 44px 44px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 72%);
      animation: cosmic-grid-drift 34s linear infinite;
    }
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(7,3,12,.22), rgba(7,3,12,.86)),
        linear-gradient(118deg, transparent 0 28%, rgba(168,121,255,.08) 28% 29%, transparent 29% 58%, rgba(105,230,196,.06) 58% 59%, transparent 59%);
      opacity: .82;
      animation: nebula-breathe 12s ease-in-out infinite;
    }

    @keyframes cosmic-grid-drift {
      0% { background-position: 0 0, 0 0, 0 0; }
      100% { background-position: 0 0, 44px 88px, 88px 44px; }
    }
    @keyframes nebula-breathe {
      0%, 100% { opacity: .72; filter: saturate(1); }
      50% { opacity: .92; filter: saturate(1.18); }
    }
    @keyframes panel-rise {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes singularity-pulse {
      0%, 100% { transform: rotate(45deg) scale(1); box-shadow: inset 0 0 0 12px rgba(11,6,20,.44), 0 18px 38px rgba(0,0,0,.26), 0 0 22px rgba(168,121,255,.2); }
      50% { transform: rotate(45deg) scale(1.045); box-shadow: inset 0 0 0 10px rgba(11,6,20,.38), 0 20px 42px rgba(0,0,0,.34), 0 0 38px rgba(216,112,255,.42); }
    }
    @keyframes hero-aura {
      0%, 100% { opacity: .38; transform: scale(1); }
      50% { opacity: .58; transform: scale(1.035); }
    }
    @keyframes energy-flow {
      0% { background-position: 0 0; }
      100% { background-position: 120px 0; }
    }
    @keyframes bar-glow {
      0%, 100% { filter: brightness(1); transform: scaleY(1); }
      50% { filter: brightness(1.18); transform: scaleY(1.035); }
    }

    button, input { font: inherit; }
    button {
      min-height: 42px;
      border: 1px solid transparent;
      border-radius: var(--radius);
      padding: 10px 14px;
      color: #13091f;
      background: linear-gradient(135deg, #c9aaff, var(--accent));
      cursor: pointer;
      font-weight: 800;
      box-shadow: 0 10px 24px rgba(168,121,255,.18);
      transition: transform .08s ease, border-color .15s ease, background .15s ease, opacity .15s ease;
      position: relative;
      overflow: hidden;
    }
    button::after {
      content: "";
      position: absolute;
      inset: -1px auto -1px -55%;
      width: 46%;
      pointer-events: none;
      background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
      transform: skewX(-18deg);
      opacity: 0;
      transition: left .45s ease, opacity .2s ease;
    }
    button:hover::after { left: 110%; opacity: .78; }
    button:hover { background: linear-gradient(135deg, #d5beff, #b98fff); }
    button:active { transform: translateY(1px); }
    button:disabled { cursor: not-allowed; opacity: .5; }
    button.secondary { color: var(--soft); background: linear-gradient(135deg, #211733, #181124); border-color: var(--line); box-shadow: none; }
    button.secondary:hover { border-color: #5b4a7d; background: linear-gradient(135deg, #2a1e3e, #1c142b); }
    button.warning { color: #1c1101; background: linear-gradient(135deg, #ffe1a2, var(--amber)); }
    button.warning:hover { background: linear-gradient(135deg, #ffe9ba, #ffd177); }
    button.danger { color: #260713; background: linear-gradient(135deg, #ffadc7, var(--danger)); }
    button.danger:hover { background: linear-gradient(135deg, #ffc0d3, #ff8bb2); }
    button.icon {
      width: 42px;
      padding: 0;
      display: inline-grid;
      place-items: center;
    }

    input {
      width: 100%;
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 11px 12px;
      color: var(--text);
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), transparent),
        #0f0a19;
      outline: none;
    }
    input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(168, 121, 255, .18); }
    label { display: block; margin: 0 0 8px; color: var(--muted); font-size: 13px; }
    h1, h2, h3, p { margin-top: 0; }
    h1 { margin-bottom: 10px; font-size: 34px; line-height: 1.08; letter-spacing: 0; }
    h2 { margin-bottom: 14px; font-size: 19px; letter-spacing: 0; }
    h3 { margin-bottom: 8px; font-size: 14px; color: var(--muted); letter-spacing: 0; }
    p { color: var(--muted); line-height: 1.6; }

    .shell { position: relative; z-index: 1; width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: 18px 0 48px; }
    .appbar {
      position: sticky;
      top: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 10px 0 16px;
      backdrop-filter: blur(18px);
    }
    .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .mark {
      width: 38px;
      height: 38px;
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.14);
      flex: 0 0 auto;
      display: block;
      object-fit: cover;
      box-shadow: inset 0 0 0 7px rgba(11,6,20,.45), 0 10px 28px rgba(168,121,255,.22);
    }
    .brand strong { display: block; font-size: 15px; }
    .brand span { display: block; color: var(--muted); font-size: 12px; }
    .app-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

    .status {
      margin: 0 0 14px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      color: var(--muted);
      background: rgba(0,0,0,.2);
      box-shadow: 0 10px 26px rgba(0,0,0,.16);
      white-space: pre-wrap;
      word-break: break-word;
    }
    .status.good { color: #9cf3d7; border-color: rgba(105,230,196,.45); background: rgba(105,230,196,.08); }
    .status.warn { color: #ffd786; border-color: rgba(243,186,77,.42); background: rgba(243,186,77,.08); }
    .status.bad { color: #ffa0a0; border-color: rgba(255,120,120,.42); background: rgba(255,120,120,.08); }

    .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
    .panel {
      grid-column: span 12;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(22, 16, 35, .94);
      box-shadow: var(--shadow);
      padding: 18px;
      position: relative;
      overflow: hidden;
      animation: panel-rise .42s ease both;
    }
    .panel:nth-child(2) { animation-delay: .04s; }
    .panel:nth-child(3) { animation-delay: .08s; }
    .panel:nth-child(4) { animation-delay: .12s; }
    .panel:nth-child(5) { animation-delay: .16s; }
    .panel:nth-child(6) { animation-delay: .2s; }
    .panel::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-top: 1px solid rgba(255,255,255,.08);
      background: linear-gradient(135deg, rgba(255,255,255,.045), transparent 34%);
    }
    .panel > * { position: relative; z-index: 1; }
    .half { grid-column: span 6; }
    .third { grid-column: span 4; }
    .two-third { grid-column: span 8; }
    @media (max-width: 900px) {
      .half, .third, .two-third { grid-column: span 12; }
      .appbar { position: static; align-items: flex-start; }
    }

    .hero-panel {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
      gap: 22px;
      align-items: stretch;
      min-height: 286px;
      padding: 24px;
      background:
        linear-gradient(90deg, rgba(11,6,20,.96) 0%, rgba(17,9,30,.88) 42%, rgba(18,8,29,.42) 100%),
        linear-gradient(180deg, rgba(168,121,255,.22), rgba(0,0,0,.12)),
        url("./assets/black-hole-hero.png") center right / cover no-repeat,
        var(--surface);
    }
    .hero-panel::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 76% 46%, rgba(238, 150, 255, .32), transparent 18%),
        linear-gradient(90deg, rgba(0,0,0,.22), transparent 72%);
      mix-blend-mode: screen;
      opacity: .48;
      animation: hero-aura 7s ease-in-out infinite;
    }
    @media (max-width: 860px) { .hero-panel { grid-template-columns: 1fr; } }
    .hero-copy { min-width: 0; }
    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 28px;
      margin-bottom: 14px;
      padding: 4px 9px;
      border: 1px solid rgba(168,121,255,.36);
      border-radius: var(--radius);
      color: #d9c8ff;
      background: rgba(168,121,255,.12);
      font-size: 12px;
      font-weight: 800;
    }
    .hero-kicker::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 2px;
      background: var(--accent-2);
      box-shadow: 0 0 14px rgba(105,230,196,.7);
    }
    .hero-copy h1 { max-width: 640px; font-size: 42px; }
    .hero-copy p { max-width: 720px; margin-bottom: 18px; }
    .tag-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--radius);
      padding: 5px 9px;
      color: var(--soft);
      background: rgba(0,0,0,.2);
      font-size: 12px;
      white-space: nowrap;
    }
    .hero-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 18px;
      max-width: 640px;
    }
    .hero-metric {
      min-height: 74px;
      border: 1px solid rgba(255,255,255,.11);
      border-radius: var(--radius);
      padding: 11px;
      background: rgba(10,6,18,.42);
    }
    .hero-metric span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
    .hero-metric b { display: block; color: var(--soft); font-size: 18px; }
    @media (max-width: 560px) { .hero-metrics { grid-template-columns: 1fr; } }
    .vault-card {
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--radius);
      padding: 16px;
      background:
        linear-gradient(180deg, rgba(9,5,17,.26), rgba(9,5,17,.82)),
        url("./assets/staking-singularity.png") center / cover no-repeat,
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
        rgba(0,0,0,.22);
      min-height: 238px;
      display: grid;
      gap: 14px;
      align-content: stretch;
      box-shadow: inset 0 0 46px rgba(0,0,0,.58), 0 18px 50px rgba(4,2,12,.34);
      animation: nebula-breathe 10s ease-in-out infinite;
    }
    .vault-visual {
      display: grid;
      grid-template-columns: 110px 1fr;
      gap: 14px;
      align-items: center;
      min-height: 132px;
      backdrop-filter: blur(4px);
    }
    .vault-core {
      width: 108px;
      height: 108px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: var(--radius);
      background:
        radial-gradient(circle, rgba(224,163,255,.88), rgba(168,121,255,.18) 52%, rgba(0,0,0,.42) 72%),
        repeating-linear-gradient(90deg, transparent 0 12px, rgba(255,255,255,.06) 12px 13px);
      display: grid;
      place-items: center;
      transform: rotate(45deg);
      box-shadow: inset 0 0 0 12px rgba(11,6,20,.44), 0 18px 38px rgba(0,0,0,.26);
      animation: singularity-pulse 4.8s ease-in-out infinite;
    }
    .vault-core span {
      transform: rotate(-45deg);
      font-size: 26px;
      font-weight: 950;
      color: var(--soft);
    }
    .vault-lines {
      display: grid;
      gap: 10px;
    }
    .vault-line {
      height: 10px;
      border-radius: var(--radius);
      background: linear-gradient(90deg, var(--accent), rgba(255,255,255,.36), rgba(168,121,255,.16));
      background-size: 120px 100%;
      animation: energy-flow 3.4s linear infinite;
    }
    .vault-line:nth-child(2) { width: 78%; background: linear-gradient(90deg, var(--info), rgba(132,183,255,.14)); }
    .vault-line:nth-child(3) { width: 58%; background: linear-gradient(90deg, var(--accent-2), rgba(105,230,196,.12)); }
    @media (max-width: 420px) { .vault-visual { grid-template-columns: 1fr; } }
    .growth-card {
      border: 1px solid rgba(255,255,255,.10);
      border-radius: var(--radius);
      padding: 12px;
      background: rgba(9,5,17,.68);
      backdrop-filter: blur(7px);
    }
    .growth-bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-items: end; height: 86px; }
    .bar { border-radius: 6px 6px 0 0; background: var(--accent); min-height: 18px; transform-origin: bottom; animation: bar-glow 3.6s ease-in-out infinite; }
    .bar:nth-child(2) { height: 34px; background: #b690ff; }
    .bar:nth-child(3) { height: 44px; background: #84b7ff; }
    .bar:nth-child(4) { height: 64px; background: var(--amber); }
    .bar:nth-child(5) { height: 86px; background: var(--info); }
    .growth-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }

    .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
    @media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 520px) { .kpi-grid { grid-template-columns: 1fr; } }
    .kpi {
      min-height: 88px;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--radius);
      padding: 12px;
      background: #110b1c;
      transition: border-color .15s ease, transform .15s ease, background .15s ease;
    }
    .kpi:hover {
      transform: translateY(-1px);
      border-color: rgba(168,121,255,.32);
      background: #151021;
    }
    .kpi.feature {
      min-height: 102px;
      background:
        linear-gradient(135deg, rgba(168,121,255,.11), transparent),
        #110b1c;
    }
    .kpi .spark {
      width: 28px;
      height: 4px;
      margin-bottom: 12px;
      border-radius: var(--radius);
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
    }
    .kpi .name { margin-bottom: 8px; color: var(--muted); font-size: 12px; }
    .kpi .val { color: var(--text); font-size: 17px; font-weight: 850; word-break: break-word; }

    .stake-panel {
      padding: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      background:
        linear-gradient(135deg, rgba(20,12,34,.94), rgba(10,5,18,.9)),
        url("./assets/cosmic-field-bg.png") center / cover no-repeat;
    }
    .stake-panel-inner { padding: 18px; }
    .mode-toggle {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #0f0a19;
      margin-bottom: 14px;
    }
    .mode-toggle button {
      min-height: 40px;
      color: var(--soft);
      background: transparent;
      border-color: transparent;
    }
    .mode-toggle button.active {
      color: #13091f;
      background: linear-gradient(135deg, #cdb4ff, var(--accent));
    }
    .mode-toggle button[data-mode="permanent"].active {
      color: #170f02;
      background: var(--amber);
    }
    .form-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
    .stake-form { grid-template-columns: minmax(0, 1fr) auto auto; }
    .approve-note { margin: 10px 0 0; }
    @media (max-width: 760px) { .stake-form, .form-row { grid-template-columns: 1fr; } }

    .preview-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 14px; }
    @media (max-width: 760px) { .preview-grid { grid-template-columns: repeat(2, 1fr); } }
    .preview {
      border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--radius);
      padding: 10px;
      background: #110b1c;
      min-height: 70px;
    }
    .preview span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
    .preview b { font-size: 15px; word-break: break-word; }
    .preview:nth-child(5) {
      border-color: rgba(243,199,111,.28);
      background: linear-gradient(135deg, rgba(243,199,111,.12), #110b1c);
    }
    .rail {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-top: 14px;
    }
    .rail-step {
      min-height: 52px;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--radius);
      padding: 9px;
      background: rgba(255,255,255,.035);
      color: var(--muted);
      font-size: 12px;
    }
    .rail-step b { display: block; color: var(--soft); font-size: 13px; margin-bottom: 4px; }
    @media (max-width: 700px) { .rail { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 430px) { .rail { grid-template-columns: 1fr; } }

    .action-stack { display: grid; gap: 10px; }
    .action-line {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: end;
    }
    @media (max-width: 620px) { .action-line { grid-template-columns: 1fr; } }
    details {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 12px;
      background: #110b1c;
    }
    .action-stack > button {
      width: 100%;
      justify-content: center;
    }
    summary { cursor: pointer; color: var(--soft); font-weight: 800; }

    .table-wrap {
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #0f0a19;
    }
    table { width: 100%; border-collapse: collapse; min-width: 820px; }
    th, td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; font-size: 13px; }
    th { color: var(--muted); background: #171023; font-weight: 800; }
    td { color: var(--soft); }
    tbody tr:hover td { background: rgba(168,121,255,.055); }
    tr:last-child td { border-bottom: 0; }
    .pill {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 3px 8px;
      font-size: 12px;
      white-space: nowrap;
      background: rgba(255,255,255,.04);
    }
    .pill.good { color: #9cf3d7; border-color: rgba(105,230,196,.45); background: rgba(105,230,196,.08); }
    .pill.warn { color: #ffd786; border-color: rgba(243,186,77,.42); background: rgba(243,186,77,.08); }
    .pill.bad { color: #ffa0a0; border-color: rgba(255,120,120,.42); background: rgba(255,120,120,.08); }
    .muted { color: var(--muted); }
    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
    .mini { color: var(--muted); font-size: 12px; line-height: 1.55; }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }
    }