:root {
  --cream: #FDF8F2;
  --warm-white: #FFFCF8;
  --peach: #F9E8D8;
  --rose: #F2C4B0;
  --terracotta: #D4785A;
  --deep-rose: #C05A42;
  --brown: #8B5E4A;
  --text-dark: #3D2B1F;
  --text-mid: #6B4F3F;
  --text-light: #A08070;
  --sage: #8FAF8A;
  --light-sage: #D6E8D3;
  --gold: #C8963A;
  --light-gold: #F5E4C0;
  --border: #E8D5C4;
  --shadow: rgba(140,80,50,0.12);
}

* { margin:0; padding:0; box-sizing:border-box; }

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family:'Noto Sans TC',sans-serif;
  background:var(--cream);
  color:var(--text-dark);
  min-height:100vh;
  font-size:16px;
  line-height:1.7;
}

/* ===== NAV ===== */
nav {
  background:var(--warm-white);
  border-bottom:1.5px solid var(--border);
  padding:0 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
  position:sticky;
  top:0;
  z-index:100;
}

.logo {
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'Noto Sans TC',sans-serif;
  font-size:20px;
  font-weight:700;
  color:var(--terracotta);
}

.logo-icon {
  width:38px; height:38px;
  background:linear-gradient(135deg,var(--peach),var(--rose));
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
}

.nav-links { display:flex; gap:2px; align-items:center; flex-wrap:nowrap; }

.nav-btn {
  padding:6px 10px;
  border-radius:20px;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
  cursor:pointer;
  border:none;
  background:transparent;
  color:var(--text-mid);
  transition:all 0.2s;
  font-family:'Noto Sans TC',sans-serif;
}

.nav-btn:hover { background:var(--peach); color:var(--terracotta); }
.nav-btn.active { background:var(--terracotta); color:white; }
.nav-btn.outline { border:1.5px solid var(--terracotta); color:var(--terracotta); }
.nav-btn.outline:hover { background:var(--terracotta); color:white; }

.nav-user {
  font-size:13px; font-weight:500; color:var(--text-mid);
  padding:7px 12px; background:var(--peach); border-radius:20px;
  align-items:center; white-space:nowrap;
}

/* ===== HAMBURGER ===== */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:6px; border:none;
  background:transparent; border-radius:8px; transition:background 0.2s;
}
.hamburger:hover { background:var(--peach); }
.hamburger span { display:block; width:22px; height:2px; background:var(--text-mid); border-radius:2px; transition:all 0.25s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display:none; position:fixed; top:64px; left:0; right:0;
  background:var(--warm-white); border-bottom:1.5px solid var(--border);
  padding:0.8rem 1rem; z-index:99;
  flex-direction:column; gap:4px;
  box-shadow:0 4px 16px var(--shadow);
}
.mobile-menu.open { display:flex; }
.mobile-menu .nav-btn { width:100%; text-align:left; padding:12px 14px; border-radius:10px; font-size:15px; }

/* ===== PAGES ===== */
.page { display:none; }
.page.active { display:block; }

