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

:root{
  --green-50:#edfaf3; --green-100:#d4f2e3; --green-200:#a8e6c1;
  --green-300:#7ad9a3; --green-400:#4ccd84; --green-500:#27ae60;
  --green-600:#1e8e4e; --green-700:#166b3b; --green-800:#0f4d2a;
  --green-900:#0a331c;

  --c-bg:#f4faf7;
  --c-bg2:#eaf6f0;
  --c-white:#fff;
  --c-text:#1a3c2a;
  --c-text2:#3a5c4a;
  --c-muted:#7a9a8a;
  --c-accent:#27ae60;
  --c-accent2:#1e8e4e;
  --c-accent-light:#7ad9a3;
  --c-accent-pale:#d4f2e3;
  --c-border:#c8e6d8;
  --c-card:#fff;
  --c-shadow:rgba(39,174,96,.08);
  --c-shadow2:rgba(39,174,96,.14);
  --c-gold:#d4a843;
  --c-warm:#f9f5eb;

  --radius-sm:8px; --radius:14px; --radius-lg:20px;
  --shadow-sm:0 1px 3px var(--c-shadow);
  --shadow:0 4px 20px var(--c-shadow);
  --shadow-lg:0 8px 32px var(--c-shadow2);
  --nav-h:52px;
  --transition:0.25s cubic-bezier(.4,0,.2,1);
}

html{font-size:16px;scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--c-bg);color:var(--c-text);line-height:1.7;
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--nav-h);
  background-image:
    radial-gradient(ellipse at 50% 0%, var(--green-50) 0%, transparent 60%),
    radial-gradient(ellipse at 85% 20%, var(--c-accent-pale) 0%, transparent 40%);
  background-attachment:fixed;
}

/* ===== Navigation ===== */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid transparent;
  box-shadow:0 1px 0 var(--c-border);
}
nav a{
  flex:1;text-align:center;text-decoration:none;
  color:var(--c-muted);font-size:13px;font-weight:500;
  padding:0 2px;line-height:var(--nav-h);
  transition:color var(--transition);white-space:nowrap;
  position:relative;
}
nav a::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:0;height:2.5px;border-radius:2px;
  background:linear-gradient(135deg,var(--c-accent),var(--c-accent2));
  transition:width var(--transition);
}
nav a.active,nav a:hover{color:var(--c-accent)}
nav a.active::after{width:20px}

/* ===== Sections ===== */
.section{padding:48px 16px 52px}
.section-inner{max-width:680px;margin:0 auto}

.section-label{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;
  color:var(--c-accent);text-transform:uppercase;
  background:var(--c-accent-pale);padding:4px 14px;
  border-radius:20px;margin-bottom:10px;
}
.section-label-wrap{text-align:center;margin-bottom:6px}

.section-title{
  font-size:24px;font-weight:800;color:var(--c-text);
  text-align:center;margin-bottom:8px;
  letter-spacing:-.01em;
}
.section-subtitle{
  font-size:14px;color:var(--c-muted);text-align:center;
  margin-bottom:28px;line-height:1.6;max-width:480px;margin-left:auto;margin-right:auto;
}

/* Section Divider */
.section-divider{
  width:50px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--c-accent-light),var(--c-accent),var(--c-accent2));
  margin:0 auto 28px;
}

/* ===== Banner Card ===== */
.banner-card{
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow);background:var(--c-white);
  border:1px solid var(--c-border);
}
.banner-card img{
  width:100%;display:block;min-height:200px;object-fit:cover;
  background:var(--c-bg2);
}
.banner-card .desc{
  padding:24px 20px;font-size:15px;color:var(--c-text2);
  line-height:1.9;text-align:justify;
}

/* ===== Product Tree ===== */
.product-tree{margin-top:20px}
.product-region{
  background:var(--c-white);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);margin-bottom:14px;overflow:hidden;
  border:1px solid var(--c-border);
  transition:box-shadow var(--transition);
}
.product-region:hover{box-shadow:var(--shadow)}

