/** Shopify CDN: Minification failed

Line 1982:2 Unexpected "="
Line 3090:2 Unexpected "0%"
Line 3091:2 Unexpected "50%"
Line 8036:17 Unexpected "{"
Line 8036:26 Expected ":"
Line 8041:15 Unexpected "{"
Line 8041:24 Expected ":"
Line 8047:15 Unexpected "{"
Line 8047:24 Expected ":"
Line 8058:15 Unexpected "{"
... and 8 more hidden warnings

**/
.gcity .container{ max-width:1200px; margin:0 auto; padding:32px; color:var(--text) !important;; }
.map-loading-overlay{ display:flex; align-items:center; justify-content:center; height:100%; color:var(--muted) !important; }
.hidden-secondary{ opacity:.6; pointer-events:none; }
.gfun-loaded{ transition:opacity .2s ease; }
.gcity-toast{ font-family:var(--font-main); }
.loading-overlay{ display:none; position:fixed; inset:0;align-items:center;justify-content:center; background:rgba(0,0,0,0.6); z-index:9999; }


*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-offset);
}

body.template-page .shopify-section{
  scroll-margin-top: var(--anchor-offset);
}

/* --- Hero（image-banner）優化：更像產品頁 Hero --- */
/* Shopify 的 image-banner 通常有 .banner / .banner__content / .banner__box 等 */
body.template-page .shopify-section .banner{
  border-radius: calc(var(--radius-md) + 6px);
  overflow: hidden;
}

body.template-page .shopify-section .banner__box{
  border-radius: var(--radius-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(15,23,42,0.55), rgba(15,23,42,0.25));
  border: 1px solid var(--littleg-border);
}

/* Hero 文字更清晰 */
body.template-page .shopify-section .banner__heading{
  letter-spacing: -0.02em;
}

body.template-page .shopify-section .banner__text{
  opacity: 0.92;
}

/* Hero buttons：更像熱門 CTA */
body.template-page .shopify-section .banner__buttons .button{
  border-radius: 999px;
  padding-inline: 18px;
  min-height: 44px;
}

body.template-page .shopify-section .banner__buttons .button--secondary{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
}

/* --- Multicolumn（features_grid）卡片化：同業常見 3-col cards --- */
body.template-page .multicolumn .multicolumn-list__item{
  border-radius: var(--radius-md);
  border: 1px solid var(--littleg-border);
  background: linear-gradient(180deg, var(--littleg-bg), rgba(255,255,255,0.02));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  overflow: hidden;
}

@media (hover:hover){
  body.template-page .multicolumn .multicolumn-list__item:hover{
    transform: translateY(-4px);
    border-color: rgba(255,255,255,0.22);
    background: linear-gradient(180deg, var(--littleg-bg-2), rgba(255,255,255,0.03));
  }
}
/* 卡內 padding 統一 */
body.template-page .multicolumn-card__info{
  padding: 20px !important;
}

/* 卡片標題/文字 readability */
body.template-page .multicolumn-card__info h3{
  letter-spacing: -0.01em;
}

body.template-page .multicolumn-card__info p{
  opacity: 0.9;
  line-height: 1.6;
}

/* 卡片 link button 更像「可點」 */
body.template-page .multicolumn-card__info a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}

@media (hover:hover){
  body.template-page .multicolumn-card__info a:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,0.10);
  }
}

/* --- Mobile：卡片間距更舒服 --- */
@media (max-width: 768px){
  body.template-page .multicolumn-list{
    gap: 14px !important;
  }
  body.template-page .multicolumn-card__info{
    padding: 16px !important;
  }
}
  img{max-width:100%;height:auto;display:block}
.gcity{color:#041022;font-family:Inter,system-ui,-apple-system,"Helvetica Neue",Arial,var(--zh-font)}
.container{max-width:var(--max-width);margin:0 auto;padding:20px}
  /* Skip Link - 無障礙 */
  .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--cyan) !important;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    z-index: 100;
  }

  .skip-link:focus {
    top: 0;
  }

.page-width{max-width:var(--gfun-max-width);margin:0 auto;padding:0 20px}
.container{max-width:var(--gfun-max-width);margin:28px auto;padding:0 20px}
a{color:var(--gfun-cyan);text-decoration:none}

/* Hero */
.landing-hero__inner{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start;padding:28px 0}
@media (max-width:980px){.landing-hero__inner{grid-template-columns:1fr}}
.hero-title{font-size:clamp(1.6rem,3.4vw,2.6rem);margin:0 0 8px}
.hero-highlight{display:block;font-weight:700;color:transparent;background:linear-gradient(90deg,var(--gfun-cyan),var(--gfun-gold));background-clip:text;-webkit-background-clip:text}
.hero-subtitle{color:var(--gfun-muted);margin-bottom:12px}
/* hero + map */
.hero-map{display:grid;grid-template-columns:1fr;gap:16px;align-items:center;padding:12px 0}
#gcity-map{width:100%;height:56vh;min-height:320px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#e9f3fb,#f7fbff);position:relative;box-shadow:0 12px 30px rgba(2,6,23,0.35) inset}
.map-loading-overlay{position:absolute;inset:12px;display:flex;align-items:center;justify-content:center;font-size:0.98rem;color:rgba(4,16,34,0.75);background:linear-gradient(180deg,rgba(255,255,255,0.7),rgba(255,255,255,0.4));border-radius:10px}
.map-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(226,232,240,0.04) 1px, transparent 1px),linear-gradient(90deg, rgba(226,232,240,0.04) 1px, transparent 1px);background-size:50px 50px;opacity:0.04;pointer-events:none}

/* Buttons */

/* Features / small cards */
.hero-features{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.hero-features .feature{background:var(--gfun-glass);padding:8px 12px;border-radius:10px;color:var(--gfun-muted);font-size:0.95rem}

/* hero overlay */
.hero-content {
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}
.display{margin:0 0 8px 0;font-weight:800;line-height:1.02}
.display .zh{display:block;font-family:var(--zh-font);font-size:var(--zh-size);color:#041022}
.display .en{display:block;font-family:var(--font-body);font-size:var(--en-size);color:rgba(4,16,34,0.66);margin-top:6px;font-weight:600}

/* Kid highlights */
.kid-highlights{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.icon-card{display:flex;gap:10px;align-items:center;padding:12px;border-radius:12px;background:rgba(255,255,255,0.02)}
.icon-card .icon{font-size:1.6rem}
.highlight-title{font-weight:800;color:var(--gfun-cyan)}

/* Media / Stats */
.landing-hero__media img{width:100%;height:auto;border-radius:12px;display:block}
.stats-grid{display:flex;gap:8px;margin-top:10px}
/* lead */
.lead{color:rgba(4,16,34,0.72);font-size:var(--lead-zh);max-width:58ch;margin:12px 0 6px 0;font-family:var(--zh-font);line-height:1.55}
.lead .en{display:block;font-family:var(--font-body);font-size:var(--lead-en);color:rgba(4,16,34,0.66);margin-top:8px}

/* Utility */
.hidden{display:none!important}
/* buttons */
.btn:active{transform:translateY(1px)}
.btn:focus{outline:none;box-shadow:0 0 0 4px rgba(56,189,248,0.12);border-color:rgba(56,189,248,0.36)}
.btn--primary.gold{background:var(--btn-grad-gold);box-shadow:0 8px 22px rgba(251,191,36,0.12)}
.btn--secondary{background:transparent;color:rgba(4,16,34,0.9);border:1px solid rgba(4,16,34,0.06)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.02)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;pointer-events:none;transform:none}
.hidden-secondary{opacity:0;height:0;width:0;border:0;padding:0;margin:0;overflow:hidden;position:absolute;left:-9999px;top:auto}
.cta-note{display:block;font-size:.78rem;color:var(--muted) !important;margin-top:8px;font-weight:600}
#hero-record-btn{background:linear-gradient(90deg,#ffffff,#f3f8ff);color:#041022;padding:10px 14px;border-radius:10px;border:1px solid rgba(4,16,34,0.06)}

/* trust bar */
.trust-bar{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:.95rem;color:rgba(4,16,34,0.68)}
.trust-bar svg{width:18px;height:18px;fill:#fbbf24;flex:0 0 18px}
.trust-text{font-weight:600;color:rgba(4,16,34,0.78)}
.trust-text strong{color:#041022;font-weight:800}

/* dual entry */
.dual-entry-min{margin-top:18px}
.dual-entry{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin:24px 0}
.entry-card{background:rgba(255,255,255,0.02);padding:18px;border-radius:12px;text-align:left;box-shadow:0 6px 18px rgba(2,6,23,0.04)}
.entry-card .entry-icon{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;margin-bottom:12px;font-size:20px}
.entry-card.citizens{border-top:3px solid var(--cyan)}
.entry-card.partners{border-top:3px solid var(--gold)}
.entry-title{font-size:1.05rem;font-weight:800;margin-bottom:6px;font-family:var(--zh-font)}
.entry-desc{color:rgba(4,16,34,0.7);margin-bottom:12px;font-size:.95rem}
.entry-card a.btn{display:inline-block;margin-top:6px}

/* feature grid */
.section-title{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;margin-bottom:8px;font-family:var(--zh-font);color:#041022}
.section-subtitle{color:rgba(4,16,34,0.66);font-size:1.02rem;max-width:60ch;margin:0 auto;font-family:var(--font-body)}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.feature-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.04);border-radius:var(--radius);padding:20px;text-align:center;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.feature-card img{width:64px;height:64px;border-radius:10px;margin-bottom:12px;object-fit:cover}
.feature-card h3{font-size:1.05rem;font-weight:800;margin-bottom:8px;font-family:var(--zh-font);color:#041022}
.feature-card p{color:rgba(4,16,34,0.66);font-size:.95rem;margin-bottom:14px;flex:0 0 auto;font-family:var(--font-body)}
.feature-card a.btn{margin-top:auto}

/* stats + CTA final */
.stats-bar{max-height:0;overflow:hidden;transition:max-height .28s ease;margin-top:18px}
.stats-bar[aria-expanded="true"]{max-height:220px}
.stat-item{display:inline-block;min-width:110px;text-align:center;margin-right:8px}
.stat-value{font-weight:800;font-size:1.2rem;color:#041022}
.cta-final{text-align:center;margin:28px 0 56px;padding:48px 20px;background:linear-gradient(135deg,rgba(56,189,248,0.04),rgba(251,191,36,0.03));border-radius:var(--radius);box-shadow:0 10px 30px rgba(2,6,23,0.04)}
.cta-final h2{margin:0 0 8px;font-size:1.25rem;font-weight:800;color:#041022}
.cta-final p{color:rgba(4,16,34,0.66);margin-bottom:12px}
.cta-final>div{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
/* Quick Navigation */
  .quick-nav {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    padding: 1.5rem;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur));
    border-radius: var(--radius);
    border: 1px solid var(--header-border);
  }

  .quick-nav a {
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: all var(--duration) var(--ease);
    border: 1px solid var(--header-border);
  }

  .quick-nav a:hover,
  .quick-nav a.active {
    background: linear-gradient(135deg, var(--cyan), var(--gold));
    color: #000;
    transform: translateY(-2px);
  }

  /* Product Grid */
  .product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
  }

  /* Product Images */
  .product-images {
    position: sticky;
    top: 100px;
    height: fit-content;
  }

  .product-image {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur));
    border-radius: var(--radius);
    padding: 2rem;
    border: 1px solid var(--header-border);
    margin-bottom: 1rem;
  }

  .product-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
  }

  .product-thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }

  /* results section*/
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  .result-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur));
    border-radius: 16px;
    border: 1px solid var(--header-border);
    overflow: hidden;
    transition: all 0.4s var(--ease);
  }

  .result-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    border-color: var(--cyan) !important;
  }

  .result-card img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s var(--ease);
  }

  .result-card:hover img {
    transform: scale(1.05);
  }
/* ---------- Base layout ---------- */
.littleg-page{
  color: var(--lg-text);
}

.littleg-page .page-width{
  max-width: var(--lg-max);
}

/* ---------- Hero ---------- */
.lg-hero{
  padding: 56px 0 28px;
  text-align: center;
}

.eyebrow{
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.lg-title{
  margin: 0;
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.06;
}

.lg-subtitle{
  margin: 14px auto 0;
  max-width: 52ch;
  color: var(--lg-subtext);
  font-size: 1.05rem;
  line-height: 1.55;
}

.lg-hero__cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top: 18px;
}

.lg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: var(--lg-pill);
  padding: 12px 18px;
  font-weight: 700;
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}

.lg-btn--primary{
  background: rgba(255,255,255,.92);
  color: #0b1220;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

.lg-btn--primary:hover{
  transform: translateY(-1px);
}

.lg-btn--ghost{
  border: 1px solid var(--lg-border-2);
  background: transparent;
  color: var(--lg-text);
}

.lg-btn--ghost:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
}

.lg-flow{
  margin: 22px auto 0;
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  color: var(--lg-subtext);
}

.lg-flow__step{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  padding: 10px 14px;
  border-radius: var(--lg-pill);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--lg-border);
  text-decoration:none;
  color: var(--lg-text);
}

.lg-flow__step:hover{
  background: rgba(255,255,255,.06);
}

.lg-flow__arrow{
  color: var(--lg-muted);
}

/* ---------- Features (keep your existing markup) ---------- */
.section.feature-section{
  padding: 26px 0;
}

.feature-container{
  background: transparent;
}

.feature-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items:center;
  padding: 22px;
  border-radius: var(--lg-radius);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--lg-border);
}

.feature-eyebrow{
  margin: 0 0 8px;
  color: var(--lg-subtext);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .85rem;
}

.feature-headline{
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.12;
}

.feature-copy{
  margin: 12px 0 0;
  color: var(--lg-subtext);
  line-height: 1.6;
  max-width: 56ch;
}

.feature-link{
  display:inline-block;
  margin-top: 14px;
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-weight: 700;
}

.feature-link:hover{
  text-decoration: underline;
}

.feature-image-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
}
/* ---------- Generator workspace ---------- */
.lg-generator{
  padding: 22px 0 8px;
}

.step-card{
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(18px);
  border-radius: var(--lg-radius);
  border: 1px solid var(--lg-border);
  padding: 22px;
  box-shadow: var(--lg-shadow);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.step-card + .step-card{
  margin-top: 16px;
}

.step-card.is-active{
  border-color: rgba(56,189,248,.45);
  box-shadow: var(--lg-shadow), var(--lg-glow);
}

.step-header{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 16px;
}

.step-number{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  color: #09101d;
  background: linear-gradient(135deg, var(--lg-accent), var(--lg-accent-2));
}

.step-header h3{
  flex: 1;
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
}

.gfun-cost{
  background: rgba(251,191,36,.16);
  color: var(--gold);
  padding: 8px 12px;
  border-radius: var(--lg-pill);
  font-weight: 800;
  font-size: .9rem;
  border: 1px solid rgba(251,191,36,.22);
}

.input-options{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.record-option.primary{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
  min-height: 180px;
  border-radius: var(--lg-radius-sm);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 16px;
}

.record-btn{
  appearance:none;
  border: 0;
  width: 100%;
  border-radius: var(--lg-radius-sm);
  padding: 16px 14px;
  background: rgba(255,255,255,.06);
  color: var(--lg-text);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  border: 1px solid rgba(255,255,255,.10);
}

.record-btn:hover{
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}

.record-icon{
  font-size: 2.6rem;
  display:block;
  margin-bottom: 6px;
}

.record-text{
  font-weight: 800;
  letter-spacing: .01em;
}

.record-timer{
  margin-top: 10px;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--lg-accent);
  font-variant-numeric: tabular-nums;
}

.record-waveform{
  width: 100%;
  height: 60px;
  margin-top: 12px;
  border-radius: 12px;
  background: rgba(56,189,248,.08);
  border: 1px solid rgba(56,189,248,.12);
}

/* Upload */
.upload-zone{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  min-height: 180px;
  border-radius: var(--lg-radius-sm);
  border: 2px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.02);
  padding: 16px;
  cursor:pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.upload-zone:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(56,189,248,.55);
}

.upload-zone.drag-over{
  background: rgba(217,70,239,.08);
  border-color: rgba(217,70,239,.55);
}

.upload-icon{
  font-size: 2.6rem;
  display:block;
  margin-bottom: 6px;
}

.upload-hint{
  margin-top: 6px;
  font-size: .85rem;
  color: var(--lg-muted);
}

