@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
:root {
  --bg: #0A0D14;
  --violet: #8A2BE2;
  --pink: #FF007A;
  --cyan: #00F2FE;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; max-width: 100%; overflow-x: hidden; background: #05070c; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  font-family: "Outfit", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: #fff;
}
button, a, input, textarea { font-family: inherit; }
button { cursor: pointer; touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
::selection { background: #8A2BE2; color: #fff; }
:focus-visible { outline: 2px solid #00F2FE; outline-offset: 2px; }
#app {
  width: 100%;
  max-width: 480px;
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 90px rgba(138,43,226,.2);
}
.glow-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.glow { position: absolute; border-radius: 50%; filter: blur(28px); pointer-events: none; }
.g1 { width: 200px; height: 200px; background: rgba(138,43,226,.42); top: -70px; left: -60px; }
.g2 { width: 170px; height: 170px; background: rgba(255,0,122,.28); top: 10px; right: -50px; }
.g3 { width: 140px; height: 140px; background: rgba(0,242,254,.12); top: 240px; left: 40%; }
header, main, .tabbar, .legalbar { z-index: 2; }
header {
  position: relative;
  flex: none;
  padding: calc(10px + env(safe-area-inset-top)) 14px 12px;
  background: rgba(10,13,20,.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
main {
  position: relative;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 14px calc(112px + env(safe-area-inset-bottom));
}
.brand-kicker { font-size: 10px; letter-spacing: .22em; font-weight: 800; color: var(--cyan); }
.brand-sub { margin-top: 2px; font-size: 11px; color: rgba(255,255,255,.68); }
h1 { margin: 8px 0 0; font-size: 18px; line-height: 1.28; font-weight: 900; }
.en-kicker { margin: 4px 0 0; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--pink); }
#heroBtn {
  position: relative;
  width: 96px;
  height: 122px;
  border: 0;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  display: block;
  flex: none;
  background: linear-gradient(160deg, #8A2BE2, #FF007A 60%, #00F2FE);
  box-shadow: 0 10px 28px rgba(255,0,122,.28);
}
#heroImg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease; z-index: 0; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 32%, rgba(0,0,0,.78)); pointer-events: none; }
#heroName, #heroCap, #heroBar { position: absolute; z-index: 2; }
#heroName { left: 6px; right: 6px; bottom: 28px; font-size: 9px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px #000; }
#heroCap { left: 6px; right: 6px; bottom: 12px; font-size: 12px; font-weight: 800; text-shadow: 0 1px 6px #000; }
#heroBar { left: 0; right: 0; bottom: 0; height: 3px; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, #8A2BE2, #FF007A, #00F2FE); }
#heroBar.run { animation: load3 3s linear; }
@keyframes load3 { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pill {
  border: 1px solid rgba(0,242,254,.35);
  color: var(--cyan);
  background: rgba(0,242,254,.08);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
}
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 36px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.fx { transition: transform .18s cubic-bezier(.2,.8,.2,1), filter .18s ease; }
.fx:active { transform: scale(.96); filter: brightness(1.12); }
.card { transition: transform .18s ease; }
.card:active { transform: scale(.985); }
.num { font-variant-numeric: tabular-nums; font-family: Outfit, "Noto Sans TC", sans-serif; }
.rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  max-width: 100%;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.shotbox { position: relative; overflow: hidden; flex: none; }
.shotbox img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.score {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: conic-gradient(#00F2FE calc(var(--p) * 1%), rgba(255,255,255,.12) 0);
  display: grid; place-items: center;
}
.score span {
  width: 32px; height: 32px; border-radius: 50%; background: #121722; color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
}
.clamp2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chip {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  font-size: 10px; color: rgba(255,255,255,.82);
  margin: 0 6px 6px 0;
}
.hbar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.hbar > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FF007A, #8A2BE2, #00F2FE); border-radius: 99px; }
.cta {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; border-radius: 14px; border: 0; color: #041016; font-weight: 800;
  background: linear-gradient(90deg, #00F2FE, #8A2BE2 55%, #FF007A);
}
.vote-hot, .vote-not {
  min-height: 46px; border-radius: 14px; font-weight: 900; letter-spacing: .08em;
}
.vote-hot { border: 0; color: #fff; background: linear-gradient(90deg, #FF007A, #8A2BE2); }
.vote-not { color: #fff; background: transparent; border: 1px solid rgba(0,242,254,.5); }
button:disabled { opacity: .45; }
.live { display: inline-flex; align-items: center; gap: 6px; color: var(--pink); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.live::before {
  content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--pink);
  box-shadow: 0 0 0 0 rgba(255,0,122,.7); animation: ping 1.6s infinite;
}
@keyframes ping {
  70% { box-shadow: 0 0 0 7px rgba(255,0,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,0,122,0); }
}
.kicker { font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--cyan); }
.legalbar {
  position: absolute; left: 0; right: 0;
  bottom: calc(58px + env(safe-area-inset-bottom));
  z-index: 20;
  display: flex; gap: 14px; overflow-x: auto;
  padding: 8px 12px;
  background: rgba(10,13,20,.9);
  border-top: 1px solid rgba(255,255,255,.06);
  scrollbar-width: none;
}
.legalbar::-webkit-scrollbar { display: none; }
.legalbar button {
  flex: none; border: 0; background: transparent; color: rgba(255,255,255,.62);
  font-size: 10px; letter-spacing: .01em; white-space: nowrap; padding: 4px 0;
}
.legalbar button:active { color: var(--cyan); }
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(58px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(10,13,20,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.08);
}
.tab {
  border: 0; background: transparent; color: rgba(255,255,255,.48);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 10px; font-weight: 800;
}
.tab svg { width: 18px; height: 18px; }
.tab .dot { width: 14px; height: 2px; border-radius: 99px; background: transparent; }
.tab.on { color: var(--cyan); }
.tab.on .dot { background: linear-gradient(90deg, #8A2BE2, #FF007A, #00F2FE); }
.tab:active { transform: scale(.94); }
.overlay { position: absolute; inset: 0; z-index: 40; }
.overlay.hidden, .hidden { display: none !important; }
#mentor { z-index: 60; background: rgba(5,7,12,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.backdrop { position: absolute; inset: 0; background: rgba(5,7,12,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.panel.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88%; overflow-y: auto; border-radius: 28px 28px 0 0;
  padding: 0 16px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(105%);
  transition: transform .36s cubic-bezier(.2,.85,.2,1);
}
.panel.sheet.show { transform: translateY(0); }
.grab { display: flex; justify-content: center; padding: 10px 0 6px; touch-action: none; }
.grab span { width: 42px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.28); }
.x {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.4); color: #fff;
}
.mentor-wrap {
  position: absolute; left: 14px; right: 14px; top: 7%; bottom: 7%;
  display: flex; align-items: center; z-index: 2;
}
.aura {
  width: 100%; max-height: 100%; overflow: auto;
  padding: 1.5px; border-radius: 30px;
  background: linear-gradient(120deg, #8A2BE2, #FF007A, #00F2FE);
  background: conic-gradient(from var(--a, 0deg), #8A2BE2, #FF007A, #00F2FE, #8A2BE2);
  animation: spin 4s linear infinite, pop .45s ease;
  box-shadow: 0 0 42px rgba(255,0,122,.28), 0 0 70px rgba(138,43,226,.25);
}
@keyframes spin { to { --a: 360deg; } }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.mentor-inner { position: relative; border-radius: 28px; background: #0C1018; padding: 22px 16px 16px; }
#toast {
  position: absolute; left: 50%; z-index: 70; pointer-events: none;
  bottom: calc(118px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(8px); opacity: 0;
  background: #0A0D14; color: #fff; border: 1px solid rgba(0,242,254,.5);
  border-radius: 999px; padding: 8px 14px; font-size: 12px; font-weight: 700;
  transition: .25s ease; white-space: nowrap; max-width: 90%;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.field {
  width: 100%; border-radius: 14px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04); color: #fff; padding: 12px 14px; font-size: 16px; outline: none;
}
.field:focus { border-color: #00F2FE; }
.lbl { display: block; margin: 12px 0 6px; font-size: 12px; color: rgba(255,255,255,.7); }
.langitem {
  width: 100%; text-align: left; padding: 14px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1); background: transparent; color: #fff;
  font-weight: 700; margin-bottom: 8px;
}
.langitem.on { border-color: rgba(0,242,254,.65); color: #00F2FE; }
.copyline { text-align: center; color: rgba(255,255,255,.35); font-size: 10px; letter-spacing: .14em; padding: 18px 0 8px; }
.flex { display: flex; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.min-w-0 { min-width: 0; }
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.place-items-center { place-items: center; }
.w-full { width: 100%; }
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }
.w-20, .h-20 { width: 80px; height: 80px; }
.h-20 { height: 80px; }
.w-\[168px\] { width: 168px; }
.w-\[210px\] { width: 210px; }
.h-\[112px\] { height: 112px; }
.h-\[92px\], .w-\[92px\] { width: 92px; height: 92px; }
.h-\[92px\] { height: 92px; }
.h-\[84px\], .w-\[84px\] { width: 84px; height: 84px; }
.h-\[84px\] { height: 84px; }
.h-\[190px\] { height: 190px; }
.rounded-2xl { border-radius: 16px; }
.rounded-3xl { border-radius: 24px; }
.rounded-full { border-radius: 999px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-1 { margin-bottom: 4px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-xs { font-size: 12px; }
.text-sm { font-size: 14px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 24px; }
.text-3xl { font-size: 30px; }
.text-4xl { font-size: 36px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[12px\] { font-size: 12px; }
.text-\[18px\] { font-size: 18px; }
.text-\[22px\] { font-size: 22px; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }
.leading-snug { line-height: 1.35; }
.leading-relaxed { line-height: 1.6; }
.leading-5 { line-height: 1.25rem; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-flex { display: inline-flex; }
.text-\[\#00F2FE\] { color: #00F2FE; }
.text-\[\#FF007A\] { color: #FF007A; }
.text-white\/45 { color: rgba(255,255,255,.45); }
.text-white\/50 { color: rgba(255,255,255,.5); }
.text-white\/55 { color: rgba(255,255,255,.55); }
.text-white\/65 { color: rgba(255,255,255,.65); }
.text-white\/70 { color: rgba(255,255,255,.7); }
.text-white\/75 { color: rgba(255,255,255,.75); }
.text-white\/80 { color: rgba(255,255,255,.8); }
.bg-\[\#FF007A\]\/15 { background: rgba(255,0,122,.15); }
.bg-\[\#00F2FE\]\/10 { background: rgba(0,242,254,.1); }
.border { border-width: 1px; border-style: solid; }
.border-white\/10 { border-color: rgba(255,255,255,.1); }
.border-\[\#00F2FE\]\/40 { border-color: rgba(0,242,254,.4); }
[data-act="product"] { cursor: pointer; }
#view > * { animation: rise .38s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.linkbtn {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04); font-weight: 700; margin-top: 8px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}