/* ===== HERO ===== */
.hero {
  background:linear-gradient(160deg,var(--warm-white) 0%,var(--peach) 60%,var(--rose) 100%);
  padding:4rem 1.5rem 3rem; text-align:center; position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; width:300px; height:300px;
  background:radial-gradient(circle,rgba(242,196,176,0.4) 0%,transparent 70%);
  top:-50px; right:-50px; border-radius:50%;
}
.hero-tag {
  display:inline-block; background:var(--light-sage); color:#3D6B38;
  font-size:14px; font-weight:500; padding:5px 16px; border-radius:20px;
  margin-bottom:1.2rem; letter-spacing:0.5px;
}
.hero h1 {
  font-family:'Noto Sans TC',sans-serif;
  font-size:clamp(28px,5vw,46px);
  font-weight:700; color:var(--text-dark); line-height:1.4; margin-bottom:1rem;
}
.hero h1 span { color:var(--terracotta); }
.hero p { font-size:17px; color:var(--text-mid); max-width:480px; margin:0 auto 2rem; line-height:1.8; }
.hero-cat { animation:float 3s ease-in-out infinite; display:inline-block; font-size:64px; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.hero-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ===== BUTTONS ===== */
.btn-primary {
  background:var(--terracotta); color:white; border:none;
  padding:13px 30px; border-radius:28px; font-size:15px; font-weight:700;
  cursor:pointer; transition:all 0.25s; font-family:'Noto Sans TC',sans-serif;
  box-shadow:0 4px 16px rgba(212,120,90,0.35);
}
.btn-primary:hover { background:var(--deep-rose); transform:translateY(-2px); }
.btn-primary:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
.btn-full { width:100%; }

.btn-secondary {
  background:white; color:var(--terracotta); border:1.5px solid var(--terracotta);
  padding:13px 30px; border-radius:28px; font-size:15px; font-weight:500;
  cursor:pointer; transition:all 0.25s; font-family:'Noto Sans TC',sans-serif;
}
.btn-secondary:hover { background:var(--peach); transform:translateY(-2px); }
.btn-sm-text { white-space:nowrap; padding:9px 16px; font-size:13px; }

.btn-sm {
  padding:7px 14px; border-radius:16px; font-size:13px; font-weight:500;
  cursor:pointer; border:none; font-family:'Noto Sans TC',sans-serif; transition:all 0.2s;
}
.btn-sm.primary { background:var(--terracotta); color:white; }
.btn-sm.primary:hover { background:var(--deep-rose); }
.btn-sm.ghost { background:transparent; border:1px solid var(--border); color:var(--text-mid); }
.btn-sm.ghost:hover { background:var(--peach); border-color:var(--rose); color:var(--terracotta); }
.btn-sm.danger { background:transparent; border:1px solid var(--rose); color:var(--deep-rose); }

/* ===== STATS ===== */
.stats-bar {
  background:white; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:1.5rem 1.5rem; display:flex; justify-content:center; gap:4rem; flex-wrap:wrap;
}
.stat-item { text-align:center; }
.stat-num { font-family:'Noto Sans TC',sans-serif; font-size:36px; font-weight:700; color:var(--terracotta); }
.stat-label { font-size:15px; color:var(--text-light); margin-top:4px; }
.stat-num { font-size:30px; } /* override for lock emoji size */
.stats-login-hint {
  width: 100%;
  text-align: center;
  margin-top: 0.1rem;
}
.stats-login-btn {
  font-size: 20px;
  font-weight: 600;
  color: var(--terracotta);
  background: var(--peach);
  border: 1.5px solid var(--terracotta);
  border-radius: 24px;
  padding: 8px 24px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.3px;
}
.stats-login-btn:hover {
  background: var(--terracotta);
  color: white;
}

/* ===== SECTION ===== */
.section { padding:3rem 1.5rem; max-width:960px; margin:0 auto; }
.section-header { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:2rem; }
.section-title { font-family:'Noto Sans TC',sans-serif; font-size:24px; font-weight:700; color:var(--text-dark); margin-bottom:0.4rem; }
.section-sub { font-size:14px; color:var(--text-light); }
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }

/* ===== INFO CARDS ===== */
.info-card { background:white; border:1px solid var(--border); border-radius:16px; padding:1.4rem; }
.info-card-icon { font-size:36px; margin-bottom:12px; }
.info-card-title { font-weight:700; margin-bottom:8px; font-size:16px; }
.info-card-desc { font-size:14px; color:var(--text-light); line-height:1.7; }