.upload-preview{
  margin-top: 10px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(56,189,248,.16);
  background: rgba(56,189,248,.08);
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.file-name{
  color: rgba(56,189,248,.95);
  font-weight: 800;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remove-file{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(239,68,68,.28);
  background: rgba(239,68,68,.16);
  color: rgba(239,68,68,.95);
  cursor:pointer;
}

.remove-file:hover{
  background: rgba(239,68,68,.26);
}

/* Quick settings */
.quick-settings{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.lg-field{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.lg-label{
  font-size: .9rem;
  font-weight: 800;
  color: rgba(255,255,255,.82);
}

.style-select{
  width: 100%;
  border-radius: 12px;
  padding: 12px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--lg-text);
  outline: none;
}

.style-select:focus{
  border-color: rgba(56,189,248,.55);
  box-shadow: 0 0 0 4px rgba(56,189,248,.14);
}

.location-toggle{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  cursor: pointer;
}

.location-toggle:hover{
  background: rgba(255,255,255,.06);
}

.location-toggle input{
  width: 20px;
  height: 20px;
}

/* Actions */
.lg-actions{
  grid-column: 1 / -1;
  display:flex;
  gap: 12px;
  margin-top: 2px;
}

.lg-actions .lg-btn{
  flex: 1;
  border: 0;
  cursor: pointer;
}

.lg-actions .lg-btn--primary{
  background: linear-gradient(135deg, var(--lg-accent), var(--gold));
  color: #09101d;
  box-shadow: 0 14px 40px rgba(56,189,248,.18);
}

.lg-actions .lg-btn--primary:hover:not(:disabled){
  transform: translateY(-1px);
}

.lg-actions .lg-btn--primary:disabled{
  opacity: .55;
  cursor:not-allowed;
}

.lg-actions .lg-btn--ghost{
  border: 1px solid rgba(255,255,255,.22);
  background: transparent;
  color: var(--lg-text);
}

/* Messages */
.lg-messages{ margin-top: 12px; }

.lg-error, .lg-success{
  padding: 12px;
  border-radius: 12px;
  font-weight: 800;
  border: 1px solid transparent;
}

.lg-error{
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.22);
  color: rgba(255,140,140,.95);
}

.lg-success{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.22);
  color: rgba(130,255,180,.95);
}

.lg-success a{
  color: rgba(255,255,255,.92);
  text-decoration: underline;
}

/* Progress */
.lg-progress{ margin-top: 16px; }

.progress-bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}

.progress-fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--lg-accent), var(--lg-accent-2));
  transition: width .24s ease;
}

.progress-text{
  margin: 8px 0 0;
  text-align: center;
  color: var(--lg-subtext);
  font-weight: 700;
  font-size: .95rem;
}

/* Results */
.results-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.result-item{
  border-radius: var(--lg-radius-sm);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  padding: 14px;
}

.result-item h4{
  margin: 0 0 10px;
  font-size: 1rem;
}

.transcript-box{
  min-height: 120px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.90);
  line-height: 1.55;
}

.action-btn{
  margin-top: 10px;
  width: 100%;
  border-radius: 999px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor: pointer;
}

.action-btn:hover{
  background: rgba(255,255,255,.08);
}

/* Tags */
.tags-container{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(56,189,248,.22);
  background: rgba(56,189,248,.10);
  color: rgba(180,240,255,.95);
  font-weight: 800;
  font-size: .85rem;
}

/* Pricing / FAQ / Related: keep consistent padding rhythm */
.pricing-section,
.faq-section,
.lg-related{
  padding: 34px 0;
}

.faq-search-wrapper{
  max-width: 520px;
  margin: 12px auto 0;
  position: relative;
}

.faq-search{
  width: 100%;
  padding: 12px 44px 12px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  outline:none;
}

.faq-search:focus{
  border-color: rgba(56,189,248,.55);
  box-shadow: 0 0 0 4px rgba(56,189,248,.14);
}

.faq-search-icon{
  position:absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .8;
}

.faq-item{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 10px 12px;
}

.faq-item + .faq-item{ margin-top: 10px; }

.faq-q{
  cursor:pointer;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

.faq-a{
  margin-top: 8px;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
}

.style-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.style-card{
  grid-column: span 4;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--lg-radius);
  text-decoration:none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}

.style-card:hover{
  background: rgba(255,255,255,.06);
}

.style-card__icon{
  width: 44px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
}

.style-card__title{
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
}

.style-card__desc{
  margin: 2px 0 0;
  color: rgba(255,255,255,.72);
}

.style-card__cta{
  margin-left:auto;
  color: rgba(255,255,255,.72);
  font-weight: 800;
}

/* Accessibility helpers */
.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;
}

/* Responsive */
@media (max-width: 990px){
  .feature-grid{ grid-template-columns: 1fr; }
  .input-options{ grid-template-columns: 1fr; }
  .quick-settings{ grid-template-columns: 1fr; }
  .results-grid{ grid-template-columns: 1fr; }
  .style-card{ grid-column: span 12; }
}
.feature-image{
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}

.feature-list{
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--lg-subtext);
}

.feature-list-item{
  margin: 8px 0;
}

/* Comparison slider interaction */
#slider {
  user-select: none;
}
  .thumbnail {
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all var(--duration) var(--ease);
  }

  .thumbnail:hover,
  .thumbnail.active {
    border-color: var(--cyan) !important;
    transform: scale(1.05);
  }

  .thumbnail img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Product Details */
  .product-details-wrapper {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur));
    border-radius: var(--radius);
    padding: 3rem;
    border: 1px solid var(--header-border);
  }

.product-description {
  background: #fbfbfd;
  padding: 88px 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
}

/* Responsive */
@media (max-width: 1024px) {
  .product-description {
    padding: 64px 0;
  }
}

@media (max-width: 768px) {
  .product-description {
    padding: 48px 0;
  }
  
  .description-container {
    padding: 0 16px;
  }
  
  .feature-card {
    padding: 24px 20px;
  }
  
  .feature-icon-wrapper {
    width: 56px;
    height: 56px;
    font-size: 28px;
    margin-bottom: 20px;
  }
  
  .feature-headline {
    font-size: 21px;
  }
  
  .feature-copy {
    font-size: 15px;
  }
  
  .rte-content table {
    font-size: 14px;
  }
  
  .rte-content table td {
    padding: 10px 12px;
  }
}
  .product-description-hero {
        font-size: var(--text-xl);
         font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--spacing-xl);
  line-height: var(--line-height-relaxed);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);

  }
  /* Price Wrapper */
  .price-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .product-price {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(90deg, var(--cyan), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

    .gfun-badge {
      background: white;
      border-radius: 50px;
      padding: 0.75rem 1.5rem;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      font-weight: 600;
      color: #1a365d;
      pointer-events: auto;
    }
/* Variant Selector */

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px !important;
}


  .variant-selector select {
    width: 100%;
    padding: 1rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--header-border);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
  }

  .variant-selector select:hover {
    background: rgba(255,255,255,0.08);
  }
/* Search Bar */
  #styleSearch {
    width: 100%;
    padding: 15px 20px;
    border-radius: 50px;
    border: 1px solid var(--header-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur));
    color: white;
    font-size: 1rem;
    margin-bottom: 2rem;
    transition: all var(--duration) var(--ease);
  }

  #styleSearch:focus {
    outline: none;
    border-color: var(--cyan) !important;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
  }


  .style-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    background: linear-gradient(90deg, var(--cyan), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .style-card p {
    color: rgba(255,255,255,0.75);
    font-size: 0.95rem;
    line-height: 1.6;
  }
.style-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.style-card .badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
}

.style-card .badge.hot {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
}

.style-card .meta {
  padding: 0.75rem;
  text-align: center;
}

.style-card .name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.style-card .cost {
  font-size: 0.85rem;
  color: var(--gold, #fbbf24);
  font-weight: 600;
}

  .style-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    font-size: 0.85rem;
    margin: 0.25rem;
    color: rgba(255,255,255,0.8);
  }

  /* modal */

    .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    z-index: 9998;
    animation: fadeIn 0.3s ease;
  }

  .modal-overlay.active {
    display: block;
  }

  .modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(15,23,42,0.95), rgba(30,41,59,0.95));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 2.5rem;
    max-width: 500px;
    width: 90%;
    z-index: 9999;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: slideUp 0.3s ease;
  }

  .modal.active {
    display: block;
  }
     .littleg-ecosystem{max-width:1200px;margin:0 auto;padding:20px;}

    /* Accessibility helper (in case theme doesn't provide it) */
    .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}

    .lg-muted{margin:0;color:var(--muted,rgba(234,244,255,.62));line-height:1.6;}

    .lg-hero{padding:clamp(1.25rem,3vw,2rem) 0 1.25rem;text-align:center;}
    .lg-title{margin:.25rem auto .5rem;max-width:980px;font-size:clamp(2rem,4vw,3rem);line-height:1.08;letter-spacing:-.02em;font-weight:800;color:var(--page-text,rgba(234,244,255,.92));}
    .lg-subtitle{margin:0 auto 1rem;max-width:820px;color:var(--muted,rgba(234,244,255,.62));font-size:clamp(1rem,1.8vw,1.2rem);line-height:1.55;}

    .lg-flow{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:.75rem;}
    .lg-flow__step{display:inline-flex;gap:8px;align-items:center;padding:.55rem .85rem;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);}
    .lg-flow__arrow{opacity:.6;}

    .generator-workspace{display:grid;gap:18px;padding:0 20px 24px;}

    .input-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

.record-btn {
  width: 100%;
  background: linear-gradient(135deg, #38bdf8, #d946ef);
  border: none;
  border-radius: 16px;
  padding: 2rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #000;
  font-weight: 600;
}  

.record-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(56, 189, 248, 0.4);
}

.record-btn[aria-pressed="true"] {
  background: #ef4444;
  animation: pulse 1.5s infinite;
}

.record-timer{margin-top:10px;text-align:center;color:var(--muted,rgba(234,244,255,.62));font-variant-numeric:tabular-nums;}

    .upload-zone{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;min-height:160px;border:1px dashed rgba(255,255,255,.22);border-radius:20px;background:rgba(255,255,255,.03);cursor:pointer;transition:background 220ms var(--ease-apple,cubic-bezier(.28,.11,.32,1)), border-color 220ms var(--ease-apple,cubic-bezier(.28,.11,.32,1));}
    .upload-zone:hover{background:rgba(255,255,255,.06);border-color:rgba(56,189,248,.45);}
    .upload-zone.is-dragover{background:rgba(56,189,248,.10);border-color:rgba(56,189,248,.55);}

    .quick-settings{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:flex-end;margin-top:14px;}
    .lg-field{display:flex;flex-direction:column;gap:6px;min-width:220px;}
    .lg-label{font-size:.85rem;color:var(--muted,rgba(234,244,255,.62));}

    .style-select{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:14px;color:rgba(234,244,255,.92);padding:.7rem .9rem;outline:none;}
    .style-select:focus{box-shadow:0 0 0 4px rgba(56,189,248,.18);border-color:rgba(56,189,248,.45);}

    .location-toggle{display:inline-flex;gap:8px;align-items:center;color:rgba(234,244,255,.92);padding:.65rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);}

    .processing-visual{text-align:center;padding:22px;}
    .ai-brain{font-size:56px;margin-bottom:8px;}
    .processing-text{color:var(--page-text,rgba(234,244,255,.92));font-weight:700;margin-bottom:14px;}
    .progress-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden;}
    .progress-fill{height:100%;width:0%;background:linear-gradient(90deg,rgba(56,189,248,.9),rgba(251,191,36,.9));animation:lgProgress 3s ease-in-out infinite;}
  .result-item{
    padding: .85rem;
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 12px;
    background: rgba(255,255,255,.85);
    cursor:pointer;
    margin-bottom: .6rem;
  }
    .result-item h4{margin:0 0 10px;color:rgba(234,244,255,.92);font-weight:800;}

    .transcript-box{min-height:96px;padding:12px;border-radius:14px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.10);color:rgba(234,244,255,.92);}

    .action-btn{border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:rgba(234,244,255,.92);padding:.6rem .9rem;font-weight:700;cursor:pointer;transition:transform 220ms var(--ease-apple,cubic-bezier(.28,.11,.32,1)), background 220ms var(--ease-apple,cubic-bezier(.28,.11,.32,1));}
    .action-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.10);}
    .action-btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(56,189,248,.20);}

    .share-store-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
    .social-buttons{display:flex;gap:10px;flex-wrap:wrap;}
    .social-btn{border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:rgba(234,244,255,.92);padding:.6rem .9rem;font-weight:800;cursor:pointer;}

    .storage-btn{width:100%;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:rgba(234,244,255,.92);padding:.85rem 1rem;font-weight:800;cursor:pointer;}
    .storage-btn.primary{background:linear-gradient(135deg,rgba(56,189,248,.92),rgba(251,191,36,.92));color:rgba(15,23,42,.92);border-color:rgba(255,255,255,.10);}

    @keyframes lgProgress{0%{width:0%}50%{width:70%}100%{width:100%}}

    @media (max-width:768px){
      .input-options,.share-store-grid{grid-template-columns:1fr;}
      .generator-workspace{padding:0 14px 20px;}
    }


  /* Responsive */
  @media (max-width: 1024px) {
    .product-grid {
      grid-template-columns: 1fr;
    }
    
    .product-images {
      position: relative;
      top: 0;
    }
  }

  /* Animations */
  @keyframes ripple {
    from {
      transform: scale(0);
      opacity: 1;
    }
    to {
      transform: scale(2);
      opacity: 0;
    }
  }



  /* Add to Cart Button */
  .btn-add-to-cart {
    width: 100%;
    padding: 1.25rem 2rem;
    background: linear-gradient(135deg, var(--cyan), var(--gold));
    color: #000;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    position: relative;
    overflow: hidden;
  }

  .btn-add-to-cart:hover {
    transform: scale(1.05);
  }

  .btn-add-to-cart:hover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.25), transparent);
    animation: ripple 0.6s ease-out;
  }

  .btn-add-to-cart:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  @keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.style-showcase-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  border-color: rgba(251,191,36,0.5);
}

.style-showcase-card:hover img {
  transform: scale(1.1);
}
/* Engine card hover effects */
.engine-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 25px rgba(251,191,36,0.3);
  background: rgba(255,255,255,0.08) !important;
}

/* Style button interactions */
.style-btn:hover {
  transform: scale(1.05);
  background: rgba(255,255,255,0.08) !important;
  border-color: #fbbf24 !important;
}

.style-btn.active {
  border-color: #38bdf8 !important;
  background: rgba(56,189,248,0.1) !important;
}

/* Hover effects for gallery cards */
.gallery-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 25px rgba(255,255,255,0.15);
}

.gallery-card:hover .gallery-image {
  transform: scale(1.05);
}

.gallery-card:hover .image-overlay {
  opacity: 1;
}

.like-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fbbf24;
}

   .faq-item {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur));
    border-radius: 12px;
    border: 1px solid var(--header-border);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s var(--ease);
  }

  .faq-item:hover {
    border-color: var(--cyan) !important;
    box-shadow: 0 0 20px rgba(56,189,248,0.2);
  }


  .faq-question h3 {
    margin: 0;
    font-size: 1.1rem;
    color: rgba(255,255,255,0.9);
  }

  .faq-toggle {
    font-size: 1.5rem;
    color: var(--cyan) !important;
    transition: transform 0.3s var(--ease);
  }

  .faq-item.active .faq-toggle {
    transform: rotate(45deg);
  }


  .faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 1.5rem 1.5rem;
  }



 .ai-img-section {
    background: var(--bg-white);
    color: #fff;
    font-family: var(--font-display);
    padding: 2rem 0;
    min-height: 100vh;
  }

  .ai-img-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
  }



/* responsive */
@media(max-width:768px){
  .hero-content{margin-top:-3.2rem;padding:0 8px;display:block}
  .hero-inner{width:100%;padding:14px}
  .display .zh{font-size:clamp(22px,8.5vw,36px)}
  .display .en{font-size:calc(var(--zh-size) * .45)}
  .hero-ctas{flex-direction:column}
  .hero-cta.btn{width:100%;justify-content:center}
  .dual-entry{grid-template-columns:1fr}
  .feature-card{min-height:auto}
   .generation-form-controls > div {
    grid-template-columns: 1fr !important;
  }
}
@media(min-width:900px){
  .hero-content{margin-top:-8rem;display:flex;justify-content:flex-start}
  .hero-inner{max-width:760px}
  .hidden-secondary{position:static;opacity:.7;height:auto;width:auto;padding:8px 12px;margin-left:6px;overflow:visible}
}
/* Select 下拉箭頭 */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px !important;
}

