/* v4 新手引導 (10 steps). Defines window.MeowV4Onboarding = {open(replay)}; meow-v3.js hands its onboarding over to it.
   Full-screen top-layer <dialog id="meowOnboarding" class="v4ob">: paper background, stitched cards, leather buttons.
   Everything is scoped to html.v4 #meowOnboarding.v4ob so the older v3 onboarding rules never apply. */

html.v4 #meowOnboarding.v4ob{
  --v4-serif:"Meow Serif TC","Noto Serif TC","Songti TC","STSongti-TC-Bold","Source Han Serif TC",serif;
  position:fixed;inset:0;box-sizing:border-box;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0 var(--v4-safe-right) 0 var(--v4-safe-left);border:0;border-radius:0;overflow:hidden;
  background:linear-gradient(180deg,var(--v4-bg-top),var(--v4-bg-bottom))!important;color:var(--v4-ink);font-family:var(--v4-sans);
  -webkit-font-smoothing:antialiased;color-scheme:inherit}
html.v4 #meowOnboarding.v4ob::backdrop{background:var(--v4-bg-bottom)}
html.v4 #meowOnboarding.v4ob *{box-sizing:border-box}
html.v4 #meowOnboarding.v4ob button{-webkit-tap-highlight-color:transparent;margin:0}
html.v4 #meowOnboarding .v4ob-skip,html.v4 #meowOnboarding .v4ob-tile,html.v4 #meowOnboarding .v4ob-opt,html.v4 #meowOnboarding .v4ob-login,html.v4 #meowOnboarding .v4ob-link{font-family:var(--v4-sans)}
html.v4 #meowOnboarding.v4ob :focus:not(:focus-visible),html.v4 #meowOnboarding .v4ob-shell:focus{outline:none}
html.meow-onboarding-open,html.meow-onboarding-open body{overflow:hidden}

/* Shell: header row, scrolling body, pinned button */
html.v4 #meowOnboarding .v4ob-shell{display:flex;flex-direction:column;height:100%;max-width:460px;margin:0 auto;padding-top:calc(max(var(--v4-safe-top),44px) + 8px)}
html.v4 #meowOnboarding .v4ob-top{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:34px;padding:0 20px 0 16px}
html.v4 #meowOnboarding .v4ob-back{justify-self:start;position:relative;display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:11px;border:1px solid #755136;
  background:var(--v4-leather-brown);box-shadow:0 2px 0 #5a3a26,inset 0 1px 0 rgba(255,255,255,.14);color:#fff7ec;font-size:19px;cursor:pointer}
html.v4 #meowOnboarding .v4ob-back:active{transform:translateY(1px);box-shadow:0 1px 0 #5a3a26}
html.v4 #meowOnboarding .v4ob-paws{display:flex;align-items:center;gap:5px}
html.v4 #meowOnboarding .v4ob-paw{position:relative;flex:none;width:12px;height:12px;color:var(--v4-tile-line)}
html.v4 #meowOnboarding .v4ob-paw.past{color:var(--v4-brown)}
html.v4 #meowOnboarding .v4ob-paw.on{width:16px;height:16px;color:var(--v4-red)}
html.v4 #meowOnboarding .v4ob-paw svg{position:absolute;left:14.17%;top:12.5%;width:71.66%;height:72.5%;font-size:inherit}
html.v4 #meowOnboarding .v4ob-skip{justify-self:end;padding:0;border:0;background:none;font-size:15px;line-height:20px;font-weight:700;color:var(--v4-red-text);cursor:pointer;white-space:nowrap}
html.v4 #meowOnboarding .v4ob-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 16px 16px}
html.v4 #meowOnboarding .v4ob-foot{flex:none;padding:8px 16px calc(max(var(--v4-safe-bottom),34px) + 8px)}
html.v4 #meowOnboarding .v4ob-foot-empty{padding-top:0}
html.v4 #meowOnboarding .v4ob-error{margin:0 0 8px;text-align:center;font-size:13px;line-height:18px;font-weight:700;color:var(--v4-red-text)}
html.v4 #meowOnboarding .v4ob-error:empty{display:none}
html.v4 #meowOnboarding .v4-btn.v4ob-cta{height:52px;border-radius:16px;font-size:17px;line-height:22px;letter-spacing:.1em}
html.v4 #meowOnboarding .v4-btn.v4ob-cta::before{border-radius:12px}
html.v4 #meowOnboarding .v4ob-foot-note{margin:8px 0 -6px;text-align:center;font-size:12px;line-height:16px;font-weight:500;color:var(--v4-muted)}

