/* ============================================================
   kawaii.css — "โคตรคลีน · Soft Kawaii" skin
   Loaded LAST (after proto.css). Re-tints the whole design-token
   layer to a soft pastel-pink palette and adds rounded, cuddly
   component polish + cut-out mascot/icon sprites — matching the
   Forecast & Stock Planner reference art. Because every screen is
   built on var(--primary)/--bg/--surface/etc., flipping the tokens
   here re-skins ALL pages at once.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Baloo+Thai+2:wght@500;600;700;800&family=Mali:wght@500;600;700&display=swap");

/* ---- 1) TOKEN RE-TINT (cascade everywhere) ---- */
:root,
.skin-holding,
.brand-kaprao,
.brand-holding {
  /* bright multicolor-pastel surfaces (cooler, less pink wash) */
  --bg:            #FBFAFE;
  --bg-deep:       #F1ECF7;
  --surface:       #FFFFFF;
  --surface-soft:  #F6F2FB;
  --surface-tint:  #FCFAFE;
  --cream:         #FFF4E9;

  /* warm plum ink (kawaii — never pure black) */
  --text:          #4E3A45;
  --text-2:        #735A66;
  --muted:         #A28D98;
  --faint:         #C5B1BB;

  /* soft rose primary — gentler & less red than the old candy pink */
  --primary:       #F58AB7;
  --primary-dark:  #ED73A6;
  --primary-deep:  #CF5C92;
  --primary-soft:  #FCE4F0;
  --primary-ink:   #A8497B;
  --primary-tint:  #FFF4FA;

  /* holding aliases → soft rose so legacy .skin-holding rules follow */
  --hold-primary:  #F58AB7; --hold-deep: #CF5C92; --hold-bright: #FFA8CA;
  --hold-soft:     #FCE4F0; --hold-ink:  #A8497B; --hold-accent: #F4B43C;
  --b-primary:     #F58AB7; --b-primary-dk: #CF5C92; --b-bright: #FFBBD4;
  --b-soft:        #FCE4F0; --b-accent: #F4B43C; --b-ink: #5A3F4A;

  --border:        #EEE3F1;
  --border-soft:   #F3ECF7;

  /* pastel status — danger softened toward warm coral (less pure red) */
  --warning: #F4A64C;  --warning-soft: #FFF0D9;  --warning-ink: #A96A12;
  --danger:  #F0708F;  --danger-soft:  #FDE6EC;  --danger-ink:  #BE5478;
  --info:    #72A8E8;  --info-soft:    #E5F0FD;  --info-ink:    #3E72B4;
  /* green + pink ink (ใช้ในหน้าเตรียมของ/สูตร — ก่อนหน้านี้ไม่ได้นิยาม) */
  --green:   #46B47A;  --green-soft:   #E8F8EF;  --green-ink:   #2E8C5A;
  --pink-ink: #B22B62;
  --review:  #E2A93E;
  --dup:     #AB90E2;

  --tint-green:  #EAF8F0;
  --tint-amber:  #FFF6E6;
  --tint-blue:   #EBF3FE;
  --tint-rose:   #FFF0F6;
  --tint-violet: #F5EFFE;

  /* rounder, softer */
  --r-sm: 14px; --r-md: 18px; --r-lg: 22px; --r-xl: 26px; --r-2xl: 30px;
  --shadow-xs: 0 1px 2px rgba(214,120,160,.10);
  --shadow-sm: 0 2px 6px rgba(214,120,160,.12);
  --shadow-md: 0 8px 20px rgba(214,120,160,.14), 0 2px 5px rgba(214,120,160,.08);
  --shadow-lg: 0 20px 44px rgba(190,90,135,.20), 0 5px 14px rgba(190,90,135,.10);
  --shadow-nav: 0 -6px 26px rgba(214,120,160,.14), 0 2px 6px rgba(214,120,160,.06);
  --shadow-brand: 0 8px 20px rgba(247,108,160,.34);

  --font-display: "Baloo Thai 2", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-script:  "Mali", "IBM Plex Sans Thai", cursive;
}

body, body.kk-base { background: var(--bg); color: var(--text); }

/* bright multicolor-pastel dotted backdrop behind the whole app */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 10% 6%,  rgba(255,205,230,.40) 0, transparent 24%),
    radial-gradient(circle at 90% 5%,  rgba(206,226,255,.42) 0, transparent 24%),
    radial-gradient(circle at 84% 58%, rgba(224,210,250,.34) 0, transparent 26%),
    radial-gradient(circle at 76% 96%, rgba(208,244,224,.42) 0, transparent 26%),
    radial-gradient(circle at 6% 92%,  rgba(255,238,200,.40) 0, transparent 24%);
}

/* ---- 2) HEADERS — rounded display font, pink accent ---- */
.hdr-title, .kk-base h1, .kk-base h2, h1, h2 { font-family: var(--font-display); letter-spacing: -.01em; }
.hdr-title { color: var(--text); }
.hdr-sub  { color: var(--muted); }
.overline { color: var(--primary-ink); opacity: .9; }

