/* ============================================================
   成长积分小管家 · 视觉层（设计令牌驱动，家长/学生双端一键切换）
   设计系统：家长端 近白中性灰蓝 + 多巴胺靛蓝；学生端 奶油桃粉柔和
   说明：仅改 CSS 与 app.js 切换点，DOM / 类名零改动。
   对比度修复：文字用途引入更深 --*-txt 色阶（原色保留作填充/描边），
   学生端主按钮改用深色文字，渐变统一走 var()，并加 reduced-motion 兜底。
   ============================================================ */

:root{
  /* 基底：近白中性灰蓝（家长端·专业） */
  --bg:#f4f6fb; --card:#ffffff; --line:#e9edf5; --txt:#262b36; --sub-txt:#5b6675;
  /* 主色：多巴胺靛蓝（克制专业） */
  --pri:#5b6ff5; --pri-d:#4453d6; --pri-l:#eef0ff; --pri-bd:#cdd4fa; --pri-txt:#4453d6;
  /* 多巴胺点缀（活力来源） */
  --acc-yellow:#ffd23f; --acc-pink:#ff7eb6; --acc-mint:#3ddc97; --acc-sky:#5ac8fa;
  /* 语义色（双端共用）—— 原色作填充/描边，*-txt 作文字 */
  --ok:#22b573; --ok-l:#e8f8f0; --ok-txt:#1a7f54;
  --warn:#ff9f1a; --warn-l:#fff6e5; --warn-txt:#a35900;
  --err:#d24247; --err-l:#fdecec; --err-txt:#c0344a;
  --info:#3b82f6; --info-l:#eaf2ff; --info-txt:#2f6fb0;
  --pur:#8b5cf6; --pur-l:#f3edff; --pur-txt:#6d28d9; --disabled:#c7ccd6;
  /* 圆角/阴影/间距/行高（家长端） */
  --r:14px; --r-lg:18px; --sh:0 2px 8px rgba(30,40,70,.06); --pad:16px; --lh:1.5;
  /* 图标瓦片的中性底色（彩色底纹复用各主题已有的 *-l 浅色令牌，自动跟随主题） */
  --tile-n:#eef1f6;
}

/* —— 学生端：仅覆盖变量，双端一眼可辨（.student 挂在 #phone 祖先上） —— */
.student{
  --bg:#fffaf3; --card:#ffffff; --line:#f3e9ef; --txt:#4a4458; --sub-txt:#7a6b73;
  --pri:#ff8fae; --pri-d:#e85f86; --pri-l:#ffeef3; --pri-bd:#ffd6e2; --pri-txt:#b9436c;
  --ok:#46b583; --ok-l:#eafaf3; --ok-txt:#2a7e52;
  --warn:#f0a93f; --warn-l:#fff6e8; --warn-txt:#9e630b;
  --err:#bd5467; --err-l:#ffeef1; --err-txt:#bc425a;
  --info:#5aa9e6; --info-l:#eef6ff; --info-txt:#2f71b7;
  --pur:#a87adf; --pur-l:#f6effd; --pur-txt:#7a3bc0; --disabled:#e0d2dd;
  --r:18px; --sh:0 6px 18px rgba(150,110,170,.08); --pad:20px; --lh:1.7;
  /* 形态向参考图靠拢：更大的圆角 + 更轻更散的双层阴影（原来阴影偏紧、偏灰） */
  --r-lg:22px; --sh:0 2px 6px rgba(150,110,170,.05), 0 8px 22px rgba(150,110,170,.07);
  --tile-n:#f7eef2;
  /* 主按钮：--btn-bg 独立于 --pri-d，避免为达标对比度而连带改深趋势柱/色板描边。
     樱粉的 --pri-d(#e85f86) 明度居中，白字 3.27:1、深字 2.84:1 均不达标，
     故按钮底色单独压深到 #c14f6f，配白字 4.65:1。 */
  --btn-bg:#c14f6f; --btn-fg:#ffffff;
}

/* —— 学生端主题：性别驱动默认，可手动切换（在 .student 上叠加 .theme-* 修饰类） ——
   樱粉即上方 .student 基色；其余 4 套仅覆盖品牌色令牌与顶栏/余额渐变，
   语义色（ok/warn/err/info/pur）沿用基色，保证告警语义不随主题漂移。
   --btn-bg / --btn-fg 为主按钮底色与文字色，**逐主题显式声明**（否则会继承基色）。
   经无头 Chrome 实测，每套均满足 WCAG AA 4.5:1；暖阳底浅，用深褐字。 */