/* accessibility */
[role="status"][aria-live]{outline:none}
[aria-hidden="true"]{pointer-events:none}
.visually-hidden{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.btn svg,.entry-icon svg{vertical-align:middle;display:inline-block}
:focus-visible{outline:3px solid rgba(56,189,248,0.16);outline-offset:2px;border-radius:6px}
/* Minor responsive */
@media (max-width:480px){
  .landing-hero__inner{gap:14px;padding:18px 0}
  .hero-features{flex-direction:column}
}
.image-container {
    height: 200px !important;
  }
  
  .card-footer {
    padding: 1rem !important;
  }
.container{
  max-width:1400px;
  margin:0 auto;
  padding:32px
}

.hero{
  text-align:center;
  padding:clamp(2rem,5vw,6rem) clamp(1rem,3vw,2rem);
  margin-bottom:3rem
}

.hero h1{
  font-size:clamp(2.5rem,5vw,3.5rem);
  font-weight:800;
  background:linear-gradient(90deg,var(--cyan),var(--gold));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:1rem
}

.comparison-section{
  margin-bottom:4rem
}

.comparison-container{
  position:relative;
  width:100%;
  max-width:800px;
  margin:0 auto;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:24px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5)
}

.comparison-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.before-image{
  z-index:1
}

.after-image{
  z-index:2;
  clip-path:inset(0 50% 0 0)
}

.slider{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:4px;
  background:white;
  cursor:ew-resize;
  z-index:10;
  transform:translateX(-50%);
  box-shadow:0 0 10px rgba(0,0,0,0.5)
}

.slider-button{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:40px;
  height:40px;
  background:white;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.3)
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:2rem;
  margin-top:3rem
}

.gallery-card{
  background:rgba(255,255,255,0.05);
  border-radius:16px;
  overflow:hidden;
  transition:all 0.3s;
  border:1px solid rgba(255,255,255,0.1)
}

.gallery-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(56,189,248,0.3)
}

.image-container{
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  cursor:pointer
}

.gallery-image{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.3s
}


.image-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.7);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:1.5rem;
  opacity:0;
  transition:opacity 0.3s
}

.image-container{
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  cursor:pointer
}

.gallery-image{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.3s
}

.gallery-card:hover .gallery-image{
  transform:scale(1.05)
}

.prompt-text{
background: #ffffff;
color: #0f172a;
font-size:0.9rem;
  line-height:1.6;
  margin-bottom:1rem;
  text-align:left;
  max-height:150px;
  overflow-y:auto
}

.use-prompt-btn{
  background:rgba(255,255,255,0.2);
color: #0f172a;
  padding:0.75rem 1.5rem;
  border-radius:8px;
  border:none;
  cursor:pointer;
  font-weight:600;
  transition:all 0.3s;
  width:100%
}

.use-prompt-btn:hover{
  background:rgba(255,255,255,0.3)
}

.style-name{
  font-size:1.1rem;
  font-weight:600;
  color:var(--gold);
  margin-bottom:0.5rem
}

.style-description{
  font-size:0.9rem;
  color:rgba(255,255,255,0.7);
  margin-bottom:1rem
}

.card-actions{
  display:flex;
  justify-content:space-between;
  align-items:center
}

.like-btn{
  display:flex;
  align-items:center;
  gap:0.5rem;
  background:rgba(255,255,255,0.1);
  padding:0.5rem 1rem;
  border-radius:20px;
  border:none;
color: #0f172a;
  cursor:pointer;
  transition:all 0.3s
}

.like-btn:hover{
  background:rgba(255,255,255,0.2)
}

.like-btn.liked{
  background:rgba(217,70,239,0.3);
  color:var(--magenta)
}

.badge{
  background:linear-gradient(135deg,var(--cyan),var(--gold));
  color:#000;
  padding:0.5rem 1rem;
  border-radius:20px;
  font-weight:700;
  font-size:0.9rem
}

.image-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.7);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:1.5rem;
  opacity:0;
  transition:opacity 0.3s
}

.gallery-card:hover .image-overlay{
  opacity:1
}
.prompt-text{
color: #0f172a;
  font-size:0.9rem;
  line-height:1.6;
  margin-bottom:1rem;
  text-align:left;
  max-height:150px;
  overflow-y:auto
}

.use-prompt-btn{
  background:rgba(255,255,255,0.2);
color: #0f172a;
  padding:0.75rem 1.5rem;
  border-radius:8px;
  border:none;
  cursor:pointer;
  font-weight:600;
  transition:all 0.3s;
  width:100%
}

.use-prompt-btn:hover{
  background:rgba(255,255,255,0.3)
}

.card-footer{
  padding:1.5rem
}

.style-name{
  font-size:1.1rem;
  font-weight:600;
  color:var(--gold);
  margin-bottom:0.5rem
}

.style-description{
  font-size:0.9rem;
  color:rgba(255,255,255,0.7);
  margin-bottom:1rem
}

.card-actions{
  display:flex;
  justify-content:space-between;
  align-items:center
}

.like-btn{
  display:flex;
  align-items:center;
  gap:0.5rem;
  background:rgba(255,255,255,0.1);
  padding:0.5rem 1rem;
  border-radius:20px;
  border:none;
color: #0f172a;
  cursor:pointer;
  transition:all 0.3s
}

.like-btn:hover{
  background:rgba(255,255,255,0.2)
}

.like-btn.liked{
  background:rgba(217,70,239,0.3);
  color:var(--magenta)
}

.badge{
  background:linear-gradient(135deg,var(--cyan),var(--gold));
  color:#000;
  padding:0.5rem 1rem;
  border-radius:20px;
  font-weight:700;
  font-size:0.9rem
}


.btn--primary{
  background:linear-gradient(135deg,var(--cyan),var(--gold));
  color:#000;
  padding:1rem 2.5rem;
  border-radius:50px;
  font-weight:700;
  text-decoration:none;
  display:inline-block;
  transition:all 0.3s;
  background: linear-gradient(135deg, var(--cyan), var(--littleg-gold));
  /* Safari 修復 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 確保文字可讀 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 防止點擊高亮 */
  -webkit-tap-highlight-color: transparent;
}

.btn--primary:hover{
  transform:scale(1.05)
}


* ========== 快速導航 ========== */
.quick-nav-section {
  margin: 4rem 0;
}

.quick-nav {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.nav-btn {
  background: var(--glass-bg);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--header-border);
  transition: all var(--duration) var(--ease);
  display: inline-block;
}

.nav-btn:hover {
  background: var(--glass-hover);
  border-color: var(--enterprise-blue);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(56, 189, 248, 0.3);
}

/* ========== CTA Section ========== */
.cta-section {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border-radius: 24px;
  padding: clamp(2rem, 5vw, 6rem) clamp(1rem, 3vw, 2rem);
  text-align: center;
  border: 1px solid var(--header-border);
  margin: 4rem 0;
}

.cta-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: white;
  margin-bottom: 1.5rem;
}

.cta-desc {
  color: rgba(255,255,255,0.8);
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* ========== 響應式設計 ========== */
@media (max-width: 1024px) {
  .service-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  
  .workflow-steps {
    grid-template-columns: 1fr;
  }
}

.filter-btn:hover,
.filter-btn.active{
  background:linear-gradient(135deg,var(--cyan),var(--gold));
  color:#000;
  border-color:transparent
}

@media (max-width:768px){
  .gallery-grid{
    grid-template-columns:1fr
  }
}

/* Glass surface */
.glass-surface {
  background: var(--glass-bg);
  border: 1px solid var(--header-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}

/* Basic resets & helpers */
html,body{margin:0;padding:0;font-family:var(--font-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}button, a { cursor: pointer; -webkit-tap-highlight-color: transparent; }
img { max-width:100%; height:auto; display:block; }

 .nav-inner{width:100%;max-width:var(--max-width);margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 20px
}

/* Utility */
.hidden { display:none !important; }
.visually-hidden { position:absolute !important; height:1px; width:1px; overflow:hidden; clip: rect(1px,1px,1px,1px); white-space:nowrap; }

/* CTA gradient text */
.gradient-text{
  background: linear-gradient(90deg, var(--glg-cyan), var(--glg-magenta), var(--glg-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Small component examples */
.glg-card { padding:1.25rem; border-radius:var(--radius-md); 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); box-shadow:var(--shadow-xs); }

  .nav-actions{display:flex;gap:12px;align-items:center}
  .btn-glass{border:1px solid rgba(255,255,255,0.06);background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));backdrop-filter:blur(6px);color:var(--text) !important;}

  /* Hero */
  main{padding-top:98px}
  .hero{padding:36px 20px;border-radius:18px;margin:14px auto 24px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));box-shadow:var(--shadow-1);max-width:var(--max-width)}
.hero-sub {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--muted) !important;
  margin: 0 0 var(--spacing-lg);
  line-height: 1.6;
}

  /* Balance Card */
  .balance-card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:14px;padding:18px;border:1px solid var(--header-border);box-shadow:0 8px 26px rgba(3,7,18,0.6)}
  .balance-amount{font-weight:800;font-size:2.1rem;display:flex;align-items:baseline;gap:6px}
  .balance-unit{font-weight:600;color:var(--muted) !important;font-size:0.95rem}
  .balance-stats{display:flex;justify-content:space-between;margin-top:12px;color:var(--muted) !important;font-size:0.9rem}
  .quick-actions{display:flex;gap:8px;margin-top:14px}

  /* Tabs */
  .main-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0;}
  .main-tab{padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);background:transparent;cursor:pointer;font-weight:600}
  .main-tab.active{background:linear-gradient(90deg,#0ea5e966, #7c3aed33);box-shadow:0 10px 30px rgba(12,18,28,0.6)}

  /* Services Grid */
  .service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
  .service-card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:18px;border-radius:12px;border:1px solid var(--header-border);min-height:140px;display:flex;flex-direction:column;justify-content:space-between}
.service-card h4 {
  font-size: 1.3rem;
  font-weight: 700;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}
  .service-price{font-weight:700}

  /* Recharge grid */
  .recharge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
  .recharge-card{padding:18px;border-radius:14px;border:1px solid var(--header-border);background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));box-shadow:0 10px 30px rgba(3,7,18,0.5)}
  .recharge-card.featured{transform:scale(1.02);border:1px solid rgba(255,255,255,0.08)}
  .price{display:flex;align-items:baseline;gap:6px;font-size:1.6rem;font-weight:800}
  .card-badge{font-size:0.86rem;background:rgba(255,255,255,0.03);padding:6px 8px;border-radius:10px;display:inline-block}
  .credits{color:var(--muted) !important;margin-top:6px}
  .features{margin:10px 0 12px;padding-left:18px;color:var(--muted)}

  /* Subscription */
  .subscription-grid{display:flex;gap:12px;flex-wrap:wrap}
  .subscription-card{flex:1;border-radius:12px;padding:14px;border:1px solid var(--header-border);background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent)}
  .sub-price{font-weight:800;font-size:1.1rem}

  /* responsive */
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr}
    .hero{padding:22px}
  }

    /* ========== GFun 餘額顯示 ========== */
    .gfun-hero {
      display: inline-block;
      padding: 1.5rem 3rem;
      background: var(--glass-bg);
      backdrop-filter: blur(var(--blur));
      border-radius: 50px;
      border: 1px solid var(--header-border);
      margin-bottom: 2rem;
    }


.gfun-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  background: linear-gradient(90deg, var(--market-cyan), var(--market-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1.5rem;
}

.gfun-hero p {
  font-size: 1.3rem;
  color: #94a3b8;
  margin-bottom: 2rem;
}


    @keyframes pulseGlow {
      0%, 100% { filter: drop-shadow(0 0 20px rgba(56,189,248,0.3)); }
      50% { filter: drop-shadow(0 0 40px rgba(251,191,36,0.6)); }
    }

    .gfun-subtitle {
      opacity: 0.7;
      margin-bottom: 2rem;
    }

    .gfun-actions {
      display: flex;
      gap: 2rem;
      justify-content: center;
      flex-wrap: wrap;
    }
.info-cost {
  color: var(--gold);
  font-weight: 700;
  font-size: 1rem;
}
.handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: white;
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.comparison-info {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 20px;
  background: var(--glass-bg);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.info-badge {
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
}


.before-after-showcase {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border-radius: 24px;
  padding: 3rem 2rem;
  margin: 3rem auto;
  max-width: 1200px;
}

.showcase-intro {
  text-align: center;
  color: rgba(255,255,255,0.8);
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.showcase-slider {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  aspect-ratio: 2/1;
}

.showcase-item {
  position: absolute;
  width: 100%;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.showcase-item.active {
  opacity: 1;
  transform: translateX(0);
  position: relative;
}

.showcase-item img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.showcase-caption {
  text-align: center;
  margin-top: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.showcase-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
}

.showcase-btn {
  background: var(--glass-bg);
  border: 1px solid var(--header-border);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  color: #fff;
}

.showcase-btn:hover {
  background: var(--glass-hover);
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(56,189,248,0.3);
}

.slider-dots {
  display: flex;
  gap: 0.75rem;
}

    /* Top bar: balance + quick search */
    .top-controls { display:flex; gap:1rem; align-items:center; margin-bottom:1rem; }
    .quick-search { display:flex; gap:.5rem; align-items:center; }

    /* Tabs */
    .tab-buttons { display:flex; gap:.6rem; padding:0 1rem; overflow:auto; }
    .tab-btn { flex-shrink:0; padding:.55rem .95rem; border-radius:999px; background:var(--glass-bg); border:1px solid var(--header-border); color:var(--muted) !important; font-weight:700; cursor:pointer; }
    .tab-btn.active { background:linear-gradient(135deg,var(--cyan),var(--gold)); color:#000; box-shadow:0 8px 24px rgba(0,0,0,.45); }
    /* station / feature grid */
    .station-card { background:var(--card-bg); border:1px solid var(--header-border); border-radius:var(--radius); padding:1.25rem; position:relative; overflow:hidden; }
    .station-number { position:absolute; top:1rem; right:1rem; width:56px; height:56px; background:linear-gradient(135deg,var(--cyan),var(--magenta)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#000; }
    .feature-icon{ font-size:1.5rem; }
    .feature-price{ margin-top:.6rem; display:inline-block; padding:.35rem .6rem; background:rgba(251,191,36,0.12); color:var(--gold); border-radius:999px; font-weight:800; }

    /* filters */
 /* 篩選系統 */
.game-filter-system {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border: 1px solid var(--header-border);
  border-radius: 24px;
  padding: 32px;
  margin-bottom: 3rem;
}

.category-filter,
.difficulty-filter {
  margin-bottom: 1.5rem;
}

.category-filter strong,
.difficulty-filter strong {
  display: inline-block;
  margin-right: 1rem;
  color: var(--glass-bg);
}

.category-btn,
.difficulty-btn {
  background: var(--glass-bg);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  margin: 0.25rem;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  font-size: 0.9rem;
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 768px) {
  .littleg-hero {
    min-height: 80vh;
    padding: 3rem 1.5rem;
  }
  
  .littleg-hero-icon {
    width: 120px;
    height: 120px;
  }
  
  .littleg-timeline {
    grid-template-columns: 1fr;
  }
  
  .littleg-map-container {
    padding: 1rem;
  }
}
.category-btn:hover,
.difficulty-btn:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

.category-btn.active,
.difficulty-btn.active {
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  border-color: transparent;
  color: #000;
  font-weight: 700;
}

.reset-filters {
  background: rgba(239,68,68,0.2);
  border: 1px solid rgba(239,68,68,0.3);
  color: #ef4444;
  padding: 0.75rem 1.5rem;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  margin-top: 1rem;
}

.reset-filters:hover {
  background: rgba(239,68,68,0.3);
  transform: translateY(-2px);
}
/* 分類區塊 */
.category-section {
  margin-bottom: 4rem;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(255,255,255,0.1);
}



.category-count {
  margin-left: auto;
  font-size: 1rem;
}

/* 遊戲網格 */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

/* 遊戲卡片增強 */
.game-card {
  position: relative;
}

.game-card.fade-in {
  animation: fadeIn 0.5s var(--ease);
}

.play-count {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: rgba(56,189,248,0.15);
  color: var(--cyan);
  border-radius: 12px;
  font-size: 0.75rem;
  margin-top: 0.5rem;
}    .game-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.6); }
    .game-meta{ display:flex; gap:.5rem; align-items:center; margin-top:auto; }
    .play-time, .age-tag{ padding:.25rem .5rem; border-radius:999px; background:rgba(255,255,255,.03); font-weight:700; font-size:.85rem; }
.reward-badge {
  text-align: center;
  padding: 1rem;
  background: rgba(251,191,36,0.15);
  border: 2px solid rgba(251,191,36,0.3);
  border-radius: 20px;
  color: #fbbf24;
  font-size: 1.2rem;
  font-weight: 700;
}
    .game-btn{ padding:.45rem .7rem; border-radius:999px; background:linear-gradient(135deg,var(--cyan),var(--gold)); color:#000; font-weight:800; text-decoration:none; }
.game-area {
  text-align: center;
  margin-top: 2rem;
}

.game-description {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.lights-container {
  display: flex;
  justify-content: space-around;
  gap: 2rem;
}

.game-item {
  background: rgba(255,255,255,0.1);
  padding: 32px;
  border-radius: 16px;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  border: 2px solid transparent;
  text-align: center;
  min-width: 150px;
  box-shadow: 0 0 20px rgba(251,191,36,0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-item:hover {
  transform: scale(1.05);
  border-color: #fbbf24;
}

/* Specific Game Styling */
.direction-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 400px;
  margin: 0 auto;
}

.puzzle-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 400px;
  margin: 0 auto;
}

.emoji, .shape {
  font-size: 3rem;
}

.name {
  margin-top: 1rem;
  font-weight: 600;
  font-size: 1.2rem;
}

.location-card {
  background: rgba(255,255,255,0.1);
  padding: 32px;
  border-radius: 16px;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  border: 2px solid transparent;
  min-width: 150px;
  text-align: center;
}

.location-card:hover {
  transform: scale(1.05);
  border-color:#0F2A4A;
}

.emoji {
  font-size: 3rem;
}
.location-grid {
  display: flex;
  justify-content: space-around;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 auto;
}

.location-name {
  margin-top: 1rem;
  font-weight: 600;
  font-size: 1.2rem;
}

.coordinates {
  margin-top: 0.5rem;
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
}

/* 分數顯示 */
#score-display {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  color: #000;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-size: 1.5rem;
  font-weight: 800;
  box-shadow: 0 0 30px rgba(56,189,248,0.5);
  z-index: 1000;
  transition: all 0.3s var(--ease);
}

#score-display.score-update {
  animation: scoreUpdate 0.6s var(--ease);
}

@keyframes scoreUpdate {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}


    /* play-count badge */
    .play-count { margin-left:auto; font-size:0.85rem; color:var(--muted) !important; padding:.25rem .5rem; border-radius:999px; background:rgba(255,255,255,0.02); }

    /* small helpers */
    .muted{ color:var(--muted) !important; font-size:.95rem; }
    .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; }

    @media (max-width:768px){ .feature-grid{ grid-template-columns:1fr; } .games-grid{ grid-template-columns:1fr; } .tab-buttons{ padding:0 .5rem; } .top-controls{ flex-direction:column; align-items:stretch; } .gfun-balance{ margin-left:0; }
    }
    
/* ==================== 遊戲中心容器 ==================== */
.littleg-game-hub {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px;
  min-height: 100vh;
}

/* ==================== Hero區域 ==================== */
.game-hub-hero {
  text-align: center;
  padding: clamp(2rem, 5vw, 6rem) clamp(1rem, 3vw, 2rem);
  margin-bottom: 3rem;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--magenta) 50%, var(--gold) 100%);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}

.game-hub-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1), transparent),
              radial-gradient(circle at 70% 50%, rgba(255,255,255,0.1), transparent);
  animation: gradientShift 20s ease infinite;
}

