/* 瀚川 Demo · H5 设计系统(自包含,无 CDN;色板取自 Stitch code.html 的 M3 蓝方案) */
:root{
  --primary:#0058bc; --on-primary:#ffffff;
  --primary-container:#0070eb; --on-primary-container:#fefcff;
  --primary-fixed:#d8e2ff; --on-primary-fixed:#001a41;
  --secondary:#0b59c4; --on-secondary:#ffffff;
  --secondary-container:#5990fe; --on-secondary-container:#002964;
  --secondary-fixed:#d9e2ff;
  --tertiary:#9a4100; --tertiary-fixed:#ffdbcb; --on-tertiary-fixed:#341100;
  --background:#f9f9ff; --surface:#f9f9ff;
  --on-surface:#181c23; --on-surface-variant:#414754;
  --surface-container-lowest:#ffffff;
  --surface-container-low:#f2f3fe;
  --surface-container:#ecedf8;
  --surface-container-high:#e6e8f2;
  --surface-container-highest:#e0e2ec;
  --outline:#727785; --outline-variant:#c1c6d6;
  --error:#ba1a1a; --error-container:#ffdad6; --on-error-container:#93000a;
  --ok:#1b7a43;
  --radius:12px;
  --shadow:0 2px 8px rgba(0,0,0,.04);
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); background:var(--background); color:var(--on-surface);
  font-size:14px; line-height:1.5; min-height:100vh;
}
#app{max-width:768px;margin:0 auto;padding:0 16px 96px;min-height:100vh}
a{color:var(--primary);text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit;font-size:14px}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  height:56px;margin:0 -16px;padding:0 16px;background:var(--surface);
}
.topbar .title{font-size:22px;font-weight:700;color:var(--primary);letter-spacing:-.01em}
.topbar .spacer{flex:1}
.topbar .sub{font-size:13px;color:var(--on-surface-variant)}
.icon-btn{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--on-surface-variant);transition:background .15s;
}
.icon-btn:active{background:var(--surface-container-high)}
.back-btn{color:var(--on-surface)}
.icon-btn.spin svg{animation:spin .8s linear infinite;transform-origin:center}

