/* =============================================
   中道门修习系统 · 设计系统 v2.0
   暖白极简宋体风 · 基于 zdm-spec 规格书
   ============================================= */

/* ── Google Fonts ─────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap');

/* ── Reset ────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* ── Design Tokens ────────────────────────── */
:root{
  /* 颜色 */
  --bg:#F8F6F3;
  --card:#FFFFFF;
  --line:rgba(0,0,0,.06);
  --ink:#1A1A1A;
  --gray:#6B6B6B;
  --light:#A3A3A3;
  --accent:#C23B22;
  --green:#4A8C5A;
  --green-bg:#EEF5EF;
  --gold:#C4A962;
  --gold-bg:#F8F4EA;
  --red-bg:#FDF2EF;

  /* 字体 */
  --font-serif:"Songti SC","Noto Serif SC","STSong",serif;
  --font-mono:"SF Mono","JetBrains Mono","Menlo",monospace;

  /* 圆角 */
  --radius-lg:14px;
  --radius-md:10px;
  --radius-sm:6px;

  /* 阴影 */
  --shadow:0 1px 3px rgba(0,0,0,.03),0 2px 8px rgba(0,0,0,.02);

  /* 间距 */
  --sp-xs:4px;
  --sp-sm:8px;
  --sp-md:12px;
  --sp-lg:16px;
  --sp-xl:20px;

  /* 安全区域 */
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

/* ── 基础排版 ──────────────────────────────── */
html,body{
  width:100%;min-height:100%;
  background:var(--bg);color:var(--ink);
  font-family:var(--font-serif);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body{
  display:flex;flex-direction:column;
  max-width:430px;margin:0 auto;
  min-height:100vh;position:relative;
}

/* ── Splash / 角色选择 ─────────────────────── */
.splash{
  position:fixed;inset:0;z-index:200;
  background:var(--card);
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  padding:40px;
  transition:opacity .3s,transform .3s;
  max-width:430px;margin:0 auto;
}
.splash.hide{opacity:0;transform:scale(1.04);pointer-events:none}
.splash-logo{font-size:38px;letter-spacing:8px;font-weight:600;margin-bottom:6px}
.splash-sub{font-size:14px;color:var(--gray);letter-spacing:2px;margin-bottom:32px}
.splash-btns{display:flex;flex-direction:column;gap:12px;width:100%;max-width:240px}
.splash-btns button{
  width:100%;padding:15px;border-radius:var(--radius-md);
  font-size:16px;font-weight:500;cursor:pointer;border:none;
  transition:all .12s;font-family:var(--font-serif);
}
.splash-btns button:active{transform:scale(.97)}
.splash-btns .btn-primary{background:var(--ink);color:#fff}
.splash-btns .btn-secondary{background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.splash-ver{font-size:12px;color:var(--light);margin-top:24px;letter-spacing:1px}

/* ── Header ────────────────────────────────── */
.app-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 20px;background:var(--card);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.app-header .left{display:flex;align-items:center;gap:10px}
.app-header .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.app-header .title{font-size:17px;font-weight:600;letter-spacing:2px}
.app-header .role-tag{
  font-size:11px;padding:3px 8px;border-radius:4px;
  background:var(--bg);color:var(--gray);font-weight:500;
}
.app-header .right{font-size:13px;color:var(--gray);cursor:pointer}
.app-header .right:active{opacity:.7}

/* ── 滚动区域 ──────────────────────────────── */
.scroll-area{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(50px + var(--safe-bottom));
}
.scroll-area::-webkit-scrollbar{display:none}

/* ── 页面容器 ──────────────────────────────── */
.page{display:none;padding:14px 20px 8px}
.page.show{display:block}
.sub-page{display:none;padding:14px 20px 8px}
.sub-page.show{display:block}

/* ── 底部导航 ──────────────────────────────── */
.tab-nav{
  display:flex;background:var(--card);
  border-top:1px solid var(--line);
  padding:5px 0 calc(5px + var(--safe-bottom));
  position:fixed;bottom:0;left:0;right:0;
  max-width:430px;margin:0 auto;z-index:50;
}
.tab-nav .tab{
  flex:1;display:flex;flex-direction:column;align-items:center;
  gap:2px;padding:6px 0;cursor:pointer;
  font-size:11px;color:var(--light);
  transition:color .12s;user-select:none;
}
.tab-nav .tab svg{
  width:22px;height:22px;stroke:currentColor;stroke-width:1.8;
  fill:none;stroke-linecap:round;stroke-linejoin:round;margin-bottom:2px;
}
.tab-nav .tab.active{color:var(--ink)}

/* ── Block 标题 ────────────────────────────── */
.block{margin-bottom:16px}
.block-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.block-header h3{font-size:17px;font-weight:600;letter-spacing:.5px}
.block-header .more{font-size:13px;color:var(--light)}

/* ── Hero 卡片 ─────────────────────────────── */
.hero{
  background:var(--card);border-radius:var(--radius-lg);
  padding:24px 20px;box-shadow:var(--shadow);
  text-align:center;border:1px solid var(--line);
}
.hero .brand{font-size:22px;font-weight:600;letter-spacing:5px}
.hero .slogan{font-size:13px;color:var(--gray);letter-spacing:2px;margin-bottom:14px}
.hero .streak-row{display:flex;align-items:baseline;justify-content:center;gap:8px}
.hero .streak-num{font-family:var(--font-mono);font-size:34px;font-weight:600;letter-spacing:-1px}
.hero .streak-label{font-size:14px;color:var(--gray)}
.hero .progress-bar{height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin:8px 0 4px}
.hero .progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),#D66A55);border-radius:2px}
.hero .meta{display:flex;justify-content:space-between;font-size:12px;color:var(--light)}

/* ── 四宫格卡片（今日修习） ─────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.practice-card{
  background:var(--card);border-radius:var(--radius-lg);
  padding:16px;box-shadow:var(--shadow);cursor:pointer;
  border:1px solid var(--line);transition:transform .1s;
}
.practice-card:active{transform:scale(.97)}
.practice-card svg{
  width:26px;height:26px;stroke:var(--ink);stroke-width:1.8;
  fill:none;margin-bottom:6px;
}
.practice-card .label{font-size:13px;color:var(--gray)}
.practice-card .value{font-size:15px;font-weight:500;margin-top:2px}

/* ── 文章卡片 ──────────────────────────────── */
.article-card{
  background:var(--card);border-radius:var(--radius-lg);
  padding:16px;box-shadow:var(--shadow);border:1px solid var(--line);
}
.article-card .tag{
  display:inline-block;padding:2px 8px;
  background:var(--red-bg);color:var(--accent);
  border-radius:4px;font-size:12px;font-weight:500;margin-bottom:6px;
}
.article-card h4{font-size:17px;font-weight:500;line-height:1.4;margin-bottom:4px}
.article-card p{font-size:15px;color:var(--gray);line-height:1.7}

/* ── Feed 动态 ─────────────────────────────── */
.feed-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.feed-item:last-child{border:none}
.feed-item .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.feed-item .info{flex:1;min-width:0}
.feed-item .name{font-size:15px;font-weight:500}
.feed-item .desc{font-size:14px;color:var(--gray);margin-top:2px}
.feed-item .badge{font-size:13px;padding:3px 8px;border-radius:4px;font-weight:500;white-space:nowrap}

/* ── 三列统计 ──────────────────────────────── */
.stats-3{display:flex;gap:10px;margin-bottom:12px}
.stats-3 .item{
  flex:1;text-align:center;background:var(--card);
  padding:12px 8px;border-radius:var(--radius-md);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.stats-3 .num{font-family:var(--font-mono);font-size:22px;font-weight:600}
.stats-3 .label{font-size:12px;color:var(--gray);margin-top:3px}

/* ── 日历 ──────────────────────────────────── */
.calendar{
  background:var(--card);border-radius:var(--radius-lg);
  padding:14px 16px;box-shadow:var(--shadow);
  border:1px solid var(--line);margin-bottom:12px;
}
.cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.cal-header .month{font-size:16px;font-weight:600}
.cal-header .arrow{color:var(--light);font-size:18px;cursor:pointer;padding:4px 8px}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:13px;color:var(--light);margin-bottom:4px}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.cal-days .day{padding:6px 0;font-size:14px;border-radius:6px}
.cal-days .day.checked{background:var(--green-bg);color:var(--green);font-weight:500}
.cal-days .day.missed{color:var(--light);opacity:.35}
.cal-days .day.today{background:var(--accent);color:#fff;font-weight:600}
.cal-days .day.other{color:var(--light);opacity:.18}

/* ── 上传区域 ──────────────────────────────── */
.upload-zone{
  background:var(--card);border-radius:var(--radius-lg);
  padding:16px;border:1px dashed var(--line);
  text-align:center;cursor:pointer;margin-bottom:8px;
}
.upload-zone:active{border-color:var(--accent)}
.upload-zone svg{width:30px;height:30px;stroke:var(--gray);stroke-width:1.8;fill:none;margin-bottom:4px}
.upload-zone .hint{font-size:15px;color:var(--gray)}
.upload-zone .sub{font-size:13px;color:var(--light);margin-top:3px}
.upload-zone.selected{border-color:var(--green);border-style:solid}
.upload-zone.selected .hint{color:var(--green);font-weight:500}

/* ── 表单 ──────────────────────────────────── */
textarea{
  width:100%;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:12px;
  font-family:var(--font-serif);font-size:16px;color:var(--ink);
  resize:none;outline:none;min-height:60px;
  transition:border-color .15s;line-height:1.6;
}
textarea:focus{border-color:var(--ink)}
textarea::placeholder{color:var(--light)}
input[type="text"],input[type="password"]{
  width:100%;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:12px 14px;
  font-family:var(--font-serif);font-size:16px;color:var(--ink);
  outline:none;transition:border-color .15s;
}
input:focus{border-color:var(--ink)}
input::placeholder{color:var(--light)}

/* ── 按钮 ──────────────────────────────────── */
.btn{
  width:100%;padding:14px;background:var(--ink);color:#fff;
  border:none;border-radius:var(--radius-md);font-size:16px;
  font-weight:600;cursor:pointer;transition:all .1s;
  font-family:var(--font-serif);
}
.btn:active{transform:scale(.98);opacity:.9}
.btn-sm{
  padding:9px 16px;background:var(--ink);color:#fff;
  border:none;border-radius:var(--radius-md);
  font-size:14px;cursor:pointer;font-family:var(--font-serif);
}
.btn-outline{
  width:100%;padding:14px;background:var(--bg);color:var(--accent);
  border:none;border-radius:var(--radius-md);font-size:16px;
  font-weight:600;cursor:pointer;font-family:var(--font-serif);
}

/* ── 排行榜 ────────────────────────────────── */
.leaderboard{
  background:var(--card);border-radius:var(--radius-lg);
  border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;
}
.lb-row{
  display:grid;grid-template-columns:26px 1fr auto;
  align-items:center;gap:8px;padding:10px;
  border-bottom:1px solid var(--line);
}
.lb-row:last-child{border:none}
.lb-row .rank{text-align:center;font-size:15px;font-weight:600;font-family:var(--font-mono)}
.lb-row .rank.gold{color:var(--gold)}
.lb-row .rank.silver{color:#9A9A9A}
.lb-row .rank.bronze{color:#B8864E}
.lb-row .user{display:flex;align-items:center;gap:8px}
.lb-row .avatar{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#fff;
}
.lb-row .user-name{font-size:15px;font-weight:500}
.lb-row .stats{text-align:right}
.lb-row .stats .days{font-family:var(--font-mono);font-size:14px;font-weight:600}
.lb-row .stats .stars{font-size:12px;color:var(--gray)}
.lb-row.me{background:var(--red-bg);border-radius:5px}

/* ── 个人中心 ──────────────────────────────── */
.profile-header{padding:16px 0 10px;text-align:center}
.profile-header .avatar-lg{
  width:52px;height:52px;border-radius:50%;margin:0 auto 8px;
  background:var(--ink);display:flex;align-items:center;justify-content:center;
  font-size:20px;color:#fff;
}
.profile-header .name{font-size:18px;font-weight:600}
.profile-header .role{font-size:14px;color:var(--gray);margin:2px 0 6px}
.profile-header .badges{display:flex;justify-content:center;gap:6px}
.profile-header .badges span{
  padding:3px 10px;border-radius:12px;font-size:13px;
  background:var(--bg);border:1px solid var(--line);color:var(--gray);
}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px}
.grid-3 .item{
  text-align:center;padding:10px;background:var(--card);
  border-radius:var(--radius-md);border:1px solid var(--line);box-shadow:var(--shadow);
}
.grid-3 .item .num{font-family:var(--font-mono);font-size:20px;font-weight:600}
.grid-3 .item .label{font-size:13px;color:var(--gray);margin-top:3px}

/* ── 菜单列表 ──────────────────────────────── */
.menu-list{
  border-radius:var(--radius-lg);overflow:hidden;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
}
.menu-list a,.menu-list a:visited,.menu-list a:link,.menu-list a:hover,.menu-list a:active{color:#1a1a2e !important;text-decoration:none !important}
.menu-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--line);
  cursor:pointer;transition:background .1s;
}
.menu-item:last-child{border:none}
.menu-item:active{background:rgba(0,0,0,.015)}
.menu-item svg{width:20px;height:20px;stroke:var(--gray);stroke-width:1.8;fill:none;flex-shrink:0}
.menu-item .label{flex:1;font-size:16px}
.menu-item .arrow{color:var(--light);font-size:14px}

/* ── 子页面顶栏 ────────────────────────────── */
.sub-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-top:4px}
.sub-header .back{cursor:pointer;font-size:20px;color:var(--light)}
.sub-header h3{font-size:17px;font-weight:600}

/* ── 视频卡片 ──────────────────────────────── */
.video-card{
  background:var(--card);border-radius:var(--radius-lg);
  padding:14px;border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:10px;
}
.video-card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.video-card .top .name{font-size:15px;font-weight:500}
.video-card .top .time{font-size:13px;color:var(--gray)}
.video-card .thumb{
  width:100%;height:160px;background:#1a1a2e;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;margin-bottom:8px;
  cursor:pointer;overflow:hidden;position:relative;
  background-size:cover;background-position:center;
}
.video-card .thumb .play-btn{
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,.2);font-size:16px;color:#1a1a2e;
  transition:transform .2s;z-index:1;
}
.video-card .thumb:active .play-btn{transform:scale(0.9)}
.video-card .desc{font-size:14px;color:var(--gray);margin-bottom:8px}
.video-actions{display:flex;gap:8px}
.video-actions button{
  flex:1;padding:8px;text-align:center;border-radius:6px;
  font-size:14px;cursor:pointer;border:1px solid var(--line);
  background:var(--card);color:var(--gray);transition:all .1s;
  font-family:var(--font-serif);
}
.video-actions button:active{background:var(--bg)}
.video-actions button.primary{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ── 学员配置卡片 ──────────────────────────── */
.config-card{
  background:var(--card);border-radius:var(--radius-lg);
  padding:14px;border:1px solid var(--line);margin-bottom:12px;
}
.config-card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.config-card .name{font-size:15px;font-weight:500}
.config-card .streak{font-size:13px;padding:3px 10px;border-radius:4px}
.config-card .grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.config-card .grid .item{font-size:14px;color:var(--gray)}
.config-card .grid .item .val{font-weight:500;color:var(--ink);margin-left:2px}
.config-assign{display:flex;gap:8px;margin-top:10px}
.config-assign select{
  flex:1;padding:9px;border:1px solid var(--line);border-radius:var(--radius-md);
  font-family:var(--font-serif);font-size:14px;color:var(--ink);
  background:var(--card);outline:none;
}

/* ── 星级评分 ──────────────────────────────── */
.stars{display:flex;gap:6px;font-size:28px;cursor:pointer;padding:4px 0}
.stars .star{color:var(--line);transition:color .1s}
.stars .star.on{color:var(--gold)}

/* ── 模态框 ────────────────────────────────── */
.modal{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.2);z-index:100;
  justify-content:center;align-items:center;padding:32px;
}
.modal.show{display:flex}
.modal-body{
  background:var(--card);border-radius:var(--radius-lg);
  padding:24px 22px;max-width:270px;width:100%;
  box-shadow:0 4px 24px rgba(0,0,0,.06);text-align:center;
}
.modal-body .icon{
  width:36px;height:36px;border-radius:50%;
  margin:0 auto 8px;display:flex;align-items:center;justify-content:center;
  font-size:18px;
}
.modal-body h3{font-size:14px;font-weight:600;margin-bottom:5px}
.modal-body p{font-size:12px;color:var(--gray);line-height:1.5}
.modal-body .btn{margin-top:10px}

/* ── 登录表单 ──────────────────────────────── */
.login-card{
  background:var(--card);border-radius:var(--radius-lg);
  padding:24px;box-shadow:var(--shadow);border:1px solid var(--line);
  width:100%;max-width:320px;
}
.login-card .form-group{margin-bottom:12px}
.login-card .form-group label{display:block;font-size:11px;color:var(--gray);margin-bottom:4px}

/* ── 视频网格 ──────────────────────────────── */
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.video-grid .item .thumb{height:90px}
.video-grid .item .date{font-size:11px;color:var(--gray);margin-top:4px}

/* ── 柱状图 ────────────────────────────────── */
.bar-chart{display:flex;gap:8px;height:80px;align-items:flex-end;padding:0 4px}
.bar-chart .bar{
  flex:1;border-radius:4px 4px 0 0;position:relative;
  background:var(--accent);opacity:.7;
}
.bar-chart .bar-label{
  position:absolute;bottom:-16px;left:0;right:0;
  text-align:center;font-size:9px;color:var(--gray);
}

/* ── 动画 ──────────────────────────────────── */
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.fade-in{animation:fadeIn .3s ease}

/* ── 模态框 ────────────────────────────────── */
.modal{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;
  background:rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.modal.show{opacity:1;pointer-events:auto}
.modal-body{
  background:var(--card);border-radius:var(--radius-lg);
  padding:36px 28px;text-align:center;width:85%;max-width:320px;
  transform:scale(.85);transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 20px 60px rgba(0,0,0,.15);
}
.modal.show .modal-body{transform:scale(1)}
.modal-body .icon{
  width:64px;height:64px;border-radius:50%;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;color:var(--green);
  animation:successPop .5s cubic-bezier(.34,1.56,.64,1) .15s both;
}
.modal-body h3{font-size:20px;font-weight:600;margin-bottom:8px}
.modal-body p{font-size:15px;color:var(--gray);line-height:1.6;margin-bottom:20px}
.modal-body p strong{color:var(--accent);font-size:20px}
.modal-body .btn{margin-top:4px}

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

/* 纸屑动画 */
.confetti-container{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:1000;overflow:hidden}
.confetti{
  position:absolute;width:10px;height:10px;top:-10px;
  animation:confettiFall 2.5s ease-in forwards;
}
@keyframes confettiFall{
  0%{transform:translateY(0) rotate(0deg);opacity:1}
  100%{transform:translateY(100vh) rotate(720deg);opacity:0}
}