:root{
  --bg:#f7f9ff;
  --panel:#ffffff;
  --text:#0b1020;
  --muted:#5b6b8a;

  --border:#e4eaf6;

  --ok:#1652f0;
  --danger:#d92d20;

  --accent:#2b7cff;
  --primary:#1652f0;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);background:var(--bg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  overflow:hidden;
}

.vignette:before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(22,82,240,.18) 0%, transparent 55%),
    radial-gradient(900px 600px at -10% 120%, rgba(43,124,255,.14) 0%, transparent 55%);
  mix-blend-mode:normal;opacity:1;
}

.header{
  position:fixed;inset:0 0 auto 0;display:flex;align-items:center;gap:12px;
  padding:16px clamp(16px,5vw,36px);border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(247,249,255,.92), rgba(247,249,255,0));
  backdrop-filter:blur(10px);z-index:20;
}
.logo-img{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--border);object-fit:cover;
  box-shadow:0 0 0 1px rgba(22,82,240,.08) inset, 0 10px 22px rgba(11,16,32,.06);
}
.brand h1{margin:0;font-size:1.15rem}
.brand .sub{margin:2px 0 0;color:var(--muted);font-size:.85rem}
.spacer{flex:1}
.link{
  color:var(--primary);text-decoration:none;border:1px solid var(--border);
  padding:8px 12px;border-radius:10px;background:#ffffff;font-weight:700;
  box-shadow:0 1px 0 rgba(11,16,32,.03);
}
.link:hover{ box-shadow:0 0 0 3px rgba(22,82,240,.12), 0 10px 22px rgba(11,16,32,.08); border-color:#cfe0ff; }

.center{ position:fixed; inset:0; display:grid; place-items:center; padding:24px; z-index:5; }
.card{
  width:min(640px,92vw);border:1px solid var(--border);border-radius:14px;background:var(--panel);
  padding:28px clamp(18px,4vw,32px);position:relative;z-index:10;
  box-shadow:0 18px 44px rgba(11,16,32,.08);
}
.badge{
  display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid #cfe0ff;
  background:#eef4ff;color:#0b2a7a;font-weight:800;font-size:.78rem;
}
.card h2{margin:12px 0 6px;font-size:1.5rem}
.card p{margin:0;color:var(--muted)}

.cta{
  margin-top:20px;display:flex;flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap;
}
.btn{
  padding:12px 18px;border-radius:10px;border:1px solid rgba(22,82,240,.18);
  cursor:not-allowed;
  background:linear-gradient(90deg, rgba(22,82,240,.45), rgba(43,124,255,.45));
  color:#ffffff;font-weight:800;opacity:.75;font-size:.95rem;flex-shrink:0;
}
.hint{ color:var(--accent); font-size:.95rem; line-height:1.5; white-space:nowrap; }

.float-layer{ position:fixed; inset:0; overflow:hidden; z-index:1; pointer-events:none; }
.chip{
  position:absolute;padding:6px 10px;border-radius:999px;border:1px solid var(--border);
  background:#ffffff;color:#23304a;font-size:.78rem;white-space:nowrap;display:flex;gap:8px;align-items:center;opacity:.8;
  transform:translate3d(0,0,0);
  box-shadow:0 10px 22px rgba(11,16,32,.07);
}
.chip .sym{font-weight:900;color:#23304a}
.chip .px{font-variant-numeric:tabular-nums;color:var(--muted)}
.chip.up .pct{ color:var(--ok); font-weight:800; }
.chip.down .pct{ color:var(--danger); font-weight:800; }

canvas#matrix{ position:fixed; inset:0; z-index:0; opacity:.10; filter:blur(.2px); }

.legal{ margin-top:28px; color:#3b4a67; font-size:.8rem; line-height:1.6; }
.card .legal{ margin-top:16px; }

@media (max-width:560px){
  body{ overflow:auto; }
  .header{ padding:12px 16px; }
  .logo-img{ width:30px; height:30px; }
  .brand .sub{ display:none; }

  .center{ padding:16px; }
  .card{ width:94vw; padding:20px 16px; border-radius:12px; }
  .card h2{ font-size:1.35rem; margin:10px 0 8px; }
  .card p{ font-size:.95rem; line-height:1.5; margin-bottom:0; }

  .cta{ margin-top:16px; flex-direction:column; align-items:flex-start; gap:12px; }
  .btn{ width:100%; text-align:center; padding:12px 14px; font-size:.95rem; }
  .hint{ white-space:normal; max-width:100%; line-height:1.45; }

  .card .legal{ margin-top:28px !important; font-size:.78rem; line-height:1.55; }

  .chip{ font-size:.7rem; padding:5px 8px; }
  canvas#matrix{ opacity:.08; }
}