/* ============================================
   陳醫生預約 — 预约抢号 H5
   现代轻量 · 扁平医疗 · 年轻治愈
   ============================================ */

:root {
  /* 品牌色 */
  --pri:        #9068BE;   /* 丁香紫 */
  --pri-light:  #F5F0FA;   /* 极淡紫底 */
  --pri-hover:  #7D52AD;

  /* 中性基底 */
  --bg:         #FFFFFF;
  --card-bg:    #F7F8FA;
  --border:     #EDEEF0;

  /* 文字灰度 */
  --text-h1:    #1D2129;
  --text-h2:    #4E5969;
  --text-h3:    #86909C;
  --text-dis:   #C9CDD4;

  /* 功能语义色 */
  --success:    #36CFC9;   /* 薄荷绿 */
  --warning:    #FF7D00;   /* 暖橙 */
  --danger:     #F53F3F;   /* 浅红 */
  --link:       #A87DC8;   /* 浅丁香 */

  /* 按钮色 */
  --btn-avail:  var(--pri);       /* 可预约 - 丁香紫 */
  --btn-mine:   var(--success);   /* 已预约 - 薄荷绿 */
  --btn-others: var(--danger);    /* 已抢 - 浅红 */
  --btn-dis:    var(--text-dis);  /* 未开放 - 浅灰 */

  --btn-avail-bg: var(--pri-light);
  --btn-mine-bg:  #EBFBFB;
  --btn-others-bg:#FFF0F0;
  --btn-dis-bg:   #F2F2F4;

  --radius: 12px;
  --shadow-sm: 0 0 0 1px rgba(0,0,0,.03);
  --shadow-md: 0 1px 6px rgba(0,0,0,.04);

  --nav-h:   58px;
  --safe-bot: env(safe-area-inset-bottom, 8px);

  --font-serif: "STSong","SimSun","Noto Serif SC","Songti SC",serif;
  --font-sans:  "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

/* --- Reset --- */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{
  font-size:16px; -webkit-tap-highlight-color:transparent;
  position:fixed; width:100%; height:100%; overflow:hidden;
}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text-h2);
  position:fixed; width:100%; height:100%;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  -webkit-font-smoothing:antialiased;
}
input, textarea{ -webkit-appearance:none; touch-action:manipulation; }
#app{
  max-width:480px; margin:0 auto; min-height:100vh;
  padding-bottom:calc(var(--nav-h) + var(--safe-bot) + 16px);
  background:var(--bg);
}

/* ============================================
   Header
   ============================================ */
.header{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:24px 18px 18px; background:var(--bg);
}
.header-icon{
  width:34px; height:34px; color:var(--pri); flex-shrink:0;
}
.clinic-name{
  font-family:var(--font-serif); font-size:22px; font-weight:700;
  color:var(--text-h1); letter-spacing:4px; line-height:1.3;
}
.clinic-sub{
  font-size:11px; color:var(--text-h3); letter-spacing:2px;
}

/* ============================================
   Banner
   ============================================ */