/* ---- 3) CARDS — cuddly radius + soft pink hairline ---- */
.card { border-radius: var(--r-lg); border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); }
.acc-card, .soft-card { border-radius: var(--r-lg); }
.soft-card.soft-green  { background: var(--tint-green);  border-color: #CFEEDC; }
.soft-card.soft-rose   { background: var(--tint-rose);   border-color: #FAD6E4; }
.soft-card.soft-amber  { background: var(--tint-amber);  border-color: #FBE6BE; }
.soft-card.soft-blue   { background: var(--tint-blue);   border-color: #D5E6FB; }
.soft-card.soft-violet { background: var(--tint-violet); border-color: #E6DBF9; }

/* ---- 4) BOTTOM NAV — floating candy bar ---- */
.nav {
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
  border-top: 0; border-radius: 26px 26px 0 0;
  box-shadow: var(--shadow-nav); border: 1.5px solid var(--border-soft); border-bottom: 0;
}
.navtab { color: var(--faint); }
.navtab .lbl { font-weight: 700; }
/* แท็บ active + ปุ่มกลาง (FAB) — เปลี่ยนจากชมพู → ฟ้าพาสเทลไล่เฉด */
.navtab.active { color: #3D7AC0; background: rgba(98,168,236,.14); }
.navtab.active svg { color: #62A8EC; }
.nav-fab {
  background: linear-gradient(150deg, #8FCDF5 0%, #5697E2 100%) !important;
  box-shadow: 0 8px 20px rgba(86,151,226,.42), inset 0 1px 0 rgba(255,255,255,.35);
}

/* ---- 5) CHIPS / TABS / BADGES ---- */
.chip { border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); }
.chip.active { background: linear-gradient(160deg, var(--primary), var(--primary-dark)); border-color: transparent; color: #fff; box-shadow: var(--shadow-brand); }
.sec-chip.active { background: linear-gradient(160deg, var(--primary), var(--primary-deep)); }
.badge { border-radius: 999px; font-weight: 800; }
.badge-green  { background: #E5F7EC; color: #2E8C5A; border: 1px solid #C9ECD7; }
.badge-yellow { background: #FFF3DC; color: #B5781A; border: 1px solid #FBE4B6; }
.badge-red    { background: #FFE4EC; color: #C8396A; border: 1px solid #FAC9D9; }
.badge-violet { background: #F1EAFD; color: #7E59C9; border: 1px solid #E2D5F7; }
.badge-blue   { background: #E6F1FE; color: #3F73B8; border: 1px solid #CFE2FB; }
.badge-fifo   { background: var(--cream); color: #9A7B57; border: 1px solid #F0E2CC; }

/* ---- 6) BUTTONS / INPUTS ---- */
.btn { border-radius: 999px; }
.btn-primary { background: linear-gradient(160deg, var(--primary), var(--primary-dark)); border-color: transparent; box-shadow: var(--shadow-brand); }
.mini-btn { border-radius: 999px; }
.input { border-radius: 14px; border: 1.6px solid var(--border); background: var(--surface); }
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: none; }
.hdr-icon { border-radius: 14px; }

/* ---- 7) CATEGORY ICON CHIPS — soft pastel fills ---- */
.catic { border-radius: 14px; }
.catic.green  { background: #E3F6EC; color: #2E8C5A; }
.catic.rose   { background: #FFE3EE; color: #D23C79; }
.catic.amber  { background: #FFF1D6; color: #B5781A; }
.catic.blue   { background: #E5F0FD; color: #3F73B8; }
.catic.violet { background: #F1E9FD; color: #7E59C9; }
.catic.fill   { background: linear-gradient(180deg, var(--primary), var(--primary-dark)); box-shadow: 0 3px 9px rgba(247,108,160,.34); }

/* ---- 8) NOTE / EMPTY ---- */
.note { border-radius: 16px; background: var(--primary-tint); border: 1.5px solid var(--primary-soft); color: var(--text-2); }
.note svg { color: var(--primary); }
.note.amber { background: var(--warning-soft); border-color: #FBE6BE; }
.note.amber svg { color: var(--warning); }

/* ---- 9) HOME HERO — bright multicolor pastel sky ---- */
.hero2, .home-hero {
  border-radius: 26px;
  background:
    radial-gradient(70% 110% at 90% 12%, rgba(255,206,228,.80) 0, transparent 58%),
    radial-gradient(65% 100% at 14% 16%, rgba(206,228,255,.72) 0, transparent 58%),
    radial-gradient(80% 120% at 50% 112%, rgba(214,244,226,.64) 0, transparent 60%),
    linear-gradient(118deg, #FFE9F3 0%, #F3ECFF 38%, #E8F3FF 68%, #FDF3E6 100%) !important;
  border: 1.5px solid #F0DDF0 !important;
}
/* softer multicolor severity chips on the low-stock grid (less harsh red/orange) */
.low-stat.s-vlo { background: #F0708F !important; }
.low-stat.s-lo  { background: #F79C6B !important; }
.low-stat.s-mid { background: #FBCB5A !important; }

.hero2 .greet, .home-hero-greet { color: var(--primary-deep) !important; }
.hero2 .greet svg { color: var(--primary) !important; }
.hero2 .bigdate, .home-hero-date { color: var(--primary-deep) !important; }
.hero2 .bigdate b { color: var(--primary) !important; }
.hero2 .meta .ic-cal { color: var(--primary) !important; }

/* ---- 10) MASCOT / ICON SPRITES ---- */
.kk-mascot { display: block; flex: none; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(190,90,135,.18)); }
.kk-cic { display: inline-block; flex: none; object-fit: contain; vertical-align: middle; }
/* soft cute float for hero mascots */
@media (prefers-reduced-motion: no-preference) {
  .kk-mascot.kk-float { animation: kkfloat 4.5s ease-in-out infinite; }
}
@keyframes kkfloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }

/* sparkle pseudo-deco helper */
.kk-spark { position: relative; }

/* ============================================================
   PREP PAGE — date hero · horizon seg/formula · compact table · rice
   ============================================================ */
.fc-empty-hero { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 24px;
  background: linear-gradient(120deg, #FFF0D9 0%, #FFF6EC 60%, #FFE9F1 100%); border: 1.5px solid #FBE6C2; }

.prep-hero { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 24px;
  background: radial-gradient(70% 120% at 90% 10%, rgba(255,213,231,.7) 0, transparent 60%), linear-gradient(118deg, #FFF3DD 0%, #FFF7EC 55%, #FFEEF5 100%);
  border: 1.5px solid #FBE6C2; overflow: hidden; }
.prep-hero-k { font: 700 13px var(--font-display); color: var(--primary-deep); }
.prep-hero-d { font: 800 21px/1.1 var(--font-display); color: var(--text); letter-spacing: -.01em; margin: 1px 0 6px; }
.prep-hero-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.prep-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--surface); color: var(--primary-ink); border: 1.5px solid var(--primary-soft); }
.prep-badge.ok { color: #2E8C5A; background: #EAF8F0; border-color: #CFEEDC; }

.prep-seg { display: inline-flex; background: var(--bg-deep); border-radius: 999px; padding: 3px; gap: 2px; flex: 1; }
.prep-seg-b { flex: 1; border: 0; background: transparent; border-radius: 999px; padding: 7px 6px; font: 700 12.5px var(--font-ui); color: var(--muted); cursor: pointer; }
.prep-seg-b.on { background: linear-gradient(160deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: var(--shadow-brand); }

.prep-table { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.prep-head, .prep-row { display: grid; grid-template-columns: minmax(56px,1fr) 50px 52px 50px 46px 52px; align-items: center; gap: 3px; padding: 9px 9px; }
.prep-head { position: sticky; top: 0; z-index: 2; background: var(--primary-tint); border-bottom: 1.5px solid var(--primary-soft); }
.prep-head > div { font: 800 9.5px var(--font-ui); letter-spacing: .02em; color: var(--primary-ink); text-transform: uppercase; text-align: right; }
.prep-head > div:first-child { text-align: left; }
.prep-row { border-top: 1px solid var(--border-soft); cursor: pointer; transition: background .12s; }
.prep-row:first-of-type { border-top: 0; }
.prep-row:active { background: var(--surface-soft); }
.prep-row.on { background: var(--primary-tint); }
.prep-row.dim { opacity: .6; }
.prep-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.prep-name img, .prep-name svg, .prep-name .item-ic { width: 30px !important; height: 30px !important; flex: none; }
.prep-name > span { font: 700 12.5px var(--font-ui); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prep-rec { text-align: right; line-height: 1; }
.prep-rec b { font: 800 15.5px var(--font-num); color: var(--primary-deep); font-variant-numeric: tabular-nums; }
.prep-rec.muted { color: var(--faint); font-weight: 700; }
.prep-rec i { display: block; font-size: 9.5px; font-style: normal; color: var(--muted); margin-top: 1px; }
.prep-c { text-align: right; font: 700 11.5px var(--font-num); color: var(--text-2); font-variant-numeric: tabular-nums; }
.prep-c b { font-weight: 800; color: var(--text); }
.prep-c s { display: block; text-decoration: none; font-size: 10px; color: var(--muted); }
.prep-err { display: inline-flex; align-items: center; gap: 2px; font-size: 9.5px; font-weight: 800; padding: 2px 6px; border-radius: 999px; white-space: nowrap; }
.prep-err.good { background: #E5F7EC; color: #2E8C5A; }
.prep-err.ok   { background: #FFF3DC; color: #B5781A; }
.prep-err.hi   { background: #FFE4EC; color: #C8396A; }
.prep-err.learn { background: #F1E9FD; color: #7E59C9; }
.prep-err.learn img { width: 12px; height: 12px; }
.prep-exp { padding: 6px 13px 12px; background: var(--primary-tint); border-top: 1px dashed var(--primary-soft); }
.prep-exp-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border-soft); }
.prep-exp-row:last-child { border-bottom: 0; }
.prep-exp-row b { color: var(--text); font-weight: 700; }
.prep-group { border-top: 1px solid var(--border-soft); }
.prep-group:first-of-type { border-top: 0; }
.prep-group .prep-row { border-top: 0; }

.rice-card { padding: 14px 15px; background: linear-gradient(130deg, #F6F0FF 0%, #FFF7FB 55%, #FFF3E8 100%); border-color: #E8DCF8; }
.rice-eq { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 12px; }
.rice-eq-c { background: var(--surface); border: 1.5px solid var(--border); border-radius: 16px; padding: 9px 8px; text-align: center; }
.rice-eq-c small { display: block; font-size: 10px; color: var(--muted); margin-bottom: 2px; }
.rice-eq-c b { font: 800 22px var(--font-num); color: var(--text); font-variant-numeric: tabular-nums; }
.rice-eq-c b.hi { color: var(--dup); }
.rice-eq-c i { font-style: normal; font-size: 10px; color: var(--muted); margin-left: 2px; }
.rice-op { font: 800 16px var(--font-num); color: var(--primary); }
.rice-split { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.rice-pill { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: 18px; }
.rice-pill.bb { background: #F3ECFD; border: 1.5px solid #E2D5F7; }
.rice-pill.jm { background: #FFF6E4; border: 1.5px solid #FBE6BC; }
.rice-pill-t { font-size: 11.5px; font-weight: 700; color: var(--text-2); }
.rice-pill-v { font: 800 17px var(--font-num); color: var(--text); font-variant-numeric: tabular-nums; }
.rice-ring { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.rice-ring::after { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--surface); }
.rice-ring-n { position: relative; z-index: 1; font: 800 11px var(--font-num); color: var(--text-2); }

/* ===== FIFO prep table extras ===== */
.prep-sum-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.prep-sum { display: flex; align-items: center; gap: 8px; padding: 10px 10px; border-radius: 18px; border: 1.5px solid var(--border); background: var(--surface); }
.prep-sum.rose { background: #FFF1F6; border-color: #FAD6E4; }
.prep-sum.amber { background: #FFF7E6; border-color: #FBE6BE; }
.prep-sum.violet { background: #F5EFFE; border-color: #E6DBF9; }
.prep-sum img { width: 26px; height: 26px; flex: none; }
.prep-sum-v { font: 800 15px var(--font-display); color: var(--text); line-height: 1.05; white-space: nowrap; }
.prep-sum-k { font-size: 10.5px; font-weight: 700; color: var(--text-2); }
.prep-sum-s { font-size: 9px; color: var(--muted); }
.prep-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.prep-chips .chip { padding: 6px 14px; font-size: 12.5px; font-weight: 700; }
.prep-row.rice { background: linear-gradient(90deg, #FBF5FF, var(--surface)); }
.prep-st { display: inline-block; font-size: 9.5px; font-weight: 800; padding: 3px 7px; border-radius: 999px; white-space: nowrap; }
.prep-st.vlow { background: #FEE0E8; color: #C8396A; }
.prep-st.mid  { background: #FFF1D6; color: #B5781A; }
.prep-st.ok   { background: #E5F7EC; color: #2E8C5A; }
.prep-st.none { background: var(--bg-deep); color: var(--faint); }
.prep-c .lead, .prep-c.lead { color: var(--primary-deep); font-weight: 800; }
.prep-c.lead { font: 800 13.5px var(--font-num); color: var(--primary-deep); font-variant-numeric: tabular-nums; }
.fifo-head, .fifo-row { display: grid; grid-template-columns: 22px minmax(72px,1.3fr) 1fr 1fr 1fr; align-items: center; gap: 4px; padding: 6px 2px; font-size: 11px; }
.fifo-head { font-weight: 800; color: var(--primary-ink); border-bottom: 1px solid var(--primary-soft); padding-bottom: 5px; }
.fifo-head .fifo-c, .fifo-row .fifo-c { text-align: right; }
.fifo-row { border-bottom: 1px solid var(--border-soft); }
.fifo-no { width: 22px; height: 22px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-deep); display: grid; place-items: center; font-weight: 800; font-size: 10.5px; }
.fifo-d { display: flex; align-items: center; gap: 5px; font-weight: 600; color: var(--text-2); min-width: 0; }
.fifo-d img { width: 20px; height: 20px; }
.fifo-c { color: var(--text-2); font-variant-numeric: tabular-nums; }
.fifo-c.use { color: var(--primary-deep); font-weight: 700; }
.fifo-row.short { background: #FFF1F4; border-radius: 10px; }
.fifo-row.short .fifo-no { background: var(--danger-soft); color: var(--danger-ink); }
.fifo-row.short .fifo-c.use { color: var(--danger); }
.fifo-row.rice { grid-template-columns: minmax(96px,1.4fr) 1fr 1fr 1fr; }
.fifo-sum { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding: 9px 11px; border-radius: 13px; background: var(--surface); border: 1.5px solid var(--primary-soft); font-size: 12px; color: var(--text-2); line-height: 1.45; }
.fifo-sum img { flex: none; }

/* ===== grouped forecast cards ===== */
.fc-groups { display: flex; flex-direction: column; gap: 12px; }
.fc-group { background: var(--surface); border: 1.5px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm); }
.fc-group-head { display: flex; align-items: center; gap: 9px; padding: 12px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fc-group-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--bg-deep); }
.fc-group-ic.tint-rose { background: #FFE4EF; } .fc-group-ic.tint-amber { background: #FFEFCC; }
.fc-group-ic.tint-blue { background: #E4EEFE; } .fc-group-ic.tint-violet { background: #EEE4FB; }
.fc-group-ic.tint-green { background: #DDF3E5; } .fc-group-ic.tint-mint { background: #DDF3E5; }
.fc-group-name { font: 800 15px var(--font-display); color: var(--text); flex: 1; min-width: 0; }
.fc-group-low { font-size: 10.5px; font-weight: 800; color: #C8396A; background: #FEE0E8; padding: 3px 9px; border-radius: 999px; }
.fc-group-badge { font-size: 11px; font-weight: 700; color: var(--primary-deep); background: var(--primary-soft); padding: 4px 11px; border-radius: 999px; }
.fc-chev { color: var(--faint); display: inline-flex; transition: transform .18s ease; }
.fc-chev.open { transform: rotate(180deg); }
.fc-group-body { border-top: 1px solid var(--border-soft); }
.fc-row { display: grid; grid-template-columns: 34px 1fr auto 18px; align-items: center; gap: 9px; padding: 10px 14px; border-top: 1px solid var(--border-soft); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fc-group-body > .fc-row:first-child, .fc-group-body > .fc-rowgroup:first-child .fc-row { border-top: none; }
.fc-row img { width: 34px; height: 34px; border-radius: 9px; }
.fc-row.on { background: var(--surface-soft); }
.fc-row-main { min-width: 0; }
.fc-row-name { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.25; }
.fc-row-sub { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.fc-row-sub b { color: var(--text-2); font-weight: 700; }
.fc-row-sub svg { opacity: .6; }
.fc-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); margin: 0 3px; }
.fc-row-right { text-align: right; line-height: 1; }
.fc-row-num { font: 800 22px var(--font-num); color: var(--primary-deep); font-variant-numeric: tabular-nums; margin-top: 3px; }
.fc-row-num.need { color: #E0457B; }
.fc-row-u { font-size: 9.5px; color: var(--faint); margin-top: 2px; }
.fc-rowgroup .fc-row { border-top: 1px solid var(--border-soft); }
.fc-rowgroup .prep-exp { padding: 12px 14px 14px; }
.fc-stats4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 7px; margin-bottom: 11px; }
.fc-stat { background: var(--surface); border: 1.5px solid var(--border-soft); border-radius: 12px; padding: 8px 6px; text-align: center; }
.fc-stat span { display: block; font-size: 9.5px; color: var(--muted); margin-bottom: 3px; }
.fc-stat b { font: 800 13px var(--font-num); color: var(--text); }
.fc-stat b.hi { color: var(--primary-deep); } .fc-stat b.warn { color: #E0457B; } .fc-stat b.ok { color: #2E8C5A; }

/* ===== order plan page ===== */
.orderplan-cta { display: flex; align-items: center; gap: 11px; width: 100%; padding: 14px 16px; border: none; border-radius: 20px; cursor: pointer; color: #fff; background: linear-gradient(120deg, #F76C9B, #E0457B); box-shadow: 0 10px 22px rgba(224,69,123,.32); }
.orderplan-cta svg { color: rgba(255,255,255,.9); }
.prep-seg { display: flex; gap: 6px; background: var(--bg-deep); padding: 4px; border-radius: 14px; flex: 1; }
.prep-seg-b { flex: 1; border: none; background: transparent; padding: 9px 6px; border-radius: 11px; font-size: 13px; font-weight: 700; color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.prep-seg-b.on { background: var(--surface); color: var(--primary-deep); box-shadow: var(--shadow-sm); }
.round-seg .prep-seg-b svg { color: var(--primary); }
.cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cap-box { display: flex; align-items: center; gap: 9px; padding: 11px; border: 1.5px solid var(--border); border-radius: 16px; background: var(--surface-soft); }
.cap-lbl { font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 5px; }
.cap-row { display: flex; align-items: center; gap: 5px; }
.cap-inp { width: 100% !important; font: 800 19px var(--font-num) !important; padding: 6px 8px !important; text-align: center; }
.cap-u { font-size: 12px; color: var(--muted); font-weight: 700; flex: none; }
.cap-use-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.cap-use { padding: 12px; border-radius: 16px; border: 1.5px solid var(--border-soft); }
.cap-use.n { background: #EFF4FE; } .cap-use.f { background: #EAF6FB; }
.cap-use-top { display: flex; align-items: center; gap: 8px; }
.cap-use-lbl { font-size: 12px; font-weight: 700; color: var(--text-2); }
.cap-use-pct { font: 800 22px var(--font-num); color: var(--primary-deep); line-height: 1; }
.cap-use.f .cap-use-pct { color: #2A86C4; }
.cap-use-meta { font-size: 11px; color: var(--muted); margin: 7px 0 5px; }
.cap-track { height: 9px; border-radius: 999px; background: rgba(0,0,0,.07); overflow: hidden; }
.cap-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg,#5BC98C,#36B377); }
.cap-use.f .cap-fill { background: linear-gradient(90deg,#5FB3E8,#2A86C4); }
.cap-left { font-size: 10.5px; color: var(--muted); margin-top: 6px; }
.op-table { font-size: 12.5px; }
.op-head, .op-row { display: grid; align-items: center; gap: 4px; padding: 9px 12px; }
.op-head { background: #FFF1F6; font-weight: 800; color: #C8396A; font-size: 11px; }
.op-row { border-top: 1px solid var(--border-soft); }
.op-r { text-align: right; font-variant-numeric: tabular-nums; }
.op-name { display: flex; align-items: center; gap: 7px; font-weight: 700; color: var(--text); min-width: 0; }
.op-name img { width: 26px; height: 26px; border-radius: 7px; flex: none; }
.op-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-tot { font-weight: 800; color: var(--text); } .op-tot s { font-size: 9px; color: var(--faint); text-decoration: none; margin-left: 1px; }
.op-split { color: var(--primary-deep); font-weight: 700; }

/* ===== report back page ===== */
.orderplan-cta.alt { background: linear-gradient(120deg, #8A7FD0, #6F5FC0); box-shadow: 0 10px 22px rgba(111,95,192,.30); }
.rb-hero { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 20px; background: linear-gradient(120deg,#FFF6E9,#FFF1F6); border: 1.5px solid #FBE6D6; }
.rb-hero-badge { display: inline-block; font-size: 12px; font-weight: 800; color: var(--primary-deep); background: var(--surface); padding: 4px 12px; border-radius: 999px; margin-bottom: 7px; }
.rb-hero-txt { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.rb-steps { display: flex; flex-direction: column; gap: 9px; }
.rb-step { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 17px; box-shadow: var(--shadow-xs); }
.rb-no { width: 24px; height: 24px; border-radius: 50%; border: 2px solid; display: grid; place-items: center; font: 800 12px var(--font-num); flex: none; }
.rb-step-ic { flex: none; }
.rb-step-main { flex: 1; min-width: 0; }
.rb-step-t { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.rb-step-d { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.rb-done { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; color: #2E8C5A; background: #E5F7EC; padding: 5px 9px; border-radius: 999px; flex: none; align-self: flex-start; }
.rb-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.rb-stat { padding: 11px; border-radius: 15px; background: var(--surface-soft); border: 1.5px solid var(--border-soft); text-align: center; }
.rb-stat img { width: 24px; height: 24px; margin: 0 auto 4px; display: block; }
.rb-stat-v { font: 800 18px var(--font-display); color: var(--text); line-height: 1.1; }
.rb-stat-k { font-size: 11px; font-weight: 700; color: var(--text-2); margin-top: 2px; }
.rb-stat-s { font-size: 9.5px; color: var(--muted); margin-top: 1px; }
.rb-model-note { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 9px 11px; border-radius: 13px; background: var(--surface-soft); font-size: 11.5px; color: var(--text-2); line-height: 1.45; }
.rb-model-note img { flex: none; }
.rb-exp-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.rb-exp { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 13px 8px; border-radius: 15px; border: 1.5px solid; cursor: pointer; background: var(--surface); }
.rb-exp b { font-size: 12px; font-weight: 800; }
.rb-exp span { font-size: 9.5px; color: var(--muted); }
.rb-exp.rose { border-color: #FAD6E4; color: #E0457B; background: #FFF5F9; }
.rb-exp.blue { border-color: #CFE0FA; color: #3B6BB5; background: #F2F7FF; }
.rb-exp.green { border-color: #C9EBD5; color: #2E8C5A; background: #F1FBF5; }

/* ============================================================
   FORMULA LIBRARY SETTINGS (สูตรพยากรณ์)
   ============================================================ */
.fl-hero { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 22px;
  background: radial-gradient(70% 120% at 88% 12%, rgba(226,213,249,.7) 0, transparent 60%), linear-gradient(120deg, #F4EDFF 0%, #FFF6FB 60%, #FFF0E9 100%); border: 1.5px solid #E7DCF8; }
.fl-hero-t { font: 800 16px var(--font-display); color: var(--primary-deep); }
.fl-hero-s { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }

.fl-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: 20px; padding: 12px 14px; box-shadow: var(--shadow-xs); }
.fl-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.fl-card-h { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.fl-dot { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-tint); flex: none; }
.fl-name { flex: 1; min-width: 0; border: 0; background: transparent; font: 800 15px var(--font-display); color: var(--text); padding: 2px 0; }
.fl-name:focus { outline: none; border-bottom: 1.5px solid var(--primary); }
.fl-terms { display: flex; flex-direction: column; gap: 7px; }
.fl-term { display: flex; align-items: center; gap: 8px; background: var(--surface-soft); border: 1px solid var(--border-soft); border-radius: 13px; padding: 7px 10px; }
.fl-term-lbl { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--text-2); }
.fl-term-f { display: flex; align-items: center; gap: 5px; flex: none; }
.fl-term-f > span { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.fl-term-f .input { padding: 5px 6px; }
.fl-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.mini-btn.danger { color: var(--danger); }

.fl-range { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; padding: 9px 12px; }
.fl-range-d { font-size: 12.5px; font-weight: 700; color: var(--info-ink); }
.fl-range-arrow { color: var(--faint); display: flex; }
.fl-range-f { flex: 1; font-size: 13px; font-weight: 700; color: var(--primary-ink); }
.icon-x { border: 0; background: transparent; color: var(--faint); display: grid; place-items: center; padding: 4px; cursor: pointer; }
.icon-x:active { color: var(--danger); }
.fl-addrange { background: var(--surface-soft); border: 1.5px dashed var(--primary-soft); border-radius: 16px; padding: 12px; }
.fl-mini-lbl { font-size: 10.5px; font-weight: 700; color: var(--muted); }

.fl-err { padding: 13px 15px; background: linear-gradient(130deg, #FFF1F6 0%, #FFF8FB 60%, #F4F0FF 100%); border-color: #F6DCE7; }
.fl-brain { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--border); flex: none; }
.fl-err-k { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.fl-err-v { font: 800 19px var(--font-num); color: var(--primary-deep); font-variant-numeric: tabular-nums; }
.fl-err-v.sm { font-size: 14px; color: var(--text-2); }

/* ============================================================
   fs2 — "สูตรพยากรณ์" redesign (visual overhaul ตาม reference)
   ============================================================ */
.fs2 { gap: 13px; }
.fs2 .input { border-radius: 13px; }

/* hero */
.fs2-hero { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 16px;
  border-radius: var(--r-xl); overflow: hidden; border: 1.5px solid #E6DBF9;
  background: linear-gradient(135deg, #F6F0FE 0%, #EEE4FB 100%); box-shadow: var(--shadow-sm); }
.fs2-spark { position: absolute; color: #F6C84A; font-size: 14px; pointer-events: none; }
.fs2-spark.s1 { top: 12px; right: 16%; } .fs2-spark.s2 { top: 26px; right: 8%; color: #9FD0F0; font-size: 11px; }
.fs2-hero-t { font: 800 19px var(--font-display); color: var(--violet-ink, #7E59C9); }
.fs2-hero-s { font-size: 12px; color: var(--text-2); margin-top: 3px; max-width: 95%; }
.fs2-hero-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.fs2-pill { font-size: 11.5px; font-weight: 800; padding: 5px 11px; border-radius: 999px; }

/* block (white card section) */
.fs2-block { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 14px; }
.fs2-block-h { display: flex; align-items: center; gap: 8px; font: 800 15px var(--font-display); color: var(--text); margin-bottom: 11px; }
.fs2-block-h img { width: 22px; height: 22px; }
.fs2-addbtn { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: 700 12.5px var(--font-display);
  color: var(--info-ink, #3F73B8); background: var(--info-soft, #E6F1FE); border: 1.5px solid #CFE2FB; border-radius: 999px; padding: 6px 12px; cursor: pointer; }

/* active / default */
.fs2-active2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fs2-af { display: flex; flex-direction: column; gap: 5px; }
.fs2-af > span { font-size: 11.5px; font-weight: 700; color: var(--text-2); }
.fs2-defsel { width: 100%; border: 1.6px solid var(--border); border-radius: 13px; background: var(--surface);
  font: 700 14px var(--font-display); color: var(--text); padding: 11px 12px; }
.fs2-active-now { display: flex; align-items: center; justify-content: space-between; border-radius: 13px;
  padding: 11px 14px; font-size: 14px; border: 1.5px solid currentColor; }
.fs2-active-now b { font-family: var(--font-display); }

/* date ranges */
.fs2-rng { display: flex; align-items: center; gap: 9px; }
.fs2-rng-d { flex: 1; background: var(--info-soft, #E6F1FE); border: 1.5px solid #CFE2FB; border-radius: 13px;
  padding: 9px 12px; font-weight: 700; font-size: 12.5px; color: var(--info-ink, #3F73B8); }
.fs2-rng-arrow { color: var(--muted); display: grid; place-items: center; }
.fs2-rng-f { font-weight: 800; font-size: 12.5px; border-radius: 999px; padding: 8px 14px; white-space: nowrap; }
.fs2-del { border: 0; background: transparent; color: var(--faint); display: grid; place-items: center; padding: 5px; cursor: pointer; border-radius: 8px; }
.fs2-del:active { color: var(--danger); background: var(--danger-soft); }
.fs2-emptyrng { font-size: 12.5px; color: var(--muted); background: var(--surface-soft); border: 1.5px dashed var(--border); border-radius: 13px; padding: 11px 13px; }
.fs2-hint { display: flex; gap: 6px; font-size: 11.5px; color: var(--text-2); margin-top: 10px; line-height: 1.45; }
.fs2-addrng { background: var(--surface-soft); border: 1.5px dashed var(--primary-soft); border-radius: 14px; padding: 12px; margin-bottom: 9px; }
.fs2-mini-lbl { font-size: 10.5px; font-weight: 700; color: var(--muted); }

/* library section title */
.fs2-libtitle { display: flex; align-items: center; gap: 8px; font: 800 14px var(--font-display); color: var(--primary-ink); margin: 6px 2px 1px; }
.fs2-libtitle img { width: 20px; height: 20px; }
.fs2-count { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1.5px solid var(--border); border-radius: 999px; padding: 3px 10px; }

/* formula card */
.fs2-card { background: var(--surface); border: 1.5px solid var(--border); border-left: 5px solid var(--fc);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 14px; transition: box-shadow .16s, transform .16s; }
.fs2-card.on { box-shadow: 0 0 0 2.5px var(--fc), var(--shadow-md); }
.fs2-card-h { display: flex; align-items: center; gap: 9px; }
.fs2-numbadge { width: 25px; height: 25px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--fc); color: #fff; font: 800 13px var(--font-display); }
.fs2-name { flex: 1; min-width: 0; border: 0; background: transparent; font: 800 16px var(--font-display); color: var(--fcink); padding: 2px 0; }
.fs2-name:focus { outline: none; border-bottom: 2px dashed var(--fc); }
.fs2-tag { font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.fs2-tag.std { background: var(--cream); color: #9A7B57; border: 1px solid #F0E2CC; }
.fs2-tag.custom { background: var(--violet-soft, #F1EAFD); color: var(--violet-ink, #7E59C9); border: 1px solid #E2D5F7; }
.fs2-expr { margin: 9px 0 11px; font: 600 12.5px var(--font-display); color: var(--text-2); line-height: 1.7; }
.fs2-expr-line { }
.fs2-plus { color: var(--muted); }
.fs2-terms { display: flex; flex-direction: column; gap: 8px; }
.fs2-trow { display: flex; gap: 8px; }
.fs2-fld { display: flex; flex-direction: column; gap: 4px; }
.fs2-fld.grow { flex: 1; }
.fs2-fld > span { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.fs2-num { width: 74px; border: 1.6px solid var(--border); border-radius: 12px; background: var(--surface);
  font: 800 16px var(--font-display); color: var(--text); text-align: center; padding: 9px 4px; }
.fs2-num.wide { width: 96px; }
.fs2-sel { width: 100%; border: 1.6px solid var(--border); border-radius: 12px; background: var(--surface);
  font: 700 14px var(--font-display); color: var(--text); padding: 10px 12px; }
.fs2-note { display: flex; gap: 7px; align-items: flex-start; margin-top: 11px; font-size: 11.5px; line-height: 1.45;
  background: var(--violet-soft, #F1EAFD); color: var(--violet-ink, #7E59C9); border: 1.5px solid #E2D5F7; border-radius: 12px; padding: 9px 11px; }
.fs2-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border-soft); }
.fs2-open { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--green-ink, #2E8C5A);
  background: var(--green-soft, #E8F8EF); border: 1px solid #C9ECD7; border-radius: 999px; padding: 4px 9px; }
.fs2-active-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800;
  color: #fff; background: var(--fc); border-radius: 999px; padding: 6px 13px; }
.fs2-usebtn { margin-left: auto; font: 700 12.5px var(--font-display); color: var(--fcink); background: var(--fcsoft);
  border: 1.5px solid var(--fc); border-radius: 999px; padding: 6px 15px; cursor: pointer; }
.fs2-usebtn:active { transform: scale(.96); }

/* error & learning */
.fs2-errcard { background: linear-gradient(130deg, #FFF1F6 0%, #FFF8FB 55%, #F4F0FF 100%); border: 1.5px solid #F6DCE7; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 14px; }
.fs2-errgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
.fs2-errbox { border-radius: 14px; padding: 11px 8px; text-align: center; border: 1.5px solid; }
.fs2-errbox.mape { background: var(--danger-soft); border-color: #FAC9D9; }
.fs2-errbox.wmape { background: var(--info-soft, #E6F1FE); border-color: #CFE2FB; }
.fs2-errbox.base { background: var(--surface); border-color: var(--border); }
.fs2-errk { font-size: 11px; font-weight: 700; color: var(--text-2); }
.fs2-errv { font: 800 24px var(--font-display); color: var(--text); margin-top: 2px; font-variant-numeric: tabular-nums; }
.fs2-errv.sm { font-size: 22px; }
.fs2-errbox.mape .fs2-errv { color: var(--danger-ink); }
.fs2-errbox.wmape .fs2-errv { color: var(--info-ink, #3F73B8); }
.fs2-errmood { font-size: 10.5px; font-weight: 700; color: var(--green-ink, #2E8C5A); margin-top: 2px; }
.fs2-learning { display: flex; align-items: center; gap: 11px; }
.fs2-auto { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border-soft); }
.fs2-auto-t { font-weight: 700; font-size: 13px; }
.fs2-auto-s { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* rice */
.fs2-ricerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fs2-ricerow + .fs2-ricerow { margin-top: 11px; }
.fs2-ricerow > span { font-size: 13px; font-weight: 600; }

/* ============================================================
   fc7 — "คำแนะนำการเตรียมของ" 7-day forecast table (ตาม reference)
   ============================================================ */
.fc7-tabs { margin: 2px 0 0; }
/* แถบ 7 วัน */
.fc7-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 18px; padding: 10px 8px; box-shadow: var(--shadow-sm); }
.fc7-wd { text-align: center; border-radius: 12px; padding: 6px 2px; }
.fc7-wd.today { background: var(--tint-rose); }
.fc7-wd-d { font: 800 12px var(--font-display); color: var(--text-2); }
.fc7-wd.today .fc7-wd-d { color: var(--danger-ink); }
.fc7-wd-date { font-size: 9px; color: var(--muted); margin-top: 1px; }
.fc7-wd-face { font-size: 16px; margin: 3px 0 1px; }
.fc7-wd-kg { font-size: 9.5px; font-weight: 800; color: var(--primary-dark); }

/* สรุป */
.fc7-sum-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; }
.fc7-sum { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; border-radius: 16px; padding: 11px 6px; border: 1.5px solid var(--border); }
.fc7-sum img { width: 24px; height: 24px; }
.fc7-sum-v { font: 800 17px var(--font-num); color: var(--text); }
.fc7-sum-k { font-size: 10px; font-weight: 600; color: var(--muted); line-height: 1.2; }
.fc7-sum.tint-rose { background: linear-gradient(160deg,#FFF4F7,#FFE9EF); } .fc7-sum.tint-rose .fc7-sum-v { color: var(--danger-ink); }
.fc7-sum.tint-amber { background: linear-gradient(160deg,#FFFaf0,#FFF3DE); } .fc7-sum.tint-amber .fc7-sum-v { color: var(--warning-ink); }
.fc7-sum.tint-green { background: linear-gradient(160deg,#F0FAF4,#E5F6EC); } .fc7-sum.tint-green .fc7-sum-v { color: #2E8C5A; }
.fc7-sum.tint-violet { background: linear-gradient(160deg,#F8F3FE,#F0E6FC); } .fc7-sum.tint-violet .fc7-sum-v { color: #7E59C9; font-size: 14px; }

/* legend */
.fc7-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 11px; font-weight: 600; color: var(--text-2); padding: 2px 2px; }
.fc7-legend span { display: inline-flex; align-items: center; gap: 4px; }
.fc7-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.fc7-legend-u { margin-left: auto; color: var(--faint); }

/* groups + tables */
.fc7-groups { display: flex; flex-direction: column; gap: 13px; }
.fc7-block { background: var(--surface); border: 1.5px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-sm); overflow: hidden; }
.fc7-title { display: flex; align-items: center; gap: 8px; padding: 11px 14px; font: 800 15px var(--font-display); color: var(--text); }
.fc7-title-ic { width: 24px; height: 24px; display: grid; place-items: center; }
.fc7-title-ic .emo-g { font-size: 18px; }
.fc7-title-n { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-soft); border-radius: 999px; padding: 3px 10px; }
.fc7-title.tint-green { background: linear-gradient(180deg,#EFFaf2,#fff); }
.fc7-title.tint-blue { background: linear-gradient(180deg,#EAF3FE,#fff); }
.fc7-title.tint-amber { background: linear-gradient(180deg,#FFF7E8,#fff); }
.fc7-title.tint-rose { background: linear-gradient(180deg,#FFF0F4,#fff); }
.fc7-title.tint-violet { background: linear-gradient(180deg,#F5EFFD,#fff); }

/* table = horizontal-scroll grid rows. menu sticky-left */
.fc7-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fc7-head, .fc7-row {
  display: grid;
  grid-template-columns: 132px 64px repeat(7, minmax(38px, 1fr));
  align-items: center; min-width: 560px;
}
.fc7-head { position: sticky; top: 0; background: var(--pink-tint, #FFF1F7); border-bottom: 1.5px solid var(--border); padding: 0 2px; }
.fc7-head > span { font: 700 10.5px var(--font-display); color: var(--primary-ink); padding: 8px 5px; text-align: right; }
.fc7-head .fc7-c-name { text-align: left; padding-left: 14px; }
.fc7-head .fc7-c-day.today { color: var(--danger-ink); }
.fc7-body { }
.fc7-row { padding: 0 2px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background .12s; }
.fc7-row:active { background: var(--surface-soft); }
.fc7-row.on { background: var(--surface-soft); }
.fc7-c-name { display: flex; align-items: center; gap: 7px; padding: 9px 5px 9px 12px; min-width: 0; }
.fc7-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(0,0,0,.03); }
.fc7-nm { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc7-c-stock { text-align: right; padding: 9px 6px; line-height: 1; }
.fc7-c-stock b { font: 800 13.5px var(--font-num); color: var(--primary-dark); }
.fc7-u { display: block; font-size: 8.5px; color: var(--faint); margin-top: 2px; }
.fc7-c-day { text-align: right; padding: 9px 6px; font: 600 12px var(--font-num); color: var(--text-2); }
.fc7-c-day.today { color: var(--danger-ink); font-weight: 800; background: rgba(247,108,160,.06); }
.fc7-rowgroup { border-bottom: 1px solid var(--border-soft); }
.fc7-rowgroup .fc7-row { border-bottom: none; }
.fc7-rowgroup .prep-exp { padding: 6px 14px 14px; }

/* ============================================================
   STORE DATA CARD (เพิ่มเติม › ข้อมูลกลาง · ร้าน)
   ============================================================ */
.storedata-card { padding: 14px; }
.storedata-head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.storedata-mascot { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px;
  background: radial-gradient(120% 120% at 32% 22%, #FFF1F8, #FCE4F0); }
.storedata-name { font: 800 17px var(--font-display); color: var(--primary-deep); line-height: 1.1; }
.storedata-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.storedata-edit { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--primary-deep); font: 700 12px var(--font-display); cursor: pointer; }
.storedata-edit svg { color: var(--primary); }
.storedata-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.storedata-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px;
  border-radius: 18px; border: 1.5px solid var(--c-border, var(--border)); background: var(--c-bg, var(--surface));
  text-align: left; cursor: pointer; transition: transform .1s; }
.storedata-tile:active { transform: scale(.97); }
.storedata-tile .catic { margin-bottom: 4px; }
.storedata-tt { font: 800 14.5px var(--font-display); color: var(--text); }
.storedata-sub { font-size: 11px; color: var(--muted); line-height: 1.35; }
.storedata-go { display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; font-size: 11.5px; font-weight: 800; color: var(--primary-deep); }
.storedata-go svg { width: 11px; }

/* ============================================================
   PREP CONTROLS — เลือกสูตร + เลื่อนสัปดาห์ + ปฏิทินเดือน
   ============================================================ */
.prep-ctrls { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); padding: 12px 13px; box-shadow: var(--shadow-sm); }
.prep-fld { display: flex; flex-direction: column; gap: 6px; }
.prep-fld-k { display: inline-flex; align-items: center; gap: 5px; font: 700 12px var(--font-display); color: var(--text-2); }
.prep-fld-k svg { color: var(--primary); }
.prep-select { width: 100%; border: 1.6px solid var(--border); border-radius: 13px; background: var(--surface);
  font: 700 14px var(--font-display); color: var(--primary-deep); padding: 11px 12px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--primary) 50%), linear-gradient(135deg, var(--primary) 50%, transparent 50%);
  background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.prep-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.prep-weeknav { display: flex; align-items: center; gap: 8px; }
.prep-nav-b { flex: none; width: 38px; height: 38px; border-radius: 12px; border: 1.5px solid var(--border);
  background: var(--surface-soft); color: var(--primary-deep); display: grid; place-items: center; cursor: pointer; }
.prep-nav-b:active { transform: scale(.94); }
.prep-weeklabel { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1.5px solid var(--primary-soft); background: var(--primary-tint); color: var(--primary-deep);
  border-radius: 13px; padding: 9px 10px; font: 800 13px var(--font-display); cursor: pointer; }
.prep-weeklabel.on { box-shadow: 0 0 0 3px var(--primary-soft); }
.prep-weeklabel svg:first-child { color: var(--primary); }
.prep-today-b { display: inline-flex; align-items: center; justify-content: center; gap: 5px; align-self: flex-start;
  border: 0; background: var(--surface-soft); color: var(--text-2); border-radius: 999px; padding: 7px 14px; font: 700 12px var(--font-display); cursor: pointer; }
.prep-today-b svg { color: var(--primary); }

.prep-cal { border-top: 1px dashed var(--border); padding-top: 11px; }
.prep-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.prep-cal-title { font: 800 14.5px var(--font-display); color: var(--text); }
.prep-cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 4px; }
.prep-cal-wd span { text-align: center; font: 700 10.5px var(--font-display); color: var(--muted); }
.prep-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-cell { aspect-ratio: 1; border: 0; background: transparent; border-radius: 10px; font: 600 13px var(--font-num);
  color: var(--text-2); display: grid; place-items: center; cursor: pointer; transition: background .12s; }
.cal-cell:hover { background: var(--surface-soft); }
.cal-cell.empty { pointer-events: none; }
.cal-cell.inweek { background: var(--primary-soft); color: var(--primary-deep); font-weight: 800; }
.cal-cell.today { box-shadow: inset 0 0 0 2px var(--primary); color: var(--primary-deep); font-weight: 800; }