:root{
  --bg:#fff7fb;
  --card:#fff;
  --ink:#302631;
  --muted:#766a78;
  --line:#f0dce8;
  --pink:#f26fab;
  --purple:#8b6fff;
  --green:#17a36e;
  --yellow:#d98a16;
  --red:#d94a64;
  --shadow:0 16px 36px rgba(125,55,96,.12);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#fff1f8 0%,#fffafd 48%,#f7f3ff 100%);
}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background:rgba(255,247,251,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.eyebrow,.mini{font-size:12px;color:var(--muted);margin:0 0 4px;font-weight:800}
.eyebrow{color:var(--pink)}
h1{font-size:22px;margin:0 0 4px}
.mainTitle{
  display:inline-block;
  margin:0 0 6px;
  line-height:1.08;
  letter-spacing:.02em;
  font-size:clamp(24px, 3.1vw, 34px);
  font-weight:1000;
  color:#7f1f67;
  text-shadow:0 1px 0 rgba(255,255,255,.85),0 3px 10px rgba(139,111,255,.18);
}
.mainTitle > span{
  display:inline-block;
  padding:.08em .22em .12em;
  border-radius:16px;
  background:linear-gradient(135deg,#fff7fc 0%,#fff 45%,#f7f1ff 100%);
  border:1px solid rgba(242,111,171,.22);
  box-shadow:0 8px 18px rgba(175,91,150,.10);
  background-clip:padding-box;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .mainTitle > span{
    background:linear-gradient(135deg,#ff6fa5 0%, #b75cff 55%, #7b64ff 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    border:none;
    box-shadow:none;
    text-shadow:0 2px 10px rgba(170,96,220,.16);
  }
}
.lead{margin:0;color:var(--muted);font-size:13px}
.app{max-width:1080px;margin:0 auto;padding:14px 12px 44px}
.card{
  background:rgba(255,255,255,.97);
  border:1px solid var(--line);
  border-radius:24px;
  padding:16px;
  margin:14px 0;
  box-shadow:var(--shadow);
}
.inputCard{box-shadow:none}
.sectionTitle{font-weight:900;font-size:19px;margin-bottom:10px}
.sectionHead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.desc{color:var(--muted);font-size:13px;margin:0 0 12px;line-height:1.65}
.inputGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.inputGrid.four{grid-template-columns:repeat(4,1fr)}
label span{display:block;color:var(--muted);font-size:12px;font-weight:800;margin-bottom:6px}
input,select,textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:15px;
  padding:12px;
  font-size:16px;
  background:#fff;
  color:var(--ink);
}
textarea{resize:vertical;line-height:1.7}
button{
  border:0;
  border-radius:999px;
  padding:11px 15px;
  font-weight:900;
  cursor:pointer;
  font-size:14px;
  white-space:nowrap;
}
.primaryBtn{background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff}
.secondaryBtn{background:#fff0f7;color:#b23d79;border:1px solid #f2bdd8}
.ghostBtn{background:#fff;color:var(--muted);border:1px solid var(--line)}
.headerActions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.topLink{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);font-weight:800;text-decoration:none;box-shadow:0 8px 20px rgba(60,40,80,.06)}
.topLink:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(60,40,80,.10)}
.headerActions .ghostBtn{min-height:36px;padding:8px 13px;opacity:.86}
.recommendActions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.recommendItem .recommendActions a.recommendAction{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:999px;padding:7px 10px;background:#fff;color:#6b4efb;border:1px solid rgba(107,78,251,.22);font-weight:800;text-decoration:none;font-size:12px}
.recommendItem .recommendActions a.recommendThumbAction{color:#d94a64;border-color:rgba(217,74,100,.24);background:#fff8fb}

.hero{background:linear-gradient(135deg,#fff,#fff4fa 50%,#f5f0ff)}
.statusRow{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.safety{
  display:inline-flex;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  font-size:16px;
}
.safety.good{background:#e8fbf2;color:var(--green)}
.safety.warn{background:#fff4df;color:var(--yellow)}
.safety.bad{background:#ffe8ee;color:var(--red)}
.needBox{
  min-width:190px;
  padding:12px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line);
}
.needBox strong{font-size:20px}
.mainAnswer{
  margin-top:14px;
  padding:18px;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--line);
}
.mainAnswer h2{font-size:28px;line-height:1.35;margin:0 0 8px}
.mainAnswer p:last-child{color:var(--muted);margin:0;line-height:1.7}
.todayDecision{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:16px;
  border-radius:22px;
  background:#2f2430;
  color:#fff;
}
.todayDecision .mini{color:#f5d7e6}
.todayDecision strong{font-size:22px}
.strategyList{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.strategy{
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.strategy.recommended{
  outline:3px solid rgba(242,111,171,.25);
  background:linear-gradient(180deg,#fff,#fff7fb);
}
.strategyHeader{display:flex;justify-content:space-between;gap:8px;align-items:center}
.strategyTitle{font-size:20px;font-weight:900}
.badge{
  padding:6px 9px;
  border-radius:999px;
  background:#f8ecff;
  color:#7849bd;
  font-size:12px;
  font-weight:900;
}
.planRows{display:grid;gap:8px}
.planRow{
  display:grid;
  grid-template-columns:62px 54px 1fr;
  gap:8px;
  align-items:center;
  padding:10px;
  border-radius:16px;
  background:#fff8fc;
}
.dayName{font-weight:900}
.target{font-weight:900;color:#b73578}
.pt{font-size:13px;color:var(--muted)}
.projectNote{
  padding:10px;
  border-radius:16px;
  background:#f5f1ff;
  color:#59427f;
  font-size:13px;
  line-height:1.6;
}
.selectStrategy{
  width:100%;
  background:#302631;
  color:#fff;
}
.weekGrid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:10px;
}
.weekDay{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  padding:10px;
  min-height:150px;
}
.weekDayName{font-weight:900;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  padding:7px 9px;
  border-radius:999px;
  border:1px solid #ead4e2;
  background:#fff;
  color:#60465a;
  font-size:12px;
}
.chip.active{background:#ffe3f0;color:#b73578;border-color:#f2a9cc}
.weekDay input{
  margin-top:8px;
  font-size:13px;
  padding:9px;
}
.note{
  margin-top:12px;
  padding:12px;
  border-radius:18px;
  background:#f8f3ff;
  color:#5a437f;
  font-size:14px;
}
.accordion{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:18px;
}
.panel{display:none;margin-top:12px}
.panel.open{display:block}
.borderSummary{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.borderItem{
  padding:12px;
  border-radius:16px;
  background:#fff8fc;
  border:1px solid var(--line);
}
.borderItem strong{display:block;margin-bottom:4px}
.chartBox{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  padding:8px;
  overflow:hidden;
}
canvas{display:block;width:100%;height:auto}
.caption{color:var(--muted);font-size:13px;line-height:1.6}
.muted{box-shadow:none;background:rgba(255,255,255,.72)}
.muted p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
@media(max-width:900px){
  .inputGrid,.inputGrid.four{grid-template-columns:repeat(2,1fr)}
  .strategyList{grid-template-columns:1fr}
  .weekGrid{grid-template-columns:1fr}
  .mainAnswer h2{font-size:24px}
  .todayDecision{align-items:flex-start;flex-direction:column}
}
@media(max-width:520px){
  .topbar{align-items:flex-start}
  .inputGrid,.inputGrid.four{grid-template-columns:1fr}
  .statusRow{flex-direction:column}
  .needBox{width:100%}
}


.wideField{
  grid-column: span 2;
  border:1px solid var(--line);
  border-radius:15px;
  padding:10px;
  background:#fff;
}
.fieldLabel{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  margin-bottom:8px;
}
.fieldHint{
  margin:8px 2px 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.dayChecks{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.dayCheck{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #ead4e2;
  background:#fff8fc;
  font-size:13px;
  font-weight:800;
}
.dayCheck input{
  width:auto;
  margin:0;
}
@media(max-width:900px){
  .wideField{grid-column: span 2;}
}
@media(max-width:520px){
  .wideField{grid-column: span 1;}
}


.assistBox{
  margin-top:14px;
  padding:14px;
  border-radius:20px;
  background:#fff8fc;
  border:1px solid var(--line);
}
.assistTitle{
  font-weight:900;
  font-size:16px;
  margin-bottom:4px;
}
.assistHint{
  margin:0 0 10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}
.assistGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.multiplierHint{
  margin-top:10px;
  padding:10px 12px;
  border-radius:16px;
  background:#f7f1ff;
  color:#5b427f;
  font-size:13px;
  line-height:1.6;
}
.giftLine{
  margin-top:4px;
  font-size:12px;
  color:#756977;
}
.giftLine b{
  color:#302631;
}
@media(max-width:900px){
  .assistGrid{grid-template-columns:1fr;}
}


/* stage5: 上部おすすめ文フォント調整 */
.mainAnswer h2,
#mainAnswer{
  font-size:22px;
  line-height:1.45;
  word-break:break-word;
}

@media (max-width: 900px){
  .mainAnswer h2,
  #mainAnswer{
    font-size:19px;
    line-height:1.5;
  }
}


/* stage6: 企画候補UI */
.ideaToggle{
  margin-top:10px;
  width:100%;
  border:1px solid #f2bdd8;
  background:#fff0f7;
  color:#b23d79;
  border-radius:999px;
  padding:9px 12px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}
.ideaPanel{
  display:none;
  margin-top:10px;
  padding:12px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
}
.ideaPanel.open{
  display:block;
}
.ideaGroups{
  display:grid;
  gap:10px;
}
.ideaGroupTitle{
  font-weight:900;
  font-size:13px;
  color:#5e4b5d;
  margin-bottom:6px;
}
.ideaList{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.ideaItem{
  padding:9px 10px;
  border-radius:14px;
  background:#fff8fc;
  border:1px solid #f0dce8;
  font-size:12px;
  line-height:1.45;
}
.ideaName{
  font-weight:900;
  color:#302631;
}
.ideaMeta{
  color:#756977;
  margin-top:3px;
}
.ideaLink{
  display:inline-block;
  margin-top:6px;
  padding:5px 8px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--pink),var(--purple));
  color:#fff;
  text-decoration:none;
  font-size:11px;
  font-weight:900;
}
@media(max-width:700px){
  .ideaList{
    grid-template-columns:1fr;
  }
}


/* stage7: おすすめ企画セクション */
.ideaJump{
  display:inline-block;
  margin-top:8px;
  font-size:12px;
  color:#b84c85;
  text-decoration:none;
  font-weight:800;
}

.recommendGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.recommendGroup{
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  background:#fffafb;
}

.recommendTitle{
  font-size:16px;
  font-weight:900;
  margin-bottom:10px;
  color:#473447;
}

.recommendSub{
  font-size:12px;
  font-weight:900;
  color:#c0568f;
  margin:12px 0 6px;
}

.recommendItem{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px;
  border-radius:12px;
  background:#fff;
  border:1px solid #f1dfea;
  margin-bottom:8px;
}

.recommendItem b{
  font-size:13px;
}

.recommendItem span{
  font-size:12px;
  color:#726675;
  line-height:1.45;
}

.recommendItem a{
  align-self:flex-start;
  margin-top:4px;
  padding:5px 9px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--pink),var(--purple));
  color:#fff;
  text-decoration:none;
  font-size:11px;
  font-weight:900;
}

@media(max-width:800px){
  .recommendGrid{
    grid-template-columns:1fr;
  }
}


/* stage8: おすすめ企画を4列で見やすく */
.recommendGrid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
  align-items:start;
}

.recommendGroup{
  padding:12px !important;
  border-radius:18px !important;
  min-width:0;
}

.recommendTitle{
  font-size:16px !important;
  margin-bottom:8px !important;
  padding-bottom:6px;
  border-bottom:1px solid #f0dce8;
}

.recommendSub{
  font-size:11px !important;
  margin:10px 0 6px !important;
  color:#c0568f;
}

.recommendItem{
  gap:3px !important;
  padding:8px !important;
  margin-bottom:7px !important;
}

.recommendItem b{
  font-size:12px !important;
  line-height:1.35;
}

.recommendItem span{
  font-size:11px !important;
  line-height:1.35;
}

.gift{
  display:inline-block;
  align-self:flex-start;
  padding:3px 7px;
  border-radius:999px;
  font-weight:900;
}

.gift-small{
  background:#f3f3f3;
  color:#6d6670 !important;
}

.gift-mid{
  background:#fff1d8;
  color:#b66a00 !important;
}

.gift-high{
  background:#ffe6f1;
  color:#c33f7e !important;
}

.recognition{
  display:inline-block;
  align-self:flex-start;
  padding:3px 7px;
  border-radius:999px;
  background:#eef7ff;
  color:#306fa8 !important;
  font-weight:900;
}

.recommendItem a{
  margin-top:4px !important;
  padding:5px 8px !important;
  font-size:11px !important;
}

@media(max-width:1050px){
  .recommendGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:640px){
  .recommendGrid{
    grid-template-columns:1fr !important;
  }
}


/* stage9: 作戦カード内のおすすめ企画導線を1つに集約 */
.strategyIdeaJump{
  display:block;
  text-align:center;
  margin-top:8px;
  padding:8px 10px;
  border-radius:999px;
  background:#fff8fc;
  border:1px solid #f2bdd8;
}


/* stage10 design refresh */
:root{
  --bg2:#fff8fc;
  --cardShadow:0 10px 30px rgba(195,90,145,.08);
}

body{
  background:
    radial-gradient(circle at top right,#ffe7f2 0%,transparent 30%),
    linear-gradient(180deg,#fffafd 0%,#fff 100%);
}

.app{
  max-width:1240px;
}

.card{
  border-radius:24px !important;
  border:1px solid #f2e4ec !important;
  box-shadow:var(--cardShadow);
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(8px);
}

.hero{
  position:relative;
  overflow:hidden;
}

.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,192,223,.18),rgba(187,153,255,.10));
  pointer-events:none;
}

.sectionTitle{
  font-size:22px !important;
  letter-spacing:.02em;
}

.sectionDesc{
  line-height:1.6;
  color:#6d6470 !important;
}

input,select,button{
  transition:.18s ease;
}

input:focus,select:focus{
  transform:translateY(-1px);
  box-shadow:0 0 0 4px rgba(227,114,170,.12);
}

.primaryBtn,
.selectStrategy{
  min-height:46px;
  border-radius:999px !important;
  font-weight:900 !important;
  letter-spacing:.02em;
  box-shadow:0 8px 20px rgba(201,83,141,.18);
}

.selectStrategy:hover,
.primaryBtn:hover{
  transform:translateY(-1px);
}

.strategyCard{
  border-radius:22px !important;
  border:1px solid #f1dce7 !important;
  overflow:hidden;
}

.strategyHead{
  background:linear-gradient(135deg,#fff6fa,#fff);
}

.strategyRows{
  gap:10px !important;
}

.strategyRow{
  border-radius:16px !important;
  border:1px solid #f3e4ec !important;
  background:#fffdfd !important;
}

.pt,
.giftLine{
  line-height:1.55 !important;
}

.ideaJump{
  background:#fff5fa !important;
  border:1px solid #f3d8e7 !important;
}

.recommendGroup{
  background:linear-gradient(180deg,#fff,#fffafd) !important;
}

.recommendItem{
  transition:.16s ease;
}

.recommendItem:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(203,104,155,.10);
}

.gift{
  font-size:11px !important;
  letter-spacing:.02em;
}

@media(max-width:900px){

  body{
    background:#fffafd;
  }

  .app{
    padding:12px !important;
  }

  .card{
    border-radius:20px !important;
  }

  .sectionTitle{
    font-size:19px !important;
  }

  .sectionDesc{
    font-size:13px !important;
  }

  .recommendGrid{
    gap:10px !important;
  }

  .recommendGroup{
    padding:11px !important;
  }

  .strategyCard{
    border-radius:18px !important;
  }

  .strategyRow{
    padding:10px !important;
  }

  .selectStrategy,
  .primaryBtn{
    width:100%;
  }
}


/* stage11: 必要スコアを作戦候補右上へ */
.needMiniBox{
  min-width:180px;
  padding:10px 12px;
  border-radius:16px;
  background:#fff8fc;
  border:1px solid #f0dce8;
  text-align:left;
}
.needMiniBox .mini{
  margin:0 0 4px;
}
.needMiniBox strong{
  font-size:16px;
  line-height:1.35;
}

@media(max-width:700px){
  .needMiniBox{
    width:100%;
    min-width:0;
  }
}


/* stage12: 基本情報入力の横幅・曜日チップ調整 */
.inputCard .sectionTitle{
  margin-bottom:14px;
}

.inputCard .inputGrid{
  display:grid !important;
  grid-template-columns:180px 190px 190px minmax(300px, 390px) minmax(300px, 390px) !important;
  gap:12px !important;
  align-items:start;
}

.inputCard .wideField{
  grid-column:auto !important;
  min-height:122px;
}

.inputCard .dayChecks{
  display:grid !important;
  grid-template-columns:repeat(4, max-content);
  gap:8px !important;
  align-items:center;
}

.inputCard .dayCheck{
  min-width:58px;
  justify-content:center;
  padding:8px 10px !important;
}

.inputCard input[type="date"],
.inputCard select{
  min-height:46px;
}

@media(max-width:1180px){
  .inputCard .inputGrid{
    grid-template-columns:repeat(3,minmax(160px,1fr)) !important;
  }
  .inputCard .wideField{
    grid-column:span 3 !important;
  }
  .inputCard .dayChecks{
    grid-template-columns:repeat(7, max-content);
  }
}

@media(max-width:760px){
  .inputCard .inputGrid{
    grid-template-columns:1fr !important;
  }
  .inputCard .wideField{
    grid-column:auto !important;
  }
  .inputCard .dayChecks{
    grid-template-columns:repeat(4, max-content);
  }
}

@media(max-width:420px){
  .inputCard .dayChecks{
    grid-template-columns:repeat(3, max-content);
  }
}


/* stage13: 確認日ヘルプ */
.inputHelp{
  display:block;
  margin-top:6px;
  color:#8a7d89;
  font-size:11px;
  line-height:1.35;
}


/* stage13b: 確認日のはみ出し対策 CSS-only */
.inputCard,
.inputCard *{
  box-sizing:border-box;
}

.inputCard .inputGrid,
.inputCard .inputGrid > label{
  min-width:0 !important;
  max-width:100% !important;
}

.inputCard .inputGrid > label{
  overflow:hidden;
}

.inputCard input,
.inputCard select{
  min-width:0 !important;
  max-width:100% !important;
}

.inputCard input[type="date"]{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  font-size:14px !important;
  line-height:1.2 !important;
  padding:10px 6px !important;
  letter-spacing:-0.03em;
}

/* Chromium系の日付表示領域が中で広がる対策 */
.inputCard input[type="date"]::-webkit-date-and-time-value{
  min-width:0 !important;
  max-width:100% !important;
  text-align:left;
}

.inputCard input[type="date"]::-webkit-calendar-picker-indicator{
  margin-left:0 !important;
  padding:0 !important;
}

/* スマホ時は確認日・ランク・目標を完全1列化して横はみ出しを抑える */
@media(max-width:760px){
  .inputCard .inputGrid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px !important;
  }

  .inputCard .wideField{
    grid-column:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  .inputCard .dayChecks{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    width:100% !important;
  }

  .inputCard .dayCheck{
    min-width:0 !important;
    width:100% !important;
    justify-content:center;
    padding-left:4px !important;
    padding-right:4px !important;
  }
}

@media(max-width:420px){
  .inputCard input[type="date"]{
    font-size:13px !important;
    padding-left:5px !important;
    padding-right:4px !important;
  }
}


/* stage14: 確認日スマホはみ出し根本対策
   type=date のブラウザ内部UIが最小幅を持つため、確認日は text 入力化。
   これにより iPhone/Android の狭幅でも親幅を押し広げない。 */
.inputCard .dateTextInput{
  -webkit-appearance:none !important;
  appearance:none !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;
}

@media(max-width:760px){
  .inputCard .inputGrid > label{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }
  .inputCard .dateTextInput{
    height:44px !important;
    font-size:16px !important; /* iOSの勝手なズームも抑える */
    padding:9px 10px !important;
  }
}

@media(max-width:360px){
  .inputCard .dateTextInput{
    font-size:15px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
}


/* stage15: スマホ確認日最終対策
   スマホ幅では .inputGrid の grid 計算そのものを停止し、
   基本情報を1列の通常ブロックに戻す。
   これにより、確認日 input が grid column の最小幅に引っ張られて
   カード外へ押し出される症状を根から止める。 */
@media (max-width: 900px){
  html,
  body{
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .app,
  .card,
  .inputCard{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  .inputCard{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .inputCard .inputGrid{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  .inputCard .inputGrid > label,
  .inputCard .wideField{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 0 12px 0 !important;
    overflow-x:hidden !important;
  }

  .inputCard .checkDateField{
    padding:10px !important;
    border:1px solid var(--line) !important;
    border-radius:18px !important;
    background:#fffafd !important;
  }

  .inputCard #checkDate,
  .inputCard .dateTextInput{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:42px !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:8px 10px !important;
    border-radius:13px !important;
    font-size:16px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }

  .inputCard select{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .inputCard .dayChecks{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    gap:8px !important;
  }
}

@media (max-width: 374px){
  .inputCard .dayChecks{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .inputCard{
    padding-left:10px !important;
    padding-right:10px !important;
  }
}


/* stage16: 便利さ復帰
   stage15で効いたスマホ1列ブロック化は維持したまま、
   確認日はネイティブ日付ピッカー(type=date)へ戻す。
   はみ出し対策は親レイアウト側で行う。 */
.inputCard .datePickerInput{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  font-variant-numeric:tabular-nums;
}

@media (max-width: 900px){
  .inputCard #checkDate.datePickerInput{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:44px !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:8px 10px !important;
    border-radius:13px !important;
    font-size:16px !important;
    line-height:1.2 !important;
    letter-spacing:-0.02em;
  }

  .inputCard #checkDate.datePickerInput::-webkit-date-and-time-value{
    min-width:0 !important;
    max-width:100% !important;
    text-align:left;
  }

  .inputCard #checkDate.datePickerInput::-webkit-calendar-picker-indicator{
    flex:0 0 auto;
    margin-left:2px !important;
    padding:0 !important;
  }
}


/* stage17: 見た目と機能の両立
   native date input は絶対配置の透明レイヤーにして、表示は軽いカスタムUIで行う。
   これにより日付ピッカーは使えるまま、iPhone Safari の date 内部UIによる横はみ出しと縦肥大化を回避する。 */
.inputCard .field > span{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  margin-bottom:6px;
}

.inputCard .dateCompactPicker{
  position:relative;
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:46px !important;
  box-sizing:border-box !important;
  border:1px solid var(--line);
  border-radius:15px;
  padding:0 12px;
  background:#fff;
  overflow:hidden;
}

.inputCard .dateCompactText{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--ink);
  font-size:16px;
  line-height:1;
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
}

.inputCard .dateCompactIcon{
  flex:0 0 auto;
  margin-left:8px;
  color:#8a7d89;
  font-size:11px;
  line-height:1;
}

.inputCard .nativeDateProxy{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:15px !important;
  opacity:0.001 !important;
  color:transparent !important;
  background:transparent !important;
  cursor:pointer;
  appearance:none !important;
  -webkit-appearance:none !important;
  z-index:2;
}

.inputCard .nativeDateProxy::-webkit-date-and-time-value,
.inputCard .nativeDateProxy::-webkit-calendar-picker-indicator{
  opacity:0 !important;
}

@media (max-width:900px){
  .inputCard .inputGrid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
  }

  .inputCard .inputGrid > label,
  .inputCard .inputGrid > .field,
  .inputCard .wideField{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    overflow:visible !important;
  }

  .inputCard .checkDateField,
  .inputCard .wideField{
    grid-column:1 / -1 !important;
  }

  .inputCard .checkDateField{
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
  }

  .inputCard .dateCompactPicker{
    height:44px !important;
    padding:0 12px !important;
    border-radius:14px !important;
  }

  .inputCard .dateCompactText{
    font-size:16px !important;
  }

  .inputCard select{
    min-width:0 !important;
    width:100% !important;
  }
}

@media (max-width:374px){
  .inputCard .inputGrid{
    grid-template-columns:1fr !important;
  }
  .inputCard .dayChecks{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* stage18: PC幅で「今週スキパを使う日」が右にはみ出す対策
   5列固定の最小幅がカード内幅を超えていたため、PC時だけ各列の最小幅を下げ、
   休み/スキパの曜日チップもコンテナ内で均等に収まるようにする。 */
@media (min-width:901px){
  .inputCard{
    overflow:hidden !important;
  }

  .inputCard .inputGrid{
    display:grid !important;
    grid-template-columns:
      minmax(150px, 180px)
      minmax(150px, 180px)
      minmax(160px, 190px)
      minmax(238px, 1fr)
      minmax(238px, 1fr) !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    align-items:start !important;
  }

  .inputCard .inputGrid > label,
  .inputCard .inputGrid > .field,
  .inputCard .wideField{
    min-width:0 !important;
    max-width:100% !important;
  }

  .inputCard .wideField{
    grid-column:auto !important;
    width:100% !important;
    min-height:112px !important;
    overflow:hidden !important;
    padding:10px !important;
  }

  .inputCard .dayChecks{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:8px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .inputCard .dayCheck{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    justify-content:center !important;
    gap:5px !important;
    padding:8px 6px !important;
    white-space:nowrap !important;
  }

  .inputCard .dayCheck input{
    flex:0 0 auto !important;
  }
}

@media (min-width:901px) and (max-width:1080px){
  .inputCard .inputGrid{
    grid-template-columns:
      minmax(140px, 165px)
      minmax(140px, 165px)
      minmax(150px, 175px)
      minmax(220px, 1fr)
      minmax(220px, 1fr) !important;
    gap:8px !important;
  }

  .inputCard .dayCheck{
    padding-left:4px !important;
    padding-right:4px !important;
    font-size:12px !important;
  }
}


/* stage20: スマホ限定アコーディオン
   PC表示は従来のまま。小さい画面だけ、各セクションと作戦候補内の3案を折りたたむ。 */
.mobileAccordionToggle,
.strategyMobileToggle{
  display:none;
}

.mobileAccordionBody,
.strategyInner{
  display:block;
}

@media (max-width:760px){
  .mobileAccordion{
    padding:0 !important;
    overflow:hidden !important;
  }

  .mobileAccordionToggle{
    display:flex !important;
    width:100%;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:15px 16px;
    border-radius:20px;
    background:rgba(255,255,255,.98);
    color:var(--ink);
    border:0;
    text-align:left;
    font-size:16px;
  }

  .mobileAccordionTitle{
    font-size:16px;
    font-weight:900;
    line-height:1.35;
  }

  .mobileAccordionIcon{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:999px;
    background:#fff0f7;
    color:#b23d79;
    border:1px solid #f2bdd8;
    font-size:16px;
    font-weight:900;
  }

  .mobileAccordionBody{
    display:none !important;
    padding:0 14px 14px;
  }

  .mobileAccordion.is-open > .mobileAccordionBody{
    display:block !important;
  }

  /* 開いた時に見出しが二重に見えないようにする */
  .mobileAccordionBody > .sectionTitle,
  .mobileAccordionBody > .sectionHead .sectionTitle{
    display:none !important;
  }

  .mobileAccordionBody > .sectionHead{
    margin-top:4px;
  }

  .mobileAccordionBody .desc,
  .mobileAccordionBody .sectionDesc{
    margin-top:2px;
  }

  /* アコーディオン内で既存カード余白が増えすぎないよう微調整 */
  .mobileAccordionBody .inputGrid{
    margin-top:2px;
  }

  .mobileAccordionBody .assistBox{
    margin-top:12px;
  }

  /* 作戦候補の中項目アコーディオン */
  .strategyList{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .strategy.mobileStrategyAccordion{
    padding:0 !important;
    gap:0 !important;
    border-radius:18px !important;
    overflow:hidden;
  }

  .strategyMobileToggle{
    display:flex !important;
    width:100%;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:13px 13px;
    border-radius:18px;
    background:#fff;
    color:var(--ink);
    border:0;
    text-align:left;
  }

  .strategyMobileTitle{
    flex:1 1 auto;
    min-width:0;
    font-size:15px;
    font-weight:900;
    line-height:1.35;
  }

  .strategyMobileBadge{
    flex:0 0 auto;
    padding:5px 8px;
    border-radius:999px;
    background:#f8ecff;
    color:#7849bd;
    font-size:11px;
    font-weight:900;
  }

  .strategyInner{
    display:none !important;
    padding:0 12px 12px;
  }

  .mobileStrategyAccordion.is-open > .strategyInner{
    display:block !important;
  }

  .strategyInner .strategyHeader{
    display:none !important;
  }

  .strategyInner .projectNote{
    margin-top:2px;
  }

  .strategyInner .selectStrategy{
    margin-top:8px;
  }
}

/* stage22: 今週カレンダーをPC基準に統一（企画メモ非表示・応援pt/ギフト目安表示） */
.weekDayEstimate{
  margin-top:10px;
  padding:10px;
  border-radius:14px;
  background:#fff8fc;
  border:1px solid #f4e3ec;
  font-size:12px;
  line-height:1.55;
}
.weekSupport{
  color:var(--muted);
  font-weight:800;
}
.weekGift{
  margin-top:4px;
  color:#8f3668;
}
.weekGift b{
  font-weight:900;
}
@media (max-width: 640px){
  .weekDayEstimate{
    margin-top:8px;
    padding:9px;
  }
}


/* stage24_api_stability_guard: API/ローカルfallback状態を小さく見える化 */
.apiStatusBadge{
  position:fixed;
  right:12px;
  bottom:12px;
  z-index:40;
  max-width:min(320px, calc(100vw - 24px));
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(199,176,191,.75);
  box-shadow:0 8px 22px rgba(111,74,95,.12);
  color:#6f4a5f;
  font-size:11px;
  font-weight:900;
  line-height:1.35;
  backdrop-filter:blur(8px);
  pointer-events:none;
}
.apiStatusBadge.apiStatus-api{
  color:#47674c;
  border-color:rgba(163,205,171,.9);
  background:rgba(247,255,248,.94);
}
.apiStatusBadge.apiStatus-local,
.apiStatusBadge.apiStatus-error{
  color:#8f5a2d;
  border-color:rgba(236,194,142,.9);
  background:rgba(255,250,241,.94);
}
.apiStatusBadge.apiStatus-checking{
  color:#5b5f8f;
  border-color:rgba(178,184,236,.9);
  background:rgba(248,249,255,.94);
}
@media (max-width: 640px){
  .apiStatusBadge{
    right:10px;
    bottom:10px;
    font-size:10px;
    padding:6px 9px;
    opacity:.92;
  }
}

/* stage26: API core lock notice */
.apiLockNotice{
  padding:14px 16px;
  border:1px dashed #e7bfd4;
  border-radius:16px;
  background:#fff8fb;
  color:#6d5164;
  font-weight:700;
  line-height:1.7;
}
.apiStatus-error{
  background:#fff2f2;
  border-color:#f0b8b8;
  color:#9a3030;
}

/* stage29 header/recommend action polish */

@media (max-width: 720px){
  .topbar{align-items:flex-start}
  .headerActions{width:100%;justify-content:flex-start;gap:8px}
  .topLink,.headerActions .ghostBtn{min-height:34px;padding:7px 11px;font-size:12px}
  .recommendActions{justify-content:flex-start;width:100%;margin-top:4px}
  .recommendItem .recommendActions a.recommendAction{font-size:12px;padding:7px 10px}
}


/* stage32 title emphasis + all recommendation thumb actions */
@media (max-width: 720px){
  .mainTitle{
    font-size:clamp(22px, 7vw, 28px);
    line-height:1.12;
    letter-spacing:.01em;
  }
  .mainTitle > span{
    padding:.04em .08em .08em;
  }
  .lead{font-size:12px;line-height:1.55;}
}
.recommendActions{align-items:center;row-gap:6px;}
.recommendItem .recommendActions a.recommendAction{min-height:30px;}


/* stage40: calendar image maker teaser / entry */
.calendarMakerTeaser{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:20px;
  border:1px solid rgba(242,111,171,.26);
  background:linear-gradient(135deg,#fff8fc 0%,#ffffff 48%,#f6f1ff 100%);
  box-shadow:0 10px 24px rgba(125,55,96,.08);
}
.calendarMakerTeaserText{min-width:0;}
.calendarMakerBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:6px;
  padding:4px 9px;
  border-radius:999px;
  background:#f8ecff;
  color:#7849bd;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
}
.calendarMakerTeaser strong{
  display:block;
  color:#6c2d79;
  font-size:16px;
  font-weight:1000;
  line-height:1.35;
}
.calendarMakerTeaser p{
  margin:4px 0 0;
  color:#766a78;
  font-size:13px;
  line-height:1.6;
}
.calendarMakerButton{
  flex:0 0 auto;
  background:linear-gradient(135deg,rgba(242,111,171,.48),rgba(139,111,255,.48));
  color:#fff;
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 8px 18px rgba(139,111,255,.10);
  cursor:not-allowed;
  opacity:.72;
}
.calendarMakerButton:hover{transform:translateY(-1px); box-shadow:0 12px 24px rgba(214,75,129,.22);}
.calendarMakerButton:active{transform:translateY(0);}
.calendarMakerButton:disabled{filter:saturate(.92);}
@media(max-width:720px){
  .calendarMakerTeaser{
    align-items:stretch;
    flex-direction:column;
    padding:13px;
  }
  .calendarMakerButton{
    width:100%;
    min-height:42px;
  }
  .calendarMakerTeaser strong{font-size:15px;}
  .calendarMakerTeaser p{font-size:12px;}
}

/* stage58: skip day max-2 UI */
.dayCheck.isDisabled{opacity:.48;cursor:not-allowed;}
.dayCheck.isDisabled input{cursor:not-allowed;}

/* stage59c: image maker button cursor hard fix */
#openCalendarMakerBtn,
.calendarMakerButton,
.calendarMakerTeaser--active,
.calendarMakerTeaser--active *{
  cursor:pointer !important;
}
.calendarMakerButton:disabled{
  cursor:not-allowed !important;
}

/* stage60: front payload source-of-truth + cursor hardening */
#openCalendarMakerBtn,
.calendarMakerButton,
.calendarMakerTeaser,
.calendarMakerTeaser *,
.calendarMakerTeaser--active,
.calendarMakerTeaser--active *{
  cursor:pointer !important;
}

/* stage60b: hard cursor and enabled state for image maker button */
#openCalendarMakerBtn,
.calendarMakerButton,
.calendarMakerTeaser,
.calendarMakerTeaser *,
.calendarMakerTeaser--active,
.calendarMakerTeaser--active *{
  cursor:pointer !important;
  pointer-events:auto !important;
}
#openCalendarMakerBtn[disabled],
.calendarMakerButton[disabled]{
  cursor:not-allowed !important;
}

/* stage61: front 8/9-day display support */
.planRow.isExtensionDay,
.weekDay:has(.weekDayName){
}
.planRow.isExtensionDay{
  border-style:dashed;
  background:rgba(255,245,250,.72);
}
.planRow.isExtensionDay .dayName,
.weekDayName{
  word-break:keep-all;
}
.weekDay .weekDayName{
  line-height:1.18;
}

/* stage62: skip calculation rethink */
.planRow.isExtensionDay .target::after,
.planRow.isExtensionDay{
  background:rgba(245,255,250,.86);
}

/* stage63: skip + rest overlap support */
.weekStatusBadges{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px;}
.weekStatusBadge{display:inline-flex;align-items:center;border:1px solid rgba(214,75,129,.20);border-radius:999px;padding:2px 7px;font-size:11px;background:#fff5f9;color:#9b315f;font-weight:800;}
.weekDay.isSkipRestDay{background:linear-gradient(180deg,rgba(255,247,251,.96),rgba(255,255,255,.96));border-color:rgba(214,75,129,.24);}
.weekDay.isSkipOnlyDay{background:linear-gradient(180deg,rgba(250,247,255,.96),rgba(255,255,255,.96));}
.weekDay.isRestOnlyDay{background:linear-gradient(180deg,rgba(247,247,250,.96),rgba(255,255,255,.96));}

/* stage64: live score panel next to recommend button */
.sectionHead{gap:12px;}
.weekScorePanel{
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:2px;
  min-width:172px;
  padding:9px 12px;
  border-radius:16px;
  background:linear-gradient(180deg,#fff7fb,#ffffff);
  border:1px solid rgba(214,75,129,.16);
  box-shadow:0 8px 18px rgba(120,75,110,.06);
}
.weekScoreMini{
  font-size:11px;
  font-weight:800;
  color:#9b6f84;
  letter-spacing:.02em;
}
#weekScoreMain{
  font-size:15px;
  line-height:1.15;
  color:#3d2c38;
  font-weight:900;
  white-space:nowrap;
}
#weekScoreMain.scoreShort{color:#b45309;}
#weekScoreMain.scoreJust{color:#15803d;}
#weekScoreMain.scoreOver{color:#7c3aed;}
#weekScoreSub{
  font-size:11px;
  line-height:1.15;
  color:#7b6b78;
  font-weight:700;
  white-space:nowrap;
}
@media (max-width: 720px){
  .sectionHead{align-items:stretch;}
  .weekScorePanel{
    order:2;
    margin-left:0;
    align-items:flex-start;
    min-width:0;
    width:100%;
  }
  #applyStableBtn{order:3;}
}


/* stage84: front corrected calendar required-score overflow fix */
.calendar-card,
.calendarCard,
.week-card,
.weekCard,
.day-card,
.dayCard,
.plan-card,
.planCard,
.strategy-card,
.strategyCard,
.recommend-card,
.recommendCard,
.corrected-calendar-card,
.correctedCalendarCard,
[class*="calendar"] [class*="card"],
[class*="Calendar"] [class*="Card"]{
  min-width:0;
  overflow-wrap:anywhere;
}

.required-score,
.requiredScore,
.need-score,
.needScore,
.score-needed,
.scoreNeeded,
.score-pill,
.scorePill,
.score-badge,
.scoreBadge,
[class*="required-score"],
[class*="requiredScore"],
[class*="need-score"],
[class*="needScore"],
[class*="必要スコア"]{
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  white-space:normal!important;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.25;
}

/* 修正カレンダー内の数値バッジをカード内に収める */
.revisedCalendar,
.correctedCalendar,
.modifiedCalendar,
.fixCalendar,
.calendarAdjust,
.calendarCorrection,
#revisedCalendar,
#correctedCalendar,
#modifiedCalendar,
#fixCalendar{
  min-width:0;
}

.revisedCalendar *,
.correctedCalendar *,
.modifiedCalendar *,
.fixCalendar *,
.calendarAdjust *,
.calendarCorrection *,
#revisedCalendar *,
#correctedCalendar *,
#modifiedCalendar *,
#fixCalendar *{
  max-width:100%;
  box-sizing:border-box;
}

/* スマホ・狭幅で必要スコアが横へ飛び出ないように少しだけ詰める */
@media (max-width: 640px){
  .required-score,
  .requiredScore,
  .need-score,
  .needScore,
  .score-needed,
  .scoreNeeded,
  .score-pill,
  .scorePill,
  .score-badge,
  .scoreBadge,
  [class*="required-score"],
  [class*="requiredScore"],
  [class*="need-score"],
  [class*="needScore"],
  [class*="必要スコア"]{
    font-size:clamp(10px, 2.8vw, 12px);
    padding-left:6px!important;
    padding-right:6px!important;
  }
}


/* stage85: 今週カレンダー「必要スコア」カードのスマホはみ出し修正 */
@media (max-width: 720px){
  section[data-mobile-accordion="section-3"] .mobileAccordionBody > .sectionHead{
    display:grid !important;
    grid-template-columns:1fr !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    gap:12px !important;
  }

  section[data-mobile-accordion="section-3"] .mobileAccordionBody > .sectionHead > div:first-child{
    min-width:0 !important;
    width:100% !important;
  }

  section[data-mobile-accordion="section-3"] .weekScorePanel{
    order:2 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    align-items:flex-start !important;
    padding:10px 12px !important;
    overflow:hidden !important;
  }

  section[data-mobile-accordion="section-3"] #weekScoreMain{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:keep-all;
    font-size:clamp(12px, 3.7vw, 14px) !important;
    line-height:1.35 !important;
  }

  section[data-mobile-accordion="section-3"] #weekScoreSub{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    line-height:1.35 !important;
  }

  section[data-mobile-accordion="section-3"] #applyStableBtn{
    order:3 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    justify-content:center !important;
  }
}

@media (max-width: 420px){
  section[data-mobile-accordion="section-3"] .weekScorePanel{
    padding:9px 10px !important;
  }

  section[data-mobile-accordion="section-3"] #weekScoreMain{
    font-size:12px !important;
  }
}