.region-header{
  padding:16px 18px;cursor:pointer;display:flex;
  align-items:center;justify-content:space-between;
  font-size:16px;font-weight:700;user-select:none;
  background:linear-gradient(135deg,var(--green-50),var(--c-white));
  border-left:4px solid var(--c-accent);
  color:var(--c-text);
  transition:background var(--transition);
}
.region-header:hover{background:linear-gradient(135deg,var(--c-accent-pale),var(--green-50))}
.region-header .arrow{
  font-size:11px;transition:transform var(--transition);
  color:var(--c-accent);opacity:.7;
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--c-accent-pale);
}
.region-header.open .arrow{transform:rotate(90deg);background:var(--c-accent);color:#fff;opacity:1}

.region-body{display:none;padding:4px 16px 16px}
.region-body.show{display:block;animation:fadeIn .3s ease}

.subcat-header{
  padding:12px 14px;cursor:pointer;display:flex;
  align-items:center;justify-content:space-between;
  font-size:14px;font-weight:600;color:var(--c-text2);
  background:var(--c-bg);border-radius:var(--radius-sm);
  margin-bottom:10px;border:1px solid transparent;
  transition:all var(--transition);
}
.subcat-header:hover{
  background:var(--c-accent-pale);
  border-color:var(--c-accent-light);
}
.subcat-header .arrow{
  font-size:10px;transition:transform var(--transition);color:var(--c-muted)
}
.subcat-header.open .arrow{transform:rotate(90deg)}
.subcat-header.open{
  background:var(--c-accent-pale);
  border-color:var(--c-accent-light);
  color:var(--c-accent);
}

.subcat-products{display:none;padding:6px 0 12px 4px}
.subcat-products.show{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  animation:fadeIn .3s ease;
}

.product-card{
  background:var(--c-white);border:1px solid var(--c-border);
  border-radius:var(--radius-sm);overflow:hidden;text-align:center;
  transition:transform var(--transition),box-shadow var(--transition);
}
.product-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.product-card img{
  width:100%;aspect-ratio:1;object-fit:cover;display:block;
  background:linear-gradient(135deg,var(--c-bg2),var(--c-bg));
}
.product-card .pname{
  font-size:14px;font-weight:600;padding:10px 6px 2px;color:var(--c-text);
}
.product-card .pdesc{
  font-size:12px;color:var(--c-muted);padding:2px 6px 10px;
}

/* ===== Franchise ===== */
.franchise-card{
  background:var(--c-white);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);overflow:hidden;margin-bottom:20px;
  border:1px solid var(--c-border);
}
.franchise-card .rules-img{
  width:100%;display:block;min-height:200px;object-fit:contain;
  background:var(--c-bg2);padding:12px;
}
.franchise-card .rules-text{
  padding:20px 24px 24px;font-size:14px;line-height:2;
  color:var(--c-text2);border-top:1px solid var(--c-border);
}

.franchise-qr{
  display:flex;justify-content:center;gap:20px;padding:16px 8px 20px;
  flex-wrap:wrap;
}
.franchise-qr .qr-item{text-align:center}
.franchise-qr .qr-item img{
  width:88px;height:88px;border-radius:var(--radius);
  border:2px solid var(--c-accent-pale);
  transition:transform var(--transition),box-shadow var(--transition);
  background:var(--c-white);padding:4px;
}
.franchise-qr .qr-item img:hover{
  transform:scale(1.08);
  box-shadow:var(--shadow);
  border-color:var(--c-accent-light);
}
.franchise-qr .qr-item .label{
  font-size:11px;font-weight:700;color:var(--c-accent);margin-top:8px;
  letter-spacing:.03em;
}
.franchise-qr .qr-item .account{
  font-size:12px;color:var(--c-text2);margin-top:2px;font-weight:500;
}