.student.theme-blue{
  --bg:#f4f7ff; --line:#e6ecfb; --txt:#33415c; --sub-txt:#5f6d88;
  --pri:#5b8def; --pri-d:#3d6fe0; --pri-l:#eaf1ff; --pri-bd:#c9dbff; --pri-txt:#2f5fc9;
  --disabled:#cfd8ea; --btn-bg:#3d6fe0; --btn-fg:#ffffff; --sh:0 6px 18px rgba(70,110,200,.10);
}
.student.theme-blue #topbar,.student.theme-blue .balance{background:linear-gradient(135deg,#a9c6ff,#cfe0ff);color:var(--txt)}
.student.theme-green{
  --bg:#f3fbf6; --line:#e3f2ea; --txt:#2f4a3d; --sub-txt:#5b7868;
  --pri:#3fb98f; --pri-d:#237a5a; --pri-l:#e8f8f0; --pri-bd:#c3ebd9; --pri-txt:#1f7d5c;
  --disabled:#cfe6db; --btn-bg:#237a5a; --btn-fg:#ffffff; --sh:0 6px 18px rgba(60,150,110,.10);
}
.student.theme-green #topbar,.student.theme-green .balance{background:linear-gradient(135deg,#a9e6cd,#cdf3e2);color:var(--txt)}
.student.theme-sun{
  --bg:#fffaf0; --line:#f8efd9; --txt:#5a4622; --sub-txt:#857045;
  --pri:#f0a93f; --pri-d:#e0932a; --pri-l:#fff3df; --pri-bd:#f7dcae; --pri-txt:#9d620b;
  --disabled:#ecdcbf; --btn-bg:#f0a93f; --btn-fg:#5a3d0a; --sh:0 6px 18px rgba(200,150,60,.12);
}
.student.theme-sun #topbar,.student.theme-sun .balance{background:linear-gradient(135deg,#ffd89a,#ffe9c2);color:var(--txt)}
.student.theme-purple{
  --bg:#f8f5ff; --line:#ede6fa; --txt:#413a5c; --sub-txt:#6d6488;
  --pri:#8b6df0; --pri-d:#6f4fd8; --pri-l:#f1ebff; --pri-bd:#d9cbfb; --pri-txt:#5f3fc0;
  --disabled:#dcd2f0; --btn-bg:#6f4fd8; --btn-fg:#ffffff; --sh:0 6px 18px rgba(120,90,200,.10);
}
.student.theme-purple #topbar,.student.theme-purple .balance{background:linear-gradient(135deg,#c7b4ff,#e0d5ff);color:var(--txt)}

/* 主题色板选择器（学生端「我的主题」） */
.themesw{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:19px;cursor:pointer;border:2px solid transparent;box-shadow:var(--sh);
  transition:transform .15s,border-color .2s}
.themesw.on{transform:scale(1.08);border-color:var(--pri-d)}

/* 微交互：全局背景/阴影/文字过渡（仅颜色类，不影响布局动画） */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;
  transition:background .2s,box-shadow .2s,color .2s}

html,body{margin:0;padding:0;height:100%}
body{background:var(--line);font:14px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--txt);
  display:flex;align-items:center;justify-content:center;min-height:100vh}

#phone{width:400px;max-width:100vw;height:860px;max-height:100vh;background:var(--bg);
  border-radius:22px;overflow:hidden;box-shadow:0 12px 40px rgba(20,30,50,.18);display:flex;flex-direction:column;position:relative}
#screen{display:flex;flex-direction:column;height:100%;position:relative}

/* 顶栏：家长端靛蓝渐变；学生端奶油桃粉柔和（见下方 .student 覆盖） */
#topbar{background:linear-gradient(135deg,var(--pri),var(--pri-d));color:#fff;padding:14px var(--pad);
  display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;box-shadow:var(--sh)}
