/* style.css */
:root{
  --bg0:#070a12;
  --cardA:rgba(18,22,40,.74);
  --cardB:rgba(12,16,30,.56);
  --ink:#eaf0ff;
  --muted:rgba(234,240,255,.72);
  --muted2:rgba(234,240,255,.56);
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.16);
  --shadow:0 18px 60px rgba(0,0,0,.50);
  --ring:0 0 0 2px rgba(137,180,255,.25), 0 0 0 8px rgba(137,180,255,.10);
  --radius:18px;
  --radius2:22px;
  --sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg0);
  overflow-x:hidden;
}

/* soft nebula */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-4;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(120,90,255,.20) 0%, transparent 55%),
    radial-gradient(900px 600px at 80% 20%, rgba(60,180,255,.18) 0%, transparent 55%),
    radial-gradient(900px 700px at 40% 90%, rgba(255,80,170,.12) 0%, transparent 55%),
    #070a12;
}

/* star dust */
body::after{
  content:"";
  position:fixed;
  inset:-2px;
  z-index:-3;
  background:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.28) 0%, transparent 60%),
    radial-gradient(1px 1px at 40% 60%, rgba(255,255,255,.22) 0%, transparent 60%),
    radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,.20) 0%, transparent 60%),
    radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,.16) 0%, transparent 60%);
  opacity:.55;
  filter: blur(.2px);
  pointer-events:none;
}

.hidden{display:none !important}

.container{
  width:min(1100px, 100%);
  margin:0 auto;
  padding:18px 14px 44px;
}

/* nav */
.nav{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(7,10,18,.56);
  backdrop-filter: blur(12px);
}
.nav-left{display:flex;align-items:center;gap:12px;min-width:0}

.logo{
  font-weight:900;
  letter-spacing:.3px;
  user-select:none;
}
a.logo{
  color:var(--ink);
  text-decoration:none;
  display:inline-block;
}
a.logo:hover{opacity:.92}

.navlink{
  display:inline-flex;
  align-items:center;
  height:34px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.16);
  color:var(--muted);
  text-decoration:none;
  font-weight:900;
  font-size:12px;
  transition:.16s ease;
}
.navlink:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18);color:var(--ink)}
.navlink:active{transform:translateY(0)}

/* glitch */
.glitch{position:relative}
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  width:100%;
  overflow:hidden;
  clip:rect(0,900px,0,0);
  animation:glitch 3s infinite linear alternate-reverse;
  pointer-events:none;
}
.glitch::before{ text-shadow:-2px 0 rgba(120,90,255,.85) }
.glitch::after{  text-shadow: 2px 0 rgba(60,180,255,.85) }
@keyframes glitch{
  0%{clip:rect(20px,9999px,22px,0)}
  25%{clip:rect(2px,9999px,12px,0)}
  50%{clip:rect(14px,9999px,30px,0)}
  75%{clip:rect(8px,9999px,18px,0)}
  100%{clip:rect(40px,9999px,42px,0)}
}

/* hero */
.hero{padding:16px 2px 10px}
.hero h1{margin:0;font-size:22px}
.hero p{margin:6px 0 0;color:var(--muted);font-size:13px}
.miniHint{margin-top:10px;color:var(--muted2);font-size:12px}
.spark{
  background:linear-gradient(90deg, rgba(60,180,255,.95), rgba(120,90,255,.95));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* user */
.user{position:relative}
.user-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(22,26,44,.58), rgba(14,16,28,.46));
  color:var(--ink);
  cursor:pointer;
  transition:.16s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.user-btn:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.18)}
.user-btn:active{transform:translateY(0)}
.user-btn:focus{outline:none; box-shadow:var(--ring), 0 10px 30px rgba(0,0,0,.28)}
.user-btn img{
  width:30px;
  height:30px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.16);
}
.user-meta{display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:0}
.user-name{font-weight:900;line-height:1.0}
.user-balance{
  font-weight:900;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  line-height:1.0;
}
.chev{opacity:.7;font-weight:900}

/* menu */
.menu{
  position:absolute;
  right:0;
  top:52px;
  width:290px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(18,22,40,.88), rgba(12,16,30,.78));
  box-shadow:var(--shadow);
  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;
  transition:.18s ease;
}
.menu.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.menu-header{
  display:flex;
  gap:12px;
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.menu-header img{
  width:46px;
  height:46px;
  border-radius:16px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.14);
}
.menu-header .meta{display:flex;flex-direction:column;gap:4px;min-width:0}
#menuName{font-weight:900}
#menuBalance{color:var(--muted);font-size:12px}

