/* ===== Inline style block 1 from original HTML ===== */

:root{
  --ink:#1c1c18;--ink2:#3a3a34;--mu:#72726c;--soft:#b0b0aa;
  --ln:#e4e4de;--ln2:#efefea;--pa:#f6f5f1;--cd:#ffffff;
  --night:#1a2f20;--night2:#1e3d2a;--night3:#2a5038;
  --drift0:#1e5c38;--drift1:#5a9e6a;--drift2:#d4933a;--drift3:#c0622a;
  --d0bg:#e8f4ed;--d1bg:#d0ecd8;--d2bg:#fdf0dc;--d3bg:#fde8d8;
  --r:18px;--rsm:11px;--rxs:7px;
  --sh:0 1px 2px rgba(0,0,0,.05),0 3px 12px rgba(0,0,0,.06);
  --shlg:0 8px 40px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);
  --tabH:66px;
  --serif:'DM Serif Display',Georgia,serif;
  --sans:'DM Sans',-apple-system,sans-serif;
  --mw:440px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{background:var(--pa);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100dvh}
button,input,textarea{font:inherit;outline:none;border:none;background:none;cursor:pointer}
  .app{max-width:var(--mw);margin:0 auto;min-height:100dvh;position:relative;width:100%;border-left:1px solid var(--ln);border-right:1px solid var(--ln);box-shadow:0 0 80px rgba(0,0,0,.08);overflow-x:hidden}
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--mw);height:var(--tabH);background:rgba(255,255,255,.97);backdrop-filter:blur(28px);border-top:1px solid var(--ln);display:flex;padding-bottom:env(safe-area-inset-bottom);z-index:100}
.tabbar-inner{display:flex;width:100%}
.toast{position:fixed;bottom:calc(var(--tabH)+14px);left:50%;transform:translateX(-50%) translateY(10px);background:var(--ink);color:#fff;padding:10px 20px;border-radius:999px;font-size:13px;z-index:600;opacity:0;pointer-events:none;transition:all .25s;white-space:nowrap}
.qc-loading{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--mw);z-index:650;background:rgba(246,245,241,.62);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .16s}
.qc-loading.show{opacity:1}
.qc-loading-box{background:rgba(255,255,255,.92);border:1px solid var(--ln);border-radius:16px;box-shadow:var(--shlg);padding:14px 16px;display:flex;align-items:center;gap:10px}
.qc-loading-spinner{width:18px;height:18px;border-radius:50%;border:2px solid rgba(30,92,56,.18);border-top-color:var(--drift0);animation:qcspin .75s linear infinite}
.qc-loading-text{font-size:13px;color:var(--ink2);font-weight:600}
@keyframes qcspin{to{transform:rotate(360deg)}}
@media(min-width:768px){
  body{display:flex;justify-content:center;background:#e8e8e2}
}
.screen{display:none;flex-direction:column;min-height:100dvh;width:100%;overflow-x:hidden}
.screen.show{display:flex}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}

/* Tab bar */
.tbtn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#aeaaa8;font-size:10px;font-weight:500;letter-spacing:.04em;padding-top:4px;transition:color .2s}
.tbtn.on{color:var(--drift0)}
.ticon{font-size:21px;transition:transform .2s}
.tbtn.on .ticon{transform:scale(1.1)}

