:root{
  --bg:#F5F0E6; --card:#ffffff; --ink:#2b2620; --muted:#8a8175;
  --teal:#5B9AA0; --teal-d:#1A2B3C; --orange:#C9A96E; --orange-d:#b08d4f;
  --line:#ece5d8; --green:#3f9d6d; --red:#d9694e;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  line-height:1.6;
}
.app{width:100%; max-width:480px; margin:0 auto; background:var(--bg);}

/* ===== Hero / header / 滚动 banner ===== */
.hero{
  color:#fff; padding:0; text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(150deg,var(--teal),var(--teal-d));
}
.hero::after{content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.08); pointer-events:none;}
.hero img{width:78px; height:78px; border-radius:50%; border:3px solid rgba(255,255,255,.75); object-fit:cover; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.18);}
.hero h1{margin:14px 0 6px; font-size:24px; font-weight:800; letter-spacing:1px;}
.hero .tag{font-size:13px; opacity:.92; line-height:1.6; max-width:320px; margin:0 auto;}

/* Banner 滚动 carousel */
.banner-carousel{position:relative; overflow:hidden;}
.banner-track{display:flex; transition:transform .6s cubic-bezier(.45,.05,.25,1);}
.banner-slide{flex:0 0 100%; min-width:100%; padding:30px 20px 36px; position:relative; overflow:hidden; box-sizing:border-box;}
/* Slide 1：弗兰克头像（蓝绿渐变） */
.banner-slide.s1{background:linear-gradient(150deg,var(--teal),var(--teal-d));}
/* Slide 2：走地图看青浦（地图/古镇色调，深棕+橙） */
.banner-slide.s2{background:linear-gradient(135deg,#5D3F2B 0%,#8B5A2B 60%,#C9762B 100%); color:#fff;}
.banner-slide.s2::before{content:""; position:absolute; inset:0; background:
  repeating-linear-gradient(45deg, transparent 0 22px, rgba(255,255,255,.05) 22px 23px),
  repeating-linear-gradient(-45deg, transparent 0 22px, rgba(255,255,255,.05) 22px 23px);
  pointer-events:none;}
.banner-slide .b-photo{width:240px; max-width:80%; height:130px; object-fit:cover; border-radius:14px;
  border:3px solid rgba(255,255,255,.7); box-shadow:0 8px 24px rgba(0,0,0,.35); display:block; margin:0 auto 14px; position:relative; z-index:1;}
.banner-slide.s2 h2{font-size:24px; font-weight:800; letter-spacing:2px; margin:8px 0 8px; position:relative; z-index:1; text-shadow:0 2px 6px rgba(0,0,0,.4);}
.banner-slide.s2 .b-sub{font-size:13px; line-height:1.75; opacity:.96; max-width:300px; margin:0 auto 14px; position:relative; z-index:1;}
.banner-slide.s2 .b-tag{display:inline-block; background:rgba(255,255,255,.18); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.4); padding:6px 14px; border-radius:99px; font-size:12.5px;
  font-weight:700; letter-spacing:1px; margin-top:6px; position:relative; z-index:1;}
/* 滚动指示器 */
.banner-dots{position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:7px; z-index:2;}
.banner-dots span{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.45);
  transition:width .3s, background .3s; cursor:pointer;}
