@font-face {
      font-family: 'NAUTICA'; /* name it anything */
      src: url('./Nautica.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
    }
    :root {
      --bg: #050815;
      --panel: rgba(5, 10, 24, 0.94);
      --panel2: rgba(7, 13, 30, 0.92);
      --field: rgba(4, 8, 20, 0.96);
      --text: #f4f7ff;
      --muted: #8f9bb3;
      --cyan: #00eaff;
      --pink: #ff1f8f;
      --purple: #a855ff;
      --green: #65ff4f;
      --yellow: #ffb84d;
      --red: #ff4869;
      --blue-line: rgba(0, 234, 255, .45);
      --pink-line: rgba(255, 31, 143, .58);
      --purple-line: rgba(168, 85, 255, .55);
      --green-line: rgba(101, 255, 79, .45);
      --radius: 4px;
      --font-tech: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --shadow-pink: 0 0 28px rgba(255,31,143,.22), inset 0 0 28px rgba(255,31,143,.045);
      --shadow-cyan: 0 0 28px rgba(0,234,255,.18), inset 0 0 28px rgba(0,234,255,.04);
      --shadow-purple: 0 0 28px rgba(168,85,255,.18), inset 0 0 28px rgba(168,85,255,.04);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      font-family: var(--font-tech);
      background:
        radial-gradient(circle at 18% 0%, rgba(255,31,143,.16), transparent 28rem),
        radial-gradient(circle at 88% 28%, rgba(0,234,255,.12), transparent 31rem),
        linear-gradient(180deg, #050613 0%, #060b18 52%, #03050d 100%);
      overflow-x: hidden;
      letter-spacing: .01em;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, transparent 0 8%, rgba(255,31,143,.24) 8.1% 8.25%, transparent 8.35% 100%),
        linear-gradient(90deg, transparent 0 64%, rgba(0,234,255,.18) 64.1% 64.25%, transparent 64.35% 100%),
        linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
      background-size: 100% 180px, 100% 240px, 42px 42px, 42px 42px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), transparent 88%);
      opacity: .75;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background: repeating-linear-gradient(to bottom, rgba(255,255,255,.028), rgba(255,255,255,.028) 1px, transparent 1px, transparent 5px);
      opacity: .18;
    }

    .app {
      width: min(1240px, calc(100% - 28px));
      margin: 0 auto;
      padding: 24px 0 34px;
      position: relative;
      z-index: 1;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      margin-bottom: 18px;
      padding: 0 8px;
    }

    .title-font {
      font-family: 'NAUTICA', sans-serif;
    }

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

    .logo {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      font-size: 1.45rem;
      font-weight: 950;
      color: var(--pink);
      border: 2px solid var(--pink-line);
      background: rgba(255,31,143,.07);
      clip-path: polygon(18% 0, 82% 0, 100% 18%, 100% 82%, 82% 100%, 18% 100%, 0 82%, 0 18%);
      box-shadow: var(--shadow-pink);
    }

    .logo img {
      width: 30px;
      height: 30px;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 0 10px rgba(0,234,255,.28)) drop-shadow(0 0 12px rgba(255,31,143,.22));
    }

    h1, h2, h3, p { margin: 0; }
    h1 {
      font-size: clamp(1.25rem, 3vw, 1.85rem);
      letter-spacing: .025em;
      text-transform: uppercase;
      color: #ff4aa8;
      text-shadow: 0 0 18px rgba(255,31,143,.36);
    }
    h2 {
      font-size: 1.25rem;
      letter-spacing: .03em;
      text-transform: uppercase;
    }
    h3 {
      font-size: .92rem;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--cyan);
    }
    .sub { color: var(--muted); margin-top: 5px; font-size: .84rem; line-height: 1.5; }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 15px;
      border: 1px solid var(--blue-line);
      background: rgba(0,234,255,.055);
      color: var(--cyan);
      font-size: .78rem;
      font-weight: 900;
      text-transform: uppercase;
      white-space: nowrap;
      clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
      box-shadow: var(--shadow-cyan);
    }


    .header-pills {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }

    .pill.eth-pill {
      border-color: var(--green-line);
      background: rgba(101,255,79,.055);
      color: #d8ffe9;
      box-shadow: 0 0 28px rgba(101,255,79,.18), inset 0 0 28px rgba(101,255,79,.04);
    }

    .live-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 10px var(--green), 0 0 22px rgba(101,255,79,.55);
      animation: pulse .95s infinite;
      flex: 0 0 auto;
    }

    .shell {
      border: 1px solid rgba(255,31,143,.42);
      background: rgba(2, 6, 18, .76);
      box-shadow: 0 0 48px rgba(255,31,143,.14), 0 30px 90px rgba(0,0,0,.55);
      backdrop-filter: blur(16px);
      position: relative;
      overflow: hidden;
      clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
    }

    .shell::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border: 1px solid rgba(255,255,255,.045);
      clip-path: inherit;
    }

    .tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      padding: 18px 18px 12px;
      gap: 18px;
      background: linear-gradient(180deg, rgba(255,31,143,.055), rgba(0,0,0,.14));
      border-bottom: 1px solid rgba(255,31,143,.3);
      position: relative;
    }

    .tab-btn {
      min-height: 54px;
      border: 1px solid rgba(255,255,255,.16);
      color: #c7cedd;
      background: linear-gradient(180deg, rgba(22,28,42,.78), rgba(8,12,24,.92));
      padding: 13px 16px;
      cursor: pointer;
      font: inherit;
      font-weight: 950;
      letter-spacing: .04em;
      text-transform: uppercase;
      transition: .18s ease;
      clip-path: polygon(22px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 22px 100%, 0 50%);
      position: relative;
    }

    .tab-btn::first-letter { color: white; }
    .tab-btn:hover { color: white; border-color: rgba(255,31,143,.45); box-shadow: 0 0 22px rgba(255,31,143,.12); }
    .tab-btn.active {
      color: white;
      background: linear-gradient(180deg, rgba(255,31,143,.28), rgba(64,12,43,.72));
      border-color: var(--pink-line);
      box-shadow: var(--shadow-pink);
    }
    .tab-btn:nth-child(2).active {
      background: linear-gradient(180deg, rgba(168,85,255,.25), rgba(44,18,75,.72));
      border-color: var(--purple-line);
      box-shadow: var(--shadow-purple);
    }
    .tab-btn:nth-child(3).active {
      background: linear-gradient(180deg, rgba(0,234,255,.22), rgba(7,48,62,.72));
      border-color: var(--blue-line);
      box-shadow: var(--shadow-cyan);
    }

    .content { padding: 16px; }
    .tab-panel { display: none; animation: rise .2s ease both; }
    .tab-panel.active { display: block; }
    @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

    .panel-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 14px;
      padding: 14px 16px;
      border: 1px solid rgba(255,31,143,.42);
      background: linear-gradient(90deg, rgba(255,31,143,.16), rgba(255,31,143,.02));
      clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
      box-shadow: var(--shadow-pink);
    }

    #tab2 .panel-head {
      border-color: var(--purple-line);
      background: linear-gradient(90deg, rgba(168,85,255,.16), rgba(168,85,255,.02));
      box-shadow: var(--shadow-purple);
    }

    #tab3 .panel-head {
      border-color: var(--blue-line);
      background: linear-gradient(90deg, rgba(0,234,255,.14), rgba(0,234,255,.02));
      box-shadow: var(--shadow-cyan);
    }

    .card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .card-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .card {
      padding: 16px;
      border: 1px solid rgba(255,255,255,.13);
      background: linear-gradient(180deg, var(--panel2), rgba(2, 6, 18, .94));
      box-shadow: inset 0 0 34px rgba(0,0,0,.22);
      position: relative;
      clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    }

    #tab1 .card { border-color: rgba(255,31,143,.22); }
    #tab2 .card { border-color: rgba(168,85,255,.25); }
    #tab3 .card { border-color: rgba(0,234,255,.25); }
    .card.full { grid-column: 1 / -1; }

    label {
      display: grid;
      gap: 7px;
      color: #d6deec;
      font-size: .78rem;
      margin-bottom: 12px;
      text-transform: uppercase;
      letter-spacing: .035em;
    }



    .label-title {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      width: fit-content;
      position: relative;
    }

    .info-tooltip {
      position: relative;
      display: inline-grid;
      place-items: center;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      border: 1px solid rgba(0,234,255,.7);
      color: var(--cyan);
      background: rgba(0,234,255,.075);
      box-shadow: 0 0 14px rgba(0,234,255,.18);
      font-size: .68rem;
      font-weight: 950;
      line-height: 1;
      cursor: help;
      text-transform: none;
      z-index: 20;
    }

    .info-tooltip::after {
      content: attr(data-tooltip);
      position: absolute;
      left: 50%;
      bottom: calc(100% + 10px);
      transform: translateX(-50%) translateY(6px);
      width: min(320px, 76vw);
      padding: 10px 12px;
      border: 1px solid rgba(0,234,255,.42);
      background: rgba(4,8,20,.98);
      color: #dbeafe;
      box-shadow: 0 0 24px rgba(0,234,255,.16), 0 12px 34px rgba(0,0,0,.48);
      clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
      font-size: .74rem;
      font-weight: 400;
      line-height: 1.45;
      letter-spacing: .01em;
      text-transform: none;
      white-space: normal;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: .16s ease;
      z-index: 100;
    }

    .info-tooltip::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: calc(100% + 3px);
      transform: translateX(-50%);
      border: 7px solid transparent;
      border-top-color: rgba(0,234,255,.42);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: .16s ease;
      z-index: 101;
    }

    .info-tooltip:hover::after,
    .info-tooltip:focus::after,
    .info-tooltip:hover::before,
    .info-tooltip:focus::before {
      opacity: 1;
      visibility: visible;
    }

    .info-tooltip:hover::after,
    .info-tooltip:focus::after {
      transform: translateX(-50%) translateY(0);
    }


    /* Floating tooltip rendered at <body> level so cards/clip-path never hide it */
    .info-tooltip::before,
    .info-tooltip::after {
      display: none;
    }

    .floating-tooltip {
      position: fixed;
      max-width: min(340px, calc(100vw - 28px));
      padding: 10px 12px;
      border: 1px solid rgba(0,234,255,.42);
      background: rgba(4,8,20,.98);
      color: #dbeafe;
      box-shadow: 0 0 24px rgba(0,234,255,.16), 0 12px 34px rgba(0,0,0,.48);
      clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
      font-size: .74rem;
      font-weight: 400;
      line-height: 1.45;
      letter-spacing: .01em;
      text-transform: none;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transform: translateY(6px);
      transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
      z-index: 999999;
    }

    .floating-tooltip.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    input, textarea, select {
      width: 100%;
      border: 1px solid rgba(116,133,160,.46);
      outline: none;
      color: var(--text);
      background: var(--field);
      padding: 11px 12px;
      font: inherit;
      font-weight: 800;
      transition: .16s ease;
      appearance: none;
      border-radius: 2px;
    }

    select {
      background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%),
                        linear-gradient(135deg, var(--cyan) 50%, transparent 50%),
                        linear-gradient(to right, rgba(0,234,255,.04), rgba(255,31,143,.08));
      background-position: calc(100% - 20px) calc(50% - 3px), calc(100% - 14px) calc(50% - 3px), 0 0;
      background-size: 6px 6px, 6px 6px, 100% 100%;
      background-repeat: no-repeat;
      padding-right: 40px;
      border-color: rgba(0,234,255,.34);
      box-shadow: 0 0 14px rgba(0,234,255,.06) inset;
    }

    select:hover { border-color: rgba(0,234,255,.62); box-shadow: 0 0 18px rgba(0,234,255,.16); }
    select:focus { border-color: rgba(0,234,255,.74); box-shadow: 0 0 0 3px rgba(0,234,255,.1), 0 0 22px rgba(0,234,255,.16); }
    option { background: #050815; color: var(--text); }

    textarea { min-height: 110px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
    input:focus, textarea:focus { border-color: rgba(255,31,143,.62); box-shadow: 0 0 0 3px rgba(255,31,143,.08), 0 0 20px rgba(255,31,143,.12); }
    #tab2 input:focus, #tab2 textarea:focus { border-color: rgba(168,85,255,.68); box-shadow: 0 0 0 3px rgba(168,85,255,.09), 0 0 20px rgba(168,85,255,.12); }
    #tab3 input:focus, #tab3 textarea:focus { border-color: rgba(0,234,255,.68); box-shadow: 0 0 0 3px rgba(0,234,255,.09), 0 0 20px rgba(0,234,255,.12); }

    input:disabled, textarea:disabled, select:disabled {
      opacity: .48;
      cursor: not-allowed;
      background: rgba(255,255,255,.035);
    }

    .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

    button.action {
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.04);
      color: var(--text);
      font: inherit;
      font-weight: 950;
      letter-spacing: .035em;
      text-transform: uppercase;
      padding: 11px 16px;
      cursor: pointer;
      transition: .18s ease;
      border-radius: 2px;
      clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
    }

    button.action:hover { transform: translateY(-1px); border-color: rgba(0,234,255,.52); box-shadow: 0 0 18px rgba(0,234,255,.16); }
    button.primary {
      color: #dfffff;
      background: linear-gradient(180deg, rgba(0,234,255,.16), rgba(0,78,98,.28));
      border-color: rgba(0,234,255,.48);
    }
    button.pink {
      color: #ffd8ee;
      background: linear-gradient(180deg, rgba(255,31,143,.2), rgba(84,8,51,.42));
      border-color: rgba(255,31,143,.62);
      box-shadow: var(--shadow-pink);
    }
    button.verified {
      color: #d8ffe9;
      background: linear-gradient(180deg, rgba(101,255,79,.22), rgba(23,82,29,.38));
      border-color: rgba(101,255,79,.72);
      box-shadow: 0 0 28px rgba(101,255,79,.22), inset 0 0 24px rgba(101,255,79,.05);
    }
    button.verifying {
      color: #dfffff;
      background: linear-gradient(180deg, rgba(0,234,255,.16), rgba(0,78,98,.28));
      border-color: rgba(0,234,255,.55);
      box-shadow: var(--shadow-cyan);
    }
    button.danger { color: #ffdce3; border-color: rgba(255,72,105,.45); background: rgba(255,72,105,.09); }
    button:disabled { opacity: .42; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

    .locked-banner, .toast {
      margin-bottom: 14px;
      padding: 12px 14px;
      border: 1px solid rgba(255,255,255,.15);
      background: rgba(255,255,255,.035);
      color: #dbeafe;
      clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
      font-size: .86rem;
    }
    .locked-banner.locked { border-color: var(--green-line); color: #d8ffe9; background: rgba(101,255,79,.055); }
    .locked-banner.editing { border-color: rgba(255,184,77,.35); color: #fff0bf; background: rgba(255,184,77,.05); }
    .locked-banner.warn { border-color: rgba(168,85,255,.5); color: #e5ccff; background: rgba(168,85,255,.07); }
    .toast { display: none; margin-top: 14px; margin-bottom: 0; }
    .toast.show { display: block; }
    .toast.error { border-color: rgba(255,72,105,.52); color: #ffdce3; background: rgba(255,72,105,.07); }
    .toast.success { border-color: var(--green-line); color: #d8ffe9; background: rgba(101,255,79,.05); }
    .toast.warn { border-color: rgba(255,184,77,.45); color: #fff0bf; background: rgba(255,184,77,.055); }

    table {
      width: 100%;
      border-collapse: collapse;
      overflow: hidden;
      margin-top: 12px;
      border: 1px solid rgba(255,255,255,.1);
    }
    th, td {
      text-align: left;
      padding: 11px 12px;
      border-bottom: 1px solid rgba(255,255,255,.075);
      border-right: 1px solid rgba(255,255,255,.055);
      font-size: .86rem;
    }
    th { color: #b5bfd2; background: rgba(255,255,255,.04); text-transform: uppercase; letter-spacing: .035em; font-size: .76rem; }
    tr:last-child td { border-bottom: 0; }
    td:last-child, th:last-child { border-right: 0; }

    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
    .muted { color: var(--muted); }
    .ok { color: var(--green); text-shadow: 0 0 12px rgba(101,255,79,.22); }
    .warn { color: var(--yellow); }
    .bad { color: var(--red); }
    .cyan { color: var(--cyan); text-shadow: 0 0 14px rgba(0,234,255,.28); }

    .metric { color: var(--muted); font-size: .74rem; margin-bottom: 7px; text-transform: uppercase; letter-spacing: .045em; }
    .metric-value { font-size: 1.32rem; font-weight: 950; letter-spacing: -.02em; }

    .status-list { display: grid; gap: 0; margin-top: 14px; border: 1px solid rgba(0,234,255,.24); }
    .status-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 13px 14px;
      border-bottom: 1px solid rgba(255,255,255,.075);
      background: rgba(255,255,255,.026);
      text-transform: uppercase;
      letter-spacing: .035em;
      font-size: .86rem;
    }

    .status-code-error {
      color: var(--red);
      text-shadow: 0 0 12px rgba(255,72,105,.35);
    }

    .status-row:last-child { border-bottom: 0; }
    .status-left { display: flex; align-items: center; gap: 10px; }
    .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 18px currentColor; }
    .status-row[data-state="pending"] .dot { background: var(--yellow); color: var(--yellow); animation: pulse 1s infinite; }
    .status-row[data-state="processing"] .dot { background: var(--cyan); color: var(--cyan); animation: pulse .7s infinite; }
    .status-row[data-state="ok"] .dot { background: var(--green); color: var(--green); }
    .status-row[data-state="error"] .dot { background: var(--red); color: var(--red); }
    @keyframes pulse { 50% { opacity: .35; transform: scale(1.35); } }

    .footer-note {
      margin-top: 16px;
      color: #ff6bb7;
      font-size: .8rem;
      line-height: 1.5;
    }


    /* Animated status transition: glitch flicker */
    .status-row.status-glitch {
      position: relative;
      overflow: hidden;
      animation: statusGlitch .42s steps(2, end);
    }

    .status-row.status-glitch::before,
    .status-row.status-glitch::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      mix-blend-mode: screen;
      opacity: 0;
    }

    .status-row.status-glitch::before {
      background: linear-gradient(90deg, transparent, rgba(0,234,255,.26), transparent);
      transform: translateX(-100%);
      animation: glitchSweep .42s ease-out;
    }

    .status-row.status-glitch::after {
      background: repeating-linear-gradient(
        to bottom,
        rgba(255,31,143,.32) 0 1px,
        transparent 1px 4px
      );
      animation: glitchNoise .42s steps(3, end);
    }

    @keyframes statusGlitch {
      0% { transform: translateX(0); filter: brightness(1); }
      12% { transform: translateX(-2px); filter: brightness(1.5); }
      24% { transform: translateX(3px); }
      36% { transform: translateX(-1px); }
      52% { transform: translateX(2px); filter: brightness(1.25); }
      100% { transform: translateX(0); filter: brightness(1); }
    }

    @keyframes glitchSweep {
      0% { opacity: 0; transform: translateX(-100%); }
      25% { opacity: .9; }
      100% { opacity: 0; transform: translateX(100%); }
    }

    @keyframes glitchNoise {
      0%, 100% { opacity: 0; }
      18%, 38%, 58% { opacity: .45; }
      28%, 48%, 72% { opacity: .08; }
    }

    @media (max-width: 900px) {
      header, .panel-head { flex-direction: column; align-items: stretch; }
      .card-grid, .card-grid.three, .card-grid.four { grid-template-columns: 1fr; }
      .tabs { grid-template-columns: 1fr; gap: 10px; }
      .tab-btn { clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
    }
    /* ===== CYBERPUNK FX LAYER ===== */

    .cyber-effects {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    /* particles */
    .particle {
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      animation: float 6s linear infinite;
    }

    .p1 { left: 2%; top: 10%; background: var(--pink); box-shadow: 0 0 10px var(--pink); }
    .p2 { left: 4%; bottom: 20%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation-delay: -2s; }
    .p3 { right: 3%; top: 25%; background: var(--pink); animation-delay: -3s; }
    .p4 { right: 5%; bottom: 30%; background: var(--cyan); animation-delay: -4s; }
    .p5 { left: 40%; top: 5%; background: var(--purple); animation-delay: -1s; }
    .p6 { right: 40%; bottom: 5%; background: var(--cyan); animation-delay: -5s; }

    @keyframes float {
      0% { transform: translateY(0); opacity: .2; }
      50% { transform: translateY(-40px); opacity: .9; }
      100% { transform: translateY(-80px); opacity: 0; }
    }

    /* edge beams */
    .beam {
      position: absolute;
      height: 1px;
      width: 200px;
      background: linear-gradient(90deg, transparent, var(--cyan), transparent);
      animation: beamMove 5s infinite;
      opacity: .5;
    }

    .b1 { top: 10%; left: 10%; }
    .b2 { bottom: 15%; right: 10%; animation-delay: -2s; }
    .b3 { top: 20%; right: 20%; background: linear-gradient(90deg, transparent, var(--pink), transparent); animation-delay: -3s; }

    @keyframes beamMove {
      0% { transform: translateX(-40px); opacity: 0; }
      50% { opacity: 1; }
      100% { transform: translateX(60px); opacity: 0; }
    }

    /* corner glow */
    .corner {
      position: absolute;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      filter: blur(50px);
      opacity: .15;
      animation: pulseGlow 4s infinite;
    }

    .c1 { top: -80px; left: -80px; background: var(--pink); }
    .c2 { bottom: -80px; right: -80px; background: var(--cyan); animation-delay: -2s; }

    @keyframes pulseGlow {
      0%,100% { transform: scale(.8); opacity: .1; }
      50% { transform: scale(1.2); opacity: .25; }
    }

    /* hologram sweep */
    .shell::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(120deg, transparent 40%, rgba(0,234,255,.1) 50%, transparent 60%);
      transform: translateX(-100%);
      animation: sweep 6s infinite;
    }

    @keyframes sweep {
      0% { transform: translateX(-100%); }
      50% { transform: translateX(100%); }
      100% { transform: translateX(100%); }
    }

    /* breathing glow */
    .shell {
      animation: glowBreath 4s infinite ease-in-out;
    }

    @keyframes glowBreath {
      0%,100% { box-shadow: 0 0 40px rgba(255,31,143,.15); }
      50% { box-shadow: 0 0 70px rgba(0,234,255,.2); }
    }

    /* scanline drift */
    body::after {
      animation: scanMove 8s linear infinite;
    }

    @keyframes scanMove {
      from { transform: translateY(0); }
      to { transform: translateY(20px); }
    }