.banner{
  margin:0 14px;
  padding:16px 12px;
  background:var(--pri-light);
  border-radius:var(--radius);
}
.banner-row{
  display:flex; align-items:center; justify-content:space-around;
}
.banner-item{
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.banner-svg{
  width:20px; height:20px; color:var(--pri);
}
.banner-label{
  font-size:10px; color:var(--text-h3); letter-spacing:1px;
}
.banner-val{
  font-size:13px; font-weight:600; color:var(--text-h2);
}
.banner-div{
  width:1px; height:30px; background:rgba(144,104,190,.15);
}

/* ============================================
   Status Box (倒计时 / 抢号进行中)
   ============================================ */
.status-box{
  margin:10px 14px 0;
  padding:20px 16px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  text-align:center;
  transition:all .3s;
}
/* 抢号进行中：flex 居中 */
.status-box.is-open{
  display:flex; align-items:center; justify-content:center;
  min-height:158px;  /* 与倒计时高度一致 */
  padding:20px 16px;
}

.cd-title{
  font-family:var(--font-serif); font-size:14px;
  color:var(--text-h3); letter-spacing:2px;
  margin-bottom:14px;
  transition:all .3s;
}
.status-box.is-open .cd-title{
  font-size:20px; color:var(--pri); font-weight:600;
  margin-bottom:0; letter-spacing:4px;
}
.cd-timer{
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.status-box.is-open .cd-timer{ display:none; }

.cd-block{
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.cd-num{
  display:flex; align-items:center; justify-content:center;
  width:48px; height:54px;
  background:var(--text-h1); color:var(--bg);
  font-family:var(--font-serif); font-size:24px; font-weight:700;
  border-radius:8px; letter-spacing:2px;
}
.cd-lbl{
  font-size:10px; color:var(--text-h3);
}
.cd-sep{
  font-size:22px; color:var(--pri); font-weight:700; margin-top:-12px;
}
.cd-hint{
  margin-top:12px; font-size:11px; color:var(--link); letter-spacing:1px;
}
.status-box.is-open .cd-hint{ display:none; }

/* 水滴波纹 */
.open-dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  background:var(--pri); margin-right:14px;
  vertical-align:middle; position:relative;
}
/* 第一圈波纹 */
.open-dot::before{
  content:''; position:absolute; top:-8px; left:-8px;
  width:24px; height:24px; border-radius:50%;
  border:1.5px solid var(--pri);
  animation:drop1 2s ease-out infinite;
}
/* 第二圈波纹 */
.open-dot::after{
  content:''; position:absolute; top:-16px; left:-16px;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--pri);
  animation:drop2 2s ease-out .6s infinite;
}

@keyframes drop1{
  0%{opacity:.6;transform:scale(.5)}
  100%{opacity:0;transform:scale(2.4)}
}
@keyframes drop2{
  0%{opacity:.4;transform:scale(.5)}
  100%{opacity:0;transform:scale(2.4)}
}

/* ============================================
   Appointment List
   ============================================ */
.appt-list{
  padding:8px 14px;
  display:flex; flex-direction:column; gap:0;
}

.slot-group-head{
  display:flex; align-items:center; gap:6px;
  padding:0 4px 6px;
  font-size:13px; font-weight:600; color:var(--pri);
}
.slot-group-head svg{ width:14px; height:14px; flex-shrink:0; }

.slot-addr{
  display:flex; align-items:center; gap:4px;
  padding:0 4px 10px;
  font-size:12px; color:var(--pri); font-weight:500;
}
.slot-addr svg{ flex-shrink:0; }

/* 单张卡片 */
.num-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; margin-bottom:8px;
  min-height:52px;
  background:var(--bg);
  border-radius:10px;
  border:1px solid rgba(144,104,190,.12);
  box-shadow:0 2px 0 rgba(144,104,190,.08), 0 4px 10px rgba(0,0,0,.03);
  transition:transform .15s, box-shadow .15s;
}
.num-row:active{
  transform:scale(.98);
  box-shadow:0 1px 0 rgba(144,104,190,.10), 0 2px 4px rgba(0,0,0,.04);
}
.num-row:last-child{ margin-bottom:0; }

.num-index{
  font-family:var(--font-sans); font-size:12px; font-weight:500;
  color:var(--text-h3); flex-shrink:0;
}

/* 号码徽章 */
.num-badge{
  width:56px; height:34px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-sans); font-size:13px; font-weight:700;
  flex-shrink:0; letter-spacing:.5px;
}
.num-badge.available{ background:var(--btn-avail-bg); color:var(--btn-avail); }
.num-badge.mine     { background:var(--btn-mine-bg);  color:var(--btn-mine); }
.num-badge.others   { background:var(--btn-others-bg);color:var(--btn-others); }
.num-badge.disabled { background:var(--btn-dis-bg);  color:var(--btn-dis); }

.num-spacer{ flex:1; }

