/* ===== Pulse v2 — Fresh Pop · Energy-spine redesign ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=Noto+Sans+TC:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  /* Native iOS system font (PingFang on iPhone) — clean, familiar, instant, no web-font load.
     Falls back gracefully on Android / desktop. Used for everything for a consistent feel. */
  --sys:-apple-system,BlinkMacSystemFont,"PingFang TC","PingFang SC","Microsoft JhengHei","Noto Sans TC","Helvetica Neue",Arial,sans-serif;
  --font:var(--sys);
  --serif:var(--sys);
  --mono:var(--sys);

  --p1:#14C2A6; --p2:#19A7C4; --primary:#13B3AC;
  --pg:linear-gradient(135deg,#14C2A6 0%,#19A7C4 100%);
  --soft:rgba(18,182,160,.14);

  --coral:#FF6B4A; --gold:#FFB81F; --teal:#16C2A3; --blue:#3E92E0; --pink:#FF85A1;

  /* energy level colors (5 Peace → 1 Fear) */
  --e5:#16C2A3; --e4:#3E92E0; --e3:#FFB81F; --e2:#FF9A4D; --e1:#FF6B4A;

  --r:14px; --rl:18px; --pill:999px; --ease:cubic-bezier(.4,0,.2,1);
}
.theme-light{
  --bg:#F7F5EF; --bg2:#EFEDE6; --surface:#FFFFFF; --surface2:#F2F1EB; --surface3:#EAF7F3;
  --ink:#1F2329; --ink2:#525A63; --muted:#9AA0A8;
  --line:rgba(40,45,55,.10); --line2:rgba(40,45,55,.06);
  --glass:rgba(255,255,255,.78); --glassbrd:rgba(255,255,255,.7);
  --shadow:0 10px 30px rgba(40,50,70,.10); --shadow-sm:0 4px 14px rgba(40,50,70,.07);
  --track:rgba(40,45,55,.10);
}
.theme-dark{
  --bg:#11151B; --bg2:#161B22; --surface:#1A2029; --surface2:#222A34; --surface3:#152229;
  --ink:#ECF1F7; --ink2:#BFC9D6; --muted:#828D9C;
  --line:rgba(150,180,210,.12); --line2:rgba(150,180,210,.07);
  --glass:rgba(20,26,34,.64); --glassbrd:rgba(150,180,210,.12);
  --shadow:0 12px 34px rgba(0,0,0,.5); --shadow-sm:0 6px 18px rgba(0,0,0,.36);
  --track:rgba(150,180,210,.12);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:var(--font);background:#23282f}

.app{height:100%;display:flex;flex-direction:column;position:relative;color:var(--ink);overflow:hidden;
  background:radial-gradient(120% 70% at 88% -8%, var(--surface3) 0%, transparent 52%), var(--bg);
  transition:background .4s var(--ease),color .3s}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:calc(env(safe-area-inset-top) + 14px) 20px 120px;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.screen{opacity:0;transform:translateY(8px);transition:opacity .34s var(--ease),transform .34s var(--ease)}
.screen.in{opacity:1;transform:none}

/* ---- top bar ---- */
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;position:relative;min-height:36px}
/* On drill screens the title is centered over the whole bar so it stays balanced regardless
   of the back button / right element widths. */