/* Utils */
.btn{display:flex;align-items:center;justify-content:center;border-radius:var(--rsm);font-weight:500;transition:opacity .15s,transform .12s;cursor:pointer}
.btn:active{opacity:.78;transform:scale(.97)}
.btn-dark{background:var(--drift0);color:#fff;padding:14px 24px;font-size:15px}
.btn-forest{background:var(--drift0);color:#fff;padding:14px 24px;font-size:15px}
.btn-ghost{background:transparent;color:var(--drift0);font-size:14px;font-weight:500;padding:8px 0}
.btn-line{background:var(--ln2);color:var(--ink2);padding:13px 20px;font-size:14px}
.btn-full{width:100%}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ══════════════════════════════════════
   LOGIN — Hero with live heatmap preview
══════════════════════════════════════ */
.field{margin-bottom:12px}
.field label{display:block;font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:5px}
.field input{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--rsm);padding:12px 14px;font-size:15px;color:#fff;transition:border-color .2s}
.field input::placeholder{color:rgba(255,255,255,.25)}
.field input:focus{border-color:rgba(255,255,255,.35)}
.inner-tabs{display:flex;gap:2px;padding:0 16px;border-bottom:1px solid var(--ln)}
.inner-tab{flex:1;padding:8px 8px;font-size:13px;font-weight:500;color:rgba(255,255,255,.45);background:none;border:none;cursor:pointer;font-family:var(--sans);border-bottom:2px solid transparent;transition:color .15s,border-color .15s;text-align:center}
.inner-tab.on{color:#fff;border-bottom-color:rgba(255,255,255,.6)}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-handle{width:36px;height:4px;border-radius:2px;background:var(--ln);margin:0 auto 20px}
.modal-title{font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:-.02em;margin-bottom:6px}
.modal-sub{font-size:13px;color:var(--mu);line-height:1.6;margin-bottom:20px}
.modal-input{width:100%;border:1.5px solid var(--ln);border-radius:var(--rsm);padding:13px 14px;font-size:15px;color:var(--ink);background:var(--pa);margin-bottom:12px;transition:border-color .2s;font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em}
.modal-input:focus{border-color:var(--drift0);outline:none}
.modal-input::placeholder{text-transform:none;letter-spacing:0;color:var(--soft)}
.modal-err{font-size:12px;color:#c0392b;margin-bottom:10px;display:none}
.modal-warn{background:#fff8f0;border:1px solid #f0c060;border-radius:var(--rsm);padding:12px 14px;font-size:13px;color:#7a5000;line-height:1.6;margin-bottom:16px;display:none}
.sec-hdr{display:flex;justify-content:space-between;align-items:baseline;padding:20px 16px 10px}
.sec-title{font-size:13px;font-weight:600;letter-spacing:.01em}
.sec-sub{font-size:11px;color:var(--mu)}

/* Heatmap */
.hm-wrap{padding:12px 16px;background:var(--night);border-radius:var(--r);margin:8px 0}
.hm-dates-row{display:flex;padding-left:90px;margin-bottom:4px}
.hm-date{flex:1;font-size:9px;color:rgba(255,255,255,.35);text-align:center;letter-spacing:.01em}
.hm-group-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;transition:opacity .15s}
.hm-cell.phantom{background:rgba(255,255,255,0.08)}
.hm-cell.phantom:nth-child(2){animation-delay:.3s}
.hm-cell.phantom:nth-child(3){animation-delay:.6s}
.hm-cell.phantom:nth-child(4){animation-delay:.9s}
@keyframes hmPulse{0%,100%{opacity:.35}50%{opacity:.9}}
.hm-detail-wrap{overflow:hidden}
.hm-group-name{width:84px;font-size:12px;color:rgba(255,255,255,.7);font-weight:500;flex-shrink:0;display:flex;align-items:center;gap:5px;overflow:hidden}
.hm-group-icon{font-size:13px;flex-shrink:0}
.hm-group-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.hm-cells{display:flex;gap:3px;flex:1;min-width:0;overflow:hidden}
.hm-cell{flex:1;min-width:0;border-radius:4px;cursor:pointer;transition:transform .12s,filter .12s;position:relative;display:flex;align-items:center;justify-content:center}
.hm-cell:active{transform:scale(.88)}
.hm-arrow{font-size:11px;color:rgba(255,255,255,.85);font-weight:700;line-height:1;pointer-events:none;position:absolute;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.hm-cell.no-data{background:rgba(255,255,255,.06)}
.hm-cell.d0{background:var(--drift0)}
.hm-cell.d1{background:var(--drift1)}
.hm-cell.d2{background:var(--drift2)}
.hm-cell.d3{background:var(--drift3)}
.hm-cell.highlighted{filter:brightness(1.15);outline:2px solid var(--ink);outline-offset:1px}

/* Legend */
.hm-legend{display:flex;gap:10px;flex-wrap:wrap;padding:8px 0 0}
.leg-item{display:flex;align-items:center;gap:4px;font-size:10px;color:rgba(255,255,255,.4)}
.leg-dot{width:9px;height:9px;border-radius:2px}

/* Group detail panel */
.group-panel{margin:12px 16px 0;background:var(--cd);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;animation:slideIn .2s ease}
@keyframes slideIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.gp-hdr{padding:16px 16px 14px;border-bottom:1px solid var(--ln2);display:flex;justify-content:space-between;align-items:center}
.gp-hdr-left{display:flex;align-items:center;gap:8px}
.gp-hdr-icon{font-size:18px}
.gp-hdr-name{font-size:14px;font-weight:600}
.gp-hdr-date{font-size:11px;color:var(--mu);margin-top:1px}
.gp-close{color:var(--mu);font-size:18px;padding:4px 6px;line-height:1}
.gp-body{}
.gp-dim-row{padding:11px 16px;border-bottom:1px solid var(--ln2);display:flex;align-items:center;gap:10px;cursor:pointer;transition:background .12s}
.gp-dim-row:last-child{border-bottom:none}
.gp-dim-row:active{background:var(--pa)}
.gp-dim-name{font-size:13px;color:var(--ink2);flex:1}
.gp-dim-cells{display:flex;gap:2px}
.gp-dim-cell{width:20px;height:20px;border-radius:4px;cursor:pointer;transition:transform .1s}
.gp-dim-cell:active{transform:scale(.85)}
.gp-dim-cell.no-data{background:var(--ln2)}
.gp-dim-cell.d0{background:var(--drift0)}
.gp-dim-cell.d1{background:var(--drift1)}
.gp-dim-cell.d2{background:var(--drift2)}
.gp-dim-cell.d3{background:var(--drift3)}
.gp-dim-cell.cur{outline:2px solid var(--ink);outline-offset:1px}

/* CTA */
@keyframes fadeUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.tip-close{position:absolute;top:10px;right:12px;color:rgba(255,255,255,.35);font-size:17px;cursor:pointer;line-height:1}
.tip-date{font-size:10px;color:rgba(255,255,255,.45);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.tip-name{font-size:14px;font-weight:600;margin-bottom:3px}
.tip-status{display:inline-flex;align-items:center;gap:5px;font-size:12px;margin-bottom:10px}
.tip-dot{width:7px;height:7px;border-radius:2px}
.tip-body{font-size:12px;color:rgba(255,255,255,.65);line-height:1.6;margin-bottom:12px}
.tip-qs{display:flex;flex-direction:column;gap:5px}
.tip-q{background:rgba(255,255,255,.09);border-radius:7px;padding:8px 11px;font-size:12px;color:rgba(255,255,255,.8);text-align:left;transition:background .12s}
.tip-q:active{background:rgba(255,255,255,.16)}

/* ══════════════════════════════════════
   CHECK-IN FLOW
══════════════════════════════════════ */

/* Top bar */
.back-btn{width:30px;height:30px;border-radius:8px;background:var(--ln2);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--ink);flex-shrink:0;font-weight:500}

/* Step dots */

/* Group label */

/* Phase 1 — chip scan */
.p1-wrap{padding:16px 16px}
.p1-instruction{font-size:13px;color:var(--mu);margin-bottom:14px;line-height:1.55}
.p1-instruction strong{color:var(--ink);font-weight:500}
.chips-cloud{display:flex;flex-wrap:wrap;gap:6px}
.sym-chip{padding:8px 13px;border-radius:999px;font-size:13px;background:var(--pa);border:1.5px solid var(--ln);color:var(--ink2);transition:all .15s;line-height:1.3}
.sym-chip.sel{background:var(--d0bg);border-color:var(--drift0);color:var(--drift0);font-weight:500}
.none-btn{padding:9px 18px;border-radius:999px;font-size:13px;color:var(--mu);border:1.5px solid var(--ln);background:var(--cd);transition:all .15s}
.none-btn.used{background:var(--ln2);border-color:var(--ln);color:var(--mu)}
.p1-note{width:100%;border:1.5px solid var(--ln);border-radius:var(--rsm);padding:11px 13px;font-size:14px;resize:none;background:var(--cd);line-height:1.5;margin-top:14px;min-height:68px;color:var(--ink)}
.p1-note::placeholder{color:var(--soft)}

/* Phase 2 — single question full screen */
.p2-wrap{padding:20px 16px 16px;animation:fadeUp .2s ease}
.p2-q{font-family:var(--serif);font-size:24px;font-weight:400;color:var(--ink);margin-bottom:6px;letter-spacing:-.02em;line-height:1.25}
.p2-hint{font-size:12px;color:var(--mu);margin-bottom:22px;line-height:1.55;padding-left:1px}
.p2-opts{display:flex;flex-direction:column;gap:7px}
.p2-opt{padding:14px 16px;border-radius:var(--rsm);border:1.5px solid var(--ln);font-size:15px;color:var(--ink2);text-align:left;background:var(--cd);transition:all .15s;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--sh)}
.p2-opt:active{background:var(--d0bg);border-color:var(--drift0)}
.p2-opt.sel{background:var(--d0bg);border-color:var(--drift0);color:var(--drift0);font-weight:500}
.p2-opt-meta{display:flex;align-items:center;gap:6px}
.p2-opt-ideal{font-size:10px;font-weight:600;color:var(--drift1);letter-spacing:.06em;text-transform:uppercase;background:var(--d1bg);padding:2px 7px;border-radius:999px}
.p2-opt-last{font-size:10px;color:var(--mu);font-weight:400;background:var(--ln2);padding:2px 7px;border-radius:999px}
.p2-skip{font-size:13px;color:var(--mu);padding:10px 0;margin-top:6px;text-align:center;display:block;width:100%}

/* Group flash */
.grp-flash{position:absolute;inset:0;z-index:400;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.grp-flash.show{opacity:1}
.grp-flash-icon{font-size:52px;margin-bottom:12px}
.grp-flash-name{font-family:var(--serif);font-size:26px;font-weight:400;color:#fff;letter-spacing:-.02em;margin-bottom:6px}
.grp-flash-status{font-size:13px;color:rgba(255,255,255,.65);text-align:center;padding:0 32px}

/* Summary */
.sum-row{background:var(--cd);border-radius:var(--rsm);padding:14px 16px;box-shadow:var(--sh);display:flex;align-items:center;gap:12px;cursor:pointer;width:100%}
.sum-bar{width:10px;height:28px;border-radius:3px;flex-shrink:0}
.sum-name{font-size:14px;color:var(--ink2);flex:1}
.sum-icon{font-size:16px;flex-shrink:0}
.sum-status{font-size:12px;font-weight:600}

/* CI footer */

@keyframes blankGlow{0%,100%{box-shadow:0 0 0 3px rgba(26,74,46,.12)}50%{box-shadow:0 0 0 5px rgba(26,74,46,.22)}}
.sent-chips-preview{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;vertical-align:middle}
.sent-chip-tag{font-size:12px;background:var(--d0bg);color:var(--drift0);padding:2px 8px;border-radius:999px;font-weight:500;font-family:var(--sans)}
/* Popup content */
/* Graphic sheet */


/* ── I-list check-in ── */


@keyframes expandIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
/* Option styles inside expand */
/* Graphic selectors */
/* Next button row */
/* Body map */

/* ══ Check-in v4 — Premium Redesign ═════ */
#s-checkin{background:#f5f4f0}

/* ── Top bar ── */
.ci4-bar{
  padding:52px 20px 12px;
  background:var(--night);
  border-bottom:none;
  flex-shrink:0;
  position:sticky;top:0;z-index:10;
}
.ci4-nav{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ci4-back{
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#fff;flex-shrink:0;cursor:pointer;border:none;
  transition:background .15s;
}
.ci4-back:active{background:rgba(255,255,255,.2)}
.ci4-title{font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:-.02em;flex:1;color:#fff}

/* Progress bar — ultra thin, elegant */
.ci4-prog{height:2px;background:rgba(255,255,255,.15);border-radius:999px;margin-bottom:0}
.ci4-prog-fill{height:100%;background:rgba(255,255,255,.6);border-radius:999px;transition:width .6s cubic-bezier(.4,0,.2,1)}

/* ── Scroll body ── */
.ci4-scroll{
  flex:1;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:0 0 120px;
}
.ci4-scroll::-webkit-scrollbar{display:none}

/* ── Guide banner ── */
.ci4-guide{
  margin:16px 20px 4px;
  padding:12px 16px;
  background:rgba(255,255,255,.7);
  border-radius:12px;
  border:0.5px solid rgba(0,0,0,.06);
  display:flex;align-items:flex-start;gap:10px;
}
.ci4-guide-icon{font-size:16px;flex-shrink:0;margin-top:1px}
.ci4-guide-text{font-size:13px;color:var(--mu);line-height:1.6;letter-spacing:.01em}
.ci4-guide-text strong{font-weight:600;color:var(--ink2)}

@keyframes ci4tick{0%{transform:scale(1)}35%{transform:scale(1.25) rotate(-5deg)}100%{transform:scale(1) rotate(0)}}
.ci4-item-lbl.done .ci4-item-icon{animation:ci4tick .4s ease}

/* Right body — the sentence */
.ci4-item-body{
  flex:1;min-width:0;
  font-size:14px;line-height:1.85;color:var(--ink);
  padding-left:14px;
  letter-spacing:-.01em;
}

/* ── Slot styles ── */
/* Empty slot — subtle underline only, no background */
.ci4-slot{
  display:inline;cursor:pointer;
  font-size:14px;
  color:rgba(0,0,0,.25);
  border-bottom:1.5px solid rgba(0,0,0,.2);
  padding:0 1px;
  transition:all .2s;
  letter-spacing:0;
}
@keyframes ci4pulse{
  0%,100%{border-bottom-color:rgba(0,0,0,.2)}
  50%{border-bottom-color:var(--drift0);color:var(--drift0)}
}
.ci4-slot-first{animation:ci4pulse 2s ease-in-out 3}

/* Filled — normal, blends into sentence */
.ci4-slot.ok{
  color:var(--ink);border-bottom:none;padding:0;
  font-weight:500;
}
/* Filled — anomaly, warm amber underline (no background box) */
.ci4-slot.warn{
  color:var(--ink);border-bottom:none;padding:0;
  font-weight:500;
  text-decoration:underline;
  text-decoration-color:rgba(245,158,11,.6);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
/* Active (popup open for this slot) */
.ci4-slot.active{
  color:var(--drift0);border-bottom:2px solid var(--drift0);padding:0 1px;
}
/* Previous entry — faded */
.ci4-slot-prev{
  color:rgba(0,0,0,.22)!important;
  border-bottom:1px dashed rgba(0,0,0,.15)!important;
  padding:0 1px!important;
  font-weight:400!important;
  text-decoration:none!important;
}
.ci4-divider{height:4px}
/* prev hint below sentence */
.ci4-prev-hint{
  padding:0 0 8px 16px;
  font-size:11px;color:rgba(0,0,0,.28);
  letter-spacing:.02em;line-height:1.4;
  font-style:italic;
}
/* summary diff tag */
.ci4-sum-prev{
  font-size:11px;color:rgba(0,0,0,.3);
  margin-left:6px;font-style:italic;
  white-space:nowrap;
}
.ci4-sum-changed{
  background:rgba(21,128,61,.06);
  border-radius:6px;
  margin:-2px -6px;
  padding:2px 6px;
}

/* ── Footer ── */
.ci4-foot{
  flex-shrink:0;
  padding:12px 20px;
  background:rgba(245,244,240,.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:0.5px solid rgba(0,0,0,.07);
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
}
.ci4-foot-row{display:flex;align-items:center;gap:12px}
.ci4-foot-hint{font-size:12px;color:var(--soft);flex:1;line-height:1.5;letter-spacing:.01em}
.ci4-foot-prog{
  font-size:12px;font-weight:500;color:var(--drift0);
  white-space:nowrap;letter-spacing:.02em;
}
.ci4-done-btn{
  background:var(--drift0);color:#fff;
  border-radius:999px;
  padding:11px 22px;
  font-size:14px;font-weight:500;
  cursor:pointer;border:none;white-space:nowrap;
  letter-spacing:.01em;
  transition:opacity .15s,transform .1s;
}
.ci4-done-btn:active{opacity:.8;transform:scale(.97)}

/* ── Popup — full focus mode ── */
.ci4-pop-bg{
  position:fixed;inset:0;z-index:200;
  background:rgba(10,10,10,.45);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:none;align-items:flex-end;justify-content:center;
}
.ci4-pop-bg.show{display:flex}
.ci4-pop{
  background:#fff;
  border-radius:24px 24px 0 0;
  width:100%;max-width:var(--mw);
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 40px rgba(0,0,0,.12);
}
.ci4-pop-drag{display:flex;flex-direction:column;align-items:center;padding:12px 0 0;gap:5px}
.ci4-pop-drag-bar{width:36px;height:3px;background:rgba(0,0,0,.1);border-radius:2px}
.ci4-pop-drag-hint{font-size:10px;color:rgba(0,0,0,.25);letter-spacing:.05em}

/* Question — large, serif, breathing */
.ci4-pop-ctx{
  font-family:var(--serif);
  font-size:22px;font-weight:400;
  color:var(--ink);
  padding:16px 22px 16px;
  letter-spacing:-.02em;line-height:1.3;
}
.ci4-pop-q{display:none}

/* Options grid */
.ci4-pop-opts{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:0 20px 4px;
}
.ci4-pop-opts.grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.ci4-pop-opt{
  padding:13px 18px;
  border-radius:14px;
  font-size:15px;
  cursor:pointer;
  border:1.5px solid rgba(0,0,0,.08);
  background:rgba(0,0,0,.03);
  color:var(--ink2);
  transition:all .15s;
  -webkit-tap-highlight-color:transparent;
  line-height:1.3;
  letter-spacing:.01em;
  font-weight:400;
}
.ci4-pop-opt:active{transform:scale(.95);background:rgba(0,0,0,.06)}
.ci4-pop-opt.sel-ok{
  background:var(--drift0);border-color:var(--drift0);
  color:#fff;font-weight:500;
}
.ci4-pop-opt.sel-warn{
  background:#f59e0b;border-color:#f59e0b;
  color:#fff;font-weight:500;
}
.ci4-pop-footer{padding:16px 20px 0;display:flex;gap:8px}
.ci4-pop-next{
  flex:1;padding:15px;
  border-radius:16px;
  background:var(--drift0);border:none;
  color:#fff;font-size:15px;font-weight:500;
  cursor:pointer;text-align:center;
  letter-spacing:.01em;
  transition:opacity .15s;
}
.ci4-pop-next:active{opacity:.75}

/* ── Summary overlay ── */
.ci4-sum-bg{
  position:fixed;inset:0;z-index:300;
  background:#f5f4f0;
  display:none;flex-direction:column;
  align-items:center;overflow-y:auto;
}
.ci4-sum-bg.show{display:flex}
.ci4-sum{width:100%;max-width:var(--mw);padding:0 0 40px;flex:1;display:flex;flex-direction:column}

/* Hero top */
.ci4-sum-top{
  text-align:center;
  padding:60px 24px 32px;
  background:linear-gradient(180deg,#fff 0%,#f5f4f0 100%);
  border-bottom:0.5px solid rgba(0,0,0,.06);
}
.ci4-sum-icon{
  width:56px;height:56px;border-radius:50%;
  background:var(--drift0);
  color:#fff;font-size:26px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
  box-shadow:0 4px 16px rgba(21,128,61,.25);
}
.ci4-sum-date{font-size:11px;color:var(--soft);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.ci4-sum-title{font-family:var(--serif);font-size:28px;font-weight:400;color:var(--ink);letter-spacing:-.02em;margin-bottom:6px;line-height:1.2}
.ci4-sum-sub{font-size:14px;color:var(--mu);line-height:1.6}

/* Summary rows */
.ci4-sum-body{
  margin:20px 20px 0;
  background:#fff;
  border-radius:16px;
  border:0.5px solid rgba(0,0,0,.07);
  overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.ci4-sum-row{display:flex;align-items:baseline;padding:13px 18px;border-bottom:0.5px solid rgba(0,0,0,.05)}
.ci4-sum-row:last-child{border-bottom:none}
.ci4-sum-row-lbl{
  width:32px;flex-shrink:0;
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--soft);
  padding-right:14px;
  border-right:1px solid rgba(0,0,0,.07);
  margin-right:14px;
  text-align:center;line-height:1.4;
}
.ci4-sum-row-val{flex:1;font-size:14px;color:var(--ink);line-height:1.7;letter-spacing:.01em}
.ci4-sum-row-val .warn-tag{
  text-decoration:underline;
  text-decoration-color:rgba(245,158,11,.6);
  text-decoration-thickness:2px;
  text-underline-offset:2px;
  font-weight:500;
}

/* CTA */
.ci4-sum-foot{padding:20px 20px 0}
.ci4-sum-btn{
  width:100%;padding:16px;
  background:var(--drift0);color:#fff;
  border-radius:16px;
  font-size:16px;font-weight:500;
  text-align:center;cursor:pointer;border:none;
  letter-spacing:.01em;
  transition:opacity .15s;
}
.ci4-sum-btn:active{opacity:.8}

/* ══ Check-in Matrix v3 ══════════════════ */
#s-checkin-old{background:var(--pa)}
.ci3-bar{padding:52px 16px 0;background:var(--cd);border-bottom:1px solid var(--ln);flex-shrink:0}
.ci3-nav{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ci3-back{width:30px;height:30px;border-radius:8px;background:var(--ln2);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--ink);flex-shrink:0;cursor:pointer;border:none}
.ci3-title{font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:-.02em;flex:1}
.ci3-count{font-size:12px;color:var(--mu);font-weight:500}
.ci3-prog{height:3px;background:var(--ln);border-radius:999px;margin-bottom:12px}
.ci3-prog-fill{height:100%;background:var(--drift0);border-radius:999px;transition:width .3s}

/* Scrollable content */
.ci3-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:14px 16px 16px}
.ci3-scroll::-webkit-scrollbar{display:none}

/* Each dimension block */
.ci3-dim{margin-bottom:0;padding:14px 0;border-bottom:1px solid var(--ln2)}.ci3-dim:last-child{border-bottom:none}
.ci3-dim-label{font-size:15px;font-weight:500;color:var(--ink);margin-bottom:9px;letter-spacing:-.01em}
.ci3-hint{font-size:11px;color:var(--soft);font-style:italic;margin-bottom:6px;margin-top:-4px}

/* Pills row */
.ci3-pills{display:grid;gap:7px}
.ci3-pills.cols-2{grid-template-columns:1fr 1fr}
.ci3-pills.cols-3{grid-template-columns:1fr 1fr 1fr}
.ci3-pills.cols-4{grid-template-columns:1fr 1fr 1fr 1fr}
.ci3-pills.cols-5{grid-template-columns:1fr 1fr 1fr 1fr 1fr}
.ci3-pill{padding:11px 8px;border-radius:var(--rsm);border:1.5px solid var(--ln);font-size:13px;color:var(--mu);background:var(--ln2);cursor:pointer;transition:all .15s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.25;text-align:center;min-height:44px}
.ci3-pill.sel{background:var(--d0bg);border-color:var(--drift0);color:var(--drift0);font-weight:500}
.ci3-pill:active{transform:scale(.95)}
.ci3-pill-num{font-size:17px;font-weight:500;line-height:1}
.ci3-pill-unit{font-size:10px;color:var(--mu)}
.ci3-pill.sel .ci3-pill-unit{color:var(--drift0)}
.ci3-pill-ideal{font-size:8px;font-weight:600;color:var(--drift1);background:var(--d1bg);padding:1px 5px;border-radius:4px;text-transform:uppercase;letter-spacing:.04em}

/* 2-col grid */
.ci3-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ci3-card{padding:13px 12px;border-radius:var(--rsm);border:1.5px solid var(--ln);font-size:13px;color:var(--mu);background:var(--ln2);cursor:pointer;transition:all .15s;text-align:center;line-height:1.35;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ci3-card.sel{background:var(--d0bg);border-color:var(--drift0);color:var(--drift0);font-weight:500}
.ci3-card:active{transform:scale(.97)}
.ci3-card-ideal{font-size:9px;color:var(--drift1);display:block;margin-top:3px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}

/* Toggle */
.ci3-toggle{display:flex;border-radius:999px;border:1.5px solid var(--ln);overflow:hidden;background:var(--cd)}
.ci3-toggle-btn{flex:1;padding:12px 4px;font-size:13px;color:var(--mu);text-align:center;cursor:pointer;border:none;background:none;transition:all .15s;line-height:1.3}
.ci3-toggle-btn.sel{background:var(--drift0);color:#fff;font-weight:500}
.ci3-toggle-sep{width:1px;background:var(--ln);flex-shrink:0}

/* Chips */
.ci3-chips{display:flex;flex-wrap:wrap;gap:7px}
.ci3-chip{padding:9px 13px;border-radius:var(--rsm);font-size:13px;background:var(--ln2);border:1.5px solid var(--ln);color:var(--mu);cursor:pointer;transition:all .15s;line-height:1.3}
.ci3-chip.sel{background:var(--d0bg);border-color:var(--drift0);color:var(--drift0);font-weight:500}
.ci3-chip:active{transform:scale(.95)}
.ci3-chips-grp-lbl{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--soft);margin-bottom:5px;margin-top:8px}
.ci3-chips-grp-lbl:first-child{margin-top:0}

/* Graphic selectors */
.ci3-gs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ci3-gs-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.ci3-gs-opt{border:1.5px solid var(--ln);border-radius:10px;padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;transition:all .15s;background:var(--cd)}
.ci3-gs-opt.sel{border-color:var(--drift0);background:var(--d0bg)}
.ci3-gs-opt:active{transform:scale(.94)}
.ci3-gs-label{font-size:9px;color:var(--mu);text-align:center;line-height:1.3}
.ci3-gs-opt.sel .ci3-gs-label{color:var(--drift0);font-weight:500}
.ci3-gs-type{font-size:8px;color:var(--soft)}
.ci3-gs-ideal{font-size:8px;font-weight:600;color:var(--drift0);background:var(--d1bg);padding:1px 4px;border-radius:999px;text-transform:uppercase}

/* Body map */
.ci3-body-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.ci3-body-lbl{font-size:12px;color:var(--drift0);font-weight:500;min-height:16px;text-align:center}

/* Footer */
.ci3-foot{flex-shrink:0;padding:10px 16px;background:rgba(246,245,241,.97);backdrop-filter:blur(20px);border-top:1px solid var(--ln);padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.ci3-foot-row{display:flex;gap:10px;align-items:center}
.ci3-foot-meta{font-size:12px;color:var(--mu);flex:1}
.ci3-next{background:var(--drift0);color:#fff;border-radius:var(--rsm);padding:11px 22px;font-size:14px;font-weight:500;cursor:pointer;border:none;white-space:nowrap}
.ci3-next:active{opacity:.8}

@keyframes obPulse{0%,100%{opacity:.4}50%{opacity:1}}
/* What is drift entry point on home */
.drift-hint{margin:0 16px 16px;padding:12px 16px;background:var(--d0bg);border-radius:var(--rsm);display:flex;align-items:center;gap:12px;cursor:pointer;border:1px solid rgba(26,74,46,.1)}
/* Status card */
#tb-qi, #s-askqi { display:none !important; }
.ps-ask { display:none !important; }