/* 按钮 */
.num-btn{
  flex-shrink:0;
  width:72px; text-align:center;
  padding:7px 0; border:none; border-radius:16px;
  font-size:12px; font-weight:600;
  cursor:pointer;
  transition:all .15s;
  letter-spacing:1px;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.num-btn:active{ transform:scale(.95); }

.num-btn.available{
  background:var(--btn-avail); color:#fff;
}
.num-btn.mine{
  background:var(--btn-mine-bg); color:var(--btn-mine);
}
.num-btn.others{
  background:var(--btn-others-bg); color:var(--btn-others);
  cursor:not-allowed;
}
.num-btn.disabled{
  background:var(--btn-dis-bg); color:var(--btn-dis);
  cursor:not-allowed;
}

/* ============================================
   Empty
   ============================================ */
.empty{
  padding:80px 20px; text-align:center;
}
.empty-text{ font-size:15px; color:var(--text-h3); margin-bottom:6px; }
.empty-sub{ font-size:12px; color:var(--text-dis); }

/* ============================================
   Legend
   ============================================ */
.legend{
  display:flex; justify-content:center; gap:16px;
  padding:12px 14px 20px; flex-wrap:wrap;
}
.leg-item{
  display:flex; align-items:center; gap:5px;
  font-size:11px; color:var(--text-h3);
}
.leg-dot{
  width:10px; height:10px; border-radius:3px; display:inline-block;
}
.c-blue{ background:var(--btn-avail); }
.c-gold{ background:var(--btn-mine); }
.c-red { background:var(--btn-others); }
.c-gray{ background:var(--btn-dis); }

/* ============================================
   Bottom Nav
   ============================================ */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0;
  width:100%; max-width:480px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-around;
  background:var(--bg); border-top:1px solid var(--border);
  padding:5px 0 var(--safe-bot); z-index:100;
}
.nav-item{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:4px 14px; cursor:pointer;
  color:var(--text-dis); transition:color .2s;
  -webkit-tap-highlight-color:transparent;
  font-size:10px; font-weight:500;
}
.nav-item.active{ color:var(--pri); }
.nav-svg{
  width:22px; height:22px; transition:transform .2s;
}
.nav-item.active .nav-svg{ transform:translateY(-1px); }

/* ============================================
   Toast
   ============================================ */