/* ===== MY CIRCLES ===== */
.my-circles-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin-bottom:2rem; }
.my-circle-card { background:white; border:1px solid var(--border); border-radius:16px; padding:1.4rem; transition:all 0.25s; }
.my-circle-card:hover { box-shadow:0 6px 20px var(--shadow); }
.circle-card-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.circle-avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.circle-name { font-weight:700; font-size:15px; color:var(--text-dark); }
.circle-owner-label { font-size:13px; color:var(--text-light); }
.tag { background:var(--peach); color:var(--brown); font-size:12px; padding:3px 10px; border-radius:12px; font-weight:500; }
.tag.sage { background:var(--light-sage); color:#3D6B38; }
.tag.gold { background:var(--light-gold); color:#7A5A18; }
.tag.owner { background:#E8D5F0; color:#6B3E8C; }
.tag.ml-auto { margin-left:auto; }
.circle-meta { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.members-row { display:flex; align-items:center; gap:4px; margin-top:10px; }
.member-dot { width:26px; height:26px; border-radius:50%; background:var(--peach); border:2px solid white; display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--terracotta); font-weight:700; }
.member-dot.empty { background:var(--cream); border:1.5px dashed var(--border); color:var(--text-light); font-size:14px; }
.member-count { font-size:13px; color:var(--text-light); margin-left:4px; }
.progress-bar { height:6px; background:var(--border); border-radius:3px; overflow:hidden; margin-top:8px; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--terracotta),var(--rose)); border-radius:3px; transition:width 0.3s; }
.circle-actions { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }

/* ===== LOCKED STATE ===== */
.locked-state { background:white; border:1.5px dashed var(--border); border-radius:20px; padding:3rem 2rem; text-align:center; max-width:500px; margin:0 auto; }
.locked-icon { font-size:52px; margin-bottom:1rem; }
.locked-title { font-family:'Noto Sans TC',sans-serif; font-size:20px; font-weight:700; color:var(--text-dark); margin-bottom:0.6rem; }
.locked-desc { font-size:14px; color:var(--text-light); line-height:1.9; margin-bottom:1.5rem; }
.locked-steps { text-align:left; background:var(--cream); border-radius:12px; padding:1rem 1.2rem; margin-bottom:1.5rem; }
.locked-step { display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; font-size:14px; color:var(--text-mid); line-height:1.6; }
.locked-step:last-child { margin-bottom:0; }
.step-num { width:22px; height:22px; border-radius:50%; background:var(--terracotta); color:white; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.circle-count-info { font-size:13px; color:var(--text-light); }
.circle-count-info strong { color:var(--terracotta); }

/* ===== CAT GALLERY ===== */
.filter-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:1.5rem; }
.filter-select { width:auto; min-width:130px; font-size:14px; padding:8px 30px 8px 12px; }
.cat-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }
.cat-card { background:white; border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:all 0.25s; }
.cat-card:hover { transform:translateY(-3px); box-shadow:0 8px 20px var(--shadow); }
.cat-img { width:100%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:56px; }
.cat-info { padding:12px 14px; }
.cat-name { font-weight:700; font-size:14px; color:var(--text-dark); margin-bottom:4px; }
.cat-detail { font-size:13px; color:var(--text-light); line-height:1.5; }
.badge { display:inline-block; font-size:11px; padding:3px 8px; border-radius:8px; margin-right:3px; margin-top:4px; font-weight:500; }
.badge.neutered { background:var(--light-sage); color:#3D6B38; }
.badge.unneutered { background:var(--light-gold); color:#7A5A18; }
.badge.tnr { background:#E8D5F0; color:#6B3E8C; }
.badge.pending { background:#FFF0C0; color:#7A5A00; }

/* ===== SHOP ===== */
.shop-hero { background:linear-gradient(135deg,var(--peach),var(--light-gold)); padding:2.5rem 1.5rem; text-align:center; }
.shop-title { font-family:'Noto Sans TC',sans-serif; font-size:26px; font-weight:700; color:var(--text-dark); margin-bottom:0.5rem; }
.shop-sub { font-size:15px; color:var(--text-mid); }
/* 橫式排列 */
.product-grid { display:flex; flex-direction:column; gap:16px; }

.product-card {
  background:white; border:1px solid var(--border); border-radius:16px;
  overflow:hidden; cursor:pointer; transition:all 0.25s;
  display:flex; flex-direction:row; align-items:stretch;
}
.product-card:hover { box-shadow:0 6px 24px var(--shadow); }

/* 贈品 highlight */
.product-card.is-gift {
  background:linear-gradient(135deg, #FFF8F0 0%, #FFF0E4 100%);
  border:2px solid var(--terracotta);
  box-shadow: 0 2px 12px rgba(212,120,90,0.18);
}
.product-card.is-gift:hover { box-shadow:0 6px 24px rgba(212,120,90,0.28); }

.product-img {
  width:220px; min-width:220px; max-width:220px;
  background:#ffffff; display:flex; align-items:center; justify-content:center;
  font-size:52px; padding:12px; box-sizing:border-box; flex-shrink:0;
}
.product-img img { width:100%; height:auto; max-height:200px; display:block; object-fit:contain; background:#ffffff; }
.product-info { padding:18px; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.product-name { font-weight:700; font-size:14px; color:var(--text-dark); margin-bottom:4px; }
.product-desc { font-size:13px; color:var(--text-light); margin-bottom:10px; line-height:1.5; }
.product-price { font-size:18px; font-weight:700; color:var(--terracotta); }
.product-original { font-size:12px; color:var(--text-light); text-decoration:line-through; margin-left:4px; }
.product-price-row { display:flex; align-items:baseline; margin-bottom:6px; }
.group-buy-badge { background:var(--light-sage); color:#3D6B38; font-size:12px; padding:3px 8px; border-radius:8px; font-weight:500; margin-top:4px; display:inline-block; }

/* ===== GROUP BUY BANNER ===== */
.product-card.has-group { border-color: #C8A96E; }
.group-buy-banner {
  background: var(--light-sage);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0 2px;
  color: #3D6B38;
}
.group-buy-banner-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.group-buy-people {
  font-size: 7px;
  opacity: 0.9;
}
.group-buy-people strong {
  font-size: 13px;
  font-weight: 800;
  color: #3D6B38;
}
.group-buy-arrow {
  font-size: 8px;
  opacity: 0.7;
  flex-shrink: 0;
}
.group-buy-deal-price {
  font-size: 13px;
  font-weight: 800;
  color: #3D6B38;
  letter-spacing: -0.5px;
  line-height: 1;
}
.group-buy-saving {
  font-size: 9px;
  opacity: 0.7;
  letter-spacing: 0.2px;
}
.price-secondary {
  font-size: 14px !important;
  color: var(--text-light) !important;
  font-weight: 500 !important;
}

/* ===== FORM ===== */
.form-card { background:white; border:1px solid var(--border); border-radius:20px; padding:2rem; max-width:480px; margin:0 auto; }
.form-card-narrow { max-width:420px; margin:0; }
.form-card-icon-header { text-align:center; margin-bottom:1.5rem; }
.form-title { font-family:'Noto Sans TC',sans-serif; font-size:22px; font-weight:700; color:var(--text-dark); margin-bottom:0.3rem; }
.form-title-sm { font-size:17px; }
.form-sub { font-size:14px; color:var(--text-light); margin-bottom:1.5rem; }
.form-group { margin-bottom:1.3rem; }
.form-label { display:block; font-size:14px; font-weight:500; color:var(--text-mid); margin-bottom:6px; }
.form-input { width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:10px; font-size:15px; font-family:'Noto Sans TC',sans-serif; color:var(--text-dark); background:var(--warm-white); outline:none; transition:border-color 0.2s; }
.form-input:focus { border-color:var(--terracotta); }
.form-select { width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:10px; font-size:15px; font-family:'Noto Sans TC',sans-serif; color:var(--text-dark); background:var(--warm-white); outline:none; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A08070' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
.form-textarea { resize:none; height:80px; }
.form-textarea-sm { resize:none; height:60px; }
.form-hint { font-size:12px; color:var(--text-light); margin-top:4px; }
.input-with-btn { display:flex; gap:8px; }
.input-with-btn .form-input { flex:1; }
.upload-area { border:2px dashed var(--border); border-radius:12px; padding:1.5rem; text-align:center; cursor:pointer; background:var(--cream); transition:border-color 0.2s; }
.upload-area:hover { border-color:var(--terracotta); }
.price-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.notice-box { border-radius:10px; padding:12px 14px; margin-bottom:1.2rem; font-size:14px; line-height:1.8; }
.notice-box.peach { background:var(--peach); color:var(--text-mid); }
.notice-box.sage { background:var(--light-sage); color:#3D6B38; }

/* ===== QR ===== */
.qr-box { width:160px; height:160px; margin:0 auto 1rem; border-radius:12px; overflow:hidden; background:white; border:2px solid var(--border); padding:8px; }
.qr-timer { display:flex; align-items:center; justify-content:center; gap:6px; font-size:13px; color:var(--text-light); margin-bottom:1rem; }
.timer-dot { width:6px; height:6px; border-radius:50%; background:var(--sage); animation:pulse-dot 1s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.7)} }
.qr-note { font-size:13px; color:var(--text-light); padding:0 1rem; line-height:1.7; }

/* ===== MODAL ===== */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(61,43,31,0.5); z-index:200; align-items:center; justify-content:center; padding:1rem; }
.modal-overlay.open { display:flex; }
.modal { background:white; border-radius:20px; padding:2rem; max-width:460px; width:100%; max-height:88vh; overflow-y:auto; position:relative; }
.modal-center { text-align:center; }
.modal-close { position:absolute; top:1rem; right:1rem; background:var(--peach); border:none; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:14px; color:var(--text-mid); display:flex; align-items:center; justify-content:center; }

/* ===== ADMIN ===== */
.admin-login { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 64px); background:var(--cream); padding:2rem 1rem; }
.admin-grid { display:grid; grid-template-columns:210px 1fr; min-height:calc(100vh - 64px); }
.admin-sidebar { background:var(--text-dark); padding:1.5rem 0; overflow-y:auto; }
.admin-logo { padding:0 1.2rem 1.5rem; font-family:'Noto Sans TC',sans-serif; font-size:16px; font-weight:700; color:var(--rose); border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:1rem; }
.admin-menu-item {
  display: flex;
  align-items: center; padding:11px 1.2rem; font-size:14px; color:rgba(255,255,255,0.6); cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:8px; border-left:3px solid transparent; }
.admin-menu-item:hover { background:rgba(255,255,255,0.05); color:white; }
.admin-menu-item.active { color:var(--rose); border-left-color:var(--terracotta); background:rgba(212,120,90,0.1); }
.admin-logout { margin-top:2rem; }
.admin-content { background:var(--cream); padding:2rem; overflow-y:auto; }
.admin-section { display:none; }
.admin-section.active { display:block; }
.admin-header { font-family:'Noto Sans TC',sans-serif; font-size:22px; font-weight:700; color:var(--text-dark); margin-bottom:1.5rem; }
.admin-sub-header { font-size:17px; }
.admin-notice { border-radius:10px; padding:10px 14px; margin-bottom:1.2rem; font-size:14px; }
.admin-notice.sage { background:var(--light-sage); color:#3D6B38; }
.metrics-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; margin-bottom:2rem; }
.metrics-3col { grid-template-columns:repeat(3,1fr); }
.metric-card { background:white; border:1px solid var(--border); border-radius:12px; padding:1.3rem; }
.metric-label { font-size:19px; color:var(--text-light); margin-bottom:4px; }
.metric-value { font-family:'Noto Sans TC',sans-serif; font-size:30px; font-weight:700; color:var(--terracotta); }
.metric-value.metric-warning { color:var(--gold); }
.metric-value.metric-success { color:var(--sage); }
.metric-sub { font-size:12px; color:var(--sage); margin-top:2px; }
.data-table { width:100%; background:white; border:1px solid var(--border); border-radius:12px; overflow:hidden; border-collapse:collapse; margin-bottom:1.5rem; }
.data-table th { background:var(--peach); padding:12px 14px; text-align:left; font-size:13px; font-weight:700; color:var(--brown); }
.data-table td { padding:11px 14px; font-size:14px; color:var(--text-mid); border-top:1px solid var(--border); }
.data-table tr:hover td { background:var(--cream); }

/* ===== FOOTER ===== */
.site-footer { background:var(--text-dark); color:rgba(255,255,255,0.5); text-align:center; padding:1.2rem 1rem; font-size:13px; }

/* ===== NOTIFICATION ===== */
.notification { position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(100px); background:var(--text-dark); color:white; padding:13px 20px; border-radius:12px; font-size:14px; z-index:9998; opacity:0; transition:all 0.3s; max-width:360px; width:90%; pointer-events:none; text-align:center; }
.notification.show { transform:translateX(-50%) translateY(0); opacity:1; }

/* ===== LOADING ===== */
.loading-spinner { display:inline-block; width:20px; height:20px; border:2px solid var(--border); border-top-color:var(--terracotta); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ===== RESPONSIVE ===== */
@media (max-width:768px) {
  nav { padding:0 1rem; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .hero { padding:3rem 1rem 2rem; }
  .section { padding:2rem 1rem; }
  .stats-bar { gap:2rem; }
  .stat-num { font-size:28px; }
  .my-circles-grid { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .admin-grid { grid-template-columns:1fr !important; }
  .admin-sidebar { display:none !important; }
  .metrics-3col { grid-template-columns:1fr; }
}

@media (max-width:480px) {
  .cat-gallery { grid-template-columns:repeat(2,1fr); }
  .product-grid { flex-direction:column; }
  .product-card { flex-direction:column; }
  .product-img { width:100%; min-width:unset; max-width:unset; max-height:220px; }
  .cards-grid { grid-template-columns:1fr; }
  .price-grid { grid-template-columns:1fr; }
  .stat-num { font-size:24px; }
  .stat-label { font-size:13px; }
}

/* ===== FOUNDER STORY ===== */
.founder-story-section { padding-top: 0; }
.founder-story-card {
  background: linear-gradient(160deg, #FDF8F2 0%, #F9E8D8 100%);
  border: 1px solid var(--border);
  border-left: 4px solid var(--terracotta);
  border-radius: 18px;
  padding: 2.5rem 2rem 2rem;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
.founder-story-quote {
  font-size: 72px;
  color: var(--terracotta);
  opacity: 0.15;
  line-height: 1;
  position: absolute;
  top: 12px;
  left: 24px;
  font-family: 'Noto Sans TC', sans-serif;
}
.founder-story-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--brown);
  margin-bottom: 1.2rem;
  font-family: 'Noto Sans TC', sans-serif;
  line-height: 1.4;
}
.founder-story-body p {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.9;
  margin-bottom: 0.9rem;
}
.founder-story-body p:last-child { margin-bottom: 0; }
.founder-story-footer {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.founder-badge {
  background: var(--peach);
  color: var(--brown);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}
.founder-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--terracotta);
}
@media (max-width: 600px) {
  .founder-story-card { padding: 2rem 1.2rem 1.5rem; }
  .founder-story-title { font-size: 17px; }
  .founder-story-body p { font-size: 14px; }
}

/* ===== FAQ ===== */
.faq-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
  background: white;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.faq-item:hover { box-shadow: 0 3px 12px var(--shadow); }
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--brown);
  gap: 12px;
}
.faq-arrow {
  font-size: 11px;
  color: var(--terracotta);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq-answer {
  display: none;
  padding: 0 16px 14px;
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.8;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  white-space: pre-line;
}
.faq-answer.open { display: block; }

/* ===== PRODUCT META & CANCEL WARNING ===== */
.product-meta-row {
  font-size: 12px;
  color: var(--text-mid);
  margin-top: 5px;
}
.product-cancel-warning {
  font-size: 11px;
  color: var(--brown);
  background: var(--peach);
  border-radius: 6px;
  padding: 5px 8px;
  margin-top: 7px;
  line-height: 1.5;
}

/* ===== STORIES ===== */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.story-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s;
}
.story-card { will-change:transform; }
.story-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px var(--shadow); }
.wm-photo { position:relative; overflow:hidden; }
@keyframes pulse-hint {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.98); }
}
.wm-photo::after {
  content: 'Petbmy 浪浪陪伴';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(-25deg);
  color: rgba(255,255,255,0.22);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  z-index: 2;
}
.story-img {
  width: 100%;
  background: var(--peach);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-body { padding: 16px; }
.story-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--brown);
  margin-bottom: 8px;
  font-family: 'Noto Sans TC', sans-serif;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.story-preview {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.story-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 8px;
}
.story-read-more {
  font-size: 13px;
  font-weight: 600;
  color: var(--terracotta);
}

/* ===== MEDIA NEWS ===== */
.media-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.media-news-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
  transition: all 0.2s;
}
.media-news-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px var(--shadow); }
.media-news-card.gov { border-color: #A0522D; }
.media-news-src {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 6px;
}
.media-news-src.gov { color: #8B3A2A; }
.media-news-ttl {
  font-size: 14px;
  color: var(--brown);
  line-height: 1.5;
}

/* ===== CHECKBOX GROUP ===== */
.checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; }
.checkbox-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--cream); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 12px; cursor: pointer;
  font-size: 13px; color: var(--text-mid); transition: all 0.15s;
  user-select: none;
}
.checkbox-pill input { display: none; }
.checkbox-pill.checked {
  background: var(--light-sage); border-color: var(--sage);
  color: #3D6B38; font-weight: 600;
}
.checkbox-pill:hover { border-color: var(--sage); }

/* ===== SETTINGS GRID ===== */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: stretch;
}
.settings-grid .form-card {
  height: 100%;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  width: 100%;
}
@media (max-width: 1100px) {
  .settings-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .settings-grid { grid-template-columns: 1fr; }
}