.game-hub-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.game-hub-subtitle {
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: rgba(255,255,255,0.9);
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}
.gfun-update-animation {
  animation: scaleUp 0.6s var(--ease);
}

/* ==================== 分類標籤 ==================== */
.category-tabs {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.category-tab {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border: 1px solid var(--header-border);
  border-radius: 50px;
  padding: 0.75rem 1.5rem;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

.category-tab:hover {
  background: var(--glass-hover);
  transform: translateY(-2px);
}

.category-tab.active {
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  border-color: transparent;
  box-shadow: 0 0 20px rgba(56,189,248,0.5);
}

/* ==================== 遊戲網格 ==================== */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

/* ==================== 遊戲卡片 ==================== */
.game-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border: 1px solid var(--header-border);
  border-radius: 24px;
  padding: 32px;
  transition: all 0.4s var(--ease);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.game-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, var(--cyan) 10%, var(--magenta) 60%, var(--gold) 90%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.game-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 30px rgba(255,255,255,0.2);
}

.game-card:hover::before {
  opacity: 1;
}

.game-card > * {
  position: relative;
  z-index: 2;
}

/* 遊戲圖標 */
.game-emoji {
  font-size: 4rem;
  display: block;
  text-align: center;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 10px rgba(56,189,248,0.5));
}



/* 遊戲描述 */
.game-description {
  font-size: 0.9rem;
  color: var(--glass-bg);
  text-align: center;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* 遊戲元數據 */
.game-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
}

.game-level {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  background: rgba(255,255,255,0.1);
}

.game-level.beginner {
  background: rgba(34,197,94,0.2);
  color: var(--game-beginner);
}

.game-level.intermediate {
  background: rgba(245,158,11,0.2);
  color: var(--game-intermediate);
}

.game-level.advanced {
  background: rgba(239,68,68,0.2);
  color: var(--game-advanced);
}

.game-duration {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.game-age {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* 遊戲獎勵/價格 */
.game-reward {
  text-align: center;
  padding: 0.75rem;
  background: rgba(251,191,36,0.15);
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.game-reward-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  display: block;
  margin-bottom: 0.25rem;
}

.game-reward-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
}

.game-cost {
  background: rgba(239,68,68,0.15);
}

.game-cost .game-reward-amount {
  color: #ef4444;
}

/* 遊戲按鈕 */
.game-launch-btn {
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  color: #000;
  font-weight: 700;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  position: relative;
  overflow: hidden;
}

.game-launch-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(56,189,248,0.5);
}
.game-launch-btn:hover::before {
  opacity: 1;
  animation: ripple 0.6s ease-out;
}

.game-launch-btn.locked {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  cursor: not-allowed;
}

/* 遊戲統計 */
.game-stats {
  display: flex;
  justify-content: space-around;
  padding: 0.5rem;
  background: var(--glass-bg);
  border-radius: 8px;
  margin-top: 1rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
}

.game-stat {
  text-align: center;
}

.game-stat-value {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cyan);
}

/* ==================== 載入畫面 ==================== */
.game-loader {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.95);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.3s var(--ease);
}

.loader-content {
  text-align: center;
  color: #fff;
}

.loader-emoji {
  font-size: 6rem;
  animation: bounce 1s infinite;
}

.loader-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255,255,255,0.1);
  border-top-color: var(--cyan);
  border-radius: 50%;
  margin: 2rem auto;
  animation: spin 1s linear infinite;
}

/* ==================== 完成畫面 ==================== */
/* 完成彈窗 */
.completion-modal {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.95);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.3s var(--ease);
}

.completion-content {
  max-width: 500px;
  padding: 3rem;
  text-align: center;
  animation: scaleUp 0.5s var(--ease);
}

.completion-emoji {
  font-size: 6rem;
  margin-bottom: 1.5rem;
  animation: bounce 1s infinite;
}
/* 獎勵彈窗 */
.reward-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-dropdown-l1);
  animation: rewardPop 3s var(--ease) forwards;
}

.reward-content {
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  padding: 32px 3rem;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 0 40px rgba(56,189,248,0.5);
}

/* 響應式 */
@media (max-width: 768px) {
  #score-display {
    top: 10px;
    right: 10px;
    padding: 0.75rem 1.5rem;
    font-size: 1.2rem;
  }

  .game-filter-system {
    padding: 1rem;
  }

  .category-btn,
  .difficulty-btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }
}
.completion-content h2 {
  font-size: 2.5rem;
  color: #fff;
  margin-bottom: 1.5rem;
}

.game-name {
  font-size: 1.25rem;
  color: rgba(255,255,255,0.8);
  margin-bottom: 2rem;
}

.score-display {
  font-size: 3rem;
  font-weight: 800;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 2rem;
}

.reward-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  background: rgba(251,191,36,0.15);
  border-radius: 20px;
  margin-bottom: 2rem;
}

.reward-icon {
  font-size: 2rem;
}

.reward-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
}

/* ==================== 獎勵彈窗 ==================== */
.reward-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-dropdown-l1);
  animation: rewardPop 3s var(--ease) forwards;
}

.reward-content {
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  padding: 32px 3rem;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 0 40px rgba(56,189,248,0.5);
}

.reward-amount {
  font-size: 2rem;
  font-weight: 800;
  color: #000;
}

/* ==================== 響應式設計 ==================== */
@media (max-width: 768px) {
  .littleg-game-hub {
    padding: 1rem;
  }

  .game-hub-hero {
    padding: 3rem 1.5rem;
  }

  .games-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .category-tabs {
    gap: 0.5rem;
  }

  .category-tab {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
}


@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}


@keyframes ripple {
  from {
    transform: scale(0);
    opacity: 1;
  }
  to {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes pulseGlow {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(56,189,248,0.3));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(56,189,248,0.6));
  }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes rewardPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  40% {
    transform: translate(-50%, -50%) scale(1);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.8);
  }
}

    .hero {
      text-align: center;
      padding: 4rem 2rem 2rem;
    }
    .gfun-display {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      background: rgba(255,255,255,0.1);
      padding: 1rem 2rem;
      border-radius: 50px;
      margin: 2rem 0;
    }
    /* 6個Station卡片網格 */
    .stations-hub {
      max-width: 1200px;
      margin: 3rem auto;
      padding: 0 2rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
    }
    
    .station-card {
      background: var(--glass-bg);
      backdrop-filter: blur(20px);
      border-radius: 24px;
      padding: 2.5rem;
      border: 1px solid rgba(255,255,255,0.1);
      transition: all 0.4s;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    
    .station-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--gold));
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    .station-card:hover {
      transform: translateY(-8px);
      background: rgba(255,255,255,0.08);
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    }
    
    .station-card:hover::before {
      opacity: 1;
    }
    
    .station-number {
      position: absolute;
      top: 1rem;
      right: 1rem;
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, var(--cyan), var(--magenta));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 1.2rem;
    }
    
    .station-icon {
      font-size: 4rem;
      margin-bottom: 1.5rem;
      filter: drop-shadow(0 0 20px var(--cyan));
    }
    
    .station-card h3 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      background: linear-gradient(90deg, var(--cyan), var(--gold));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .station-card p {
      color: var(--glass-bg);
      margin-bottom: 1.5rem;
      line-height: 1.6;
    }
    
    .station-stats {
      display: flex;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    
    .station-stats span {
      background: rgba(255,255,255,0.1);
      padding: 0.4rem 1rem;
      border-radius: 20px;
      font-size: 0.9rem;
      color: rgba(255,255,255,0.8);
    }
    
    .btn-explore {
      display: inline-block;
      background: linear-gradient(135deg, var(--cyan), var(--gold));
      color: #000;
      padding: 0.8rem 2rem;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 700;
      transition: all var(--duration) var(--ease);
    }
    
    .btn-explore:hover {
      transform: scale(1.05);
      box-shadow: 0 0 30px rgba(251,191,36,0.5);
    }
    
    @media (max-width: 768px) {
      .stations-hub {
        grid-template-columns: 1fr;
        padding: 0 1rem;
      }
    }

    /* ===== 旅程介紹 ===== */
    .journey-intro {
      text-align: center;
      padding: 3rem 2rem;
      margin-bottom: 3rem;
      background: var(--glass-bg);
      backdrop-filter: blur(var(--blur));
      border-radius: 24px;
      border: 1px solid var(--header-border);
    }

    .journey-title {
      font-size: 2.5rem;
      font-weight: 800;
      background: linear-gradient(90deg, var(--cyan), var(--magenta));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 1.5rem;
    }

    .journey-subtitle {
      font-size: 1.2rem;
      opacity: 0.85;
    }
    /* ===== 響應式設計 ===== */
    @media (max-width: 768px) {
      .content-wrapper {
        padding: 1rem;
      }

      .hero {
        padding: 32px 1rem;
      }

      .hero-title {
        font-size: 2rem;
      }

      .gfun-balance-display {
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem 1.5rem;
      }

      .balance-amount {
        font-size: 2rem;
      }

      .journey-intro {
        padding: 32px 1rem;
      }

      .journey-title {
        font-size: 1.8rem;
      }
    .playground-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.playground-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border-radius: 24px;
  padding: 32px;
  border: 1px solid var(--header-border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  transition: all 0.4s var(--ease);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.playground-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--gold));
}

.playground-card:hover {
  transform: translateY(-8px) scale(1.02);
  background: var(--glass-hover);
  box-shadow: 0 0 40px rgba(255,255,255,0.2);
}
.gfun-balance-hero {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(var(--blur));
  padding: 1.5rem 3rem;
  border-radius: 50px;
  border: 2px solid rgba(255,255,255,0.3);
  position: relative;
  z-index

.playground-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 15px var(--cyan));
  animation: float 3s ease-in-out infinite;
}
.playground-badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
    /* ===== 遊戲篩選器 ===== */
    .game-filter {
      background: var(--glass-bg);
      backdrop-filter: blur(var(--blur));
      border-radius: 24px;
      padding: 32px;
      border: 1px solid var(--header-border);
      text-align: center;
      margin-top: 3rem;
      margin-bottom: 3rem;
    }

    .game-filter h3 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      background: linear-gradient(90deg, var(--cyan), var(--magenta));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .filter-buttons {
      display: flex;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .filter-btn {
      background: rgba(255,255,255,0.1);
      color: #fff;
      padding: 0.8rem 1.5rem;
      border-radius: 50px;
      border: 1px solid var(--header-border);
      cursor: pointer;
      font-weight: 600;
      transition: all var(--duration) var(--ease);
      font-size: 1rem;
    }

    .filter-btn:hover {
      background: rgba(255,255,255,0.2);
      transform: translateY(-3px);
    }

    .filter-btn.active {
      background: linear-gradient(135deg, var(--cyan), var(--gold));
      color: #000;
      border: none;
    }
    
    /* ===== 遊戲彈窗樣式 ===== */
.game-modal {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.95);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-dropdown-l1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.game-modal.active {
  opacity: 1;
}

.game-modal-content {
  max-width: 1200px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 3rem;
  position: relative;
  animation: slideUp 0.5s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.game-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(239,68,68,0.2);
  border: 2px solid rgba(239,68,68,0.3);
  color: #ef4444;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

.game-close-btn:hover {
  background: rgba(239,68,68,0.3);
  transform: rotate(90deg);
}


.game-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981, var(--cyan), #8b5cf6, var(--magenta));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    margin-bottom: 16px;
  }

.game-subtitle {
  font-size: 1.2rem;
  color: var(--glass-bg);
}
    .game-canvas {
      width: 100%;
      min-height: 450px;
      background: linear-gradient(135deg, var(--littleg-pink), var(--littleg-yellow));
      border-radius: var(--radius);
      padding: 2rem;
      position: relative;
      overflow: hidden;
    }

    .game-score {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: rgba(255,255,255,0.9);
      padding: 0.8rem 1.5rem;
      border-radius: 50px;
      font-weight: 700;
      font-size: 1.1rem;
      color: var(--littleg-character);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

#current-score.score-bounce {
  animation: scoreBounce 0.6s ease;
}

@keyframes scoreBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.game-area {
  background: rgba(255,255,255,0.02);
  border-radius: 20px;
  padding: 32px;
}

.game-feedback {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 32px 3rem;
  border-radius: 20px;
  font-size: 2rem;
  font-weight: 800;
  z-index: 10001;
  animation: feedbackPop 2s ease forwards;
}

.game-feedback.success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
}

.game-feedback.error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
}

@keyframes feedbackPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.8);
  }
}


    @keyframes fadeInOut {
      0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
      10%, 90% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .line-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1rem;
      border-radius: 12px;
      transition: all var(--duration) var(--ease);
    }

    .line-container:hover {
      background: rgba(255,255,255,0.1);
      transform: scale(1.05);
    }



.btn--primary:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(56,189,248,0.5);
}