/* Headings: centred for intro / backup / done, left text + small cat for the setup steps */
html.v4 #meowOnboarding .v4ob-cat{display:block;width:132px;height:150px;margin:10px auto 0;object-fit:contain;background:none;border:0;border-radius:0;box-shadow:none;filter:none;max-height:none}
html.v4 #meowOnboarding .v4ob-cat.v4ob-cat-sm{width:123px;height:140px;margin-top:14px}
html.v4 #meowOnboarding .v4ob-title{margin:16px 0 0;padding:0 4px;text-align:center;font-family:var(--v4-serif);font-weight:900;font-size:28px;line-height:38px;letter-spacing:.04em;color:var(--v4-title)}
html.v4 #meowOnboarding .v4ob-title.v4ob-title-sm{font-size:min(24px,6vw);line-height:34px}
html.v4 #meowOnboarding .v4ob-sub{max-width:329px;margin:6px auto 0;text-align:center;font-size:15px;line-height:23px;font-weight:500;color:var(--v4-muted-bg)}
html.v4 #meowOnboarding .v4ob-sub.v4ob-sub-sm{margin-top:8px}
html.v4 #meowOnboarding .v4ob-head{display:flex;align-items:flex-start;gap:4px;margin-top:16px}
html.v4 #meowOnboarding .v4ob-head-text{flex:1;min-width:0;padding:8px 0 0 4px}
html.v4 #meowOnboarding .v4ob-head h2{margin:0;font-family:var(--v4-serif);font-weight:900;font-size:26px;line-height:36px;letter-spacing:.04em;color:var(--v4-title)}
html.v4 #meowOnboarding .v4ob-head p{margin:6px 0 0;font-size:14px;line-height:22px;font-weight:500;color:var(--v4-muted)}
html.v4 #meowOnboarding .v4ob-head-cat{flex:none;display:block;width:81px;height:92px;object-fit:contain;background:none;border:0;border-radius:0;box-shadow:none;filter:none;max-height:none}
html.v4 #meowOnboarding .v4ob-stack{display:flex;flex-direction:column;gap:10px;margin-top:20px}
html.v4 #meowOnboarding .v4ob-head+.v4ob-stack{margin-top:18px}
html.v4 #meowOnboarding .v4ob-sub-sm+.v4ob-stack{margin-top:12px}
html.v4 #meowOnboarding .v4ob-red{color:var(--v4-red-text)}

/* Intro cards */
html.v4 #meowOnboarding .v4ob-week .v4-wd{cursor:default}
html.v4 #meowOnboarding .v4ob-next{display:flex;align-items:center;gap:8px;min-width:0}
html.v4 #meowOnboarding .v4ob-next-lbl{flex:none;font-size:13px;line-height:18px;font-weight:700;color:var(--v4-muted)}
html.v4 #meowOnboarding .v4ob-next-time{flex:none;font-size:16px;line-height:22px;font-weight:900;color:var(--v4-ink);white-space:nowrap}
html.v4 #meowOnboarding .v4ob-tags{display:flex;flex-wrap:wrap;gap:6px}
html.v4 #meowOnboarding .v4ob-tag{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:6px;border:1px solid var(--v4-tile-line);background:var(--v4-tile);
  font-size:12px;line-height:17px;font-weight:700;color:var(--v4-sub);white-space:nowrap}
