:root { --blue:#3b82f6; --sky:#60a5fa; --cyan:#22d3ee; --beige:#e8dcc4; }
html,body { margin:0; min-height:100%; }
body {
  font-family:'Bricolage Grotesque',sans-serif;
  background: radial-gradient(ellipse at center, #1a120d 0%, #0d0907 60%, #070504 100%);
  color: var(--beige); overflow-x:hidden;
}
.mono { font-family:'JetBrains Mono',monospace; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.06; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.blob { position:fixed; width:420px; height:420px; border-radius:50%; filter:blur(110px); opacity:.16; z-index:0; pointer-events:none; }
.b1 { background:var(--blue); top:-120px; left:-100px; animation:drift 18s ease-in-out infinite alternate; }
.b2 { background:var(--cyan); bottom:-140px; right:-120px; animation:drift 22s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform:translate(120px,80px) scale(1.2); } }

.rise { opacity:0; animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }

.avatar-ring { width:140px; height:140px; padding:3px; border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg,var(--blue),var(--sky),var(--cyan));
  animation:breathe 4s ease-in-out infinite; transition:transform .3s; }
.avatar-ring:hover { transform:scale(1.04); }
@keyframes breathe { 0%,100% { box-shadow:0 0 22px rgba(59,130,246,.45); } 50% { box-shadow:0 0 44px rgba(59,130,246,.75), 0 0 80px rgba(34,211,238,.2); } }
@media (max-width:640px){ .avatar-ring{ width:120px; height:120px; } }

.gradient-name { background:linear-gradient(90deg,var(--sky),var(--blue),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(59,130,246,.35)); }
.subtitle { color:var(--beige); letter-spacing:.03em; }

.badge { position:relative; overflow:hidden; display:flex; align-items:center; gap:.55rem; padding:.7rem 1.3rem; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid rgba(96,165,250,.4); color:#dbeafe; font-size:.95rem;
  box-shadow:0 0 14px rgba(59,130,246,.22); transition:all .3s; }
.badge:hover { transform:translateY(-2px); box-shadow:0 0 26px rgba(59,130,246,.5); border-color:var(--sky); }
.badge::after { content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); transform:skewX(-20deg); transition:left .7s; }
.badge:hover::after { left:130%; }
.tooltip { position:absolute; top:115%; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:.7rem;
  background:#120c09; border:1px solid rgba(96,165,250,.35); padding:.4rem .7rem; border-radius:8px; z-index:5; animation:rise .3s forwards; }

.wide-link { display:flex; align-items:center; gap:1rem; width:100%; padding:1rem 1.2rem; border-radius:16px;
  background:rgba(255,255,255,.035); border:1px solid rgba(232,220,196,.14);
  box-shadow:0 0 20px rgba(59,130,246,.12); transition:all .3s; text-decoration:none; }
.wide-link:hover { border-color:rgba(96,165,250,.5); box-shadow:0 0 30px rgba(59,130,246,.3); }
.bird { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(239,68,68,.1); box-shadow:0 0 18px rgba(239,68,68,.35); }
.arrow { transition:transform .3s; }
.wide-link:hover .arrow { transform:translateX(6px); }

.edit-input { background:rgba(255,255,255,.05); border:1px dashed rgba(96,165,250,.5); border-radius:8px; padding:.25rem .5rem;
  color:var(--beige); outline:none; text-align:center; max-width:100%; }
.gradient-name.edit-input { -webkit-text-fill-color:#93c5fd; }

.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#140e0a; border:1px solid var(--blue);
  color:#dbeafe; padding:.6rem 1.1rem; border-radius:999px; font-size:.8rem; box-shadow:0 0 20px rgba(59,130,246,.4); z-index:30; }