/* 隱藏遊戲卡片 */
.playground-card.hidden {
  display: none;
}
    /* ===== 響應式設計（篩選器） ===== */
    @media (max-width: 768px) {
      .filter-buttons {
        flex-direction: column;
      }

      .filter-btn {
        width: 100%;
      }

      .game-modal-content {
        width: 95%;
      }

    .stations-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 3rem;
      margin-bottom: 4rem;
    }

    .station-card {
      background: var(--glass-bg);
      backdrop-filter: blur(var(--blur));
      border-radius: 24px;
      padding: 2.5rem;
      border: 1px solid var(--header-border);
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
      transition: all 0.4s var(--ease);
      position: relative;
      overflow: hidden;
    }
        .station-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--gold));
    }

    .station-card:hover {
      transform: translateY(-8px);
      background: var(--glass-hover);
      box-shadow: 0 0 40px rgba(255,255,255,0.15);
    }

    .station-number {
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, var(--cyan), var(--magenta));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      font-weight: 800;
      color: #000;
      box-shadow: 0 4px 12px rgba(56,189,248,0.4);
    }

    .station-icon {
      font-size: 4rem;
      margin-bottom: 1.5rem;
      filter: drop-shadow(0 0 15px var(--cyan));
    }

    .station-title {
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      background: linear-gradient(90deg, var(--cyan), var(--gold));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .station-description {
      font-size: 1rem;
      line-height: 1.7;
      opacity: 0.85;
      margin-bottom: 2rem;
    }
    .station-card:hover {
      transform: translateY(-8px);
      background: var(--glass-hover);
      box-shadow: 0 0 40px rgba(255,255,255,0.15);
    }

    .station-number {
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, var(--cyan), var(--magenta));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      font-weight: 800;
      color: #000;
      box-shadow: 0 4px 12px rgba(56,189,248,0.4);
    }

    .station-icon {
      font-size: 4rem;
      margin-bottom: 1.5rem;
      filter: drop-shadow(0 0 15px var(--cyan));
    }

    .station-title {
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      background: linear-gradient(90deg, var(--cyan), var(--gold));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .station-description {
      font-size: 1rem;
      line-height: 1.7;
      opacity: 0.85;
      margin-bottom: 2rem;
    }
    /* ===== 響應式設計（站點網格） ===== */
    @media (max-width: 768px) {
      .station-card {
        padding: 2rem;
      }

      .station-number {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
      }

      .station-icon {
        font-size: 3rem;
      }

      .feature-grid {
        grid-template-columns: 1fr;
      }
          /* ===== 遊樂場網格 ===== */
    .playground-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
    }

    .playground-card {
      background: var(--glass-bg);
      backdrop-filter: blur(var(--blur));
      border-radius: 24px;
      padding: 32px;
      border: 1px solid var(--header-border);
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
      transition: all 0.4s var(--ease);
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .playground-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--gold));
    }

    .playground-card:hover {
      transform: translateY(-8px) scale(1.02);
      background: var(--glass-hover);
      box-shadow: 0 0 40px rgba(255,255,255,0.2);
    }

    .playground-icon {
      font-size: 4rem;
      margin-bottom: 1.5rem;
      filter: drop-shadow(0 0 15px var(--cyan));
      animation: float 3s ease-in-out infinite;
    }

    .playground-card h3 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      background: linear-gradient(90deg, var(--cyan), var(--gold));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .playground-card p {
      font-size: 1rem;
      opacity: 0.85;
      margin-bottom: 1.5rem;
    }

    .playground-badge {
      display: inline-block;
      padding: 0.4rem 1rem;
      border-radius: 20px;
      font-size: 0.9rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
    }

    .playground-badge.beginner {
      background: linear-gradient(135deg, #22c55e, #10b981);
      color: #000;
    }

    .playground-badge.intermediate {
      background: linear-gradient(135deg, var(--cyan), #0ea5e9);
      color: #000;
    }

    .playground-badge.advanced {
      background: linear-gradient(135deg, var(--gold), #f59e0b);
      color: #000;
    }

    .instructions {
      font-size: 0.9rem;
      opacity: 0.7;
      margin-bottom: 1.5rem;
      font-style: italic;
    }

    .game-btn {
      background: linear-gradient(135deg, var(--cyan), var(--gold));
      color: #000;
      padding: 0.8rem 2rem;
      border-radius: 50px;
      font-weight: 700;
      border: none;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: all var(--duration) var(--ease);
      font-size: 1rem;
    }

    .game-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 0 25px rgba(56,189,248,0.5);
    }

    /* 隱藏遊戲卡片 */
    .playground-card.hidden {
      display: none;
    }
        /* ===== 響應式設計（遊樂場） ===== */
    @media (max-width: 1024px) {
      .playground-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      }
    }

    @media (max-width: 768px) {
      .playground-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
      }

      .playground-icon {
        font-size: 3rem;
      }
    }
@keyframes skyDrift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Typography */
h1, h2, h3, h4 {
  background: linear-gradient(90deg, var(--littleg-accent-pink), var(--littleg-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
  letter-spacing: 1px;
  margin: 0 0 var(--spacing-md) 0;
}

.littleg-main-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  text-shadow: 3px 3px 6px rgba(255, 255, 255, 0.8);
  letter-spacing: 2px;
  margin-bottom: var(--spacing-lg);
}

.section-title {
  font-size: 2rem;
  margin-bottom: var(--spacing-md);
}

.bottom-title {
  font-size: 2rem;
  margin-bottom: var(--spacing);
}

/* Layout Components */
.playground-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  min-height: 600px;
}
/* 🎯 左側邊欄 */
.game-sidebar {
  background: white;
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  position: sticky;
  top: 20px;
  height: fit-content;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

/* 分數顯示區 */
.sidebar-score {
  background: linear-gradient(135deg, #ffe4f1, #fff7b0);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.score-icon {
  font-size: 48px;
  animation: bounce 2s infinite;
}

.score-info {
  flex: 1;
}

.score-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
}

.score-number {
  font-size: 32px;
  font-weight: 800;
  color: #2E9FFF; 
  line-height: 1;
}

.score-unit {
  font-size: 14px;
  color: #6b7280;
  font-weight: 600;
}
/* 側邊欄區塊 */
    .sidebar-section {
      background: rgba(255,255,255,0.95);
      border-radius: var(--radius);
      padding: 1.5rem;
      margin-bottom: 1.5rem;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

.sidebar-section:last-of-type {
  border-bottom: none;
}
    /* Hero Section */
    .playground-hero {
      text-align: center;
      padding: 3rem 2rem 2rem;
      position: relative;
    }
    .hero-subtitle {
      font-size: 1.1rem;
      margin-bottom: 1.5rem;
      opacity: 0.9;
    }

    .gfun-balance-hero {
      display: inline-block;
      background: rgba(255,255,255,0.9);
      padding: 1rem 2.5rem;
      border-radius: 50px;
      box-shadow: 0 8px 32px rgba(139,75,140,0.2);
      margin-bottom: 1.5rem;
    }

    .gfun-balance-hero .label {
      font-size: 0.85rem;
      opacity: 0.7;
      margin-bottom: 0.3rem;
    }

    .gfun-balance-hero .amount {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 800;
      background: linear-gradient(90deg, var(--cyan), var(--gold));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* 🎯 篩選系統容器 */
    .playground-container {
      display: flex;
      max-width: 1400px;
      margin: 0 auto;
      gap: 2rem;
      padding: 0 2rem 3rem;
    }
    .sidebar-buttons {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

.sidebar-btn {
  background: var(--glass-bg);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  font-size: 14px;
  font-weight: 600;
  color: #4a4a4a;
  text-align: left;
}

    .sidebar-btn:hover {
      background: rgba(139,75,140,0.1);
      border-color: var(--littleg-character);
      transform: translateX(5px);
    }

    .sidebar-btn.active {
      background: linear-gradient(135deg, var(--littleg-character), var(--magenta));
      color: white;
      border-color: var(--magenta);
      box-shadow: 0 4px 12px rgba(139,75,140,0.3);
    }

    .btn-icon {
      font-size: 1.5rem;
      flex-shrink: 0;
    }

    .btn-label {
      flex: 1;
      text-align: left;
    }

    .btn-badge {
      background: rgba(255,255,255,0.9);
      color: var(--littleg-character);
      padding: 0.2rem 0.6rem;
      border-radius: 12px;
      font-size: 0.75rem;
      font-weight: 700;
      min-width: 24px;
      text-align: center;
    }

    .sidebar-btn.active .btn-badge {
      background: rgba(255,255,255,0.95);
      color: var(--littleg-character);
    }

    /* 難度特殊樣式 */
    .sidebar-btn.beginner:not(.active) {
      border-color: rgba(34,197,94,0.3);
    }

    .sidebar-btn.intermediate:not(.active) {
      border-color: rgba(251,191,36,0.3);
    }

    .sidebar-btn.advanced:not(.active) {
      border-color: rgba(239,68,68,0.3);
    }

    /* 重設按鈕 */
    .reset-btn {
      width: 100%;
      background: linear-gradient(135deg, var(--cyan), var(--magenta));
      color: white;
      border: none;
      border-radius: 16px;
      padding: 1rem;
      font-weight: 700;
      font-size: 1rem;
      cursor: pointer;
      transition: all var(--duration) var(--ease);
      font-family: 'Nunito', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    .reset-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 20px rgba(56,189,248,0.4);
    }

    .reset-btn span {
      font-size: 1.3rem;
    }

    .tab-btn {
      background: rgba(255,255,255,0.8);
      border: 2px solid var(--littleg-character);
      color: var(--littleg-character);
      padding: 0.8rem 1.5rem;
      border-radius: 50px;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      transition: all var(--duration) var(--ease);
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: 'Nunito', sans-serif;
    }

    .tab-btn:hover {
      background: var(--littleg-character);
      color: white;
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(139,75,140,0.3);
    }
    .tab-btn.hidden {
      display: none;
    }

    .tab-btn .emoji {
      font-size: 1.5rem;
    }

    /* Tab 內容 */
    .tab-content {
      display: none;
      animation: fadeUp 0.6s ease-out;
    }

    .tab-content.active {
      display: block;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .game-controls {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 2rem;
    }

    .game-btn {
      background: linear-gradient(135deg, var(--cyan), var(--magenta));
      color: white;
      border: none;
      padding: 1rem 2rem;
      border-radius: 50px;
      font-weight: 700;
      font-size: 1.05rem;
      cursor: pointer;
      transition: all var(--duration) var(--ease);
      font-family: 'Nunito', sans-serif;
    }

    .game-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 20px rgba(56,189,248,0.4);
    }

    .game-btn:active {
      transform: scale(0.95);
    }

    /* 遊戲特定樣式 */
    .ruler-game-area,
    .weight-game-area,
    .map-game-area,
    .color-game-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2rem;
    }

    .ruler-object {
      width: 100%;
      max-width: 500px;
      height: 70px;
      background: linear-gradient(90deg, var(--cyan), var(--magenta));
      border-radius: 12px;
      position: relative;
      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .ruler-object:hover {
      transform: scale(1.02);
    }

    .ruler-tool {
      width: 100%;
      max-width: 500px;
      height: 50px;
      background: rgba(255,255,255,0.9);
      border: 3px solid var(--littleg-character);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1rem;
    }

    .ruler-number {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--littleg-character);
    }

    .measurement-display {
      text-align: center;
      font-size: 1.8rem;
      font-weight: 800;
      color: var(--littleg-character);
      margin: 1.5rem 0;
    }

    /* 響應式設計 */
    @media (max-width: 1024px) {
      .playground-container {
        flex-direction: column;
      }

      .game-filter-system {
        width: 100%;
        position: static;
      }

      .sidebar-section {
        margin-bottom: 1rem;
      }

      .sidebar-buttons {
        flex-direction: row;
        flex-wrap: wrap;
      }

      .sidebar-btn {
        flex: 1;
        min-width: 140px;
      }
    }

    @media (max-width: 768px) {
      .playground-hero {
        padding: 2rem 1rem 1.5rem;
      }
      .hero-title {
        font-size: 1.8rem;
      }
      .tab-btn {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
      }
      .game-container {
        padding: 1.5rem;
      }
      .game-canvas {
        min-height: 350px;
        padding: 1.5rem;
      }

      .sidebar-btn {
        min-width: 100%;
      }
    }

.sidebar-btn.active {
  background: linear-gradient(135deg, #38bdf8, #d946ef);
  color: white;
  border-color: #2E9FFF; 
  box-shadow: 0 4px 12px rgba(217, 70, 239, 0.3);
}

.sidebar-btn.beginner:not(.active) {
  background: #fff7b0;
}

.sidebar-btn.intermediate:not(.active) {
  background: #cce9ff;
}

.sidebar-btn.advanced:not(.active) {
  background: #e4d4f4;
}

.btn-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.btn-label {
  flex: 1;
}

.btn-badge {
  background: rgba(255,255,255,0.3);
  padding: 2px 8px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
}

.sidebar-btn.active .btn-badge {
  background: rgba(255,255,255,0.25);
}

/* 重設按鈕 */
.sidebar-reset {
  width: 100%;
  background: #ffd9a8;
  border: none;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #4a4a4a;
  margin-bottom: 12px;
  transition: all var(--duration) var(--ease);
}

.sidebar-reset:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.reset-icon {
  font-size: 18px;
}

/* 重新開始按鈕 */
.sidebar-restart {
  width: 100%;
  background: linear-gradient(135deg, #d946ef, #38bdf8);
  border: none;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: white;
  transition: all var(--duration) var(--ease);
  box-shadow: 0 4px 12px rgba(217, 70, 239, 0.3);
}

.sidebar-restart:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(217, 70, 239, 0.5);
}

.restart-icon {
  font-size: 18px;
}

/* 🎮 右側遊戲區域 */
.game-main {
  background: white;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* 分類標題 */
.category-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px;
  background: linear-gradient(135deg, #d6f5d6, #cce9ff);
  border-radius: 16px;
}

.category-badge {
  background: white;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  color: #4a4a4a;
}

/* 遊戲卡片網格 */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

/* 📱 響應式設計 */
@media (max-width: 1024px) {
  .playground-layout {
    grid-template-columns: 1fr;
  }
  
  .game-sidebar {
    position: static;
    max-height: none;
  }
}

@media (max-width: 768px) {
  .games-grid {
    grid-template-columns: 1fr;
  }
}
.littleg-generator-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

 .section { padding: 4rem 0; box-sizing: border-box; width: 100%; overflow: hidden;
 }

.section:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: var(--littleg-shadow-strong);
  background: rgba(255,255,255,0.97);
  border-color: rgba(245,212,122,0.5);
}


/* Button Component */
.button {
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  border-radius: var(--radius);
  transition: all var(--duration) var(--ease);
}

.button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease, opacity 0.8s;
  opacity: 0;
}

.button:hover::before {
  width: 320%;
  height: 320%;
  opacity: 0.2;
}

.button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  transition: left 0.8s ease;
}

.button:hover::after {
  left: 100%;
}

.button:hover:not(:disabled) {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 0 45px rgba(245,212,122,0.8);
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gfun-status-card {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing);
  padding: var(--spacing-md) var(--spacing-lg);
  margin-top: var(--spacing-md);
}

.status-label {
  font-size: 1rem;
  color: var(--page-text);
  font-weight: 600;
}

.status-unit {
  font-size: 1rem;
  color: var(--littleg-accent-pink);
  font-weight: 700;
}

/* Stepper */
.stepper-container {
  margin-bottom: var(--spacing-xl);
}

.stepper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0 var(--spacing-md);
}

.stepper::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 10%;
  right: 10%;
  height: 3px;
  background: linear-gradient(90deg, var(--littleg-accent-pink), var(--littleg-cyan), var(--littleg-accent-green));
  opacity: 0.3;
  z-index: 0;
}

.step {
  flex: 1;
  text-align: center;
  color: #94a3b8;
  font-weight: 600;
  position: relative;
  transition: all 0.4s ease;
  z-index: 1;
}

.step-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-xs);
  filter: grayscale(100%);
  transition: all 0.4s ease;
}

.step-label {
  font-size: 0.9rem;
  margin-top: var(--spacing-xs);
}

.gfun-balance-label {
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
  display: block;
  margin-bottom: 0.5rem;
}

.step.active {
  color: var(--littleg-accent-pink);
}

.step.active .step-icon {
  filter: grayscale(0%);
  transform: scale(1.2);
  animation: bounce 0.6s ease;
}


/* Preview Grid */
.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--spacing);
  margin-top: var(--spacing-md);
}

.preview-grid img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.preview-grid img:hover {
  transform: scale(1.05) rotate(2deg);
}


