:root{
  --green:#10b981; --green2:#059669; --gold:#d4a574; --gold2:#b8860b; --brown:#6b4c3a; --brown2:#4a3428; --cream:#fff8f0;
  --blue:var(--green); --purple:var(--gold); --sky:var(--gold2); --amber:#f59e0b;
  --red:#ef4444; --ink:#1f2733; --muted:#66708a;
  --bg:#f8f6f2; --card:#fff; --line:#efe9e3;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--green2);text-decoration:none}
.wrap{max-width:680px;margin:0 auto;padding:18px}
.card{background:var(--card);border-radius:16px;padding:18px;margin-bottom:14px;box-shadow:0 4px 18px rgba(20,40,80,.05)}
.sec{background:var(--card);border-radius:16px;padding:18px;margin-bottom:14px;box-shadow:0 4px 18px rgba(20,40,80,.05)}
.sec h3{font-size:16px;margin-bottom:12px;color:#1a3c34}
.sec h3::before{content:'▍';color:var(--green2);margin-right:6px}
.btn{display:block;width:100%;background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;border:none;padding:14px;border-radius:26px;font-size:15px;cursor:pointer;font-weight:600}
.btn:active{transform:scale(.99)}
.btn.ghost{background:#eef2f8;color:#334}
.btn.purple{background:linear-gradient(135deg,var(--gold),var(--gold2))} .btn.green{background:var(--green)} .btn.amber{background:var(--amber)} .btn.red{background:var(--red)} .btn.sky{background:var(--gold2)}
.row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px}
.row:last-child{border-bottom:none}
.tag{font-size:12px;padding:2px 9px;border-radius:8px}
.muted{color:var(--muted);font-size:13px}
.big{font-size:34px;font-weight:800;color:var(--green2)}
.lv{display:inline-block;font-size:13px;padding:3px 12px;border-radius:20px;margin-left:8px;color:#fff}
canvas{width:100%;max-width:340px;display:block;margin:6px auto}
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:#1f2733;color:#fff;padding:10px 18px;border-radius:24px;font-size:13px;opacity:0;transition:.3s;z-index:60}
.toast.show{opacity:1}
/* 顶部条 */
.top{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{font-weight:800;color:var(--green2);flex:1}
.back{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#f5f0eb;color:#4a3428;text-decoration:none;font-size:18px;margin-right:8px;flex-shrink:0}
/* 测评卡 */
.acard{position:relative;overflow:hidden;border-radius:18px;padding:20px;margin-bottom:14px;color:#fff;box-shadow:0 8px 22px rgba(20,40,80,.12);cursor:pointer;min-height:118px;display:flex;flex-direction:column;justify-content:space-between}
.acard h3{font-size:19px;font-weight:800}
.acard .sub{font-size:13px;opacity:.95;margin-top:6px;line-height:1.5}
.acard .badge{position:absolute;right:-14px;top:-14px;width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.18)}
.acard .sel-flag{display:none;position:absolute;left:16px;top:16px;background:#fff;color:#1f2733;font-size:12px;font-weight:800;padding:3px 10px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.acard .tested-flag{position:absolute;right:16px;top:48px;background:rgba(255,255,255,.92);color:#1f2733;font-size:11px;font-weight:800;padding:3px 10px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.acard.sel{outline:3px solid #fff;outline-offset:-3px;box-shadow:0 12px 28px rgba(20,40,80,.28)}
.acard.sel .sel-flag{display:block}
/* 模态 */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:18px}
.modal.show{display:flex}
.panel{background:#fff;width:420px;max-width:96vw;border-radius:22px;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.panel h3{margin-bottom:6px;text-align:center;font-size:19px;color:#1a3c34}
.panel .tabs{display:flex;gap:8px;margin:14px 0}
.panel .tabs button{flex:1;padding:9px;border:none;background:#f5f0eb;border-radius:10px;font-size:14px;cursor:pointer;color:#556}
.panel .tabs button.on{background:linear-gradient(135deg,var(--green),var(--green2));color:#fff}
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;color:#4a3428;margin-bottom:6px}
.field input,.field select{width:100%;padding:12px;border:1px solid #e5ddd4;border-radius:11px;font-size:14px;background:#fbfcfe}
.field .err{color:var(--red);font-size:12px;margin-top:4px;min-height:14px}
.agree{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:#4a5568;margin:10px 0 16px;line-height:1.7;background:#f8fafb;border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px}.agree input[type="checkbox"]{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:var(--green)}.agree-text{flex:1}.agree-text a{color:var(--green2);text-decoration:underline}.agree-text a:hover{color:var(--green)}
.codebtn{margin-top:8px;font-size:13px;background:#f5f0eb;color:var(--green2);border:none;padding:10px;border-radius:10px;cursor:pointer;width:100%}
.notice{font-size:12.5px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;padding:10px 12px;border-radius:10px;line-height:1.6;margin-bottom:12px}
/* 注册表单过长时滚动 */
.panel-scroll{max-height:70vh;overflow-y:auto;padding-right:8px;margin-right:-8px}
.panel-scroll::-webkit-scrollbar{width:6px}
.panel-scroll::-webkit-scrollbar-track{background:transparent}
.panel-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.panel-scroll::-webkit-scrollbar-thumb:hover{background:#ddd5ca}