/* ---------- 通用区块 ---------- */
.section{margin-top:24px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.section-title{font-size:18px;font-weight:600}
.link-btn{font-size:12px;font-weight:500;color:var(--primary)}
.greet-h{font-size:24px;font-weight:700;letter-spacing:-.01em}
.greet-p{color:var(--on-surface-variant);margin-top:4px}

/* ---------- 卡片 ---------- */
.card{
  background:var(--surface-container-lowest);border:1px solid var(--surface-container);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.card.pad{padding:16px}
.card + .card{margin-top:12px}

/* ---------- 速览统计 ---------- */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat-grid .card + .card{margin-top:0} /* grid 用 gap 管间距,去掉堆叠卡片的顶 margin,否则非首列既下移又变矮 */
.stat{padding:16px}
.stat.wide{grid-column:1 / -1}
.stat .lab{display:flex;align-items:center;gap:8px;color:var(--on-surface-variant);margin-bottom:8px}
.stat .lab svg{color:var(--secondary)}
.stat .num{display:flex;align-items:baseline;gap:6px}
.stat .num b{font-size:24px;font-weight:700;color:var(--on-surface)}
.stat .num.primary b{color:var(--primary)}
.stat .num span{font-size:12px;color:var(--on-surface-variant)}

/* ---------- 快捷操作 ---------- */
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.quick{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--surface-container-lowest);border:1px solid var(--surface-container);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 0;transition:transform .1s;
}
.quick:active{transform:scale(.95)}
.quick .ic{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.quick .ic.p{background:var(--primary-fixed);color:var(--primary)}
.quick .ic.s{background:var(--secondary-fixed);color:var(--secondary)}
.quick .ic.t{background:var(--tertiary-fixed);color:var(--tertiary)}
.quick .ic.n{background:var(--surface-container-high);color:var(--on-surface-variant)}
.quick .tx{font-size:12px;font-weight:500}

/* ---------- 列表项 ---------- */
.list{overflow:hidden}
.list .item{
  display:flex;align-items:flex-start;gap:16px;padding:16px;
  border-bottom:1px solid var(--surface-container);transition:background .15s;
}
.list .item:last-child{border-bottom:none}
.list .item.clickable:active{background:var(--surface-container-low)}
.item .lead{
  width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
}
.lead.p{background:var(--primary-fixed);color:var(--primary)}
.lead.s{background:var(--secondary-container);color:var(--on-secondary-container)}
.lead.n{background:var(--surface-container-high);color:var(--on-surface-variant)}
.lead.t{background:var(--tertiary-fixed);color:var(--tertiary)}
.item .body{flex:1;min-width:0}
.item .row1{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
.item .name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .desc{font-size:14px;color:var(--on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .meta{font-size:12px;color:var(--outline);margin-top:2px}

/* ---------- 徽章 ---------- */
.badge{font-size:12px;font-weight:500;padding:2px 10px;border-radius:999px;white-space:nowrap;flex:none}
.badge.p{background:var(--primary-fixed);color:var(--on-primary-fixed)}
.badge.n{background:var(--surface-container-high);color:var(--on-surface-variant)}
.badge.ok{background:#d6f0e0;color:var(--ok)}
.badge.warn{background:#fdeeda;color:#9a4100}
.badge.err{background:var(--error-container);color:var(--on-error-container)}

/* ---------- chips / 筛选 ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;font-size:13px;font-weight:500;padding:7px 14px;border-radius:999px;
  background:var(--surface-container-lowest);border:1px solid var(--surface-container);color:var(--on-surface-variant);
}
.chip.on{background:var(--secondary-container);border-color:var(--secondary-container);color:var(--on-secondary-container)}

/* ---------- 表单 ---------- */
.field{margin-bottom:16px}
.field > label{display:block;font-size:13px;font-weight:600;color:var(--on-surface-variant);margin-bottom:8px}
.input,.textarea,.select{
  width:100%;padding:12px 14px;border-radius:var(--radius);background:var(--surface-container-low);
  border:1px solid transparent;color:var(--on-surface);outline:none;transition:border .15s,background .15s;
}
.textarea{min-height:120px;resize:vertical;line-height:1.6}
.input:focus,.textarea:focus,.select:focus{border-color:var(--primary);background:var(--surface-container-lowest)}
.search-wrap{position:relative;margin:8px 0 12px}
.search-wrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--outline)}
.search-wrap .input{padding-left:44px;background:var(--surface-container-lowest);border:1px solid var(--surface-container)}

/* 单选/开关行 */
.radio-row{display:flex;gap:10px;flex-wrap:wrap}
.radio{
  flex:1;min-width:96px;text-align:center;padding:11px 8px;border-radius:var(--radius);
  background:var(--surface-container-lowest);border:1px solid var(--surface-container);
  font-size:14px;font-weight:500;color:var(--on-surface-variant);
}
.radio.on{background:var(--primary-fixed);border-color:var(--primary);color:var(--primary)}
.switch-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}
.switch{position:relative;width:48px;height:28px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch .track{position:absolute;inset:0;border-radius:999px;background:var(--surface-container-high);transition:background .2s}
.switch .thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .2s}
.switch input:checked + .track{background:var(--primary)}
.switch input:checked + .track + .thumb{left:23px}

/* ---------- 按钮 ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:14px;border-radius:var(--radius);font-size:15px;font-weight:600;transition:opacity .15s,transform .1s;
}
.btn:active{transform:scale(.99)}
.btn.primary{background:var(--primary);color:var(--on-primary)}
.btn.primary:disabled{opacity:.5}
.btn.tonal{background:var(--secondary-fixed);color:var(--on-primary-fixed)}
.btn.text{background:transparent;color:var(--primary);width:auto;padding:8px 12px}
.btn.small{width:auto;padding:8px 16px;font-size:13px;border-radius:999px}
.btn-row{display:flex;gap:8px}
.btn-row .btn{flex:1}
.mini{
  font-size:12px;font-weight:500;padding:6px 12px;border-radius:999px;flex:none;
  background:var(--surface-container-low);color:var(--on-surface-variant);border:1px solid var(--surface-container);
}
.mini.primary{background:var(--primary-fixed);color:var(--primary);border-color:transparent}

/* ---------- 底部导航 ---------- */
#nav{
  position:fixed;bottom:0;left:0;right:0;z-index:30;display:none;justify-content:space-around;align-items:center;
  max-width:768px;margin:0 auto;padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:var(--surface-container);border-radius:16px 16px 0 0;box-shadow:0 -2px 12px rgba(0,0,0,.05);
}
#nav.show{display:flex}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--on-surface-variant);flex:1;padding:4px 0}
.nav-item .pill{display:flex;align-items:center;justify-content:center;padding:2px 18px;border-radius:999px;transition:background .15s}
.nav-item .tx{font-size:11px;font-weight:500}
.nav-item.on{color:var(--primary)}
.nav-item.on .pill{background:var(--secondary-container);color:var(--on-secondary-container)}

/* ---------- 头像 ---------- */
.avatar{width:40px;height:40px;border-radius:50%;background:var(--secondary-container);color:var(--on-secondary-container);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex:none}
.avatar.lg{width:64px;height:64px;font-size:26px}

/* ---------- 空态 / 加载 / 错误 ---------- */
.empty{text-align:center;color:var(--outline);padding:48px 16px}
.empty svg{color:var(--outline-variant);margin-bottom:12px}
.empty p{margin:0;font-size:14px}
.loading{text-align:center;color:var(--outline);padding:48px 0}
.spinner{width:28px;height:28px;border:3px solid var(--surface-container-high);border-top-color:var(--primary);
  border-radius:50%;margin:0 auto 12px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.error-box{background:var(--error-container);color:var(--on-error-container);border-radius:var(--radius);
  padding:16px;text-align:center;font-size:14px}
.error-box .btn{margin-top:12px;width:auto;display:inline-flex;background:var(--on-error-container);color:#fff;padding:8px 18px}

/* ---------- toast ---------- */
#toast{
  position:fixed;left:50%;bottom:120px;transform:translateX(-50%) translateY(20px);z-index:100;
  background:rgba(30,33,40,.92);color:#fff;padding:11px 20px;border-radius:999px;font-size:14px;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:80vw;text-align:center;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{background:rgba(147,0,10,.95)}

/* ---------- 登录页 ---------- */
.login-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center}
.login-logo{width:88px;height:88px;border-radius:24px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:var(--shadow)}
.login-title{font-size:22px;font-weight:700}
.login-sub{color:var(--on-surface-variant);margin:8px 0 40px;font-size:14px}
.login-wrap .btn{max-width:320px}
.login-note{color:var(--outline);font-size:12px;margin-top:20px;line-height:1.7}

/* ---------- 杂项 ---------- */
.divider{height:8px;background:transparent}
.kv{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--surface-container);font-size:14px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--on-surface-variant)}
.kv .v{font-weight:600}
.mono{font-variant-numeric:tabular-nums}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.center{text-align:center}
.muted{color:var(--on-surface-variant)}
.tag{display:inline-block;font-size:11px;padding:1px 8px;border-radius:6px;background:var(--surface-container);color:var(--on-surface-variant);margin-right:6px}
.preview{background:var(--surface-container-low);border-radius:var(--radius);padding:14px;font-size:14px;line-height:1.6;white-space:pre-wrap;word-break:break-all}

/* ---------- 多选列表(群发选人/选群、标签) ---------- */
.check-list{display:flex;flex-direction:column;gap:2px;max-height:250px;overflow-y:auto;
  border:1px solid var(--surface-container);border-radius:var(--radius);padding:4px;background:var(--surface-container-lowest)}
.check-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:14px;cursor:pointer}
.check-row:active{background:var(--surface-container-low)}
.check-row input{width:18px;height:18px;accent-color:var(--primary);flex:none}
.check-row .sub{color:var(--outline);font-size:12px;margin-left:auto;flex:none}

/* ---------- 「我的」入口列表 ---------- */
.entry{display:flex;align-items:center;gap:14px;padding:15px 16px;border-bottom:1px solid var(--surface-container);color:var(--on-surface)}
.entry:last-child{border-bottom:none}
.entry:active{background:var(--surface-container-low)}
.entry .eic{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.entry .etx{flex:1;font-size:14px;font-weight:500}
.entry .earr{color:var(--outline);flex:none;display:flex}

/* ---------- 群发目标/表单内分组 ---------- */
.sub-label{font-size:13px;font-weight:600;color:var(--on-surface-variant);margin:4px 0 8px}
.hint{font-size:12px;color:var(--outline);margin-top:6px;line-height:1.6}

/* ---------- 登录页动效(克制·品牌色·无渐变/光斑) ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.login-wrap > *{animation:fadeUp .55s cubic-bezier(.2,.7,.2,1) both}
.login-wrap > *:nth-child(1){animation-delay:.04s}
.login-wrap > *:nth-child(2){animation-delay:.11s}
.login-wrap > *:nth-child(3){animation-delay:.18s}
.login-wrap > *:nth-child(4){animation-delay:.25s}
.login-wrap > *:nth-child(5){animation-delay:.32s}
.login-wrap > *:nth-child(6){animation-delay:.39s}
.login-logo{animation:fadeUp .55s cubic-bezier(.2,.7,.2,1) both, floaty 4.8s ease-in-out .7s infinite}
.login-divider{display:flex;align-items:center;gap:12px;width:100%;max-width:320px;color:var(--outline);font-size:12px;margin:4px 0}
.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;background:var(--outline-variant)}
.login-dev{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.login-dev .btn{max-width:320px}
.login-dev .cap{font-size:12px;color:var(--outline);line-height:1.6}
@media (prefers-reduced-motion:reduce){
  .login-wrap > *,.login-logo{animation:none!important}
}