.badge.premium {
  background: linear-gradient(135deg, #a855f7, #9333ea);
  color: #fff;
  box-shadow: 0 2px 8px rgba(168,85,247,0.4);
}

.cost-badge {
  background: var(--littleg-gold);
  color: var(--littleg-accent-pink);
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 0.85rem;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(245,212,122,0.4);
}

/* Generate Button */
.generate-section {
  text-align: center;
  margin: var(--spacing-xl) 0;
}
.btn-icon {
  font-size: 1.5rem;
}

.btn-cost {
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Loading State */
.loading-state {
  text-align: center;
  padding: var(--spacing-xl);
  animation: fadeIn 0.6s ease;
}


.loading-animation {
  position: relative;
  margin-bottom: var(--spacing-lg);
}

.spinner {
  width: 60px;
  height: 60px;
  border: 5px solid rgba(139,75,140,0.2);
  border-top-color: var(--littleg-gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--spacing-md);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-clouds {
  display: flex;
  justify-content: center;
  gap: var(--spacing);
  font-size: 2rem;
}

.loading-clouds .cloud {
  animation: float 2s ease-in-out infinite;
}

.loading-clouds .cloud:nth-child(2) {
  animation-delay: 0.3s;
}

.loading-clouds .cloud:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}



.loading-hint {
  font-size: 0.95rem;
  color: #64748b;
}

/* Results Container */
.results-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.result-card {
  background: #fff;
  border-radius: var(--radius);
  padding: var(--spacing-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  transition: all 0.4s ease;
  animation: slideIn 0.6s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.result-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--littleg-shadow-strong);
}

.result-card img {
  width: 100%;
  border-radius: 16px;
  margin-bottom: var(--spacing-md);
}

.result-actions {
  display: flex;
  gap: var(--spacing);
}

.result-actions button {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

.download-btn {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
}

.download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37,99,235,0.4);
}


/* Gallery CTA */
.ai-gallery-cta {
  text-align: center;
  background: linear-gradient(135deg, var(--littleg-accent-peach), var(--littleg-accent-pink));
  border: 3px solid var(--littleg-gold);
  padding: var(--spacing-xl);
}

.cta-content {
  margin-bottom: var(--spacing-lg);
}

.cta-description {
  font-size: 1.1rem;
  color: var(--page-text);
  margin-bottom: var(--spacing-lg);
  line-height: 1.8;
}

.cta-features {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  font-weight: 700;
  color: var(--littleg-accent-pink);
}

.feature-icon {
  font-size: 4rem;
  display: block;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 20px var(--cyan, #38bdf8));
  transition: transform 0.3s var(--ease);
}

/* Recharge CTA */
.recharge-cta {
  background: linear-gradient(135deg, #fef3c7, #fde047);
  border-color: var(--littleg-gold);
}

.recharge-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.recharge-card {
  position: relative;
  padding: var(--spacing-lg);
  text-decoration: none;
  color: var(--page-text);
}

.recharge-card .badge {
  position: absolute;
  top: var(--spacing);
  right: var(--spacing);
}

.recharge-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing);
}

.recharge-amount {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--littleg-gold);
  margin: var(--spacing) 0;
}

.recharge-price {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--littleg-accent-pink);
}

/* Particles & Decorations */
.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
  border-radius: 50%;
  animation: particleFloat 14s ease-in-out infinite;
  opacity: 0.6;
}

@keyframes particleFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
  50% { transform: translateY(-50px) scale(1.4); opacity: 0.9; }
}

.leaf {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, var(--littleg-leaf) 40%, transparent 70%);
  border-radius: 50%;
  opacity: 0.7;
  animation: leafDrift 28s linear infinite;
}

@keyframes leafDrift {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 0.9; }
  50% { transform: translateY(50vh) rotate(180deg); opacity: 0.6; }
  100% { transform: translateY(100vh) rotate(360deg); opacity: 0.2; }
}

/* Responsive Design */
@media (max-width: 768px) {
  body {
    padding: var(--spacing-md);
  }
      .stations-preview {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 0 1rem;
      }
      
      .preview-icon {
        font-size: 2.5rem;
      }
      
      .preview-title {
        font-size: 1rem;
      }
      
  .section {
    padding: var(--spacing-lg);
    margin: var(--spacing-md) auto;
  }
  
  .littleg-main-title {
    font-size: 2rem;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  .stepper {
    padding: 0;
  }
  
  .step-label {
    font-size: 0.75rem;
  }
  
  .step-icon {
    font-size: 2rem;
  }
  
 .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; width: 100%; box-sizing: border-box;
 }

  .cta-features {
    gap: var(--spacing-lg);
  }
  
  .recharge-options {
    grid-template-columns: 1fr;
  }
}


/* Print Styles */
@media print {
  .particles-container,
  .generate-btn,
  .glg-nav,
  .upload-area,
  .ai-gallery-cta,
  .recharge-cta {
    display: none;
  }
  
  .section {
    box-shadow: none;
    border: 1px solid var(--header-border);
    page-break-inside: avoid;
  }
}
.game-stats-bar {
  display: flex;
  justify-content: space-around;
  padding: 2rem;
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  margin-bottom: 2rem;
  gap: 1rem;
}

.stat-item {
  text-align: center;
  flex: 1;
}


.stat-value {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(90deg, #38bdf8, #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 完成畫面統計卡片 */
.completion-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 2rem 0;
}
.stat-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.completion-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.btn--secondary {
  flex: 1;
  padding: 1rem 2rem;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.2);
  color: #fff;
  font-weight: 700;
  border-radius: 50px;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

.btn--secondary:hover {
  background: rgba(255,255,255,0.15);
  transform: translateY(-2px);
}

/* GFun 更新動畫 */
.gfun-update-animation {
  animation: gfunPulse 0.6s ease;
}
/* ═══════════════════════════════════════════════════════════
   💰 GFun 脈衝動畫
   ═══════════════════════════════════════════════════════════ */

@keyframes gfunPulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(56, 189, 248, 0.3);
  }
  50% {
    box-shadow: 0 4px 16px rgba(56, 189, 248, 0.6);
  }
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  border: none;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

.dot.active {
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  width: 32px;
  border-radius: 6px;
}
.lg-hero__cta a,
.lg-btn {
  pointer-events: auto;
  cursor: pointer;
  position: relative;
  z-index: 10;
}
.lg-flow__step {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s ease;
  
  /* 更明显的边框 */
  border: 2px solid rgba(251, 191, 36, 0.4); /* gold 色 */
  border-radius: 16px;
  padding: 1rem 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.03);
}

.lg-flow__step:hover {
  transform: translateY(-3px) scale(1.05);
  border-color: rgba(251, 191, 36, 1); /* 实心 gold */
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(251, 191, 36, 0.1));
  box-shadow: 0 8px 20px rgba(251, 191, 36, 0.3);
}
/* 确保箭头不可点击 */
.lg-flow__arrow {
  pointer-events: none;
  margin: 0 0.5rem;
}
.autoplay-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem auto 0;
  padding: 0.75rem 1.5rem;
  background: var(--glass-bg);
  border: 1px solid var(--header-border);
  border-radius: 24px;
  color: #fff;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

.autoplay-toggle:hover {
  background: var(--glass-hover);
}


/* Before & After 預覽疊加層 */
.preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15,23,42,0.98);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
  z-index: 10;
  padding: 1rem;
}

.style-card:hover .preview-overlay {
  opacity: 1;
}

.preview-overlay img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  object-fit: contain;
}

/* 生成面板優化 */
.generation-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border-radius: 24px;
  padding: 32px;
  border: 1px solid var(--header-border);
  margin: 2rem 0;
}

.prompt-label {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--gold);
}

#text-prompt {
  width: 100%;
  padding: 1.25rem;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,0.2);
  background: var(--glass-bg);
  color: #fff;
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
  margin-bottom: 1.5rem;
  font-family: inherit;
  transition: all 0.3s var(--ease);
}

#text-prompt:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 20px rgba(251,191,36,0.2);
}

#text-prompt::placeholder {
  color: rgba(255,255,255,0.5);
}

/* 控制選項行 */
.control-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.control-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.control-item label {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}

.control-item select,
.control-item input[type="text"] {
  padding: 0.75rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 0.95rem;
  transition: all 0.3s var(--ease);
}

.control-item select:focus,
.control-iteminput:focus-visible {
  outline: none;
  border-color: var(--cyan) !important;
  background: rgba(255,255,255,0.15);
}

#selected-style-display {
  background: rgba(251,191,36,0.2);
  border-color: var(--gold);
  font-weight: 600;
  cursor: not-allowed;
}

/* 資訊顯示行 */
.info-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  background: var(--glass-bg);
  border-radius: 12px;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 2rem;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.info-label {
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
}

.cost-value {
  color: var(--gold);
  font-size: 1.1rem;
  font-weight: 700;
}

.balance-value {
  color: var(--cyan) !important;
  font-size: 1.1rem;
  font-weight: 700;
}

/* 按鈕組 */
.button-group {
  display: flex;
  gap: 2rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.btn-clear,
.btn--secondary,
.btn-generate {
  padding: 0.875rem 2rem;
  border-radius: 50px;
  border: none;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.btn-clear {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}

.btn-clear:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

.btn--secondary {
  background: rgba(56,189,248,0.2);
  color: var(--cyan) !important;
  border: 1px solid var(--cyan) !important;
}

.btn--secondary:hover {
  background: rgba(56,189,248,0.3);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(56,189,248,0.3);
}

.btn-generate {
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  color: #000;
  position: relative;
  overflow: hidden;
}

.btn-generate:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(251,191,36,0.5);
}

.btn-generate:active {
  transform: scale(0.98);
}

.btn-generate.loading {
  pointer-events: none;
  opacity: 0.7;
}

.btn-generate.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.model-info-panel {
  margin: 3rem 0;
}
.service-card.popular {
  border: 2px solid var(--gold);
}
.service-card.premium {
  border: 2px solid var(--magenta);
}


.popular-badge,
.premium-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: linear-gradient(135deg, var(--gold), #ff6b6b);
  color: #000;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(251,191,36,0.4);
}

.premium-badge {
  background: linear-gradient(135deg, var(--magenta), var(--cyan));
  color: #fff;
}

.service-card p {
  color: rgba(255,255,255,0.8);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.service-features {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 0;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
}

.service-features span {
  text-align: left;
  padding-left: 0.5rem;
}

.service-price {
  color: var(--gold);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}


.service-price small {
  font-size: 0.7rem;
  color: var(--cyan) !important;
  font-weight: 600;
}

/* 結果預覽區 */
.result-preview {
  margin: 3rem 0;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border-radius: 24px;
  padding: 32px;
  border: 1px solid var(--header-border);
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 1.5rem 0;
}



.result-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s var(--ease);
}

.result-item:hover img {
  transform: scale(1.05);
}

.result-actions {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .control-row {
    grid-template-columns: 1fr;
  }
  
  .info-row {
    flex-direction: column;
    align-items: center;
  }
  
  .button-group {
    flex-direction: column;
  }
  
  .button-group button {
    width: 100%;
  }
  
  .service-grid {
    grid-template-columns: 1fr;
  }
}

/* 移動端優化 - 點擊顯示預覽 */
@media (max-width: 768px) {
  .style-card.show-preview .preview-overlay {
    opacity: 1;
  }
  
  .style-card:hover .preview-overlay {
    opacity: 0;
  }
}


.style-preview {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 0 10px rgba(56,189,248,0.3));
}

.style-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.style-cost {
  color: var(--gold);
  font-weight: 600;
  font-size: 0.95rem;
}

.style-description {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  margin-top: 0.5rem;
}

.style-example {
  margin-top: 1rem;
  border-radius: 12px;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.3s var(--ease);
}

.style-card:hover .style-example {
  opacity: 1;
  transform: scale(1);
}

.style-example img {
  width: 100%;
  height: auto;
  display: block;
}



/* 產品圖片 */
.product-image-main {
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
}

.product-image-main img {
  width: 100%;
  height: auto;
  display: block;
}

.product-thumbnails {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.thumbnail {
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--duration) var(--ease);
}

.thumbnail.active {
  border-color: var(--cyan, #38bdf8);
}

.thumbnail:hover {
  transform: scale(1.05);
}

.thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}



/* 主容器 */
.ai-gen-wrapper {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
}

/* 產品網格 */
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

/* GFun 餘額區 */
.gfun-balance-section {
  background: linear-gradient(135deg, var(--cyan, #38bdf8), var(--gold, #fbbf24));
  padding: 1.5rem;
  border-radius: 16px;
  margin: 2rem 0;
  text-align: center;
}

.gfun-value {
  font-size: 2.5rem;
  margin: 0 0.5rem;
}

.gfun-cost-info {
  font-size: 1.1rem;
  color: #000;
  margin-top: 0.5rem;
}

.generator-input-section {
  margin-bottom: 1.5rem;
}

.gfun-recharge-link {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;
  background: rgba(0,0,0,0.2);
  border-radius: 50px;
  color: #000;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all var(--duration) var(--ease);
}

.gfun-recharge-link:hover {
  background: rgba(0,0,0,0.3);
  transform: scale(1.05);
}
/* 變體選擇器 */
.variant-selector {
  margin: 1.5rem 0;
}

.variant-selector label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
/* 加入購物車按鈕 */
.btn-add-to-cart {
  width: 100%;
  padding: 1.25rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--magenta, #d946ef), var(--cyan, #38bdf8));
  color: #fff;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  margin-top: 1rem;
}

.btn-add-to-cart:hover {
  transform: scale(1.05);
}

/* AI 生成器區域 */
.generator-input-section {
  margin-bottom: 2rem;
}

.input-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.ai-prompt-input {
  width: 100%;
  padding: 1rem;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 1rem;
  resize: vertical;
  font-family: inherit;
}

.char-counter {
  text-align: right;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
}

/* 風格網格 */
.style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.style-card {
  padding: 1.5rem;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  text-align: center;
}

.style-card:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-4px);
}

.style-card.selected {
  border-color: var(--cyan, #38bdf8);
  background: rgba(56,189,248,0.1);
}

.style-name {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.style-desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
}

/* 參數控制 */
.generator-params {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.param-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.param-select {
  width: 100%;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--header-border, rgba(255,255,255,0.1));
  color: #fff;
  font-size: 1rem;
}

/* 生成按鈕 */
.generate-btn {
  width: 100%;
  padding: 1.5rem 2rem;
  font-size: 1.2rem;
  font-weight: 700;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--cyan, #38bdf8), var(--gold, #fbbf24));
  color: #000;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.generate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 載入狀態 */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255,255,255,0.2);
  border-top-color: var(--cyan, #38bdf8);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.ai-prompt-input {
  width: 100%;
  padding: 1rem;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 1rem;
  resize: vertical;
}



.generate-btn:hover:not(:disabled) {
  transform: scale(1.05);
}



.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255,255,255,0.2);
  border-top-color: var(--cyan, #38bdf8);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}



.loading-content {
  text-align: center;
}


        .is-skeleton { position: relative; overflow: hidden; }
        .is-skeleton .skel-thumb {
          width: 100%; aspect-ratio: 1/1; border-radius: 12px; margin-bottom: 10px;
          background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06));
          background-size: 200% 100%;
          animation: skel-shimmer 1.2s linear infinite;
          border: 1px solid rgba(255,255,255,.14);
        }
        .is-skeleton .skel-line {
          height: 10px; border-radius: 999px;
          background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06));
          background-size: 200% 100%;
          animation: skel-shimmer 1.2s linear infinite;
          margin: 8px auto 0;
        }
        .is-skeleton .skel-w-40{ width:40%; }
        .is-skeleton .skel-w-50{ width:50%; }
        .is-skeleton .skel-w-60{ width:60%; }
        .is-skeleton .skel-w-65{ width:65%; }
        .is-skeleton .skel-w-70{ width:70%; }
        .is-skeleton .skel-w-80{ width:80%; }
        @keyframes skel-shimmer { 0%{ background-position: -120% 0;} 100%{ background-position: 120% 0;} }

/* 💳 GFun Balance */
.gfun-balance {
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: var(--font-weight-extrabold);
  background: var(--gradient-gfun);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pulseGlow 3s infinite;
  text-align: center;
  margin: 2rem 0;
}
.gfun-balance-icon {
  font-size: 2.5rem;
  color: var(--market-gold);
  filter: drop-shadow(0 0 8px rgba(251,191,36,0.4));
}

.gfun-balance-value {
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 20px rgba(56,189,248,0.4);
}


/* 🌈 Divider */
.gfun-divider {
  height: 3px;
  margin: 32px auto;
  max-width: 600px;
  background: linear-gradient(90deg, transparent, var(--market-cyan) 25%, var(--market-magenta) 50%, var(--market-gold) 75%, transparent);
  position: relative;
  overflow: hidden;
}

