/* ═══════════════════════════════════════════════════
   家边の漁港 — Shared Base Styles
   Extracted from individual pages to reduce duplication
   ═══════════════════════════════════════════════════ */

/* ── Reset & Base ── */
*{ -webkit-tap-highlight-color: transparent }
body{ font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "HarmonyOS Sans", "Noto Sans SC", sans-serif; background:#060e1e; color:#fff }

/* ── Page Container ── */
.pg{ background: #060e1e; min-height: 100vh }

/* ── Hide Scrollbar (utility) ── */
.scroll-hide::-webkit-scrollbar{ display: none }
.scroll-hide{ -ms-overflow-style: none; scrollbar-width: none }

/* ── Frosted Glass ── */
.bf{ backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px) }

/* ── Animations ── */

/* White pulse (AI avatar glow) */
@keyframes wht-pulse{
  0%,100%{ box-shadow:0 0 0 5px rgba(255,255,255,.25),0 4px 14px rgba(0,0,0,.2),0 0 16px rgba(255,255,255,.28); transform:scale(1) }
  50%{ box-shadow:0 0 0 8px rgba(255,255,255,.15),0 4px 14px rgba(0,0,0,.2),0 0 32px rgba(255,255,255,.55); transform:scale(1.07) }
}
.wht-pulse{ animation:wht-pulse 2.5s ease-in-out infinite }

/* Green pulse (cart/status glow) */
@keyframes grn-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(23,201,105,.5),0 0 0 0 rgba(23,201,105,.2) }
  50%{ box-shadow:0 0 0 12px rgba(23,201,105,0),0 0 0 20px rgba(23,201,105,.05) }
}
.grn-pulse{ animation:grn-pulse 2.5s ease-in-out infinite }

/* AI glow box */
@keyframes ai-glow{
  0%,100%{ box-shadow:0 0 8px rgba(23,201,105,.45),0 0 16px rgba(23,201,105,.2) }
  50%{ box-shadow:0 0 16px rgba(23,201,105,.7),0 0 32px rgba(23,201,105,.35) }
}
.ai-glow-box{ animation:ai-glow 2s ease-in-out infinite; border-color:rgba(23,201,105,.65) !important }

/* AI bounce */
@keyframes ai-bounce{
  0%,100%{ transform:translateY(0) scale(1) }
  50%{ transform:translateY(-7px) scale(1.08) }
}
.ai-bounce{ animation:ai-bounce 2s ease-in-out infinite }

/* Fade up (entry animation) */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:translateY(0) } }
.fade-up{ animation:fadeUp .5s ease-out forwards; opacity:0 }
.fade-up-d2{ animation:fadeUp .5s ease-out .1s forwards; opacity:0 }
.fade-up-d3{ animation:fadeUp .5s ease-out .2s forwards; opacity:0 }
.fade-up-d4{ animation:fadeUp .5s ease-out .3s forwards; opacity:0 }
.fade-up-d5{ animation:fadeUp .5s ease-out .4s forwards; opacity:0 }

/* Typing cursor */
.typing-cursor::after{ content:'|'; animation:blink 1s infinite; color:#17C969 }
@keyframes blink{ 0%,100%{ opacity:1 } 50%{ opacity:0 } }

/* Typing dots (chat) */
@keyframes dot-bounce{ 0%,80%,100%{ opacity:0 } 40%{ opacity:1 } }
.typing-dots span{ animation:dot-bounce 1.4s infinite; font-size:18px }
.typing-dots span:nth-child(2){ animation-delay:.2s }
.typing-dots span:nth-child(3){ animation-delay:.4s }

/* Toast notification */
.toast{
  position:fixed; top:68px; left:50%; transform:translateX(-50%);
  background:rgba(23,201,105,.9); color:#fff; padding:10px 28px;
  border-radius:24px; font-size:14px; z-index:9999;
  backdrop-filter:blur(8px); font-weight:500; white-space:nowrap;
  max-width:90vw; overflow:hidden; text-overflow:ellipsis
}
@keyframes toastIn{ from{ opacity:0; transform:translateX(-50%) translateY(-10px) } to{ opacity:1; transform:translateX(-50%) translateY(0) } }
.toast-in{ animation:toastIn .25s ease }

/* ── Panel transition (chat panel etc.) ── */
.cp{ transition:transform .38s cubic-bezier(.4,0,.2,1) }
.mk{ transition:opacity .28s }

/* ── Product card scale ── */
.pcd:hover .pi{ transform:scale(1.07) }
.pcd:active{ transform:scale(.97) }
.pcd{ transition:transform .3s }

/* ── Tag button states ── */
.tag-btn{ transition:all .2s }
.tag-btn.active{ background:rgba(23,201,105,.15) !important; border-color:rgba(23,201,105,.5) !important; color:#17C969 !important }

/* ── Wave background (gradient animation) ── */
.wv-bg{
  background-color:#071a10;
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(23,201,105,0.3) 0%, rgba(23,201,105,0.1) 30%, transparent 70%),
    radial-gradient(ellipse at 70% 80%, rgba(23,201,105,0.15) 0%, transparent 50%);
  background-size:300% 300%;
  background-position:30% 20%;
  position:relative;
  overflow:hidden;
  animation:wave 20s ease-in-out infinite
}
.wv-bg::before{
  content:'';
  position:absolute;
  inset:-50%;
  background:radial-gradient(ellipse at 50% 50%, rgba(23,201,105,0.08) 0%, transparent 50%);
  animation:halo 25s ease-in-out infinite;
  pointer-events:none
}
@keyframes wave{
  0%{ background-position:20% 10% }
  25%{ background-position:80% 30% }
  50%{ background-position:70% 80% }
  75%{ background-position:30% 60% }
  100%{ background-position:20% 10% }
}
@keyframes halo{
  0%{ transform:translate(-10%,-10%) scale(1); opacity:0.3 }
  25%{ transform:translate(10%,5%) scale(1.1); opacity:0.5 }
  50%{ transform:translate(15%,20%) scale(1.2); opacity:0.6 }
  75%{ transform:translate(5%,10%) scale(1.1); opacity:0.4 }
  100%{ transform:translate(-10%,-10%) scale(1); opacity:0.3 }
}

/* ── Gradient text (gold) ── */
.txt-g{
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text
}

/* ── Hidden (Tailwind CDN fallback) ── */
.hidden{display:none!important}

/* ── 语音模式按钮 ── */
.voice-mode-btn{
  width:100%;
  height:56px;
  border-radius:9999px;
  background:rgba(23,201,105,0.12);
  border:1px solid rgba(23,201,105,0.30);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  touch-action:none;
  transition:background .2s, border-color .2s;
  position:relative
}
.voice-mode-btn:active,.voice-mode-btn.dragging{
  background:rgba(23,201,105,0.22);
  border-color:rgba(23,201,105,0.5)
}
/* ── 文字输入模式 ── */
.text-mode-input{
  width:100%;
  height:56px;
  border-radius:9999px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.15);
  display:flex;
  align-items:center;
  padding:0 8px 0 20px;
  gap:8px
}

