/* 女予立方｜幼兒疫苗時程（v61：國際極簡版） */
.app-vaccine-mode [data-page="finder"],
.app-vaccine-mode .mobile-filter-fab,
.app-vaccine-mode .health-page,
.app-vaccine-mode .growth-page{display:none !important;}
.vaccine-page.is-hidden{display:none !important;}
.vaccine-page{
  --vax-accent:#67b8ad;
  --vax-accent-deep:#4b9087;
  --vax-ink:#22313c;
  --vax-text:#5f6f79;
  --vax-soft:#f5fbfa;
  --vax-soft-2:#f8fbfc;
  --vax-line:#e4ecef;
  --vax-line-strong:#d5e1e6;
  --vax-shadow:0 12px 28px rgba(28,44,55,.06);
  margin-top:6px;
  display:grid;
  gap:14px;
}

.vaccine-hero-card,
.vaccine-timeline-panel,
.vaccine-mini-note{
  background:#fff;
  border:1px solid var(--vax-line);
  border-radius:24px;
  box-shadow:var(--vax-shadow);
}

.vaccine-hero-card{
  position:relative;
  overflow:hidden;
  padding:18px;
}
.vaccine-hero-card::after{
  content:'';
  position:absolute;
  inset:auto -28px -36px auto;
  width:120px;
  height:120px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(103,184,173,.08), rgba(103,184,173,0));
  pointer-events:none;
}
.vaccine-kicker{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:var(--vax-soft);
  border:1px solid rgba(103,184,173,.16);
  color:var(--vax-accent-deep);
  font-size:12px;
  font-weight:900;
  letter-spacing:.35px;
}
.vaccine-title{
  margin:10px 0 6px;
  font-size:clamp(25px,5.6vw,34px);
  line-height:1.14;
  color:var(--vax-ink);
  font-weight:950;
  letter-spacing:-.02em;
}
.vaccine-desc{
  margin:0;
  max-width:680px;
  color:var(--vax-text);
  font-size:14px;
  font-weight:760;
  line-height:1.68;
}