html.v4 #meowOnboarding .v4ob-tag.ot{background:var(--v4-ot-bg);border-color:var(--v4-ot-line);color:var(--v4-ot-ink)}
html.v4 #meowOnboarding .v4ob-tag.ded{background:var(--v4-p-rose-bg);border-color:var(--v4-p-rose-line);color:var(--v4-p-rose-ink)}
html.v4 #meowOnboarding .v4ob-tag.early{background:var(--v4-early-bg);border-color:var(--v4-early-line);color:var(--v4-early-ink)}
html.v4 #meowOnboarding .v4ob-tag.middle{background:var(--v4-middle-bg);border-color:var(--v4-middle-line);color:var(--v4-middle-ink)}
html.v4 #meowOnboarding .v4ob-tag.night{background:var(--v4-night-bg);border-color:var(--v4-night-line);color:var(--v4-night-ink)}
html.v4 #meowOnboarding .v4ob-leave{display:flex;gap:6px}
html.v4 #meowOnboarding .v4ob-leave>span{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 0;border-radius:10px;border:1px solid;white-space:nowrap}
html.v4 #meowOnboarding .v4ob-leave small{font-size:12px;line-height:16px;font-weight:700}
html.v4 #meowOnboarding .v4ob-leave b{font-size:14px;line-height:20px;font-weight:900;color:var(--v4-ink)}
html.v4 #meowOnboarding .v4ob-leave .sick{background:var(--v4-p-blue-bg);border-color:var(--v4-p-blue-line)}html.v4 #meowOnboarding .v4ob-leave .sick small{color:var(--v4-p-blue-ink)}
html.v4 #meowOnboarding .v4ob-leave .personal{background:var(--v4-p-amber-bg);border-color:var(--v4-p-amber-line)}html.v4 #meowOnboarding .v4ob-leave .personal small{color:var(--v4-p-amber-ink)}
html.v4 #meowOnboarding .v4ob-leave .annual{background:var(--v4-p-green-bg);border-color:var(--v4-p-green-line)}html.v4 #meowOnboarding .v4ob-leave .annual small{color:var(--v4-p-green-ink)}
html.v4 #meowOnboarding .v4ob-leave .menstrual{background:var(--v4-p-rose-bg);border-color:var(--v4-p-rose-line)}html.v4 #meowOnboarding .v4ob-leave .menstrual small{color:var(--v4-p-rose-ink)}
html.v4 #meowOnboarding .v4ob-leave-note{margin:0;font-size:13px;line-height:18px;font-weight:700;color:var(--v4-sub)}

/* 工作類型 tiles */
html.v4 #meowOnboarding .v4-card.v4ob-types{padding:12px;gap:8px}
html.v4 #meowOnboarding .v4ob-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch}
html.v4 #meowOnboarding .v4ob-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;width:100%;padding:12px;border-radius:14px;
  border:1px solid var(--v4-tile-line);background:var(--v4-field);text-align:left;cursor:pointer;color:inherit}
html.v4 #meowOnboarding .v4ob-tile.on{border:2px solid var(--v4-pick-line);background:var(--v4-pick-bg)}
html.v4 #meowOnboarding .v4ob-tile-top{display:flex;align-items:center;gap:8px;width:100%;height:30px}
html.v4 #meowOnboarding .v4ob-check{position:relative;margin-left:auto;display:grid;place-items:center;width:22px;height:22px;border-radius:11px;border:1px solid #9b4334;
  background:var(--v4-leather-red);box-shadow:0 6px 12px rgba(127,36,28,.22),0 3px 0 #7f241c,inset 0 1px 0 rgba(255,255,255,.14);color:#fff7ec;font-size:13px}
html.v4 #meowOnboarding .v4ob-tile b{font-family:var(--v4-serif);font-weight:900;font-size:16px;line-height:22px;letter-spacing:.04em;color:var(--v4-title);white-space:nowrap}
html.v4 #meowOnboarding .v4ob-tile.on b{color:var(--v4-pick-ink)}
html.v4 #meowOnboarding .v4ob-tile small{font-size:12px;line-height:16px;font-weight:500;color:var(--v4-muted);overflow-wrap:anywhere;max-width:100%}

/* Option buttons (班別模板, 加班費, 特休制度, 鬧鐘) */
html.v4 #meowOnboarding .v4ob-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
html.v4 #meowOnboarding .v4ob-opts.v4ob-two{grid-template-columns:repeat(2,minmax(0,1fr))}
html.v4 #meowOnboarding .v4ob-opt{position:relative;min-height:40px;min-width:0;padding:3px 4px;border-radius:11px;border:1px solid var(--v4-tile-line);background:var(--v4-field);
  font-size:13px;line-height:17px;font-weight:700;color:var(--v4-sub);cursor:pointer;overflow-wrap:anywhere}
html.v4 #meowOnboarding .v4ob-opt.on{border-color:#755136;background:var(--v4-leather-brown);box-shadow:0 6px 12px rgba(70,40,20,.2),0 3px 0 #5a3a26,inset 0 1px 0 rgba(255,255,255,.14);
  color:#fff7ec;font-family:var(--v4-serif);font-weight:900;text-shadow:0 1px 0 rgba(70,16,10,.45)}