/* ── Slide down ── */
@keyframes slideDown{ from{ opacity:0; transform:translateY(-10px) } to{ opacity:1; transform:translateY(0) } }
.slide-down{ animation:slideDown .3s ease-out forwards }

/* ═══════════════════════════════════════════════════
   Tailwind CDN Replacement (auto-generated)
   ═══════════════════════════════════════════════════ */

.bg-black\/40{background-color:rgba(0,0,0,0.4)}
.bg-black\/50{background-color:rgba(0,0,0,0.5)}
.bg-black\/60{background-color:rgba(0,0,0,0.6)}
.bg-black\/70{background-color:rgba(0,0,0,0.7)}
.bg-white\/5{background-color:rgba(255,255,255,0.05)}
.active\:.bg-white\/5:active{background-color:rgba(255,255,255,0.05)}
.bg-white\/6{background-color:rgba(255,255,255,0.06)}
.active\:.bg-white\/6:active{background-color:rgba(255,255,255,0.06)}
.bg-white\/8{background-color:rgba(255,255,255,0.08)}
.active\:.bg-white\/8:active{background-color:rgba(255,255,255,0.08)}
.bg-white\/10{background-color:rgba(255,255,255,0.1)}
.active\:.bg-white\/10:active{background-color:rgba(255,255,255,0.1)}
.bg-white\/15{background-color:rgba(255,255,255,0.15)}
.active\:.bg-white\/15:active{background-color:rgba(255,255,255,0.15)}
.bg-white\/30{background-color:rgba(255,255,255,0.3)}
.bg-g-600\/5{background-color:rgba(23,201,105,0.05)}
.active\:.bg-g-600\/5:active{background-color:rgba(23,201,105,0.05)}
.bg-g-600\/8{background-color:rgba(23,201,105,0.08)}
.active\:.bg-g-600\/8:active{background-color:rgba(23,201,105,0.08)}
.bg-g-600\/10{background-color:rgba(23,201,105,0.1)}
.active\:.bg-g-600\/10:active{background-color:rgba(23,201,105,0.1)}
.bg-g-600\/15{background-color:rgba(23,201,105,0.15)}
.active\:.bg-g-600\/15:active{background-color:rgba(23,201,105,0.15)}
.bg-g-600\/20{background-color:rgba(23,201,105,0.2)}
.bg-g-600\/80{background-color:rgba(23,201,105,0.8)}
.bg-oc-800\/40{background-color:rgba(13,26,48,0.4)}
.bg-oc-800\/50{background-color:rgba(13,26,48,0.5)}
.bg-oc-800\/60{background-color:rgba(13,26,48,0.6)}
.bg-oc-800\/70{background-color:rgba(13,26,48,0.7)}
.bg-oc-800\/80{background-color:rgba(13,26,48,0.8)}
.bg-oc-900\/50{background-color:rgba(8,20,40,0.5)}
.bg-oc-900\/60{background-color:rgba(8,20,40,0.6)}
.bg-oc-900\/80{background-color:rgba(8,20,40,0.8)}
.bg-oc-900\/92{background-color:rgba(8,20,40,0.92)}
.bg-oc-900\/95{background-color:rgba(8,20,40,0.95)}
.bg-oc-900\/96{background-color:rgba(8,20,40,0.96)}
.bg-oc-950\/88{background-color:rgba(6,14,30,0.88)}
.bg-oc-950\/95{background-color:rgba(6,14,30,0.95)}
.bg-oc-950\/96{background-color:rgba(6,14,30,0.96)}
.bg-g-600\/5{background-color:rgba(23,201,105,0.05)}
.active\:.bg-g-600\/5:active{background-color:rgba(23,201,105,0.05)}
.bg-g-600\/8{background-color:rgba(23,201,105,0.08)}
.active\:.bg-g-600\/8:active{background-color:rgba(23,201,105,0.08)}
.bg-g-600\/10{background-color:rgba(23,201,105,0.1)}
.active\:.bg-g-600\/10:active{background-color:rgba(23,201,105,0.1)}
.bg-g-600\/15{background-color:rgba(23,201,105,0.15)}
.active\:.bg-g-600\/15:active{background-color:rgba(23,201,105,0.15)}
.bg-g-600\/20{background-color:rgba(23,201,105,0.2)}
.bg-g-600\/80{background-color:rgba(23,201,105,0.8)}
.bg-gold-500\/8{background-color:rgba(245,158,11,0.08)}
.active\:.bg-gold-500\/8:active{background-color:rgba(245,158,11,0.08)}
.bg-gold-500\/10{background-color:rgba(245,158,11,0.1)}
.active\:.bg-gold-500\/10:active{background-color:rgba(245,158,11,0.1)}
.bg-gold-500\/15{background-color:rgba(245,158,11,0.15)}
.active\:.bg-gold-500\/15:active{background-color:rgba(245,158,11,0.15)}
.bg-gold-500\/20{background-color:rgba(245,158,11,0.2)}
.bg-gold-400\/40{background-color:rgba(251,191,36,0.4)}
.bg-o-400\/10{background-color:rgba(255,112,67,0.1)}
.active\:.bg-o-400\/10:active{background-color:rgba(255,112,67,0.1)}
.bg-o-400\/15{background-color:rgba(255,112,67,0.15)}
.active\:.bg-o-400\/15:active{background-color:rgba(255,112,67,0.15)}
.bg-o-400\/80{background-color:rgba(255,112,67,0.8)}
.bg-p-400\/10{background-color:rgba(255,107,157,0.1)}
.active\:.bg-p-400\/10:active{background-color:rgba(255,107,157,0.1)}
.bg-p-400\/15{background-color:rgba(255,107,157,0.15)}
.active\:.bg-p-400\/15:active{background-color:rgba(255,107,157,0.15)}
.bg-orange-400\/15{background-color:rgba(251,146,60,0.15)}
.active\:.bg-orange-400\/15:active{background-color:rgba(251,146,60,0.15)}
.bg-orange-500\/15{background-color:rgba(249,115,22,0.15)}
.active\:.bg-orange-500\/15:active{background-color:rgba(249,115,22,0.15)}
.bg-orange-500\/20{background-color:rgba(249,115,22,0.2)}
.bg-orange-500\/80{background-color:rgba(249,115,22,0.8)}
.bg-red-500\/20{background-color:rgba(239,68,68,0.2)}
.bg-red-500\/80{background-color:rgba(239,68,68,0.8)}
.bg-gray-500\/15{background-color:rgba(107,114,128,0.15)}
.active\:.bg-gray-500\/15:active{background-color:rgba(107,114,128,0.15)}
.bg-green-500\/15{background-color:rgba(34,197,94,0.15)}
.active\:.bg-green-500\/15:active{background-color:rgba(34,197,94,0.15)}
.bg-green-500\/80{background-color:rgba(34,197,94,0.8)}
.bg-blue-500\/15{background-color:rgba(59,130,246,0.15)}
.active\:.bg-blue-500\/15:active{background-color:rgba(59,130,246,0.15)}
.bg-purple-500\/50{background-color:rgba(168,85,247,0.5)}
.bg-purple-500\/80{background-color:rgba(168,85,247,0.8)}
.bg-yellow-500\/80{background-color:rgba(234,179,8,0.8)}
.text-white\/15{color:rgba(255,255,255,0.15)}
.text-white\/20{color:rgba(255,255,255,0.2)}
.text-white\/22{color:rgba(255,255,255,0.22)}
.text-white\/25{color:rgba(255,255,255,0.25)}
.text-white\/30{color:rgba(255,255,255,0.3)}
.text-white\/35{color:rgba(255,255,255,0.35)}
.text-white\/38{color:rgba(255,255,255,0.38)}
.text-white\/40{color:rgba(255,255,255,0.4)}
.text-white\/45{color:rgba(255,255,255,0.45)}
.text-white\/50{color:rgba(255,255,255,0.5)}
.text-white\/55{color:rgba(255,255,255,0.55)}
.text-white\/60{color:rgba(255,255,255,0.6)}
.text-white\/70{color:rgba(255,255,255,0.7)}
.text-white\/75{color:rgba(255,255,255,0.75)}
.text-white\/80{color:rgba(255,255,255,0.8)}
.text-white\/82{color:rgba(255,255,255,0.82)}
.text-white\/88{color:rgba(255,255,255,0.88)}
.text-g-600\/60{color:rgba(23,201,105,0.6)}
.text-g-600\/70{color:rgba(23,201,105,0.7)}
.text-g-600\/80{color:rgba(23,201,105,0.8)}
.text-g-600\/90{color:rgba(23,201,105,0.9)}
.text-gold-400\/60{color:rgba(251,191,36,0.6)}
.text-yellow-400\/60{color:rgba(250,204,21,0.6)}
.border-white\/4{border-color:rgba(255,255,255,0.04)}
.border-white\/5{border-color:rgba(255,255,255,0.05)}
.border-white\/6{border-color:rgba(255,255,255,0.06)}
.border-white\/7{border-color:rgba(255,255,255,0.07)}
.border-white\/8{border-color:rgba(255,255,255,0.08)}
.border-white\/10{border-color:rgba(255,255,255,0.1)}
.border-white\/12{border-color:rgba(255,255,255,0.12)}
.border-white\/15{border-color:rgba(255,255,255,0.15)}
.border-white\/30{border-color:rgba(255,255,255,0.3)}
.border-g-600\/15{border-color:rgba(23,201,105,0.15)}
.border-g-600\/20{border-color:rgba(23,201,105,0.2)}
.border-g-600\/25{border-color:rgba(23,201,105,0.25)}
.border-g-600\/30{border-color:rgba(23,201,105,0.3)}
.border-g-600\/35{border-color:rgba(23,201,105,0.35)}
.border-g-600\/40{border-color:rgba(23,201,105,0.4)}
.border-g-600\/50{border-color:rgba(23,201,105,0.5)}
.border-gold-400\/20{border-color:rgba(251,191,36,0.2)}
.border-gold-400\/30{border-color:rgba(251,191,36,0.3)}
.border-gold-400\/40{border-color:rgba(251,191,36,0.4)}
.border-gold-500\/15{border-color:rgba(245,158,11,0.15)}
.border-gold-500\/20{border-color:rgba(245,158,11,0.2)}
.border-gold-500\/25{border-color:rgba(245,158,11,0.25)}
.border-gold-500\/30{border-color:rgba(245,158,11,0.3)}
.border-o-400\/30{border-color:rgba(255,112,67,0.3)}
.border-o-400\/40{border-color:rgba(255,112,67,0.4)}
.border-orange-400\/25{border-color:rgba(251,146,60,0.25)}
.border-orange-500\/30{border-color:rgba(249,115,22,0.3)}
.border-orange-500\/40{border-color:rgba(249,115,22,0.4)}
.border-p-400\/30{border-color:rgba(255,107,157,0.3)}
.border-purple-500\/20{border-color:rgba(168,85,247,0.2)}
.border-red-500\/20{border-color:rgba(239,68,68,0.2)}
.border-red-500\/30{border-color:rgba(239,68,68,0.3)}
.border-blue-500\/30{border-color:rgba(59,130,246,0.3)}
.border-gray-500\/30{border-color:rgba(107,114,128,0.3)}
.border-green-500\/30{border-color:rgba(34,197,94,0.3)}
.border-yellow-500\/40{border-color:rgba(234,179,8,0.4)}
.shadow-g-600\/20{--tw-shadow-color:rgba(23,201,105,0.2)}
.shadow-g-600\/30{--tw-shadow-color:rgba(23,201,105,0.3)}
.shadow-gold-500\/20{--tw-shadow-color:rgba(245,158,11,0.2)}
.shadow-gold-500\/30{--tw-shadow-color:rgba(245,158,11,0.3)}
.shadow-p-400\/30{--tw-shadow-color:rgba(255,107,157,0.3)}
.shadow-p-400\/40{--tw-shadow-color:rgba(255,107,157,0.4)}
.from-g-600/60{--tw-gradient-from:rgba(23,201,105,0.6);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(23,201,105,0))}
.from-gold-500/10{--tw-gradient-from:rgba(245,158,11,0.1);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(245,158,11,0))}
.from-gold-500/8{--tw-gradient-from:rgba(245,158,11,0.08);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(245,158,11,0))}
.from-oc-950/95{--tw-gradient-from:rgba(6,14,30,0.95);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(6,14,30,0))}
.to-gold-600/5{--tw-gradient-from:rgba(217,119,6,0.05);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(217,119,6,0))}
.to-oc-950/70{--tw-gradient-from:rgba(6,14,30,0.7);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(6,14,30,0))}
.to-white/10{--tw-gradient-from:rgba(255,255,255,0.1);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(255,255,255,0))}
.via-g-600/30{--tw-gradient-from:rgba(23,201,105,0.3);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(23,201,105,0))}
.fixed{position:fixed}
.absolute{position:absolute}
.relative{position:relative}
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.hidden{display:none !important}
.block{display:block}
.inline-block{display:inline-block}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1 1 0%}
.shrink-0{flex-shrink:0}
.flex-grow{flex-grow:1}
.items-start{align-items:flex-start}
.items-end{align-items:flex-end}
.items-center{align-items:center}
.items-baseline{align-items:baseline}
.justify-start{justify-content:flex-start}
.justify-end{justify-content:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-around{justify-content:space-around}
.text-left{text-align:left}
.text-center{text-align:center}
.text-right{text-align:right}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}
.overflow-y-auto{overflow-y:auto}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cursor-pointer{cursor:pointer}
.pointer-events-none{pointer-events:none}
.select-none{user-select:none}
.object-cover{object-fit:cover}
.whitespace-nowrap{white-space:nowrap}
.outline-none{outline:2px solid transparent;outline-offset:2px}
.line-through{text-decoration:line-through}
.mx-auto{margin-left:auto;margin-right:auto}
.w-full{width:100%}
.h-full{height:100%}
.w-px{width:1px}
.h-px{height:1px}
.max-w-lg{max-width:512px}
.max-w-[82%]{max-width:82%}
.border{border-width:1px}
.border-2{border-width:2px}
.border-t{border-top-width:1px}
.border-b{border-bottom-width:1px}
.border-b-2{border-bottom-width:2px}
.border-l-2{border-left-width:2px}
.col-span-2{grid-column:span 2 / span 2}
.inset-0{top:0;right:0;bottom:0;left:0}
.left-1/2{left:50%}
.top-1/2{top:50%}
.-translate-x-1/2{--tw-translate-x:-50%}
.-translate-y-1/2{--tw-translate-y:-50%}
.z-10{z-index:10}
.z-30{z-index:30}
.z-40{z-index:40}
.z-45{z-index:45}
.z-50{z-index:50}
.top-0{top:0}
.top-1{top:4px}
.top-2{top:8px}
.top-3{top:12px}
.top-4{top:16px}
.top-5{top:20px}
.top-6{top:24px}
.top-8{top:32px}
.top-10{top:40px}
.top-12{top:48px}
.top-14{top:56px}
.top-16{top:64px}
.top-20{top:80px}
.top-24{top:96px}
.top-32{top:128px}
.top-36{top:144px}
.top-40{top:160px}
.left-0{left:0}
.left-1{left:4px}
.left-2{left:8px}
.left-3{left:12px}
.left-4{left:16px}
.left-5{left:20px}
.left-6{left:24px}
.left-8{left:32px}
.left-10{left:40px}
.left-12{left:48px}
.left-14{left:56px}
.left-16{left:64px}
.left-20{left:80px}
.left-24{left:96px}
.left-32{left:128px}
.left-36{left:144px}
.left-40{left:160px}
.right-0{right:0}
.right-1{right:4px}
.right-2{right:8px}
.right-3{right:12px}
.right-4{right:16px}
.right-5{right:20px}
.right-6{right:24px}
.right-8{right:32px}
.right-10{right:40px}
.right-12{right:48px}
.right-14{right:56px}
.right-16{right:64px}
.right-20{right:80px}
.right-24{right:96px}
.right-32{right:128px}
.right-36{right:144px}
.right-40{right:160px}
.bottom-0{bottom:0}
.bottom-1{bottom:4px}
.bottom-2{bottom:8px}
.bottom-3{bottom:12px}
.bottom-4{bottom:16px}
.bottom-5{bottom:20px}
.bottom-6{bottom:24px}
.bottom-8{bottom:32px}
.bottom-10{bottom:40px}
.bottom-12{bottom:48px}
.bottom-14{bottom:56px}
.bottom-16{bottom:64px}
.bottom-20{bottom:80px}
.bottom-24{bottom:96px}
.bottom-32{bottom:128px}
.bottom-36{bottom:144px}
.bottom-40{bottom:160px}
.w-0{width:0}
.w-0.5{width:2px}
.w-1{width:4px}
.w-1.5{width:6px}
.w-2{width:8px}
.w-2.5{width:10px}
.w-3{width:12px}
.w-3.5{width:14px}
.w-4{width:16px}
.w-5{width:20px}
.w-6{width:24px}
.w-7{width:28px}
.w-8{width:32px}
.w-9{width:36px}
.w-10{width:40px}
.w-11{width:44px}
.w-12{width:48px}
.w-14{width:56px}
.w-16{width:64px}
.w-18{width:72px}
.w-20{width:80px}
.w-24{width:96px}
.w-28{width:112px}
.w-32{width:128px}
.w-36{width:144px}
.w-[145px]{width:145px}
.w-[150px]{width:150px}
.w-[2px]{width:2px}
.w-[68px]{width:68px}
.h-0{height:0}
.h-0.5{height:2px}
.h-1{height:4px}
.h-1.5{height:6px}
.h-2{height:8px}
.h-2.5{height:10px}
.h-3{height:12px}
.h-3.5{height:14px}
.h-4{height:16px}
.h-5{height:20px}
.h-6{height:24px}
.h-7{height:28px}
.h-8{height:32px}
.h-9{height:36px}
.h-10{height:40px}
.h-11{height:44px}
.h-12{height:48px}
.h-14{height:56px}
.h-16{height:64px}
.h-18{height:72px}
.h-20{height:80px}
.h-24{height:96px}
.h-28{height:112px}
.h-32{height:128px}
.h-36{height:144px}
.h-[145px]{height:145px}
.h-[150px]{height:150px}
.h-[2px]{height:2px}
.h-[68px]{height:68px}
.p-0{padding:0}
.p-0.5{padding:2px}
.p-1{padding:4px}
.p-1.5{padding:6px}
.p-2{padding:8px}
.p-2.5{padding:10px}
.p-3{padding:12px}
.p-3.5{padding:14px}
.p-4{padding:16px}
.p-5{padding:20px}
.p-6{padding:24px}
.p-7{padding:28px}
.p-8{padding:32px}
.p-10{padding:40px}
.p-12{padding:48px}
.p-14{padding:56px}
.p-16{padding:64px}
.p-20{padding:80px}
.p-24{padding:96px}
.p-28{padding:112px}
.p-36{padding:144px}
.px-0{padding-left:0;padding-right:0}
.px-0.5{padding-left:2px;padding-right:2px}
.px-1{padding-left:4px;padding-right:4px}
.px-1.5{padding-left:6px;padding-right:6px}
.px-2{padding-left:8px;padding-right:8px}
.px-2.5{padding-left:10px;padding-right:10px}
.px-3{padding-left:12px;padding-right:12px}
.px-3.5{padding-left:14px;padding-right:14px}
.px-4{padding-left:16px;padding-right:16px}
.px-5{padding-left:20px;padding-right:20px}
.px-6{padding-left:24px;padding-right:24px}
.px-7{padding-left:28px;padding-right:28px}
.px-8{padding-left:32px;padding-right:32px}
.px-10{padding-left:40px;padding-right:40px}
.px-12{padding-left:48px;padding-right:48px}
.px-14{padding-left:56px;padding-right:56px}
.px-16{padding-left:64px;padding-right:64px}
.px-20{padding-left:80px;padding-right:80px}
.px-24{padding-left:96px;padding-right:96px}
.px-28{padding-left:112px;padding-right:112px}
.px-36{padding-left:144px;padding-right:144px}
.py-0{padding-top:0;padding-bottom:0}
.py-0.5{padding-top:2px;padding-bottom:2px}
.py-1{padding-top:4px;padding-bottom:4px}
.py-1.5{padding-top:6px;padding-bottom:6px}
.py-2{padding-top:8px;padding-bottom:8px}
.py-2.5{padding-top:10px;padding-bottom:10px}
.py-3{padding-top:12px;padding-bottom:12px}
.py-3.5{padding-top:14px;padding-bottom:14px}
.py-4{padding-top:16px;padding-bottom:16px}
.py-5{padding-top:20px;padding-bottom:20px}
.py-6{padding-top:24px;padding-bottom:24px}
.py-7{padding-top:28px;padding-bottom:28px}
.py-8{padding-top:32px;padding-bottom:32px}
.py-10{padding-top:40px;padding-bottom:40px}
.py-12{padding-top:48px;padding-bottom:48px}
.py-14{padding-top:56px;padding-bottom:56px}
.py-16{padding-top:64px;padding-bottom:64px}
.py-20{padding-top:80px;padding-bottom:80px}
.py-24{padding-top:96px;padding-bottom:96px}
.py-28{padding-top:112px;padding-bottom:112px}
.py-36{padding-top:144px;padding-bottom:144px}
.pt-0{padding-top:0}
.pt-0.5{padding-top:2px}
.pt-1{padding-top:4px}
.pt-1.5{padding-top:6px}
.pt-2{padding-top:8px}
.pt-2.5{padding-top:10px}
.pt-3{padding-top:12px}
.pt-3.5{padding-top:14px}
.pt-4{padding-top:16px}
.pt-5{padding-top:20px}
.pt-6{padding-top:24px}
.pt-7{padding-top:28px}
.pt-8{padding-top:32px}
.pt-10{padding-top:40px}
.pt-12{padding-top:48px}
.pt-14{padding-top:56px}
.pt-16{padding-top:64px}
.pt-20{padding-top:80px}
.pt-24{padding-top:96px}
.pt-28{padding-top:112px}
.pt-36{padding-top:144px}
.pb-0{padding-bottom:0}
.pb-0.5{padding-bottom:2px}
.pb-1{padding-bottom:4px}
.pb-1.5{padding-bottom:6px}
.pb-2{padding-bottom:8px}
.pb-2.5{padding-bottom:10px}
.pb-3{padding-bottom:12px}
.pb-3.5{padding-bottom:14px}
.pb-4{padding-bottom:16px}
.pb-5{padding-bottom:20px}
.pb-6{padding-bottom:24px}
.pb-7{padding-bottom:28px}
.pb-8{padding-bottom:32px}
.pb-10{padding-bottom:40px}
.pb-12{padding-bottom:48px}
.pb-14{padding-bottom:56px}
.pb-16{padding-bottom:64px}
.pb-20{padding-bottom:80px}
.pb-24{padding-bottom:96px}
.pb-28{padding-bottom:112px}
.pb-36{padding-bottom:144px}
.pl-0{padding-left:0}
.pl-0.5{padding-left:2px}
.pl-1{padding-left:4px}
.pl-1.5{padding-left:6px}
.pl-2{padding-left:8px}
.pl-2.5{padding-left:10px}
.pl-3{padding-left:12px}
.pl-3.5{padding-left:14px}
.pl-4{padding-left:16px}
.pl-5{padding-left:20px}
.pl-6{padding-left:24px}
.pl-7{padding-left:28px}
.pl-8{padding-left:32px}
.pl-10{padding-left:40px}
.pl-12{padding-left:48px}
.pl-14{padding-left:56px}
.pl-16{padding-left:64px}
.pl-20{padding-left:80px}
.pl-24{padding-left:96px}
.pl-28{padding-left:112px}
.pl-36{padding-left:144px}
.pr-0{padding-right:0}
.pr-0.5{padding-right:2px}
.pr-1{padding-right:4px}
.pr-1.5{padding-right:6px}
.pr-2{padding-right:8px}
.pr-2.5{padding-right:10px}
.pr-3{padding-right:12px}
.pr-3.5{padding-right:14px}
.pr-4{padding-right:16px}
.pr-5{padding-right:20px}
.pr-6{padding-right:24px}
.pr-7{padding-right:28px}
.pr-8{padding-right:32px}
.pr-10{padding-right:40px}
.pr-12{padding-right:48px}
.pr-14{padding-right:56px}
.pr-16{padding-right:64px}
.pr-20{padding-right:80px}
.pr-24{padding-right:96px}
.pr-28{padding-right:112px}
.pr-36{padding-right:144px}
.m-0{margin:0}
.m-0.5{margin:2px}
.m-1{margin:4px}
.m-1.5{margin:6px}
.m-2{margin:8px}
.m-2.5{margin:10px}
.m-3{margin:12px}
.m-3.5{margin:14px}
.m-4{margin:16px}
.m-5{margin:20px}
.m-6{margin:24px}
.m-7{margin:28px}
.m-8{margin:32px}
.m-10{margin:40px}
.m-12{margin:48px}
.m-14{margin:56px}
.m-16{margin:64px}
.m-20{margin:80px}
.m-24{margin:96px}
.m-28{margin:112px}
.m-36{margin:144px}
.mx-0{margin-left:0;margin-right:0}
.mx-0.5{margin-left:2px;margin-right:2px}
.mx-1{margin-left:4px;margin-right:4px}
.mx-1.5{margin-left:6px;margin-right:6px}
.mx-2{margin-left:8px;margin-right:8px}
.mx-2.5{margin-left:10px;margin-right:10px}
.mx-3{margin-left:12px;margin-right:12px}
.mx-3.5{margin-left:14px;margin-right:14px}
.mx-4{margin-left:16px;margin-right:16px}
.mx-5{margin-left:20px;margin-right:20px}
.mx-6{margin-left:24px;margin-right:24px}
.mx-7{margin-left:28px;margin-right:28px}
.mx-8{margin-left:32px;margin-right:32px}
.mx-10{margin-left:40px;margin-right:40px}
.mx-12{margin-left:48px;margin-right:48px}
.mx-14{margin-left:56px;margin-right:56px}
.mx-16{margin-left:64px;margin-right:64px}
.mx-20{margin-left:80px;margin-right:80px}
.mx-24{margin-left:96px;margin-right:96px}
.mx-28{margin-left:112px;margin-right:112px}
.mx-36{margin-left:144px;margin-right:144px}
.my-0{margin-top:0;margin-bottom:0}
.my-0.5{margin-top:2px;margin-bottom:2px}
.my-1{margin-top:4px;margin-bottom:4px}
.my-1.5{margin-top:6px;margin-bottom:6px}
.my-2{margin-top:8px;margin-bottom:8px}
.my-2.5{margin-top:10px;margin-bottom:10px}
.my-3{margin-top:12px;margin-bottom:12px}
.my-3.5{margin-top:14px;margin-bottom:14px}
.my-4{margin-top:16px;margin-bottom:16px}
.my-5{margin-top:20px;margin-bottom:20px}
.my-6{margin-top:24px;margin-bottom:24px}
.my-7{margin-top:28px;margin-bottom:28px}
.my-8{margin-top:32px;margin-bottom:32px}
.my-10{margin-top:40px;margin-bottom:40px}
.my-12{margin-top:48px;margin-bottom:48px}
.my-14{margin-top:56px;margin-bottom:56px}
.my-16{margin-top:64px;margin-bottom:64px}
.my-20{margin-top:80px;margin-bottom:80px}
.my-24{margin-top:96px;margin-bottom:96px}
.my-28{margin-top:112px;margin-bottom:112px}
.my-36{margin-top:144px;margin-bottom:144px}
.mt-0{margin-top:0}
.mt-0.5{margin-top:2px}
.mt-1{margin-top:4px}
.mt-1.5{margin-top:6px}
.mt-2{margin-top:8px}
.mt-2.5{margin-top:10px}
.mt-3{margin-top:12px}
.mt-3.5{margin-top:14px}
.mt-4{margin-top:16px}
.mt-5{margin-top:20px}
.mt-6{margin-top:24px}
.mt-7{margin-top:28px}
.mt-8{margin-top:32px}
.mt-10{margin-top:40px}
.mt-12{margin-top:48px}
.mt-14{margin-top:56px}
.mt-16{margin-top:64px}
.mt-20{margin-top:80px}
.mt-24{margin-top:96px}
.mt-28{margin-top:112px}
.mt-36{margin-top:144px}
.mb-0{margin-bottom:0}
.mb-0.5{margin-bottom:2px}
.mb-1{margin-bottom:4px}
.mb-1.5{margin-bottom:6px}
.mb-2{margin-bottom:8px}
.mb-2.5{margin-bottom:10px}
.mb-3{margin-bottom:12px}
.mb-3.5{margin-bottom:14px}
.mb-4{margin-bottom:16px}
.mb-5{margin-bottom:20px}
.mb-6{margin-bottom:24px}
.mb-7{margin-bottom:28px}
.mb-8{margin-bottom:32px}
.mb-10{margin-bottom:40px}
.mb-12{margin-bottom:48px}
.mb-14{margin-bottom:56px}
.mb-16{margin-bottom:64px}
.mb-20{margin-bottom:80px}
.mb-24{margin-bottom:96px}
.mb-28{margin-bottom:112px}
.mb-36{margin-bottom:144px}
.p-\[3px\]{padding:3px}
.gap-0{gap:0}
.gap-0.5{gap:2px}
.gap-1{gap:4px}
.gap-1.5{gap:6px}
.gap-2{gap:8px}
.gap-2.5{gap:10px}
.gap-3{gap:12px}
.gap-3.5{gap:14px}
.gap-4{gap:16px}
.gap-5{gap:20px}
.gap-x-2{column-gap:8px}
.gap-x-2.5{column-gap:10px}
.gap-x-3{column-gap:12px}
.gap-x-4{column-gap:16px}
.gap-y-1.5{row-gap:6px}
.gap-y-2{row-gap:8px}
.text-xs{font-size:10px}
.text-sm{font-size:13px}
.text-base{font-size:16px}
.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-5xl{font-size:48px}
.text-6xl{font-size:60px}
.text-7xl{font-size:72px}
.text-[8px]{font-size:8px}
.text-[9px]{font-size:9px}
.text-[10px]{font-size:10px}
.text-[11px]{font-size:11px}
.text-[22px]{font-size:22px}
.text-[2rem]{font-size:32px}
.text-[2.3rem]{font-size:36.8px}
.text-[2.6rem]{font-size:41.6px}
.font-light{font-weight:300}
.font-normal{font-weight:400}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-black{font-weight:900}
.leading-none{line-height:1}
.leading-tight{line-height:1.25}
.leading-snug{line-height:1.375}
.leading-normal{line-height:1.5}
.leading-relaxed{line-height:1.625}
.tracking-tight{letter-spacing:-0.025em}
.tracking-normal{letter-spacing:0}
.tracking-wide{letter-spacing:0.025em}
.tracking-wider{letter-spacing:0.05em}
.tracking-widest{letter-spacing:0.1em}
.text-white{color:#fff}
.bg-white{background-color:#fff}
.text-black{color:#000}
.bg-black{background-color:#000}
.text-transparent{color:transparent}
.bg-transparent{background-color:transparent}
.text-red-500{color:#ef4444}
.bg-red-500{background-color:#ef4444}
.text-red-400{color:#f87171}
.bg-red-400{background-color:#f87171}
.text-green-500{color:#22c55e}
.bg-green-500{background-color:#22c55e}
.text-green-400{color:#4ade80}
.bg-green-400{background-color:#4ade80}
.text-blue-500{color:#3b82f6}
.bg-blue-500{background-color:#3b82f6}
.text-blue-400{color:#60a5fa}
.bg-blue-400{background-color:#60a5fa}
.text-yellow-400{color:#facc15}
.bg-yellow-400{background-color:#facc15}
.text-yellow-500{color:#eab308}
.bg-yellow-500{background-color:#eab308}
.text-orange-500{color:#f97316}
.bg-orange-500{background-color:#f97316}
.text-orange-400{color:#fb923c}
.bg-orange-400{background-color:#fb923c}
.text-purple-500{color:#a855f7}
.bg-purple-500{background-color:#a855f7}
.text-purple-400{color:#c084fc}
.bg-purple-400{background-color:#c084fc}
.text-purple-600{color:#9333ea}
.bg-purple-600{background-color:#9333ea}
.text-gray-500{color:#6b7280}
.bg-gray-500{background-color:#6b7280}
.text-gray-400{color:#9ca3af}
.bg-gray-400{background-color:#9ca3af}
.text-pink-500{color:#ec4899}
.bg-pink-500{background-color:#ec4899}
.text-g-600{color:#17C969}
.bg-g-600{background-color:#17C969}
.text-g-700{color:#14A85A}
.bg-g-700{background-color:#14A85A}
.text-g-800{color:#0f3a22}
.bg-g-800{background-color:#0f3a22}
.text-p-400{color:#FF6B9D}
.bg-p-400{background-color:#FF6B9D}
.text-p-500{color:#FF4081}
.bg-p-500{background-color:#FF4081}
.text-o-400{color:#FF7043}
.bg-o-400{background-color:#FF7043}
.text-o-500{color:#FF5722}
.bg-o-500{background-color:#FF5722}
.text-bg-950{color:#060e1e}
.bg-bg-950{background-color:#060e1e}
.text-oc-800{color:#0d1a30}
.bg-oc-800{background-color:#0d1a30}
.text-oc-900{color:#081428}
.bg-oc-900{background-color:#081428}
.text-oc-950{color:#060e1e}
.bg-oc-950{background-color:#060e1e}
.text-gold-300{color:#fcd34d}
.bg-gold-300{background-color:#fcd34d}
.text-gold-400{color:#fbbf24}
.bg-gold-400{background-color:#fbbf24}
.text-gold-500{color:#f59e0b}
.bg-gold-500{background-color:#f59e0b}
.text-gold-600{color:#d97706}
.bg-gold-600{background-color:#d97706}
.text-gold-900{color:#78350f}
.bg-gold-900{background-color:#78350f}
.text-white{color:#ffffff}
.bg-white{background-color:#ffffff}
.text-black{color:#000000}
.bg-black{background-color:#000000}
.border-white{border-color:#fff}
.border-black{border-color:#000}
.border-transparent{border-color:transparent}
.border-red-500{border-color:#ef4444}
.border-red-400{border-color:#f87171}
.border-green-500{border-color:#22c55e}
.border-green-400{border-color:#4ade80}
.border-blue-500{border-color:#3b82f6}
.border-blue-400{border-color:#60a5fa}
.border-yellow-400{border-color:#facc15}
.border-yellow-500{border-color:#eab308}
.border-orange-500{border-color:#f97316}
.border-orange-400{border-color:#fb923c}
.border-purple-500{border-color:#a855f7}
.border-purple-400{border-color:#c084fc}
.border-purple-600{border-color:#9333ea}
.border-gray-500{border-color:#6b7280}
.border-gray-400{border-color:#9ca3af}
.border-pink-500{border-color:#ec4899}
.rounded-none{border-radius:0}
.rounded-sm{border-radius:2px}
.rounded-md{border-radius:6px}
.rounded-lg{border-radius:8px}
.rounded-xl{border-radius:12px}
.rounded-2xl{border-radius:16px}
.rounded-3xl{border-radius:24px}
.rounded-full{border-radius:9999px}
.rounded-tl-sm{border-top-left-radius:2px}
.rounded-tr-sm{border-top-right-radius:2px}
.rounded-t-3xl{border-top-left-radius:24px;border-top-right-radius:24px}
.shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05)}
.shadow{box-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1)}
.shadow-md{box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1)}
.shadow-lg{box-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1)}
.shadow-xl{box-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25)}
.animate-ping{animation:ping 1s cubic-bezier(0,0,0.2,1) infinite}
.transition-all{transition:all .15s cubic-bezier(.4,0,.2,1)}
.transition-colors{transition:color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}
.transition-transform{transition:transform .15s cubic-bezier(.4,0,.2,1)}
.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y))}
.active\:scale-90:active{--tw-scale-x:.9;--tw-scale-y:.9;transform:scale(.9)}
.active\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:scale(.95)}
.active\:scale-\[\.97\]:active{transform:scale(.97)}
.active\:scale-\[\.98\]:active{transform:scale(.98)}
.active\:scale-\[\.99\]:active{transform:scale(.99)}
.active\:bg-white\/5:active{background-color:rgba(255,255,255,0.05)}
.active\:bg-white\/8:active{background-color:rgba(255,255,255,0.08)}
.active\:bg-g-600\/10:active{background-color:rgba(23,201,105,0.10)}
.active\:bg-white\/3:active{background-color:rgba(255,255,255,0.03)}
html { height: 100% }
body { min-height: 100vh }

/* Chinese web font - self-hosted */
@font-face {
  font-family: 'Noto Sans SC';
  src: url('/fonts/NotoSansCJKsc-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}