.toast{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8);
  background:var(--text-h1); color:#fff;
  padding:12px 24px; border-radius:20px;
  font-size:14px; font-weight:600;
  z-index:300; pointer-events:none;
  opacity:0; transition:all .25s ease;
  white-space:nowrap;
}
.toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ============================================
   Modal
   ============================================ */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
  z-index:200; animation:fadeIn .2s; padding:24px;
}
.modal-card{
  background:var(--bg); border-radius:16px;
  padding:28px 22px 22px; text-align:center;
  max-width:300px; width:100%;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
  animation:popIn .25s;
}
.modal-ok{
  width:44px; height:44px; color:var(--success); margin:0 auto 12px; display:block;
}
.modal-title{
  font-family:var(--font-serif); font-size:18px; font-weight:700;
  color:var(--text-h1); letter-spacing:2px; margin-bottom:10px;
}
.modal-desc{
  font-size:13px; color:var(--text-h3); margin-bottom:18px; line-height:1.7;
}
.modal-desc strong{ color:var(--text-h1); }
.modal-btns{
  display:flex; gap:10px; justify-content:center;
}
.mbtn{
  padding:10px 26px; border:none; border-radius:20px;
  font-size:13px; font-weight:600; cursor:pointer;
  letter-spacing:1px; transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.mbtn:active{ transform:scale(.96); }
.mbtn-primary{ background:var(--pri); color:#fff; }
.mbtn-outline{ background:var(--bg); color:var(--text-h3); border:1px solid var(--border); }

/* ============================================
   Products
   ============================================ */

/* 搜索栏 */
.search-bar{
  display:flex; align-items:center; gap:8px;
  margin:0 14px; padding:10px 14px;
  background:var(--card-bg);
  border-radius:var(--radius);
}
.search-icon{
  width:18px; height:18px; color:var(--text-dis); flex-shrink:0;
}
.search-input{
  flex:1; border:none; background:none;
  font-size:14px; color:var(--text-h1); outline:none;
  font-family:var(--font-sans);
}
.search-input::placeholder{ color:var(--text-dis); }

/* 产品列表 */
.product-list{
  padding:10px 14px;
  display:flex; flex-direction:column; gap:8px;
}

/* 产品卡片 */
.prod-card{
  display:flex; align-items:center; gap:12px;
  padding:14px; background:var(--bg);
  border-radius:10px;
  border:1px solid rgba(144,104,190,.12);
  box-shadow:0 2px 0 rgba(144,104,190,.08), 0 4px 10px rgba(0,0,0,.03);
  transition:transform .15s, box-shadow .15s;
}
.prod-card:active{ transform:scale(.98); box-shadow:0 1px 0 rgba(144,104,190,.10), 0 2px 4px rgba(0,0,0,.04); }

/* 产品图片 */
.prod-img{
  width:56px; height:56px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; flex-shrink:0;
}

.prod-info{ flex:1; min-width:0; }

.prod-head{
  display:flex; align-items:center; gap:6px; margin-bottom:4px;
}
.prod-name{
  font-size:15px; font-weight:600; color:var(--text-h1);
}
.prod-tag{
  font-size:10px; font-weight:600; padding:2px 6px; border-radius:4px;
  flex-shrink:0;
}
.prod-desc{
  font-size:12px; color:var(--text-h3); margin-bottom:6px;
}
.prod-price{
  font-size:15px; font-weight:700; color:var(--danger);
}
.prod-unit{
  font-size:11px; font-weight:400; color:var(--text-h3); margin-left:2px;
}

.detail-price .prod-unit{
  font-size:14px; color:var(--text-h3); margin-left:4px;
}

.prod-action{ flex-shrink:0; }

.prod-fav{
  width:36px; height:36px; border:none; border-radius:50%;
  background:var(--card-bg); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dis); transition:all .2s;
  -webkit-tap-highlight-color:transparent;
}
.prod-fav svg{ width:18px; height:18px; }
.prod-fav:active{ transform:scale(.9); }
.prod-fav.liked{
  color:var(--danger); background:var(--btn-others-bg);
}
.prod-fav.liked svg{ fill:currentColor; }

/* ============================================
   Product Detail
   ============================================ */

.detail-topbar{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:var(--bg);
  position:sticky; top:0; z-index:50;
}
.topbar-back{
  width:34px; height:34px; border:none; border-radius:50%;
  background:var(--card-bg); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-h2); flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.topbar-back svg{ width:20px; height:20px; }
.topbar-title{
  flex:1; font-size:15px; font-weight:600; color:var(--text-h1);
}
.topbar-fav{
  width:34px; height:34px; border:none; border-radius:50%;
  background:var(--card-bg); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dis); flex-shrink:0;
  transition:all .2s;
  -webkit-tap-highlight-color:transparent;
}
.topbar-fav svg{ width:18px; height:18px; }
.topbar-fav.liked{ color:var(--danger); background:var(--btn-others-bg); }

.detail-hero{
  width:100%; height:200px;
  display:flex; align-items:center; justify-content:center;
}
.detail-hero-icon{ font-size:72px; }

.detail-body{ padding:14px 16px 80px; }

.detail-info-row{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px;
}
.detail-info-left{ flex:1; min-width:0; }

.detail-name{
  font-family:var(--font-serif); font-size:20px; font-weight:700;
  color:var(--text-h1); letter-spacing:2px; margin-bottom:4px;
}
.detail-desc{
  font-size:13px; color:var(--text-h3);
}

.detail-price{
  font-size:26px; font-weight:700; color:var(--danger);
  font-family:var(--font-serif); flex-shrink:0;
}

.detail-divider{
  height:1px; background:var(--border); margin:20px 0;
}

.detail-sec-title{
  font-size:15px; font-weight:600; color:var(--text-h1);
  margin-bottom:10px;
}
.detail-content{
  font-size:14px; color:var(--text-h2); line-height:1.9;
}