.gfun-divider::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, var(--market-cyan), var(--market-gold));
  animation: dividerFlow 3s linear infinite;
}

@keyframes dividerFlow {
  from { left: -50%; }
  to { left: 100%; }
}

/* 🌟 Unified Grid */
.gfun-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1300px;
  margin: 0 auto 3rem;
}

.feature-card .icon { font-size: 3rem; margin-bottom: 1.5rem; color: var(--market-cyan); }
.feature-card .title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; }
.feature-card .desc { color: #94a3b8; font-size: 1rem; line-height: 1.6; }
.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    rgba(56, 189, 248, 0.5), 
    rgba(192, 132, 252, 0.5)
  );
}


/* 💎 Topup Card */
.topup-card {
  background: linear-gradient(150deg, rgba(255,255,255,0.08), rgba(255,255,255,0.15));
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 2.5rem;
  text-align: center;
  box-shadow: 0 8px 30px rgba(251,191,36,0.15);
  transition: var(--transition-base);
}

.topup-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(251,191,36,0.3);
}

.topup-card .icon { font-size: 3rem; margin-bottom: 1.5rem; color: var(--market-gold); }
.topup-card .title { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.75rem; }
.topup-card .amount { font-size: 2rem; font-weight: 800; color: var(--market-gold); margin-bottom: 1.5rem; }

.gfun-button {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: 40px;
  border: none;
  background: linear-gradient(135deg, var(--market-cyan), var(--market-magenta));
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}

.gfun-button:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(56,189,248,0.4);
}

/* ✨ Floating Blobs */
.floating-blobs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.25;
  animation: blobMotion 20s ease-in-out infinite alternate;
}

.blob-1 { width: 440px; height: 440px; background: var(--market-cyan); top: 10%; left: 8%; }
.blob-2 { width: 360px; height: 360px; background: var(--market-magenta); top: 40%; right: 12%; }
.blob-3 { width: 400px; height: 400px; background: var(--market-gold); bottom: 8%; left: 45%; }

@keyframes blobMotion {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, -20px) scale(1.1); opacity: 0.3; }
  100% { transform: translate(40px, 20px) scale(0.9); opacity: 0.25; }
}

@media (max-width: 768px) {
  .gfun-hero { padding: 3rem 1rem; }
  .gfun-balance { font-size: 1.8rem; flex-direction: column; }
  .gfun-grid { grid-template-columns: 1fr; }
}
.glass-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(56,189,248,0.3);
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}
.style-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg);
}
.style-placeholder svg {
  color: rgba(255,255,255,0.3);
}
.style-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  color: white;
}
.style-badge.hot {
  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
  animation: pulseGlow 2s infinite;
}

.style-badge.new {
  background: linear-gradient(135deg, #79A23E, #5a7a2e);
}

.style-badge.pro {
  background: linear-gradient(135deg, var(--magenta), #a855f7);
}

.glass-card.selected {
  border-color: var(--cyan) !important;
  background: linear-gradient(135deg, rgba(56,189,248,0.2), rgba(251,191,36,0.2));
  box-shadow: 0 0 20px rgba(56,189,248,0.4);
}
/* ===== 風格預覽區域 ===== */
.style-preview {
  width: 100%;
  aspect-ratio: 1;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.style-preview-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(56,189,248,0.1), rgba(217,70,239,0.1));
}

.style-emoji {
  font-size: 2.5rem;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

.style-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.glass-card:hover .style-preview::before {
  opacity: 1;
}
.style-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.style-desc {
  font-size: 0.9rem;
  color: #64748b;
  margin: var(--spacing-xs) 0;
}
.style-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--spacing);
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}
.style-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.25rem;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.style-name {
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}


.style-cost {
  font-size: 0.75rem;
  color: var(--gold);
  font-weight: 600;
}

.style-icon {
    font-size: 2rem; 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
@media (max-width: 768px){
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    gap: 8px;
  }
  
  .style-name {
    font-size: 0.75rem;
  }
}
/* ===== 自定義風格圖標 ===== */
.custom-style-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(56,189,248,0.2), rgba(251,191,36,0.2));
  position: relative;
}
/* ===== 自定義風格輸入框 ===== */
.custom-style-input {
  background: var(--beige-glass);
  backdrop-filter: blur(var(--blur));
  border-radius: 24px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  border: 2px solid var(--gold);
  animation: slideDown 0.3s ease;
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.custom-style-input label {
  display: block;
  font-weight: 600;
  color: #000;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.custom-style-input input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid rgba(0,0,0,0.2);
  border-radius: 12px;
  font-size: 1rem;
  background: rgba(255,255,255,0.9);
  color: #000;
  transition: all var(--duration) var(--ease);
}

.custom-style-inputinput:focus-visible {
  outline: none;
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,0.2);
}

.hint-text {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: rgba(0,0,0,0.6);
  font-style: italic;
}


.custom-style-icon svg {
  color: rgba(255,255,255,0.6);
  transition: all var(--duration) var(--ease);
}

.style-card:hover .custom-style-icon svg {
  color: var(--gold);
  transform: rotate(90deg) scale(1.2);
}

    /* ===== 圖生圖主界面 (米色玻璃質感) ===== */
    .image-to-image-panel {
      background: var(--beige-glass);
      backdrop-filter: blur(var(--blur));
      border-radius: 24px;
      padding: 32px;
      border: 1px solid rgba(0,0,0,0.2);
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
      margin-bottom: 3rem;
    }

       /* ===== 上傳區域 ===== */
    .upload-section {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      margin-bottom: 2rem;
    }

   .upload-area {
    border: 2px dashed rgba(56,189,248,0.5);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    background: rgba(56,189,248,0.05);
    position: relative;
  }

  .upload-area.dragover {
    border-color: var(--gold);
    background: rgba(251,191,36,0.1);
    transform: scale(1.02);
  }

  .upload-area.has-files {
    border-color: var(--cyan) !important;
    background: rgba(56,189,248,0.1);
  }

  .upload-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.6;
    transition: all var(--duration) var(--ease);
  }

  .upload-area:hover .upload-icon {
    opacity: 1;
    transform: scale(1.1);
  }

  .file-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
  }
  .file-preview-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s var(--ease);
  }

  .file-preview-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  }

  .file-preview-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
  }

  .file-remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    background: rgba(239,68,68,0.9);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration) var(--ease);
    opacity: 0;
  }

  .file-preview-item:hover .file-remove-btn {
    opacity: 1;
  }

  .file-remove-btn:hover {
    background: rgba(239,68,68,1);
    transform: scale(1.1);
  }

  .file-info {
    padding: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .suggestions-box {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(251,191,36,0.1);
    border-left: 4px solid var(--gold);
    border-radius: 8px;
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    display: none;
  }

  .suggestions-box.active {
    display: block;
    animation: fadeIn 0.3s ease;
  }

    .login-required {
      background: var(--glass-bg);
      backdrop-filter: blur(var(--blur));
      border-radius: var(--radius);
      padding: 4rem;
      text-align: center;
      border: 1px solid var(--header-border);
      max-width: 700px;
      margin: 6rem auto;
    }

.login-btn{
  height:36px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.9);
}
.login-btn:hover{border-color:rgba(0,0,0,0.14);}



    .login-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 0 40px rgba(56,189,248,0.6);
    }
    .uploaded-preview {
      width: 160px;
      height: 160px;
      border-radius: 12px;
      overflow: hidden;
      position: relative;
    }

    .uploaded-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .remove-image {
      position: absolute;
      top: 8px;
      right: 8px;
      background: rgba(0,0,0,0.7);
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

/* Hero Section */
.hero {
  text-align: center;
  padding: 6rem 2rem 4rem;
  position: relative;
  overflow: hidden;
}
 /* ===== GFun 餘額顯示 ===== */
.gfun-balance-display {
background: var(--glass-bg);
      backdrop-filter: blur(var(--blur));
      border-radius: 24px;
      border: 1px solid var(--header-border);
      text-align: center;
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  max-width: 600px;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
  padding: 3rem;
}

.balance-amount {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 800;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 1rem 0;
}
/* Tab Navigation */
.style-category {
  margin-bottom: 35px;
  background: rgba(255,255,255,0.02);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.05);
}

.tab-btn.active {
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  color: #000;
  box-shadow: 0 4px 12px rgba(56,189,248,0.4);
}

.tab-content.active {
  display: block;
}
.api-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 3rem auto;
}

.stat-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border-radius: 24px;
  border: 1px solid var(--header-border);
  padding: 2rem;
  text-align: center;
  transition: all var(--duration) var(--ease);
}

.stat-card:hover {
  transform: translateY(-6px);
  background: linear-gradient(145deg, rgba(56,189,248,0.1), rgba(217,70,239,0.1));
  box-shadow: 0 0 30px rgba(255,255,255,0.1);
}

.stat-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.stat-number {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.3rem;
}

/* 錯誤提示 */
.error-message {
  background: #ef4444;
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  animation: slideIn 0.3s ease;
}

.error-icon {
  font-size: 1.5rem;
}

.error-text {
  flex: 1;
}

.error-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.3s;
}

.error-close:hover {
  background: rgba(255,255,255,0.2);
}
/* 結果顯示區 */
.result-section {
  margin-top: 3rem;
  padding: 2rem;
  background: rgba(255,255,255,0.05);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.result-header h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}


.result-content {
  border-radius: 12px;
  overflow: hidden;
}

.generated-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* 歷史記錄 */
.generation-history {
  margin-top: 4rem;
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.history-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  transition: all var(--duration) var(--ease);
  cursor: pointer;
}

.history-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.history-item img {
  width: 100%;
  height: auto;
  display: block;
}

.history-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: #fff;
}

.history-time {
  font-size: 0.85rem;
  font-weight: 600;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .ai-gen-wrapper {
    padding: 1rem;
  }

  .gfun-display {
    font-size: 1.2rem;
  }

  .gfun-value {
    font-size: 2rem;
  }

  .generator-params {
    grid-template-columns: 1fr;
  }

  .style-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
    padding: 0.75rem;
  }

  .style-card {
    padding: 0.5rem;
  }

  .style-emoji {
    font-size: 2rem;
  }

  .style-title {
    font-size: 0.75rem;
  }

  .style-grid.style-cost {
    font-size: 0.7rem;
  }
 .hero { padding: 5rem 1rem 3rem; }
 .container { padding: 1rem; }
 .model-selector { grid-template-columns: 1fr; }
 .tab-buttons { flex-direction: column; }
      .features-grid { grid-template-columns: 1fr; }
      .ai-img-container {padding: 0 1rem;}
      .product-details-wrapper {padding: 2rem;}
    .quick-nav {flex-direction: column;} 
    .style-grid {
      grid-template-columns: 1fr;
    }
  .history-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .result-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
}

/* 載入動畫 */
.balance-loaded {
  animation: fadeIn 0.5s ease;
}

.product-description p {
  margin-bottom: 1rem;
}

.product-description ul,
.product-description ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.product-description li {
  margin-bottom: 0.5rem;
}

/* 充值按鈕 */
.btn-recharge {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.5rem;
  background: linear-gradient(135deg, var(--gold), var(--cyan));
  color: #000;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all var(--duration) var(--ease);
}

.btn-recharge:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(251,191,36,0.4);
}

/* 強調文字樣式 */
.description-en strong,
.description-zh strong {
  font-weight: 700;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.style-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border: 2px solid var(--header-border);
  border-radius: 24px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s var(--ease);
  position: relative;
}

.style-card:hover {
  transform: translateY(-6px);
  background: var(--glass-hover);
  border-color: var(--cyan) !important;
  box-shadow: 0 0 25px rgba(56,189,248,0.3);
}

.style-card.selected {
  background: linear-gradient(145deg, rgba(56,189,248,0.15), rgba(217,70,239,0.15), rgba(251,191,36,0.15));
  border-color: var(--gold);
  box-shadow: 0 0 30px rgba(251,191,36,0.4);
}

.style-card.selected::after {
  content: '✓';
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--gold);
  color: #000;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.style-preview {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.style-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.style-cost {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.9rem;
}

/* Custom Style Input */
.custom-style-input {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border: 1px solid var(--header-border);
  border-radius: 24px;
  padding: 2rem;
  margin: 2rem 0;
}

.custom-style-input label {
  display: block;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.custom-style-input input {
  width: 100%;
  background: var(--glass-bg);
  color: #fff;
  border: 1px solid var(--header-border);
  border-radius: 12px;
  padding: 12px;
  font-size: 1rem;
  outline: none;
  transition: all var(--duration);
}

.custom-style-inputinput:focus-visible {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 15px rgba(56,189,248,0.3);
}

.hint-text {
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* Control Panel */
.control-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border: 1px solid var(--header-border);
  border-radius: 24px;
  padding: 32px;
  margin: 2rem 0;
}

.control-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.control-item label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.control-item select,
.control-item input[type="range"] {
  width: 100%;
  background: var(--glass-bg);
  color: #fff;
  border: 1px solid var(--header-border);
  border-radius: 8px;
  padding: 0.5rem;
  outline: none;
  cursor: pointer;
}

.control-item select:focus {
  border-color: var(--cyan) !important;
}

.control-item input[type="range"] {
  padding: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--gold));
  border: none;
}

/* Prompt Box */
.prompt-box {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border: 1px solid var(--header-border);
  border-radius: 24px;
  padding: 32px;
  margin: 2rem 0;
}

.prompt-box textarea {
  width: 100%;
  min-height: 120px;
  background: var(--glass-bg);
  color: #fff;
  border: 1px solid var(--header-border);
  border-radius: 12px;
  padding: 1rem;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: all var(--duration);
}

.prompt-box textarea:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 20px rgba(56,189,248,0.3);
}

.info-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
  flex-wrap: wrap;
  gap: 2rem;
}

.info-row span {
  font-size: 0.95rem;
  opacity: 0.9;
}

.info-row strong {
  color: var(--gold);
  font-weight: 700;
}

/* Buttons */
.button-group {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}



.btn--primary:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(56,189,248,0.4);
}

.btn--primary:hover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.25), transparent);
  animation: ripple 0.6s ease-out;
}

#uploadArea {
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

#uploadArea.drag-over {
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
}
.btn-clear {
  background: rgba(255,255,255,0.1);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  border: 1px solid var(--header-border);
  cursor: pointer;
  transition: all var(--duration);
}

.btn-clear:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--magenta);
}

/* Prompt Library */
.prompt-library {
  margin: 3rem 0;
}

.library-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.prompt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.prompt-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border: 1px solid var(--header-border);
  border-radius: 24px;
  padding: 2rem;
  transition: all 0.4s var(--ease);
  cursor: pointer;
}

.prompt-card:hover {
  transform: translateY(-6px);
  background: var(--glass-hover);
  box-shadow: 0 0 25px rgba(255,255,255,0.15);
}

.prompt-title {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--gold);
}

.prompt-text {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.btn-copy {
  background: linear-gradient(135deg, var(--magenta), var(--cyan));
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all var(--duration);
}

.btn-copy:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(217,70,239,0.4);
}

/* Messages */
.loading,
.success,
.error {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border: 1px solid var(--header-border);
  border-radius: 24px;
  padding: 32px 3rem;
  font-size: 1.2rem;
  font-weight: 600;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: fadeUp 0.3s ease;
}

.loading {
  border-color: var(--cyan) !important;
  color: var(--cyan) !important;
}

.success {
  border-color: #22c55e;
  color: #22c55e;
}

.error-message {
  background: #ef4444;
  color: #fff;
  padding: 1rem;
  border-radius: 12px;
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.result-section {
  margin-top: 2rem;
  padding: 2rem;
  background: rgba(255,255,255,0.05);
  border-radius: 16px;
}

.generated-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.service-description {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 32px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border-radius: 24px;
  border: 1px solid var(--header-border);
  text-align: left;
}

.description-en {
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.9);
  margin-bottom: 1.5rem;
  font-family: var(--font-body);
  font-weight: 400;
}

.description-zh {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.75);
  font-family: var(--font-body);
}

/* 核心優勢標籤 */
.feature-tags {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 2rem 0;
}

.tag {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: linear-gradient(135deg, rgba(56,189,248,0.2), rgba(217,70,239,0.2));
  border: 1px solid var(--header-border);
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  transition: all var(--duration) var(--ease);
  cursor: default;
}

.tag:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  box-shadow: 0 8px 24px rgba(56,189,248,0.3);
}

/* 遊戲化系統樣式 */
.level-system {
  padding: 32px;
  margin-bottom: 3rem;
  text-align: center;
}

.level-badge {
  display: inline-block;
  margin-bottom: 1.5rem;
}

