:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#5d6b85;
  --border:#e4e9f3;
  --primary:#1a5fe6;
  --primary2:#0e4fcc;
  --danger:#d93025;
  --ok:#138a4b;
  --shadow:0 6px 24px rgba(11,18,32,.08);
  --radius:16px;
  --radius2:12px;
  --tap:44px;
  --max:960px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Microsoft YaHei", Segoe UI, Roboto, Helvetica, Arial, sans-serif;}
button, input, select {font-family:inherit}
a{color:var(--primary);text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:16px 16px calc(92px + var(--safe-bottom));}
.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding: calc(10px + var(--safe-top)) 14px 10px;
  background:rgba(245,247,251,.85);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-logo{
  width:38px;height:38px;border-radius:12px;
  background:url('icons/brand-96.png') center/cover no-repeat;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.brand-logo:after{display:none;}
.brand-title{font-weight:800;letter-spacing:.3px;font-size:16px;line-height:18px;}
.brand-subtitle{font-size:12px;color:var(--muted);line-height:14px;margin-top:2px;}
.topbar-right{display:flex;gap:10px;align-items:center;}

.brand-showcase{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 0 14px;}
.brand-full{width:min(360px, 86%);border-radius:16px;box-shadow:0 18px 38px rgba(0,0,0,.28);}

.app{min-height:calc(100vh - 56px);}
.page{display:none;opacity:0;}
.page.active{display:block;animation:fadeIn .25s ease forwards;}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
  margin-bottom:14px;
}
.card-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;}
.card-title{font-weight:800;font-size:15px;}
.card-subtitle{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.35;}
.content{font-size:14px;line-height:1.55;color:var(--text);}
.note{font-size:12px;color:var(--muted);line-height:1.35;margin-top:10px;}
.note.subtle{opacity:.85}
.muted{opacity:.75}

/* Tiny inline trend sparkline */
.spark{display:inline-block;vertical-align:middle}
.spark polyline{fill:none;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;opacity:.9}