.menu-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:14px;
}
.menu-actions button{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(22,26,44,.92), rgba(14,16,28,.92));
  color:var(--ink);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:900;
  transition:.16s ease;
}
.menu-actions button:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.18)}
.menu-actions button:active{transform:translateY(0)}
.menu-actions .primary{
  border-color:rgba(140,190,255,.22);
  background:linear-gradient(180deg, rgba(32,46,88,.95), rgba(16,18,30,.92));
  box-shadow:0 14px 40px rgba(40,120,255,.12), 0 10px 30px rgba(0,0,0,.35);
}
.menu-actions .danger{
  border-color:rgba(255,77,109,.22);
  background:linear-gradient(180deg, rgba(60,18,32,.92), rgba(14,16,28,.92));
}

/* slug input */
.slugGo{
  margin-top:14px;
  display:flex;
  gap:10px;
  align-items:center;
}
.slugGo input{
  flex:1;
  min-width:0;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  color:var(--ink);
  padding:0 12px;
  outline:none;
  transition:.15s ease;
}
.slugGo input:focus{
  border-color:rgba(137,180,255,.30);
  box-shadow:var(--ring);
}

/* grid cards */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:14px;
  margin-top:14px;
}
.card{
  border-radius:var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, var(--cardA), var(--cardB));
  box-shadow:0 12px 38px rgba(0,0,0,.35);
  overflow:hidden;
  transition:.18s ease;
}
.card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.card img{
  width:100%;
  height:165px;
  object-fit:cover;
  display:block;
  background:rgba(255,255,255,.04);
}
.card-body{padding:14px 14px 12px}
.card h3{margin:0 0 6px;font-size:15px;font-weight:900;letter-spacing:.2px}
.card p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  min-height:36px;
  white-space:pre-wrap;
}
.card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:12px;
}
.price{
  font-weight:900;
  background:linear-gradient(90deg, rgba(60,180,255,.95), rgba(120,90,255,.95));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* buttons */
.buy-btn,
#confirm,
#cancel,
#btnGoSlug,
.pill{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(22,26,44,.92), rgba(14,16,28,.92));
  color:var(--ink);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:900;
  transition:.16s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.buy-btn{padding:8px 12px}
.pill{border-radius:999px;box-shadow:none}
.pill.ghost{background:rgba(0,0,0,.14)}
.buy-btn:hover,
#confirm:hover,
#cancel:hover,
#btnGoSlug:hover,
.pill:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.18);
}
.buy-btn:active,
#confirm:active,
#cancel:active,
#btnGoSlug:active,
.pill:active{transform:translateY(0)}

#confirm,
#btnGoSlug{
  border-color:rgba(140,190,255,.22);
  background:linear-gradient(180deg, rgba(32,46,88,.95), rgba(16,18,30,.92));
  box-shadow:0 14px 40px rgba(40,120,255,.12), 0 10px 30px rgba(0,0,0,.35);
}
#cancel{
  background:rgba(0,0,0,.18);
  box-shadow:none;
}

/* creator */
.creatorHero{margin:10px 0 22px}
.creatorBanner{
  position:relative;
  height:210px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg, rgba(120,90,255,.18), rgba(60,180,255,.10));
}
.creatorBanner img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.creatorBannerShade{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.58));
  pointer-events:none;
}
.creatorRow{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-top:-34px;
  padding:0 10px;
  position:relative;
  z-index:2;
}
.creatorAvatar{
  width:84px;
  height:84px;
  border-radius:18px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.creatorBioWrap{
  margin-top:8px;
  display:block;
  min-width:0;
}

.creatorBio{
  display:inline-block;
  min-width:0;
  max-width:100%;
  color:rgba(255,255,255,.82);
  line-height:1.6;
}

/* 一行省略 */
.creatorBio.clamp{
  max-width:calc(100% - 92px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:middle;
}

.bioMore{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.16);
  color:var(--ink);
  cursor:pointer;
  font-weight:900;
  font-size:12px;
  transition:.16s ease;
  vertical-align:middle;
}
.bioMore:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.20)}
.bioMore:active{transform:translateY(0)}
.bioMore::before{content:"…";opacity:.8;margin-right:2px}
.bioMore.expanded::before{content:""}

.bioMore.hidden{display:none !important}