/* ===== ONBOARDING ===== */
.ob-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); display: inline-block;
  transition: background 0.2s, transform 0.2s;
}
.ob-dot-active {
  background: var(--terracotta);
  transform: scale(1.3);
}

/* ===== ADMIN MOBILE MENU ===== */
.admin-mobile-menu {
  display: none !important;
  align-items: center;
  gap: 8px;
  padding: 10px 1rem;
  background: var(--text-dark);
}
@media (max-width: 900px) {
  .admin-mobile-menu { display: flex !important; }
  .admin-mobile-menu .form-select {
    flex: 1;
    background: rgba(255,255,255,0.1);
    color: white;
    border-color: rgba(255,255,255,0.2);
    font-size: 14px;
    padding: 8px 12px;
  }
}

/* ===== NAMEGEN ===== */
.namegen-style-card {
  background: var(--peach);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  font-weight: 600;
  color: var(--brown);
  user-select: none;
}
.namegen-style-card:hover { border-color: var(--terracotta); background: #FFE8D6; }
.namegen-style-card.selected { background: var(--terracotta); color: white; border-color: var(--terracotta); }
.namegen-style-card.lucky { border-color: var(--terracotta); }
.namegen-style-card.lucky.selected { background: var(--terracotta); color: white; }
.namegen-count-btn {
  flex: 1; padding: 9px 0; border: 1.5px solid var(--border); border-radius: 20px;
  background: white; cursor: pointer; font-size: 14px; font-weight: 600;
  color: var(--text-mid); transition: all 0.2s;
}
.namegen-count-btn:hover { border-color: var(--terracotta); color: var(--terracotta); }
.namegen-count-btn.active { border-color: var(--terracotta); background: var(--terracotta); color: white; }
.namegen-name-card {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 12px;
  text-align: center;
}
.namegen-name-card .name-text {
  font-size: 28px;
  font-weight: 700;
  color: var(--brown);
  margin-bottom: 8px;
}
.namegen-name-card .name-reason {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.7;
}
.namegen-name-card.lucky-card {
  background: linear-gradient(135deg, #FFF8F0, #FFF0E4);
  border-color: var(--terracotta);
}

[data-page-toggle] { visibility: hidden; }
[data-page-toggle].toggle-ready { visibility: visible; }

/* ===== PAGE BUILDER ===== */
.block-tool-btn {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-mid);
  margin-bottom: 4px;
  transition: background 0.15s;
  user-select: none;
}
.block-tool-btn:hover { background: var(--peach); color: var(--terracotta); }

.page-block {
  background: white;
  border: 2px solid transparent;
  border-radius: 10px;
  margin-bottom: 10px;
  position: relative;
  transition: border-color 0.15s;
}
.page-block:hover { border-color: var(--terracotta); }
.page-block.selected { border-color: var(--terracotta); }

.page-block-toolbar {
  position: absolute;
  top: -14px;
  right: 8px;
  display: none;
  gap: 4px;
  z-index: 10;
}
.page-block:hover .page-block-toolbar,
.page-block.selected .page-block-toolbar { display: flex; }

.page-block-toolbar button {
  background: var(--terracotta);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  cursor: pointer;
}
.page-block-toolbar button.ghost { background: white; color: var(--text-mid); border: 1px solid var(--border); }
.page-block-toolbar button:hover { opacity: 0.85; }

/* Frontend custom pages */
.custom-page-hero { padding: 4rem 2rem; text-align: center; }
.custom-page-hero h1 { font-size: clamp(24px,4vw,48px); font-weight: 700; color: var(--brown); margin-bottom: 1rem; }
.custom-page-hero p { font-size: 16px; color: var(--text-mid); max-width: 600px; margin: 0 auto; line-height: 1.8; }
.custom-page-text { padding: 1.5rem 0; font-size: 15px; color: var(--text-mid); line-height: 2; white-space: pre-line; }
.custom-page-image img { width: 100%; border-radius: 12px; display: block; }
.custom-page-button { text-align: center; padding: 1.5rem 0; }
.custom-page-divider { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
.custom-page-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 1rem 0; }
.custom-page-notice { background: var(--peach); border-left: 4px solid var(--terracotta); border-radius: 8px; padding: 1rem 1.2rem; margin: 1rem 0; font-size: 14px; color: var(--brown); line-height: 1.8; }
.custom-page-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 1rem 0; }
.custom-page-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; }
@media (max-width: 768px) {
  .custom-page-columns { grid-template-columns: 1fr; }
  .custom-page-gallery { grid-template-columns: repeat(2,1fr); }
}