.top .ch{position:absolute;left:0;right:0;text-align:center;pointer-events:none}
.top .ch .t{font-weight:700;font-size:1rem}
.top .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1.12rem;letter-spacing:-.01em}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--pg);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(18,160,180,.3);flex:0 0 auto}
.h-page{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;margin:0}
.h-greet{font-size:1.5rem;font-weight:700;letter-spacing:-.01em;margin:0;line-height:1.15}
.eyebrow{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.sub{font-size:.84rem;color:var(--muted);margin:3px 0 0;font-weight:500}
.lbl{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 11px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}

/* ---- year word strip ---- */
.yw{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rl);padding:14px 15px;box-shadow:var(--shadow-sm);cursor:pointer;margin:14px 0}
.yw .k{font-size:.6rem;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.yw .w{font-size:1.18rem;font-weight:700;margin-top:3px;
  background:var(--pg);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.yw .go{font-size:.64rem;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:3px;white-space:nowrap}

/* ---- pulse bar (today progress) ---- */
.pbar{display:flex;align-items:center;gap:9px;margin:16px 2px 10px}
.pbar .t{font-size:.62rem;font-weight:800;letter-spacing:.08em;color:var(--muted)}
.pbar .tr{flex:1;height:7px;border-radius:99px;background:var(--track);overflow:hidden}
.pbar .tr i{display:block;height:100%;border-radius:99px;background:var(--pg)}
.pbar .n{font-size:.62rem;font-weight:700;color:var(--primary)}

/* ---- practice rows ---- */
.prow{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:13px;margin-bottom:9px;cursor:pointer;transition:transform .18s var(--ease)}
.prow:active{transform:scale(.99)}
.prow.energy{background:linear-gradient(135deg,rgba(62,146,224,.12),rgba(22,194,163,.12))}
.prow .ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.prow .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.prow .tx{flex:1;min-width:0}
.prow .tt{font-weight:700;font-size:.95rem}
.prow .ss{font-size:.76rem;color:var(--muted);margin-top:1px}
.prow .end{color:var(--muted);display:flex}
.prow .end svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.verse{margin:22px 6px 4px;text-align:center;position:relative;padding-top:18px}
.verse .mk{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-family:var(--serif);font-size:3rem;color:var(--primary);opacity:.25}
.verse p{font-family:var(--serif);font-size:1.16rem;line-height:1.5;margin:0;color:var(--ink)}
.verse cite{display:block;font-style:normal;color:var(--muted);font-size:.72rem;margin-top:8px;letter-spacing:.08em;font-weight:600;text-transform:uppercase}

/* ---- tab bar ---- */
.tabbar{position:absolute;left:16px;right:16px;bottom:24px;z-index:40;display:flex;justify-content:space-around;
  align-items:center;padding:10px 6px;border-radius:22px;background:var(--glass);border:1px solid var(--glassbrd);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);box-shadow:var(--shadow)}
.tb{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted);font-size:.6rem;font-weight:700;
  flex:1;cursor:pointer;transition:color .2s}
.tb svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tb.on{color:var(--primary)}

/* ---- Library ---- */
.continue{display:flex;align-items:center;gap:12px;border-radius:var(--r);padding:14px;margin:14px 0;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.continue .ic{width:42px;height:42px;border-radius:11px;background:var(--pg);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 6px 16px rgba(18,160,180,.3)}
.continue .ic svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.continue .tt{font-weight:700;font-size:.96rem}.continue .ss{font-size:.78rem;color:var(--muted)}
.themes{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.th{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer}
.th i{width:100%;aspect-ratio:1;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--shadow-sm)}
.th i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.th span{font-size:.62rem;font-weight:600;color:var(--ink2)}
.mini{display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-sm);cursor:pointer;margin-bottom:8px}
.mini .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.mini .t{font-weight:600;font-size:.9rem;flex:1}.mini .s{font-size:.74rem;color:var(--muted)}
.mini .end{color:var(--muted);display:flex}.mini .end svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.hl{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 12px 12px 0;
  padding:12px 14px;margin-bottom:9px;box-shadow:var(--shadow-sm)}
.hl .ref{font-size:.66rem;font-weight:700;color:var(--gold);letter-spacing:.04em}
.hl p{font-family:var(--serif);font-size:1.02rem;line-height:1.45;margin:5px 0 0;color:var(--ink)}

/* ---- Reader ---- */
.rtop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(env(safe-area-inset-top) + 12px) 20px 12px;position:sticky;top:0;z-index:10;
  background:var(--glass);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--line2)}
