* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root {
  --brand:#D87857; --brand-dark:#c4674a;
  /* 九宫格圆角色块主题色（避开紫色） */
  --c-exam:#D87857; --c-like:#EF6C8A; --c-shop:#2BA471;
  --c-points:#F5B02E; --c-order:#4A8FE7; --c-me:#1FA9A0;
  /* 语义色 */
  --green:#16a34a; --amber:#d97706; --red:#dc2626;
  /* 中性 */
  --ink:#2b2f3a; --muted:#9aa0ad; --line:#eef0f3; --bg:#f4f6f9;
  /* 阴影层次 */
  --shadow-sm:0 1px 3px rgba(45,55,72,.06),0 1px 2px rgba(45,55,72,.04);
  --shadow-md:0 4px 16px rgba(45,55,72,.08);
  --shadow-brand:0 8px 22px rgba(216,120,87,.28);
}
body { font-family:'PingFang SC','Microsoft YaHei',sans-serif; background:var(--bg); color:var(--ink); font-size:14px; }
a { text-decoration:none; color:inherit; }
.page { max-width:480px; margin:0 auto; background:#fff; box-shadow:0 0 24px rgba(45,55,72,.04); }

.topbar { background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:10; box-shadow:var(--shadow-md); }
.topbar-title { font-size:17px; font-weight:700; }
.topbar-back { font-size:14px; display:flex; align-items:center; }
.topbar-right { font-size:13px; background:rgba(255,255,255,.2); padding:5px 12px; border-radius:14px; }

/* 积分横幅 —— 纯视觉美化（装饰光斑，不动逻辑） */
.points-banner { position:relative; overflow:hidden; background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; padding:8px 16px 26px; text-align:center; }
.points-banner::before { content:''; position:absolute; width:170px; height:170px; border-radius:50%; background:rgba(255,255,255,.12); top:-72px; right:-46px; }
.points-banner::after { content:''; position:absolute; width:96px; height:96px; border-radius:50%; background:rgba(255,255,255,.08); bottom:-52px; left:-22px; }
.pb-label { position:relative; font-size:12px; opacity:.9; letter-spacing:2px; }
.pb-num { position:relative; font-size:44px; font-weight:800; margin:2px 0; text-shadow:0 2px 12px rgba(0,0,0,.15); animation:numPop .5s ease; }
.pb-name { position:relative; font-size:13px; opacity:.92; }
@keyframes numPop { from{opacity:0;transform:scale(.6)} to{opacity:1;transform:scale(1)} }

/* 九宫格 —— 圆角色块 */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; background:#fff; margin-top:6px; padding:8px 6px; }
.cell { background:#fff; padding:18px 6px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:9px; border-radius:14px; transition:transform .15s, background .15s; animation:fadeUp .4s ease both; }
.cell:active { transform:scale(.94); background:#fafbfc; }
.cell-ico { position:relative; width:48px; height:48px; border-radius:15px; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 5px 12px var(--ico-shadow,rgba(0,0,0,.14)); }
.cell-badge { position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; line-height:14px; border-radius:9px; background:#ef4444; color:#fff; font-size:10px; font-weight:700; text-align:center; padding:0 4px; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.25); z-index:2; }
.cell-ico img { width:27px; height:27px; filter:brightness(0) invert(1); }   /* Icons8 图标统一变白 */
.cell-txt { font-size:12.5px; color:var(--ink); font-weight:500; }
.c-exam { background:var(--c-exam); --ico-shadow:rgba(216,120,87,.35); }
.c-like { background:var(--c-like); --ico-shadow:rgba(239,108,138,.35); }
.c-shop { background:var(--c-shop); --ico-shadow:rgba(43,164,113,.35); }
.c-points { background:var(--c-points); --ico-shadow:rgba(245,176,46,.35); }
.c-order { background:var(--c-order); --ico-shadow:rgba(74,143,231,.35); }
.c-me { background:var(--c-me); --ico-shadow:rgba(31,169,160,.35); }
.cell:nth-child(2){animation-delay:.04s} .cell:nth-child(3){animation-delay:.08s}
.cell:nth-child(4){animation-delay:.12s} .cell:nth-child(5){animation-delay:.16s}
.cell:nth-child(6){animation-delay:.20s}

.inp { width:100%; padding:13px; border:1.5px solid var(--line); border-radius:10px; font-size:15px; margin-bottom:12px; outline:none; transition:border-color .15s, box-shadow .15s; background:#fff; }
.inp:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(216,120,87,.13); }
textarea.inp { resize:vertical; }
.btn-primary { width:100%; padding:13px; border:none; border-radius:10px; background:var(--brand); color:#fff; font-size:16px; font-weight:600; box-shadow:var(--shadow-brand); transition:transform .12s, box-shadow .15s, background .15s; }
.btn-primary:active { background:var(--brand-dark); transform:scale(.98); box-shadow:0 4px 12px rgba(216,120,87,.25); }
.btn-primary:disabled { opacity:.6; box-shadow:none; }
.btn-ghost { width:100%; padding:11px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); font-size:14px; transition:background .15s; }
.btn-ghost:active { background:var(--bg); }

.login-wrap { position:relative; overflow:hidden; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--brand),var(--brand-dark)); padding:38px 20px 20px; }
.login-brand { position:relative; z-index:1; text-align:center; margin-bottom:22px; }
.login-brand img { height:42px; width:auto; }
.login-wrap::before { content:''; position:absolute; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.08); top:-90px; right:-70px; }
.login-wrap::after { content:''; position:absolute; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.06); bottom:-60px; left:-40px; }
.login-card { position:relative; background:#fff; border-radius:18px; padding:30px 24px 32px; width:100%; max-width:340px; text-align:center; box-shadow:0 16px 48px rgba(0,0,0,.18); animation:fadeUp .5s ease both; }
.login-logo { width:66px; height:66px; border-radius:18px; object-fit:cover; margin:0 auto 12px; display:block; box-shadow:var(--shadow-md); }
.logo { font-size:20px; font-weight:800; color:var(--brand); }
.logo-sub { font-size:12px; color:#9ca3af; margin:4px 0 22px; }
.err { color:var(--red); font-size:12px; min-height:16px; margin-bottom:6px; text-align:left; }

.card { background:#fff; margin:12px 16px; border-radius:14px; padding:16px; box-shadow:var(--shadow-sm); animation:fadeUp .4s ease both; }
.card-title { font-size:15px; font-weight:700; margin-bottom:10px; }
.list-item { padding:12px 0; border-bottom:1px solid var(--line); }
.list-item:last-child { border-bottom:none; }
.list-empty { text-align:center; color:var(--muted); padding:36px 0; font-size:13px; }
.row-between { display:flex; justify-content:space-between; align-items:center; }
.muted { color:var(--muted); font-size:12px; }
.brand-num { color:var(--brand); font-weight:700; }

.q { background:#fff; margin:12px 16px; border-radius:14px; padding:16px; box-shadow:var(--shadow-sm); animation:fadeUp .4s ease both; }
.q-idx { font-size:12px; color:var(--brand); font-weight:700; margin-bottom:6px; }
.q-stem { font-size:15px; font-weight:600; margin-bottom:12px; line-height:1.5; }
.q-opt { padding:12px; border:1.5px solid var(--line); border-radius:10px; margin-bottom:8px; font-size:14px; transition:background .12s, border-color .12s; }
.q-opt:active { background:#fafafa; }
.q-opt.sel { border-color:var(--brand); background:#fdf0ec; color:var(--brand-dark); font-weight:600; }
.q-opt.correct { border-color:var(--green); background:#f0fdf4; color:#15803d; }
.q-opt.wrong { border-color:var(--red); background:#fef2f2; color:#b91c1c; }

.tag { font-size:11px; padding:2px 8px; border-radius:10px; background:#eee; color:#6b7280; }
.tag-ok { background:#dcfce7; color:var(--green); }
.tag-wait { background:#fef3c7; color:var(--amber); }
.tag-no { background:#fee2e2; color:var(--red); }

.product { background:#fff; margin:12px 16px; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); animation:fadeUp .4s ease both; }
.product img { width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--bg); }
.product-img { width:100%; padding-top:100%; position:relative; background:var(--bg); }
.product-img img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.product-body { padding:14px; }
.product-name { font-size:15px; font-weight:600; margin-bottom:4px; }
.product-cost { color:var(--brand); font-weight:700; font-size:16px; }
.bar-actions { padding:8px 16px 24px; display:flex; gap:8px; }
.bar-actions .btn-primary { flex:1; }

/* me 头像 */
.avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; box-shadow:var(--shadow-md); }

/* 考试页产品装饰带 */
.prod-strip { display:flex; gap:10px; align-items:center; justify-content:center; overflow-x:auto; padding:8px 16px; background:linear-gradient(135deg,#fff8f3,#fff); border-bottom:1px solid var(--line); -webkit-overflow-scrolling:touch; }
.prod-strip img { height:30px; width:auto; object-fit:contain; flex-shrink:0; opacity:.88; }

/* toast —— 淡入淡出（配合 app.js 的 .show 切换） */
.toast { position:fixed; left:50%; top:40%; transform:translate(-50%,-8px); background:rgba(0,0,0,.82); color:#fff; padding:11px 20px; border-radius:10px; font-size:13px; z-index:99; opacity:0; visibility:hidden; transition:opacity .25s, transform .25s, visibility .25s; box-shadow:var(--shadow-md); max-width:80%; text-align:center; }
.toast.show { opacity:1; visibility:visible; transform:translate(-50%,0); }

@keyframes fadeUp { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
/* 页脚 —— 蓝色药友LOGO + 版权 */
.brand-foot { text-align:center; padding:18px 16px calc(28px + env(safe-area-inset-bottom)); max-width:480px; margin:0 auto; }
.brand-foot img { height:26px; opacity:.75; }
.brand-foot .copyright { margin-top:6px; font-size:11px; color:var(--muted); }

@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} }

/* 游学发票色块（琥珀棕，区别于其它色块） */
.c-invoice { background:#B45309; --ico-shadow:rgba(180,83,9,.35); }
/* 意见反馈色块（天空蓝） */
.c-feedback { background:#0EA5E9; --ico-shadow:rgba(14,165,233,.35); }
/* 每日打卡色块（绿色，破开首行暖红聚集） */
.c-checkin { background:#16A34A; --ico-shadow:rgba(22,163,74,.35); }
/* 患教投稿色块（紫色） */
.c-case { background:#8B5CF6; --ico-shadow:rgba(139,92,246,.35); }
/* 销售看板色块（靛蓝，数据看板感） */
.c-salesboard { background:#4F46E5; --ico-shadow:rgba(79,70,229,.35); }
/* 文件下载色块（青色，区别于天蓝/浅青绿） */
.c-download { background:#0891B2; --ico-shadow:rgba(8,145,178,.35); }
/* 打卡 7 天格子 */
.ck-day { flex:1; text-align:center; }
.ck-day .ck-dot { width:30px; height:30px; line-height:30px; border-radius:50%; margin:0 auto 4px; background:#eef0f3; color:#9aa0ad; font-size:13px; }
.ck-day.on .ck-dot { background:var(--brand); color:#fff; }
.ck-day.today .ck-dot { box-shadow:0 0 0 2px var(--brand); }
.ck-day .ck-w { font-size:10px; color:var(--muted); }
.ck-day .ck-d { font-size:9px; color:var(--muted); }
/* 意见反馈-客服回复块 */
.fb-reply { margin-top:8px; background:#f0fdf4; border-left:3px solid #16a34a; border-radius:8px; padding:8px 10px; font-size:13px; line-height:1.55; }

/* 文章资讯（首页/列表） */
.article-section { padding:4px 0 2px; background:#fff; }
.section-title { display:flex; justify-content:space-between; align-items:center; padding:16px 16px 6px; font-size:15px; font-weight:700; color:var(--ink); }
.section-title a { font-size:12px; color:var(--muted); font-weight:400; }
.article-item { display:flex; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid var(--line); }
.article-item:active { background:#fafbfc; }
.article-thumb { width:54px; height:54px; border-radius:10px; overflow:hidden; flex-shrink:0; background:var(--bg); }
.article-thumb img { width:100%; height:100%; object-fit:cover; }
.article-body { flex:1; min-width:0; position:relative; }
.article-new { position:absolute; top:-3px; right:0; background:var(--brand); color:#fff; font-size:9px; font-weight:800; padding:1px 6px; border-radius:8px; line-height:14px; letter-spacing:.5px; }
.article-title { font-size:14px; font-weight:600; color:var(--ink); line-height:1.45; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; }
.article-meta { font-size:11px; color:var(--muted); margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 文章详情 */
.article-detail { padding:18px 16px 10px; }
.ad-cover { width:100%; border-radius:12px; margin-bottom:14px; }
.ad-title { font-size:20px; font-weight:800; color:var(--ink); line-height:1.4; margin-bottom:6px; }
.ad-meta { font-size:12px; color:var(--muted); margin-bottom:12px; }
.ad-summary { font-size:13px; color:#6b7280; background:var(--bg); border-radius:10px; padding:10px 12px; margin-bottom:14px; line-height:1.6; }
.ad-content { font-size:15px; line-height:1.85; color:var(--ink); word-break:break-word; }

/* 发票页 */
.inv-row { display:flex; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; }
.inv-row:last-child { border-bottom:none; }
.inv-k { width:76px; flex-shrink:0; color:var(--muted); }
.inv-v { flex:1; color:var(--ink); font-weight:500; word-break:break-all; }
.copy-btn { flex-shrink:0; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:4px 12px; font-size:12px; color:var(--brand); cursor:pointer; }
.copy-btn:active { background:#fdf0ec; }
.copy-all-btn { float:right; background:var(--brand); color:#fff; border:none; border-radius:14px; padding:4px 12px; font-size:12px; cursor:pointer; }