:root {
  --bg: #080b12;
  --bg2: #0c1120;
  --card: #121a2a;
  --card2: #172033;
  --line: #222e46;
  --tx: #e9eefb;
  --mut: #8b95b0;
  --dim: #5b6684;
  --gold: #f0b429;
  --green: #4cc9a4;
  --blue: #6aa9ff;
  --pink: #ff7a90;
  --red: #ff5c7a;
  --r: 18px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--tx); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
  overscroll-behavior-y: none;
}
button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
h2, h3 { margin: 0; font-weight: 700; }
.app { max-width: 560px; margin: 0 auto; padding: 0 16px; }

.top { display: flex; align-items: center; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top)) 0 6px; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; }
.logo {
  width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1b2540, #0e1424); border: 1px solid rgba(240,180,41,.45);
  color: var(--gold); font-size: 17px; font-weight: 800;
}
.brand small { font-size: 11px; font-weight: 500; color: var(--mut); margin-left: 2px; }
.topright { font-size: 12px; color: var(--mut); }

.card { background: linear-gradient(180deg, var(--card), var(--bg2)); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-top: 12px; }
.card h3 { font-size: 15px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card h3 .more { font-size: 12px; font-weight: 500; color: var(--mut); }
.hint { font-size: 12.5px; color: var(--mut); line-height: 1.65; }
.hr { height: 1px; background: var(--line); margin: 14px 0; border: 0; }

.hero { padding: 16px 2px 4px; }
.hero .days { font-size: 44px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.hero .days em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--mut); margin-left: 6px; letter-spacing: 0; }
.hero .line { font-size: 15px; font-weight: 700; margin-top: 10px; }
.hero .sub { font-size: 12.5px; color: var(--mut); margin-top: 2px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.badge { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--mut); }
.badge.green { color: var(--green); border-color: rgba(76,201,164,.35); background: rgba(76,201,164,.1); }
.badge.yellow { color: var(--gold); border-color: rgba(240,180,41,.35); background: rgba(240,180,41,.1); }
.badge.red { color: var(--red); border-color: rgba(255,92,122,.4); background: rgba(255,92,122,.12); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 9px 13px; border-radius: 12px; font-size: 14px; background: var(--card2); border: 1px solid var(--line); color: var(--tx); transition: .15s; }
.chip.on { background: rgba(240,180,41,.16); border-color: rgba(240,180,41,.55); color: #ffd980; }
.chip:active { transform: scale(.97); }
.q { margin-top: 14px; }
.q .lab { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.q .lab span { font-weight: 500; color: var(--mut); }

.btn { display: block; width: 100%; padding: 15px; border-radius: 14px; background: var(--gold); color: #1a1305; font-weight: 800; font-size: 16px; text-align: center; margin-top: 12px; }
.btn:active { opacity: .9; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--tx); font-weight: 600; font-size: 14.5px; }
.btn.small { width: auto; display: inline-block; padding: 9px 14px; font-size: 13.5px; margin: 0; border-radius: 11px; }
.btn:disabled { opacity: .5; }
.btn.blue { background: var(--blue); color: #061020; }

.rows { margin-top: 4px; }
.row-item { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.row-item:first-child { border-top: 0; }
.row-item .ico { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--card2); border: 1px solid var(--line); flex: 0 0 auto; }
.row-item .txt { flex: 1; min-width: 0; }
.row-item .t1 { font-size: 15px; font-weight: 700; }
.row-item .t2 { font-size: 12.5px; color: var(--mut); margin-top: 2px; }
.row-item.done .t1 { color: var(--dim); text-decoration: line-through; }
.row-item .go { padding: 9px 14px; border-radius: 11px; font-size: 13.5px; font-weight: 700; background: rgba(106,169,255,.14); border: 1px solid rgba(106,169,255,.4); color: #a8c8ff; }
.row-item .tick { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); color: var(--dim); font-size: 14px; display: flex; align-items: center; justify-content: center; }
.row-item .tick.on { background: rgba(76,201,164,.16); border-color: rgba(76,201,164,.5); color: var(--green); }

.cal { display: flex; gap: 16px; align-items: center; }
.cal .ring { position: relative; width: 96px; height: 96px; flex: 0 0 auto; }
.cal .ring svg { transform: rotate(-90deg); }
.cal .ring .num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cal .ring .num b { font-size: 20px; }
.cal .ring .num span { font-size: 10.5px; color: var(--mut); }
.cal .info { flex: 1; }
.cal .info .k { font-size: 12.5px; color: var(--mut); }
.cal .info .v { font-size: 14px; margin-top: 4px; }
.bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; margin-top: 8px; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), #7ce0c4); }

.foods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.food { padding: 8px 11px; border-radius: 11px; font-size: 13px; background: var(--card2); border: 1px solid var(--line); }
.food:active { border-color: rgba(240,180,41,.5); }
.eaten { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: 13.5px; }
.eaten:first-child { border-top: 0; }
.eaten button { color: var(--dim); }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.medal { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 8px; text-align: center; }
.medal .em { font-size: 26px; filter: grayscale(1) opacity(.35); }
.medal .nm { font-size: 12.5px; font-weight: 700; margin-top: 6px; color: var(--dim); }
.medal .ds { font-size: 10.5px; color: var(--dim); margin-top: 2px; line-height: 1.4; }
.medal.on { border-color: rgba(240,180,41,.5); background: linear-gradient(180deg, rgba(240,180,41,.14), var(--bg2)); }
.medal.on .em { filter: none; }
.medal.on .nm { color: var(--gold); }
.medal .p { height: 3px; background: rgba(255,255,255,.07); border-radius: 999px; margin-top: 8px; overflow: hidden; }
.medal .p > i { display: block; height: 100%; background: var(--gold); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; text-align: center; }
.stat .k { font-size: 11px; color: var(--mut); }
.stat .v { font-size: 20px; font-weight: 800; margin-top: 2px; }
.stat .v small { font-size: 11px; color: var(--mut); margin-left: 2px; }

.field { margin-top: 12px; }
.field > label { display: block; font-size: 12.5px; color: var(--mut); margin-bottom: 6px; }
input[type="number"], input[type="time"], select {
  width: 100%; padding: 12px; border-radius: 12px; background: var(--card2);
  border: 1px solid var(--line); color: var(--tx); -webkit-appearance: none; appearance: none;
}
input[type="range"] { width: 100%; accent-color: var(--gold); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.switch { width: 48px; height: 28px; border-radius: 999px; background: var(--line); position: relative; transition: .2s; flex: 0 0 auto; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: .2s; }
.switch.on { background: var(--green); }
.switch.on::after { left: 23px; }

.chart { width: 100%; height: auto; display: block; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 74px; margin-top: 10px; }
.bars > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; height: 100%; }
.bars i { display: block; width: 100%; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--green), rgba(76,201,164,.2)); min-height: 2px; }
.bars span { font-size: 9px; color: var(--dim); }