.ibtn{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.ibtn svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rtop{position:relative}
.rtop .ch{position:absolute;left:0;right:0;text-align:center;pointer-events:none}.rtop .ch .t{font-weight:700;font-size:1rem}.rtop .ch .s{font-size:.7rem;color:var(--muted)}
.rpar{font-size:.66rem;font-weight:700;color:var(--primary);background:var(--soft);border:none;padding:8px 13px;border-radius:99px;cursor:pointer;font-family:var(--font);display:flex;align-items:center;gap:5px}
.seg{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:700;letter-spacing:.06em;padding:6px 13px;border-radius:99px;margin:22px 0 10px}
.story{background:var(--surface2);border:1px solid var(--line2);border-radius:12px;padding:14px;font-size:.96rem;line-height:1.7;color:var(--ink2)}
.story h3{font-size:1.05rem;font-weight:700;margin:0 0 6px;color:var(--ink)}
.story h4,.md-h{font-weight:700;font-size:1rem;margin:14px 0 5px;color:var(--ink)}
.story p,.markdown-body p{margin:8px 0;line-height:1.72;font-size:.95rem}
.markdown-body ul{margin:6px 0 8px;padding-left:18px}
.markdown-body li{margin:4px 0;line-height:1.62;font-size:.95rem}
.brief-lead{margin:4px 0 8px;line-height:1.72}
.vrow{display:flex;gap:11px;padding:11px 6px;border-bottom:1px solid var(--line2);font-family:var(--serif);font-size:1.12rem;line-height:1.55;cursor:pointer;border-radius:8px}
.vrow .vn{color:var(--coral);font-weight:700;font-size:.68rem;font-family:var(--mono);flex:0 0 auto;padding-top:5px}
.vrow .vt{flex:1;min-width:0}
/* Bookmarked verses stay yellow (matches the Mark colour); a live selection is teal so the
   two are clearly different. */
.vrow.vmark{background:rgba(255,184,31,.22)}
.vrow.vsel{background:rgba(19,179,172,.18);box-shadow:inset 3px 0 0 var(--primary);border-bottom-color:transparent}
.xlink{display:flex;gap:9px;align-items:center;padding:12px 13px;background:var(--surface2);border:1px solid var(--line2);border-radius:11px;margin-bottom:8px;font-size:.92rem;line-height:1.6;color:var(--ink2);cursor:pointer}
.xlink b{color:var(--blue);font-weight:700;font-family:var(--mono);font-size:.74rem}

/* selection pill */
/* Hidden while just reading; appears only once you actually select a verse. */
.selpill{position:absolute;left:16px;right:16px;bottom:22px;z-index:42;background:var(--glass);border:1px solid var(--glassbrd);
  border-radius:16px;backdrop-filter:blur(20px);box-shadow:var(--shadow);display:none;gap:7px;padding:9px}
.selpill.has-selection{display:flex;animation:rise .3s var(--ease) both}
.selpill .meta{flex:1;font-size:.74rem;font-weight:700;color:var(--ink2);display:flex;align-items:center;padding-left:6px}
.pbtn{display:flex;align-items:center;gap:5px;padding:8px 13px;border-radius:11px;background:var(--surface2);font-size:.7rem;font-weight:700;color:var(--ink2);cursor:pointer}
.pbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.pbtn.primary{background:var(--pg);color:#fff}.pbtn.primary svg{stroke:#fff}

/* ---- sheets ---- */
.dim{position:absolute;inset:0;background:rgba(15,20,28,.46);z-index:45;opacity:0;transition:opacity .3s}
.dim.open{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:46;background:var(--surface);border-radius:22px 22px 0 0;border-top:1px solid var(--line);
  box-shadow:0 -16px 40px rgba(0,0,0,.22);padding:14px 20px 30px;transform:translateY(100%);transition:transform .38s var(--ease)}
.sheet.open{transform:translateY(0)}
.grab{width:40px;height:5px;border-radius:99px;background:var(--track);margin:0 auto 16px}
.sheet h3{margin:0 0 3px;font-size:1.18rem;font-weight:700}.sheet .hint{font-size:.8rem;color:var(--muted);margin:0 0 14px}
.btn-full{width:100%;height:50px;border-radius:13px;background:var(--pg);color:#fff;font-weight:700;font-size:1rem;border:none;
  font-family:var(--font);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 10px 24px rgba(18,160,180,.3)}
.btn-full svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.4}
.moods{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:16px 0}
.md{font-size:.78rem;padding:8px 13px;border-radius:99px;background:var(--surface2);color:var(--ink2);font-weight:600;cursor:pointer;border:1px solid var(--line2)}
.md.on{background:var(--pg);color:#fff;border-color:transparent}
.ta{width:100%;min-height:62px;border:1px solid var(--line);border-radius:12px;padding:12px;font-size:.9rem;line-height:1.55;background:var(--bg);color:var(--ink);font-family:var(--font);resize:none;outline:none}
.ta:focus{border-color:var(--primary)}

/* energy scale (check-in) */
.escale{display:flex;gap:14px;height:280px;margin:16px 0}
.escale.tall{height:384px}
.ecur{font-size:1.02rem;font-weight:700;color:var(--primary);margin:2px 0 4px}
.elabels.many{flex:0 0 auto;font-size:.66rem;line-height:1}
.elabels.many .on{font-size:.8rem}
/* right-side encouragement for the selected level */
.enote{flex:1;align-self:center;background:var(--surface2);border:1px solid var(--line2);border-radius:12px;padding:13px 14px;margin-left:2px}
.en-t{font-weight:700;font-size:.9rem;color:var(--ink);line-height:1.55}
.en-v{font-size:.8rem;color:var(--muted);line-height:1.6;margin-top:9px}
.ecol{width:46px;border-radius:16px;position:relative;background:linear-gradient(180deg,var(--e5),var(--e4) 38%,var(--e3) 64%,var(--e1));box-shadow:var(--shadow-sm);cursor:pointer;touch-action:none}
.ecol .mk{position:absolute;left:-5px;right:-5px;height:16px;border-radius:99px;background:#fff;border:3px solid var(--p2);box-shadow:var(--shadow-sm);transition:top .2s var(--ease)}
.elabels{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:3px 0;font-size:.84rem;font-weight:600;color:var(--muted)}
.elabels .on{color:var(--ink);font-weight:700;font-size:.96rem}

/* parallel sheet */
.par{display:flex;flex-direction:column;gap:12px}
.parcol .h{font-size:.62rem;font-weight:700;letter-spacing:.08em;color:var(--primary);text-transform:uppercase;margin-bottom:5px}
.parcol p{margin:0;font-size:.9rem;line-height:1.55;color:var(--ink2)}
.parcol.serif p{font-family:var(--serif);font-size:1.04rem;color:var(--ink)}

/* ---- Growth ---- */
.gtoggle{display:inline-flex;background:var(--surface2);border-radius:99px;padding:3px;font-size:.74rem;font-weight:700;margin:10px 0 14px}
.gtoggle span{padding:6px 16px;border-radius:99px;color:var(--muted);cursor:pointer}
.gtoggle span.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.journey{border-radius:var(--rl);border:1px solid var(--line);background:var(--surface);padding:15px 14px;box-shadow:var(--shadow-sm)}
.journey .h{display:flex;justify-content:space-between;align-items:baseline}
.journey .h .k{font-size:.58rem;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.journey .h .up{font-size:.7rem;font-weight:700;color:var(--primary)}
.gstats{display:flex;gap:9px;margin:12px 0}
.gstats .it{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:12px;text-align:center;box-shadow:var(--shadow-sm)}
.gstats b{display:block;font-family:var(--mono);font-size:1.5rem;font-weight:700;line-height:1}
.gstats .u{display:block;font-size:.58rem;color:var(--muted);font-weight:600;margin-top:5px}

/* energy calendar */
.calhead{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 12px}
.calhead .m{font-weight:700;font-size:1.04rem;display:flex;align-items:center;gap:6px;cursor:pointer}
.calhead .m svg{width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:2.2}
.arrows{display:flex;gap:7px}
.arrow{width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer}
.arrow svg{width:14px;height:14px;fill:none;stroke:var(--ink);stroke-width:2.2}
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:7px}
.dow span{text-align:center;font-size:.6rem;color:var(--muted);font-weight:600}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.ecell{aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;
  position:relative;cursor:pointer;color:#fff;transition:transform .15s var(--ease)}
.ecell:active{transform:scale(.9)}
.ecell.empty{background:transparent;cursor:default}
.ecell.future{background:transparent;border:1px dashed var(--line);color:var(--muted);opacity:.55}
.ecell.today{box-shadow:0 0 0 2.5px var(--ink)}
.ecell .par-dot{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);display:flex;gap:1.5px}
.ecell .par-dot i{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.85)}
.elegend{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;font-size:.62rem;color:var(--muted);font-weight:600}
.elegend .sc{display:flex;gap:3px}.elegend .sc i{width:14px;height:14px;border-radius:4px}

/* day detail / moments / settings */
.ddrow{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line2)}
.ddrow:first-of-type{border-top:none}
.ddrow .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto;font-size:.8rem}
.ddrow .tt{font-weight:600;font-size:.88rem}.ddrow .ss{font-size:.78rem;color:var(--muted);line-height:1.45}
.ywbig{display:flex;align-items:baseline;gap:10px;margin:8px 2px}
.ywbig .y{font-size:1.5rem;font-weight:700}.ywbig .w{font-size:1.3rem;font-weight:700;color:var(--coral)}
.titem{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:13px;margin-bottom:9px;box-shadow:var(--shadow-sm)}
.titem .d{font-size:.68rem;color:var(--muted);font-weight:600;margin-bottom:4px}.titem p{margin:0;font-size:.86rem;line-height:1.55;color:var(--ink2)}
.mecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px;margin-bottom:11px;box-shadow:var(--shadow-sm)}
.mecard h4{margin:0 0 6px;font-size:.72rem;letter-spacing:.06em;font-weight:700;color:var(--muted);text-transform:uppercase;display:flex;align-items:center;justify-content:space-between}
.mefield{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:var(--ink);padding:10px 0;border-top:1px solid var(--line2);cursor:pointer}
.mefield:first-of-type{border-top:none}
.mefield .v{color:var(--muted);font-weight:500;display:flex;align-items:center;gap:6px}
.mefield .v svg{width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:2}
.syncpill{font-size:.66rem;font-weight:700;color:var(--teal);background:var(--soft);padding:4px 10px;border-radius:99px}
.toast{position:absolute;left:50%;bottom:100px;transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--bg);
  padding:11px 18px;border-radius:99px;font-size:.84rem;font-weight:600;box-shadow:var(--shadow);white-space:nowrap;
  display:flex;align-items:center;gap:8px;animation:rise .3s var(--ease) both}