/* 底部收藏栏 */
.detail-bottom{
  position:fixed; bottom:0; left:0; right:0;
  width:100%; max-width:480px; margin:0 auto;
  padding:8px 14px 16px;
  background:var(--bg); border-top:1px solid var(--border);
  z-index:50;
}
.detail-fav-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:12px 0; border:1px solid var(--border);
  border-radius:22px; background:var(--bg);
  font-size:15px; font-weight:600; color:var(--text-h2);
  cursor:pointer; transition:all .2s;
  -webkit-tap-highlight-color:transparent;
}
.detail-fav-btn svg{ width:20px; height:20px; }
.detail-fav-btn:active{ transform:scale(.98); }
.detail-fav-btn.liked{
  color:var(--danger); border-color:var(--danger); background:var(--btn-others-bg);
}
.detail-fav-btn.liked svg{ fill:currentColor; }

/* ============================================
   Profile
   ============================================ */

/* 资料卡片 */
.profile-card{
  display:flex; align-items:center; gap:14px;
  padding:16px; margin:10px 14px 0;
  background:var(--bg); border-radius:var(--radius);
  border:1px solid rgba(144,104,190,.12);
  box-shadow:0 2px 0 rgba(144,104,190,.08), 0 4px 10px rgba(0,0,0,.03);
  cursor:pointer;
}
.profile-avatar{
  width:56px; height:56px; border-radius:50%;
  background:var(--pri-light); color:var(--pri);
  font-family:var(--font-serif); font-size:24px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.profile-info{ flex:1; }
.profile-name{
  font-size:20px; font-weight:700; color:var(--text-h1); margin-bottom:3px;
}
.profile-phone{
  font-size:15px; color:var(--text-h2); font-weight:500;
}
.profile-arrow{
  width:18px; height:18px; color:var(--text-dis); flex-shrink:0;
}

/* 统计 */
.profile-stats{
  display:flex; align-items:center; justify-content:space-around;
  margin:14px 14px 0; padding:14px 10px;
  background:var(--card-bg); border-radius:var(--radius);
}
.stat-item{
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.stat-num{
  font-size:20px; font-weight:700; color:var(--pri);
}
.stat-label{
  font-size:11px; color:var(--text-h3);
}
.stat-div{
  width:1px; height:24px; background:var(--border);
}

/* 分区 */
.section{ margin:14px 14px 0; }
.section-divider{
  height:4px; margin:18px 14px 0;
  background:var(--pri); border-radius:2px; opacity:.25;
}
.section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.section-badge{
  font-size:12px; color:var(--pri); background:var(--pri-light);
  padding:2px 10px; border-radius:10px; font-weight:600;
}
.section-more{
  font-size:12px; color:var(--text-h3);
}

/* Tab */
.tab-row{
  display:flex; gap:0; margin-bottom:8px;
}
.tab-btn{
  flex:1; padding:8px 0; border:none; background:none;
  font-size:14px; font-weight:500; color:var(--text-h3);
  border-bottom:2px solid transparent; cursor:pointer;
  transition:all .2s;
  -webkit-tap-highlight-color:transparent;
}
.tab-btn.active{
  color:var(--pri); border-bottom-color:var(--pri); font-weight:600;
}

/* 预约卡片 */
.apt-card{
  display:flex; align-items:center; gap:10px;
  padding:12px; background:var(--bg);
  border-radius:10px; margin-bottom:6px;
  border:1px solid rgba(144,104,190,.12);
  box-shadow:0 2px 0 rgba(144,104,190,.08), 0 4px 10px rgba(0,0,0,.03);
}
.apt-card-left{ flex-shrink:0; }
.apt-card-num{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:8px;
  background:var(--pri-light); color:var(--pri);
  font-family:var(--font-serif); font-size:14px; font-weight:700;
}
.apt-card-body{ flex:1; min-width:0; }
.apt-card-date{
  font-size:13px; font-weight:500; color:var(--text-h1); margin-bottom:2px;
}
.apt-card-city{
  font-size:11px; color:var(--text-h3);
}
.apt-card-addr{
  font-size:11px; color:var(--text-h3); margin-top:1px;
}
.apt-card-tag{
  font-size:11px; font-weight:600; padding:4px 10px; border-radius:10px; flex-shrink:0;
}
.apt-card-tag.current{ background:var(--btn-avail-bg); color:var(--pri); }
.apt-card-tag.done{ background:var(--btn-mine-bg); color:var(--btn-mine); }
.apt-card-tag.cancel{ background:var(--btn-dis-bg); color:var(--text-dis); }

.empty-sm{
  text-align:center; padding:24px 0;
  font-size:13px; color:var(--text-dis);
}

/* 收藏行 */
.fav-row{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; background:var(--bg);
  border-radius:10px; margin-bottom:6px;
  border:1px solid rgba(144,104,190,.12);
  box-shadow:0 2px 0 rgba(144,104,190,.08), 0 4px 10px rgba(0,0,0,.03);
  cursor:pointer;
}
.fav-img{
  width:40px; height:40px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;
}
.fav-name{
  flex:1; font-size:14px; font-weight:500; color:var(--text-h1);
}
.fav-price{
  font-size:14px; font-weight:600; color:var(--danger); flex-shrink:0;
}
.fav-price small{ font-size:10px; font-weight:400; color:var(--text-h3); margin-left:2px; }
.fav-arrow{
  width:14px; height:14px; color:var(--text-dis); flex-shrink:0;
}

/* 取消按钮 */
.apt-cancel-btn{
  flex-shrink:0; padding:6px 14px; border:1px solid var(--border);
  border-radius:14px; background:var(--bg); color:var(--text-h3);
  font-size:12px; font-weight:500; cursor:pointer;
  transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.apt-cancel-btn:active{ border-color:var(--danger); color:var(--danger); }

/* 菜单卡片 */
.menu-card{
  display:flex; align-items:center; gap:12px;
  padding:16px 14px; margin-bottom:8px;
  background:var(--bg); border-radius:10px;
  border:1px solid rgba(144,104,190,.12);
  box-shadow:0 2px 0 rgba(144,104,190,.08), 0 4px 10px rgba(0,0,0,.03);
  cursor:pointer; transition:transform .15s, box-shadow .15s;
}
.menu-card:active{ transform:scale(.98); box-shadow:0 1px 0 rgba(144,104,190,.10), 0 2px 4px rgba(0,0,0,.04); }
.menu-icon{
  width:22px; height:22px; color:var(--pri); flex-shrink:0;
}
.menu-icon.heart-icon{ color:var(--danger); }
.menu-label{
  flex:1; font-size:15px; font-weight:500; color:var(--text-h1);
}
.menu-count{ font-size:13px; color:var(--text-h3); }
.menu-val{ font-size:13px; color:var(--text-h3); margin-right:4px; }
.menu-arrow{
  width:14px; height:14px; color:var(--text-dis); flex-shrink:0;
}

/* 分区标题图标 */
.sec-icon{
  width:18px; height:18px; color:var(--pri); flex-shrink:0; margin-right:4px;
}
.section-title{
  display:flex; align-items:center;
  font-size:15px; font-weight:600; color:var(--text-h1);
}

/* Tab 在页面级使用时加 margin */
.tab-row-page{
  margin:0 14px;
}

/* 退出登录 */
.logout-btn{
  width:100%; padding:14px 0; border:none; border-radius:32px;
  background:linear-gradient(135deg,var(--pri),var(--pri-hover));
  color:#fff; font-size:16px; font-weight:600; cursor:pointer;
  letter-spacing:4px; transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.logout-btn:active{ transform:scale(.97); opacity:.9; }

/* ============================================
   Auth Pages
   ============================================ */
.form-page{ background:var(--bg); }
.form-page #app{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px 16px;
}
.form-center{
  padding:16px;
}

.auth-card{
  width:100%; max-width:380px;
  background:var(--bg); border-radius:20px;
  border:1px solid rgba(144,104,190,.10);
  box-shadow:0 2px 0 rgba(144,104,190,.06), 0 8px 24px rgba(0,0,0,.04);
  padding:40px 24px 24px;
}

.auth-logo{
  width:56px; height:56px; margin:0 auto 12px;
  color:var(--pri);
}
.auth-brand{
  text-align:center; font-family:var(--font-serif);
  font-size:22px; font-weight:700; color:var(--text-h1);
  letter-spacing:4px; margin-bottom:4px;
}
.auth-slogan{
  text-align:center; font-size:12px; color:var(--text-h3);
  letter-spacing:2px; margin-bottom:32px;
}

.auth-form{ display:flex; flex-direction:column; gap:12px; }

.auth-input-wrap{
  display:flex; align-items:center; gap:8px;
  padding:0 12px; border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg);
  transition:border-color .2s;
}
.auth-input-wrap:focus-within{ border-color:var(--pri); }
.auth-input-icon{
  width:18px; height:18px; color:var(--text-dis); flex-shrink:0;
}
.auth-input{
  flex:1; padding:14px 0; border:none; background:none;
  font-size:15px; color:var(--text-h1); outline:none;
  font-family:var(--font-sans);
}
.auth-input::placeholder{ color:var(--text-dis); }
.auth-eye{
  width:32px; height:32px; border:none; border-radius:6px;
  background:none; color:var(--text-dis); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; -webkit-tap-highlight-color:transparent;
}
.auth-eye svg{ width:18px; height:18px; }
.auth-eye:active{ background:var(--card-bg); }

.auth-btn{
  width:100%; padding:14px 0; border:none; border-radius:32px;
  background:linear-gradient(135deg,var(--pri),var(--pri-hover));
  color:#fff; font-size:16px; font-weight:600; cursor:pointer;
  letter-spacing:4px; transition:all .15s;
  -webkit-tap-highlight-color:transparent;
  margin-top:4px;
}
.auth-btn:active{ transform:scale(.97); opacity:.9; }

.auth-wechat{
  width:100%; padding:12px 0; border:1px solid var(--border);
  border-radius:32px; background:var(--bg);
  color:var(--text-h3); font-size:14px; font-weight:500;
  cursor:pointer; display:flex; align-items:center;
  justify-content:center; gap:6px; letter-spacing:1px;
  transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.auth-wechat:active{ background:var(--card-bg); }

.auth-links{
  display:flex; align-items:center; justify-content:center; gap:0;
  margin-top:20px;
}
.auth-links a{
  flex:1; text-align:center;
  padding:12px 0; border-radius:24px;
  background:var(--card-bg); color:var(--text-h2);
  font-size:14px; font-weight:500; text-decoration:none;
  transition:all .15s;
}
.auth-links a:active{ background:var(--pri-light); color:var(--pri); }
.auth-link-div{ margin:0 8px; color:var(--text-dis); }
.auth-links.single a{ max-width:200px; margin:0 auto; }

.auth-agree{
  display:flex; align-items:flex-start; gap:6px;
  margin-top:14px; padding:0 8px;
  font-size:11px; color:var(--text-h3); line-height:1.5;
  cursor:pointer;
}
.auth-agree input[type="checkbox"]{ margin-top:2px; accent-color:var(--pri); }
.auth-agree a{ color:var(--link); text-decoration:none; }

/* ============================================
   Profile Edit
   ============================================ */
.edit-wrap{ padding:8px 14px 32px; }

/* 卡片 */
.edit-card{
  background:var(--bg); border-radius:16px;
  border:1px solid rgba(144,104,190,.10);
  box-shadow:0 2px 0 rgba(144,104,190,.06), 0 8px 24px rgba(0,0,0,.03);
  padding:20px 16px; margin-bottom:12px;
}
.edit-card-title{
  font-size:14px; font-weight:600; color:var(--pri);
  margin-bottom:16px; letter-spacing:1px;
}
.edit-card-hint{
  font-size:11px; color:var(--text-dis); margin-top:-10px; margin-bottom:16px;
}

/* 头像行 */
.edit-avatar-row{
  display:flex; align-items:center; gap:14px; margin-bottom:16px;
}
.edit-avatar{
  width:56px; height:56px; border-radius:50%;
  background:var(--pri-light); color:var(--pri);
  font-family:var(--font-serif); font-size:24px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.edit-avatar-hint{
  font-size:12px; color:var(--link);
}

/* 字段 */
.edit-field{ margin-bottom:16px; }
.edit-field:last-child{ margin-bottom:0; }
.edit-label{
  display:block; font-size:12px; font-weight:500;
  color:var(--text-h3); margin-bottom:8px;
}
.edit-input{
  width:100%; padding:12px; border:1px solid var(--border);
  border-radius:12px; font-size:14px; color:var(--text-h1);
  background:var(--bg); outline:none;
  font-family:var(--font-sans);
  transition:border-color .2s;
}
.edit-input:focus{ border-color:var(--pri); }
.edit-input::placeholder{ color:var(--text-dis); }
.edit-input.flex-1{ flex:1; }

/* 密码框 + 眼睛 */
.edit-input-wrap{
  position:relative; display:flex; align-items:center;
}
.edit-input-wrap .edit-input{ padding-right:40px; }
.edit-eye{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:none; border-radius:6px;
  background:none; color:var(--text-dis); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.edit-eye svg{ width:18px; height:18px; }
.edit-eye:active{ background:var(--card-bg); }

/* 验证码区 */
.edit-sms{ padding:4px 0 16px; }
.edit-sms .edit-label{ margin-bottom:8px; }
.edit-sms-row{ display:flex; gap:10px; }

/* 保存按钮 */
.edit-save-btn{
  width:100%; padding:14px 0; border:none; border-radius:32px;
  background:linear-gradient(135deg,var(--pri),var(--pri-hover));
  color:#fff; font-size:16px; font-weight:600; cursor:pointer;
  letter-spacing:4px; transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.edit-save-btn:active{ transform:scale(.97); opacity:.9; }

/* ============================================
   Forms (register/forgot pages)
   ============================================ */
.form-wrap{
  padding:16px 18px 40px;
  min-height:calc(100vh - 100px);
  display:flex; flex-direction:column; justify-content:center;
}
.form-group{ margin-bottom:16px; }
.form-label{
  display:block; font-size:13px; font-weight:600;
  color:var(--text-h2); margin-bottom:6px;
}
.form-input{
  width:100%; padding:12px 14px;
  border:1px solid var(--border); border-radius:10px;
  font-size:15px; color:var(--text-h1); background:var(--bg);
  outline:none; font-family:var(--font-sans);
  transition:border-color .2s;
}
.form-input:focus{ border-color:var(--pri); }
.form-input::placeholder{ color:var(--text-dis); }
.form-input.flex-1{ flex:1; }

.form-row{ display:flex; gap:10px; }
.sms-btn{
  flex-shrink:0; padding:12px 14px;
  border:1px solid var(--pri); border-radius:12px;
  background:var(--bg); color:var(--pri);
  font-size:13px; font-weight:600; cursor:pointer;
  white-space:nowrap; transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.sms-btn:disabled{ color:var(--text-dis); border-color:var(--border); }

.form-btn{
  width:100%; padding:14px 0; margin-top:8px;
  border:none; border-radius:24px;
  background:var(--pri); color:#fff;
  font-size:16px; font-weight:600; cursor:pointer;
  letter-spacing:2px; transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.form-btn:active{ transform:scale(.98); opacity:.9; }

.form-link{
  text-align:center; margin-top:18px;
  font-size:13px; color:var(--text-h3);
}
.form-link a{ color:var(--pri); text-decoration:none; font-weight:500; }
.form-link-div{ margin:0 8px; color:var(--text-dis); }

/* ============================================
   Animations
   ============================================ */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes popIn{ from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-3px)} 40%{transform:translateX(3px)}
  60%{transform:translateX(-2px)} 80%{transform:translateX(2px)}
}