:root{
  --bg-1:#0b0f13;
  --bg-2:#0f1519;
  --glass: rgba(255,255,255,0.04);
  --accent:#7c5cff;
  --muted:rgba(255,255,255,0.6);
  --success:#3be6b0;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(124,92,255,0.08), transparent),
              linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:#e9eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:40px 16px;
}

.page{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative}

  :root{
    --bg-1:#000000;
    --bg-2:#070707;
    --glass: rgba(255,255,255,0.03);
    --accent:#ffffff;
    --muted:rgba(255,255,255,0.75);
    --shadow: rgba(0,0,0,0.7);
  }
.center{width:100%;max-width:760px;margin:0 auto}
.card{
  backdrop-filter:blur(14px) saturate(120%);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.04);
  border-radius:14px;padding:18px;text-align:left;
  box-shadow:0 14px 50px rgba(0,0,0,0.7), 0 0 40px rgba(124,92,255,0.04) inset;
  display:flex;gap:18px;align-items:center;overflow:hidden
}

.card.horizontal{padding:18px 18px}

.left{display:flex;flex-direction:column;align-items:center;gap:8px;width:160px}
.avatar-wrap{display:block;margin:0}
.avatar{width:128px;height:128px;border-radius:18px;border:1px solid rgba(255,255,255,0.04);object-fit:cover;box-shadow:0 12px 40px rgba(0,0,0,0.6)}

.info-row{display:flex;flex-direction:column;gap:6px}
.name{margin:0;font-size:1.5rem;font-weight:600}
.role{margin:0;color:var(--muted);font-size:0.95rem}

.right{flex:1;display:flex;flex-direction:column;gap:10px}
.links.row{display:flex;gap:10px;align-items:center}
.link.small{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:transparent;color:inherit;text-decoration:none;border:1px solid rgba(255,255,255,0.03);transition:all .16s}
  .card{
    backdrop-filter:blur(12px) saturate(110%);
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.04);
    border-radius:14px;padding:18px;text-align:left;
    box-shadow:0 14px 40px var(--shadow), inset 0 0 24px rgba(255,255,255,0.02);
    display:flex;gap:18px;align-items:center;overflow:hidden;
    animation: floatIn .6s cubic-bezier(.2,.9,.3,1) both;
  }
.link.small img{width:18px;height:18px;display:block}
.link.small span{font-size:0.92rem;color:var(--muted)}
  .avatar{width:128px;height:128px;border-radius:18px;border:1px solid rgba(255,255,255,0.04);object-fit:cover;box-shadow:0 12px 40px var(--shadow)}
.link.small:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(124,92,255,0.06)}

.asset-row{display:none}
  .link.small{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:transparent;color:inherit;text-decoration:none;border:1px solid rgba(255,255,255,0.03);transition:all .16s}
  .link.small img{width:18px;height:18px;display:block;filter:grayscale(0) contrast(1)}
  .link.small span{font-size:0.92rem;color:var(--muted)}
  .link.small:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,0.5)}

.shop-fab{position:fixed;right:18px;bottom:18px;background:linear-gradient(180deg,var(--accent),#5d3bff);color:white;padding:12px 14px;border-radius:999px;display:flex;gap:10px;align-items:center;text-decoration:none;box-shadow:0 12px 30px rgba(92,60,255,0.28);border:1px solid rgba(255,255,255,0.06)}
  .product-card{background:var(--glass);border:1px solid rgba(255,255,255,0.04);padding:14px;border-radius:12px;display:flex;flex-direction:column;gap:8px;position:relative;transition:transform .18s,box-shadow .18s;animation: popIn .32s cubic-bezier(.2,.9,.3,1) both}
  .product-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px var(--shadow)}
.shop-fab svg{opacity:0.95}

  .shop-fab{position:fixed;right:18px;bottom:18px;background:linear-gradient(180deg,var(--accent),#e9e9e9);color:#000;padding:10px 12px;border-radius:999px;display:flex;gap:10px;align-items:center;text-decoration:none;box-shadow:0 12px 30px rgba(0,0,0,0.6);border:1px solid rgba(0,0,0,0.08)}
  .shop-fab svg{opacity:0.95;filter:invert(1)}
  .wing{position:absolute;left:50%;transform:translateX(-50%) rotate(-4deg);top:-54px;width:360px;pointer-events:none;opacity:0.95;filter:drop-shadow(0 12px 20px rgba(0,0,0,0.7));transform-origin:50% 18px;animation:swing 8s ease-in-out infinite}

  @keyframes swing{
    0%{transform:translateX(-50%) rotate(-4deg)}
    30%{transform:translateX(-50%) rotate(5deg)}
    60%{transform:translateX(-50%) rotate(-2deg)}
    100%{transform:translateX(-50%) rotate(-4deg)}
  }

  @keyframes floatIn{from{opacity:0;transform:translateY(8px) scale(.996)}to{opacity:1;transform:none}}
  @keyframes popIn{from{opacity:0;transform:translateY(6px) scale(.996)}to{opacity:1;transform:none}}

  /* subtle stagger for links */
  .links.row .link.small{opacity:0;transform:translateY(6px);animation:fadeUp .5s ease forwards}
  .links.row .link.small:nth-child(1){animation-delay:0.08s}
  .links.row .link.small:nth-child(2){animation-delay:0.16s}
  .links.row .link.small:nth-child(3){animation-delay:0.24s}

  @keyframes fadeUp{to{opacity:1;transform:none}}
  
  /* icon-only socials: hide label, show tooltip on hover */
  .link.icon-only{position:relative;padding:8px;border-radius:10px}
  .link.icon-only img{width:20px;height:20px;display:block}
  .link.icon-only .tooltip{position:absolute;left:50%;transform:translateX(-50%) translateY(-8px);bottom:100%;background:rgba(0,0,0,0.85);color:#fff;padding:6px 8px;border-radius:8px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s,transform .14s}
  .link.icon-only:hover .tooltip{opacity:1;transform:translateX(-50%) translateY(-12px)}

  /* bio typewriter */
  .bio{color:var(--muted);font-size:0.98rem;margin-top:6px}
  .bio .cursor{display:inline-block;margin-left:6px;opacity:1;animation: blink 1s steps(2,end) infinite}
  @keyframes blink{50%{opacity:0}}

  /* audio control */
  .audio-control{position:fixed;left:16px;bottom:18px;z-index:90}
  .audio-control button{width:44px;height:44px;border-radius:999px;border:0;background:transparent;color:var(--accent);backdrop-filter:blur(6px);box-shadow:0 10px 28px rgba(0,0,0,0.6);cursor:pointer;font-size:16px}

  /* rain drops */
  #snow{position:fixed;left:0;top:0;right:0;bottom:0;pointer-events:none;overflow:hidden;z-index:10}
  .raindrop{position:absolute;top:-20px;background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.6));border-radius:2px;pointer-events:none;opacity:0.9;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.45));transform:translate3d(0,0,0);animation-name:rainFall;animation-timing-function:linear}
  @keyframes rainFall{to{transform:translateY(110vh);opacity:0.2}}