html.v4 #meowOnboarding .v4ob-opt.on::before{content:"";position:absolute;inset:2.5px;border:1.2px dashed rgba(255,241,226,.55);border-radius:7.5px;pointer-events:none}

/* Fields */
html.v4 #meowOnboarding .v4ob-row{display:flex;gap:10px;min-width:0}
html.v4 #meowOnboarding .v4ob-row.v4ob-row3{gap:8px}
html.v4 #meowOnboarding label.v4ob-field,html.v4 #meowOnboarding .v4ob-field{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;margin:0;padding:0;font-size:inherit;color:inherit}
html.v4 #meowOnboarding .v4ob-field.v4ob-w110{flex:none;width:110px}
html.v4 #meowOnboarding .v4ob-lbl{font-size:12px;line-height:16px;font-weight:700;color:var(--v4-muted);white-space:nowrap}
html.v4 #meowOnboarding .v4ob-box{position:relative;display:flex;align-items:center;gap:6px;height:42px;padding:0 12px;border-radius:11px;border:1px solid var(--v4-tile-line);background:var(--v4-field);min-width:0}
html.v4 #meowOnboarding .v4ob-box:focus-within{border-color:var(--v4-brown)}
html.v4 #meowOnboarding .v4ob-box input,html.v4 #meowOnboarding .v4ob-box select,html.v4 #meowOnboarding .v4ob-val{flex:1;min-width:0;width:100%;height:40px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;outline:none;
  -webkit-appearance:none;appearance:none;font-family:var(--v4-sans);font-size:17px;line-height:22px;font-weight:900;color:var(--v4-ink);text-align:left}