.vaccine-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  margin-top:14px;
  align-items:stretch;
}
.vaccine-date-input{
  width:100%;
  min-height:50px;
  border-radius:16px;
  border:1px solid var(--vax-line-strong);
  background:#fff;
  color:var(--vax-ink);
  padding:0 14px;
  font-family:inherit;
  font-size:15px;
  font-weight:850;
  outline:none;
}
.vaccine-date-input:focus{
  border-color:var(--vax-accent);
  box-shadow:0 0 0 4px rgba(103,184,173,.12);
}
.vaccine-clear-btn{
  min-width:84px;
  min-height:50px;
  padding:0 16px;
  border:0;
  border-radius:16px;
  cursor:pointer;
  color:#fff;
  background:var(--vax-accent);
  box-shadow:0 10px 20px rgba(103,184,173,.18);
  font-family:inherit;
  font-size:15px;
  font-weight:900;
  white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.vaccine-clear-btn:hover{background:#5eafa4;box-shadow:0 12px 24px rgba(103,184,173,.2);}
.vaccine-clear-btn:active{background:#55a69b;transform:scale(.985);}

.vaccine-meta-line{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.vaccine-meta-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border-radius:999px;
  background:var(--vax-soft-2);
  border:1px solid var(--vax-line);
  padding:6px 10px;
  color:#6a7a84;
  font-size:12px;
  font-weight:820;
  line-height:1.4;
}
.vaccine-meta-pill.is-error{
  border-color:rgba(210,109,109,.26);
  background:#fff8f8;
  color:#b45d5d;
}

.vaccine-next-box{
  margin-top:12px;
  padding:14px 15px;
  border-radius:18px;
  background:var(--vax-soft-2);
  border:1px solid var(--vax-line);
  border-left:4px solid var(--vax-accent);
}
.vaccine-next-box.is-hidden{display:none;}
.vaccine-next-box span{
  display:block;
  color:var(--vax-accent-deep);
  font-size:11px;
  font-weight:950;
  letter-spacing:.35px;
}
.vaccine-next-box strong{
  display:block;
  margin-top:4px;
  color:var(--vax-ink);
  font-size:15px;
  line-height:1.58;
  font-weight:950;
  word-break:break-word;
}
.vaccine-next-box p{
  margin:5px 0 0;
  color:#65757f;
  font-size:13px;
  font-weight:780;
  line-height:1.58;
}

.vaccine-timeline-panel{padding:15px;}
.vaccine-panel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin:2px 1px 14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--vax-line);
}
.vaccine-panel-title{
  margin:0;
  font-size:18px;
  font-weight:950;
  color:var(--vax-ink);
}
.vaccine-panel-sub{
  margin:0;
  color:#7a8a93;
  font-size:12px;
  font-weight:820;
}

.vaccine-timeline{display:grid;gap:0;}
.vaccine-tl-item{
  position:relative;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  column-gap:12px;
  padding-bottom:12px;
}
.vaccine-tl-item:last-child{padding-bottom:0;}
.vaccine-tl-rail{position:relative;}
.vaccine-tl-item::before{
  content:"";
  position:absolute;
  left:13px;
  top:23px;
  bottom:-2px;
  width:2px;
  border-radius:999px;
  background:#dfe9ec;
}
.vaccine-tl-item:last-child::before{display:none;}
.vaccine-tl-dot{
  position:absolute;
  left:5px;
  top:11px;
  width:17px;
  height:17px;
  border-radius:50%;
  background:#fff;
  border:3px solid #cddce1;
  box-sizing:border-box;
}
.vaccine-tl-item.is-past .vaccine-tl-dot{
  border-color:#8bc8be;
  background:#8bc8be;
}
.vaccine-tl-item.is-past::before{background:#d9ece8;}
.vaccine-tl-item.is-next .vaccine-tl-dot{
  border-color:var(--vax-accent);
  background:var(--vax-accent);
  box-shadow:0 0 0 5px rgba(103,184,173,.14);
}

.vaccine-tl-card{
  min-width:0;
  border:1px solid var(--vax-line);
  border-radius:18px;
  background:#fff;
  padding:13px 14px;
}
.vaccine-tl-item.is-past .vaccine-tl-card{
  border-color:#dcebe7;
  background:#fbfefd;
}
.vaccine-tl-item.is-next .vaccine-tl-card{
  border-color:#cfe4e0;
  box-shadow:0 10px 22px rgba(103,184,173,.10);
}
.vaccine-tl-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.vaccine-tl-age{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 11px;
  border-radius:999px;
  background:var(--vax-soft);
  border:1px solid #d9e8e5;
  color:var(--vax-accent-deep);
  font-size:13px;
  font-weight:950;
  white-space:nowrap;
}
.vaccine-tl-date{
  color:#7e8d96;
  font-size:12px;
  font-weight:820;
}
.vaccine-tl-status{
  margin-left:auto;
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  background:#f4f8f8;
  color:#6f8088;
  border:1px solid var(--vax-line);
}
.vaccine-tl-status.is-past{
  background:#f3faf8;
  color:#5f9882;
  border-color:#d6ebe3;
}
.vaccine-tl-status.is-next{
  background:#eef8f6;
  color:var(--vax-accent-deep);
  border-color:#d0e7e1;
}

.vaccine-tl-list{
  display:grid;
  gap:8px;
  margin-top:10px;
  min-width:0;
}
.vaccine-tl-vaccine{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:12px;
  row-gap:4px;
  align-items:start;
}
.vaccine-tl-vaccine + .vaccine-tl-vaccine{
  padding-top:10px;
  border-top:1px dashed #e2eaed;
}
.vaccine-tl-name{
  min-width:0;
  color:#33414b;
  font-size:14px;
  font-weight:900;
  line-height:1.58;
  word-break:break-word;
}
.vaccine-tl-dose{
  align-self:start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  background:#f6f9fa;
  border:1px solid #e2eaed;
  color:#6f7f88;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.vaccine-tl-note{
  grid-column:1/-1;
  color:#8b9aa3;
  font-size:11.5px;
  font-weight:780;
  line-height:1.58;
}

.vaccine-mini-note{
  padding:14px 16px;
  background:#fff;
}
.vaccine-mini-note strong{
  display:block;
  color:var(--vax-ink);
  font-size:14px;
  font-weight:950;
  line-height:1.35;
}
.vaccine-mini-note p{
  margin:6px 0 0;
  color:#697983;
  font-size:12.5px;
  font-weight:770;
  line-height:1.7;
}
.vaccine-source-note{
  margin:0;
  padding:0 4px;
  color:#81919a;
  font-size:11.5px;
  line-height:1.75;
  font-weight:760;
}
.vaccine-source-note a{color:var(--vax-accent-deep);font-weight:900;}

@media (max-width:640px){
  .vaccine-page{gap:12px;}
  .vaccine-hero-card,
  .vaccine-timeline-panel,
  .vaccine-mini-note{border-radius:22px;}
  .vaccine-hero-card{padding:15px;}
  .vaccine-timeline-panel{padding:12px;}
  .vaccine-title{font-size:26px;}
  .vaccine-desc{font-size:13px;}
  .vaccine-panel-head{display:grid;gap:3px;align-items:start;}
  .vaccine-tl-item{grid-template-columns:22px minmax(0,1fr);column-gap:8px;}
  .vaccine-tl-item::before{left:10px;}
  .vaccine-tl-dot{left:3px;}
}

@media (max-width:520px){
  .vaccine-page{gap:10px;}
  .vaccine-controls{grid-template-columns:1fr;}
  .vaccine-clear-btn{width:100%;}
  .vaccine-tl-head{row-gap:6px;}
  .vaccine-tl-status{margin-left:0;}
  .vaccine-tl-vaccine{grid-template-columns:1fr;row-gap:6px;}
  .vaccine-tl-dose{width:fit-content;max-width:100%;}
  .vaccine-tl-name{font-size:13px;line-height:1.52;}
}


/* v62：增加色彩層級，保留國際極簡感 */
.vaccine-page{
  --vax-teal:#59b3a7;
  --vax-teal-deep:#367f76;
  --vax-blue:#6f8fd4;
  --vax-blue-deep:#4e6ea9;
  --vax-blue-soft:#f2f6fd;
  --vax-amber:#e3a454;
  --vax-amber-deep:#a96e26;
  --vax-amber-soft:#fff8eb;
  --vax-green:#78b994;
  --vax-green-deep:#4f8968;
  --vax-green-soft:#f2faf5;
}

.vaccine-hero-card{
  background:linear-gradient(135deg,#ffffff 0%,#fbfefd 56%,#f3f7fd 100%);
  border-color:#dfe8ee;
}
.vaccine-hero-card::after{
  background:radial-gradient(circle,rgba(111,143,212,.11),rgba(111,143,212,0));
}
.vaccine-kicker{
  background:var(--vax-blue-soft);
  border-color:#dce6f7;
  color:var(--vax-blue-deep);
}
.vaccine-title{color:#263540;}
.vaccine-date-input:focus{
  border-color:var(--vax-blue);
  box-shadow:0 0 0 4px rgba(111,143,212,.12);
}
.vaccine-clear-btn{
  background:var(--vax-teal);
  box-shadow:0 10px 20px rgba(89,179,167,.2);
}
.vaccine-clear-btn:hover{background:#4ca99d;}
.vaccine-clear-btn:active{background:#449b90;}

.vaccine-meta-pill:first-child{
  background:var(--vax-green-soft);
  border-color:#d8ebe0;
  color:var(--vax-green-deep);
}
.vaccine-meta-pill:nth-child(2){
  background:var(--vax-blue-soft);
  border-color:#dde6f5;
  color:#617696;
}

.vaccine-next-box{
  background:var(--vax-amber-soft);
  border-color:#f0dfbf;
  border-left-color:var(--vax-amber);
  box-shadow:0 8px 18px rgba(227,164,84,.08);
}
.vaccine-next-box span{color:var(--vax-amber-deep);}
.vaccine-next-box strong{color:#49371f;}
.vaccine-next-box p{color:#7c6648;}

.vaccine-panel-head::before{
  content:'';
  width:4px;
  height:22px;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--vax-teal);
}
.vaccine-panel-title{margin-right:auto;}
.vaccine-panel-sub{color:#75858f;}

.vaccine-tl-item::before{background:#dfe6ee;}
.vaccine-tl-dot{
  border-color:#b9c9df;
  background:#fff;
}
.vaccine-tl-card{
  border-left:4px solid #d8e2f4;
  background:#fff;
}
.vaccine-tl-age{
  background:var(--vax-blue-soft);
  border-color:#dce5f5;
  color:var(--vax-blue-deep);
}
.vaccine-tl-date{color:#72828c;}
.vaccine-tl-status{
  background:#f5f7fa;
  color:#6f7d86;
  border-color:#e2e8ec;
}

.vaccine-tl-item.is-past .vaccine-tl-dot{
  border-color:var(--vax-green);
  background:var(--vax-green);
}
.vaccine-tl-item.is-past::before{background:#d7eadf;}
.vaccine-tl-item.is-past .vaccine-tl-card{
  background:var(--vax-green-soft);
  border-color:#d9e9df;
  border-left-color:var(--vax-green);
  box-shadow:none;
}
.vaccine-tl-item.is-past .vaccine-tl-age{
  background:#eaf6ee;
  border-color:#d2e8da;
  color:var(--vax-green-deep);
}
.vaccine-tl-status.is-past{
  background:#e8f5ed;
  color:var(--vax-green-deep);
  border-color:#d1e8da;
}

.vaccine-tl-item.is-next .vaccine-tl-dot{
  border-color:var(--vax-amber);
  background:var(--vax-amber);
  box-shadow:0 0 0 5px rgba(227,164,84,.15);
}
.vaccine-tl-item.is-next .vaccine-tl-card{
  background:var(--vax-amber-soft);
  border-color:#eddcb9;
  border-left-color:var(--vax-amber);
  box-shadow:0 10px 22px rgba(227,164,84,.11);
}
.vaccine-tl-item.is-next .vaccine-tl-age{
  background:#fff1d6;
  border-color:#edd7a9;
  color:var(--vax-amber-deep);
}
.vaccine-tl-status.is-next{
  background:#ffefd0;
  color:var(--vax-amber-deep);
  border-color:#ead2a3;
}

.vaccine-tl-name{color:#2f3e48;}
.vaccine-tl-dose{
  background:#eef3fb;
  border-color:#dce5f3;
  color:#58719f;
}
.vaccine-tl-note{
  color:#997849;
  background:#fffaf1;
  border-left:3px solid #e7bd7d;
  border-radius:8px;
  padding:6px 8px;
}
.vaccine-tl-vaccine + .vaccine-tl-vaccine{border-top-color:#e1e8ed;}

.vaccine-mini-note{
  background:linear-gradient(135deg,#ffffff 0%,#f6fbfa 100%);
  border-color:#dfe9e7;
  border-left:4px solid var(--vax-teal);
}
.vaccine-mini-note strong{color:var(--vax-teal-deep);}
.vaccine-source-note a{color:var(--vax-blue-deep);}

@media (max-width:640px){
  .vaccine-panel-head{
    grid-template-columns:4px minmax(0,1fr);
    align-items:start;
  }
  .vaccine-panel-head::before{grid-row:1 / span 2;}
  .vaccine-panel-sub{grid-column:2;}
}