/* Shop page */
.shop-header{display:flex;align-items:center;gap:12px;padding:18px;max-width:1000px;margin:0 auto 6px}
.shop-header .back{color:var(--muted);text-decoration:none}
.shop-header h1{margin:0;color:#fff}

.shop-page{max-width:1000px;margin:0 auto;padding:10px}
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.product-card{background:var(--glass);border:1px solid rgba(255,255,255,0.04);padding:14px;border-radius:12px;display:flex;flex-direction:column;gap:8px;position:relative;transition:transform .18s,box-shadow .18s}
.product-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,0.6)}
.product-title{font-weight:600}
.product-price{color:var(--accent);font-weight:700}
.product-stock{font-size:0.85rem;color:var(--muted)}
.product-cta{margin-top:8px;padding:8px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);cursor:pointer;color:#fff}

.badge{position:absolute;right:10px;top:10px;background:rgba(0,0,0,0.4);padding:6px 8px;border-radius:999px;font-size:0.75rem}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:70}
.modal.show{display:flex}
.modal-backdrop{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.55),rgba(0,0,0,0.6));backdrop-filter:blur(4px)}
.modal-panel{position:relative;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));border-radius:12px;padding:20px;max-width:520px;width:94%;z-index:80;border:1px solid rgba(255,255,255,0.04)}
.modal-close{position:absolute;right:10px;top:8px;background:transparent;border:0;color:var(--muted);font-size:20px;cursor:pointer}

.payment-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.payment-item{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:10px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03)}
.copy-btn{background:transparent;border:0;color:var(--accent);cursor:pointer}

/* Responsive */
@media (max-width:900px){.products-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){
  .center{max-width:360px}
  .avatar{width:116px;height:116px}
  .products-grid{grid-template-columns:1fr}
  .links{gap:8px}
  .shop-fab{right:12px;bottom:12px;padding:10px}
}

/* utility */
.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}

/* small toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:80px;background:#111;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,0.04);color:#fff;box-shadow:0 8px 30px rgba(0,0,0,0.6)}

/* Overrides and square card styling for compact, minimal look */
.center{max-width:820px;padding-top:320px}
.card.square{width:720px;min-height:180px;padding:20px;border-radius:16px;box-shadow:0 28px 80px var(--shadow);display:flex;flex-direction:row;align-items:center;gap:20px;transform:none;margin:0 auto}
.card.square .top-bio{order:3;margin-top:10px;width:100%;text-align:center}
.center-avatar{order:0;margin-bottom:0}
.social-row{order:0;margin-top:0}
.meta-small{margin-top:10px;text-align:center}
.meta-small .name{font-size:1.18rem}
.meta-small .role{font-size:0.86rem;color:var(--muted)}

.links.row.social-row{display:flex;gap:14px;justify-content:flex-start;margin-top:0}
.card.square .links.row.social-row{margin-left:auto}
.card.square .link.small{background:transparent;border:0;padding:6px;box-shadow:none}
.card.square .link.small img{width:28px;height:28px}
.card.square .link.small:focus{outline:0;box-shadow:none}

.playlist{margin-left:8px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:6px;border-radius:8px}

/* make wing larger and centered like a logo above the card; keep behind the card */
.wing{position:fixed;left:50%;top:-6px;transform:translateX(-50%) rotate(-4deg);width:520px;max-width:85vw;opacity:0.95;filter:drop-shadow(0 18px 26px rgba(0,0,0,0.8));z-index:1;transform-origin:50% 18px;pointer-events:none;animation:swing 8s ease-in-out infinite}
.card.square{z-index:6;position:relative}

/* FAB pressed label toggling */
.shop-fab .label-default{font-weight:700}
.shop-fab .label-active{display:none}
.shop-fab.pressed .label-default{display:none}
.shop-fab.pressed .label-active{display:inline}

/* mobile adjustments */
@media (max-width:520px){
  .card.square{width:300px;min-height:auto;padding:16px}
  .wing{display:none}
  .center{padding-top:60px}
}

/* audio-control dark theme when playing */
.audio-control.playing{background:#000;padding:6px;border-radius:10px}
.audio-control.playing select.playlist{background:#000;color:#fff;border-color:rgba(255,255,255,0.12)}
.audio-control.playing button{background:#111;color:#fff}