.banner-dots span.on{width:22px; border-radius:99px; background:#fff;}

/* ===== Sections ===== */
.sec{padding:22px 16px 4px;}
.sec-h{display:flex; align-items:center; gap:9px; margin:0 0 4px; font-size:18px; font-weight:800;}
.sec-h .dot{width:12px; height:12px; border-radius:50%;}
.sec-h.online .dot{background:var(--green);}
.sec-h.offline .dot{background:var(--orange);}
.sec-h.team .dot{background:var(--teal);}
.sec-h.night .dot{background:#7c6bd6;}
.sec-sub{margin:0 0 14px; font-size:12.5px; color:var(--muted);}

/* ===== Card grid ===== */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:16px 14px; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:6px; min-height:108px;
  box-shadow:0 3px 10px rgba(26,43,60,.05); transition:transform .12s, box-shadow .12s;
}
.card:active{transform:translateY(2px) scale(.99); box-shadow:0 2px 6px rgba(26,43,60,.08);}
.card .ico{font-size:30px; line-height:1;}
.card .t{font-size:15.5px; font-weight:700;}
.card .d{font-size:12px; color:var(--muted); line-height:1.45;}

/* ===== Footer ===== */
.foot{padding:26px 18px 30px; text-align:center; margin-top:auto;}
.counter{
  display:inline-block; background:linear-gradient(135deg,var(--orange),var(--orange-d));
  color:#fff; font-size:14px; font-weight:700; padding:9px 16px; border-radius:999px;
  box-shadow:0 4px 12px rgba(176,141,79,.35);
}
.counter #visitCount{font-variant-numeric:tabular-nums; font-size:16px; margin:0 2px;}
.copy{margin:14px 0 0; font-size:11.5px; color:var(--muted);}

/* ===== Subpage shell ===== */
.sub{width:100%; max-width:480px; margin:0 auto; background:var(--bg);}
.topbar{display:flex; align-items:center; gap:10px; padding:14px 14px 10px;}
.back{display:inline-flex; align-items:center; gap:4px; text-decoration:none; color:var(--teal-d); font-size:14px; font-weight:600; background:rgba(91,154,160,.12); padding:6px 12px; border-radius:999px;}
.sub-hero{background:linear-gradient(150deg,var(--teal),var(--teal-d)); color:#fff; padding:22px 20px; text-align:center;}
.sub-hero h1{margin:0; font-size:21px; font-weight:800;}
.sub-hero p{margin:8px 0 0; font-size:13px; opacity:.9; line-height:1.6;}
.sub-body{flex:1; padding:20px 18px;}

/* ===== 建设中 placeholder ===== */
.build{text-align:center; padding:48px 20px;}
.build .big{font-size:54px;}
.build h2{margin:14px 0 6px; font-size:19px;}
.build p{color:var(--muted); font-size:13.5px; line-height:1.7; max-width:300px; margin:0 auto;}
.build .pill{display:inline-block; margin-top:14px; background:rgba(201,169,110,.18); color:var(--orange-d); font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px;}

/* ===== map / 打开小程序 ===== */
.open-btn{
  display:block; width:100%; text-align:center; text-decoration:none;
  background:linear-gradient(135deg,var(--green),#2f7d54); color:#fff; font-size:17px; font-weight:800;
  padding:16px; border-radius:14px; box-shadow:0 6px 16px rgba(63,157,109,.35); margin:6px 0 16px;
}
.open-btn:active{transform:translateY(2px);}
.qr-box{
  border:2px dashed var(--orange); border-radius:16px; padding:22px 16px; text-align:center;
  background:#fff; color:var(--muted); font-size:13px; line-height:1.7;
}
.qr-box .ph{font-size:40px; margin-bottom:8px;}
.step{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-top:14px; font-size:13.5px; line-height:1.8;}
.step b{color:var(--teal-d);}
.note{font-size:11.5px; color:var(--muted); margin-top:16px; line-height:1.6;}

/* floating back on chat page */
.fchat-back{
  position:fixed; left:12px; top:12px; z-index:999;
  background:rgba(26,43,60,.82); color:#fff; text-decoration:none;
  font-size:13px; font-weight:600; padding:7px 13px; border-radius:999px;
  backdrop-filter:blur(4px);
}

/* ===== 视频号播放器容器（子页面） ===== */
.video-block{margin:6px 0 4px; border-radius:14px; overflow:hidden; background:#0b0b0f;
  min-height:220px; display:flex; align-items:center; justify-content:center;}
.video-block.has-music{min-height:auto; background:none;}
.video-block iframe{width:100%; border:0; display:block; aspect-ratio:9/16;}
.video-block .nm-embed{aspect-ratio:auto !important; border-radius:12px; width:100%;}
.video-block video{width:100%; border:0; display:block; max-height:78vh;}
.video-ph{color:#fff; font-size:14px; text-align:center; padding:48px 16px; line-height:1.7; opacity:.85;}
.video-card{display:flex; align-items:center; justify-content:center; gap:8px;
  padding:20px 16px; color:#fff; font-size:15px; font-weight:700;
  text-decoration:none; background:linear-gradient(135deg,#C20C0C,#9b0a0a); border-radius:14px;}
.video-card:active{opacity:.9;}

/* ===== 菜单播放小图标（精致版） ===== */
.play {
  display:inline-flex; align-items:center; justify-content:center;
  vertical-align:middle;
  width:16px; height:16px;
  background:linear-gradient(135deg,#FF9F43,#E8913A);
  border-radius:50%; box-shadow:0 1px 4px rgba(232,145,58,.4);
  position:relative; flex-shrink:0;
}
.play::after {
  content:''; display:block;
  width:0; height:0;
  margin-left:2px;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-left:6px solid #fff;
}

/* ===== 视频号观看入口卡片（sph 短链） ===== */
.vh-card{display:block; text-decoration:none; color:#fff; text-align:center;
  padding:34px 16px; background:linear-gradient(150deg,#1a2b3c,#0b0b0f);}
.vh-ic{font-size:40px; margin-bottom:10px;}
.vh-t{font-size:16px; font-weight:800; margin-bottom:6px;}
.vh-s{font-size:12px; color:#cfd6dd; line-height:1.6; margin-bottom:16px;}
.vh-btn{display:inline-block; background:#07C160; color:#fff; font-weight:700;
  font-size:14px; padding:9px 22px; border-radius:999px;}
.vh-card:active .vh-btn{opacity:.8;}

/* ===== 奖杯图标（父页面条目后） ===== */
.trophy{
  display:inline-flex; align-items:center; justify-content:center;
  vertical-align:middle;
  font-size:12px; line-height:1;
  filter:drop-shadow(0 1px 2px rgba(212,160,23,.5));
}

/* ===== 奖项外部链接嵌入区（子页面） ===== */
.award-block{margin:10px 0 4px; border-radius:14px; overflow:hidden;
  background:linear-gradient(135deg,#fffbeb,#fef3c7);
  border:1.5px solid #f5d77a;}
.award-block .award-head{display:flex; align-items:center; gap:6px;
  padding:10px 14px; font-size:13px; font-weight:800; color:#92400e;
  border-bottom:1px solid #f5d77a;}
.award-block .award-head .ai{font-size:15px;}
.award-block .award-list{padding:8px 12px 12px;}
.award-block .award-item{background:#fffdf3; border:1px solid #f0d488;
  border-radius:10px; padding:8px 10px; margin:8px 0;}
.award-block .award-item .award-name{font-size:14px; font-weight:700; color:#b45309;}
.award-block .award-item iframe{width:100%; border:0; display:block;
  min-height:260px; margin-top:6px; background:#fff; border-radius:8px;}
.award-block .award-item .award-link-btn{display:block; text-align:center; text-decoration:none;
  color:#fff; font-size:13px; font-weight:700;
  background:linear-gradient(135deg,#D4A017,#b8860b); padding:10px;
  margin-top:8px; border-radius:10px;}

/* ===== 方向页（声乐/器乐/理论）项目同步列表 ===== */
.dir-sum{font-size:12px; font-weight:700; color:var(--muted); margin:4px 2px 8px; text-align:center;}
.dir-list{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.dir-item{display:flex; flex-direction:column; gap:4px; align-items:center;
  background:rgba(91,154,160,.07); border:1px solid rgba(91,154,160,.18);
  border-radius:12px; padding:8px 10px; min-width:120px; flex:1 1 120px; max-width:46%;}
.dir-link{display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  text-decoration:none; font-size:13.5px; font-weight:700; color:var(--teal-d);}
.dtags{display:inline-flex; align-items:center; gap:3px;}
.d-awards{display:flex; flex-wrap:wrap; gap:4px; justify-content:center;}
.d-award{display:inline-block; font-size:10.5px; font-weight:700; color:#92400e;
  background:linear-gradient(135deg,#fffbeb,#fef3c7); border:1px solid #f5d77a;
  padding:2px 7px; border-radius:999px;}

/* ===== 课程报名区域（独立于作品列表） ===== */
.enroll-section{margin-top:24px;}
.enroll-head{display:flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,#7c6bd6,#534AB7); color:#fff;
  font-size:15px; font-weight:800; padding:10px 16px; border-radius:12px 12px 0 0;}
.enroll-icon{font-size:18px;}
.enroll-list{background:#fff; border:1px solid #e0d6f0; border-top:none;
  border-radius:0 0 12px 12px; padding:12px;}
.enroll-card{background:linear-gradient(135deg,#faf8ff,#f5f0ff);
  border:1.5px solid #e8e0f8; border-radius:12px; padding:14px; margin-bottom:12px; overflow:hidden;}
.enroll-card:last-child{margin-bottom:0;}
.enroll-card-cover{width:100%; max-height:180px; object-fit:cover; border-radius:8px; margin-bottom:10px; display:block; border:1px solid #e0d6f0;}
.enroll-card-name{font-size:16px; font-weight:800; color:#4c3a9a; margin-bottom:6px;}
.enroll-card-meta{display:flex; flex-wrap:wrap; gap:6px 10px; font-size:12px; color:#6b5da3; margin-bottom:8px;}
.enroll-card-meta span{display:inline-flex; align-items:center; gap:3px; background:rgba(124,107,214,.10); padding:2px 8px; border-radius:99px; font-weight:600;}
.enroll-card-desc{font-size:13px; color:#3a2f7a; line-height:1.7; margin:8px 0 12px; padding:8px 10px; background:rgba(255,255,255,.55); border-radius:8px; border-left:3px solid #b3a8e8;}
.enroll-card-body{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.enroll-qr-wrap{text-align:center; flex:0 0 auto;}
.enroll-qr{width:130px; height:130px; object-fit:contain; border-radius:10px;
  border:2px solid #e0d6f0; background:#fff; padding:4px;}
.enroll-qr-tip{font-size:11px; color:#8a7bb8; margin-top:4px;}
.enroll-btn{flex:1; min-width:120px; display:inline-block; text-align:center; text-decoration:none;
  color:#fff; font-size:14px; font-weight:800;
  background:linear-gradient(135deg,#E8913A,#D85A30); padding:12px 18px;
  border-radius:10px; transition:transform .15s, box-shadow .15s;}
.enroll-btn:hover{transform:translateY(-1px); box-shadow:0 4px 12px rgba(232,145,58,.35);}
.enroll-btn:active{transform:translateY(0);}
.enroll-link{display:inline-block; text-align:center; text-decoration:none;
  color:#534AB7; font-size:13px; font-weight:700;
  background:rgba(124,107,214,.08); border:1px solid #b3a8e8;
  padding:10px 16px; border-radius:10px;}
.enroll-signup{display:block; width:100%; margin-top:10px; cursor:pointer;
  font-size:15px; font-weight:800; color:#fff; text-decoration:none; text-align:center;
  background:linear-gradient(135deg,#E8913A,#D85A30);
  border:none; border-radius:10px; padding:12px;
  box-shadow:0 4px 12px rgba(232,145,58,.25); transition:transform .15s, box-shadow .15s;}
.enroll-signup:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(232,145,58,.4);}
.enroll-signup:active{transform:translateY(0);}
.enroll-signup:disabled{color:#9b9387; border-color:#e5ded4; background:#f7f3ee; cursor:default; box-shadow:none;}
/* 有二维码无链接：提示长按 */
.enroll-signup--disabled{display:block; width:100%; margin-top:10px; font-size:14px; font-weight:700; color:#8a8175; text-align:center; background:#f7f3ee; border:1px dashed #e5ded4; border-radius:10px; padding:12px; cursor:default;}
/* 都没填：即将开放 */
.enroll-signup--coming{display:block; width:100%; margin-top:10px; font-size:14px; font-weight:700; color:#bfb9af; text-align:center; background:#faf8f5; border:1px solid #ede8df; border-radius:10px; padding:12px; cursor:default;}