:root{ --blue:#00b4fa; --blue2:#23e6ff; --sand:#e7d7b6; --text:#f6e7c1; }
  *{ box-sizing:border-box; font-family:'Share Tech Mono', monospace !important; }
  html,body{ height:100%; margin:0 }
  body{
    color:var(--text);
    background: radial-gradient(1200px 800px at 50% 0%, #0b0e15 0%, #0b0e15 40%, #101827 100%);
  }
  body::before{
    content:""; position:fixed; inset:0; pointer-events:none; opacity:.18;
    background:repeating-linear-gradient(180deg, #00b4fa11 0 2px, transparent 2px 6px);
    mix-blend-mode:screen;
  }

  /* Header */
  header{
    position:sticky; top:0; z-index:10; padding:14px 3vw;
    background:#11161cf5; border-bottom:1px solid #00b4fa55;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    box-shadow:0 2px 18px #00b4fa44;
  }
  header a.back{ color:var(--blue); font-weight:800; text-decoration:none; }

  /* Connect Wallet button */
  .connect-btn{
    border:none; cursor:pointer; font-weight:900; letter-spacing:.5px;
    padding:10px 16px; border-radius:999px;
    color:#05121a; background:linear-gradient(90deg,#6af3ff,#00b4fa 60%,#1ad8ff);
    box-shadow:0 6px 20px #00b4fa55, inset 0 1px 0 rgba(255,255,255,.35);
    display:inline-flex; align-items:center; gap:10px;
  }
  .connect-btn .dot{ width:9px; height:9px; border-radius:50%; background:#0aff7a; box-shadow:0 0 10px #0aff7a; }
  .connect-btn.is-disconnected .dot{ background:#ff6a6a; box-shadow:0 0 10px #ff6a6a; }

  main{ max-width:1120px; margin:40px auto; padding:0 4vw; }
  .card{
    background:linear-gradient(120deg,#0f1830 0%, #172a40 100%);
    border:2px solid #00b4fa; border-radius:18px; box-shadow:0 8px 30px #00b4fa33;
    padding:26px; margin:24px 0; position:relative;
  }
  h1{
    margin:0 0 12px; text-transform:uppercase; letter-spacing:2px; font-size:2.2rem;
    background:linear-gradient(90deg,#fff 8%, var(--blue) 60%, var(--blue2) 98%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .lead{ color:var(--sand); line-height:1.6; font-size:1.06rem; }

  /* GRID (Profile/Holo first) */
  .holo-grid{ display:grid; grid-template-columns: 1.05fr 1.1fr 0.85fr; gap:18px; }
  @media (max-width:980px){
    .holo-grid{ grid-template-columns:1fr; }
  }

  /* PROFILE panel */
  .profile-panel{
    background:#0b152be6; border:1.8px solid #00b4fa66; border-radius:16px; padding:18px; position:relative; overflow:hidden;
  }
  .profile-title{ display:flex; align-items:center; gap:10px; margin-bottom:12px; font-weight:900; letter-spacing:1.5px; color:#cfeaff; }
  .profile-title .dot{ width:8px; height:8px; border-radius:50%; background:var(--blue); box-shadow:0 0 14px var(--blue); }

  /* avatar (locked: only via code path) */
  .avatar-wrap{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
  .avatar{ width:88px; height:88px; border-radius:50%; overflow:hidden; border:2px solid #3ca9ff; box-shadow:0 0 18px #00b4fa66; background:#0a213a; }
  .avatar img{ width:100%; height:100%; object-fit:cover; display:block; user-select:none; pointer-events:none; } /* no UI change */

  .kv{ display:grid; grid-template-columns:110px 1fr; gap:8px 10px; font-size:.98rem; }
  .kv b{ color:#9edcff }
  .divider{ height:1px; background:linear-gradient(90deg,transparent, #00b4fa66, transparent); margin:10px 0; }
  .bar{ height:8px; background:#0f2747; border:1px solid #27486f; border-radius:999px; overflow:hidden }
  .bar > span{ display:block; height:100%; background:linear-gradient(90deg,#00b4fa,#23e6ff); width:0%; transition:width .6s ease; }
  .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
  .chip{ background:#112340; border:1px solid #2c4c72; border-radius:999px; padding:6px 10px; font-size:.9rem; color:#cfeaff }

  /* HOLOGRAM STAGE */
  .stage{ position:relative; min-height:560px; display:flex; align-items:center; justify-content:center;
          border:1.8px solid #00b4fa44; border-radius:16px; overflow:hidden;
          background: radial-gradient(160px 80px at 50% 85%, rgba(0,180,250,.35), transparent 70%),
                      radial-gradient(420px 200px at 50% 20%, rgba(0,180,250,.20), transparent 70%); }
  @media (max-width:980px){ .stage{ min-height:420px; } }
  .ring-top,.ring-base{ position:absolute; left:50%; transform:translateX(-50%); border-radius:50%; pointer-events:none; }
  .ring-top{ top:24px; width:78%; height:110px; border:2px dashed rgba(35,230,255,.6); animation:spin 14s linear infinite; }
  .ring-base{ bottom:20px; width:88%; height:56px; border:2px solid rgba(0,180,250,.5); filter:blur(.2px);
              box-shadow:0 0 22px rgba(0,180,250,.50), inset 0 0 48px rgba(0,180,250,.25); }
  @keyframes spin{ from{transform:translateX(-50%) rotate(0)} to{transform:translateX(-50%) rotate(360deg)} }
  .scanlines{ position:absolute; inset:0; pointer-events:none; opacity:.20; mix-blend-mode:screen;
              background:repeating-linear-gradient(180deg, rgba(255,255,255,.15) 0 2px, transparent 2px 4px); animation:sl 6s linear infinite; }
  @keyframes sl{ to{ background-position:0 12px; } }
  .character{ position:relative; z-index:2; width:min(360px,56vw); aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; }
  .character svg{ width:88%; height:92%; filter: drop-shadow(0 18px 40px rgba(0,180,250,.55)); }

  /* SWITCHER */
  .switcher{ display:flex; flex-direction:column; gap:10px; }
  @media (max-width:980px){
    .switcher{ flex-direction:row; overflow-x:auto; padding-bottom:6px; }
    .switcher::-webkit-scrollbar{ height:6px; } .switcher::-webkit-scrollbar-thumb{ background:#00b4fa44; border-radius:999px; }
  }
  .role-btn{
    background:#0b152be6; border:1.6px solid #2c4c72; color:#cfeaff;
    padding:12px 14px; border-radius:12px; cursor:pointer; text-align:left;
    box-shadow:0 6px 18px #00b4fa22; transition:transform .14s, border-color .14s, background .14s, color .14s;
    font-weight:800; letter-spacing:.6px; white-space:nowrap;
  }
  .role-btn small{ display:block; opacity:.75; font-weight:700 }
  .role-btn.active,.role-btn:hover{ border-color:#00b4fa; background:#11274a; color:#fff; transform:translateY(-2px); }

  footer{ text-align:center; padding:28px 12px 40px; color:#8fbcff; font-size:.95rem; }
  a.cta{ display:inline-block; margin-top:10px; padding:10px 16px; border-radius:10px;
         background:linear-gradient(90deg,#004aad,#00b4fa); color:#fff; text-decoration:none; font-weight:900 }