/* ===== Form ===== */
.form-card{
  background:var(--c-white);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:28px 20px 24px;margin-top:20px;
  border:1px solid var(--c-border);
  position:relative;overflow:hidden;
}
.form-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--c-accent-light),var(--c-accent),var(--c-accent2));
}
.form-card h3{
  font-size:18px;font-weight:700;margin-bottom:20px;text-align:center;
  color:var(--c-text);
}
.form-group{margin-bottom:16px}
.form-group label{
  display:block;font-size:13px;font-weight:600;margin-bottom:6px;
  color:var(--c-text2);
}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:12px 14px;font-size:15px;
  border:1.5px solid var(--c-border);
  border-radius:var(--radius-sm);background:var(--c-bg);
  outline:none;transition:all var(--transition);-webkit-appearance:none;
  color:var(--c-text);
}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--c-muted)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:var(--c-accent);background:var(--c-white);
  box-shadow:0 0 0 3px var(--c-accent-pale);
}
.form-group textarea{min-height:90px;resize:vertical}

.btn-submit{
  width:100%;padding:14px;font-size:16px;font-weight:700;
  background:linear-gradient(135deg,var(--c-accent),var(--c-accent2));
  color:#fff;border:none;border-radius:var(--radius);
  cursor:pointer;transition:all var(--transition);
  box-shadow:0 4px 14px rgba(39,174,96,.35);
  letter-spacing:.03em;
  margin-top:4px;
}
.btn-submit:hover{
  background:linear-gradient(135deg,var(--c-accent2),var(--green-700));
  box-shadow:0 6px 20px rgba(39,174,96,.45);
  transform:translateY(-1px);
}
.btn-submit:active{transform:translateY(0);box-shadow:0 2px 8px rgba(39,174,96,.25)}
.btn-submit:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.form-msg{margin-top:14px;text-align:center;font-size:14px;display:none;padding:10px 16px;border-radius:var(--radius-sm);font-weight:500}
.form-msg.success{
  color:var(--c-accent);display:block;
  background:var(--c-accent-pale);
}
.form-msg.error{
  color:#e74c3c;display:block;
  background:#fdeaea;
}

/* ===== Contact ===== */
.contact-section{
  background:linear-gradient(180deg,var(--green-50) 0%,var(--c-bg) 100%);
  text-align:center;position:relative;
}
.contact-qr{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:20px}
.contact-qr .qr-item{text-align:center}
.contact-qr .qr-item img{
  width:110px;height:110px;border-radius:var(--radius);
  border:3px solid var(--c-accent-pale);
  background:var(--c-white);padding:6px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition),box-shadow var(--transition);
}
.contact-qr .qr-item img:hover{
  transform:scale(1.06);
  box-shadow:var(--shadow);
}
.contact-qr .qr-item .label{
  font-size:13px;font-weight:700;margin-top:10px;color:var(--c-accent);
  letter-spacing:.03em;
}
.contact-qr .qr-item .account{
  font-size:13px;color:var(--c-text2);margin-top:4px;font-weight:500;
}
.contact-qr .qr-item .rotate-hint{
  font-size:11px;color:var(--c-muted);margin-top:4px;
  background:var(--c-accent-pale);display:inline-block;
  padding:2px 10px;border-radius:10px;
}

/* ===== Footer ===== */
footer{
  padding:28px 16px 32px;text-align:center;
  font-size:12px;color:var(--c-muted);
  background:var(--c-bg2);border-top:1px solid var(--c-border);
}
footer .admin-link{
  color:var(--c-muted);font-size:11px;margin-top:10px;display:inline-block;
  padding:4px 12px;border-radius:12px;background:var(--c-white);
  border:1px solid var(--c-border);text-decoration:none;
  transition:all var(--transition);
}
footer .admin-link:hover{color:var(--c-accent);border-color:var(--c-accent-light)}

/* ===== Animations ===== */
@keyframes fadeIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(39,174,96,.25)}
  50%{box-shadow:0 0 0 10px rgba(39,174,96,0)}
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--c-bg)}
::-webkit-scrollbar-thumb{background:var(--c-accent-light);border-radius:4px}

/* ===== Tablet+ ===== */
@media(min-width:768px){
  .section{padding:64px 0 72px}
  .section-title{font-size:28px}
  .section-subtitle{font-size:15px}
  .subcat-products.show{grid-template-columns:repeat(3,1fr)}
  nav a{font-size:14px}
  .banner-card img{min-height:300px}
}