.toast svg{width:16px;height:16px;fill:none;stroke:var(--bg);stroke-width:2.6}

.me-key{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:.9rem;background:var(--bg);color:var(--ink);font-family:var(--font);outline:none;margin-top:8px}
.me-key:focus{border-color:var(--primary)}

/* 對照 version pickers (shown when parallel is on) */
.rt-versions{gap:10px;margin:12px 0 4px}
.rt-field{flex:1;display:flex;flex-direction:column;gap:5px;font-size:.62rem;font-weight:700;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.rt-field select{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 10px;font-size:.82rem;background:var(--surface);color:var(--ink);font-family:var(--font);outline:none}

/* ---- reader verse rows ---- */
.vrow.parallel{display:flex;gap:11px;padding:11px 6px;border-bottom:1px solid var(--line2);cursor:pointer;border-radius:8px}
.vrow.parallel .vn{color:var(--coral);font-family:var(--mono);font-size:.66rem;font-weight:700;flex:0 0 auto;padding-top:5px}
.vrow.parallel .vbody{flex:1;font-family:var(--serif);font-size:1.06rem;line-height:1.55}
.vrow.parallel .vcell.secondary{color:var(--muted);font-size:.96rem;margin-top:4px}
.vrow.parallel.vsel{background:rgba(19,179,172,.18);box-shadow:inset 3px 0 0 var(--primary)}
.vrow.parallel.vmark{background:rgba(255,184,31,.28)}

/* ---- day-detail (calendar) ---- */
.ddrow{width:100%;text-align:left;background:none;border-left:0;border-right:0;border-bottom:0;font-family:inherit;cursor:pointer}
.dd-cnote{display:block;width:100%;text-align:left;background:none;border:none;font-family:inherit;font-size:.9rem;line-height:1.62;color:var(--ink2);cursor:pointer;padding:7px 0;border-top:1px solid var(--line2)}
.dd-cnote:first-of-type{border-top:none}
.dd-cnote .dd-go{color:var(--primary);font-weight:700;font-size:.78rem}
.dd-readbtn{width:100%;margin-top:12px;padding:13px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--primary);font-weight:700;font-family:inherit;font-size:.9rem;cursor:pointer;box-shadow:var(--shadow-sm)}
.dd-addnote{width:100%;margin-top:10px;padding:13px;border-radius:12px;border:1px dashed var(--line);background:none;color:var(--muted);font-weight:600;font-family:inherit;font-size:.9rem;cursor:pointer}