/* Trend card items */
.trend-item{transition:background .15s ease;}
.trend-item:hover,.trend-item:active{background:#f0f7ff;}

/* OCR loading spinner */
.spinner-small{width:18px;height:18px;border:2px solid #e4e9f3;border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}
/* OCR upload area interaction */
#ocrUploadArea:hover{border-color:var(--primary) !important;background:#f0f7ff !important;}
#ocrUploadArea:active{border-color:var(--primary) !important;background:#e0efff !important;transform:scale(.98);}

.row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  background:#eef4ff;border:1px solid #d6e5ff;color:#1145b2;font-weight:700;font-size:12px;
}
.pill.secondary{background:#f1f3f6;border-color:#e4e9f3;color:var(--muted);font-weight:700;}
.dot{width:8px;height:8px;border-radius:999px;background:var(--ok);display:inline-block;}

.grid{display:grid;grid-template-columns:1fr;gap:12px;}
@media (min-width:820px){.grid{grid-template-columns:1fr 1fr;}}
.tile{
  height:52px;border-radius:14px;border:1px solid var(--border);
  background:#f9fbff;
  box-shadow:0 10px 20px rgba(11,18,32,.05);
  font-weight:800;color:#163263;
  display:flex;align-items:center;justify-content:center;
}
.tile:active{transform:scale(.99);}

.task-list{display:flex;flex-direction:column;gap:10px;}
.task{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:10px 10px;border-radius:14px;border:1px solid var(--border);background:#fbfcff;
}
.task .left{display:flex;gap:10px;align-items:flex-start;}
.checkbox{
  width:22px;height:22px;border-radius:7px;border:2px solid #c6d4f5;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:1px;
}
.task.done .checkbox{background:var(--primary);border-color:var(--primary);}
.task.done .checkbox:after{content:"✓";color:#fff;font-weight:900;font-size:14px;line-height:1;}
.task .title{font-weight:900;font-size:14px;}
.task .meta{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.35;}
.task .right{display:flex;align-items:center;gap:8px;flex-shrink:0;}

/* "为什么要做" small icon button */
.info-btn{
  min-height:32px;
  width:32px;
  height:32px;
  padding:0;
  border-radius:999px;
  border:1px solid #d6e5ff;
  background:#eef4ff;
  color:#1145b2;
  font-weight:1000;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.info-btn.small{min-height:28px;width:28px;height:28px;font-size:12px;border-radius:999px;}
.info-btn.tiny{min-height:22px;width:22px;height:22px;font-size:10px;border-radius:999px;flex-shrink:0;}
.info-btn:active{transform:scale(.99);}

/* Inline "why" tip on quick-entry modals */
.why-tip{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;margin-bottom:12px;
  border-radius:var(--radius2);
  background:#eef4ff;border:1px solid #d6e5ff;
}
.why-tip .why-text{
  flex:1;font-size:13px;line-height:1.5;color:#1145b2;
}

/* Explainer content list */
.explain-list ul{margin:6px 0 0 18px;padding:0;}
.explain-list li{margin:4px 0;}

.inline-link{margin-left:8px;font-weight:900;}
.inline-link:active{opacity:.85;}

/* Per-item explainer page */
.explain-section{padding:12px 12px;border-radius:14px;border:1px solid var(--border);background:#fff;margin-bottom:10px;}
.explain-h{font-weight:1000;margin-bottom:6px;}
.explain-p{font-size:13px;line-height:1.6;color:var(--text);}
.explain-section ul{margin:6px 0 0 18px;padding:0;}
.explain-section li{margin:5px 0;font-size:12px;line-height:1.5;color:var(--muted);}

/* Inline explain card (inside forms/modals) */
.explain-card{
  margin-top:8px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid #d6e5ff;
  background:#eef4ff;
}
.explain-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.explain-card-title{
  font-weight:1000;
  font-size:13px;
  color:#1145b2;
  line-height:1.35;
}
.explain-card-body{
  margin-top:6px;
  font-size:12px;
  line-height:1.55;
  color:#1a2b4d;
}
.explain-card-list ul{
  margin:6px 0 0 18px;
  padding:0;
}
.explain-card-list li{
  margin:4px 0;
  font-size:12px;
  line-height:1.55;
  color:#35507a;
}

/* Follow-up guide page */
.guide-title{font-weight:1000;font-size:16px;line-height:1.35;margin:4px 0 12px;}
.guide-section{padding:12px 12px;border-radius:14px;border:1px solid var(--border);background:#fff;margin-bottom:10px;}
.guide-h{font-weight:1000;margin-bottom:6px;}
.guide-p{font-size:13px;line-height:1.6;color:var(--text);}
.guide-section ul, .guide-section ol{margin:6px 0 0 18px;padding:0;}
.guide-section li{margin:8px 0;font-size:13px;line-height:1.6;color:var(--text);}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;font-size:11px;font-weight:800;border:1px solid var(--border);background:#f4f6fa;color:var(--muted);}
.badge.danger{background:#fff2f2;border-color:#ffd8d8;color:#a51515;}
.badge.ok{background:#effaf3;border-color:#cdebd7;color:#0f6b3c;}
.badge.info{background:#eef4ff;border-color:#d6e5ff;color:#1145b2;}

.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  padding:10px 12px calc(10px + var(--safe-bottom));
  background:rgba(255,255,255,.92);
  border-top:1px solid var(--border);
  backdrop-filter:saturate(140%) blur(12px);
  display:grid;gap:8px;
}

.tabbar[data-cols="4"]{grid-template-columns:repeat(4,1fr);}
.tabbar[data-cols="5"]{grid-template-columns:repeat(5,1fr);}

.tab.hidden{display:none;}

.tab{
  height:46px;border-radius:14px;border:1px solid var(--border);
  background:#f6f8fc;font-weight:900;color:#3a4a66;
}
.tab.active{background:#e9f1ff;border-color:#d6e5ff;color:#1145b2;}
.tab:active{transform:scale(.99);}

/* PWA update banner */
.update-banner{
  position:fixed;
  left:12px;
  right:12px;
  bottom:calc(76px + var(--safe-bottom));
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  backdrop-filter:saturate(140%) blur(12px);
}
.update-text strong{display:block;font-size:13px;font-weight:900;color:#1a2b4d;}
.update-text .sub{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.25;}
.update-actions{display:flex;gap:8px;flex-shrink:0;}

button{
  min-height:var(--tap);
  padding:10px 12px;border-radius:14px;border:1px solid var(--border);
  background:#fff;font-weight:900;color:#273554;
}
button.primary{background:var(--primary);border-color:var(--primary);color:#fff;}
button.primary:active{background:var(--primary2);}
button.ghost{background:transparent;border-color:transparent;color:#1145b2;}
button.ghost.small, button.primary.small{min-height:36px;padding:7px 10px;border-radius:12px;font-size:12px;}
button:active{transform:scale(.99);}

.kv{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dashed var(--border);font-size:13px;}
.kv:last-child{border-bottom:none;}
.kv span:first-child{color:var(--muted);font-weight:800;}
.kv span:last-child{font-weight:900;}

.mono{
  background:#0b1220;color:#e9f1ff;border-radius:14px;
  padding:12px;border:1px solid rgba(255,255,255,.08);
  overflow:auto;white-space:pre-wrap;
  font-size:12px;line-height:1.5;
}

.disclaimer{
  margin:14px 0 0;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid #ffe1c7;
  background:#fff6ef;
  color:#6a3b00;
  font-size:12px;line-height:1.5;
}

.modal{
  position:fixed;inset:0;z-index:50;
  background:rgba(11,18,32,0);
  display:none;align-items:flex-end;justify-content:center;
  padding:14px 12px calc(14px + var(--safe-bottom));
  transition:background .2s ease;
}
.modal.show{display:flex;animation:overlayIn .2s ease forwards;}
.sheet{
  width:100%;
  max-width:var(--max);
  background:#fff;border-radius:18px;
  border:1px solid var(--border);
  box-shadow:0 30px 80px rgba(11,18,32,.25);
  overflow:hidden;
  transform:translateY(40px);opacity:0;
  animation:sheetUp .3s cubic-bezier(.22,1,.36,1) forwards;
}
.sheet-hd{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:14px 14px;border-bottom:1px solid var(--border);background:#fbfcff;}
.sheet-title{font-weight:900;font-size:15px;}
.sheet-subtitle{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.35;}
.sheet-body{padding:14px;max-height:66vh;overflow:auto;}
.sheet-footer{padding:12px 14px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;background:#fbfcff;}

.section{padding:12px 0;border-bottom:1px dashed var(--border);}
.section:last-child{border-bottom:none;}
.section-title{font-weight:900;margin:2px 0 12px;}

.field{display:flex;flex-direction:column;gap:6px;margin:10px 0;}
.field>span{font-size:12px;color:var(--muted);font-weight:900;}
.check{display:flex;align-items:center;gap:8px;margin:8px 0;}
.check input{width:18px;height:18px;}
input, select{
  height:44px;border-radius:14px;border:1px solid var(--border);
  padding:0 12px;font-weight:800;background:#fff;
}
input:focus, select:focus{outline:2px solid rgba(26,95,230,.18);border-color:#d6e5ff;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.hidden{display:none !important;}
/* Home: collapse optional cards to reduce clutter */
body[data-home-more="0"] .home-more{display:none;}
body[data-home-more="1"] .home-more{display:block;}


.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  border:1px solid var(--border);
  background:#f4f6fa;
  color:#3a4a66;
  font-weight:900;font-size:12px;
}
.chip.active{background:#e9f1ff;border-color:#d6e5ff;color:#1145b2;}
.chip:active{transform:scale(.99);}

.chat{height:52vh;min-height:280px;max-height:520px;overflow:auto;border-radius:14px;border:1px solid var(--border);background:#fbfcff;padding:10px;display:flex;flex-direction:column;gap:10px;}
.bubble{max-width:88%;padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:#fff;}
.bubble.me{margin-left:auto;background:#e9f1ff;border-color:#d6e5ff;}
.bubble .meta{font-size:11px;color:var(--muted);margin-top:6px;}
.chat-input{display:flex;gap:10px;margin-top:10px;}
.chat-input input{flex:1;}

.list-item{padding:10px 10px;border-radius:14px;border:1px solid var(--border);background:#fff;margin-bottom:10px;}
.list-item .t{font-weight:900;}
.list-item .s{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.35;}

/* Document vault */
.doc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.doc-meta{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.35;}
.doc-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.doc-preview{width:100%;border-radius:14px;border:1px solid var(--border);overflow:hidden;margin-top:10px;background:#0b1220;}
.doc-preview img{width:100%;display:block;background:#000;}
.doc-empty{padding:10px 0;color:var(--muted);font-size:12px;}

/* ===== Animations ===== */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes overlayIn{from{background:rgba(11,18,32,0)}to{background:rgba(11,18,32,.45)}}
@keyframes checkPop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes celebratePop{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes toastSlideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Task check animation */
.task.done .checkbox{animation:checkPop .3s cubic-bezier(.22,1,.36,1);}
/* Task done visual: fade text slightly, strikethrough title */
.task.done .title{text-decoration:line-through;opacity:.55;}
.task.done .meta{opacity:.45;}

/* Button press feedback with transition */
button{transition:transform .12s ease, background .12s ease;}
.tile{transition:transform .12s ease;}
.tab{transition:transform .12s ease, background .12s ease;}
.chip{transition:transform .12s ease, background .12s ease;}

/* ===== Progress Ring ===== */
.progress-ring{position:relative;display:inline-flex;align-items:center;justify-content:center;}
.progress-ring svg{transform:rotate(-90deg);}
.progress-ring .ring-bg{fill:none;stroke:#e4e9f3;stroke-width:4;}
.progress-ring .ring-fg{fill:none;stroke:var(--primary);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .5s cubic-bezier(.22,1,.36,1);}
.progress-ring .ring-fg.complete{stroke:var(--ok);}
.progress-ring .ring-text{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;color:var(--text);
}

/* ===== Greeting ===== */
.greeting{font-size:17px;font-weight:900;line-height:1.35;margin-bottom:4px;color:var(--text);}
.greeting-sub{font-size:12px;color:var(--muted);line-height:1.35;margin-bottom:14px;}

/* ===== 7-day strip ===== */
.week-strip{display:flex;gap:6px;align-items:center;justify-content:center;margin:10px 0 6px;}
.week-dot{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10px;font-weight:700;color:var(--muted);
}
.week-dot .wd{width:28px;text-align:center;}
.week-dot .circle{
  width:22px;height:22px;border-radius:999px;
  border:2px solid #e4e9f3;background:transparent;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:900;color:transparent;
  transition:all .3s ease;
}
.week-dot .circle.filled{background:var(--primary);border-color:var(--primary);color:#fff;}
.week-dot .circle.today{border-color:var(--primary);box-shadow:0 0 0 2px rgba(26,95,230,.2);}
.week-dot .circle.partial{background:#d6e5ff;border-color:#b8d0ff;}

/* ===== Streak badge ===== */
.streak-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  background:#fff6ef;border:1px solid #ffe1c7;
  color:#a85d00;font-weight:900;font-size:12px;
}
.streak-badge .fire{font-size:14px;}

/* ===== Celebrate card ===== */
.celebrate{
  text-align:center;padding:20px 14px;
  animation:celebratePop .4s cubic-bezier(.22,1,.36,1);
}
.celebrate .emoji{font-size:36px;margin-bottom:8px;}
.celebrate .msg{font-weight:900;font-size:15px;color:var(--text);}
.celebrate .sub{font-size:12px;color:var(--muted);margin-top:4px;}

/* ===== Toast animation ===== */
.toast-anim{animation:toastSlideUp .3s ease;}

/* ===== Onboarding ===== */
.onboard{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 20px;text-align:center;
}
.onboard .emoji{font-size:48px;margin-bottom:16px;}
.onboard h1{font-size:22px;font-weight:900;margin:0 0 8px;}
.onboard p{font-size:14px;color:var(--muted);line-height:1.55;margin:0 0 24px;max-width:320px;}
.onboard .steps{display:flex;gap:6px;margin-bottom:20px;}
.onboard .step-dot{width:8px;height:8px;border-radius:999px;background:#e4e9f3;}
.onboard .step-dot.active{background:var(--primary);}
.onboard.hidden{display:none !important;}
.ob-programs{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px;margin-bottom:16px;}
.ob-prog-btn{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:14px 16px;border-radius:var(--radius2);
  border:2px solid var(--border);background:var(--card);
  text-align:left;cursor:pointer;transition:border-color .15s, background .15s;
}
.ob-prog-btn:active,.ob-prog-btn.selected{border-color:var(--primary);background:#eef4ff;}
.ob-prog-btn span{font-size:12px;color:var(--muted);margin-top:2px;}

/* ===== Empty state CTA ===== */
.empty-cta{
  text-align:center;padding:20px 14px;
}
.empty-cta .emoji{font-size:32px;margin-bottom:8px;}
.empty-cta .msg{font-size:13px;color:var(--muted);margin-bottom:12px;line-height:1.45;}
.empty-cta button{margin:0 auto;}

/* ===== Summary page (P0-2) ===== */
.summary-printable{padding:0;}
.summary-header{margin-bottom:12px;}
.summary-title{font-weight:900;font-size:16px;line-height:1.35;}
.summary-meta{font-size:12px;color:var(--muted);margin-top:2px;}
.summary-section{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#fbfcff;margin-bottom:8px;}
.summary-label{font-weight:900;font-size:13px;color:var(--text);}
.summary-count{font-weight:600;color:var(--muted);font-size:12px;}
.summary-value{font-size:14px;margin-top:4px;line-height:1.5;}
.summary-trend{font-size:12px;color:var(--muted);margin-top:4px;}
.summary-trend .trend-arrow{font-weight:900;}
.summary-sym{font-size:13px;line-height:1.5;margin-top:4px;padding-left:2px;}
.summary-sym-date{color:var(--muted);font-weight:700;font-size:12px;}
.summary-disclaimer{margin-top:12px;padding:10px 12px;border-radius:10px;background:#fff6ef;border:1px solid #ffe1c7;color:#6a3b00;font-size:11px;line-height:1.45;}
.summary-spark polyline{stroke:var(--primary);}

/* Summary actions row */
.summary-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
@media(min-width:480px){.summary-actions{grid-template-columns:1fr 1fr 1fr;}}
.summary-actions .tile{height:48px;font-size:13px;}

/* Questions textarea on summary page */
#summaryQuestions{
  width:100%;border-radius:12px;border:1px solid var(--border);
  padding:10px 12px;font-size:14px;line-height:1.5;resize:vertical;
  font-family:inherit;min-height:80px;
}

/* ===== Quick-start card (P0-1) ===== */
.quick-steps{display:flex;flex-direction:column;gap:8px;}
.quick-step{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:14px;
  border:1px solid var(--border);background:#f9fbff;
  cursor:pointer;transition:background .15s;
}
.quick-step:active{background:#eef4ff;}
.quick-step.done{opacity:.6;}
.quick-step.done .quick-step-num{background:var(--ok);color:#fff;border-color:var(--ok);}
.quick-step-num{
  width:28px;height:28px;border-radius:999px;
  border:2px solid var(--primary);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:13px;flex-shrink:0;
}
.quick-step-text b{font-size:14px;display:block;line-height:1.3;}
.quick-step-text span{font-size:12px;color:var(--muted);}

/* ===== CTA card (P0-4) ===== */
.cta-card{
  padding:14px;border-radius:14px;
  border:1px solid #d6e5ff;background:linear-gradient(135deg,#f0f7ff 0%,#fff 100%);
  margin-bottom:14px;
}
.cta-text{font-weight:900;font-size:14px;color:var(--primary);}
.cta-desc{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.4;}
.cta-actions{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap;}
.cta-link{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 14px;border-radius:12px;
  background:var(--primary);color:#fff;font-weight:800;font-size:13px;
  text-decoration:none;
}
.cta-link:active{background:var(--primary2);}

/* ===== Disclaimer top bar ===== */
.disclaimer-top{
  padding:8px 12px;border-radius:10px;
  background:#fff6ef;border:1px solid #ffe1c7;
  color:#6a3b00;font-size:11px;line-height:1.4;
  margin-bottom:12px;
}

/* ===== Site footer (P0-6) ===== */
.site-footer{
  margin-top:20px;padding:16px 0 8px;
  border-top:1px solid var(--border);
  text-align:center;font-size:11px;color:var(--muted);line-height:1.6;
}
.footer-disclaimer{
  padding:10px 12px;border-radius:10px;
  background:#fff6ef;border:1px solid #ffe1c7;
  color:#6a3b00;font-size:11px;line-height:1.45;
  margin-bottom:10px;
}
.footer-links{margin-bottom:6px;}
.footer-links a{color:var(--primary);font-weight:700;text-decoration:none;}
.footer-sep{margin:0 6px;color:var(--border);}
.footer-muted{color:var(--muted);}
.footer-icp{color:var(--muted);font-size:10px;margin-top:4px;}
.footer-company{color:var(--muted);font-size:10px;margin-top:2px;}

/* ===== Print styles (P0-3) ===== */
@media print{
  body{background:#fff !important;}
  .topbar,.tabbar,.update-banner,.modal,.cta-card,
  #cardSummaryActions,#summaryCta,#btnSaveQuestions,
  .quick-steps,.site-footer,.disclaimer-top,
  button,.tab{display:none !important;}
  .page{display:none !important;}
  #page-summary{display:block !important;opacity:1 !important;}
  #page-summary .container{padding:0 !important;}
  .card{box-shadow:none !important;border:1px solid #ddd !important;break-inside:avoid;}
  .summary-section{break-inside:avoid;}
  #summaryQuestions{border:1px solid #ddd !important;}
  .summary-disclaimer{border:none !important;background:#f9f9f9 !important;}
}

/* ====== Education Engine Styles ====== */

/* Top Concerns */
.edu-concern-item{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.edu-concern-item:last-child{border-bottom:none;}
.edu-concern-num{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;}
.edu-concern-body{flex:1;}
.edu-concern-title{font-weight:600;font-size:14px;color:var(--text);}
.edu-concern-detail{font-size:12px;color:var(--muted);margin-top:2px;}

/* Red Flags (Education) */
.edu-redflag-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);}
.edu-redflag-item:last-child{border-bottom:none;}
.edu-redflag-badge{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--danger);color:#fff;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.edu-redflag-body{flex:1;}
.edu-redflag-title{font-weight:600;font-size:13px;color:var(--danger);}
.edu-redflag-summary{font-size:12px;color:var(--muted);margin-top:2px;}

/* Diet Warnings */
.edu-diet-warning{background:#fff8e1;border:1px solid #ffe082;border-radius:8px;padding:8px 12px;margin-bottom:10px;font-size:12px;line-height:1.5;color:#6d4c00;}

/* Education Cards */
.edu-card{border-left:3px solid var(--primary);padding-left:12px !important;}
.edu-card .edu-card-action{font-size:12px;color:var(--primary);margin-top:4px;}
.edu-card .edu-card-redflags{font-size:11px;color:var(--danger);margin-top:4px;line-height:1.4;}
.edu-section-divider{font-size:11px;color:var(--muted);text-align:center;padding:8px 0;border-top:1px dashed var(--border);margin-top:8px;}

/* Education Card Tags */
.edu-tag{display:inline-block;font-size:10px;padding:1px 6px;border-radius:3px;margin-right:4px;margin-bottom:2px;}
.edu-tag-standard{background:#e8f5e9;color:#2e7d32;}
.edu-tag-adjunct{background:#e3f2fd;color:#1565c0;}
.edu-tag-emerging{background:#fff3e0;color:#e65100;}
.edu-tag-review{background:#fce4ec;color:#c62828;}

/* Followup Education Sections */
.edu-followup-section{margin-top:12px;padding:12px;background:var(--card);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.edu-followup-section-title{font-size:13px;font-weight:700;margin-bottom:8px;color:var(--text);}

/* ========== SIMPLE MODE (elderly-friendly) ========== */
.simple-mode-section{padding:4px 0;}

.simple-benefit-banner{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;margin-bottom:16px;
  background:linear-gradient(135deg,#e8f5e9 0%,#f1f8e9 100%);
  border-radius:14px;border:1px solid #c8e6c9;
}
.simple-benefit-icon{font-size:28px;flex-shrink:0;}
.simple-benefit-text{display:flex;flex-direction:column;gap:3px;}
.simple-benefit-text b{font-size:16px;color:#2e7d32;line-height:1.35;}
.simple-benefit-text span{font-size:13px;color:#558b2f;line-height:1.3;}

.simple-big-btn{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:18px 20px;margin-bottom:12px;
  background:var(--card);border:2px solid var(--border);
  border-radius:16px;box-shadow:0 4px 16px rgba(11,18,32,.06);
  cursor:pointer;text-align:left;
  transition:border-color .15s,box-shadow .15s;
}
.simple-big-btn:active{border-color:var(--primary);box-shadow:0 2px 8px rgba(26,95,230,.15);transform:scale(.98);}
.simple-big-icon{font-size:32px;flex-shrink:0;}
.simple-big-label{font-size:20px;font-weight:800;color:var(--text);flex:1;}
.simple-big-hint{font-size:13px;color:var(--muted);max-width:140px;text-align:right;line-height:1.3;}
.simple-big-btn-secondary{background:#f8f9ff;border-color:#d6e5ff;}

.simple-progress{
  padding:14px 16px;margin:8px 0 12px;
  background:var(--card);border-radius:14px;border:1px solid var(--border);
  font-size:15px;line-height:1.5;color:var(--text);
}
.simple-progress-count{font-weight:800;color:var(--primary);font-size:18px;}
.simple-progress-msg{color:var(--muted);font-size:13px;margin-top:4px;}

.simple-more-link{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:6px;padding-bottom:8px;}

/* Simple mode: hide non-essential home cards */
body.simple-mode #quickStartCard,
body.simple-mode #cardTopConcerns,
body.simple-mode #cardRedFlagsEdu,
body.simple-mode #cardSummaryEntry,
body.simple-mode #cardWeeklyWins,
body.simple-mode #cardLightNudges,
body.simple-mode #cardTodayTasks,
body.simple-mode #cardDiet,
body.simple-mode #cardKnowledge,
body.simple-mode #cardRecent,
body.simple-mode #cardDialysisHome,
body.simple-mode #btnHomeMoreToggle,
body.simple-mode #homeCtaRemote{display:none !important;}

/* Simple mode: keep safety + program cards visible but full width */
body.simple-mode .disclaimer-top{font-size:13px;}
body.simple-mode .grid{grid-template-columns:1fr;}

/* Simple mode: larger text globally */
body.simple-mode .card-title{font-size:17px;}
body.simple-mode .card-subtitle{font-size:13px;}
body.simple-mode .content{font-size:15px;}
body.simple-mode .tile{height:60px;font-size:16px;}
body.simple-mode .tab{font-size:13px;}
body.simple-mode .topbar{padding-bottom:12px;}
body.simple-mode .brand-title{font-size:18px;}
body.simple-mode .brand-subtitle{font-size:13px;}

/* Simple mode: make modal inputs bigger */
body.simple-mode .sheet input,
body.simple-mode .sheet select{font-size:18px;padding:12px;min-height:48px;}
body.simple-mode .sheet .field span{font-size:15px;}
body.simple-mode .sheet button.primary{font-size:18px;padding:14px 24px;min-height:52px;}

/* Post-record benefit modal */
.benefit-after-record{text-align:center;padding:8px 0;}
.benefit-after-record .benefit-check{font-size:48px;margin-bottom:8px;}
.benefit-after-record .benefit-title{font-size:18px;font-weight:800;color:var(--ok);margin-bottom:6px;}
.benefit-after-record .benefit-body{font-size:15px;color:var(--text);line-height:1.5;margin-bottom:8px;}
.benefit-after-record .benefit-hint{font-size:13px;color:var(--muted);line-height:1.4;}