.student #topbar{background:linear-gradient(135deg,#bde0fe,#ffc8dd);color:var(--txt)}
.tb-left{font-size:17px;font-weight:600;letter-spacing:.5px}
.tb-right{display:flex;gap:8px;align-items:center}
.tb-btn{background:rgba(255,255,255,.22);border:none;color:#fff;padding:5px 11px;border-radius:20px;font-size:12px;cursor:pointer}
.tb-btn:active{background:rgba(255,255,255,.36)}
.student .tb-btn{background:rgba(74,68,88,.12);color:var(--txt)}
.student .tb-btn:active{background:rgba(74,68,88,.2)}
#view{flex:1;overflow-y:auto;padding:12px var(--pad) 76px;-webkit-overflow-scrolling:touch;line-height:var(--lh)}

/* 底部标签栏 */
#tabbar{position:absolute;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);
  display:flex;flex:0 0 auto;z-index:20;padding-bottom:env(safe-area-inset-bottom)}
.student #tabbar{background:var(--bg)}
.tab{flex:1;text-align:center;padding:7px 0 6px;color:var(--sub-txt);font-size:11px;cursor:pointer;position:relative}
.tab.on{color:var(--pri-txt);font-weight:600}
.tab .ico{font-size:20px;display:block;line-height:1.2}
.tab .dot{position:absolute;top:5px;right:50%;margin-right:-22px;background:var(--err);color:#fff;
  font-size:10px;min-width:16px;height:16px;line-height:16px;border-radius:8px;padding:0 4px}

/* 卡片 */
.card{background:var(--card);border-radius:var(--r);padding:var(--pad);margin-bottom:10px;
  box-shadow:var(--sh);transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:0 8px 22px rgba(30,40,70,.1);transform:translateY(-2px)}
.student .card:hover{box-shadow:0 12px 28px rgba(150,110,170,.14)}
.card.tight{padding:calc(var(--pad) - 5px) calc(var(--pad) - 3px)}
.ttl{font-size:13px;font-weight:600;color:var(--sub-txt);margin:14px 4px 7px}
.student .ttl{font-size:14px;font-weight:700}
.ttl:first-child{margin-top:2px}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.muted{color:var(--sub-txt);font-size:12px}
.big{font-size:34px;font-weight:700;line-height:1.1}

/* 按钮：学生端主按钮走 --btn-bg / --btn-fg（逐主题实测 ≥4.5:1）。
   必须显式排除 .sec / .ghost：本选择器权重 (0,4,0) 高于 .btn.sec (0,2,0)，
   不排除则会把次要按钮画得和主按钮一模一样。 */
.btn{background:var(--pri-d);color:#fff;border:none;border-radius:calc(var(--r) - 4px);padding:10px var(--pad);
  font-size:14px;cursor:pointer;font-weight:500;transition:background .2s,transform .15s}