.level-number {
  font-size: 4rem;
  font-weight: 800;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

.level-name {
  font-size: 1.5rem;
  color: var(--gold);
  font-weight: 700;
}

.progress-bar {
  width: 100%;
  max-width: 500px;
  height: 20px;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  margin: 1rem auto;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  transition: width 0.5s ease;
}

.progress-text {
  color: rgba(255,255,255,0.7);
  margin-top: 0.5rem;
}

/* 任務卡片 */
.missions-grid {
  margin: 3rem 0;
}

.missions-grid h3 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mission-card {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  margin-bottom: 1.5rem;
  transition: all var(--duration) var(--ease);
}

.mission-card:hover {
  transform: translateX(5px);
  background: rgba(255,255,255,0.08);
}

.mission-card.completed {
  opacity: 0.6;
}

.mission-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.mission-details {
  flex: 1;
}

.mission-details h4 {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

.mission-details p {
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
}

.mission-reward {
  color: var(--gold);
  font-weight: 700;
  font-size: 1.2rem;
}

/* 徽章系統 */
.badges-section {
  margin: 3rem 0;
}

.badges-section h3 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.badge-card {
  padding: 32px;
  text-align: center;
  transition: all 0.4s;
}

.badge-card.unlocked {
  border: 2px solid var(--gold);
  box-shadow: 0 0 30px rgba(251,191,36,0.3);
}

.badge-card.locked {
  opacity: 0.4;
}

.badge-card:hover.unlocked {
  transform: translateY(-8px) scale(1.05);
}

.badge-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
}

.badge-card h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.badge-card p {
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
}

/* 禮品兌換 */
.gifts-section {
  margin: 3rem 0;
}

.gifts-section h3 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gifts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.gift-card {
  padding: 2rem;
  text-align: center;
  transition: all 0.4s;
}

.gift-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 40px rgba(56,189,248,0.3);
}

.gift-card img {
  width: 100%;
  border-radius: 16px;
  margin-bottom: 1.5rem;
}

.gift-card h4 {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.gift-price {
  color: var(--gold);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 1rem 0;
}

/* 分享獎勵 */
.referral-section {
  padding: 2.5rem;
  margin: 3rem 0;
  text-align: center;
}

.referral-section h3 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.referral-code {
  margin: 2rem 0;
}

.code-display {
  display: flex;
  gap: 2rem;
  max-width: 400px;
  margin: 1rem auto;
}

.code-display input {
  flex: 1;
  padding: 1rem;
  background: var(--glass-bg);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}

.referral-stats {
  display: flex;
  gap: 3rem;
  justify-content: center;
  margin-top: 2rem;
}

.referral-stats .stat {
  text-align: center;
}

.referral-stats .stat-value {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.referral-stats .stat-label {
  display: block;
  color: rgba(255,255,255,0.7);
  margin-top: 0.5rem;
}


/* Tab 系統 */
.main-tabs {
  display: flex;
  gap: 2rem;
  justify-content: center;
  padding: 32px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.main-tab {
  background: var(--glass-bg);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  font-weight: 600;
}

.main-tab.active {
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  color: #000;
}

/* =========================================================
   GFun 超級中心完整樣式系統 - 續
========================================================= */

/* 充值卡片網格 */
.recharge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 3rem auto 0;
}

.recharge-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  padding: 32px 1.5rem;
  border-radius: 24px;
  padding: 32px 1.5rem;
  border: 1px solid var(--header-border);
  text-align: center;
  transition: all var(--duration) var(--ease);
  position: relative;
  overflow: hidden;
}

.recharge-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}

.recharge-card:hover {
  transform: translateY(-8px) scale(1.02);
  background: linear-gradient(145deg, 
    rgba(56,189,248,0.1) 10%, 
    rgba(217,70,239,0.1) 60%, 
    rgba(251,191,36,0.1) 90%
  );
  box-shadow: 0 0 40px rgba(255,255,255,0.2);
}

.recharge-card:hover::before {
  opacity: 1;
}

.recharge-card.featured {
  border: 2px solid var(--gold);
  box-shadow: 0 0 40px rgba(251,191,36,0.3);
}

/* 卡片徽章 */
.card-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255,255,255,0.1);
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.card-badge.popular {
  background: linear-gradient(135deg, var(--gold), var(--magenta));
  color: #000;
}


/* 卡片內容 */
.card-icon {
  font-size: 4rem;
  margin-bottom: 24px;
  display: inline-block;
  filter: drop-shadow(0 4px 12px rgba(56, 189, 248, 0.3));
  animation: floatIcon 3s ease-in-out infinite;
}
/* 價格顯示 */
.price {
  font-size: 3rem;
  font-weight: 800;
  margin: 1rem 0;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.price .currency {
  font-size: 1.5rem;
  vertical-align: super;
}

.credits {
  font-size: 1.3rem;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.bonus {
  font-size: 0.9rem;
  color: var(--magenta);
  font-weight: 600;
}

/* 功能列表 */
.features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  text-align: left;
}

.features li {
  padding: 0.5rem 0;
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
}

/* ===== 服務網格 ===== */

.service-card {
  background: rgba(255,255,255,0.08);
  padding: 2rem;
  border-radius: 24px;
  border: 1px solid var(--header-border);
  transition: all 0.4s var(--ease);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.service-desc {
  color: rgba(255,255,255,0.75);
  font-size: 0.95rem;
}
.service-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.style-list,
.feature-list,
.report-types {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  text-align: left;
}

.style-list li,
.feature-list li,
.report-types li {
  padding: 0.5rem 0;
  color: rgba(255,255,255,0.8);
  font-size: 0.95rem;
}

/* 專業服務網格 */
.pro-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.pro-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  padding: 2.5rem;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.4s;
}

.pro-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 40px rgba(56,189,248,0.3);
}

.pro-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pro-card p {
  color: var(--gold);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.pro-card ul {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}

.pro-card li {
  padding: 0.5rem 0;
  color: rgba(255,255,255,0.8);
}

/* 使用記錄 */
.history-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 32px;
}

.history-filters {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.filter-btn {
  background: var(--glass-bg);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  padding: 0.6rem 1.5rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

.filter-btn.active {
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  color: #000;
  border-color: transparent;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.05);
  transition: all var(--duration) var(--ease);
}

.history-item:hover {
  background: var(--glass-bg);
  transform: translateX(5px);
}

.item-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.item-details {
  flex: 1;
}

.item-title {
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.item-date {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
}

.item-amount {
  font-weight: 700;
  font-size: 1.2rem;
}

.item-amount.positive {
  color: #22c55e;
}

.item-amount.negative {
  color: var(--magenta);
}

/* 開發者文檔網格 */
.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.doc-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  padding: 32px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  text-decoration: none;
  color: #fff;
  transition: all 0.4s;
}

.doc-card:hover {
  transform: translateY(-8px);
  background: var(--glass-hover);
  box-shadow: 0 0 40px rgba(56,189,248,0.3);
}

.doc-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

.doc-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.doc-card p {
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
}


/* 餘額統計 */
.balance-stats {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin: 2rem 0;
}

.stat {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cyan) !important;
}


/* 響應式設計 */
@media (max-width: 1024px) {
  .recharge-grid,
  .service-grid,
  .pro-services-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  body.gfun-hub-page {
    padding-top: 120px;
  }
  .nav-links {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .main-tabs {
    padding: 1rem;
  }
  
  .main-tab {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }
  
  .recharge-grid,
  .service-grid,
  .pro-services-grid,
  .docs-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .balance-amount {
    font-size: 3rem;
  }
  
  .balance-stats {
    flex-direction: column;
    gap: 2rem;
  }
  
  .price {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px){
  .tab-content {
    padding: 1rem;
  }
  
  .recharge-card,
  .service-card,
  .pro-card {
    padding: 2rem;
  }
  
  .card-icon,
  .service-icon {
    font-size: 3rem;
  }
}

/* 載入動畫 */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: var(--cyan) !important;
  animation: spin 1s linear infinite;
}
  .gfun-pricing-section {
    background: var(--dark-bg);
    padding: 3rem 2rem;
    margin: 2rem 0;
  }

  .gfun-price-container {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur));
    border-radius: var(--radius);
    border: 1px solid var(--header-border);
    padding: 2rem;
    text-align: center;
    transition: all var(--duration) var(--ease);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
  }

  .gfun-price-container:hover {
    background: var(--glass-hover);
    transform: translateY(-6px);
    box-shadow: 0 0 30px rgba(56,189,248,0.3);
  }

  .gfun-price-label {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
  }

  .gfun-price-amount {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    background: linear-gradient(90deg, var(--cyan), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0.5rem 0;
    animation: pulseGlow 3s infinite;
  }

  .gfun-price-unit {
    font-size: 1.2rem;
    color: var(--gold);
    font-weight: 600;
  }

  .gfun-price-description {
    color: rgba(255,255,255,0.75);
    margin-top: 1rem;
    font-size: 0.95rem;
  }

  .gfun-tier-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--cyan), var(--magenta));
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    margin-top: 1rem;
  }
  
  #gfun-pricing-{{ section.id }} .gfun-highlights {
  max-width: 1200px;
  margin: 1.25rem auto 1.75rem;
}

#gfun-pricing-{{ section.id }} .gfun-highlights__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#gfun-pricing-{{ section.id }} .gfun-highlight {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--glass-bg, rgba(255,255,255,0.06));
  border: 1px solid rgba(56,189,248,0.22);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

#gfun-pricing-{{ section.id }} .gfun-highlight__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(56,189,248,0.35), rgba(251,191,36,0.25));
  font-size: 18px;
}

#gfun-pricing-{{ section.id }} .gfun-highlight__title {
  font-weight: 800;
  color: rgba(255,255,255,0.95);
  line-height: 1.2;
  margin-bottom: 4px;
}

#gfun-pricing-{{ section.id }} .gfun-highlight__desc {
  color: rgba(255,255,255,0.78);
  font-size: 0.92rem;
  line-height: 1.45;
}

@media (max-width: 768px) {
  #gfun-pricing-{{ section.id }} .gfun-highlights__grid {
    grid-template-columns: 1fr;
  }
}

  @keyframes pulseGlow {
    0%, 100% {
      filter: drop-shadow(0 0 20px rgba(56,189,248,0.3));
    }
    50% {
      filter: drop-shadow(0 0 40px rgba(139,92,246,0.6));
    }
  }

  @media (max-width: 768px) {
    .gfun-pricing-section {
      padding: 2rem 1rem;
    }
    .gfun-price-amount {
      font-size: 2rem;
    }
  }
/* Tab 內容 */
.tab-content {
  display: none;
  padding: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.tab-content.active {
  display: block;
}

.simple-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15,23,42,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--header-border);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}


/* Hero */

.market-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1.5rem;
}

.market-subtitle {
  font-size: 1.3rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 2rem;
}

.promo-banner {
  display: inline-block;
  background: linear-gradient(135deg, var(--magenta), var(--gold));
  padding: 0.75rem 2rem;
  border-radius: 50px;
  color: #000;
  font-weight: 700;
  font-size: 1.1rem;
  animation: pulse 2s ease-in-out infinite;
}

.glass-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px;
}

/* 充值包网格 */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

.glg-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border-radius: 24px;
  padding: 32px;
  border: 1px solid var(--header-border);
  transition: all 0.4s var(--ease);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--gold));
}

.card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(56, 189, 248, 0.2); background: rgba(255,255,255,0.08);
}

.product-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, var(--magenta), var(--gold));
  color: #000;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.85rem;
  font-weight: 700;
}

.product-icon {
  font-size: 3.5rem;
  display: block;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 20px var(--cyan));
}

.product-name {
  background: linear-gradient(135deg, var(--cyan, #38bdf8), var(--gold, #fbbf24));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}

.product-price {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.product-value {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1.5rem;
}

.featured-product {
  list-style: none;
  margin-bottom: 1.5rem;
  padding: 0;
  text-align: left;
}

.featured-product li {
  padding: 0.5rem 0;
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.featured-product li::before {
  content: '✓';
  color: var(--green);
  font-weight: 700;
  font-size: 1.2rem;
}

.buy-button {
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  color: #000;
  border: none;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.buy-button:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(251,191,36,0.5);
}

/* 简化的服务说明 */
.services-intro {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border-radius: 24px;
  padding: 3rem;
  margin-bottom: 3rem;
  border: 1px solid var(--header-border);
  text-align: center;
}

.section-title {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 2rem;
}

.service-category {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border-radius: 24px;
  padding: 3rem 2rem;
  margin-bottom: 4rem;
  border: 1px solid var(--header-border);
}

.service-category:hover {
  background: var(--glass-hover);
  transform: translateY(-4px);
}



.category-name {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.category-range {
  color: var(--gold);
  font-weight: 700;
  font-size: 1.2rem;
}

.cta-btn {
  padding: 1rem 2.5rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s var(--ease);
}

.cta-primary {
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  color: #000;
}

.cta-secondary {
  background: var(--glass-bg);
  color: #fff;
  border: 1px solid var(--header-border);
}

.cta-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(56,189,248,0.4);
}

@media (max-width: 768px) {
  .simple-nav {
    flex-direction: column;
  }
  
  .products-grid,
  .service-category {
    grid-template-columns: 1fr;
  }
}

/* 響應式優化 */
@media (max-width: 768px) {
  .service-description {
    padding: 2rem;
    margin: 1.5rem 1rem;
  }
  
  .description-en {
    font-size: 1rem;
  }
  
  .description-zh {
    font-size: 0.95rem;
  }
  
  .feature-tags {
    gap: 0.5rem;
  }
  
  .tag {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }



        /* ===== 提示詞輸入 ===== */
    .prompt-input {
      width: 100%;
      min-height: 120px;
      background: transparent;
      border: none;
      color: #000;
      font-size: 1rem;
      font-family: inherit;
      resize: none;
      outline: none;
    }

    .prompt-input::placeholder {
      color: rgba(0,0,0,0.5);
    }

        /* ===== 參數控制 ===== */
    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      margin-top: 1.5rem;
    }

    .control-btn {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      background: transparent;
      border: none;
      color: rgba(0,0,0,0.7);
      font-size: 0.9rem;
      cursor: pointer;
      transition: all var(--duration) var(--ease);
      border-radius: 8px;
    }

    .control-btn:hover {
      color: #000;
      background: rgba(0,0,0,0.05);
    }

    .control-icon {
      width: 18px;
      height: 18px;
    }

    /* ===== 生成按鈕 ===== */
    .generate-btn {
      width: 100%;
      padding: 1rem 2rem;
      background: linear-gradient(135deg, var(--cyan), var(--gold));
      color: #000;
      border: none;
      border-radius: 50px;
      font-size: 1.1rem;
      font-weight: 700;
      cursor: pointer;
      transition: all var(--duration) var(--ease);
      margin-top: 1.5rem;
      position: relative;
      overflow: hidden;
    }

    .generate-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 24px rgba(56,189,248,0.4);
    }

    .generate-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }


        /* ===== Loading 動畫 ===== */
    .loading {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(0,0,0,0.3);
      border-top-color: #000;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }




    /* ===== 結果展示區域 ===== */
.results-section {
  padding: clamp(2rem, 5vw, 6rem) clamp(1rem, 3vw, 2rem);
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(var(--blur));
}

.results-title {
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 2rem;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.result-image-card {
  background: var(--glass-bg);
  border-radius: 24px;
  padding: 1rem;
  border: 1px solid var(--header-border);
  transition: all var(--duration) var(--ease);
  position: relative;
  overflow: hidden;
}

.result-image-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(56,189,248,0.3);
  background: var(--glass-hover);
}

.result-image-card img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  display: block;
}

.download-btn {
  width: 100%;
  padding: 0.75rem;
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  color: #000;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

.download-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(56,189,248,0.4);
}

.results-actions {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn--secondary {
  padding: 0.75rem 2rem;
  background: var(--glass-bg);
  border: 1px solid var(--header-border);
  border-radius: 50px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  backdrop-filter: blur(var(--blur));
}

.btn--secondary:hover {
  background: var(--glass-hover);
  transform: translateY(-2px);
}


.btn--primary:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(56,189,248,0.4);
}

/* ===== 風格選擇器 ===== */
.style-selector {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.style-chip {
  padding: 0.5rem 1rem;
  background: rgba(0,0,0,0.1);
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 20px;
  color: #000;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

.style-chip:hover {
  background: rgba(56,189,248,0.2);
  border-color: rgba(56,189,248,0.5);
  transform: translateY(-2px);
}

.style-chip.active {
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  border-color: transparent;
  color: #000;
  font-weight: 600;
}