/* 小草问卷调查 H5 —— 绿紫主题 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: #f3f5f9; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; color: #1f2733; }
.app { max-width: 430px; margin: 0 auto; min-height: 100vh; background: #f3f5f9; position: relative; padding-bottom: 64px; }

/* 顶部栏 */
.top { position: sticky; top: 0; z-index: 20; background: linear-gradient(135deg, #15c39a, #1aa6e8); color: #fff; padding: 14px 16px 12px; }
.top .row { display: flex; align-items: center; justify-content: space-between; }
.top h1 { font-size: 18px; margin: 0; font-weight: 800; }
.top .sub { font-size: 12px; opacity: .9; margin-top: 2px; }
.top .iconbtn { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.innTop { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid #eee; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.innTop .back { font-size: 20px; color: #15a07e; cursor: pointer; }
.innTop .t { font-size: 16px; font-weight: 700; }

/* 搜索 */
.search { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.22); border-radius: 18px; padding: 8px 14px; margin-top: 12px; color: #fff; }
.search input { flex: 1; border: 0; background: transparent; color: #fff; font-size: 14px; outline: none; }
.search input::placeholder { color: rgba(255,255,255,.85); }

/* 卡片 */
.card { background: #fff; border-radius: 14px; padding: 14px; margin: 12px; box-shadow: 0 2px 10px rgba(20,40,80,.05); }
.card.nb { margin: 10px 12px; }
.section-t { font-size: 15px; font-weight: 800; margin: 16px 16px 4px; display: flex; align-items: center; justify-content: space-between; }
.section-t .more { font-size: 12px; color: #15a07e; font-weight: 600; }

/* 首页统计 */
.stats { display: flex; gap: 10px; margin: 12px; }
.stats .st { flex: 1; background: linear-gradient(135deg, #fff, #f0fbf8); border: 1px solid #e3f5f0; border-radius: 14px; padding: 12px; text-align: center; }
.stats .st b { font-size: 22px; color: #15a07e; display: block; }
.stats .st span { font-size: 11px; color: #7a8699; }

/* 分类九宫格 */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 12px; }
.cats .c { background: #fff; border-radius: 14px; padding: 12px 6px; text-align: center; box-shadow: 0 2px 8px rgba(20,40,80,.05); }
.cats .c .ic { font-size: 24px; }
.cats .c .lb { font-size: 11px; margin-top: 6px; color: #445; }

/* 问卷卡 */
.qcard { display: flex; gap: 12px; align-items: stretch; }
.qcard .thumb { width: 76px; height: 76px; border-radius: 12px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; }
.qcard .info { flex: 1; min-width: 0; }
.qcard .info .ti { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qcard .info .de { font-size: 12px; color: #8a93a3; margin-top: 4px; line-height: 1.4; height: 34px; overflow: hidden; }
.tags { margin-top: 5px; display: flex; gap: 5px; flex-wrap: wrap; }
.tags span { font-size: 10px; color: #15a07e; background: #eafaf5; padding: 2px 7px; border-radius: 8px; }
.qcard .meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 11px; color: #9aa3b0; }
.qcard .meta .rew { color: #ff8a00; font-weight: 700; }

/* 按钮 */
.btn { background: linear-gradient(135deg, #15c39a, #1aa6e8); color: #fff; text-align: center; padding: 13px; border-radius: 26px; font-weight: 700; font-size: 15px; margin: 12px; cursor: pointer; }
.btn.ghost { background: #eafaf5; color: #15a07e; }
.btn.orange { background: linear-gradient(135deg, #ff9a3c, #ff6a3c); }
.btn.sm { display: inline-block; padding: 7px 16px; font-size: 13px; border-radius: 18px; margin: 0; }

/* 进度条 */
.prog { height: 6px; background: #eef1f6; border-radius: 4px; overflow: hidden; margin-top: 8px; }
.prog > i { display: block; height: 100%; background: linear-gradient(90deg, #15c39a, #1aa6e8); border-radius: 4px; }

/* 题目 */
.q { margin: 12px; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 2px 8px rgba(20,40,80,.05); }
.q .qt { font-weight: 700; font-size: 15px; }
.q .qt .num { color: #15a07e; margin-right: 6px; }
.q .qt .req { color: #ff5252; margin-left: 4px; }
.opt { display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-top: 8px; border: 1px solid #eceff4; border-radius: 10px; font-size: 14px; cursor: pointer; }
.opt.sel { border-color: #15c39a; background: #f0fbf8; color: #15a07e; font-weight: 600; }
.opt .dot { width: 18px; height: 18px; border: 2px solid #cdd4df; border-radius: 50%; flex: 0 0 auto; }
.opt.sel .dot { border-color: #15c39a; background: #15c39a; box-shadow: inset 0 0 0 3px #fff; }
.opt .box { border-radius: 4px; }
.opt.sel .box { border-radius: 4px; background: #15c39a; border-color: #15c39a; }

/* 完成页 */
.done { text-align: center; padding: 56px 24px; }
.done .circle { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg, #15c39a, #1aa6e8); color: #fff; font-size: 44px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.done h2 { margin: 6px 0; font-size: 20px; }
.done p { color: #8a93a3; font-size: 13px; }

/* 表单 */
.field { margin: 12px; }
.field label { font-size: 13px; color: #667; font-weight: 600; display: block; margin-bottom: 6px; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid #e3e8f0; border-radius: 10px; padding: 11px 12px; font-size: 14px; outline: none; background: #fff; font-family: inherit; }
.field textarea { min-height: 70px; resize: vertical; }
.qadd { display: flex; gap: 8px; margin: 10px 12px; }
.qadd input { flex: 1; border: 1px solid #e3e8f0; border-radius: 10px; padding: 10px; font-size: 13px; outline: none; }

/* 数据看板 */
.big { font-size: 26px; font-weight: 800; color: #15a07e; }
.kpis { display: flex; gap: 10px; margin: 12px; }
.kpis .k { flex: 1; background: #fff; border-radius: 14px; padding: 14px; text-align: center; box-shadow: 0 2px 8px rgba(20,40,80,.05); }
.kpis .k b { font-size: 20px; color: #1aa6e8; display: block; }
.kpis .k span { font-size: 11px; color: #8a93a3; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding: 0 6px; }
.bars .b { flex: 1; background: linear-gradient(180deg, #1aa6e8, #15c39a); border-radius: 6px 6px 0 0; position: relative; }
.bars .b i { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: 10px; color: #667; }
.bars .b em { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 10px; color: #9aa3b0; font-style: normal; }
.pie { display: flex; align-items: center; gap: 16px; }
.pie .ring { width: 110px; height: 110px; border-radius: 50%; background: conic-gradient(#15c39a 0 42%, #1aa6e8 42% 71%, #ffb347 71% 100%); flex: 0 0 auto; }
.pie .lg { font-size: 12px; color: #567; line-height: 1.9; }
.pie .lg b { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

/* 知识文章 */
.art { display: flex; gap: 12px; }
.art .cv { width: 84px; height: 60px; border-radius: 10px; flex: 0 0 auto; background: linear-gradient(135deg, #15c39a, #1aa6e8); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; text-align: center; padding: 4px; }
.art .at { font-weight: 700; font-size: 14px; line-height: 1.4; }
.art .am { font-size: 11px; color: #9aa3b0; margin-top: 6px; }
.rich { font-size: 14px; line-height: 1.8; color: #3a4350; }
.rich h3 { font-size: 15px; margin: 16px 0 6px; color: #15a07e; }
.rich p { margin: 8px 0; }
.rich .callout { background: #f0fbf8; border-left: 3px solid #15c39a; padding: 10px 12px; border-radius: 8px; font-size: 13px; color: #2b6; margin: 12px 0; }

/* 个人中心 */
.profile { background: linear-gradient(135deg, #15c39a, #1aa6e8); color: #fff; padding: 22px 16px; display: flex; align-items: center; gap: 14px; }
.profile .av { width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.profile .pn { font-size: 18px; font-weight: 800; }
.profile .pp { font-size: 12px; opacity: .9; margin-top: 4px; }
.menu { background: #fff; border-radius: 14px; margin: 12px; overflow: hidden; }
.menu .mi { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid #f0f3f8; }
.menu .mi:last-child { border-bottom: 0; }
.menu .mi .mi-ic { font-size: 18px; width: 24px; text-align: center; }
.menu .mi .mi-t { flex: 1; font-size: 14px; }
.menu .mi .mi-r { color: #c2c9d4; font-size: 14px; }

/* 消息 */
.msg { display: flex; gap: 12px; align-items: flex-start; }
.msg .md { width: 40px; height: 40px; border-radius: 50%; background: #eafaf5; color: #15a07e; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; }
.msg .mt { font-weight: 700; font-size: 14px; }
.msg .mx { font-size: 12px; color: #8a93a3; margin-top: 4px; line-height: 1.5; }
.msg .mti { font-size: 11px; color: #bcc3cf; margin-top: 4px; }

/* 关于 */
.about { text-align: center; padding: 24px; }
.about .logo { width: 72px; height: 72px; border-radius: 18px; background: linear-gradient(135deg, #15c39a, #1aa6e8); color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.about h3 { margin: 6px 0; }
.about p { color: #8a93a3; font-size: 13px; line-height: 1.7; }

/* 底部 Tab */
.tab { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; height: 60px; background: #fff; border-top: 1px solid #eef1f6; display: flex; z-index: 30; }
.tab .ti { flex: 1; text-align: center; padding-top: 8px; color: #9aa3b0; font-size: 11px; cursor: pointer; }
.tab .ti .ti-ic { font-size: 21px; display: block; }
.tab .ti.active { color: #15a07e; font-weight: 700; }

/* 全局动效 */
.card, .qcard, .cats .c, .opt { transition: transform .12s ease; }