.btn:active{background:var(--pri);transform:scale(.97)}
.btn.sec{background:var(--card);color:var(--pri-txt);border:1px solid var(--pri-bd)}
.student .btn.sec{background:var(--card);color:var(--pri-txt);border:1px solid var(--pri-bd)}
.student .btn{font-weight:600}
.student .btn:not(.danger):not(.sec):not(.ghost){background:var(--btn-bg);color:var(--btn-fg)}
.btn.ghost{background:var(--bg);color:var(--txt)}
.btn.danger{background:var(--err)}
.btn.sm{padding:6px 12px;font-size:12px;border-radius:calc(var(--r) - 6px)}
.btn.full{width:100%}
.btn:disabled{background:var(--disabled);color:#fff;cursor:not-allowed}

/* 表单 */
input,select,textarea{width:100%;padding:10px calc(var(--pad) - 4px);border:1px solid var(--line);
  border-radius:calc(var(--r) - 4px);font-size:14px;background:#fff;color:var(--txt);outline:none;font-family:inherit}
input:focus,select:focus{border-color:var(--pri)}
label.fld{display:block;margin-bottom:11px}
label.fld span{display:block;font-size:12px;color:var(--sub-txt);margin-bottom:5px}

/* 筛选 chips */
.chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:3px;margin-bottom:10px}
.chip{background:var(--card);border:1px solid var(--line);border-radius:calc(var(--r) + 2px);padding:5px 13px;font-size:12.5px;
  color:var(--sub-txt);white-space:nowrap;cursor:pointer}
.chip.on{background:var(--pri-l);border-color:var(--pri);color:var(--pri-txt);font-weight:500}

/* 标签 */
.tag{display:inline-block;font-size:11px;padding:2px 7px;border-radius:5px;background:var(--bg);color:var(--sub-txt)}
.tag.ok{background:var(--ok-l);color:var(--ok-txt)} .tag.warn{background:var(--warn-l);color:var(--warn-txt)}
.tag.err{background:var(--err-l);color:var(--err-txt)} .tag.info{background:var(--info-l);color:var(--info-txt)}
.tag.pur{background:var(--pur-l);color:var(--pur-txt)}

/* 列表 */
.list{background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.item{padding:12px calc(var(--pad) - 2px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.item:last-child{border-bottom:none}
.item .grow{flex:1;min-width:0}
.item .n{font-size:14px;font-weight:500}
.student .item .n{font-size:15px}
.item .d{font-size:11.5px;color:var(--sub-txt);margin-top:2px}
.pts{font-weight:700;font-size:16px}
.pts.p{color:var(--ok-txt)} .pts.m{color:var(--err-txt)}

/* ===== 图标瓦片 / 分段进度 / 锁定态（形态参考儿童成长类 App） ===== */

/* 瓦片用「浅色底 + 彩色 emoji」，而不是参考图那种「饱和底 + 白色字形」。
   原因：emoji 自带彩色，白色化做不到，硬压反而不清晰；浅底方案观感接近，
   且底色直接复用各主题已有的 *-l 浅色令牌，换主题自动跟随、对比度天然达标。 */
.tile{width:38px;height:38px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;font-size:20px;flex:0 0 auto;background:var(--tile-n)}
.tile.t1{background:var(--pri-l)} .tile.t2{background:var(--info-l)}
.tile.t3{background:var(--ok-l)}   .tile.t4{background:var(--warn-l)}
.tile.t5{background:var(--pur-l)}
.student .tile{width:42px;height:42px;border-radius:15px;font-size:22px}

/* 分段进度条：连续条只能表达「到 47%」，段格能一眼看出「做完了 5 格、还差 5 格」。
   填充用 --pri-txt 而非 --pri：--pri 是浅品牌填充色，实测与轨道 --line 的对比度
   樱粉 2.76 / 暖阳 2.19（暖阳几乎不可见）；--pri-txt 是同一色相的深色阶，
   本就为「文字/标记」设计且 5 套主题已验证 ≥4.5:1，直接复用即可达标。 */
.segbar{display:flex;gap:3px;margin-top:9px}
.segbar i{flex:1;height:9px;border-radius:3px;background:var(--line)}
.segbar i.on{background:var(--pri-txt)}
.segbar i.hit{background:var(--ok)}
.student .segbar{gap:4px}
.student .segbar i{height:11px;border-radius:4px}

/* 锁定态：整体降饱和 + 锁标，比只把按钮置灰更接近「还没解锁」的感受。 */
.item.lock{opacity:.58}
.item.lock .tile{filter:grayscale(.6)}
.lockpill{display:inline-flex;align-items:center;gap:3px;background:var(--bg);
  color:var(--sub-txt);border-radius:999px;padding:2px 9px;font-size:11px;font-weight:600}

/* 已撤销的流水（冲正留痕）：保留可读但明确「这笔不算数」，不能做得像禁用态那么淡，
   否则家长会以为记录坏了 —— 它其实是有效历史，只是被反向流水抵消了。 */
.item.revoked .n{text-decoration:line-through;text-decoration-color:var(--sub-txt)}
.item.revoked .pts{opacity:.5}

/* 未读消息：左侧留一条主色边，比整体变色更克制，长列表里也一眼能扫到 */
.item.unread{border-left:3px solid var(--pri);padding-left:calc(var(--pad) - 5px)}
.item.unread .n{font-weight:600}

/* 学生端列表：白卡浮在奶油底上、靠留白分隔（原来是一整块白底 + 分割线） */
.student .list{background:transparent;box-shadow:none;border-radius:0}
.student .item{background:var(--card);border:none;border-bottom:none;
  border-radius:var(--r-lg);margin-bottom:8px;padding:12px calc(var(--pad) - 2px)}
.student .item:last-child{margin-bottom:0}

/* 奖励中心：2 列网格卡（参考图「愿望商店」的卡片形态） */
.shopgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.shopcard{background:var(--card);border-radius:var(--r-lg);padding:12px;box-shadow:var(--sh);
  display:flex;flex-direction:column;gap:7px}
.shopcard .t{font-size:13.5px;font-weight:600;line-height:1.35}
.shopcard .d{font-size:11px;color:var(--sub-txt);line-height:1.45}
.shopcard .pr{display:flex;align-items:baseline;gap:3px;font-weight:700;
  font-size:16px;color:var(--pri-txt)}
.shopcard .pr em{font-style:normal;font-size:11px;font-weight:600}
.shopcard.lock{opacity:.72}
.shopcard.lock .tile{filter:grayscale(.55)}

/* 顶部胶囊（连续打卡天数 / 余额） */
.pill{display:inline-flex;align-items:center;gap:4px;background:var(--card);
  border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;
  box-shadow:var(--sh);color:var(--txt)}


/* 3 秒记账网格 */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gcell{background:var(--card);border-radius:calc(var(--r) - 3px);padding:10px 4px;text-align:center;cursor:pointer;
  border:1px solid transparent;box-shadow:var(--sh);position:relative;transition:border-color .2s,transform .15s}
.gcell:active{border-color:var(--pri);transform:scale(.97)}
.gcell.dis{opacity:.42;cursor:not-allowed}
.gcell .e{font-size:21px;display:block}
.gcell .t{font-size:11px;color:var(--txt);margin-top:3px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gcell .v{font-size:11px;color:var(--pri-txt);font-weight:600;margin-top:2px}

/* 余额卡（hero）：深色填充 + 白字。
   起点用 #5669e9 而非 --pri(#5b6ff5)：后者白字仅 4.17:1，12px 标签不达标；
   #5669e9 白字 4.55:1，且只比 --pri 深 5%，肉眼几乎无差。 */
.balance{background:linear-gradient(135deg,#5669e9,var(--pri-d));color:#fff;border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
.student .balance{background:linear-gradient(135deg,#bde0fe,#ffc8dd);color:var(--txt)}
.balance .lbl{font-size:12px;opacity:.9}
.balance .num{font-size:40px;font-weight:700;line-height:1.15;margin:2px 0}
.bar{height:7px;background:rgba(255,255,255,.3);border-radius:4px;overflow:hidden;margin-top:9px}
.balance .bar{background:rgba(255,255,255,.35)}
.bar > i{display:block;height:100%;background:#fff;border-radius:4px;transition:width .5s}

/* 维度指标 */
.kv{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;background:var(--card);border-radius:var(--r);
  padding:12px 4px;box-shadow:var(--sh)}
.kv .v{font-size:19px;font-weight:700} .kv .k{font-size:11.5px;color:var(--sub-txt);margin-top:2px}
.kv .v.p{color:var(--ok-txt)} .kv .v.m{color:var(--err-txt)}

/* 打卡日历（签到热力用固定语义色，不随主题切换） */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal div{aspect-ratio:1;border-radius:5px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--sub-txt)}
.cal div.l1{background:#c9f0dc;color:#12805a} .cal div.l2{background:#7fdcb0;color:#0a5c3f}
.cal div.l3{background:#2fbd7e;color:#fff} .cal div.neg{background:#ffd4d5;color:#a32024}

/* 柱状趋势（渐变走 var()，双端自适应） */
.bars{display:flex;align-items:flex-end;gap:6px;height:110px;padding:4px 0}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.bars .col>div{width:100%}
.bars .b{flex:1;min-width:0;background:linear-gradient(180deg,var(--pri),var(--pri-d));border-radius:4px 4px 0 0;min-height:3px}
.bars .b.neg{background:linear-gradient(180deg,var(--err-l),var(--err))}
.bars .lb{font-size:10px;color:var(--sub-txt);margin-top:4px}

/* 横向条形（填充色由 app.js 内联 var() 渐变驱动） */
.hbar{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.hbar .nm{width:74px;font-size:12px;color:var(--sub-txt);text-align:right;flex:0 0 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar .tr{flex:1;height:16px;background:var(--bg);border-radius:calc(var(--r) - 6px);overflow:hidden}
.hbar .tr i{display:block;height:100%;border-radius:calc(var(--r) - 6px)}
.hbar .vv{width:42px;font-size:12px;font-weight:600}

/* 洞察卡片 */
.ins{border-left:3px solid var(--info);background:var(--info-l);padding:10px 12px;border-radius:0 calc(var(--r) - 4px) calc(var(--r) - 4px) 0;margin-bottom:8px}
.ins.warn{border-color:var(--warn);background:var(--warn-l)}
.ins.good{border-color:var(--ok);background:var(--ok-l)}
.ins .h{font-size:13px;font-weight:600;margin-bottom:3px}
.ins .b{font-size:12px;color:var(--txt);line-height:1.6}
.ins .a{font-size:11.5px;color:var(--pri-txt);margin-top:5px;font-weight:500}

/* Toast / Modal */
#toast{position:absolute;left:50%;top:70px;transform:translateX(-50%);background:rgba(30,35,45,.92);color:#fff;
  padding:9px 18px;border-radius:20px;font-size:13px;z-index:99;opacity:0;pointer-events:none;transition:opacity .25s;white-space:nowrap}
#toast.on{opacity:1}
#modal{position:absolute;inset:0;z-index:100;display:flex;align-items:center;justify-content:center}
#modal.hidden{display:none}
#modal .mask{position:absolute;inset:0;background:rgba(20,25,35,.45)}
#modal .dialog{position:relative;background:#fff;border-radius:calc(var(--r) + 2px);width:84%;max-height:78%;overflow-y:auto;padding:18px;line-height:var(--lh)}
#modal .dialog h3{margin:0 0 12px;font-size:16px}

/* 登录 */
.login{background:#fff;min-height:100%;padding:44px 26px;display:flex;flex-direction:column;justify-content:center}
.login .logo{font-size:44px;text-align:center;margin-bottom:6px}
.login h1{font-size:21px;text-align:center;margin:0 0 4px}
.login .sub{text-align:center;color:var(--sub-txt);font-size:12.5px;margin-bottom:26px}
.empty{text-align:center;color:var(--sub-txt);padding:34px 12px;font-size:13px}
.empty .e{font-size:34px;display:block;margin-bottom:8px}

/* 分段切换 */
.sw{display:flex;background:var(--bg);border-radius:calc(var(--r) - 4px);padding:3px;margin-bottom:12px}
.sw div{flex:1;text-align:center;padding:7px;font-size:13px;border-radius:calc(var(--r) - 6px);cursor:pointer;color:var(--sub-txt)}
.sw div.on{background:var(--card);color:var(--txt);font-weight:600;box-shadow:var(--sh)}

/* 周报 */
.rep{white-space:pre-wrap;font-size:13px;line-height:1.85;color:var(--txt);background:var(--card);
  border-radius:var(--r);padding:14px;box-shadow:var(--sh)}
.mini{font-size:11px;color:var(--sub-txt);margin-top:6px;line-height:1.6}

/* 开关（off 态改 var(--line) 系） */
.switch{width:44px;height:25px;border-radius:13px;background:var(--line);position:relative;cursor:pointer;transition:.2s;flex:0 0 auto}
.switch.on{background:var(--ok)}
.switch i{position:absolute;top:2.5px;left:2.5px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
.switch.on i{left:21.5px}

/* ===== v1.1 下拉化与图标选择 ===== */
.avpick{display:flex;flex-wrap:wrap;gap:7px;padding:3px 0}
.avpick span{font-size:24px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--line);border-radius:calc(var(--r) - 3px);cursor:pointer;background:var(--bg);transition:.15s}
.avpick span:hover{border-color:var(--pri);background:var(--pri-l)}
.avpick span.on{border-color:var(--pri);background:var(--pri-l);box-shadow:0 0 0 2px var(--pri-bd)}
.pickrow{display:flex;align-items:center;gap:9px}
.pickrow .ico{font-size:24px;width:38px;height:38px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--pri-l);border-radius:calc(var(--r) - 4px)}
.pickrow select{flex:1}
.prev{display:flex;align-items:center;gap:10px;background:var(--pri-l);border-radius:calc(var(--r) - 3px);padding:9px 12px;margin-top:10px}
.prev b{font-size:13.5px}
.prev .mini{margin-top:2px}
/* 修复原 var(--bd) 未定义问题 → var(--line) */
select,input[list]{appearance:none;-webkit-appearance:none;width:100%;padding:10px 30px 10px 11px;font-size:14px;
  border:1px solid var(--line);border-radius:calc(var(--r) - 4px);background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa0aa' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center;
  color:var(--txt);font-family:inherit}
select:focus,input[list]:focus{outline:none;border-color:var(--pri)}

/* 尊重用户的减少动态偏好 */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .bar > i,.switch i,.switch,.avpick span{transition:none!important}
}