.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-around; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); background: rgba(8,11,18,.94); backdrop-filter: blur(18px); border-top: 1px solid var(--line); }
.nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; color: var(--dim); padding: 4px 0; border-radius: 12px; }
.nav button .ico { font-size: 17px; line-height: 1; }
.nav button.on { color: var(--gold); }

.tab { display: none; }
.tab.on { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.player { position: fixed; inset: 0; z-index: 90; display: none; background: radial-gradient(120% 80% at 50% 0%, #18243c 0%, #080b12 66%); padding: calc(12px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom)); flex-direction: column; }
.player.on { display: flex; }
.p-top { display: flex; justify-content: space-between; align-items: center; }
.p-title { font-size: 13px; color: var(--mut); font-weight: 600; }
.p-close { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.07); font-size: 17px; }
.p-main { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 10px 0; }
.p-big { font-size: 28px; font-weight: 800; line-height: 1.35; letter-spacing: -.4px; max-height: 40vh; overflow: auto; }
.p-sub { font-size: 44px; font-weight: 800; color: var(--gold); margin-top: 14px; font-variant-numeric: tabular-nums; }
.p-progress { height: 5px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin: 20px 0 8px; }
.p-progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--blue)); transition: width .2s; }
.p-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.p-mini { padding: 8px 14px; border-radius: 11px; font-size: 13px; background: var(--card2); border: 1px solid var(--line); color: var(--tx); }
.p-mini.on { border-color: rgba(240,180,41,.55); color: #ffd980; }
.p-note { font-size: 11.5px; color: var(--dim); }
.p-controls { display: flex; gap: 12px; }
.p-controls button { flex: 1; padding: 16px; border-radius: 16px; font-weight: 800; font-size: 16px; background: var(--card2); border: 1px solid var(--line); }
.p-controls .main { background: var(--gold); color: #1a1305; border-color: transparent; }

.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; background: rgba(240,180,41,.95); color: #1a1305; font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: 12px; z-index: 120; transition: .22s; max-width: 88vw; text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

.kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 13.5px; border-top: 1px dashed var(--line); }
.kv:first-child { border-top: 0; }
.kv span:first-child { color: var(--mut); }
.kv span:last-child { text-align: right; }
.note { display: flex; gap: 9px; padding: 11px 12px; border-radius: 12px; margin-top: 8px; font-size: 13.3px; line-height: 1.55; }
.note.info { background: rgba(106,169,255,.08); border: 1px solid rgba(106,169,255,.22); color: #bed6ff; }
.note.warn { background: rgba(240,180,41,.09); border: 1px solid rgba(240,180,41,.28); color: #f6d487; }
.note.danger { background: rgba(255,92,122,.1); border: 1px solid rgba(255,92,122,.35); color: #ffb3c2; }
.note.good { background: rgba(76,201,164,.09); border: 1px solid rgba(76,201,164,.28); color: #a8ecd7; }
.empty { text-align: center; padding: 22px 10px; color: var(--mut); font-size: 13.5px; }
.mv { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px dashed var(--line); font-size: 13.5px; }
.mv:first-child { border-top: 0; }
.mv .n { flex: 1; }
.mv .s { color: var(--mut); font-size: 12px; }

/* ===== v2.1 升级 ===== */
.hero2{display:flex;gap:16px;align-items:center;padding:12px 0 4px}
.ringwrap{position:relative;width:150px;height:150px;flex:0 0 auto}
.ringwrap svg{width:150px;height:150px}
.ringwrap .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ringwrap .c b{font-size:32px;letter-spacing:-1px;line-height:1}
.ringwrap .c b span{font-size:14px;color:var(--mut);font-weight:600}
.ringwrap .c em{font-style:normal;font-size:10.5px;color:var(--mut);margin-top:4px;letter-spacing:1px}
.hero2 .hinfo{flex:1;min-width:0}
.hero2 .days{font-size:38px}
.hero2 .line{font-size:14px;margin-top:8px;line-height:1.45}
.quickbar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 2px}
.quickbar button{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;color:#c9d2ea;transition:.15s}
.quickbar button span{font-size:17px}
.quickbar button:active{transform:scale(.94);background:rgba(255,255,255,.09)}
.kcal2 .ring svg{transform:rotate(-90deg)}
.meal{border-top:1px solid var(--line);padding:14px 0}
.meal:first-of-type{border-top:0}
.meal .mi-top{display:flex;align-items:center;gap:11px}
.meal .mi-top .ico{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--card2);border:1px solid var(--line);flex:0 0 auto}
.meal .mi-top .txt{flex:1;min-width:0}
.meal .t1{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.meal .t2{font-size:12px;color:var(--mut);margin-top:2px}
.meal .mk{font-size:17px;font-weight:800;color:var(--gold)}
.meal.skipped{opacity:.72}
.meal .mi{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:7px 0 0 49px;color:#c9d2ea}
.meal .mi button{color:var(--dim);margin-left:6px}
.meal .mbtns{display:flex;gap:7px;margin-top:10px;padding-left:49px;flex-wrap:wrap}
.meal .mbtns button{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:7px 11px;font-size:12.5px;color:#c9d2ea}
.meal .mbtns button.eat{color:var(--green);border-color:rgba(76,201,164,.4);background:rgba(76,201,164,.1)}
.st{font-size:10.5px;padding:2px 7px;border-radius:99px;border:1px solid var(--line)}
.st.ok{color:var(--green);border-color:rgba(76,201,164,.4);background:rgba(76,201,164,.1)}
.st.skip{color:#ffb27a;border-color:rgba(255,178,122,.35);background:rgba(255,178,122,.08)}
.foods .plus{border-style:dashed;color:var(--gold);border-color:rgba(240,180,41,.35)}
.water .wh{display:flex;justify-content:space-between;font-size:13.5px;font-weight:600;margin-bottom:8px}
.cups{display:flex;gap:6px}
.cup{width:32px;height:40px;border-radius:7px 7px 11px 11px;border:1.5px solid #35406a;background:transparent;transition:.15s}
.cup.on{background:linear-gradient(180deg,rgba(106,169,255,.15),rgba(111,227,225,.55));border-color:rgba(111,227,225,.6)}
.cup:active{transform:scale(.9)}
.tbig{font-size:20px;font-weight:800;margin:4px 0 2px}
.trow{display:flex;gap:8px;margin-top:10px}
.tbtn{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:11px;font-size:13.5px;color:#c9d2ea}
.mv{padding:10px 0;border-top:1px dashed var(--line)}
.mv:first-of-type{border-top:0}
.mv .n{font-weight:700;font-size:14.5px}
.mv .s{font-size:12px;color:var(--mut);margin-top:2px}
.mv .cue{font-size:12px;color:#aeb9d6;margin-top:3px}
.seg{display:flex;gap:4px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:3px}
.seg button{flex:1;border:0;background:transparent;color:var(--mut);padding:9px;border-radius:9px;font-size:13px}
.seg button.on{background:rgba(240,180,41,.14);color:var(--gold);font-weight:700}
.search{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:12px 13px;margin:10px 0;color:var(--tx)}
.flist{max-height:46vh;overflow-y:auto}
.frow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line)}
.frow .fn{font-size:14px}
.frow .fk{font-size:11.5px;color:var(--mut);margin-top:2px}
.frow .fadd{width:30px;height:30px;border-radius:50%;border:1px solid rgba(240,180,41,.4);background:rgba(240,180,41,.12);color:var(--gold);font-size:16px}
.sheet-mask{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);z-index:100;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s}
.sheet{width:100%;max-width:560px;max-height:90vh;overflow-y:auto;background:linear-gradient(180deg,#141b2c,#0c1120);border:1px solid rgba(255,255,255,.12);border-radius:26px 26px 0 0;padding:8px 16px calc(26px + env(safe-area-inset-bottom));animation:slideUp .3s cubic-bezier(.2,.8,.2,1)}
.grab{width:38px;height:4px;border-radius:99px;background:rgba(255,255,255,.18);margin:6px auto 14px}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.sheet-title{font-size:19px;font-weight:800}
.sheet-close{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--tx);width:34px;height:34px;border-radius:50%;font-size:14px;flex:none}
.timer-num{font-size:62px;font-weight:900;text-align:center;color:var(--gold);letter-spacing:-2px;margin:16px 0}
.timer-btns{display:flex;gap:8px}
.timer-btns .btn{margin-top:0}
.photoCmp{position:relative;height:240px;border-radius:16px;overflow:hidden;background:var(--bg2)}
.photoCmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photoCmp .after{clip-path:inset(0 0 0 50%)}
.photoCmp input{position:absolute;left:10px;right:10px;bottom:8px;width:calc(100% - 20px);accent-color:var(--gold);z-index:2}
.slots{display:flex;gap:8px;margin-top:10px}
.slots button{flex:1;padding:10px 4px;border-radius:12px;border:1px dashed var(--line);background:rgba(255,255,255,.03);color:var(--mut);font-size:11px}
.slots button.has{border-style:solid;border-color:rgba(76,201,164,.4);color:var(--green)}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:150;opacity:0;transition:opacity .3s}
#confetti.on{opacity:1}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}

/* ===== v2.2 六维 ===== */
.slogan{position:absolute;left:16px;top:calc(44px + env(safe-area-inset-top));font-size:12px;color:var(--mut);letter-spacing:1px}
.top{position:relative}
.sixcard{background:linear-gradient(160deg,rgba(240,180,41,.08),rgba(18,26,42,.95))}
.sixhint{font-size:12px;color:var(--mut);margin:-4px 0 12px}
.sixg{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sx{position:relative;text-align:left;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:16px;padding:12px 12px 11px;display:flex;flex-direction:column;gap:3px;transition:.15s;overflow:hidden}
.sx::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c);opacity:.7}
.sx .si{font-size:16px;line-height:1}
.sx .sn{font-size:13.5px;font-weight:700}
.sx .stx{font-size:11px;color:var(--mut);line-height:1.35;min-height:15px}
.sx .sck{position:absolute;right:10px;top:10px;font-size:12px;color:var(--dim)}
.sx.on{background:rgba(255,255,255,.07);border-color:var(--c)}
.sx.on .sck{color:var(--green);font-weight:800}
.sx:active{transform:scale(.97)}
.sixfoot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:11px;color:var(--dim)}
.sixfoot button{background:none;border:0;color:var(--gold);font-size:11px;padding:0}

/* ===== v2.3 双人 ===== */
.couplecard{background:linear-gradient(150deg,rgba(255,122,156,.10),rgba(18,26,42,.95))}
.couplegrid{display:flex;justify-content:space-around;align-items:center;margin:6px 0 12px}
.cp{display:flex;flex-direction:column;align-items:center;gap:4px}
.miniring{position:relative;width:88px;height:88px}
.miniring svg{width:88px;height:88px}
.miniring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800}
.miniring b span{font-size:11px;color:var(--mut);margin-left:1px}
.cpn{font-size:12px;color:#c9d2ea;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.challenge{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:12px}
.ch-t{font-size:13.5px;font-weight:700;line-height:1.45}
.ch-btns{display:flex;gap:8px;margin-top:10px}
.chbtn{flex:1;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:10px;padding:9px;font-size:12.5px;color:#c9d2ea}
.chbtn.on{border-color:rgba(76,201,164,.45);background:rgba(76,201,164,.12);color:var(--green)}
.chbtn:disabled{opacity:.75}