html.v4 #meowOnboarding .v4ob-val{display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.v4 #meowOnboarding .v4ob-box select{cursor:pointer;text-overflow:ellipsis}
@media(max-width:350px){html.v4 #meowOnboarding .v4ob-date{padding:0 8px}html.v4 #meowOnboarding .v4ob-date .v4ob-val{font-size:15px}}
html.v4 #meowOnboarding .v4ob-box select.v4ob-empty,html.v4 #meowOnboarding .v4ob-box input::placeholder{color:var(--v4-placeholder);font-weight:700}
html.v4 #meowOnboarding .v4ob-box select option{color:var(--v4-ink);font-weight:700}
html.v4 #meowOnboarding .v4ob-box input::-webkit-outer-spin-button,html.v4 #meowOnboarding .v4ob-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
html.v4 #meowOnboarding .v4ob-box input[type=number]{-moz-appearance:textfield}
html.v4 #meowOnboarding .v4ob-date input[type=date]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1}
html.v4 #meowOnboarding .v4ob-unit{flex:none;font-size:13px;line-height:18px;font-weight:700;color:var(--v4-muted)}
html.v4 #meowOnboarding .v4ob-hint{margin:0;font-size:12px;line-height:18px;font-weight:500;color:var(--v4-muted)}
html.v4 #meowOnboarding .v4ob-note{margin:0;font-size:11px;line-height:15px;font-weight:500;color:var(--v4-muted)}
/* Like the design, the shift-hours line may run into the card padding to stay on one line. */
html.v4 #meowOnboarding .v4ob-note.v4ob-times{margin-right:-12px;letter-spacing:-.01em}
html.v4 #meowOnboarding .v4ob-link{align-self:flex-start;padding:0;border:0;background:none;font-size:12px;line-height:16px;font-weight:700;color:var(--v4-red-text);cursor:pointer}

/* 排班 preview */
html.v4 #meowOnboarding .v4ob-mweek{display:flex;gap:4px}
html.v4 #meowOnboarding .v4ob-mday{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 0;border-radius:9px;border:1px solid var(--v4-tile-line);background:var(--v4-tile)}
html.v4 #meowOnboarding .v4ob-mday small{font-size:11px;line-height:14px;font-weight:700;color:var(--v4-muted)}
html.v4 #meowOnboarding .v4ob-mday b{font-size:13px;line-height:18px;font-weight:700;color:var(--v4-sub)}
html.v4 #meowOnboarding .v4ob-mday.early{background:var(--v4-early-bg);border-color:var(--v4-early-line)}html.v4 #meowOnboarding .v4ob-mday.early b{color:var(--v4-early-ink)}
html.v4 #meowOnboarding .v4ob-mday.middle{background:var(--v4-middle-bg);border-color:var(--v4-middle-line)}html.v4 #meowOnboarding .v4ob-mday.middle b{color:var(--v4-middle-ink)}
html.v4 #meowOnboarding .v4ob-mday.night{background:var(--v4-night-bg);border-color:var(--v4-night-line)}html.v4 #meowOnboarding .v4ob-mday.night b{color:var(--v4-night-ink)}
html.v4 #meowOnboarding .v4ob-mday.off{background:var(--v4-off-bg);border-color:var(--v4-off-line)}html.v4 #meowOnboarding .v4ob-mday.off b{color:var(--v4-off-ink)}

/* Summary rows (到職試算, 設定完成) */
html.v4 #meowOnboarding .v4-card.v4ob-sum{padding:12px;gap:0}
html.v4 #meowOnboarding .v4ob-sum-row{position:relative;display:flex;align-items:center;gap:8px;padding:9px 0;min-width:0}
html.v4 #meowOnboarding .v4ob-sum-row+.v4ob-sum-row::before{content:"";position:absolute;left:0;right:0;top:-.5px;border-top:1px dashed var(--v4-tile-line)}
html.v4 #meowOnboarding .v4ob-sum-row span{flex:1;min-width:0;font-size:14px;line-height:20px;font-weight:700;color:var(--v4-sub)}
html.v4 #meowOnboarding .v4ob-sum-row b{flex:none;max-width:62%;font-size:16px;line-height:22px;font-weight:900;color:var(--v4-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.v4 #meowOnboarding .v4ob-sum.tight .v4ob-sum-row{padding:7px 0}
html.v4 #meowOnboarding .v4ob-sum.tight .v4ob-sum-row b{font-size:15px;line-height:21px}

/* 輪班鬧鐘 */
html.v4 #meowOnboarding .v4ob-preview{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--v4-tile-line);background:var(--v4-field)}
html.v4 #meowOnboarding .v4ob-preview>span:first-child{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
html.v4 #meowOnboarding .v4ob-preview small{font-size:12px;line-height:16px;font-weight:700;color:var(--v4-muted)}
html.v4 #meowOnboarding .v4ob-preview b{font-size:22px;line-height:28px;font-weight:900;color:var(--v4-ink);white-space:nowrap}
html.v4 #meowOnboarding .v4ob-preview b.v4ob-off{font-size:17px;color:var(--v4-muted)}
html.v4 #meowOnboarding .v4-card.v4ob-eve{padding:12px}
html.v4 #meowOnboarding .v4ob-eve-row{display:flex;align-items:center;gap:12px;min-width:0}
html.v4 #meowOnboarding .v4ob-eve-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
html.v4 #meowOnboarding .v4ob-eve-text b{font-size:14px;line-height:20px;font-weight:700;color:var(--v4-ink)}
html.v4 #meowOnboarding .v4ob-eve-text small{font-size:12px;line-height:17px;font-weight:400;color:var(--v4-muted)}

/* 備份: sign-in buttons */
html.v4 #meowOnboarding .v4ob-logins{gap:10px}
html.v4 #meowOnboarding .v4ob-login{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:50px;padding:0 16px;border-radius:14px;border:1.25px solid;
  box-shadow:0 2px 0 rgba(90,58,38,.14);font-size:16px;line-height:22px;font-weight:700;cursor:pointer;white-space:nowrap}
html.v4 #meowOnboarding .v4ob-login i{font-style:normal;font-size:17px;line-height:22px;font-weight:900}
html.v4 #meowOnboarding .v4ob-login .v4-ic{font-size:18px}
html.v4 #meowOnboarding .v4ob-login.apple{background:#1d1d1f;border-color:#1d1d1f;color:#fff}
html.v4 #meowOnboarding .v4ob-login.google{background:#fff;border-color:var(--v4-tile-line);color:var(--v4-ink)}
html.v4 #meowOnboarding .v4ob-login.google i{color:#4285f4}
html.v4 #meowOnboarding .v4ob-login.line{background:#06c755;border-color:#06c755;color:#fff}
html.v4 #meowOnboarding .v4ob-login:active{transform:translateY(1px)}
html.v4 #meowOnboarding .v4-btn.v4ob-guest{height:50px;border-radius:14px;font-size:16px;letter-spacing:.1em}
html.v4 #meowOnboarding .v4-btn.v4ob-guest::before{border-radius:10px}
html.v4 #meowOnboarding .v4ob-fine{margin:0;text-align:center;font-size:12px;line-height:16px;font-weight:500;color:var(--v4-muted)}