.creatorMeta{min-width:0;flex:1}
.creatorTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.creatorName{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  max-width:100%;

  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.28);
  backdrop-filter: blur(10px);

  font-size:22px;
  font-weight:900;
  letter-spacing:.2px;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.55);

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.creatorLinks{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.creatorBio{
  margin-top:8px;
  font-size:13px;
  color:rgba(255,255,255,.82);
  line-height:1.6;
  white-space:pre-line;
}
.rec{margin-top:14px}
.recActions{display:flex;gap:10px;flex-wrap:wrap}

.recGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:12px;
}

.recCard{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(18,22,40,.80), rgba(12,16,30,.65));
  box-shadow:0 12px 34px rgba(0,0,0,.35);
  cursor:pointer;
  transition:.18s ease;
}
.recCard:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18)}
.recAvatar{
  width:46px;height:46px;border-radius:16px;object-fit:cover;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
}
.recMeta{min-width:0;flex:1}
.recName{font-weight:900}
.recBio{
  margin-top:4px;
  font-size:12px;
  color:rgba(234,240,255,.72);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* gallery */
.creatorGallery{margin:10px 0 28px}
.sectionHead{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 10px}
.sectionHead h2{margin:0;font-size:14px;letter-spacing:.6px;opacity:.9}
.sectionHead .hint{font-size:12px;color:var(--muted2)}
.galleryGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:12px;
}
.galleryGrid .g{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  transition:.18s ease;
}
.galleryGrid .g:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 14px 34px rgba(0,0,0,.45);
}
.galleryGrid img{
  width:100%;
  height:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}

/* error */
.creatorError{
  display:flex;
  justify-content:center;
  margin:80px 0;
}
.errorCard{
  width:min(420px, 100%);
  padding:26px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(18,22,40,.90), rgba(12,16,30,.85));
  box-shadow:0 20px 60px rgba(0,0,0,.50);
  text-align:center;
}
.errorTitle{font-size:20px;font-weight:900}
.errorDesc{margin-top:10px;font-size:13px;opacity:.75}

/* modal with real animation */
.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  z-index:200;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}
.modal.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.modal-content{
  position:relative;
  width:min(520px, 100%);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(18,22,40,.92), rgba(12,16,30,.82));
  box-shadow:var(--shadow);
  padding:16px;

  transform:translateY(16px) scale(.98);
  opacity:0;
  transition:transform .22s ease, opacity .22s ease;
}
.modal.show .modal-content{
  transform:translateY(0) scale(1);
  opacity:1;
}
.close{
  position:absolute;
  right:16px;
  top:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  color:var(--ink);
  width:38px;
  height:38px;
  border-radius:12px;
  cursor:pointer;
}
.modal-content h2{margin:0 0 10px;font-size:18px;font-weight:900}
.modal-content p{margin:8px 0;color:var(--muted);font-size:13px}

.qty{display:flex;gap:10px;align-items:center;margin:10px 0}
.qty button{
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:var(--ink);
  cursor:pointer;
  font-size:18px;
  font-weight:900;
}
.qty input{
  flex:1;
  min-width:0;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:var(--ink);
  text-align:center;
  font-weight:900;
  outline:none;
}
.qty input:focus{border-color:rgba(137,180,255,.30); box-shadow:var(--ring)}
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}

/* info body */
.infoBody{
  margin-top:8px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  color:var(--ink);
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.7;
  max-height:50vh;
  overflow:auto;
}

/* toast */
.toastHost{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:300;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.toast{
  width:min(360px, 92vw);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(18,22,40,.92), rgba(12,16,30,.82));
  box-shadow:var(--shadow);
  padding:12px 14px;
  color:var(--ink);
  transform:translateY(8px);
  opacity:0;
  animation:toastIn .22s ease forwards;
}
.toast .t{font-weight:900}
.toast .d{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.5}
@keyframes toastIn{
  to{transform:translateY(0);opacity:1}
}

@media (max-width:768px){
  .container{padding:14px 12px 34px}
  .grid{grid-template-columns:repeat(auto-fill, minmax(170px, 1fr))}
  .card img{height:140px}
  .menu{width:min(92vw, 320px)}
  .creatorBanner{height:170px;border-radius:16px}
  .creatorRow{margin-top:-26px}
  .creatorAvatar{width:70px;height:70px;border-radius:16px}
  .creatorName{font-size:19px}
  .creatorTop{flex-direction:column;align-items:flex-start}
  .creatorLinks{justify-content:flex-start}
  .slugGo{flex-direction:column;align-items:stretch}
  #btnGoSlug{width:100%}
  .galleryGrid{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr))}
}