:root{
  --bg:#f2f2f7; --card:#fff; --ink:#1c1c1e; --sub:#8e8e93; --sep:#e5e5ea;
  --theme:#e5851c; --themeSoft:#fdeee0; --theme2:#f3ab5f;
  /* 紫（テーマ色）を「文字」に使うときの色。ダークでは明るい側に振り替える（下の .night 参照） */
  --accent:var(--theme);
  --good:#34c759; --warn:#ff9500; --bad:#8e8e93; --gold:#c9971b; --goldSoft:#f7edd2;
  --danger:#d24b4b; --dangerSoft:#fdecec;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:-webkit-fill-available}
html,body{height:100%}
body{margin:0;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;min-height:-webkit-fill-available;overscroll-behavior:none}
/* 高さの単位は**最後に書いたものが勝つ**。Android/Fold は dvh だとアドレスバーの出入りで
   ナビが切れたため svh を使う（2026-08-20 小泉指摘）。iPhone は直下で上書きする。 */
#app{max-width:520px;margin:0 auto;height:100vh;height:-webkit-fill-available;height:100dvh;height:100svh;display:flex;flex-direction:column;overflow:hidden}
/* iPhone Safari/PWA では vh 系が画面の下端より短くなることがある。
   表示領域の上下端に固定し、下部ナビを確実に画面下端へ置く。
   Android/Fold の svh は切れ防止のため維持する。 */
@media (max-width:600px) and (pointer:coarse){
  @supports (-webkit-touch-callout:none){
    #app{position:fixed;inset:0;width:100%;height:auto}
  }
}
/* 店長・管理者は事務所PCでも使うため、広い画面だけ一覧を横に並べる。
   1000px未満には一切効かせず、アルバイト画面とスマホの見え方を変えない。 */
/* 広い表示（店長・管理者のみ／2026-08-11）に、**折りたたみ端末を開いた状態**を足す（2026-08-20）。
   Galaxy Z Fold の実測CSS viewport は **752×650px**＝1000pxに届かず、開いても細い帯のままだった。
   判定の主役は **縦横比**：iPadの縦向きは必ず 0.750以下（4:3の810×1080＝0.750／Air 0.695／mini 0.657）なので、
   0.76 を一線にすれば幅の下限を700pxまで下げてもiPad縦を巻き込まない（Fold実機は 752÷650＝約1.15）。
   下限は 640×440 まで下げた（ブラウザのUIが高さを食っても効くように）。横向きスマホは高さ400px台なので外れる。
   **1000px側の指定値は一切変えていない。** */
/* 折りたたみを開いた時は**アルバイト画面も**幅を活かす（2026-08-20 小泉指摘）。
   PC（min-width:1000px）は対象に入れない＝2026-08-11の決定「アルバイト画面はPCで広げない（現場はスマホ）」は維持。
   店長・管理者は下の 1180px の指定が勝つ（セレクタが強い）。 */
@media (min-width:640px) and (max-width:999px) and (min-height:440px) and (min-aspect-ratio:76/100),
       (min-width:640px) and (max-width:999px) and (min-height:440px) and (min-aspect-ratio:0.76){
  #app{max-width:760px}
}
@media (min-width:1000px),
       (min-width:640px) and (min-height:440px) and (min-aspect-ratio:76/100),
       (min-width:640px) and (min-height:440px) and (min-aspect-ratio:0.76){
  .manager-page #app,.admin-page #app{max-width:1180px}
  .manager-page #mgrbody>.group:has(>.stfrow),
  .manager-page #mgrbody>.group:has(>.riskrow),
  .admin-page .adminstores,
  .admin-page #adm-roster~.group:has(>.rosterrow){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;background:transparent;overflow:visible}
  .manager-page #mgrbody>.group:has(>.stfrow)>.row,
  .manager-page #mgrbody>.group:has(>.riskrow)>.row,
  .admin-page .adminstores>.row,
  .admin-page #adm-roster~.group:has(>.rosterrow)>.row{background:var(--card);border:0;border-radius:14px}
  /* 今日・前日のカードは内容ごとに独立して読める。高さは内容に合わせ、無理に揃えない。 */
  .manager-page #mgrbody>.focuscard{display:inline-block;vertical-align:top;width:calc(50% - 14px);margin-left:7px;margin-right:7px}
}
.apphdr{flex-shrink:0;background:var(--bg);border-bottom:.5px solid var(--sep);padding:14px 20px 10px;padding-top:calc(14px + env(safe-area-inset-top))}
.apphdr .toprow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.apphdr .hdleft{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
.apphdr .bigdate{font-size:20px;font-weight:800;letter-spacing:-.3px}
.apphdr .hdright{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.apphdr .biglv{font-size:16px;font-weight:800;color:#fff;background:var(--theme);padding:5px 15px;border-radius:22px}
/* 経験値＝ポジションチップの右（2026-08-06 小泉指示）。上段に置くと日付を押し出して切れるため、
   空いているこの行へ移して大きく見せる */
.apphdr .hdxp{margin-left:auto;font-size:28px;font-weight:900;color:var(--theme);letter-spacing:-.8px;
  line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.apphdr .hdxp small{font-size:13px;font-weight:800;opacity:.75;margin-left:2px;letter-spacing:0}
.apphdr .who{font-size:12.5px;color:var(--sub);font-weight:600;margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.poschip{color:var(--theme);font-weight:800;cursor:pointer;background:var(--themeSoft);padding:2px 9px;border-radius:9px}
.lvtoggle{display:flex;justify-content:space-between;align-items:center;width:calc(100% - 28px);margin:16px 14px 8px;padding:15px 18px;border:none;border-radius:14px;background:var(--theme);color:#fff;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 3px 10px rgba(229,133,28,.28)}
.lvtoggle span{font-size:13px;font-weight:700;opacity:.92}
.lvrow{display:flex;justify-content:space-between;align-items:center;gap:12px}
.lvleft{flex:1;min-width:0;text-align:left}
.lvleft .t{font-weight:800;font-size:15px}
.lvright{flex-shrink:0;text-align:right}
.lvright .lvwage{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.lvcur{background:var(--themeSoft)}
/* S帯＝濃いグレーの網掛けで隠す（見えるか見えないか） */
.lvrow.lvs{position:relative;background:#4c4c54;overflow:hidden}
.lvrow.lvs .t,.lvrow.lvs .s,.lvrow.lvs .lvwage{color:#8a8a94;font-weight:800}
.lvrow.lvs::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(40,40,46,.62) 0 5px,rgba(70,70,80,.30) 5px 10px)}
.apphdr .ava{width:46px;height:46px;border-radius:50%;background:var(--themeSoft);display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden;flex-shrink:0;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.12)}
.apphdr .ava img{width:100%;height:100%;object-fit:cover}
/* Androidはスクロールバーが常時表示され、画面に縦線が出ているように見える（iOSはオーバーレイなので消える）。
   スクロールそのものは効いたまま、線だけ消す（2026-08-20 小泉の実機指摘）。 */
.scroll{flex:1;overflow-y:auto;padding-bottom:24px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.scroll::-webkit-scrollbar{width:0;height:0;display:none}
/* 同じ現象が起きる長い一覧。**モーダルの中は残す**＝スクロールできると気づけなくなるため
   （.modal .box / .policybody / .dlist / .bulklist はそのまま）。 */
.qascroll,.chatlog{scrollbar-width:none}
.qascroll::-webkit-scrollbar,.chatlog::-webkit-scrollbar{width:0;height:0;display:none}
/* 下部ナビの高さ：padding-bottom は env(safe-area-inset-bottom) だけでホームバーを避ける。
   ここに固定値34pxを足すと余白が二重になり、iPhoneで約120pxまで伸びていた（2026-07-31 修正）。 */
/* ⚠️ **下のバーはできるだけ下げる**（2026-09-19 小泉「下はギリギリまで下げて欲しい メニューバーを」）。
   iPadは縦が足りないので、バーの上下の余白と、ホームバー（画面のいちばん下の線）を避けるための
   余白を詰める。⚠️ ゼロにはしない＝ホームバーが文字に重なると押しづらくなるため、
   端末が申告する安全域から12px引いた分だけ残す（iPad 20px → 8px／iPhone 34px → 22px）。 */
.nav{flex-shrink:0;background:rgba(255,255,255,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:.5px solid rgba(0,0,0,.1);display:flex;padding:3px 8px max(calc(env(safe-area-inset-bottom,0px) - 12px),3px);z-index:10}
@media (hover:hover) and (pointer:fine){ .nav{padding-bottom:2px} }
/* 下の余白は .nav でなく各項目に持たせる＝バーの高さは変えずにタップ範囲を保つ */
.nav div{flex:1;text-align:center;font-size:10px;line-height:1.2;color:var(--sub);font-weight:600;cursor:pointer;position:relative;padding-bottom:3px}
.nav .navbadge{position:absolute;top:-3px;right:calc(50% - 24px);background:#d24b4b;color:#fff;font-size:9px;font-weight:800;min-width:15px;height:15px;line-height:15px;border-radius:8px;text-align:center;padding:0 3px}
.nav div .i{font-size:22px;line-height:1.15;display:block;margin-bottom:0;opacity:.45;filter:grayscale(1)}
.nav div.on{color:var(--theme)} .nav div.on .i{opacity:1;filter:none}
.hdr{padding:18px 20px 6px}
.hdr .date{font-size:13px;color:var(--sub);font-weight:600}
.hdr .title{font-size:28px;font-weight:800;letter-spacing:-.5px;display:flex;justify-content:space-between;align-items:center}
.lv-pill{font-size:13px;font-weight:800;color:#fff;background:var(--theme);padding:5px 13px;border-radius:20px}
.sect{font-size:12.5px;color:var(--sub);font-weight:700;margin:20px 20px 7px;letter-spacing:.2px}
.sect .r{float:right;font-weight:600}
.group{background:var(--card);border-radius:14px;margin:0 14px;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:52px;border-bottom:.5px solid var(--sep)}
.row:last-child{border-bottom:none}
.row .tx{flex:1;min-width:0}
.row .tx .t{font-size:14.5px;font-weight:600;line-height:1.45}
.row .tx .s{font-size:12px;color:var(--sub);margin-top:2px;line-height:1.5}
.star{color:var(--gold);font-weight:800}
.starbadge{font-size:10.5px;font-weight:800;color:var(--gold);background:var(--goldSoft);padding:2px 8px;border-radius:7px;white-space:nowrap;text-align:center}
.starmust{color:var(--gold);font-size:18px;font-weight:800;line-height:1}
.homeright{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.coach{margin:12px 14px 0;background:linear-gradient(135deg,var(--theme),var(--theme2));border-radius:16px;padding:15px 17px;color:#fff}
.coach .chead{display:flex;align-items:center;justify-content:space-between;gap:7px;font-size:12px;font-weight:700;opacity:.95}
.coach .msg{font-size:15.5px;font-weight:700;line-height:1.6;margin-top:6px}
.coach .coachmode{background:rgba(255,255,255,.22);color:#fff;border:0;border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:800;cursor:pointer;letter-spacing:.02em}
.coach .coachmode:active{background:rgba(255,255,255,.34)}
.coach .coachwait{opacity:.85;font-weight:600}
/* 今日の一言への2択リアクション（👍/🤔）。コーチカード内＝押す対象のすぐ下に置く */
.coach .crxrow{display:flex;align-items:center;gap:7px;margin-top:11px}
.coach .crx{background:rgba(255,255,255,.20);color:#fff;border:0;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800;cursor:pointer;letter-spacing:.02em;white-space:nowrap}
.coach .crx:active{background:rgba(255,255,255,.34)}
.coach .crx.on{background:#fff;color:#20211d}
.coach .crxthx{font-size:11px;font-weight:700;opacity:.85}
/* 「続いてますか？」＝合格済み必修の再確認。通常の白カードと同じ見た目に合わせる */
.themecard{margin:12px 14px 0;background:var(--card);border:1px solid var(--sep);border-radius:14px;padding:14px 16px}
.themecard .thd{font-size:14px;font-weight:900;color:var(--theme);letter-spacing:.02em}
.themecard .tbody{font-size:14.5px;font-weight:700;line-height:1.6;margin-top:6px;color:var(--ink);text-wrap:pretty}
.themecard .tdone{font-size:12.5px;font-weight:600;color:var(--sub);margin-top:5px}
.themecard .themebtn{margin-top:11px;text-wrap:balance}
.themecard .twait{margin-top:10px;font-size:13px;font-weight:800;color:var(--theme);background:var(--themeSoft);border-radius:10px;padding:9px 11px;text-align:center;line-height:1.55}
.themecard .tfoot{font-size:11.5px;color:var(--sub);margin-top:8px;line-height:1.5}
.renewtag{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:800;color:var(--theme);background:var(--themeSoft);border-radius:7px;padding:1px 7px;vertical-align:middle}
/* 挑戦中に「できたら＝到達基準」を見せる（本人の今日タブ・(d)①） */
.rowgoal{margin-top:4px;color:var(--sub);line-height:1.5}
/* 停滞バッジ＝◎が伸びない子の検知（店長スタッフ一覧・(d)③） */
.stallbadge{display:inline-block;font-size:10.5px;font-weight:800;color:#8a6d00;background:#fff4d6;border-radius:8px;padding:2px 7px;white-space:nowrap}
/* みんなの今日（チーム可視化・今日タブ下部） */
.teamrow .tbchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tbchip{display:inline-block;font-size:12px;font-weight:700;color:var(--theme);background:var(--themeSoft);border-radius:9px;padding:3px 9px;line-height:1.4}
.tbnone{font-size:12px;color:var(--sub)}
/* 🚩 気にかけたい子（離職のサイン・店長画面・③） */
.riskrow{border-left:3px solid #e5534b;background:#fdecec}
.riskrow .t{color:#c0392b}
/* まとめて認定の確認（②認定の質を守る摩擦） */
.bulklist{margin:10px 0;padding:0 0 0 20px;max-height:180px;overflow:auto;font-size:13.5px;color:var(--ink);line-height:1.7;text-align:left}
.bulklist li{margin:2px 0}
.bulkwarn{margin:8px 0;font-size:12.5px;font-weight:700;color:#c0392b;background:#fdecec;border-radius:9px;padding:8px 10px;line-height:1.55;text-align:center}
.bulkwarn.up{color:var(--theme);background:var(--themeSoft)}
.bulknote{font-size:12px;color:var(--sub);line-height:1.6;margin-top:6px;text-align:left}
.cmwrap{display:flex;flex-direction:column;gap:10px}
.cmtitle{font-size:17px;font-weight:800}
.cmsub{font-size:12.5px;color:var(--sub);margin:-4px 0 4px}
.cmcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;border:2px solid var(--line);border-radius:14px;padding:13px;cursor:pointer;background:var(--card)}
.cmcard.on{border-color:var(--theme);background:color-mix(in srgb,var(--theme) 10%,var(--card))}
.cmcard .cmemoji{font-size:26px;line-height:1}
.cmcard .cmlabel{font-size:15px;font-weight:800}
.cmcard .cmdesc{font-size:12px;color:var(--sub);margin-top:2px}
.cmclose{margin-top:2px}
.tap{display:flex;gap:7px}
.tb{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--sep);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--sub);background:#fff;font-weight:700;cursor:pointer}
.tb.dm.on{background:var(--theme);border-color:var(--theme);color:#fff}
.tb.o.on{background:#b8b8bf;border-color:#b8b8bf;color:#fff}
.tb.x.on{background:#6b7a88;border-color:#6b7a88;color:#fff}
.gauge{letter-spacing:2px;font-size:11px}
.xpbar{height:14px;border-radius:99px;background:#e4e4e9;overflow:hidden;display:flex}
.xpbar .st{background:var(--gold)} .xpbar .no{background:var(--theme)}
.nextcard{margin:12px 14px 0;background:var(--card);border-radius:16px;padding:16px 18px}
.nexthd{font-size:14px;font-weight:700;color:var(--sub);margin-bottom:12px}
.nexthd b{color:var(--ink);font-size:18px;margin:0 2px}
.nextcard .xpbar{margin-bottom:5px}
.xpmini{font-size:11px;color:var(--sub);margin-bottom:6px}
.reqrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--sep);font-size:14px}
.reqrow span{color:var(--sub);font-weight:600}
.reqrow b{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--theme)}
.reqrow b.reqdone{color:var(--good)}
.btn{display:block;width:calc(100% - 28px);margin:16px 14px 6px;padding:15px;border:none;border-radius:14px;background:var(--theme);color:#fff;font-weight:700;font-size:16px;cursor:pointer}
.btn:disabled{background:#c9c9cf}
.btn.ghost{background:var(--themeSoft);color:var(--theme)}
/* ブランドロゴ。白背景JPEGを background-blend-mode で「その要素の背景色」に溶かす。
   mix-blend-mode と違い背後(スタッキング/スクロール層)に依存しないので iOS Safari でも確実。 */
.authlogo{display:flex;justify-content:center;margin:30px 0 2px}
.authswitch{text-align:center;font-size:12.5px;color:var(--sub);font-weight:600;margin:16px 0 0}
.pagelogo{display:flex;justify-content:center;padding:22px 0 30px}
.logomark{background-image:url(img/hoppin-logo-01-transparent.png);background-position:center;background-size:contain;background-repeat:no-repeat}   /* 2026-10-26 小泉：新ロゴ（横組み・ピクセル調）に差し替え。透過PNGなので blend は不要 */
/* 中間グレー背景では base の background-blend-mode:multiply がそのまま効く（白背景→--bgに一致で箱消え・ロゴは暗色で残る）。旧near-black用のinvert上書きは廃止。 */
.authlogo .logomark{width:236px;height:48px}
.pagelogo .logomark{width:118px;height:24px;opacity:.6}
.badge{font-size:10.5px;font-weight:700;padding:2.5px 8px;border-radius:8px;flex-shrink:0}
.b-ok{background:#e6f8ec;color:var(--good)} .b-wait{background:#fff4e0;color:var(--warn)}
.b-done{background:#e6f8ec;color:var(--good)} .b-star{background:var(--goldSoft);color:var(--gold)}
.b-jibun{background:#fdeee0;color:var(--theme)}
.b-coach{background:#e6f8ec;color:var(--good)}
.sect-coach{color:var(--good)}
.sect.sect-lg{font-size:16px;color:var(--ink);font-weight:800;letter-spacing:0}
.sect.sect-coach.sect-lg{color:var(--good)}
.row.rowc{background:#f2faf4;border-left:3px solid var(--good)}
.row.rowready{background:#eafaef;box-shadow:inset 0 0 0 2px var(--good)}
.readytag{font-size:10.5px;font-weight:800;color:#fff;background:var(--good);padding:2px 8px;border-radius:8px;vertical-align:middle}
.expchips{display:inline-flex;gap:5px;vertical-align:middle;margin-left:2px}
.expchip{font-size:11px;font-weight:800;padding:2px 7px;border-radius:7px;letter-spacing:.2px;font-variant-numeric:tabular-nums}
.xp-dm{background:var(--themeSoft);color:var(--theme)}
.xp-ck{background:var(--goldSoft);color:var(--gold)}
.foot{font-size:12px;color:var(--sub);margin:8px 20px 0;line-height:1.6}
.stairsteps{display:flex;justify-content:center;gap:7px;margin:14px 0 2px}
.stairsteps b{width:30px;height:30px;border-radius:50%;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;background:#d6d6db;color:#fff}
.stairsteps b.done{background:var(--good);color:#fff} .stairsteps b.cur{background:var(--theme);color:#fff;transform:scale(1.18)}
.bigcard{margin:8px 14px 0;background:var(--card);border-radius:16px;padding:20px;text-align:center}
.bigcard .lvbig{width:92px;height:92px;border-radius:50%;background:var(--theme);color:#fff;font-size:30px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;box-shadow:0 6px 16px rgba(0,0,0,.14)}
.keyrow{display:flex;justify-content:center;gap:16px;margin-top:10px;font-size:13px;font-weight:700}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:30;align-items:center;justify-content:center;padding:16px 10px}
.modal.open{display:flex}
.modal .box{background:#fff;width:100%;max-width:560px;border-radius:20px;padding:24px 18px;text-align:center;max-height:100%;overflow-y:auto}
.modal.open .box{animation:boxin .3s ease-out both}
@keyframes boxin{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:none}}
.modal .box h3{margin:8px 0 6px;font-size:18px}
/* レベルアップ演出 */
.lvup{text-align:center;position:relative;padding:6px 2px 2px}
.lvup-burst{position:absolute;top:56px;left:50%;width:230px;height:230px;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle, var(--c) 0%, transparent 60%);animation:burst .7s ease-out both}
@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}55%{opacity:1}100%{opacity:.75;transform:translate(-50%,-50%) scale(1.15)}}
.lvup-badge{position:relative;width:100px;height:100px;border-radius:50%;color:#fff;font-size:35px;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin:4px auto 12px;box-shadow:0 10px 26px rgba(0,0,0,.22);
  animation:badgepop .6s cubic-bezier(.2,1.5,.4,1) both}
@keyframes badgepop{0%{transform:scale(0) rotate(-30deg);opacity:0}70%{transform:scale(1.18) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.lvup-title{font-size:27px;font-weight:900;letter-spacing:1.5px;animation:titlein .5s .15s both}
@keyframes titlein{0%{opacity:0;transform:translateY(12px) scale(.9)}100%{opacity:1;transform:none}}
.lvup-stage{font-size:16px;font-weight:800;margin-top:6px;animation:titlein .5s .25s both}
.lvup-wage{font-size:13.5px;color:var(--sub);margin-top:8px}
.lvup-wage b{color:var(--ink);font-size:18px}
.lvup-eff{font-size:12px;color:var(--sub);font-weight:600}
.lvup-ok{margin-top:18px;width:100%;padding:14px;border:none;border-radius:12px;color:#fff;font-weight:800;font-size:16px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.lvup-burst,.lvup-badge,.lvup-title,.lvup-stage,.modal.open .box{animation:none}}
.modal .box p{font-size:13px;color:var(--sub);line-height:1.6;margin:0}
.mbtns{display:flex;gap:10px;margin-top:16px}
.mbtns button{flex:1;padding:12px;border:none;border-radius:12px;font-weight:700;font-size:15px;cursor:pointer}
.mbtns .sec{background:#e9e9ec;color:var(--ink)} .mbtns .pri{background:var(--theme);color:#fff}
.seg{display:flex;background:#e9e9ec;border-radius:9px;padding:2px;margin:12px 14px 0}
.seg div{flex:1;text-align:center;padding:7px;border-radius:7px;font-size:13px;font-weight:700;cursor:pointer}
.seg div.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.treecat{margin:4px 8px 10px}
.treecat .group{margin:0}
.treecat .row{padding-left:14px;padding-right:12px}
.treehead{display:flex;justify-content:space-between;align-items:center;padding:10px 6px;font-size:14px;font-weight:800;cursor:pointer}
.treehead small{color:var(--sub);font-weight:600}
.addbtn{font-size:12px;font-weight:700;color:var(--theme);background:var(--themeSoft);border:none;border-radius:9px;padding:6px 12px;cursor:pointer;flex-shrink:0}
.addbtn:disabled{opacity:.4}
/* スキルツリー右側の操作・状態を同じ大きさに統一 */
.rbox{width:104px;flex-shrink:0;display:flex;flex-direction:column;gap:5px}
.rbox .addbtn{width:100%;padding:11px 0;font-size:13px;text-align:center}
.rbox .addbtn.limit{background:#ececef;color:var(--sub);cursor:default}
.rbox .badge{width:100%;text-align:center;padding:11px 0;font-size:12.5px;border-radius:9px}
.setuprow{margin:10px 14px}
/* ログイン欄を<form>で包んだ（ブラウザにパスワードを覚えさせるため）。
   display:contents＝formの箱を作らない＝見た目は包む前と同じ（2026-09-19） */
.authform{display:contents}
input.txt,select.sel{width:100%;padding:13px;border:1.5px solid var(--sep);border-radius:12px;font-size:16px;font-family:inherit;background:#fff;color:var(--ink)}
.testbar{margin:10px 14px 0;background:#fdf3d6;border:1px solid #e8cf7a;border-radius:12px;padding:10px 14px;font-size:12px;font-weight:700;color:#8a6d15;line-height:1.5}
.testbar span{color:var(--bad);text-decoration:underline;cursor:pointer;margin-left:2px}
.tb.testcert{background:#fff3d6;border-color:var(--gold);color:var(--gold);font-size:17px}
.rbox .testcertbtn{background:var(--goldSoft);color:var(--gold);margin-top:5px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:104px;background:rgba(28,28,30,.94);color:#fff;font-size:13.5px;font-weight:700;padding:11px 18px;border-radius:99px;z-index:40;opacity:0;transition:opacity .25s;pointer-events:none;max-width:86%;text-align:center}
.toast.show{opacity:1}

/* ===== 店長画面（manager.html） ===== */
.mgrtabs{display:flex;gap:6px;padding:12px 14px 4px;position:sticky;top:0;background:var(--bg);z-index:5}
.mgrtab{flex:1;padding:10px 4px;border:none;border-radius:12px;background:var(--card);color:var(--sub);font-weight:800;font-size:13.5px;cursor:pointer;position:relative}
.mgrtab.on{background:var(--theme);color:#fff}
.mgrtabn{display:inline-block;min-width:17px;margin-left:5px;padding:0 5px;font-size:11px;line-height:17px;border-radius:9px;background:var(--bad);color:#fff;vertical-align:top}
.mgrtab.on .mgrtabn{background:rgba(255,255,255,.28)}
/* もう一歩／気づきメモ モーダル（左寄せ） */
.modal .box .omhead{font-size:17px;font-weight:800;text-align:center}
.omsub{font-size:13px;color:var(--sub);text-align:center;margin:3px 0 14px;font-weight:600}
/* 日本語の改行を文節で折る（2026-09-24 小泉「改行位置が美しくない」）。
   auto-phrase が効く端末はそれに任せ、効かない端末でも .nw の塊の切れ目でしか折れない。
   ⚠️ 1つの .nw が1行に収まらないと中で折れる＝塊は短く（目安12文字以内）。 */
.jp{word-break:auto-phrase;line-break:strict}
.jp .nw{display:inline-block}
.omlabel{font-size:12px;font-weight:700;color:var(--sub);text-align:left;margin:12px 0 7px}
.omchoices{display:flex;flex-direction:column;gap:7px}
.omchoice{text-align:left;padding:11px 13px;border:1.5px solid var(--sep);border-radius:11px;background:#fff;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.omchoice.on{border-color:var(--theme);background:var(--themeSoft);color:var(--theme)}
.omnote{width:100%;box-sizing:border-box;border:1.5px solid var(--sep);border-radius:11px;padding:10px 12px;font-size:16px;font-family:inherit;resize:vertical;min-height:52px}
.omfoot{font-size:11.5px;color:var(--sub);text-align:left;margin-top:10px;line-height:1.5}
.ombtns{display:flex;gap:8px;margin-top:16px}
.ombtns .btn,.ombtns .pri{flex:1;margin:0}
.ombtns .pri{padding:14px;border:none;border-radius:13px;background:var(--theme);color:#fff;font-weight:800;font-size:15px;cursor:pointer}
.ombtns .pri:disabled{background:#c9c9cf}
.chatin .pri{margin-top:8px;width:100%;padding:12px;border:none;border-radius:12px;background:var(--theme);color:#fff;font-weight:800;font-size:14px;cursor:pointer}
/* 変化フィード */
.feednote{font-size:12.5px;color:var(--sub);margin:6px 18px 12px;line-height:1.6}
.feednote b{color:var(--ink)}
.feedcard{background:var(--card);border-radius:16px;margin:0 14px 10px;padding:15px 16px}
.feedtop{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.feedname{font-size:15.5px;font-weight:800}
.feedpos{font-size:11px;font-weight:700;color:var(--sub);background:var(--bg);padding:2px 8px;border-radius:8px;margin-left:8px}
.feedchips{display:flex;gap:5px;flex-wrap:wrap}
.sigchip{font-size:11px;font-weight:800;color:#fff;background:var(--sc);padding:3px 10px;border-radius:9px}
.feedev{margin:11px 0 12px}
.everow{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);padding:3px 0;line-height:1.5}
.evdot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.feedacts{display:flex;gap:8px;flex-wrap:wrap}
/* ボタンが4つでも文字の途中で改行しない：2列に折り返す＋ラベルは1行のまま（2026-08-02 小泉指摘） */
.feedacts .addbtn{flex:1 1 45%;padding:10px 0;text-align:center;font-size:11.5px;white-space:nowrap}
/* 開発者へ報告の種別チップ：「不具合・エラー」がボタン内で折れないように */
#fbKinds .btn{flex:0 1 auto;width:auto;margin:0;padding:10px 12px;font-size:13px;white-space:nowrap}
/* 気づきメモ一覧 */
.memosign{font-size:10.5px;font-weight:800;color:var(--theme);background:var(--themeSoft);padding:2px 8px;border-radius:7px;margin-left:4px}
.memowhen{font-size:11px;color:var(--sub);font-weight:700;flex-shrink:0}
/* 育成チャット */
.chatlog{max-height:46vh;overflow-y:auto;text-align:left;margin:4px 0;padding:4px 2px;display:flex;flex-direction:column;gap:8px}
.chatempty{font-size:12.5px;color:var(--sub);text-align:center;padding:24px 8px;line-height:1.6}
.bubble{max-width:82%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.bubble .bwho{font-size:10.5px;font-weight:700;opacity:.7;margin-bottom:3px}
.bubble.manager{align-self:flex-end;background:var(--theme);color:#fff;border-bottom-right-radius:5px}
.bubble.coach{align-self:flex-start;background:#eef0f3;color:var(--ink);border-bottom-left-radius:5px}
.pyoko-reply{display:flex;align-items:flex-start;gap:7px;align-self:flex-start;width:100%;min-width:0}
.pyoko-reply-face{width:52px;height:52px;flex:none;border:0;border-radius:50%;background:transparent;object-fit:contain}
.pyoko-reply .bubble.coach{margin:0;max-width:calc(100% - 59px)}
.bubble.thinking{opacity:.65;font-style:italic;animation:coachpulse 1.1s ease-in-out infinite}
.bubble.me{align-self:flex-end;background:var(--theme);color:#fff;border-bottom-right-radius:5px}
/* コーチタブ（質問チャット） */
.coach.coachtop .qachips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.coach.coachtop .qachip{background:rgba(255,255,255,.92);color:#20211d;border:0;border-radius:999px;padding:7px 12px;font-size:12.5px;font-weight:700;cursor:pointer;text-align:left;line-height:1.35}
.coach.coachtop .qachip:active{background:#fff}
.qacta{margin:10px 14px 0;background:var(--card);border:1.5px solid var(--theme);border-radius:13px;padding:11px 14px;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;line-height:1.5}
.qacta:active{background:color-mix(in srgb,var(--theme) 10%,var(--card))}
.coachtab{display:flex;flex-direction:column;height:100%}
.coachhdr{display:flex;align-items:center;gap:10px;padding:10px 16px 6px;flex-shrink:0}
.coachhdr .title{font-size:26px;font-weight:800;letter-spacing:-.01em;flex:1}
.coachhdr .coachmode{background:var(--theme);color:#fff;border:0;border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:800;cursor:pointer}
.coachhdr .qareset{font-size:12px;color:var(--sub);text-decoration:underline;cursor:pointer}
.qascroll{flex:1;min-height:0;overflow-y:auto}
.qalog{margin:12px 14px 0;display:flex;flex-direction:column;gap:8px;text-align:left}
.qabar{display:flex;gap:8px;margin:10px 14px 14px;align-items:flex-end;flex-shrink:0}
.qabar textarea{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:12px;padding:9px 11px;font-size:16px;font-family:inherit;line-height:1.5;resize:none;background:var(--card);color:var(--ink);max-height:120px}
.qasend{border:0;border-radius:12px;padding:0 16px;height:42px;background:var(--theme);color:#fff;font-weight:800;font-size:14px;cursor:pointer;white-space:nowrap}
@keyframes coachpulse{0%,100%{opacity:.45}50%{opacity:.85}}
.chatin{margin-top:8px}
.chathdr{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
.chathdr .omhead{text-align:left}
.policylink{text-align:center;margin:12px 0 2px;flex-shrink:0}
.policylink span{font-size:11px;color:var(--sub);text-decoration:underline;cursor:pointer}
.chatfoot{text-align:center;margin:12px 0 2px;flex-shrink:0;font-size:11px;color:var(--sub);display:flex;justify-content:center;align-items:center;gap:5px;flex-wrap:wrap}
.chatfoot .pwrby{font-weight:600;color:var(--sub)}
.chatfoot .claudelogo{height:14px;width:auto;display:inline-block;vertical-align:middle;flex-shrink:0}
.chatfoot .fdot{opacity:.6;margin:0 1px}
.chatfoot .plink{text-decoration:underline;cursor:pointer}
.storegoal{font-size:11.5px;color:var(--sub);text-align:center;margin:2px 0 0;padding-top:6px;border-top:.5px solid var(--sep)}
.storegoal b{color:var(--ink)}
.secttoggle{font-size:12px;font-weight:700;color:var(--theme)}
/* 育成方針カード（変化タブ・本人非公開） */
.dirbox{border:1.5px solid var(--themeSoft);background:color-mix(in srgb,var(--theme) 7%,var(--card));border-radius:12px;margin:12px 0 4px;padding:11px 13px}
.dirhd{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--ink)}
.diredit{font-size:12px;color:var(--theme);font-weight:800;cursor:pointer;white-space:nowrap}
.dirbody{font-size:13.5px;line-height:1.6;margin-top:6px;color:var(--ink)}
.dirempty{font-size:12.5px;color:var(--sub);line-height:1.6;margin-top:6px}
.dirset{display:inline-block;margin-top:8px;background:var(--theme);color:#fff;font-weight:800;font-size:12.5px;border-radius:9px;padding:7px 13px;cursor:pointer}
/* スキルツリー：習得済み（認定済み）の項目行を薄く色付け（未習得と区別） */
.row.rowdone{background:color-mix(in srgb,var(--good) 10%,var(--card))}
/* 育成チャット：方針に反映されない旨の注記 */
.chatnote{font-size:10.5px;color:var(--sub);text-align:center;margin:7px 0 0;line-height:1.5;flex-shrink:0}
/* 分析ダッシュボード：経験値の推移チャート */
.chartcard{background:var(--card);border-radius:14px;margin:0 14px;padding:14px 14px 8px}
.charttabs{display:flex;gap:6px;justify-content:flex-end;margin-bottom:6px}
.ctab{border:1.5px solid var(--sep);background:transparent;color:var(--sub);border-radius:999px;padding:4px 14px;font-size:12px;font-weight:800;cursor:pointer}
.ctab.on{background:var(--theme);border-color:var(--theme);color:#fff}
.chartkpi{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:2px 0 6px}
.chartkpi .ckv{font-size:26px;font-weight:900;color:var(--theme);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.chartkpi .ckl{font-size:12px;color:var(--sub);font-weight:700}
.chartkpi .ckrate{margin-left:auto;font-size:12px;font-weight:800;padding:3px 9px;border-radius:8px}
.chartkpi .ckrate.up{color:var(--good);background:color-mix(in srgb,var(--good) 14%,transparent)}
.chartkpi .ckrate.down{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}
.chartkpi .ckrate.flat{color:var(--sub)}
.chartsvg{width:100%;height:auto;display:block}
/* 入社と退職（管理者・選んだ月の店舗別） */
.hiretable{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:2px}
.hiretable th,.hiretable td{padding:9px 4px;text-align:center;border-bottom:.5px solid var(--sep)}
.hiretable thead th{font-size:11px;font-weight:800;color:var(--sub)}
.hiretable thead th:first-child,.hiretable td:first-child{text-align:left;padding-left:2px}
.hiretable th:first-child,.hiretable td:first-child{width:42%}   /* 店名は長いので広めに */
.hiretable tbody tr:last-child td{border-bottom:none}
.hiretable tfoot td{border-top:1.5px solid var(--sep);border-bottom:none;padding-top:10px}
.hiretable tfoot .hm{font-weight:800}
.hiretable .hm{font-size:13px;font-weight:700;line-height:1.35;word-break:break-word}
.hiretable .hn{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.hiretable .hnet{font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums}
.hiretable .hnet.up{color:var(--good)}
.hiretable .hnet.down{color:#e8890c}
.hiretable .zero{color:var(--sub);font-weight:600}
/* トレーナー機能（新人をアルバイトが教育・日単位） */
.trainerbar{display:flex;align-items:center;gap:9px;margin:12px 14px 0;padding:12px 13px;border-radius:14px;background:linear-gradient(135deg,var(--theme),var(--theme2));color:#fff;font-size:13.5px;font-weight:700;line-height:1.5;cursor:pointer}
.trainerbar .tbi{font-size:19px;flex-shrink:0}
.trainerbar b{font-weight:900}
.trainerbar .tbjump{margin-left:auto;font-size:10.5px;font-weight:800;background:rgba(255,255,255,.24);padding:3px 8px;border-radius:8px;white-space:nowrap}
.traineenote{display:flex;gap:10px;align-items:flex-start;background:var(--card);border-radius:14px;margin:12px 14px 0;padding:13px 15px}
.traineenote .tni{font-size:20px;flex-shrink:0}
.traineenote .tnt{font-size:14px;font-weight:800;line-height:1.5;display:block}
.traineenote .tns{font-size:11.5px;color:var(--sub);font-weight:600;margin-top:3px;line-height:1.55;display:block}
.traineecard{background:var(--card);border-radius:15px;margin:8px 14px 0;padding:14px 15px}
.tchd{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.tchd .tcname{font-size:16px;font-weight:900}
.tchd .tcstage{font-size:12px;color:var(--sub);font-weight:700}
.tcitem{border-top:.5px solid var(--sep);padding:10px 0 2px}
.tcitem:first-of-type{border-top:none;padding-top:0}
.tciname{font-size:14px;font-weight:800;line-height:1.45}
.tcdone{font-size:12.5px;color:var(--good);font-weight:700;margin-top:4px;line-height:1.55}
.tcprog{font-size:12px;color:var(--sub);font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
.tcempty{font-size:12.5px;color:var(--sub);line-height:1.6}
.focustrainer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:10px;border-top:.5px solid var(--sep);font-size:12.5px;color:var(--sub)}
.focustrainer b{color:var(--ink)}
.traineractions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.awardbtn{border:0;background:var(--theme);color:#fff;border-radius:10px;padding:7px 10px;font-size:11.5px;font-weight:800;cursor:pointer}
.trainerbonus{font-size:11.5px;font-weight:800;color:var(--good);white-space:nowrap}
.awardcancel{border:0;background:none;color:var(--sub);padding:6px 2px;font-size:11.5px;font-weight:700;text-decoration:underline;cursor:pointer}
.focusname{flex:1;min-width:0}
.focusymark{margin-left:auto;min-width:18px;text-align:center;font-size:13px;font-weight:900;flex-shrink:0}
.focusymark.good{color:var(--ink)}
.focusymark.mid{color:var(--sub)}
/* ✕は薄めない。この配色では --bad 自体がグレー（＝✕を責めない既存の作法）なので、
   さらに背景と混ぜると「記録なし（—）」と見分けがつかなくなる。読めることを優先する。 */
.focusymark.bad{color:var(--bad)}
.focusymark.none{color:var(--sep);font-weight:600}
.assignbtn{border:1.5px solid var(--sep);background:var(--card);border-radius:10px;padding:6px 12px;font-size:12.5px;font-weight:800;color:var(--ink);cursor:pointer;white-space:nowrap;flex-shrink:0}
@media (max-width:420px){
  .focustrainer{align-items:flex-start;flex-direction:column}
  .traineractions{width:100%;justify-content:flex-start}
  .awardbtn{flex:1}
}
.pickwrap{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.pickopt{display:flex;align-items:center;gap:8px;text-align:left;border:1.5px solid var(--sep);border-radius:11px;padding:11px 13px;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer}
.pickopt.on{border-color:var(--theme);background:var(--themeSoft);color:var(--theme)}
.viewasbar{margin:0 0 2px;padding:9px 16px;background:#2b6cb0;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.viewasbar b{font-weight:900}
.viewasbar span{margin-left:auto;background:#fff;color:#2b6cb0;padding:8px 16px;border-radius:999px;font-weight:900;font-size:14px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.25);white-space:nowrap;line-height:1}
/* 管理者：スマホ用 上部ジャンプメニュー（縦長対策・デスクトップは非表示） */
.adminnav{position:sticky;top:0;z-index:6;background:var(--bg);padding:8px 14px 6px;margin-bottom:2px}
.adminnav select{width:100%;box-sizing:border-box;padding:11px 12px;border:1.5px solid var(--sep);border-radius:11px;background:var(--card);color:var(--ink);font-size:15px;font-weight:700;font-family:inherit}
@media (min-width:700px){ .adminnav{display:none} }
.lamp{font-size:16px;flex-shrink:0;line-height:1}
.lamp.grn{color:#2e9b57}
.lamp.ylw{color:#e0a90a}
.lamp.red{color:#d24b4b}
.warnbadge{font-size:10.5px;font-weight:800;color:#a8560f;background:#fcecd9;padding:2px 8px;border-radius:7px;white-space:nowrap}
.charttabs.storechips{flex-wrap:wrap;gap:6px;margin-bottom:8px}
.storesub{font-size:11.5px;color:var(--sub);text-align:center;margin-top:8px;padding-top:8px;border-top:.5px solid var(--sep)}
.storesub b{color:var(--ink)}
/* ESアンケート */
.escard{display:flex;align-items:center;gap:10px;margin:12px 14px 0;padding:12px 14px;border-radius:14px;background:var(--themeSoft);border:1.5px solid var(--theme);cursor:pointer}
.escard.done{background:var(--card);border-color:var(--sep)}
.escard .esci{font-size:20px;flex-shrink:0}
.escard .esct{flex:1;min-width:0;display:flex;flex-direction:column}
.escard .esct b{font-size:13.5px;font-weight:800;color:var(--ink)}
.escard .essub{font-size:11px;color:var(--sub);font-weight:600;margin-top:2px;line-height:1.4}
.escard .escta{font-size:12.5px;font-weight:800;color:#fff;background:var(--theme);border-radius:9px;padding:6px 12px;white-space:nowrap;flex-shrink:0}
.escard.done .escta{background:transparent;color:var(--theme);text-decoration:underline;padding:6px 4px}
/* ⏳ 期限と「お店の進み具合」＝アンケートを後回しにさせないための2行（2026-08-27） */
.escard .eslimit{font-size:11px;font-weight:800;color:var(--theme);margin-top:4px;line-height:1.4}
.escard.esurg{border-color:var(--warn);background:var(--goldSoft)}
.escard.esurg .eslimit{color:var(--warn)}
.escard.esurg .escta{background:var(--warn)}
.esmodallimit{font-weight:800;color:var(--theme);margin-top:2px}
/* 店長・管理者のES集計に出す「あと何人・いつまで」。誰が未回答かは出さない */
.esnudge{margin:6px 0 0;font-size:11.5px;line-height:1.5;color:var(--sub);font-weight:600;
  background:var(--themeSoft);border-radius:9px;padding:7px 9px}
.esnudge.done{background:transparent;padding:6px 0 0}
/* 📮 店長・社員の月1アンケート：締切が近い時の強調 */
/* 📝 時給申請の注意喚起（労働条件通知書の合意も25日中・2026-08-27 小泉指示）。色は変数＝ダークでも読める */
/* 📋 年末採用目標：管理者画面の上の黄色いボタン1つ（イベント・2026-08-27 小泉指示）。
   色は変数＝ダークでも読める。文字はどちらでも濃い茶に固定（黄色の上に白は読めない） */
/* 📋 年末採用目標のまとめ：数字を列で揃える（縦に読める・2026-08-27 小泉指示） */
.rtwrap{overflow-x:auto;margin:12px 0 0}
.rttable{width:100%;border-collapse:collapse;font-size:13px;text-align:right}
.rttable th,.rttable td{padding:8px 6px;border-bottom:1px solid var(--sep);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.rttable thead th{font-size:11px;font-weight:700;color:var(--sub);line-height:1.3;border-bottom-width:1.5px}
.rttable tbody th,.rttable tfoot th{text-align:left;font-weight:700}
.rttable thead th:first-child{text-align:left}
.rttable .rtsum{font-weight:800}
.rttable tbody tr:last-child th,.rttable tbody tr:last-child td{border-bottom:none}
.rttable tfoot th,.rttable tfoot td{border-top:1.5px solid var(--sep);border-bottom:none;font-weight:800}
.rttable .rtyet td{color:var(--sub);font-weight:600;font-size:12px}
.rtnote{font-size:12px;color:var(--sub);text-align:left;margin-top:8px;line-height:1.5}
.recruitbtn{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:calc(100% - 28px);margin:14px 14px 4px;padding:13px 16px;border:none;border-radius:14px;
  background:var(--gold);color:#3a2a00;font-size:14px;font-weight:800;line-height:1.3;
  text-align:left;cursor:pointer}
.recruitbtn .rblimit{margin-left:8px;padding:1px 8px;border-radius:20px;font-size:11px;font-weight:800;
  background:rgba(0,0,0,.16);color:inherit}
.night .recruitbtn .rblimit{background:rgba(255,214,80,.22)}
.recruitbtn .rbnum{font-size:12.5px;font-weight:700;opacity:.85;white-space:nowrap}
.recruitbtn:active{transform:scale(.99)}
.night .recruitbtn{background:rgba(255,214,80,.18);color:#ffe08a;
  box-shadow:0 0 0 1px rgba(255,214,80,.36), 0 0 14px rgba(255,214,80,.30)}
.wagenote{margin-top:10px;padding:10px 12px;border-radius:8px;background:var(--goldSoft);border:1px solid var(--warn);text-align:left;line-height:1.6}
.coachbox.pulseurg{border-color:var(--warn)}
.coachbox.pulseurg .coachph .ph2{color:var(--warn);font-weight:800}
.esq{margin:14px 0 0;text-align:left}
.esqt{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.5;margin-bottom:7px}
.esopts{display:flex;gap:5px}
.esopt{flex:1;min-width:0;border:1.5px solid var(--sep);background:var(--card);border-radius:9px;padding:8px 2px;font-size:10.5px;font-weight:700;color:var(--sub);cursor:pointer;line-height:1.25}
.esopt.on{border-color:var(--theme);background:var(--themeSoft);color:var(--theme)}
.estitle{font-size:14px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.esrow{display:flex;align-items:center;gap:8px;margin-top:7px}
.esrow .eslabel{font-size:12px;color:var(--ink);flex:1;min-width:0;line-height:1.4}
.esrow .esval{font-size:13px;font-weight:800;color:var(--theme);width:30px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0}
.esrow .esbar{width:72px;height:8px;border-radius:5px;background:var(--sep);overflow:hidden;flex-shrink:0}
.esrow .esbarfill{display:block;height:100%;background:var(--theme);border-radius:5px}
/* ES詳細モーダル */
.eddq{text-align:left;margin:12px 0 0}
.eddqt{font-size:13px;font-weight:700;color:var(--ink);line-height:1.4;margin-bottom:5px}
.eddqt b{color:var(--theme);font-size:14px}
.edbar{display:flex;align-items:center;gap:7px;margin-top:3px}
.edbar .edv{font-size:11px;font-weight:800;color:var(--sub);width:12px;text-align:center;flex-shrink:0}
.edbar .edtrack{flex:1;height:9px;border-radius:5px;background:var(--sep);overflow:hidden}
.edbar .edfill{display:block;height:100%;background:var(--theme);border-radius:5px}
.edbar .edc{font-size:11px;color:var(--sub);width:20px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.eddsec{font-size:12px;font-weight:800;color:var(--sub);text-align:left;margin:16px 0 6px;padding-top:10px;border-top:.5px solid var(--sep)}
.edcomment{text-align:left;font-size:13px;line-height:1.55;color:var(--ink);background:var(--bg);border-radius:10px;padding:9px 12px;margin-top:6px}
.edind{text-align:left;font-size:13px;margin-top:8px;padding-bottom:8px;border-bottom:.5px solid var(--sep)}
.edind .edscores{color:var(--theme);font-weight:800;font-variant-numeric:tabular-nums}
.edind .ednote{font-size:12.5px;color:var(--sub);margin-top:3px;line-height:1.5}
.policybody{text-align:left;font-size:12.5px;line-height:1.7;color:var(--ink);max-height:60vh;overflow-y:auto;margin:8px 0}
.policybody p{margin:0 0 10px}
.policybody b{color:var(--ink)}
/* 管理者：店舗ベース時給入力 */
.wageinput{width:82px;box-sizing:border-box;border:1.5px solid var(--sep);border-radius:9px;padding:8px 9px;font-size:16px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
/* 認定タブ 2階層（人リスト→その人の項目） */
.certrow{cursor:pointer}
@media(hover:hover){.certrow:active{background:var(--themeSoft)}}
/* 管理者・全店一覧：暗カード上に3指標をテキストで並べる（白タイルは廃止・読みやすさ優先） */
.row.col{flex-direction:column;align-items:stretch;gap:0}
.storehd{display:flex;justify-content:space-between;align-items:center;width:100%}
.adminstores .storehd .t{color:var(--ink);font-weight:800;font-size:16px}
.store3t{display:flex;gap:6px;margin:11px 0 9px}
.store3t .s3t{flex:1;text-align:center}
.store3t .s3tv{display:block;font-size:23px;font-weight:900;color:var(--ink);letter-spacing:-.5px;line-height:1.05;font-variant-numeric:tabular-nums}
.store3t .s3tv.accent{color:var(--theme2)}
.store3t .s3tv.bad{color:var(--bad)}
.store3t .s3tl{display:block;font-size:10.5px;font-weight:700;color:var(--sub);margin-top:3px}
.adminstores .storedist .dc{background:rgba(255,255,255,.06)}
.adminstores .storedist .dn{color:var(--ink)}
/* スタッフ一覧：ランクバッジ幅をそろえ、右側（申請バッジ＋›）を縦中央でそろえる */
.stfrow{align-items:stretch;flex-direction:column;gap:0}
.stfmainline{display:flex;align-items:center;gap:12px;min-width:0}
.stfmainline>.tx{min-width:0}
.stfrow .rankbadge.sm{min-width:42px;text-align:center}
.stfright{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* スタッフ一覧のバッジ（⏰朝つけ多め・⚠️◎多め・認定申請・💤停滞）は名前の下に置く。
   2026-08-09 小泉指摘：右側（.stfright＝flex-shrink:0）に並べていたため、バッジが3つ付くと
   名前欄が潰れて「熊本梨／沙」と文字単位で折り返し、経験値やポジションまで崩れていた。
   独立した行にして wrap させれば、バッジが何個増えても名前と経験値は影響を受けない。 */
/* プロフィール設定：らくしふとの表記ゆれの注意（2026-08-09 小泉指示）。
   実際に「藤山サキ（BANe）／藤山沙希（らくしふ）」で3日間◎がつけられない事故が起きたため、
   名前を打つ直前に目立つ形で置く。foot（薄い注記）では読み飛ばされる。 */
.setupwarn{margin:12px 14px;padding:11px 13px;border-radius:12px;background:#fff6e9;color:#7a3f00;
  border:1.5px solid #f0c98a;font-size:12.5px;line-height:1.7}
.setupwarn b{color:#5e3000}
.setupwarnhd{font-size:13.5px;font-weight:800;margin-bottom:5px}
.setupwarnul{margin:6px 0 6px;padding-left:1.15em}
.setupwarnul li{margin:2px 0}
.night .setupwarn{background:#3a2f1c;color:#f0d9b0;border-color:#6b5730}
.night .setupwarn b{color:#ffe9c2}
/* 名簿の最終ログインに実際の日時を併記（2026-08-09 小泉指示） */
.seenat{color:var(--sub);font-weight:600;margin-left:5px;font-variant-numeric:tabular-nums}
.rostershift-summary{margin:0 14px 8px;padding:9px 11px;border-radius:10px;background:#fff4df;color:#794600;
  font-size:12.5px;font-weight:700}
.rostershift-badge{background:#f29a38;color:#fff;border-radius:99px;padding:2px 7px;font-size:10.5px;font-weight:800}
.rostershift-last{color:var(--sub);font-weight:700;font-variant-numeric:tabular-nums}
.rostershift-next{color:var(--sub);font-weight:700;font-variant-numeric:tabular-nums;margin-left:10px;opacity:.85}
.night .rostershift-summary{background:#3c2e1d;color:#ffd59a}
/* バッジが無い人も1段ぶんだけ場所を残す＝行の高さと右端の矢印の位置が揃う（2026-08-11 小泉指摘）。
   2段(39px)まで確保すると、バッジ0〜1個が大半なので全行が無駄に間延びする。予約は1段まで。 */
.stfbadges{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:center;gap:6px;margin-top:7px;min-height:22px}
.stfrow .tx .t{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.stfrow .tx .t .feedpos{margin-left:0}
.stfrow .chev{align-self:center}
/* 出勤×記録の草カレンダー。コンパクト表示は14マスを必ず1行に保つ。 */
.grasslegend{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin:0 14px 8px;padding:8px 10px;
  color:var(--sub);font-size:11px;font-weight:700}
.grasslegend span{display:flex;align-items:center;gap:5px}
.grasslegend i,.grassday{display:block;width:16px;height:16px;border-radius:4px;background:var(--sep);flex:0 0 16px}
.grasslegend i.done,.grassday.done{background:var(--accent)}
.grasslegend i.missed,.grassday.missed{background:#d94b4b}
.night .grasslegend i.missed,.night .grassday.missed{background:#ff7770}
.grasswrap{width:100%;margin-top:9px}
.grasscompact{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;padding:4px 0;border:0;
  background:transparent;color:var(--sub);cursor:pointer;font:inherit}
.grassdays{display:grid;gap:3px}
.grassdays.compact{grid-template-columns:repeat(14,16px)}
.grasschev{font-size:9px;line-height:1}
.grassexpanded{width:min(100%,276px);margin-top:5px;padding:8px;border-radius:10px;background:var(--bg)}
.grassweekdays,.grassdays.full{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.grassweekdays{margin-bottom:4px;color:var(--sub);font-size:10px;font-weight:800;text-align:center}
.grassdays.full .grassday{width:auto;height:25px;display:flex;align-items:center;justify-content:center;border-radius:5px}
.grassdays.full .grassday span{font-size:9px;font-weight:800;color:var(--ink);line-height:1}
.grassdays.full .grassday.done span,.grassdays.full .grassday.missed span{color:var(--card)}
.night .grassdays.full .grassday.done span,.night .grassdays.full .grassday.missed span{color:var(--bg)}
@media(max-width:374px){.stfmainline{gap:8px}.grasscompact{gap:5px}.grasschev{display:none}}
.rosterrow{position:relative;padding-right:44px}
.rosterrow>.chev{position:absolute;right:14px;top:50%;transform:translateY(-50%)}
.rostername{display:flex;align-items:center;gap:6px;min-height:23px}
.rostername .feedpos,.rosterbadges .feedpos{margin-left:0}
.rosterbadges{display:flex;align-content:flex-start;align-items:center;gap:6px;flex-wrap:wrap;min-height:22px;margin:3px 0}
.rosteroptional{min-height:18px}
.rosteroptional>.s{margin-top:0}
.certcount{min-width:24px;height:24px;line-height:24px;text-align:center;font-size:13px;font-weight:800;color:#fff;background:var(--theme);border-radius:12px;flex-shrink:0}
.chev{color:var(--sub);font-size:20px;font-weight:700;flex-shrink:0;margin-left:2px}
.backbtn{margin:14px 14px 0;background:none;border:none;color:var(--theme);font-weight:800;font-size:14px;cursor:pointer;padding:2px 0}
/* 店長：スタッフ別ヘッダー（名前＋ランク固定） */
.mgrshdr{display:flex;align-items:center;gap:10px}
.backbtn2{background:none;border:none;color:var(--theme);font-weight:800;font-size:14px;cursor:pointer;padding:0;flex-shrink:0}
.mgrsmain{flex:1;min-width:0}
.mgrsname{font-size:22px;font-weight:800;letter-spacing:-.3px;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mgrsmeta{font-size:12px;color:var(--sub);font-weight:600;margin-top:3px}
.rankbadge{color:#fff;font-weight:800;font-size:15px;padding:4px 12px;border-radius:20px;flex-shrink:0}
.rankbadge.sm{font-size:12.5px;padding:3px 9px;border-radius:14px;flex-shrink:0}
/* スタッフ一覧の変化ドット */
.sigdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:2px;vertical-align:middle}
/* 教育ロードマップ */
.roadmap{display:flex;align-items:flex-start;justify-content:space-between;margin:0 14px;background:var(--card);border-radius:16px;padding:16px 12px}
.rmstage{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.rmstage b{width:34px;height:34px;border-radius:50%;color:#fff;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center}
.rmstage span{font-size:9.5px;color:var(--sub);font-weight:700;white-space:nowrap}
.rmstage.cur b{transform:scale(1.2);box-shadow:0 3px 10px rgba(0,0,0,.22)}
.rmstage.cur span{color:var(--ink);font-weight:800}
/* 数値タイル */
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 14px}
.stat{background:var(--card);border-radius:13px;padding:12px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.stat.tap{display:flex;flex-direction:column}
.statl{max-width:100%}
.stat.up{box-shadow:inset 0 0 0 2px var(--good)}
.statv{font-size:24px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.stat.up .statv{color:var(--good)}
.statl{font-size:11.5px;font-weight:700;margin-top:4px}
.stats{font-size:10px;color:var(--sub);margin-top:2px}
/* コーチ要約・育成方針 */
.coachbox{margin:0 14px;background:var(--card);border-radius:16px;padding:15px 16px}
.coachph{font-size:12.5px;font-weight:800;color:var(--theme);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ph2{font-size:10px;font-weight:700;color:var(--sub);background:var(--bg);padding:2px 8px;border-radius:8px}
.coachcur{font-size:13px;line-height:1.6;margin:10px 0 12px;color:var(--ink)}
.coachsum{font-size:13.5px;line-height:1.75;margin:10px 0 12px;color:var(--ink);white-space:pre-wrap;border-left:3px solid var(--theme);padding-left:11px}
/* 傾向マップ（柱別の強み・取組） */
.pillrow{padding:10px 14px;border-bottom:.5px solid var(--sep)}
.pillrow:last-child{border-bottom:none}
.pilltop{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px}
.pillname{font-size:12.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pillnum{font-size:11px;color:var(--sub);font-weight:700;flex-shrink:0;font-variant-numeric:tabular-nums}
.pillbar{display:flex;height:8px;border-radius:5px;background:#ececef;overflow:hidden}
.pillcert{background:var(--gold)}
.pillact{background:var(--theme);opacity:.55}
.pilllegend{display:flex;gap:16px;margin:6px 20px 0;font-size:11px;color:var(--sub)}
.pilllegend i.lg{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}
.pilllegend i.cert{background:var(--gold)} .pilllegend i.act{background:var(--theme);opacity:.55}
/* 方向性カード */
.dircard{margin:10px 14px 0;background:linear-gradient(135deg,var(--theme),var(--theme2));border-radius:16px;padding:14px 16px;color:#fff}
.dirhd{font-size:13px;font-weight:800;margin-bottom:5px}
.dirtext{font-size:13.5px;line-height:1.6}
.dirtext b{font-weight:800}
/* プロフィール設定：入社日ラベル */
.setuplabel{display:block;font-size:12px;font-weight:700;color:var(--sub);margin:0 2px 5px}
/* 変化タブ：トータル経験値を大きく */
.bigexp{font-size:40px;font-weight:900;line-height:1;letter-spacing:-1px;margin-top:10px;font-variant-numeric:tabular-nums}
.bigexpu{font-size:15px;font-weight:800;margin-left:4px}
.bigexpsub{font-size:11px;color:var(--sub);font-weight:700;margin-top:2px}
/* 店ダッシュボード */
.storeexp{font-size:42px;font-weight:900;line-height:1;letter-spacing:-1px;color:var(--theme);font-variant-numeric:tabular-nums}
.storeexpl{font-size:12px;color:var(--sub);font-weight:700;margin-top:3px}
/* 店の目標：主役2数字（1人あたり経験値＋充足率） */
.twostat{display:flex;align-items:stretch;justify-content:center}
.twostat .tsitem{flex:1;text-align:center;padding:2px 6px}
.twostat .tsv{font-size:34px;font-weight:900;line-height:1.05;letter-spacing:-.5px;color:var(--theme);font-variant-numeric:tabular-nums}
.twostat .tsl{font-size:11.5px;font-weight:700;color:var(--sub);margin-top:5px}
.twostat .tsdiv{width:1px;background:var(--sep);margin:6px 2px}
.goalcard{margin:0 14px;background:var(--card);border-radius:16px;padding:18px 16px 16px}
.goalbar{position:relative;height:14px;border-radius:8px;background:#ececef;overflow:visible;margin:14px 0 8px}
.goalfill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--theme2),var(--theme))}
.goalmark{position:absolute;top:-4px;height:22px;border-left:2px dashed #b0b0b8}
.goalmark::after{content:attr(data-l);position:absolute;top:-16px;left:-14px;font-size:9px;color:var(--sub);font-weight:700;white-space:nowrap}
.goalnums{font-size:12.5px;color:var(--sub);font-weight:700}
.goalnums b{color:var(--theme);font-size:15px}
.goalnext{margin-top:10px;padding-top:10px;border-top:.5px solid var(--sep);font-size:13.5px;font-weight:700}
.goalnext b{color:var(--theme)}
.distrow{display:flex;gap:8px;margin:0 14px}
.distcell{flex:1;background:var(--card);border-radius:13px;padding:12px 4px 10px;text-align:center}
.distn{font-size:24px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.distbadge{display:inline-block;margin-top:6px;width:22px;height:22px;line-height:22px;border-radius:50%;color:#fff;font-size:12px;font-weight:800}
.rankpos{min-width:20px;text-align:center;font-size:14px;font-weight:900;color:var(--sub);flex-shrink:0}
.storelvnum{font-size:22px;font-weight:900;color:var(--theme);line-height:1;font-variant-numeric:tabular-nums}
/* 店長・管理者：ダークテーマ（真っ黒でなくダークグレー。カードも背景トーンに合わせる）。
   CSS変数を上書きするので、var(--card)/var(--sep)/var(--ink)/var(--sub)を使う要素は自動でダーク化 */
.darkbg{
  --bg:#f7f5f8; --card:#ffffff; --sep:#e6e2ea;
  --ink:#1d1c1d; --sub:#6b676e; --theme:#611f69; --theme2:#8a4e90; --themeSoft:#f0e9f1; --goldSoft:#f3edd6;
  /* --accent は var(--theme) を「宣言した要素の上で」解決するので、--theme を変える所で毎回引き直す */
  --accent:var(--theme);
  background:var(--bg);
}
/* Slack風：ヘッダー・ボトムナビは濃いオーバジン、メインは白系（店長ダッシュボードのみ・管理/アルバイト画面は不変） */
.darkbg .apphdr{background:#3f0e40;border-bottom-color:#521a54}
.darkbg .apphdr .storename,.darkbg .apphdr .bigdate,.darkbg .apphdr .mgrsname{color:#fff}
.darkbg .apphdr .hdsub,.darkbg .apphdr .mgrsmeta{color:#c19ac4}
.darkbg .apphdr .biglv{background:rgba(255,255,255,.16);color:#f4e9f5}
.darkbg .apphdr .hdxp,.darkbg .apphdr .hdxp small{color:#e7c6ea}
.darkbg .apphdr .ava{background:#6d3170;border-color:rgba(255,255,255,.6)}
.darkbg .apphdr .backbtn2{color:#e0b8e3}
.darkbg .who{color:#c19ac4}
.darkbg .nav{background:rgba(63,14,64,.98);border-top-color:rgba(255,255,255,.12)}
.darkbg .nav div{color:#a98cab}
.darkbg .nav div .i{opacity:.85;filter:none}
.darkbg .nav div.on{color:#fff}
.darkbg .nav div.on .i{opacity:1;filter:none}
.darkbg .nav .navbadge{background:#e01e5a}
.darkbg .feednote b{color:var(--ink)}
.darkbg .mgrtab{background:#ece8ee;color:#6b676e}
.darkbg .mgrtab.on{background:var(--theme);color:#fff}
.darkbg .feedpos{background:#e9e4ec;color:#6b5a70}
.darkbg .pillbar,.darkbg .goalbar{background:#e6e2ea}
.darkbg .goalmark{border-color:#c9c2cf}
.darkbg .ph2{background:#efe9f0;color:#8a7d8c}
/* モーダル・入力もダークに */
.darkbg .modal .box{background:#ffffff}
.darkbg .omchoice{background:#f2eef4;color:var(--ink);border-color:var(--sep)}
.darkbg .omchoice.on{background:var(--themeSoft);border-color:var(--theme);color:var(--theme2)}
.darkbg .omnote,.darkbg .wageinput{background:#ffffff;color:var(--ink);border-color:var(--sep)}
.darkbg .bubble.coach{background:#f0edf2;color:var(--ink)}
/* タップできるカード/行 */
.stat.tap{cursor:pointer}
@media(hover:hover){.stat.tap:active{background:var(--themeSoft)}}
.pillrow{cursor:pointer}
@media(hover:hover){.pillrow:active{background:var(--themeSoft)}}
/* 詳細モーダルのリスト */
.dlist{max-height:52vh;overflow-y:auto;text-align:left;margin:8px 0 2px}
.dsec{font-size:11.5px;font-weight:800;color:var(--theme);margin:12px 0 4px}
.drow{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:8px 2px;border-bottom:.5px solid var(--sep);font-size:13px}
.drow:last-child{border-bottom:none}
.dname{font-weight:600;line-height:1.45}
.dnote{font-size:11px;color:var(--sub);font-weight:700;flex-shrink:0;white-space:nowrap}
.dempty{font-size:12.5px;color:var(--sub);text-align:center;padding:22px 8px}
/* 店長・管理者：ログアウトを常に最下段に固定 */
.darkbg .scroll{display:flex;flex-direction:column}
.darkbg .scroll > *{flex-shrink:0}   /* flex子が縮んでカードがクリップされるのを防ぐ */
.mgrfoot{margin-top:auto;padding-top:24px}
/* 認定申請の件数＝赤い通知バッジ（目立たせる） */
.pendbadge{background:#e5484d;color:#fff;font-size:11.5px;font-weight:800;padding:5px 11px;border-radius:13px;flex-shrink:0;white-space:nowrap;box-shadow:0 1px 5px rgba(229,72,77,.45)}
.mgrtabn.pend{background:#e5484d;color:#fff}
.mgrtab.on .mgrtabn.pend{background:#fff;color:#e5484d}
.darkbg .pendbadge{background:#fbe1e8;color:#c31d4f;box-shadow:none}
/* 画面遷移スライド（スワイプで戻る等）。ゆっくりめ 0.6s */
.nav-back{animation:slideBack .6s cubic-bezier(.25,.8,.35,1)}
.nav-fwd{animation:slideFwd .6s cubic-bezier(.25,.8,.35,1)}
@keyframes slideBack{from{transform:translateX(-26%);opacity:.25}to{transform:none;opacity:1}}
@keyframes slideFwd{from{transform:translateX(26%);opacity:.25}to{transform:none;opacity:1}}
/* 連続利用を目立たせるチップ */
.streakchip{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:800;color:#fff;background:#4b8f5a;padding:3px 11px;border-radius:12px;vertical-align:middle;letter-spacing:.2px}
.streakchip.hot{background:linear-gradient(90deg,#ff8a3d,#ff5a2c);box-shadow:0 1px 8px rgba(255,90,44,.45)}
/* 店長トップ：店舗名を大きく */
.hdtitle{min-width:0}
.storename{font-size:22px;font-weight:800;letter-spacing:-.3px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdsub{font-size:12px;color:var(--sub);font-weight:600;margin-top:1px}
/* 店の目標タブ：人員計画 */
.plannum{font-size:18px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1}
.plannum.ok{color:var(--good)} .plannum.short{color:var(--warn)}
.planrow{display:flex;align-items:center;gap:10px;margin:10px 0}
.planlabel{flex:1;font-size:14px;font-weight:600}
/* 充足率・時給パネル：明るいグレー地＋濃色文字（Sなど暗い色も読める） */
.darkbg .graybox{background:#eeebf1}
.darkbg .graybox .row{border-bottom-color:#ddd8e2}
.darkbg .graybox .row .tx .t{color:#1c1c1e}
.darkbg .graybox .row .tx .s,.darkbg .graybox .stats{color:#565961}
.darkbg .graybox .feedpos{background:#e2dee8;color:#5a5563}
.darkbg .graybox .storelvnum{color:#611f69}
.darkbg .graybox .wageinput{background:#fff;color:#1c1c1e;border-color:#cfc8d6}
.darkbg .graybox .addbtn{background:#efe4f0;color:#611f69}
/* テスト表示切替（店長/管理者→管理者/店長/アルバイト） */
.viewswitch{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:9px 0 1px}
.vslabel{font-size:10px;font-weight:800;color:var(--sub);margin-right:2px}
.vsbtn{font-size:11.5px;font-weight:800;padding:5px 11px;border-radius:20px;border:1.5px solid var(--sep);background:var(--card);color:var(--sub);cursor:pointer}
.vsbtn.on{background:var(--theme);color:#fff;border-color:var(--theme)}
/* 登録：アイコン設定 */
.avapick{display:flex;flex-direction:column;align-items:center;gap:8px;margin:6px 0 16px}
.avapick .ava{width:84px;height:84px;border-radius:50%;background:var(--themeSoft);display:flex;align-items:center;justify-content:center;font-size:38px;overflow:hidden;cursor:pointer;border:2px solid var(--card);box-shadow:0 1px 6px rgba(0,0,0,.12)}
.avapick .ava img{width:100%;height:100%;object-fit:cover}
.avapicklabel{font-size:12.5px;font-weight:700;color:var(--theme);cursor:pointer}
/* 人員計画：表形式 */
.plantable{width:calc(100% - 28px);margin:0 14px;border-collapse:collapse;background:var(--card);border-radius:14px;overflow:hidden;table-layout:fixed}
.plantable .c-rank{width:48%}
.plantable .c-num{width:16%}
.plantable .c-stat{width:20%}
.plantable th,.plantable td{padding:11px 6px;text-align:center;border-bottom:.5px solid var(--sep);vertical-align:middle}
.plantable thead th{font-size:11px;font-weight:800;color:var(--sub);background:var(--bg)}
.plantable thead th:first-child{text-align:left;padding-left:14px}
.plantable tbody tr:last-child td{border-bottom:none}
.plantable .pl-rank{text-align:left;padding-left:14px}
.plantable .pl-rankwrap{display:flex;align-items:center;gap:8px;white-space:nowrap}
.plantable .pl-label{font-weight:700;font-size:13px}
.plantable .pl-num{font-weight:800;font-variant-numeric:tabular-nums;font-size:16px}
.plantable .pl-stat{font-weight:800;font-size:12px}
.plantable .pl-stat.ok{color:var(--good)}
.plantable .pl-stat.short{color:#e8890c}
.plantable .pl-d .pl-label{color:var(--sub)}
/* 今日の課題（営業中の早見表） */
.focusitems{margin-top:8px;display:flex;flex-direction:column;gap:2px}
.focuscard .feedtop{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
.focuscard .feedname{min-width:0}
.focuscard .feedtop>.feedpos{margin-left:0;white-space:nowrap}
.focusempty{font-size:12.5px;color:var(--sub)}
.focusname{flex:1;min-width:0}
.focustag{margin-left:6px;font-size:10.5px;font-weight:800;color:#fff;background:var(--theme);padding:1px 8px;border-radius:7px;flex-shrink:0}
.focusymarkhd{text-align:right;font-size:10.5px;font-weight:800;color:var(--sub);letter-spacing:.02em;margin:0 0 3px}
.focusdaynav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 14px 8px}
.focusdaylabel{font-size:13.5px;font-weight:900;color:var(--ink)}
.focusdaybtn{border:1.5px solid var(--sep);background:var(--card);color:var(--ink);border-radius:10px;padding:8px 12px;font-size:12.5px;font-weight:800;cursor:pointer}
/* 認定でランクアップ（時給↑）の告知 */
.rankupbanner{margin:10px 14px;padding:10px 13px;border-radius:12px;background:#fff6e9;color:#8a4b00;font-size:12.5px;font-weight:700;line-height:1.65;border:1.5px solid #f0c98a}
.rankupbanner b{color:#7a3f00}
/* ランクアップの帯は**独立した行**に置く（2026-08-20 小泉指摘・Android実機）。
   inline-block＋nowrap だと、幅の狭い画面で項目名の右にはみ出し「✓認定」ボタンに重なっていた。
   iPhoneは幅がぎりぎり足りていたので出ていなかった＝**同じCSSでも幅次第で壊れる**種類の不具合。 */
.rankuptag{display:block;width:fit-content;max-width:100%;margin:5px 0 0;font-size:11px;font-weight:800;
  color:#fff;background:#e8890c;padding:3px 9px;border-radius:8px;white-space:normal;line-height:1.4}
.row.rowrankup{box-shadow:inset 0 0 0 2px #e8890c}
/* 全店一覧：S/A/B/C/D 分布を5等分グリッドで縦に揃える */
.storedist{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:8px}
.storedist .dc{background:#fff;border-radius:8px;padding:5px 0;text-align:center}
.storedist .dl{display:block;font-size:10px;font-weight:800;line-height:1}
.storedist .dn{display:block;font-size:16px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums;color:#1c1c1e}

/* 取扱説明書ボタン（役割ごとに出し分け・右下フローティング／ボトムナビの上） */
#helpbtn{position:fixed;right:12px;bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:30;
  display:none;align-items:center;gap:5px;background:rgba(28,28,30,.9);color:#fff;border:none;
  font-size:12.5px;font-weight:700;padding:9px 13px;border-radius:99px;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#helpbtn:active{transform:scale(.96)}
.darkbg #helpbtn{background:rgba(63,14,64,.94);border:1px solid rgba(255,255,255,.14)}

/* ===== 承認・停止ボタンの色（旧・インラインstyle。ダーク対応のためクラス化） ===== */
.addbtn.ok{background:#e6f8ec;color:var(--good)}
.addbtn.danger{background:#fdecec;color:var(--bad)}
.feedpos.danger{background:#fdecec;color:var(--bad)}

/* ===================================================================
   表示の明るさ＝🌙 ダークモード（2026-07-30）
   既定はライト（アウバジン）。🌙を押した人だけ html に .night が付く。
   ライト側のルールは一切書き換えず、ここで上書きするだけ＝明るい表示は不変。
   =================================================================== */
.nightbtn{flex-shrink:0;width:34px;height:34px;padding:0;border-radius:50%;border:none;
  background:#fff;color:#2a0b2c;line-height:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.22)}
.nightbtn:active{background:#e6e1e8}
/* ヘッダーの無い画面（ログイン・プロフィール設定・承認待ち・エラー）用 */
#nightfab{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;z-index:25;display:none;
  width:36px;height:36px;padding:0;border-radius:50%;border:none;background:#fff;
  color:#2a0b2c;line-height:0;cursor:pointer;align-items:center;justify-content:center;
  box-shadow:0 1px 6px rgba(0,0,0,.24)}
.night .nightbtn,.night #nightfab{color:#0e332c}

/* ---- パレット：Slackダーク（小泉の実画面）に合わせる＝濃い緑のサイドバー＋
        メインは黒でなく濃いグレー（Slackの #1a1d21 より少し明るく）＋白文字＋緑アクセント ---- */
.night{background:#262a2b;color-scheme:dark}
.night body{
  background:#262a2b;
  --bg:#262a2b; --card:#313637; --sep:#434849;
  --ink:#e9edec; --sub:#9ba5a3;
  --theme:#1a7f66; --theme2:#4bc79f; --themeSoft:#1e3d35; --accent:var(--theme2);
  --good:#5fd07f; --warn:#e0a33f; --bad:#9aa3a1; --gold:#d4af4e; --goldSoft:#3a3320;
  --danger:#ff8b84; --dangerSoft:#3a2224;
}
.accentink{color:var(--accent)}
/* ---- ヘッダー／ボトムナビ＝濃い緑（Slackのサイドバー相当） ---- */
.night .darkbg .apphdr{background:#0e332c;border-bottom-color:#1c4a41}
.night .darkbg .apphdr .biglv{background:rgba(255,255,255,.13);color:#d8f2e8}
.night .darkbg .apphdr .hdsub,.night .darkbg .apphdr .mgrsmeta,.night .darkbg .who{color:#93b3aa}
.night .darkbg .apphdr .hdxp,.night .darkbg .apphdr .hdxp small{color:#7fdcbc}
.night .darkbg .apphdr .ava{background:#1c5b4c;border-color:rgba(255,255,255,.4)}
.night .darkbg .apphdr .backbtn2{color:#a5d8c7}
.night .darkbg .nav{background:rgba(14,51,44,.98);border-top-color:rgba(255,255,255,.1)}
.night .darkbg .nav div{color:#7f9d94}
.night .darkbg .nav div.on{color:#fff}
.night .darkbg #helpbtn{background:rgba(14,51,44,.94);border-color:rgba(255,255,255,.16)}
/* ---- カード・入力・モーダル（ライトで白ベタ指定だった面） ---- */
.night .modal{background:rgba(0,0,0,.62)}
.night .darkbg .modal .box{background:var(--card)}
.night input.txt,.night select.sel,.night .tb,.night .seg,.night .mbtns .sec,
.night .rbox .addbtn.limit,.night .darkbg .omnote,.night .darkbg .wageinput,
.night .darkbg .omchoice,.night .darkbg .mgrtab,.night .storedist .dc{background:#343a3b;color:var(--ink);border-color:var(--sep)}
.night .darkbg .mgrtab{color:var(--sub)}
.night .darkbg .omchoice.on{background:var(--themeSoft);border-color:var(--theme);color:var(--theme2)}
.night .seg div.on{background:#4a5152}
.night .storedist .dn{color:var(--ink)}
.night .darkbg .bubble.coach{background:#3a4142;color:var(--ink)}
.night .darkbg .feedpos,.night .darkbg .ph2{background:#3a4142;color:#a4aead}
.night .xpbar,.night .pillbar,.night .goalbar,.night .stairsteps b,
.night .darkbg .pillbar,.night .darkbg .goalbar{background:#3a4142}
.night .stairsteps b{color:#7f8a88}
.night .goalmark,.night .darkbg .goalmark{border-color:#59605f}
.night .btn:disabled,.night .ombtns .pri:disabled{background:#3f4546;color:#8d9695}
.night .darkbg .pendbadge{background:#4d1a2c;color:#ffb3c6}
/* ---- 状態色（淡い緑・赤・黄の地）＝暗い地＋明るい文字に反転 ---- */
.night .b-ok,.night .b-done,.night .b-coach,.night .addbtn.ok{background:#22401f;color:#8ede98}
.night .b-wait,.night .stallbadge,.night .tb.testcert{background:#3d3520;color:#e8bf6a}
.night .tb.testcert{color:var(--gold);border-color:var(--gold)}
.night .b-jibun{background:var(--themeSoft);color:var(--theme2)}
.night .row.rowc{background:#26332a}
.night .row.rowready{background:#2a3b2e}
.night .riskrow,.night .bulkwarn,.night .addbtn.danger,.night .feedpos.danger{background:#402426;color:#ff9a92}
.night .riskrow .t{color:#ff9a92}
.night .bulkwarn.up{background:var(--themeSoft);color:var(--theme2)}
.night .warnbadge{background:#42301d;color:#e8a86a}
.night .testbar{background:#39311c;color:#dcc472;border-color:#5c5326}
.night .rankupbanner{background:#40311b;color:#e9c489;border-color:#6b5c28}
.night .rankupbanner b{color:#f3d8a8}
/* ---- 充足率・時給パネル（ライトでは明るいグレー地に濃色文字だった箱） ---- */
.night .darkbg .graybox{background:#2e3334}
.night .darkbg .graybox .row{border-bottom-color:#3f4546}
.night .darkbg .graybox .row .tx .t{color:var(--ink)}
.night .darkbg .graybox .row .tx .s,.night .darkbg .graybox .stats{color:var(--sub)}
.night .darkbg .graybox .feedpos{background:#3f4546;color:#a4aead}
.night .darkbg .graybox .storelvnum{color:var(--theme2)}
.night .darkbg .graybox .wageinput{background:#343a3b;color:var(--ink);border-color:var(--sep)}
.night .darkbg .graybox .addbtn{background:var(--themeSoft);color:var(--theme2)}
/* ---- アクセント色を「文字」に使う所は --theme だと暗い地で沈むので、明るい --theme2 に上げる。
       （--theme は塗り＝白文字を載せる面に使うので暗いまま据え置き） ---- */
.night .addbtn,.night .btn.ghost,.night .poschip,.night .tbchip,.night .renewtag,
.night .memosign,.night .expchip.xp-dm,.night .themecard .twait,.night .themecard .thd,
.night .pickopt.on,.night .esopt.on,.night .reqrow b,.night .secttoggle,.night .diredit,
.night .escard.done .escta,.night .esrow .esval,.night .eddqt b,.night .edind .edscores,
.night .backbtn,.night .backbtn2,.night .coachph,.night .goalnums b,.night .goalnext b,
.night .dsec,.night .avapicklabel,.night .chartkpi .ckv,.night .storeexp,
.night .twostat .tsv,.night .storelvnum{color:var(--theme2)}
/* ---- グラデーション面：--theme が明るくなる分、白文字が沈まないよう濃いめに固定 ---- */
.night .coach,.night .dircard,.night .trainerbar{background:linear-gradient(135deg,#14584a,#1f8067)}
/* ---- ロゴ＝白地に黒のモノクロ画像。反転して白抜きにする（invert(#d9d5d4)＝--bg） ---- */
.night .logomark{background-image:url(img/hoppin-logo-01-transparent.png)}   /* 文字を白にした版（反転だとバネの色まで変わる） */

/* 新しい版のお知らせ（自動リロードできない＝入力中/モーダル中のときだけ出す） */
#updbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(104px + env(safe-area-inset-bottom,0px));z-index:45;
  background:rgba(28,28,30,.94);color:#fff;border:none;font-size:13px;font-weight:700;padding:11px 18px;
  border-radius:99px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.28);max-width:86%}
#updbar:active{transform:translateX(-50%) scale(.97)}
.darkbg #updbar{background:rgba(14,51,44,.96);border:1px solid rgba(255,255,255,.16)}

/* 名簿：アンケートの推移（最新スコアと前回比） */
.essub{color:var(--sub);font-weight:700}
.esup{color:var(--good);font-weight:700}
.esdown{color:var(--bad);font-weight:700}
.esqchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.esqchip{background:var(--bg);color:var(--sub);border-radius:6px;padding:2px 6px;font-size:11.5px;font-weight:700}
.esqchip.low{background:#fdecec;color:var(--bad)}
.night .esqchip{background:#3a4142;color:#a4aead}
.night .esqchip.low{background:#402426;color:#ff9a92}

/* 適性テスト（3軸） */
.aptaxes{display:flex;flex-wrap:wrap;gap:8px;margin-top:5px}
.aptaxis{font-size:11.5px;font-weight:700;color:var(--sub)}
.aptaxis b{color:var(--ink)}
.night .aptaxis b{color:#e8eaea}

/* ヘッダー右上の道具（↻更新／明るさ切替）と「いつの情報か」 */
.hdtools{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-left:6px}
.hdtoolrow{display:flex;gap:5px}
.hdtools .nightbtn,.reloadbtn{width:30px;height:30px}
.reloadbtn{flex-shrink:0;padding:0;border-radius:50%;border:none;
  background:#fff;color:#2a0b2c;font-size:16px;font-weight:700;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.22)}
.reloadbtn:active{background:#e6e1e8;transform:rotate(90deg)}
.night .reloadbtn{color:#0e332c}
/* ===== 上を畳む（2026-09-19 小泉「iPadでの表示領域が狭いので上は畳めるように」）=====
   iPadは横向きだと縦が足りず、日付・名前・テスト表示で画面の2割を使っていた。
   ⚠️ 畳んでも **⌃・↻・◐ と区分の札は残す**（どの立場で見ているか分からなくなるため）。 */
.hdtools .foldbtn{width:30px;height:30px}
.foldbtn{flex-shrink:0;padding:0;border-radius:50%;border:none;
  background:#fff;color:#2a0b2c;line-height:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.22)}
.foldbtn:active{background:#e6e1e8}
.night .foldbtn{color:#0e332c}
html.hdrfold .foldbtn svg{transform:rotate(180deg)}
html.hdrfold .apphdr{padding-top:calc(5px + env(safe-area-inset-top));padding-bottom:5px}
html.hdrfold .apphdr .who,
html.hdrfold .apphdr .viewswitch,
html.hdrfold .apphdr .lastupd,
html.hdrfold .apphdr .mgrsmeta{display:none}
/* ⚠️ デモの「架空のアルバイト」の帯は畳まない。あの画面には ⌃ が無いので、
   畳んだまま入ると出す手段が無くなる（それ以前に、デモである注意書きは消さない）。 */
html.hdrfold .apphdr .ava,html.hdrfold .apphdr .rava{width:28px;height:28px;border-width:1px;font-size:14px}
html.hdrfold .apphdr .bigdate,html.hdrfold .apphdr .mgrsname{font-size:14px}
html.hdrfold .apphdr .biglv,html.hdrfold .apphdr .rankbadge{font-size:12px;padding:2px 10px}

.lastupd{font-size:10px;font-weight:700;white-space:nowrap;color:var(--sub);line-height:1.2}
.darkbg .lastupd{color:rgba(255,255,255,.62)}
/* 道具が増えた分、日付は折り返さずに詰める */
.toprow .hdleft{min-width:0}
.toprow .bigdate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* iPhoneの幅では日付が入りきらないので少し縮める（↻が増えた分） */
@media (max-width:400px){ .apphdr .bigdate{font-size:17px} }
/* 今日の課題：本人画面と同じ「自動表示中」の注記 */
.focusauto{font-size:11px;font-weight:700;color:var(--sub);margin-top:6px}

/* スキルツリー：項目ごとのポジションバッジ（出し分けをやめた代わりの目印） */
.posbadge{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;
  font-size:10.5px;font-weight:800;vertical-align:middle;letter-spacing:.02em;white-space:nowrap}
.pos-all{background:#eceaf0;color:#6b6376}
.pos-hall{background:#e7f1fd;color:#2b74d6}
.pos-kitchen{background:#e6f6ec;color:#2fa350}
.darkbg .pos-all{background:rgba(255,255,255,.12);color:#cfc9d6}
.darkbg .pos-hall{background:rgba(43,116,214,.26);color:#9cc4f5}
.darkbg .pos-kitchen{background:rgba(47,163,80,.26);color:#8fd9a8}

/* 個人ログ：アンケート回答を設問の文章つきで（「1:4」だけでは意味が分からない・2026-08-02 小泉指摘） */
.esqlines{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.esqline{display:flex;align-items:baseline;gap:8px;font-size:12px;line-height:1.45}
.esqline .esqtxt{flex:1;color:var(--sub);font-weight:600}
.esqline .esqval{flex-shrink:0;font-size:13px;color:var(--ink)}
.esqline.low .esqtxt,.esqline.low .esqval{color:var(--bad);font-weight:800}
.darkbg .esqline .esqval{color:#e8eaea}

/* 個人ログのアンケート：2以下は赤バー（気にかけたい回答）。
   ※この配色では --bad は灰色（iOS系グレー）なので、警告の赤は明示する */
.esrow.low .esval{color:#d24b4b}
.esrow.low .esbarfill{background:#d24b4b}
.esrow.low .eslabel{color:#d24b4b;font-weight:700}
.darkbg .esrow.low .esval,.darkbg .esrow.low .eslabel{color:#ec6a6a}
.darkbg .esrow.low .esbarfill{background:#ec6a6a}

/* ===== 経験値の「溜まる」演出（2026-08-06 小泉確定）=====
   A ◎をつけた瞬間に +N が飛ぶ／B 前回からの差分／C 1,000ごとのキリ番。
   演出の強さは ランクアップ(.lvup) > キリ番/おかえり(.msdlg)。バーストは .lvup だけの特権。 */
/* 指で隠れないよう、押した◎の「上」に出してさらに大きく上へ抜ける（%だと文字サイズ基準で移動量が足りない＝px指定） */
.xpfly{position:fixed;z-index:120;pointer-events:none;font-size:24px;font-weight:900;color:var(--gold);
  text-shadow:0 2px 8px rgba(0,0,0,.3);animation:xpfly 1.1s cubic-bezier(.2,.8,.3,1) both}
@keyframes xpfly{
  0%{opacity:0;transform:translate(-50%,-100%) scale(.6)}
  18%{opacity:1;transform:translate(-50%,calc(-100% - 22px)) scale(1.2)}
  100%{opacity:0;transform:translate(-50%,calc(-100% - 116px)) scale(1.05)}}
.msdlg{text-align:center;padding:6px 2px 2px}
.msnum{font-size:44px;font-weight:900;letter-spacing:-1.5px;line-height:1.15;
  animation:titlein .5s both}
.mstitle{font-size:16px;font-weight:800;margin-top:4px;animation:titlein .5s .1s both}
.mssub{font-size:13px;color:var(--sub);margin-top:11px;line-height:1.75}
.mssub b{color:var(--ink)}
.msnext{font-size:12.5px;color:var(--sub);margin-top:13px;padding-top:11px;border-top:1px solid var(--sep)}
.msnext b{color:var(--ink);font-size:14.5px}
@media (prefers-reduced-motion:reduce){.xpfly{animation:none;opacity:0}.msnum,.mstitle{animation:none}}

/* ===== 🏪 店長の稼働状況＝店ごとに1枚のカード（2026-08-06 小泉指示）=====
   以前は全店が1つの group に縦一列で連なり、どこからどこまでが1店か分からなかった。
   色は全てCSS変数なので .darkbg / .night に自動で追従する。 */
.fcglobal{margin:12px 14px 4px;padding:11px 13px;background:var(--card);border:1px solid var(--sep);border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.fcglobal>div:first-child{min-width:0}.fcglobal b{display:block;font-size:14px;color:var(--ink)}.fcglobal>div:first-child span{display:block;margin-top:2px;font-size:10.5px;font-weight:600;color:var(--sub)}
.fcsegwrap{display:flex;gap:4px;flex-shrink:0}
.fcseg{padding:6px 11px;border:1.5px solid var(--sep);border-radius:20px;background:transparent;color:var(--sub);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.fcseg.on{background:var(--theme);color:#fff;border-color:var(--theme)}
.fcaggmark{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:8px;background:var(--themeSoft);color:var(--theme);font-size:9.5px;font-weight:800;vertical-align:2px;white-space:nowrap}
.mgrcard{background:var(--card);border-radius:14px;margin:0 14px 10px;padding:13px 14px 2px}
.mgrhd{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.mgrhd .mgrstore{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.2px}
.mgrhd .mgrname{font-size:12px;font-weight:700;color:var(--sub);margin-left:auto;text-align:right}
.mgrstats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.mstat{background:var(--bg);border-radius:9px;padding:5px 10px;font-size:11.5px;font-weight:700;
  color:var(--sub);display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.mstat b{font-size:13.5px;font-weight:800;color:var(--ink)}
.mstat.warn{background:var(--themeSoft)} .mstat.warn b{color:var(--theme)}
.mgrsec{display:flex;align-items:flex-start;gap:8px;border-top:.5px solid var(--sep);
  padding:10px 0;font-size:12.5px;line-height:1.7;color:var(--ink)}
.mgrsec .mgrsecico{flex-shrink:0;line-height:1.7}
.mgrsec .mgrsecbody{flex:1;min-width:0}
.mgrsec .diredit{flex-shrink:0;margin-left:auto;line-height:1.7}
.mgrsec .mgrsum{white-space:pre-wrap;color:var(--sub)}
.mgrmuted{color:var(--sub)}
.mgraddnote .diredit{margin-left:0}   /* 「実は…」の追加リンクだけは左揃え（右端に浮かせない） */

/* アルバイト画面デモ：本番と混同しない固定バーを、すべてのデモ画面で最上部に残す。 */
.demo-safe-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;background:#ffe066;color:#3b2d00;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.demo-safe-bar div{min-width:0;font-size:13px;line-height:1.3}.demo-safe-bar span{display:block;font-size:10.5px;font-weight:700}
.demo-safe-bar button,.demo-reset{flex-shrink:0;border:0;border-radius:9px;background:#3b2d00;color:#fff;padding:8px 10px;font-size:12px;font-weight:800;cursor:pointer}
.demo-profile{padding:11px 14px 8px}.demo-profile .ava{pointer-events:none}.demo-reset{margin-left:auto;background:rgba(255,255,255,.16)}
.demoexample{margin-top:8px;padding-top:7px;border-top:1px solid rgba(255,255,255,.28);font-size:11px;font-weight:700;line-height:1.45}
.demo-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:10px 14px;padding:10px 12px;border-radius:10px;background:#fff4b8;color:#3b2d00;font-size:12px}.demo-controls span{flex-basis:100%;font-size:11px}.demo-controls .ctab{margin:0}
.demochatnote{margin:10px 14px 0;padding:10px 12px;border:1px solid #e8cf7a;border-radius:11px;background:#fff6d8;color:#765d00}
.night .demochatnote{background:#3d3520;color:#e8bf6a;border-color:#66552b}
@media(max-width:375px){.demo-safe-bar{padding:8px 10px}.demo-safe-bar b{font-size:12.5px}.demo-safe-bar button{padding:7px 8px}}

/* 👤 トレーナーの証言（2026-08-20）＝認定ではなく店長への引き継ぎ。押した状態が一目で分かるように。 */
.tcrev{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.tcrevbtn{border:1px solid var(--line);background:transparent;color:var(--sub);border-radius:999px;
  padding:6px 12px;font-size:12px;font-weight:800;cursor:pointer}
.tcrevbtn.on{background:var(--good);border-color:var(--good);color:#fff}
.tcrevbtn.on2{background:#e8a13a;border-color:#e8a13a;color:#fff}
.trainerpt{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:8px 14px 2px;padding:10px 12px;
  border:1px solid var(--line);border-radius:12px}
.trainerpt .tpi{font-size:16px}
.trainerpt .tpt{font-weight:800}
.trainerpt .tps{flex:1 1 100%;font-size:12px;color:var(--sub);line-height:1.5}
.certrev{color:var(--sub);font-weight:700}
.certrev.ok{color:var(--good)}

/* 利用率のバッジ（2026-08-20）＝経験値より先に見る数字なので、細字に埋もれさせない。80%以下は赤。
   見た目は**蛍光ペンのハイライト**（小泉指示）＝半透明の蛍光色＋同系の濃い文字。ベタ塗りより馴染む。
   ※このアプリの var(--bad) は「灰色」（きつく見せない方針）なので、赤の指定はここで直に置く。 */
.usebadge{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:6px;
  font-size:12px;font-weight:800;letter-spacing:.2px;
  background:rgba(57,232,148,.28);color:#0a7a48;
  box-shadow:0 0 0 1px rgba(57,232,148,.45), 0 0 10px rgba(57,232,148,.40)}
.usebadge.bad{background:rgba(255,71,71,.24);color:#bd2e2b;
  box-shadow:0 0 0 1px rgba(255,71,71,.45), 0 0 10px rgba(255,71,71,.38)}
.night .usebadge{background:rgba(80,255,178,.20);color:#7dffc4;
  box-shadow:0 0 0 1px rgba(80,255,178,.34), 0 0 12px rgba(80,255,178,.30)}
.night .usebadge.bad{background:rgba(255,96,96,.22);color:#ffa19a;
  box-shadow:0 0 0 1px rgba(255,96,96,.36), 0 0 12px rgba(255,96,96,.32)}
.store3t .s3tv.red{color:#d93a3a}
.night .store3t .s3tv.red{color:#ff8e86}
/* 🏆 アルバイト TOP10 */
.rankrow{align-items:center}
.rankrow .rkno{width:34px;flex-shrink:0;font-size:18px;font-weight:800;color:var(--sub);text-align:center}
.rankrow.top3 .rkno{font-size:22px}
.rankrow .rkexp{flex-shrink:0;font-weight:800;font-variant-numeric:tabular-nums}
.rankrow .rkexp small{font-size:11px;color:var(--sub);margin-left:2px}
.rankrow.top3{background:linear-gradient(90deg,rgba(212,175,55,.14),transparent)}

/* 承認率・もう一歩率（2026-08-20）＝率だけ見て判断しないよう、件数を同じ行に並べる。
   色は利用率と同じ蛍光ハイライト。良し悪しではなく「見る合図」なので緑と橙にする。 */
.qrates{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0 2px}
.qrate{display:inline-block;padding:3px 11px;border-radius:6px;font-size:13px;font-weight:800}
.qrate.ok{background:rgba(57,232,148,.28);color:#0a7a48;
  box-shadow:0 0 0 1px rgba(57,232,148,.45), 0 0 10px rgba(57,232,148,.40)}
.qrate.ng{background:rgba(255,168,48,.26);color:#9a5a00;
  box-shadow:0 0 0 1px rgba(255,168,48,.45), 0 0 10px rgba(255,168,48,.36)}
.qsub{font-size:12px;color:var(--sub);font-weight:700}
.night .qrate.ok{background:rgba(80,255,178,.20);color:#7dffc4;
  box-shadow:0 0 0 1px rgba(80,255,178,.34), 0 0 12px rgba(80,255,178,.30)}
.night .qrate.ng{background:rgba(255,190,90,.20);color:#ffd08a;
  box-shadow:0 0 0 1px rgba(255,190,90,.34), 0 0 12px rgba(255,190,90,.30)}

/* 名簿の顔（2026-08-20）＝名前だけより「誰か」が早く分かる。未設定は既定のアイコン。 */
.rava{width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0;align-self:flex-start;
  background:var(--themeSoft);display:flex;align-items:center;justify-content:center}
.rava img{width:100%;height:100%;object-fit:cover;display:block}
.rava.sm{width:32px;height:32px;align-self:center}
.rankrow .rava{margin-right:2px}

/* 月末の退職確認のボタン：日本語は文字単位で折れるので「（全員在籍）」が途中で切れる（2026-08-20 小泉指摘）。
   意味のかたまりを inline-block にして、折るならその境目でだけ折る。 */
.nb{display:inline-block}
.exitbtns .btn,.exitbtns .pri{font-size:14px;padding:12px 8px;line-height:1.45}
/* 店長画面：一覧と詳細ヘッダーにも顔（2026-08-20 小泉指示） */
.stfrow .rava{align-self:center}
/* ⚠️ 修飾クラスに `hdr` を使わないこと。アプリには既に `.hdr{padding:18px 20px 6px}`（画面見出し）があり、
   `.rava.hdr` にすると padding が効いて **中身の幅が0**になる＝画像が消える（2026-08-20 実機で発覚）。
   共通名（hdr / box / list など）を修飾子に流用しない。 */
.rava.rhdr{width:40px;height:40px;border:2px solid rgba(255,255,255,.65);flex-shrink:0;padding:0}
.mgrshdr .rava.rhdr{margin-right:2px}

/* 解放の予告（🔒）＝1つ先だけ見せる。見えない機能は存在に気づかれないと動機にならない。 */
.lockrow{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px dashed var(--sep);
  border-radius:12px;margin:8px 14px;color:var(--sub);font-size:12.5px;line-height:1.6}
.lockrow .lki{font-size:18px;flex-shrink:0}
.lockrow b{color:var(--ink)}

/* 📢 お知らせ（2026-08-20）＝今日タブの最上部に1枚。読んだら消える。
   左の色帯で「いつもと違う1枚」と分かるようにする（カードを増やすより、線1本のほうが軽い）。 */
.newscard{margin:10px 14px 4px;padding:13px 15px;background:var(--card);border:1px solid var(--sep);
  border-left:4px solid var(--theme);border-radius:0 14px 14px 0}
.newshd{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.newsico{font-size:17px}
.newstitle{font-weight:800;font-size:15px}
.newsdate{margin-left:auto;font-size:11.5px;color:var(--sub)}
.newsitem{font-size:13px;color:var(--sub);line-height:1.85}
.newsitem b{color:var(--ink)}
.newsacts{display:flex;align-items:center;gap:10px;margin-top:11px;flex-wrap:wrap}
.newsnote{font-size:11.5px;color:var(--sub)}

/* ランク表（2026-08-20 作り直し）＝帯の見出しで区切り、現在地と到達済みを見分けられるようにする。 */
.lvband{display:flex;align-items:center;gap:8px;padding:9px 14px 7px;background:var(--bg);
  border-bottom:.5px solid var(--sep);flex-wrap:wrap}
.lvbandname{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;
  padding:0 7px;border-radius:7px;background:var(--sep);color:var(--sub);font-weight:800;font-size:13px}
.lvbandlabel{font-weight:800;font-size:13.5px}
.lvbandkey{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--theme);
  background:var(--themeSoft);border-radius:7px;padding:2px 8px}
.lvrow.lvcur{background:var(--theme)}
.lvrow.lvcur .t,.lvrow.lvcur .s,.lvrow.lvcur .lvwage,.lvrow.lvcur .s b{color:#fff}
.lvhere{margin-left:8px;font-size:11px;font-weight:800;background:rgba(255,255,255,.22);
  color:#fff;border-radius:7px;padding:2px 8px;vertical-align:1px}
.lvrow.lvpast .t,.lvrow.lvpast .s,.lvrow.lvpast .lvwage{opacity:.5}
.lvwait{color:var(--warn)}
/* 時給変更の申請フォームへの導線（2026-08-20）＝上がる場面で必ず目に入る場所に置く */
.wagelink{display:inline-block;margin-top:8px;padding:5px 12px;border-radius:9px;
  background:rgba(255,255,255,.22);color:#fff;font-weight:800;font-size:12.5px;cursor:pointer}

/* 🎯 スタッフ一覧の育成方針（2026-08-21）＝長い方針は2行で切る。一覧が縦に伸びすぎないように。 */
.stfdir{display:flex;align-items:flex-start;gap:7px;margin-top:9px;padding-top:9px;border-top:.5px solid var(--sep)}
.stfdir .sdi{font-size:14px;flex-shrink:0;line-height:1.5}
.stfdir .sdwrap{flex:1;min-width:0}
.stfdir .sdb{font-size:12.5px;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stfdir .sdb.sdnone{color:var(--sub)}
/* 更新日は本文の下に置く。本文の末尾に並べると、2行で切られた時に**日付ごと消える**。 */
.stfdir .sdago{margin-top:3px;font-size:11px;color:var(--sub);font-weight:700}
.stfdir .diredit{flex-shrink:0}
.dirpostitle{margin-top:16px;text-align:left;font-size:13px;color:var(--ink)}
.dirpostitle span{display:block;margin-top:3px;font-size:11.5px;font-weight:600;color:var(--sub);line-height:1.5}
.dirposgroup{margin-top:12px;text-align:left}
.dirposlabel{font-size:12px;font-weight:800;color:var(--sub);margin-bottom:6px}
.dirposlist{display:flex;gap:7px;flex-wrap:wrap}
.dirpos{min-height:44px;padding:7px 13px;border:1.5px solid var(--sep);border-radius:999px;background:var(--card);
  color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.dirpos.on{border-color:var(--theme);background:var(--themeSoft);color:var(--accent)}
.dirposempty{font-size:12px;color:var(--sub);padding:5px 0}
.dirposbadges{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.dirposbadge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:var(--themeSoft);
  color:var(--accent);font-size:10.5px;font-weight:800;line-height:1.5}

/* ===== 応募一覧（位置を固定する。名前の長さで他がずれないように） ===== */
.applyrow{display:flex;align-items:center;gap:10px}
.apprank{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:13px;font-weight:800;color:#fff;background:var(--bad)}
.apprank.S{background:var(--gold)} .apprank.A{background:var(--good)}
.apprank.B{background:var(--theme)} .apprank.C{background:var(--bad)}
.apprank.none{background:var(--sep);color:var(--sub)}
.applyrow .tx{flex:1;min-width:0}
.applyrow .t,.applyrow .s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appright{flex:0 0 76px;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.appfit{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:7px;color:#fff;white-space:nowrap}
.appfit.ok{background:var(--good)} .appfit.warn{background:var(--gold)} .appfit.ng{background:var(--warn)}
/* 状態のバッジ（2026-08-21 小泉指示）＝一覧で追うのは「次に何をする人か」。
   **応募＝まだ手をつけていない**だけを強く出し、進行中は落ち着いた色、終わったものは薄く。 */
.appstat{font-size:11px;font-weight:800;white-space:nowrap;padding:3px 10px;border-radius:999px;
  background:var(--sep);color:var(--sub)}
/* 「応募」＝未対応。ベタ塗りだと一覧で強すぎたので、透過の淡い赤にする（2026-08-21 小泉） */
.appstat.s-new{background:rgba(217,58,58,.14);color:#c8362f;box-shadow:inset 0 0 0 1px rgba(217,58,58,.30)}
.night .appstat.s-new{background:rgba(255,120,112,.16);color:#ff9a92;box-shadow:inset 0 0 0 1px rgba(255,120,112,.32)}
.appstat.s-seen{background:#e9e7f5;color:#5b4bb5}
.appstat.s-contact{background:var(--themeSoft);color:var(--theme)}
.appstat.s-meet{background:#e0f0ff;color:#1f5fa8}   /* 面接日確定 */
.appstat.s-start{background:#e6f7f0;color:#1c7a5a}  /* 出勤日確定 */
.appstat.s-trial{background:#fff0d6;color:#9a6800}
.appstat.s-joined{background:#e3f5e9;color:#1a7f66}
.night .appstat.s-seen{background:#2e2b45;color:#b6adf0}
.night .appstat.s-contact{background:#1e3d35;color:#7fe3c4}
.night .appstat.s-meet{background:#1c3350;color:#8fc4ff}
.night .appstat.s-start{background:#1b3d31;color:#8fe6c4}
.night .appstat.s-trial{background:#40331d;color:#ffd08a}
.night .appstat.s-joined{background:#1e3d35;color:#8fe6b5}
.night .apprank.none{background:#3a3a3c}

/* 応募：対応済みの折りたたみ */
.doneblk{margin:0}
.doneblk>summary{list-style:none;cursor:pointer;padding:11px 16px;color:var(--sub);
  font-size:12.5px;font-weight:800;letter-spacing:.02em}
.doneblk>summary::-webkit-details-marker{display:none}
.doneblk>summary::before{content:"▸ ";display:inline-block;transition:transform .15s}
.doneblk[open]>summary::before{content:"▾ "}
/* 応募：カテゴリの立ち位置チップ */
.stance{flex:0 0 auto;font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px;
  margin-left:6px;white-space:nowrap;color:#fff;background:var(--bad)}
.stance.ok{background:var(--good)} .stance.warn{background:var(--gold)}
.stance.mid{background:var(--sub)} .stance.ng{background:var(--warn)}
.appreg{font-size:9.5px;font-weight:800;padding:1.5px 6px;border-radius:6px;white-space:nowrap;
  color:#fff;background:var(--theme);opacity:.85}
/* 応募一覧：月間18日以上勤務希望の人だけ、名前の横に出す（2026-10-04 小泉指示）。色は採用目標の「月18日以上」と同じ */
.appdays18{display:inline-block;font-size:9.5px;font-weight:800;color:#4B3568;background:#EDE9F5;
  border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:1px;white-space:nowrap}
/* 応募一覧：本部ルールで3日間に進めない人（2026-10-08 小泉決定） */
.appgate{display:inline-block;font-size:9.5px;font-weight:800;color:#fff;background:var(--bad);
  border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:1px;white-space:nowrap}
/* 応募一覧：応募フォームの「どこで知りましたか」の回答を名前の横に出す（2026-10-06 岡崎さんの依頼） */
.appshain{display:inline-block;font-size:9.5px;font-weight:800;color:#8A4B00;background:#FFEBCC;
  border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:1px;white-space:nowrap}
.approute{display:inline-block;font-size:9.5px;font-weight:800;color:#1F5F5B;background:#DDF0EE;
  border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:1px;white-space:nowrap}
.appsparkbadge{font-size:10px;font-weight:900;padding:2px 7px;border-radius:7px;white-space:nowrap;
  color:var(--ink);background:var(--goldSoft);box-shadow:inset 0 0 0 1px var(--gold)}

/* 応募：数値が長い行（n/m ＋ 右端チップ）。既定の .esval は30pxで折り返すため別扱い */
.esrow.apx .esval{width:auto;min-width:34px}
.esrow.apx .esbar{flex:1;min-width:48px}
.pctchip{flex:0 0 auto;font-size:10px;font-weight:700;color:var(--sub);white-space:nowrap;margin-left:2px}
.weaktag{display:inline-block;font-size:9.5px;font-weight:800;color:#fff;background:#d24b4b;
  border-radius:5px;padding:1px 5px;margin-left:5px;vertical-align:1px}
/* 応募：ランクを大きく出す */
.rankhead{display:flex;align-items:center;gap:12px;padding:10px 0 4px}
.rankbig{flex:0 0 52px;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  font-size:28px;font-weight:900;color:#fff;background:var(--bad);letter-spacing:-.02em}
.rankbig.S{background:var(--gold)} .rankbig.A{background:var(--good)}
.rankbig.B{background:var(--theme)} .rankbig.C{background:var(--bad)}
.rankmeta{flex:1;min-width:0;text-align:left}
.rankmain{font-size:17px;font-weight:800;line-height:1.3}
.ranksub{font-size:11.5px;color:var(--sub);line-height:1.5}

/* 選択中の .addbtn。⚠️ 以前これが無く、押しても見た目が変わらなかった（2026-08-21 小泉指摘）。
   塗り＋内側の枠＋太字で、暗い表示でも隣と見分けがつくようにする。 */
.addbtn.on{background:var(--theme);color:#fff;box-shadow:inset 0 0 0 2px var(--theme);font-weight:800}
.addbtn.on.ok{background:var(--good);box-shadow:inset 0 0 0 2px var(--good);color:#fff}
.addbtn.on.danger{background:var(--bad);box-shadow:inset 0 0 0 2px var(--bad);color:#fff}
.night .addbtn.on{background:var(--theme);color:#fff;box-shadow:inset 0 0 0 2px var(--theme2)}
.night .addbtn.on.ok{background:#2f8a54;color:#fff;box-shadow:inset 0 0 0 2px #8ede98}
/* 押せることが分かるように、未選択にも薄い枠を出す */
.addbtn{box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.night .addbtn{box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}

/* ⚠️ .scroll は overflow-y だけ指定すると、横が visible ではなく auto に化けて
   指で左右に振れる（2026-08-21 小泉「アプリ化した画面が横揺れします」）。明示して止める。 */
.scroll{overflow-x:hidden}
/* モーダルが端末の上端（時計・ノッチ）に潜り込んで、名前とランクが隠れていた */
.modal{padding-top:max(16px, calc(env(safe-area-inset-top) + 10px));
  padding-bottom:max(16px, calc(env(safe-area-inset-bottom) + 10px))}
.modal .box{text-align:left}
/* 応募：どう扱うか（ランクを大きく・色をつける） */
.judge{background:var(--themeSoft);border-radius:12px;padding:13px 14px;margin:8px 0 4px;text-align:left}
.judgetop{display:flex;align-items:center;gap:13px}
.judgetx{flex:1;min-width:0}
.judgeact{font-size:17px;font-weight:850;line-height:1.35}
.judgekey{font-size:12px;color:var(--sub);margin-top:10px;padding-top:9px;border-top:1px solid rgba(0,0,0,.08)}
.night .judge{background:#2b2b30}
.night .judgekey{border-top-color:rgba(255,255,255,.12)}
.judge .rankbig{flex:0 0 58px;width:58px;height:58px;font-size:31px}

/* 応募：3日間の見極め。「上の3つ／下の2つ」では指せていなかったので、見出しで区切る。
   未記録の必須は赤で示す（2026-08-21 小泉指摘）。 */
.grouphead{font-size:11.5px;font-weight:800;color:var(--sub);margin:14px 0 4px;text-align:left}
.grouphead.req{color:#d24b4b}
.reqmark{display:inline-block;font-size:9.5px;font-weight:800;color:#fff;background:#d24b4b;
  border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:1px}
.esrow.trow{align-items:center;padding:3px 0}
.esrow.trow .marks{display:flex;gap:5px;flex-shrink:0}
.addbtn.mk{padding:5px 11px;min-width:40px;text-align:center}
/* 未記録の必須ボタン＝赤い枠。押すと通常の選択色（塗り）に変わる */
.addbtn.need{box-shadow:inset 0 0 0 1.5px #d24b4b;color:#d24b4b;background:#fdecec}
.night .addbtn.need{background:#3a2224;color:#ff9a92;box-shadow:inset 0 0 0 1.5px #c0554f}
.addbtn.need.on{background:var(--theme);color:#fff;box-shadow:inset 0 0 0 2px var(--theme)}
.ednote.trialnote{text-align:left;font-size:12.5px;line-height:1.8;color:var(--sub);
  background:transparent;border-left:none;padding:2px 0 6px}
/* 記載例は薄く。3行入るように少し高く */
#trialwhy{min-height:96px;line-height:1.7}
#trialwhy::placeholder{color:var(--sub);opacity:.55;font-size:12.5px;line-height:1.8}
.night #trialwhy::placeholder{opacity:.5}
/* 応募：選んだ答え。BAN適合とずれている行は色を変える（2026-08-21 小泉） */
.esrow.ansrow{align-items:flex-start;padding:4px 0}
.esrow.ansrow .eslabel{flex:0 0 34%;font-weight:700}
.anstx{flex:1;min-width:0;font-size:12.5px;line-height:1.55;text-align:left}
.esrow.ansrow.low .eslabel,.esrow.ansrow.low .anstx{color:#d24b4b}
.offmark{display:inline-block;font-size:9px;font-weight:800;color:#fff;background:#d24b4b;
  border-radius:4px;padding:0 4px;margin-left:5px;vertical-align:1px}
/* 応募：総評 */
.appsparkcard{margin:16px 0 6px;padding:10px 12px;border:1px solid var(--gold);border-left-width:4px;
  border-radius:10px;background:var(--goldSoft);color:var(--ink);font-size:12.5px;font-weight:700;line-height:1.6;text-align:left}
.ednote.sohyo{text-align:left;font-size:14px;line-height:1.8}
.sohyolv{display:inline-block;font-size:13px;font-weight:800;color:#fff;border-radius:7px;padding:1px 9px;background:var(--good)}
.sohyolv.warn{background:var(--gold)} .sohyolv.ng{background:var(--warn)} .sohyolv.inv{background:var(--theme)}
.headnote{display:block;font-size:10.5px;font-weight:600;color:var(--sub);margin-top:2px}
.sohyop{margin:0 0 8px;line-height:1.85}
.sohyop:last-of-type{margin-bottom:4px}
/* モーダルを上からも閉じる */
/* ⚠️ float だと後ろの行が回り込んで、氏名や店名バッジが押し出される。
   高さ0の帯を sticky にして、その中にボタンを浮かせる（本文の折り返しに影響しない）。 */
.omclosebar{position:sticky;top:0;height:0;z-index:3}
.omclose{position:absolute;right:-6px;top:-8px;width:34px;height:34px;border:none;border-radius:50%;
  background:rgba(0,0,0,.06);color:var(--sub);font-size:16px;font-weight:800;cursor:pointer;line-height:34px;padding:0}
.omhead{padding-right:38px}
.night .omclose{background:rgba(255,255,255,.12);color:#d7d5d0}
/* 応募：いちばん大切にしていること（グラフの代わりに目立たせる） */
.topwant{background:var(--themeSoft);border-radius:12px;padding:12px 14px;margin:8px 0 2px;text-align:left}
.topwantlabel{font-size:11px;font-weight:800;color:var(--theme);letter-spacing:.04em}
.topwantword{font-size:20px;font-weight:900;line-height:1.4;margin-top:2px;color:var(--ink)}
.topwantcat{font-size:11.5px;color:var(--sub);margin-top:3px}
.night .topwant{background:#3a2e1e}
.night .topwantword{color:#f6d9b4}

/* スタッフ一覧の区切り（2026-08-21 小泉指示）＝育成方針の行が入ってカード1枚が縦に長くなり、
   隣の子との境目が見えなくなった。**カードの境目だけ濃く・太く**する
   （カードの中にある🎯の線＝.5px と差をつけて、どちらが境目か分かるように）。 */
.stfrow{border-bottom:1.5px solid #c7cad2}
.night .stfrow{border-bottom-color:#5b6364}
.stfrow:last-child{border-bottom:none}
/* 説明用サンプルの目印（本物の応募と取り違えないように） */
.samplechip{display:inline-block;font-size:9.5px;font-weight:800;color:#fff;background:#8e8e93;
  border-radius:5px;padding:1px 6px;margin-right:6px;vertical-align:1px;letter-spacing:.02em}
.samplebar{margin:8px 0;padding:9px 12px;border-radius:9px;text-align:left;font-size:12px;line-height:1.7;
  color:#6b6b70;background:repeating-linear-gradient(135deg,#f0eff2,#f0eff2 8px,#e7e6ea 8px,#e7e6ea 16px)}
.night .samplebar{color:#b9b7bd;background:repeating-linear-gradient(135deg,#2c2c31,#2c2c31 8px,#333338 8px,#333338 16px)}
/* 本人の気持ち：「続けたい」を大きく */
.wantbox{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.wantsub{display:flex;gap:7px}
.wantsub .addbtn{flex:1;padding:11px 0;text-align:center;font-size:12.5px}
.addbtn.wantbig{width:100%;padding:17px 0;font-size:16px;font-weight:800;text-align:center;border-radius:12px}
/* メモ欄 */
#trialmemo{min-height:72px;line-height:1.7}
#trialmemo::placeholder{color:var(--sub);opacity:.55;font-size:12.5px;line-height:1.8}
/* LINE登録済＝進行とは別の印（同時に立つ） */
.addbtn.lineflag{background:#e8f7ec;color:#1f7a44;box-shadow:inset 0 0 0 1.5px #b7e3c6}
.addbtn.lineflag.on{background:#06c755;color:#fff;box-shadow:inset 0 0 0 2px #06c755}
.night .addbtn.lineflag{background:#1e3a28;color:#8ede98;box-shadow:inset 0 0 0 1.5px #2f6b45}
.night .addbtn.lineflag.on{background:#06c755;color:#fff;box-shadow:inset 0 0 0 2px #35e07e}
.applinechip{font-size:9.5px;font-weight:800;padding:1.5px 6px;border-radius:6px;white-space:nowrap;color:#fff;background:#06c755}
/* LINEが「付いていない」ことは、空白では伝わらない（2026-09-10 小泉指示）。
   未登録は、応募から何日経ったかを出す。3日で注意色、1週間で警告色（1週間超は下へまとまる）。 */
.applinewait{font-size:9.5px;font-weight:800;padding:1.5px 6px;border-radius:6px;white-space:nowrap;
  color:var(--sub);background:var(--sep)}
.applinewait.warn{color:#9a6800;background:#fff0d6}
.applinewait.bad{color:#fff;background:var(--warn)}
.night .applinewait.warn{color:#ffd08a;background:#40331d}
/* 辞めた理由のバッジ（試用期間の離脱・退職の凍結で共通／2026-09-28） */
.exitbadge{font-size:9.5px;font-weight:800;padding:1.5px 6px;border-radius:6px;white-space:nowrap;color:#6b4f8a;background:#efe7f7}
.night .exitbadge{color:#d4bdf0;background:#352a44}
/* 利用率の前日比（2026-08-22）＝バッジの中に矢印だけ。差の数字は出さない（毎日ほとんど動かないため）。 */
.usearw{margin-left:5px;font-weight:900}
.usearw.up{opacity:.95}
.usearw.dn{opacity:.95}
.usearw.eq{opacity:.7}
/* バイトルトークの公式アイコン（2026-08-23）＝どのアプリの話かを一発で伝える。
   画像は同梱（img/baitorutalk.png・144px）。外部URLは踏まない。 */
.btlogo{display:flex;justify-content:center;margin:2px 0 8px}
.btlogo img{width:56px;height:56px;border-radius:14px;display:block;
  box-shadow:0 2px 8px rgba(0,0,0,.18)}

/* 👑 店長レベル（オーナーのみ・2026-08-27）。項目を段で揃える＝人によって位置が動かない（作法11・§f）。
   色はすべてトークン経由＝ライト/ダークどちらでも読める（作法21）。 */
/* .row は display:flex（横並び）なので、この行だけ縦積みに戻す */
.mlvrow{display:block;cursor:pointer;padding:13px 16px}
.mlvtop{display:flex;align-items:baseline;gap:8px}
.mlvname{font-weight:800;font-size:15px;min-width:0;flex:1}
.mlvname .s{font-weight:700;font-size:12px;color:var(--sub)}
.mlvlv{flex-shrink:0;font-size:23px;font-weight:900;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.mlvbars{margin-top:9px;display:flex;flex-direction:column;gap:5px}
.mlvbar{display:flex;align-items:center;gap:8px}
.mlvbar .l{font-size:11.5px;font-weight:800;color:var(--sub);width:26px;flex-shrink:0}
.mlvbar .g{flex:1;height:7px;border-radius:4px;background:var(--themeSoft);overflow:hidden}
.mlvbar .g i{display:block;height:100%;background:var(--theme);border-radius:4px}
.mlvbar .v{font-size:12px;font-weight:800;color:var(--ink);width:52px;text-align:right;
  flex-shrink:0;font-variant-numeric:tabular-nums}
.mlvbar .v small{font-weight:700;color:var(--sub);font-size:10.5px}
.mlvstats{margin-top:9px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.mlvstats>div{display:flex;flex-direction:column;gap:1px;min-width:0}
.mlvstats .k{font-size:10px;color:var(--sub);font-weight:700;line-height:1.3}
.mlvstats b{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.mlvnote{margin-top:7px;font-size:11px;font-weight:700;color:var(--sub)}
/* 内訳モーダル */
.mlvdetail{width:100%;border-collapse:collapse;margin:10px 0 2px;text-align:left}
.mlvdetail td{padding:7px 0;border-bottom:.5px solid var(--sep);vertical-align:top;
  font-size:13px;font-weight:700}
.mlvdetail tr:last-child td{border-bottom:none}
.mlvdetail .src{display:block;font-size:11px;font-weight:600;color:var(--sub);margin-top:2px;line-height:1.5}
.mlvdetail .pt{text-align:right;white-space:nowrap;color:var(--theme);font-weight:900;
  font-size:15px;font-variant-numeric:tabular-nums;padding-left:10px}
.mlvdetail .pt small{font-size:11px;font-weight:700;color:var(--sub)}
.mlvdetail .mlvsec td{font-size:11.5px;font-weight:800;color:var(--sub);
  padding-top:12px;border-bottom:none;letter-spacing:.2px}

/* 📅 年間予定への入り口（2026-08-30 小泉指示）＝店長・社員/管理者画面の最下段。
   入り口を増やさず、閲覧は別画面（ban-schedule）に飛ぶ。見た目は利用率バッジと同じ蛍光ペンの作法。 */
.schedwrap{text-align:center;margin-top:18px}
.schedbtn{display:inline-block;padding:12px 22px;border-radius:12px;text-decoration:none;
  font-size:15px;font-weight:800;letter-spacing:.2px;
  background:rgba(57,232,148,.28);color:#0a7a48;
  box-shadow:0 0 0 1px rgba(57,232,148,.5), 0 0 14px rgba(57,232,148,.45)}
.night .schedbtn{background:rgba(80,255,178,.2);color:#7dffc4;
  box-shadow:0 0 0 1px rgba(80,255,178,.4), 0 0 16px rgba(80,255,178,.34)}

/* アンケート履歴。既存のカード・チップの寸法に合わせ、色はテーマ変数だけで切り替える。 */
.survey-history-entry{margin-top:12px;margin-bottom:10px}
.survey-history-entry .row{width:100%;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.survey-entry-icon{font-size:24px;flex:0 0 auto}
.survey-loading,.survey-empty{padding:28px 12px;text-align:center;color:var(--sub);font-size:13px;font-weight:700;line-height:1.7}
.survey-empty.error{color:var(--danger);background:var(--dangerSoft);border-radius:12px;margin-top:12px}
.survey-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:14px 0 10px;padding:4px;background:var(--bg);border-radius:12px}
.survey-tabs button,.survey-mode button{border:1px solid transparent;border-radius:9px;background:transparent;color:var(--sub);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.survey-tabs button{padding:10px 6px}
.survey-tabs button.on,.survey-mode button.on{background:var(--themeSoft);border-color:var(--theme);color:var(--accent)}
.survey-history-body{min-height:190px;text-align:left}
.survey-mode{display:flex;gap:5px;margin:2px 0 10px}
.survey-mode button{padding:7px 13px;border-color:var(--sep)}
.survey-store-chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.survey-store-chips::-webkit-scrollbar{display:none}
.survey-chip{flex:0 0 auto;border:1px solid var(--sep);border-radius:999px;padding:7px 12px;background:var(--card);color:var(--sub);font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.survey-chip.on{border-color:var(--theme);background:var(--themeSoft);color:var(--accent)}
.survey-period-wrap{margin-top:10px}
.survey-period{display:flex;align-items:center;justify-content:space-between;width:100%;margin:0 0 6px;padding:8px 10px;border:1px solid var(--sep);border-radius:10px;background:var(--bg);color:var(--sub);font:inherit;font-size:12px;font-weight:800;letter-spacing:.03em;text-align:left;cursor:pointer}
.survey-period-chev{color:var(--accent);font-size:14px;line-height:1}
.survey-period-body[hidden]{display:none}
.survey-missing{margin:2px 3px 10px;color:var(--sub);font-size:10.5px;font-weight:700;line-height:1.5}
.survey-card,.survey-pulse-row,.survey-people{margin-bottom:8px;border:1px solid var(--sep);border-radius:13px;background:var(--card);overflow:hidden}
.survey-card.private{background:var(--bg)}
.survey-summary,.survey-person-row{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.survey-summary.static{cursor:default}
.survey-summary{padding:12px}
.survey-main,.survey-person-row>span:first-child{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}
.survey-main b,.survey-person-row b{font-size:14px}.survey-main small,.survey-person-row small{color:var(--sub);font-size:11px;font-weight:700}
.survey-total{display:flex;flex-direction:column;align-items:flex-end;gap:1px}.survey-total small{color:var(--sub);font-size:10px;font-weight:700}
.survey-total b,.survey-person-row>strong{color:var(--accent);font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}
.survey-total em,.survey-person-row em{font-size:10px;font-style:normal;color:var(--sub);margin-left:2px}
.survey-private{padding:5px 9px;border-radius:8px;background:var(--sep);color:var(--sub);font-size:11px;font-weight:800;white-space:nowrap}
.survey-breakdown{padding:2px 12px 10px;border-top:1px solid var(--sep)}
.survey-breakdown.private-note{padding-top:10px;color:var(--sub);font-size:11.5px;line-height:1.6}
.survey-q{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--sep);font-size:12px;line-height:1.5}
.survey-q:last-child{border-bottom:0}.survey-q>span{display:flex;flex:1;gap:7px;color:var(--sub)}.survey-q>span b{color:var(--ink);flex:0 0 22px}
.survey-q strong{color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums}.survey-q.low span,.survey-q.low span b,.survey-q.low strong{color:var(--danger)}
.survey-back{border:0;background:transparent;color:var(--accent);font:inherit;font-size:12px;font-weight:800;padding:4px 0 9px;cursor:pointer}
.survey-person-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:2px 3px 8px}.survey-person-head b{font-size:16px}.survey-person-head span{color:var(--sub);font-size:11.5px;font-weight:700}
.survey-person-row{padding:11px 12px;border-bottom:1px solid var(--sep);border-radius:0}.survey-person-row:last-child{border-bottom:0}
.survey-person-period{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px}.survey-person-period span{color:var(--accent);font-size:13px;font-weight:800}
.survey-pulse-row{padding:12px}
.survey-pulse-row.low{border-color:var(--danger);background:var(--dangerSoft)}
.survey-pulse-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.survey-pulse-head>span{display:flex;min-width:0;flex-direction:column;gap:2px}.survey-pulse-head b{font-size:14px}.survey-pulse-head small{color:var(--sub);font-size:11px;font-weight:700}
.survey-pulse-head>em{flex:0 0 auto;padding:4px 7px;border-radius:7px;background:var(--danger);color:var(--card);font-size:10px;font-style:normal;font-weight:900}
.survey-pulse-scores{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.survey-pulse-scores span{padding:5px 8px;border-radius:8px;background:var(--bg);color:var(--sub);font-size:11.5px;font-weight:700}.survey-pulse-scores b{color:var(--ink);font-size:13px}
.survey-note{margin-top:8px;padding:9px 10px;border-radius:9px;background:var(--bg);color:var(--ink);font-size:12px;line-height:1.6;white-space:pre-wrap}
@media(max-width:390px){.survey-tabs button{font-size:11.5px}.survey-summary{gap:7px}.survey-pulse-head{flex-direction:column}.survey-pulse-head>em{align-self:flex-start}}
/* 応募詳細：場面設問の両選択肢表示。選んだ方＝✓＋濃い字、選ばなかった方＝薄く。 */
.ansopt{display:flex;align-items:flex-start;gap:7px;padding:4px 0 4px 4px;font-size:12.5px;line-height:1.55;color:var(--sub);opacity:.62}
.ansopt.on{color:var(--ink);opacity:1;font-weight:700}
.anschk{flex:0 0 14px;color:var(--accent);font-style:normal}
.ansrow.low .ansopt.on{color:var(--bad, #C24A40)}
.ansopts{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
/* 場面設問：各問がどの軸（素直さ/チーム力/主体性/活気）の設問かを示すタグ */
/* 軸タグ：色・大きさは全軸共通（2026-08-31 小泉指示） */
.axistag{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:10px;font-size:11px;font-weight:700;letter-spacing:.02em;vertical-align:1px;background:#EDE9F5;color:#4B3568}
.night .axistag{background:#2D2142;color:#B89EDF}
.essub.axishead{text-align:left;margin:12px 0 2px}
.essub.axishead .axistag{margin-left:0;font-size:11px;padding:2px 9px}
/* 時給申請：フォーム転記用の情報カード（名前・従業員番号・コピー） */
.wageinfocard{background:var(--bg);border:1px solid var(--sep);border-radius:10px;padding:11px 13px;margin:0 0 13px;text-align:left}
.wageinfolabel{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--sub);margin-bottom:6px}
.wageinforow{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--sep)}
.wageinforow:last-child{border-bottom:0}
.wik{font-size:12px;color:var(--sub);font-weight:700}
.wiv{display:flex;align-items:center;gap:8px;font-size:14px}
.winum{font-size:17px;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--accent)}
.winone{color:var(--bad,#C24A40)}
.winonenote{font-size:10px;color:var(--sub)}
.wagecopy{font-size:10px;font-weight:700;border:1px solid var(--sep);background:var(--card);color:var(--sub);border-radius:7px;padding:4px 8px;cursor:pointer}
.wagecopy:hover{border-color:var(--accent);color:var(--accent)}
.winumchip{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;font-size:10px;font-weight:700;background:var(--sep);color:var(--sub);font-variant-numeric:tabular-nums}
.winumchip.none{color:var(--bad,#C24A40)}

/* 下のナビを2段にする（2026-09-06 小泉）。1段3つ＝1つ約110pxで「スキルツリー」も折り返さない。
   ⚠️ 矢印は帯の右端・帯の中に置く。中央に浮かせると「進捗」のアイコンに重なる。
      右端ぶんの幅を padding で先に抜いておくので、3つでも6つでも項目は等間隔で、上下段も揃う。 */
.nav{flex-wrap:wrap;position:relative;padding-top:6px;padding-right:52px}
.nav>div{flex:0 0 33.3333%}
/* 矢印は帯の右端・帯の中。枠も塗りも持たせず、線だけで描く。
   色は項目のラベルと同じ --sub＝帯と同系の薄い色。目立たせるのは大きさと太さで足りる。 */
.navtog{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;z-index:2;
  display:flex;align-items:center;justify-content:center}
.navtog::before{content:'';width:13px;height:13px;
  border-left:2.5px solid var(--sub);border-top:2.5px solid var(--sub);border-radius:1px;
  transform:rotate(45deg) translate(2px,2px)}
.navtog.open::before{transform:rotate(-135deg) translate(2px,2px)}
.navtog:active{opacity:.5}
.navtog:focus-visible{outline:2px solid var(--sub);outline-offset:-6px;border-radius:12px}
/* 閉じているとき（.nav に .open なし）は薄い帯にする（2026-09-07 小泉指示）。
   アイコンと文字を横1行に並べて高さを詰める。ひらくと従来の縦積み（アイコンの下に文字）に戻る。
   ⚠️ 下端の余白＝2026-09-19 に「安全域から12px引いた分だけ残す」に変更（上の .nav を見る）。
   ホームバーに文字が重ならない範囲で、できるだけ下げる（小泉指示）。 */
/* 2026-10-14 小泉「折りたたんだメニューバーが狭いので広げて」＝帯の高さを約22px→約40pxに。横1行の形は保つ */
.nav:not(.open):not(.flat){padding-top:8px;flex-wrap:nowrap;align-items:center}
.nav:not(.open):not(.flat)>div{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;padding-bottom:8px}
.nav:not(.open):not(.flat)>div .i{display:inline;font-size:20px;margin-bottom:0}
.nav:not(.open):not(.flat)>div .navbadge{position:static;margin-left:2px}
.nav:not(.open):not(.flat) .navtog{top:20px}   /* 1行の中心に合わせる（開いている時は帯全体の中心） */
/* 店長・管理者＝横並び1列（2026-09-08 小泉指示で2段から戻した）。矢印なし・全タブ常時表示。
   項目数（5〜6）で均等割り＝33.3%の2段指定を打ち消す */
.nav.flat{padding-right:8px}
.nav.flat>div{flex:1 1 0;min-width:0}
/* ⚠️ iPad・PCの店長／管理者のバーは、**アイコンと文字を1行**に並べて帯を薄くする
   （2026-09-19 小泉「下はギリギリまで下げて欲しい メニューバーを」）。
   閉じているスタッフのバー（2026-09-07 小泉「薄い帯にする」）と同じ形。
   ⚠️ スマホ（狭い画面）には効かせない＝「本日の課題」などが1行に収まらず崩れるため。 */
@media (min-width:700px){
  .nav.flat{padding-top:3px}
  .nav.flat>div{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;padding-bottom:2px}
  .nav.flat>div .i{display:inline;font-size:17px;margin-bottom:0}
  .nav.flat>div .navbadge{position:static;margin-left:3px}
}

/* ===== シフト（らくしふ置き換え・2026-09-06）=====
   1日1行にたたむ。タップして初めて開く。3ボタンを常時ひらくと15日で画面3枚ぶんの縦になり、
   提出ボタンまで届く前にやめてしまう。
   前倒し提出を許すので回収が何本も同時に開く＝上に期間のカードを並べて選ばせる。
   下のナビが5→6項目になったぶんだけ字を詰める。既存のラベルは変えない（用語の統一は別件） */

/* 期間をえらぶ（横スクロール。矢印ボタンは指では押しにくいので置かない） */
.sh-pickhd{margin:14px 20px 0;font-size:13px;color:var(--sub);font-weight:600}
/* ⚠️ scroll-snap は付けない。iOS Safariが「選んだ期間を左端へ寄せる」処理を押し戻す。 */
.sh-picker{display:flex;gap:10px;overflow-x:auto;padding:10px 14px 4px;-webkit-overflow-scrolling:touch}
.sh-pcard{flex:0 0 auto;width:150px;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:12px 10px;border:1.5px solid var(--sep);border-radius:14px;background:var(--card);cursor:pointer;text-align:center}
.sh-pk{font-size:11px;color:var(--sub);font-weight:600}
.sh-pd{font-size:14px;font-weight:700;line-height:1.45}
.sh-pd i{display:block;font-style:normal;font-size:11px;color:var(--sub);line-height:1}
.sh-ps{font-size:12px;color:var(--sub);font-weight:700}
.sh-pl{font-size:10px;color:var(--sub)}
/* 選んでいる期間は太枠。色だけだと、赤（締切切れ）や破線（配信ずみ）と重なったとき
   どれを選んでいるのか分からなくなる。太さは色に邪魔されない。
   box-sizing:border-box なので、枠が太くなってもカードの大きさは変わらない＝並びがずれない。 */
.sh-pcard.on{border-color:var(--theme);border-width:3px;background:var(--themeSoft);
  box-shadow:0 2px 8px rgba(0,0,0,.10)}
.sh-pcard.on .sh-ps{color:var(--theme);font-weight:800}
/* 締切を過ぎた期間は赤。押せるが、開いても読むだけになる */
.sh-pcard.over{border-color:var(--danger);background:var(--dangerSoft)}
.sh-pcard.over .sh-pd,.sh-pcard.over .sh-ps,.sh-pcard.over .sh-pl{color:var(--danger)}
.sh-pcard.over.on{border-color:var(--danger)}
/* 店長が組みはじめた回・配信ずみの回は、読むだけ。赤ではない（本人の落ち度ではない） */
.sh-pcard.closed{border-style:dashed}
.sh-pcard.closed .sh-ps{color:var(--sub)}

.sh-cyc{background:var(--card);margin:10px 14px;border-radius:14px;padding:14px 16px}
.sh-cyc.closed{background:var(--dangerSoft)}
/* 希望を出す／確定シフト の切り替え */
.sh-view{display:flex;gap:6px;margin:12px 14px 0;background:var(--sep);padding:4px;border-radius:12px}
.sh-view button{flex:1;padding:9px;border:0;border-radius:9px;background:transparent;color:var(--sub);font-weight:700;font-size:14px;cursor:pointer}
.sh-view button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.sh-cychd{font-size:15px;font-weight:700;display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.sh-dl{font-size:12px;color:var(--sub);font-weight:600}
.sh-dl.soon{color:var(--danger)}
.sh-prog{margin-top:4px;font-size:12px;color:var(--sub)}
.sh-prog b{color:var(--ink);font-size:13px}
.sh-done{color:var(--good);font-weight:700}
.sh-overmsg{margin-top:10px;font-size:12px;color:var(--danger);font-weight:600;line-height:1.7}
.sh-cycbtns{display:flex;gap:8px;margin-top:10px}
.sh-bulk{flex:1;padding:10px 6px;border:1px solid var(--theme);border-radius:11px;background:var(--themeSoft);color:var(--theme);font-weight:700;font-size:13px;cursor:pointer}
.sh-bulk.ghost{border-color:var(--sep);background:var(--card);color:var(--sub)}

.sh-sec{margin:22px 20px 6px;font-size:13px;font-weight:800;color:var(--sub)}
.sh-sec span{font-weight:600}
.sh-list{background:var(--card);margin:10px 14px;border-radius:14px;overflow:hidden}
.sh-list.closed{opacity:.72}
/* 1行＝日付・中身・右端。指が乗る高さ（44px以上）を保つ */
.sh-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:.5px solid var(--sep);cursor:pointer;min-height:48px}
.sh-row:last-child{border-bottom:0}
.sh-row.un{background:var(--themeSoft)}
.sh-day{min-width:56px;font-size:14px;font-weight:800;line-height:1.2}
.sh-day span{font-size:11px;color:var(--sub);font-weight:700;margin-left:3px}
.sh-day.sat,.sh-day.sat span{color:#2f6f9e}
.sh-day.sun,.sh-day.sun span{color:var(--danger)}
.sh-val{flex:1;font-size:15px;font-weight:600}
.sh-val i{font-style:normal;color:var(--sub);font-weight:500;font-size:13px}
.sh-val em{display:block;font-style:normal;font-size:11px;color:var(--sub);font-weight:500}
.sh-val em.hol{color:var(--danger);font-weight:700}
/* 他店へのヘルプの行（2026-09-21）。自店の行と見分けがつくように左に帯＋店名を上に出す */
.sh-val em.sh-help{color:var(--warn);font-weight:800;font-size:11.5px;margin-bottom:2px}
.sh-row.away{background:#fff8ee;box-shadow:inset 3px 0 0 var(--warn)}
.night .sh-row.away{background:#3c2e1d;box-shadow:inset 3px 0 0 #ffb454}
.night .sh-val em.sh-help{color:#ffd59a}
/* 応援先がまだ確定していない日（送り出した店の確定で先に出しているもの・2026-09-29） */
.sh-pend{display:block;font-style:normal;font-weight:700;font-size:11px;color:var(--sub);margin-top:1px}
.night .sh-pend{color:#c9b9a4}

/* ===== 確定シフト：週ごと・時間の長さ（2026-09-21 小泉「Cで。」）=====
   ⚠️ 棒の色は BANsuke と同じ家族にしない（あちらは店長の道具）。
   ここは「自分の店＝テーマ色／応援＝橙」の2色だけ。増やすと読む色が増える。 */
.shw{margin:12px 14px 0}
.shw-hd{display:flex;justify-content:space-between;align-items:baseline;padding:0 2px 6px;gap:8px}
.shw-hd b{font-size:13px;font-weight:800}
.shw-hd span{font-size:11.5px;color:var(--sub);font-weight:700;white-space:nowrap}
.shw-body{background:var(--card);border-radius:14px;overflow:hidden}
.shw-row{display:flex;align-items:center;gap:9px;padding:9px 12px;border-top:.5px solid var(--sep);min-height:46px}
.shw-row:first-child{border-top:0}
.shw-row.off{opacity:.55}
.shw-row.tap{cursor:pointer}
.shw-row.tap:active{background:var(--themeSoft)}
.shw-row.today{box-shadow:inset 3px 0 0 var(--accent)}
.shw-dy{min-width:46px;font-size:12.5px;font-weight:800}
.shw-dy span{font-size:10px;color:var(--sub);margin-left:2px}
.shw-dy.sat,.shw-dy.sat span{color:#2f6f9e}
.shw-dy.sun,.shw-dy.sun span{color:var(--danger)}
.shw-track{flex:1;height:26px;border-radius:7px;background:rgba(127,127,127,.14);position:relative;overflow:hidden}
.shw-track.big{height:40px}
.shw-bar{position:absolute;top:0;bottom:0;border-radius:7px;background:var(--theme);color:#fff;
  display:flex;flex-direction:column;justify-content:center;padding:0 8px;
  font-size:10.5px;font-weight:800;line-height:1.15;white-space:nowrap;overflow:hidden}
.shw-track.big .shw-bar{border-radius:9px;font-size:11px;padding:0 6px}
.shw-bar small{font-size:9.5px;font-weight:700;opacity:.88;line-height:1.1}
.shw-bar.away{background:var(--warn);color:#4a2f00}
.shw-no{font-size:11.5px;color:var(--sub);padding-left:2px}
.shw-scale{display:flex;justify-content:space-between;padding:7px 12px 0;font-size:10px;color:var(--sub)}
.shw-scale span{flex:1;text-align:left}
.shw-scale span:last-child{flex:0;text-align:right;white-space:nowrap}

/* 1日ビュー */
.shd{margin:12px 14px 0}
.shd-back{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:var(--accent);
  background:none;border:0;padding:4px 2px 10px;font-family:inherit}
.shd-d{font-size:19px;font-weight:800}
.shd-d em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--danger);margin-left:8px}
.shd-s{font-size:12px;color:var(--sub);margin:2px 0 10px}
.shd-body{background:var(--card);border-radius:14px;padding:12px 12px 8px}
.shd-line{display:flex;align-items:center;gap:8px;margin-top:6px}
.shd-line.me{margin-top:0}
.shd-nm{min-width:74px;text-align:right;font-size:11.5px;font-weight:700;color:var(--sub);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shd-line.me .shd-nm{color:var(--ink);font-weight:800}
.shd-lb{font-size:11px;font-weight:800;color:var(--sub);margin:14px 0 2px 82px}
.shd .shw-scale{padding:8px 0 0 82px}
.shd-txt{display:flex;gap:10px;align-items:baseline;padding:8px 2px;border-top:.5px solid var(--sep)}
.shd-txt b{font-size:15px;font-weight:800;white-space:nowrap}
.shd-txt em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--warn)}
.shd-txt span{font-size:12px;color:var(--sub)}
.shd-note{font-size:11.5px;color:var(--sub);line-height:1.7;padding:10px 2px 2px}
.night .shw-bar{color:#08231d}
.night .shw-bar.away{background:#ffb454;color:#4a2f00}
.night .shd-txt em{color:#ffd59a}
.sh-row.off .sh-val{color:var(--sub)}
.sh-x{border:0;background:transparent;color:var(--sub);font-size:19px;line-height:1;padding:6px 4px;cursor:pointer}
.sh-x.ph{opacity:.35;font-size:16px}
.sh-foot{text-align:center;font-size:12px;color:var(--sub);margin:2px 20px 24px}
.sh-empty{margin:14px;padding:22px 16px;background:var(--card);border-radius:14px;text-align:center;color:var(--sub);font-size:13px;line-height:1.8}

/* モーダル（1日ぶん／まとめて入れる／パターン登録） */
.shm-seg{display:flex;gap:8px;margin:16px 0 4px}
.shm-seg button{flex:1;padding:13px;border:1px solid var(--sep);border-radius:12px;background:var(--card);color:var(--sub);font-weight:700;font-size:15px;cursor:pointer}
.shm-seg button.on{background:var(--good);border-color:var(--good);color:#fff}
.shm-seg button.on.ng{background:var(--bad);border-color:var(--bad)}
.shm-pats{display:flex;gap:6px;margin-top:12px}
.shm-pats button{flex:1;padding:8px 4px;border:1px solid var(--theme);border-radius:10px;background:var(--themeSoft);color:var(--theme);font-weight:700;font-size:12px;line-height:1.3;cursor:pointer}
.shm-pats button span{display:block;font-size:10px;font-weight:600;opacity:.85}
.shm-times{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px}
.shm-times input{padding:10px 12px;border:1px solid var(--sep);border-radius:11px;font-size:16px;background:var(--card);color:var(--ink)}
.shm-note{width:100%;margin-top:14px;padding:11px 12px;border:1px solid var(--sep);border-radius:11px;font-size:14px;background:var(--card);color:var(--ink)}
.shp-row{display:flex;align-items:center;gap:6px;margin-top:10px}
.shp-n{width:18px;font-weight:800;color:var(--sub);font-size:13px}
.shp-row input[type=text]{flex:1;min-width:0;padding:9px 10px;border:1px solid var(--sep);border-radius:10px;font-size:13px;background:var(--card);color:var(--ink)}
.shp-row input[type=time]{padding:9px 8px;border:1px solid var(--sep);border-radius:10px;font-size:13px;background:var(--card);color:var(--ink)}
.shp-del{border:0;background:transparent;color:var(--danger);font-size:11px;font-weight:700;cursor:pointer;padding:4px}
.shp-del.ph{width:34px}
.night .shm-seg button,.night .sh-pcard{background:transparent}

/* ⚠️ 空欄＝休み（2026-09-06 小泉）。「まだ答えていない日」の色分けはやめた。
   意味が同じものを、見た目で違うものに見せない。 */
.sh-row.un{background:var(--card)}

/* ===== 確定シフト：みんなの表（2026-09-07 小泉）=====
   ⚠️ 出すのは**名前と時間だけ**。ランク・時給・理由のメモは出さない。 */
.sh-fixmode{display:flex;gap:6px;margin:10px 14px 0;background:var(--sep);padding:3px;border-radius:11px}
.sh-fixmode button{flex:1;padding:7px;border:0;border-radius:9px;background:transparent;
  color:var(--sub);font-weight:700;font-size:13px;cursor:pointer}
.sh-fixmode button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.sh-all{margin:12px 14px 0;display:flex;flex-direction:column;gap:8px}
.sh-allday{border:1px solid var(--sep);border-radius:12px;background:var(--card);padding:9px 11px}
.sh-allday.today{border-color:var(--theme);background:var(--themeSoft);box-shadow:0 0 0 1px var(--theme)}
.sh-alldd{display:flex;align-items:baseline;gap:6px;font-size:14px;font-weight:800;color:var(--ink)}
.sh-alldd span{font-size:11.5px;color:var(--sub);font-weight:700}
.sh-alldd.sun{color:var(--danger)} .sh-alldd.sat{color:#3a6ea8}
.sh-alldd em{font-style:normal;font-size:10.5px;font-weight:800;color:#fff;background:var(--theme);
  border-radius:5px;padding:1px 6px}
.sh-alldd i{font-style:normal;font-size:11px;color:var(--danger);font-weight:700}
.sh-allwho{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.sh-who{display:inline-flex;flex-direction:column;line-height:1.2;font-size:12.5px;font-weight:700;
  color:var(--ink);background:var(--bg);border:1px solid var(--sep);border-radius:8px;padding:4px 8px}
.sh-who i{font-style:normal;font-size:11px;font-weight:600;color:var(--sub);
  font-variant-numeric:tabular-nums}
.sh-who.me{border-color:var(--theme);background:var(--themeSoft);color:var(--theme)}
.sh-who.me i{color:var(--theme);opacity:.85}
/* ⚠️ ダークでは「自分」の文字が沈んでいた（--theme は暗い側の緑）。
   このアプリの決まりどおり、文字に使うときは明るい側（--accent）へ振り替える（[[実装の作法]] §21）。
   ライトの見え方は変えない。 */
.night .sh-who.me{color:var(--accent)}
.night .sh-who.me i{color:var(--accent);opacity:.9}
/* 名前の右にポジションの札（2026-09-15 小泉「自分以外も名前、ポジションが表示されるように」）。
   ⚠️ 色はBANsukeと同じ家族＝ホール緑・キッチン橙。店長が両方の画面を行き来しても同じ意味に見えるように。
   ⚠️ ダークでは文字を明るい側に振り替える（暗い面の上で沈むため）。 */
.sh-nm{display:inline-flex;align-items:center;gap:5px}
.sh-pos{font-style:normal;font-size:9.5px;font-weight:800;line-height:1.7;padding:0 5px;
  border-radius:6px;border:1px solid currentColor;white-space:nowrap}
.sh-pos.hall{color:#1d7a5a;background:rgba(0,189,126,.13)}
.sh-pos.kitchen{color:#9a4e06;background:rgba(255,122,24,.14)}
.night .sh-pos.hall{color:#7fe0bd;background:rgba(0,189,126,.20)}
.night .sh-pos.kitchen{color:#ffc089;background:rgba(255,138,40,.22)}
.sh-none{font-size:12px;color:var(--sub)}

/* 📅 月の出勤日数の約束バッジ（2026-09-18）。18日以上＝時給＋200円のライン */
.daysbadge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:20px;cursor:pointer;border:1px solid transparent}
.daysbadge.hi{background:#E6F2EA;color:#2A6B45;border-color:#B9DCC6}
.daysbadge.lo{background:#EEF1F5;color:#4A5568;border-color:#D6DCE5}
.daysbadge.none{background:transparent;color:#8A94A6;border-color:#D6DCE5;border-style:dashed}
.daysbadge:active{opacity:.7}

/* ポジション選択の逃げ道（見るだけ）と、未選択の目印（2026-09-18） */
.btn.link.posskip{background:transparent;color:var(--sub);font-weight:600;margin-top:14px;text-decoration:underline}
.poschip.unset{background:transparent;border:1px dashed var(--theme)}

.omreason{margin-top:6px;padding:7px 10px;background:var(--card);border-left:3px solid var(--theme);border-radius:0 8px 8px 0;font-size:13px;line-height:1.6;color:var(--text,inherit);white-space:pre-wrap}

/* 応募詳細：BANとの相性％（2026-10-08 小泉「数値を目立たせていい」）。合否ではないのでテーマ色1色 */
.affcard{display:flex;align-items:center;gap:14px;margin-top:10px;padding:12px 16px;border-radius:14px;background:var(--card,#fff);border:1px solid var(--sep)}
.afflabel{font-size:12px;font-weight:800;color:var(--sub);writing-mode:horizontal-tb;flex:0 0 auto}
.affnum{font-size:44px;font-weight:900;line-height:1;color:var(--theme);flex:0 0 auto;font-variant-numeric:tabular-nums}
.affnum span{font-size:20px;margin-left:2px}
.affnote{font-size:11.5px;color:var(--sub);line-height:1.5;text-align:left}

/* 応募タブ：離脱の傾向を閉じられるように（2026-10-08 小泉） */
.dropblk>summary{list-style:none;cursor:pointer;display:flex;align-items:center}
.dropblk>summary::-webkit-details-marker{display:none}
.dropchev{margin-left:auto;font-size:13px;color:var(--sub)}
.dropchev::after{content:'開く ▾'}
.dropblk[open] .dropchev::after{content:'閉じる ▴'}

/* 🍚 賄い（2026-10-14） */
.mklist{margin:0 14px;display:flex;flex-direction:column;gap:8px}
.mkcard{background:var(--card);border-radius:14px;overflow:hidden}
.mkhead{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer}
.mkhead .tx{flex:1;min-width:0}
.mkhead .t{font-size:15.5px;font-weight:700;line-height:1.4}
.mkhead .s{font-size:12.5px;color:var(--sub);margin-top:2px;line-height:1.5}
.mkmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--sub);font-weight:600;margin-top:5px}
.mkchev{font-size:11px;color:var(--sub)}
.mkbody{padding:0 14px 14px;border-top:.5px solid var(--sep)}
.mksub{font-size:12px;font-weight:700;color:var(--sub);margin:12px 0 6px}
.mking{list-style:none;margin:0;padding:0}
.mking li{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:4px 0;border-bottom:.5px dashed var(--sep)}
.mking li span:last-child{color:var(--sub);flex-shrink:0}
.mksteps{margin:0;padding-left:20px;font-size:14px;line-height:1.65}
.mksteps li{margin-bottom:4px}
.mktips{margin-top:10px;font-size:13px;line-height:1.6;background:var(--bg);border-radius:10px;padding:8px 10px}
.mkdone{margin-top:12px;width:100%}
.mkreq{padding:0 0 12px}
.mkreq textarea{display:block;box-sizing:border-box;width:calc(100% - 28px);margin:10px 14px 8px;border:1.5px solid var(--line);border-radius:12px;padding:9px 11px;font-size:16px;font-family:inherit;line-height:1.5;resize:none;background:var(--card);color:var(--ink)}
.mkreq .addbtn{margin:0 14px;width:calc(100% - 28px)}
.mkdone,.mkreq .addbtn{font-size:14px;padding:10px 12px}
.mkwho{font-size:12px;font-weight:800;color:var(--theme);margin-bottom:2px}
/* アルバイトの下段が4つ（シフト・賄い・承認待ち・コーチ）のときは25%ずつ＝3段に折り返さない（2026-10-14） */
.nav:not(.flat)>div:nth-of-type(4):nth-last-of-type(4),
.nav:not(.flat)>div:nth-of-type(4):nth-last-of-type(4) ~ div{flex-basis:25%}
.mkgenre{margin:4px 14px 4px}
.mkweek{margin:4px 14px 8px}
.mkweek select{width:100%;font-size:16px;padding:9px 10px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-weight:700}
.mkview{margin:4px 14px 10px}
.mkbtns{display:flex;gap:8px}
.mkbtns .mkdone{flex:1}
.mkstockby{font-size:11.5px;color:var(--sub);font-weight:700;margin:6px 4px -4px}
.mknew{display:inline-block;background:#e01e5a;color:#fff;font-size:9.5px;font-weight:800;border-radius:6px;padding:1px 5px;margin-right:5px;vertical-align:1px}
.mkig{width:1.05em;height:1.05em;vertical-align:-.15em;flex-shrink:0}
.mksrc{margin-top:8px;font-size:12px;line-height:1.6;color:var(--sub)}
.mksrc a{color:var(--theme);font-weight:700}
.mksrc span{font-size:11px}
/* 🍽️ 賄いのお知らせ（2026-10-14） */
.mknews .mknhero{font-size:44px;text-align:center;line-height:1;margin:2px 0 6px}
.mknews h3{text-align:center;font-size:19px;margin:4px 0 4px}
.mknews .mknlead{text-align:center;font-size:13px;color:var(--sub);margin-bottom:14px}
.mknews ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mknews li{display:flex;gap:10px;align-items:flex-start;background:#f2f2f7;border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.5;text-align:left}
.mknews li .ic{font-size:20px;line-height:1.2;flex-shrink:0}
.mknews li .ic .mkig{width:20px;height:20px}
.mknews li b{display:block;font-size:14px}
.mknews li span.s{font-size:12px;color:var(--sub)}
.mknews .mknwhere{margin-top:12px;font-size:12px;color:var(--sub);text-align:center}
.night .mknews li{background:rgba(255,255,255,.07)}
/* BANe起動モーション：1ブラウザセッションに1回だけ表示。
   認証・データ取得は背面でそのまま進め、追加機能で画面を止めない。 */
.brandintro{display:none;position:fixed;inset:0;z-index:10000;align-items:center;justify-content:center;
  background:var(--bg,#fff);opacity:1;pointer-events:none;transition:opacity .38s ease}
.brand-intro-pending .brandintro{display:flex;animation:brandIntroFailSafe .38s ease 4s forwards}
.brandintro.done{opacity:0}
.brandintro img{display:block;width:min(82vw,420px);height:auto}
@keyframes brandIntroFailSafe{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.brandintro{transition:none}}


/* 自作アイコン（icons.js・2026-10-24 小泉「絵文字のアイコンを全てオリジナルに」） */
.bico{display:inline-block;vertical-align:-3px;flex-shrink:0}
.nav div .i .bico{display:block;margin:0 auto;vertical-align:0}
.nav div .i:has(.bico){filter:none;opacity:.55}.nav div.on .i:has(.bico){opacity:1}
.vsbtn .bico,.viewasbar .bico,.testbar .bico{margin-right:3px}
.reloadbtn .bico{vertical-align:middle}
#nightfab svg,#helpbtn svg{flex-shrink:0}

/* 下のナビ（アルバイト・2段）の間隔をそろえる（2026-10-24 小泉「アイコンの並びの間隔に統一性を」）
   それまで＝上段3つは33%・下段4つは25%＝上下で間隔が違った。
   いま＝4列の格子。上段は 本日／進捗／スキルツリー／矢印、下段は4つ。矢印も1マスとして並べるので上下の列が縦にそろう。
   閉じているとき（1段・横並び）は3つ＋細い矢印（30%×3＋10%）＝「スキルツリー」が折り返さない幅。 */
.nav:not(.flat){padding-right:8px}
.nav:not(.flat)>div,
.nav:not(.flat)>div:nth-of-type(4):nth-last-of-type(4),
.nav:not(.flat)>div:nth-of-type(4):nth-last-of-type(4) ~ div{flex:0 0 25%}
.nav:not(.flat)>div:nth-of-type(n+4){order:2}
.nav:not(.flat) .navtog,.nav:not(.open):not(.flat) .navtog{position:static;transform:none;order:1;flex:0 0 25%;width:auto;height:auto;min-height:40px;align-self:stretch}
.nav:not(.open):not(.flat)>div{flex:0 0 30%;white-space:nowrap}
.nav:not(.open):not(.flat) .navtog{flex:0 0 10%}

/* 店長・管理者のバー（スマホ）の縦幅を広げる（2026-10-24 小泉「iPhoneだと問題ないけどGALAXYだと狭く見える」）
   Android は下の安全域が0＝下の余白が3pxしか無かった。最低12pxにする（iPhone は安全域34px−12＝22pxのまま変わらない）。 */
@media (max-width:699px){
  .nav.flat{padding-top:8px;padding-bottom:max(calc(env(safe-area-inset-bottom,0px) - 12px),12px)}
}
/* 広い画面（Galaxy Fold を開いた時・iPad・PC）の店長・管理者のバーも縦幅を広げる（2026-10-24 小泉「この時がメニューバー狭い」）
   1行の薄い形（2026-09-19）は保ち、上下の余白だけ 2〜3px → 10px に。 */
@media (min-width:700px){
  .nav.flat{padding-top:10px;padding-bottom:max(calc(env(safe-area-inset-bottom,0px) - 12px),10px)}
  .nav.flat>div{padding-bottom:0}
}

/* 新人の3回ごとの振り返り（newbie.js・2026-10-26 小泉） */
.nbhead{display:flex;align-items:center;justify-content:center;gap:6px;font-size:17px;font-weight:800;color:var(--theme)}
.nbq{margin-top:14px}.nbqt{font-size:14px;font-weight:700;margin-bottom:7px}
.nbscale{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.nbscale button,.nbyn button{border:1px solid var(--sep);background:var(--card);color:var(--ink);border-radius:10px;padding:7px 2px;cursor:pointer;font-family:inherit}
.nbscale button b{display:block;font-size:16px}.nbscale button span{font-size:10px;color:var(--sub)}
.nbscale button.on,.nbyn button.on{background:var(--theme);border-color:var(--theme);color:#fff}.nbscale button.on span{color:#fff}
.nbyn{display:grid;grid-template-columns:1fr 1fr;gap:6px}.nbyn button{font-size:14px;font-weight:700;padding:10px}
.nbq textarea{width:100%;margin-top:7px;border:1px solid var(--sep);border-radius:10px;padding:8px 10px;font-size:14px;font-family:inherit;background:var(--card);color:var(--ink);box-sizing:border-box}
.nbsect{display:flex;align-items:center;gap:5px}.nbflag{margin-left:auto;background:#fde4dc;color:#b2412a;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:800}
.nbrow{padding:11px 14px;border-bottom:.5px solid var(--sep);cursor:pointer}.nbrow:last-child{border-bottom:0}.nbrow.flag{background:rgba(224,92,60,.08)}
.nbwho{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}.nbwho span{font-size:11.5px;color:var(--sub)}
.nbans{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px;font-size:12px;color:var(--sub)}
.nbsc{display:inline-block;min-width:18px;text-align:center;border-radius:5px;font-weight:800;color:#fff;background:#3f9a62}.nbsc.s3{background:#c99a22}.nbsc.s1,.nbsc.s2{background:#d0533a}
.nbtrb{flex-basis:100%;color:#b2412a;font-weight:700}.nbempty{padding:12px 14px;font-size:12.5px;color:var(--sub)}

/* ===== Wallet（2026-10-24〜26・wallet.js） ===== */

/* 💳 Wallet（ベータ・2026-10-24） */
.wlbeta{font-size:11px;background:var(--themeSoft);color:var(--theme);border-radius:8px;padding:2px 7px;vertical-align:middle;margin-left:6px}
.wlcard{background:linear-gradient(135deg,var(--theme),var(--theme2));color:#fff;border-radius:18px;margin:0 14px 10px;padding:14px 16px}
.wlcard.bday{background:linear-gradient(135deg,#e5851c,#f3ab5f)}
.wlhead{display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.wlttl{font-size:12px;font-weight:700;opacity:.9}
.wlamt{font-size:30px;font-weight:800;margin:2px 0;letter-spacing:-.5px}.wlamt small{font-size:13px;font-weight:700;margin-left:3px}
.wlexp{font-size:11px;opacity:.85}
.wlcard .mkchev{color:#fff;font-size:12px}
.wlqr{background:#fff;border-radius:12px;padding:12px;margin-top:12px;text-align:center}
.wlqr svg{width:180px;height:180px;display:block;margin:0 auto}
.wlcode{color:var(--ink);font-size:13px;margin-top:8px}.wlcode b{font-size:18px;letter-spacing:.2em}
.wlnote{color:var(--sub);font-size:11px;margin-top:6px}
.wlbar{height:9px;background:var(--sep);border-radius:5px;overflow:hidden;margin:4px 16px 8px}.wlbar i{display:block;height:100%;background:linear-gradient(90deg,var(--theme),var(--theme2))}
.wllad{display:flex;gap:6px;margin:6px 14px 14px}.wllad div{flex:1;background:var(--themeSoft);border-radius:10px;padding:8px 4px;text-align:center;font-size:10.5px;font-weight:700;color:var(--theme)}.wllad div b{display:block;font-size:13px}.wllad div.got{background:var(--theme);color:#fff}
.wlhist{font-size:12.5px;padding:10px 16px;border-bottom:.5px solid var(--sep);display:flex;justify-content:space-between;gap:8px}.wlhist span:last-child{color:var(--sub);flex-shrink:0}
.wlscan{position:relative;width:100%;max-width:320px;aspect-ratio:1;margin:8px auto 0;background:#000;border-radius:14px;overflow:hidden}
.wlscan video{width:100%;height:100%;object-fit:cover}
.wlframe{position:absolute;inset:14%;border:3px solid rgba(255,255,255,.85);border-radius:12px;pointer-events:none}
.wlmsg{font-size:13px;color:var(--sub);margin:10px 0;min-height:1.6em;text-align:center}
.wlok{background:#e6f8ec;color:var(--good);border-radius:12px;padding:10px;font-size:14px;line-height:1.5}
.wlng{background:#fff4e0;color:var(--warn);border-radius:12px;padding:10px;font-size:13px;line-height:1.5}
.wlcodein{display:flex;gap:8px;justify-content:center;margin-top:6px}.wlcodein input{width:140px;font-size:18px;letter-spacing:.15em;text-align:center;padding:8px;border:1px solid var(--sep);border-radius:10px}
.wllog{margin-top:12px;text-align:left}.wllogttl{font-size:12px;color:var(--sub);font-weight:700;margin:0 0 4px}
.night .wlqr{background:#fff}

/* Wallet（2026-10-24 小泉「本物のアプリ感」：絵文字を使わず自前のSVG・暗いシート・パス風の券） */
.wli{flex-shrink:0;vertical-align:-3px}
.wlsheet{--wbg:#140a18;--wcard:#22142a;--wline:rgba(255,255,255,.08);--wsub:rgba(255,255,255,.58);--wink:#fff;--wacc:#f3ab5f;
  position:fixed;left:0;right:0;top:0;height:100%;z-index:60;background:var(--wbg);color:var(--wink);transform:translateY(-100%);transition:transform .38s cubic-bezier(.2,.9,.2,1);display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,.45);padding-top:env(safe-area-inset-top,0px);max-width:520px;margin:0 auto;border-radius:0 0 26px 26px}
.wlsheet.open{transform:translateY(0)}
.wlsheetin{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px 14px;overscroll-behavior:contain}
.wlgrab{padding:12px 0 calc(14px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;cursor:grab;touch-action:none}.wlgrab i{display:block;width:54px;height:6px;border-radius:3px;background:rgba(255,255,255,.35)}
.wltop{display:flex;align-items:center;justify-content:space-between;padding:16px 2px 10px}
.wlbrand{display:flex;align-items:center;gap:8px;font-size:24px;font-weight:800;letter-spacing:-.4px;color:var(--wink)}.wlbrand .wli{color:var(--wacc)}
.wlbrand em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.12em;color:var(--wacc);border:1px solid rgba(243,171,95,.5);border-radius:6px;padding:2px 5px;margin-left:2px}
.wlx{border:0;background:rgba(255,255,255,.1);color:var(--wink);width:36px;height:36px;border-radius:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.wlbal{position:relative;overflow:hidden;border-radius:22px;padding:18px 20px 16px;margin:4px 0 16px;background:radial-gradient(120% 140% at 100% 0%,#f3ab5f 0%,#e5851c 34%,#9c3d52 70%,#4a1d5a 100%);box-shadow:0 12px 30px rgba(229,133,28,.25)}
.wlbal:after{content:"";position:absolute;right:-40px;top:-50px;width:180px;height:180px;border-radius:50%;border:26px solid rgba(255,255,255,.08)}
.wlballbl{font-size:12px;font-weight:700;opacity:.9;letter-spacing:.04em}
.wlbalyen{font-size:44px;font-weight:800;letter-spacing:-1.2px;line-height:1.1;margin:4px 0 8px;font-variant-numeric:tabular-nums}.wlbalyen small{font-size:24px;margin-right:2px;opacity:.9}
.wlbalsub{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;font-weight:700;opacity:.95}.wlbalsub span{display:flex;align-items:center;gap:4px}
.wlbalused{margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.22);font-size:11.5px;opacity:.85}
.wlempty{color:var(--wsub);text-align:center;font-size:13px;padding:18px 8px}
.wlstack{position:relative;transition:height .4s cubic-bezier(.2,.9,.2,1)}
.wlpass{position:absolute;left:0;right:0;top:0;border-radius:16px;color:#fff;overflow:hidden;box-shadow:0 -2px 0 rgba(255,255,255,.06) inset,0 -6px 16px rgba(0,0,0,.35);background:linear-gradient(160deg,#6a2f96,#b0478f);transition:transform .45s cubic-bezier(.2,.9,.2,1);cursor:pointer;-webkit-tap-highlight-color:transparent}
.wlpass.k-tenure{background:linear-gradient(160deg,#1d3a63,#2f8a8a)}
.wlpass.k-birthday{background:linear-gradient(160deg,#d9534f,#f0a14b)}
.wlpass.k-manual{background:linear-gradient(160deg,#3a3f47,#68707c)}
.wlpassstrip{display:flex;align-items:center;gap:10px;height:62px;padding:0 16px}
.wlpassicon{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.wlpasskind{flex:1;font-size:15px;font-weight:800;letter-spacing:.02em}
.wlpassamt{font-size:24px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}.wlpassamt small{font-size:14px;margin-right:1px}
.wlpassbody{padding:6px 16px 0}
.wlpasslbl{font-size:9.5px;font-weight:800;letter-spacing:.12em;opacity:.72;margin-bottom:2px}
.wlpassttl{font-size:19px;font-weight:800;line-height:1.3}
.wlpassfoot{display:flex;align-items:flex-end;gap:20px;padding:16px 16px 16px;font-size:13px;font-weight:700}
.wlpasshint{margin-left:auto;font-size:10.5px;opacity:.7}
.wlpass .wlqr{display:none}.wlpass.sel .wlqr{display:block}.wlpass.sel .wlpasshint{display:none}
.wlpass.pile{box-shadow:0 -4px 12px rgba(0,0,0,.4)}
.wlsheet .wlqr{background:#fff;border-radius:14px;margin:0 14px 16px;padding:16px 12px 12px;text-align:center;color:#1a1a1a}
.wlsheet .wlqr svg{width:200px;height:200px;display:block;margin:0 auto}
.wlsheet .wlcode{font-size:26px;font-weight:800;letter-spacing:.18em;margin-top:10px;font-variant-numeric:tabular-nums;color:#1a1a1a}
.wlsheet .wlnote{color:#777;font-size:11.5px;margin-top:4px}
.wlsect{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--wink);margin:22px 2px 8px}.wlsect .wli{color:var(--wacc)}.wlsect span{margin-left:auto;color:var(--wsub);font-size:11.5px;font-weight:600}
.wlpanel{background:var(--wcard);border-radius:16px;overflow:hidden;border:1px solid var(--wline)}
.wlprog{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:14px 16px 6px;font-size:12px;color:var(--wsub)}.wlprog b{font-size:20px;color:var(--wink)}.wlprognext b{font-size:13px;color:var(--wacc)}
.wlsheet .wlbar{height:8px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden;margin:4px 16px 12px}.wlsheet .wlbar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#e5851c,#f3ab5f)}
.wlsheet .wllad{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 12px 14px}
.wlsheet .wllad div{background:rgba(255,255,255,.06);border-radius:11px;padding:8px 2px;text-align:center;font-size:10px;font-weight:700;color:var(--wsub)}
.wlsheet .wllad div b{display:block;font-size:13.5px;color:var(--wink);margin-top:1px}.wlsheet .wllad div em{display:block;font-style:normal;font-size:9.5px;color:var(--wacc);margin-top:2px}
.wlsheet .wllad div.got{background:rgba(243,171,95,.16);color:var(--wacc)}
.wltenure{padding:14px 16px 4px;border-bottom:1px solid var(--wline)}
.wltenurecnt{font-size:13px;color:var(--wsub);font-weight:700}.wltenurecnt b{font-size:26px;color:var(--wink);margin:0 3px 0 0;font-variant-numeric:tabular-nums}.wltenurecnt b+b,.wltenurecnt b:nth-of-type(2){margin-left:6px}
.wltenuremo{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--wsub);margin-top:8px}.wltenuremo em{font-style:normal;display:flex;align-items:center;gap:3px;color:#7fe0a5;font-weight:800}.wltenuremo em.wait{color:var(--wacc)}
.wltenure .wlbar{margin:6px 0 8px}
.wltenurerule{font-size:11px;color:var(--wsub);line-height:1.6;padding-bottom:8px}
.wlrow{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--wline)}.wlrow:last-child{border-bottom:0}
.wlrowyr{width:58px;font-size:20px;font-weight:800}.wlrowyr small{font-size:11px;margin-left:1px;color:var(--wsub)}
.wlrowyen{flex:1;font-size:15px;font-weight:700}
.wltag{display:flex;align-items:center;gap:3px;font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--wsub)}.wltag.ok{background:rgba(110,214,150,.15);color:#7fe0a5}
.wlsheet .wlhist{font-size:12.5px;padding:11px 16px;border-bottom:1px solid var(--wline);color:var(--wink)}.wlsheet .wlhist:last-child{border-bottom:0}.wlsheet .wlhist small{display:block;color:var(--wsub);font-size:11px;margin-top:2px}.wlsheet .wlhist span:last-child{color:var(--wsub)}
.wlfine{color:var(--wsub);font-size:11px;line-height:1.6;margin:18px 4px 6px}
.wlhdrrow{display:flex;justify-content:flex-end;margin:6px 0 2px}
.wlchip{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:6px 10px 6px 11px;background:linear-gradient(135deg,#22142a,#140a18);color:#fff;font-size:14px;font-weight:800;box-shadow:0 0 0 1px rgba(243,171,95,.35) inset,0 4px 12px rgba(0,0,0,.25);cursor:pointer;-webkit-tap-highlight-color:transparent}
.wlchip .wli{color:#f3ab5f}.wlchipyen{font-variant-numeric:tabular-nums;letter-spacing:-.2px}.wlchip .wlchipchev{color:rgba(255,255,255,.6)}
.wlchip:active{transform:scale(.97)}
.wlscanlink{display:inline-flex;align-items:center;gap:4px;font-weight:700;cursor:pointer;margin-right:12px;text-decoration:underline}
.wlscanhead{display:flex;align-items:center;justify-content:center;gap:6px}

.wllabel{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:800;color:#f3ab5f;border:1px solid rgba(243,171,95,.5);border-radius:6px;padding:0 5px;vertical-align:2px}

.wlpeek{text-align:center;padding:10px 0 4px}.wlpeekname{font-size:15px;font-weight:800}.wlpeekttl{font-size:13px;color:var(--sub);margin-top:2px}.wlpeekyen{font-size:34px;font-weight:800;color:var(--theme);font-variant-numeric:tabular-nums;margin-top:4px}
.wlbalsoon{font-size:30px;font-weight:800;letter-spacing:-.5px;margin:4px 0 8px}
.wlprogfoot{font-size:11px;color:var(--wsub);padding:0 16px 12px}
.wlpasskind{display:flex;flex-direction:column;line-height:1.15}.wlpasskind small{font-size:9.5px;font-weight:800;letter-spacing:.16em;opacity:.72}.wlpasskind span{font-size:16px;font-weight:800;letter-spacing:.04em;font-variant-numeric:tabular-nums}
body.wlopen #helpbtn,body.wlopen #nightfab{display:none!important}
.wlstorepick{display:flex;align-items:center;gap:8px;justify-content:center;margin:6px 0 10px;font-size:13px;font-weight:700}.wlstorepick select{font-size:14px;padding:6px 10px;border-radius:10px;border:1px solid var(--sep);background:var(--card);color:var(--ink)}

/* 読み込み中：BANe ロゴを画面の真ん中に大きく（2026-10-26 小泉） */
.bootlogo{min-height:calc(100vh - 40px);min-height:calc(100dvh - 40px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.bootlogo .logomark{width:236px;height:48px}
.bootlogotxt{font-size:12px;color:var(--sub);letter-spacing:.08em}

/* 今月お誕生日のスタッフ（wallet.js・2026-10-26 小泉） */
.wlbdsect{display:flex;align-items:center;gap:5px}
.wlbdrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:.5px solid var(--sep)}
.wlbdwho{display:flex;flex-direction:column}.wlbdwho b{font-size:14px}.wlbdwho span{font-size:11.5px;color:var(--sub)}
.wlbdbtn{display:inline-flex;align-items:center;gap:5px;border:0;border-radius:999px;padding:7px 12px;background:linear-gradient(135deg,#d9534f,#f0a14b);color:#fff;font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap}
.wlbdsent{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:800;color:#3f9a62;white-space:nowrap}
.wlbdnote{padding:9px 14px 11px;font-size:11.5px;color:var(--sub)}
.wlbdta{width:100%;box-sizing:border-box;border:1px solid var(--sep);border-radius:12px;padding:10px 12px;font-size:15px;font-family:inherit;background:var(--card);color:var(--ink);margin-top:4px}
.wlpassmsg{margin:10px 16px 0;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.16);font-size:13.5px;line-height:1.6;font-weight:600}

/* お誕生日のお祝い画面（wallet.js・2026-10-26 小泉） */
.wlbdpop{text-align:center}
.wlbdpophero{width:84px;height:84px;margin:4px auto 10px;border-radius:26px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#d9534f,#f0a14b);box-shadow:0 10px 24px rgba(217,83,79,.35)}
.wlbdpopttl{font-size:20px;font-weight:800;letter-spacing:-.2px}
.wlbdpopsub{font-size:13px;color:var(--sub);margin-top:4px}
.wlbdpopmsg{margin:14px 0 4px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(217,83,79,.08),rgba(240,161,75,.12));font-size:15px;line-height:1.7;font-weight:600;text-align:left}
.wlbdpopgift{font-size:12.5px;color:var(--sub);margin-top:10px}.wlbdpopgift b{color:#d9534f;font-size:14px}

/* =====================================================================
   🌱 芽の精の世界観（2026-10-26 小泉「アプリ自体を、このキャラがいてもいい世界観に**見た目だけ**変える」）
   手本＝Duolingo（レトロ・ドラクエ寄せは保留）。アルバイト画面だけに効く上書き層＝ render()／デモが body に .sprout を付ける。
   店長・管理者画面は後回し（.sprout が付かない＝今までどおり）。
   ルール：ランク色（RANK_THEME）はそのまま／キャラの緑は固定／白地を広く・色は「今やること」にだけ／
          角丸は 16〜20px／カードとボタンに「下の厚み」4px＝押せるものが一目で分かる／やかましくしない。
   ⚠️ 上の既存ルールは一切書き換えていない（ここで上書きするだけ）。外すときはこの層と app.js の sprout を外す。
   ===================================================================== */
body.sprout{
  --bg:#f6f8f3; --card:#fff; --sep:#e5e7eb; --ink:#1c1c1e; --sub:#6b7280;
  --edge:color-mix(in srgb,var(--theme) 72%,#000);   /* ボタン・帯の「下の厚み」＝テーマ色を少し暗く */
  --gold2:#F4C84B; --goldEdge:#C9971B;
  --r:18px;
  background:var(--bg);
}
.night body.sprout{--bg:#262a2b;--card:#313637;--sep:#434849;--ink:#e9edec;--sub:#9ba5a3;background:var(--bg)}
/* ---- ヘッダー：濃い紫をやめて白地に。ランクの札だけ色 ---- */
body.sprout .apphdr{background:var(--card);border-bottom:2px solid var(--sep)}
.night body.sprout .apphdr{background:var(--card);border-bottom-color:var(--sep)}
body.sprout .apphdr .bigdate,body.sprout .apphdr .storename{color:var(--ink)}
body.sprout .apphdr .who,.night body.sprout .apphdr .who{color:var(--sub)}
body.sprout .apphdr .biglv{border-radius:12px;padding:5px 13px;box-shadow:0 3px 0 rgba(0,0,0,.28)}
body.sprout .apphdr .hdxp,body.sprout .apphdr .hdxp small,
.night body.sprout .apphdr .hdxp,.night body.sprout .apphdr .hdxp small{color:var(--theme)}
.night body.sprout .apphdr .hdxp,.night body.sprout .apphdr .hdxp small{color:var(--theme2)}
body.sprout .apphdr .ava{border-color:var(--sep);box-shadow:none;background:var(--themeSoft)}
body.sprout .apphdr .backbtn2{color:var(--theme)}
body.sprout .nightbtn,body.sprout .reloadbtn{background:var(--bg);color:var(--sub);box-shadow:none;border:2px solid var(--sep)}
body.sprout .poschip{border-radius:999px;padding:3px 11px}
/* ---- 下ナビ：白地・2pxの線・選んでいるものは淡い色の座布団 ---- */
body.sprout .nav,.night body.sprout .nav{background:var(--card);border-top:2px solid var(--sep);backdrop-filter:none;-webkit-backdrop-filter:none}
body.sprout .nav div,.night body.sprout .nav div{color:var(--sub);font-weight:800}
body.sprout .nav div.on,.night body.sprout .nav div.on{color:var(--theme)}
.night body.sprout .nav div.on{color:var(--theme2)}
body.sprout .nav div .i:has(.bico){opacity:.5}
body.sprout .nav div.on .i:has(.bico){opacity:1}
body.sprout .nav.open div.on .i{background:var(--themeSoft);border-radius:12px;width:46px;margin:0 auto 2px;padding:3px 0}
body.sprout .navtog::before{border-color:var(--sub)}
body.sprout .nav .navbadge{border-radius:9px}
/* ---- カード：2pxの枠＋下4px。角丸18 ---- */
body.sprout .group,body.sprout .nextcard,body.sprout .bigcard,body.sprout .themecard,body.sprout .traineenote,
body.sprout .traineecard,body.sprout .feedcard,body.sprout .chartcard,body.sprout .newscard,body.sprout .lockrow{
  border:2px solid var(--sep);border-bottom-width:4px;border-radius:var(--r);background:var(--card)}
body.sprout .row{border-bottom:1.5px solid var(--sep)}
body.sprout .row:last-child{border-bottom:none}
body.sprout .row .tx .t{font-weight:700;font-size:15px}
body.sprout .sect{font-size:13px;margin:18px 20px 8px}
body.sprout .sect.sect-lg{font-size:17px;font-weight:900}
body.sprout .foot{font-size:12px}
body.sprout .escard{border-radius:var(--r);border-width:2px;border-bottom-width:4px}
body.sprout .badge{border-radius:9px;font-weight:800}
body.sprout .expchip,body.sprout .tbchip,body.sprout .feedpos{border-radius:999px}
body.sprout .row.rowready{background:var(--themeSoft);box-shadow:none}
body.sprout .row.rowc{background:color-mix(in srgb,var(--good) 8%,var(--card));border-left-width:4px}
body.sprout .coach{border-radius:var(--r);box-shadow:0 4px 0 var(--edge)}
body.sprout .coach .coachmode,body.sprout .coach .crx{font-weight:800}
/* ---- ボタン：下の厚み＋押すと沈む ---- */
body.sprout .btn{border-radius:16px;font-weight:800;box-shadow:0 4px 0 var(--edge);margin-bottom:10px;transition:transform .08s,box-shadow .08s}
body.sprout .btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge)}
body.sprout .btn:disabled{box-shadow:0 4px 0 #a9a9b0}
body.sprout .btn.ghost{background:var(--card);color:var(--theme);border:2px solid var(--sep);box-shadow:0 4px 0 var(--sep)}
body.sprout .btn.ghost:active{box-shadow:0 1px 0 var(--sep)}
.night body.sprout .btn.ghost{color:var(--theme2)}
body.sprout .lvtoggle{border-radius:16px;box-shadow:0 4px 0 var(--edge)}
body.sprout .addbtn{border-radius:12px;font-weight:800}
body.sprout .ombtns .pri,body.sprout .lvup-ok,body.sprout .mbtns .pri{border-radius:16px;box-shadow:0 4px 0 var(--edge)}
body.sprout .mbtns .sec,body.sprout .omchoice{border-radius:14px;border:2px solid var(--sep);border-bottom-width:4px}
body.sprout .modal .box{border-radius:24px}
/* ---- ◎○✕の印：大きく・角丸の四角・下の厚み。押すと沈む ---- */
body.sprout .tb{width:42px;height:42px;border-radius:13px;border:2px solid var(--sep);border-bottom-width:4px;font-size:19px;font-weight:900;color:#9ca3af;background:var(--card);transition:transform .08s}
.night body.sprout .tb{background:#343a3b;color:#7f8a88;border-color:var(--sep)}
body.sprout .tb:active{transform:translateY(2px)}
body.sprout .tb.dm.on{background:var(--theme);border-color:var(--edge);color:#fff}
body.sprout .tb.o.on{background:#9ca3af;border-color:#6b7280;color:#fff}
body.sprout .tb.x.on{background:#6b7a88;border-color:#4b5563;color:#fff}
body.sprout .tb.testcert{border-color:var(--gold)}
body.sprout .tap{gap:7px}
/* ---- バー：太く・上に光の筋 ---- */
body.sprout .xpbar{height:16px;background:var(--sep)}
body.sprout .xpbar .no,body.sprout .xpbar .st{position:relative}
body.sprout .xpbar .no::after,body.sprout .xpbar .st::after{content:"";position:absolute;left:7px;right:7px;top:4px;height:3px;border-radius:3px;background:rgba(255,255,255,.45)}
body.sprout .xpbar .no{border-radius:0 99px 99px 0}
/* ---- 本日：キャラが話しかける（吹き出し） ---- */
body.sprout .hello{display:flex;gap:8px;align-items:flex-end;margin:10px 14px 4px}
body.sprout .hello .mb{width:104px;height:104px;flex:none;margin:0 -6px -8px -8px}
body.sprout .hello .mb svg{width:100%;height:100%;overflow:visible}
body.sprout .hello .say{flex:1;min-width:0;background:var(--card);border:2px solid var(--sep);border-radius:16px;padding:10px 12px;font-size:14px;line-height:1.55;position:relative;margin-bottom:22px;color:var(--ink);font-weight:600}
body.sprout .hello .say b{color:var(--theme)}
.night body.sprout .hello .say b{color:var(--theme2)}
body.sprout .hello .say::before{content:"";position:absolute;left:-10px;bottom:16px;border:8px solid transparent;border-right-color:var(--sep);border-left:0}
body.sprout .hello .say::after{content:"";position:absolute;left:-7px;bottom:17px;border:7px solid transparent;border-right-color:var(--card);border-left:0}
/* 次のランクまで（本日のいちばん上の小さなカード） */
body.sprout .nextmini{margin:6px 14px 0;background:var(--card);border:2px solid var(--sep);border-bottom-width:4px;border-radius:var(--r);padding:12px 14px}
body.sprout .nextmini .nmhd{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px;font-size:14px;font-weight:800}
body.sprout .nextmini .nmhd span{font-size:12px;color:var(--sub);font-weight:700;white-space:nowrap}
body.sprout .nextmini .nmkey{font-size:11.5px;color:var(--sub);font-weight:700;margin-top:6px}
/* ---- 進捗＝道 ---- */
body.sprout .pathbanner{margin:8px 14px 0;background:var(--theme);color:#fff;border-radius:var(--r);padding:12px 14px;box-shadow:0 4px 0 var(--edge);display:flex;align-items:center;gap:10px}
body.sprout .pathbanner .pbt{flex:1;min-width:0}
body.sprout .pathbanner b{font-size:16px;display:block;line-height:1.3}
body.sprout .pathbanner span{font-size:12px;opacity:.92;font-weight:700}
body.sprout .pathbanner .pblv{font-size:22px;font-weight:900;background:rgba(255,255,255,.2);border-radius:12px;padding:4px 12px;flex:none}
body.sprout .path{position:relative;width:340px;max-width:100%;margin:8px auto 0}
body.sprout .path .pathline{position:absolute;inset:0;width:100%;height:100%;display:block}
body.sprout .pnode{position:absolute;width:60px;height:60px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:14px;transform:translate(-50%,-50%);box-shadow:0 5px 0 var(--pedge);line-height:1.1}
body.sprout .pnode small{font-size:9.5px;font-weight:800;opacity:.9}
body.sprout .pnode.done{background:var(--pc)}
body.sprout .pnode.lock{background:#d1d5db;--pedge:#9ca3af}
.night body.sprout .pnode.lock{background:#4a5152;--pedge:#2f3536;color:#aab3b1}
body.sprout .pnode.cur{width:74px;height:74px;background:var(--gold2);--pedge:var(--goldEdge);color:#5a3d00;outline:6px solid #fff3c2;font-size:16px}
.night body.sprout .pnode.cur{outline-color:#4a4120}
body.sprout .plabel{position:absolute;font-size:11.5px;font-weight:800;color:var(--sub);transform:translateY(-50%);width:118px;line-height:1.35}
body.sprout .plabel b{color:var(--ink);display:block;font-size:12.5px}
body.sprout .pgate{position:absolute;left:50%;transform:translate(-50%,-50%);background:var(--card);border:2px solid var(--sep);border-bottom-width:4px;border-radius:14px;padding:7px 12px;font-size:11.5px;font-weight:800;white-space:nowrap;display:flex;gap:6px;align-items:center;color:var(--ink)}
body.sprout .pgate b{color:var(--goldEdge)}
body.sprout .pgate.ok b{color:var(--good)}
body.sprout .pmb{position:absolute;width:70px;height:70px;transform:translate(-50%,-100%)}
body.sprout .pmb svg{width:100%;height:100%;overflow:visible}
body.sprout .pcurrent{position:absolute;transform:translate(-50%,-50%);width:72px;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}
body.sprout .pcurrent .pmb{position:relative;flex:none;width:68px;height:68px;transform:none;animation:pyokoPathBob 3.6s ease-in-out infinite}
body.sprout .pcurrent-label{position:relative;margin-top:-7px;padding:2px 5px;border-radius:9px;background:var(--card);border:1px solid var(--sep);color:var(--ink);font-size:10px;font-weight:800;white-space:nowrap;line-height:1.3}
@keyframes pyokoPathBob{0%,100%{transform:translateY(1px)}50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){body.sprout .pcurrent .pmb{animation:none}}
/* ---- RANK UP：キャラの大喜び＋集中線＋星 ---- */
body.sprout .lvup{padding:0 0 2px}
body.sprout .lvup .cele{position:relative;overflow:hidden;border-radius:18px;margin:-6px -4px 0;padding:10px 0 0;
  background:radial-gradient(circle at 50% 42%,#fff8dc 0,var(--card) 60%)}
body.sprout .lvup .rays{position:absolute;left:50%;top:48%;width:560px;height:560px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(244,200,75,.18) 0 9deg,transparent 9deg 18deg);animation:celespin 14s linear infinite}
@keyframes celespin{to{transform:translate(-50%,-50%) rotate(360deg)}}
body.sprout .lvup .mbBig{position:relative;width:180px;height:180px;margin:0 auto}
body.sprout .lvup .mbBig svg{width:100%;height:100%;overflow:visible}
body.sprout .lvup-title{font-size:13px;letter-spacing:.3em;color:var(--goldEdge);margin-top:2px}
body.sprout .lvup-stage{font-size:22px;font-weight:900;margin-top:2px}
body.sprout .lvup .from{display:inline-flex;gap:10px;align-items:center;margin-top:10px;font-weight:900;font-size:17px}
body.sprout .lvup .from i{font-style:normal;padding:4px 12px;border-radius:10px;color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.25)}
body.sprout .lvup .from i.to{outline:4px solid #fff3c2}
body.sprout .lvup-ok{margin-top:16px}
@media (prefers-reduced-motion:reduce){body.sprout .lvup .rays{animation:none}}
/* ---- 関所・承認待ち・コーチの芽の精 ---- */
body.sprout .mbModal{width:120px;height:120px;margin:-6px auto 0}
body.sprout .mbModal svg,body.sprout .mbAva svg,body.sprout .mbCoach svg{width:100%;height:100%;overflow:visible}
body.sprout .qalog .coachline{display:flex;align-items:flex-start;gap:6px}
body.sprout .qalog .mbAva{width:34px;height:34px;align-self:flex-start;margin:0 0 -8px 2px;flex:none}
body.sprout .coach.coachtop{position:relative}
body.sprout .mbCoach{position:absolute;right:10px;top:-22px;width:76px;height:76px}
body.sprout .coach.coachtop .msg{padding-right:70px}
/* ---- ロゴを外した（2026-10-26 小泉「BANeのロゴは消して・サービス名自体を変えるかも」）。読み込み中は芽の精 ---- */
.bootlogo .mbBoot{width:150px;height:150px}
.bootlogo .mbBoot svg{width:100%;height:100%;overflow:visible}
/* ---- 時間帯で背景を出し分け（2026-10-26 小泉）。上が空の色、下へ行くほどいつもの地色。色だけ＝文字・カードは同じ。
        🌙の暗い表示（.night）を選んでいる人は夜の配色のまま＝ここは効かせない ---- */
body.sprout[data-daypart]{background-color:var(--bg);background-image:linear-gradient(180deg,var(--sky) 0,var(--bg) 46%);background-repeat:no-repeat}
body.sprout[data-daypart="morning"]{--bg:#f8f7f0;--sky:#fff1dc}   /* 朝＝あたたかい光 */
body.sprout[data-daypart="day"]{--bg:#f6f8f3;--sky:#e6f3fb}       /* 昼＝うすい空色 */
body.sprout[data-daypart="evening"]{--bg:#f8f4ee;--sky:#ffe3cf}   /* 夕＝夕焼け */
body.sprout[data-daypart="night"]{--bg:#eef0f5;--sky:#dfe4ef}     /* 夜＝くらい青みの灰 */
.night body.sprout[data-daypart]{--bg:#262a2b;--sky:#262a2b;background-image:none}
/* ---- 時間帯の空の帯：丘・遠景の木・草花。本文は124px下から始まる ---- */
body.sprout .scroll{position:relative;background-size:100% 124px;background-position:top center;background-repeat:no-repeat;background-attachment:local;padding-top:124px}
/* 本日だけ、丘を Pyoko の足元まで伸ばして空を吹き出しの背面にする。 */
body.sprout .scroll.sprout-home{background-size:100% 268px;padding-top:0}
body.sprout .scroll.sprout-home>.hello{box-sizing:border-box;position:relative;z-index:1;height:268px;margin:0 10px 4px;padding:28px 0 14px;align-items:flex-end}
body.sprout .scroll.sprout-home>.hello .mb{margin-bottom:18px}
body.sprout .scroll.sprout-home>.hello .say{margin-bottom:0;background:#fffdf8;color:#26372c;border-color:#b8cdb5}
body.sprout .scroll.sprout-home>.hello .say{box-sizing:border-box;max-height:220px}
body.sprout .scroll.sprout-home>.hello .say::before{border-right-color:#b8cdb5}
body.sprout .scroll.sprout-home>.hello .say::after{border-right-color:#fffdf8}
body.sprout .scroll.sprout-home>.hello .say b,
body.sprout .scroll.sprout-home>.hello .saywho{color:#246b49}
body.sprout .scroll.sprout-home>.hello .crx{background:#edf5e9;color:#26372c;border-color:#b8cdb5}
body.sprout .scroll.sprout-home>.hello .crx.on{background:#246b49;color:#fff}
/* 吹き出しの上に、時間帯の光が必ず少し見える位置を確保する。 */
body.sprout .scroll.sprout-home::after{content:"";position:absolute;top:7px;right:25px;width:38px;height:38px;border-radius:50%;pointer-events:none;background:#ffe1a0;box-shadow:0 0 0 7px rgba(255,225,160,.22)}
body.sprout[data-daypart="day"] .scroll.sprout-home::after{background:#ffe191;box-shadow:0 0 0 8px rgba(255,225,145,.25)}
body.sprout[data-daypart="evening"] .scroll.sprout-home::after{background:#efa656;box-shadow:0 0 0 8px rgba(239,166,86,.2)}
body.sprout[data-daypart="night"] .scroll.sprout-home::after{background:#fff4c9;box-shadow:inset -9px 4px 0 #26364a,0 0 0 7px rgba(255,244,201,.12)}
.night body.sprout[data-daypart="night"] .scroll.sprout-home::after{box-shadow:inset -9px 4px 0 #1b2d30,0 0 0 7px rgba(255,244,201,.12)}
@media(max-width:370px){body.sprout .scroll.sprout-home>.hello{margin-inline:7px}body.sprout .scroll.sprout-home>.hello .mb{width:138px;height:138px}}
body.sprout .scroll::before{content:"";position:absolute;top:0;left:0;width:100%;height:80px;background-size:100% 80px;background-repeat:no-repeat;pointer-events:none;animation:sproutCloudDrift 18s ease-in-out infinite alternate}
@keyframes sproutCloudDrift{from{transform:translateX(-4px)}to{transform:translateX(4px)}}
@keyframes sproutStarTwinkle{from{opacity:.35}to{opacity:.85}}
body.sprout[data-daypart="morning"] .scroll,body.hoppin-auth[data-daypart="morning"] .scroll,.hoppin-splash[data-daypart="morning"] .hoppin-splash-scene{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20390%20124%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20fill=%22%23fff2dc%22%20d=%22M0%200h390v124H0z%22/%3E%3Ccircle%20cx=%22311%22%20cy=%2260%22%20r=%2236%22%20fill=%22%23ffe1a0%22%20opacity=%22.17%22/%3E%3Ccircle%20cx=%22311%22%20cy=%2260%22%20r=%2230%22%20fill=%22%23ffe1a0%22%20opacity=%22.28%22/%3E%3Ccircle%20cx=%22311%22%20cy=%2260%22%20r=%2225%22%20fill=%22%23ffe1a0%22/%3E%3Cpath%20d=%22M253%2059h18m9-31%208%209m46-5%208-8M296%2096h-26m61-8%2011%208%22%20stroke=%22%23ffe1a0%22%20stroke-width=%223%22%20stroke-linecap=%22round%22%20opacity=%22.6%22/%3E%3Cpath%20d=%22M19%2043q8-9%2019-4%208-11%2022-4%209-1%2014%208zM151%2024q5-5%2012-3%207-8%2016-4%207%200%2011%207z%22%20fill=%22%23f7fbdf%22%20opacity=%22.63%22/%3E%3Cpath%20d=%22M0%2084Q48%2067%2093%2080t95-1q45-15%2089-3t113-6v54H0z%22%20fill=%22%23dbe8bf%22/%3E%3Cg%20fill=%22%235a9568%22%20opacity=%22.78%22%3E%3Cpath%20d=%22M31%2091V77m178%2013V75m149%2015V77%22%20stroke=%22%235a9568%22%20stroke-width=%222%22/%3E%3Cpath%20d=%22M19%2079q2-13%2013-13%2011%200%2013%2013-8%207-26%200zm178-4q1-13%2013-13%2010%200%2013%2013-10%208-26%200zm149%203q2-11%2013-11%2010%200%2013%2011-10%207-26%200z%22%20fill=%22%23bad7a5%22/%3E%3C/g%3E%3Cpath%20d=%22M0%20100q65-25%20128-6t137-10q53-19%20125%201v39H0z%22%20fill=%22%23bad7a5%22/%3E%3Cpath%20d=%22M0%20112q62-19%20117-7t110-4q86-19%20163-1v24H0z%22%20fill=%22%2391bd82%22/%3E%3Cg%20stroke=%22%235a9568%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20fill=%22none%22%20opacity=%22.8%22%3E%3Cpath%20d=%22m11%20111-3-5m3%205%204-6m48%209-3-6m3%206%204-5m63%201-4-6m4%206%203-4m102%202-3-5m3%205%204-6m104%204-3-5m3%205%204-5%22/%3E%3C/g%3E%3Cg%20fill=%22%23f7fbdf%22%3E%3Ccircle%20cx=%2251%22%20cy=%22107%22%20r=%222%22/%3E%3Ccircle%20cx=%22168%22%20cy=%22107%22%20r=%222%22/%3E%3Ccircle%20cx=%22284%22%20cy=%22105%22%20r=%222%22/%3E%3Ccircle%20cx=%22357%22%20cy=%22111%22%20r=%221.7%22/%3E%3C/g%3E%3Cg%20fill=%22%23ffe1a0%22%3E%3Ccircle%20cx=%2251%22%20cy=%22107%22%20r=%22.8%22/%3E%3Ccircle%20cx=%22168%22%20cy=%22107%22%20r=%22.8%22/%3E%3Ccircle%20cx=%22284%22%20cy=%22105%22%20r=%22.8%22/%3E%3C/g%3E%3C/svg%3E")}
body.sprout[data-daypart="morning"] .scroll::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20390%2080%22%3E%3Cpath%20d=%22M40%2046q10-8%2024-4%208-8%2019-3%209%200%2014%207zM192%2030q8-7%2018-3%208-8%2018-4%207%200%2010%207z%22%20fill=%22%23fffdf0%22%20opacity=%22.58%22/%3E%3C/svg%3E")}
body.sprout[data-daypart="day"] .scroll,body.hoppin-auth[data-daypart="day"] .scroll,.hoppin-splash[data-daypart="day"] .hoppin-splash-scene{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20390%20124%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20fill=%22%23edf6e7%22%20d=%22M0%200h390v124H0z%22/%3E%3Ccircle%20cx=%22320%22%20cy=%2229%22%20r=%2235%22%20fill=%22%23ffe191%22%20opacity=%22.17%22/%3E%3Ccircle%20cx=%22320%22%20cy=%2229%22%20r=%2229%22%20fill=%22%23ffe191%22%20opacity=%22.28%22/%3E%3Ccircle%20cx=%22320%22%20cy=%2229%22%20r=%2224%22%20fill=%22%23ffe191%22/%3E%3Cpath%20d=%22M14%2039q10-10%2023-5%209-13%2024-7%2011%200%2017%2012zM190%2051q8-8%2019-4%208-10%2020-5%208%200%2013%209z%22%20fill=%22%23fffdf0%22%20opacity=%22.83%22/%3E%3Cpath%20d=%22m249%2031%207-3%205%203m9%206%207-3%205%203%22%20fill=%22none%22%20stroke=%22%234d9066%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20opacity=%22.7%22/%3E%3Cpath%20d=%22M0%2084Q48%2067%2093%2080t95-1q45-15%2089-3t113-6v54H0z%22%20fill=%22%23d2e7b9%22/%3E%3Cg%20fill=%22%234d9066%22%20opacity=%22.78%22%3E%3Cpath%20d=%22M31%2091V77m178%2013V75m149%2015V77%22%20stroke=%22%234d9066%22%20stroke-width=%222%22/%3E%3Cpath%20d=%22M19%2079q2-13%2013-13%2011%200%2013%2013-8%207-26%200zm178-4q1-13%2013-13%2010%200%2013%2013-10%208-26%200zm149%203q2-11%2013-11%2010%200%2013%2011-10%207-26%200z%22%20fill=%22%23afd294%22/%3E%3C/g%3E%3Cpath%20d=%22M0%20100q65-25%20128-6t137-10q53-19%20125%201v39H0z%22%20fill=%22%23afd294%22/%3E%3Cpath%20d=%22M0%20112q62-19%20117-7t110-4q86-19%20163-1v24H0z%22%20fill=%22%2386bb78%22/%3E%3Cg%20stroke=%22%234d9066%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20fill=%22none%22%20opacity=%22.8%22%3E%3Cpath%20d=%22m11%20111-3-5m3%205%204-6m48%209-3-6m3%206%204-5m63%201-4-6m4%206%203-4m102%202-3-5m3%205%204-6m104%204-3-5m3%205%204-5%22/%3E%3C/g%3E%3Cg%20fill=%22%23fffdf0%22%3E%3Ccircle%20cx=%2251%22%20cy=%22107%22%20r=%222%22/%3E%3Ccircle%20cx=%22168%22%20cy=%22107%22%20r=%222%22/%3E%3Ccircle%20cx=%22284%22%20cy=%22105%22%20r=%222%22/%3E%3Ccircle%20cx=%22357%22%20cy=%22111%22%20r=%221.7%22/%3E%3C/g%3E%3Cg%20fill=%22%23ffe191%22%3E%3Ccircle%20cx=%2251%22%20cy=%22107%22%20r=%22.8%22/%3E%3Ccircle%20cx=%22168%22%20cy=%22107%22%20r=%22.8%22/%3E%3Ccircle%20cx=%22284%22%20cy=%22105%22%20r=%22.8%22/%3E%3C/g%3E%3C/svg%3E")}
body.sprout[data-daypart="day"] .scroll::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20390%2080%22%3E%3Cpath%20d=%22M44%2042q10-9%2024-4%208-10%2022-4%209%200%2015%208zM175%2029q8-8%2019-4%208-9%2020-4%208%200%2013%208z%22%20fill=%22%23fff%22%20opacity=%22.55%22/%3E%3C/svg%3E")}
body.sprout[data-daypart="evening"] .scroll,body.hoppin-auth[data-daypart="evening"] .scroll,.hoppin-splash[data-daypart="evening"] .hoppin-splash-scene{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20390%20124%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20fill=%22%23f9e6ca%22%20d=%22M0%200h390v124H0z%22/%3E%3Ccircle%20cx=%22308%22%20cy=%2262%22%20r=%2242%22%20fill=%22%23f0a856%22%20opacity=%22.17%22/%3E%3Ccircle%20cx=%22308%22%20cy=%2262%22%20r=%2236%22%20fill=%22%23f0a856%22%20opacity=%22.28%22/%3E%3Ccircle%20cx=%22308%22%20cy=%2262%22%20r=%2231%22%20fill=%22%23f0a856%22/%3E%3Cpath%20d=%22M15%2037q30-9%2064%200zm145%2011q37-9%2074%200zm170-14q22-7%2045%200z%22%20fill=%22%23fff4d9%22%20opacity=%22.73%22/%3E%3Cpath%20d=%22M7%2049h82m76%2012h79m82-16h57%22%20stroke=%22%23f0a856%22%20stroke-width=%222%22%20opacity=%22.5%22/%3E%3Cpath%20d=%22M0%2084Q48%2067%2093%2080t95-1q45-15%2089-3t113-6v54H0z%22%20fill=%22%23cfdda8%22/%3E%3Cg%20fill=%22%2348775e%22%20opacity=%22.78%22%3E%3Cpath%20d=%22M31%2091V77m178%2013V75m149%2015V77%22%20stroke=%22%2348775e%22%20stroke-width=%222%22/%3E%3Cpath%20d=%22M19%2079q2-13%2013-13%2011%200%2013%2013-8%207-26%200zm178-4q1-13%2013-13%2010%200%2013%2013-10%208-26%200zm149%203q2-11%2013-11%2010%200%2013%2011-10%207-26%200z%22%20fill=%22%23a6bf84%22/%3E%3C/g%3E%3Cpath%20d=%22M0%20100q65-25%20128-6t137-10q53-19%20125%201v39H0z%22%20fill=%22%23a6bf84%22/%3E%3Cpath%20d=%22M0%20112q62-19%20117-7t110-4q86-19%20163-1v24H0z%22%20fill=%22%236f9c69%22/%3E%3Cg%20stroke=%22%2348775e%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20fill=%22none%22%20opacity=%22.8%22%3E%3Cpath%20d=%22m11%20111-3-5m3%205%204-6m48%209-3-6m3%206%204-5m63%201-4-6m4%206%203-4m102%202-3-5m3%205%204-6m104%204-3-5m3%205%204-5%22/%3E%3C/g%3E%3Cg%20fill=%22%23fff4d9%22%3E%3Ccircle%20cx=%2251%22%20cy=%22107%22%20r=%222%22/%3E%3Ccircle%20cx=%22168%22%20cy=%22107%22%20r=%222%22/%3E%3Ccircle%20cx=%22284%22%20cy=%22105%22%20r=%222%22/%3E%3Ccircle%20cx=%22357%22%20cy=%22111%22%20r=%221.7%22/%3E%3C/g%3E%3Cg%20fill=%22%23f0a856%22%3E%3Ccircle%20cx=%2251%22%20cy=%22107%22%20r=%22.8%22/%3E%3Ccircle%20cx=%22168%22%20cy=%22107%22%20r=%22.8%22/%3E%3Ccircle%20cx=%22284%22%20cy=%22105%22%20r=%22.8%22/%3E%3C/g%3E%3C/svg%3E")}
body.sprout[data-daypart="evening"] .scroll::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20390%2080%22%3E%3Cpath%20d=%22M30%2043q27-7%2056%200zm167-11q28-8%2061%200z%22%20fill=%22%23fff1d4%22%20opacity=%22.56%22/%3E%3C/svg%3E")}
body.sprout[data-daypart="night"] .scroll,body.hoppin-auth[data-daypart="night"] .scroll,.hoppin-splash[data-daypart="night"] .hoppin-splash-scene{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20390%20124%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20fill=%22%2326364a%22%20d=%22M0%200h390v124H0z%22/%3E%3Ccircle%20cx=%22317%22%20cy=%2232%22%20r=%2219%22%20fill=%22%23fff1b7%22/%3E%3Ccircle%20cx=%22324%22%20cy=%2225%22%20r=%2217%22%20fill=%22%2326364a%22/%3E%3Ccircle%20cx=%22306%22%20cy=%2244%22%20r=%222%22%20fill=%22%23cbdacb%22%20opacity=%22.6%22/%3E%3Cg%20fill=%22%23fff6cf%22%3E%3Ccircle%20cx=%2227%22%20cy=%2226%22%20r=%221.3%22/%3E%3Ccircle%20cx=%2281%22%20cy=%2216%22%20r=%221%22/%3E%3Ccircle%20cx=%22156%22%20cy=%2238%22%20r=%221.5%22/%3E%3Ccircle%20cx=%22211%22%20cy=%2219%22%20r=%221%22/%3E%3Ccircle%20cx=%22254%22%20cy=%2246%22%20r=%221.2%22/%3E%3Ccircle%20cx=%22376%22%20cy=%2221%22%20r=%221.2%22/%3E%3Cpath%20d=%22m113%2026%201.5%204%204%201.5-4%201.5-1.5%204-1.5-4-4-1.5%204-1.5zm115%2015%201%203%203%201-3%201-1%203-1-3-3-1%203-1z%22/%3E%3C/g%3E%3Cpath%20d=%22M0%2084Q48%2067%2093%2080t95-1q45-15%2089-3t113-6v54H0z%22%20fill=%22%234a6a5c%22/%3E%3Cg%20fill=%22%231d3a30%22%20opacity=%22.78%22%3E%3Cpath%20d=%22M31%2091V77m178%2013V75m149%2015V77%22%20stroke=%22%231d3a30%22%20stroke-width=%222%22/%3E%3Cpath%20d=%22M19%2079q2-13%2013-13%2011%200%2013%2013-8%207-26%200zm178-4q1-13%2013-13%2010%200%2013%2013-10%208-26%200zm149%203q2-11%2013-11%2010%200%2013%2011-10%207-26%200z%22%20fill=%22%23386052%22/%3E%3C/g%3E%3Cpath%20d=%22M0%20100q65-25%20128-6t137-10q53-19%20125%201v39H0z%22%20fill=%22%23386052%22/%3E%3Cpath%20d=%22M0%20112q62-19%20117-7t110-4q86-19%20163-1v24H0z%22%20fill=%22%232a4a3e%22/%3E%3Cg%20stroke=%22%231d3a30%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20fill=%22none%22%20opacity=%22.8%22%3E%3Cpath%20d=%22m11%20111-3-5m3%205%204-6m48%209-3-6m3%206%204-5m63%201-4-6m4%206%203-4m102%202-3-5m3%205%204-6m104%204-3-5m3%205%204-5%22/%3E%3C/g%3E%3Cg%20fill=%22%23fff6cf%22%3E%3Ccircle%20cx=%2251%22%20cy=%22107%22%20r=%222%22/%3E%3Ccircle%20cx=%22168%22%20cy=%22107%22%20r=%222%22/%3E%3Ccircle%20cx=%22284%22%20cy=%22105%22%20r=%222%22/%3E%3Ccircle%20cx=%22357%22%20cy=%22111%22%20r=%221.7%22/%3E%3C/g%3E%3Cg%20fill=%22%23fff1b7%22%3E%3Ccircle%20cx=%2251%22%20cy=%22107%22%20r=%22.8%22/%3E%3Ccircle%20cx=%22168%22%20cy=%22107%22%20r=%22.8%22/%3E%3Ccircle%20cx=%22284%22%20cy=%22105%22%20r=%22.8%22/%3E%3C/g%3E%3Cg%20fill=%22%23fff6cf%22%20opacity=%22.8%22%3E%3Ccircle%20cx=%2285%22%20cy=%2283%22%20r=%221.8%22/%3E%3Ccircle%20cx=%22243%22%20cy=%2276%22%20r=%221.5%22/%3E%3Ccircle%20cx=%22336%22%20cy=%2288%22%20r=%221.7%22/%3E%3C/g%3E%3C/svg%3E")}
body.sprout[data-daypart="night"] .scroll::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20390%2080%22%3E%3Cg%20fill=%22%23fff8ce%22%3E%3Ccircle%20cx=%2282%22%20cy=%2220%22%20r=%221.3%22/%3E%3Ccircle%20cx=%22176%22%20cy=%2239%22%20r=%221.7%22/%3E%3Ccircle%20cx=%22254%22%20cy=%2217%22%20r=%221.2%22/%3E%3C/g%3E%3C/svg%3E")}
.night body.sprout[data-daypart="morning"] .scroll{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20390%20124%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20fill=%22%2326372e%22%20d=%22M0%200h390v124H0z%22/%3E%3Ccircle%20cx=%22311%22%20cy=%2260%22%20r=%2236%22%20fill=%22%23b99458%22%20opacity=%22.17%22/%3E%3Ccircle%20cx=%22311%22%20cy=%2260%22%20r=%2230%22%20fill=%22%23b99458%22%20opacity=%22.28%22/%3E%3Ccircle%20cx=%22311%22%20cy=%2260%22%20r=%2225%22%20fill=%22%23b99458%22/%3E%3Cpath%20d=%22M253%2059h18m9-31%208%209m46-5%208-8M296%2096h-26m61-8%2011%208%22%20stroke=%22%23b99458%22%20stroke-width=%223%22%20stroke-linecap=%22round%22%20opacity=%22.6%22/%3E%3Cpath%20d=%22M19%2043q8-9%2019-4%208-11%2022-4%209-1%2014%208zM151%2024q5-5%2012-3%207-8%2016-4%207%200%2011%207z%22%20fill=%22%23d4c796%22%20opacity=%22.63%22/%3E%3Cpath%20d=%22M0%2084Q48%2067%2093%2080t95-1q45-15%2089-3t113-6v54H0z%22%20fill=%22%23355542%22/%3E%3Cg%20fill=%22%236d9c75%22%20opacity=%22.78%22%3E%3Cpath%20d=%22M31%2091V77m178%2013V75m149%2015V77%22%20stroke=%22%236d9c75%22%20stroke-width=%222%22/%3E%3Cpath%20d=%22M19%2079q2-13%2013-13%2011%200%2013%2013-8%207-26%200zm178-4q1-13%2013-13%2010%200%2013%2013-10%208-26%200zm149%203q2-11%2013-11%2010%200%2013%2011-10%207-26%200z%22%20fill=%22%232b4d3d%22/%3E%3C/g%3E%3Cpath%20d=%22M0%20100q65-25%20128-6t137-10q53-19%20125%201v39H0z%22%20fill=%22%232b4d3d%22/%3E%3Cpath%20d=%22M0%20112q62-19%20117-7t110-4q86-19%20163-1v24H0z%22%20fill=%22%23234638%22/%3E%3Cg%20stroke=%22%236d9c75%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20fill=%22none%22%20opacity=%22.8%22%3E%3Cpath%20d=%22m11%20111-3-5m3%205%204-6m48%209-3-6m3%206%204-5m63%201-4-6m4%206%203-4m102%202-3-5m3%205%204-6m104%204-3-5m3%205%204-5%22/%3E%3C/g%3E%3Cg%20fill=%22%23d4c796%22%3E%3Ccircle%20cx=%2251%22%20cy=%22107%22%20r=%222%22/%3E%3Ccircle%20cx=%22168%22%20cy=%22107%22%20r=%222%22/%3E%3Ccircle%20cx=%22284%22%20cy=%22105%22%20r=%222%22/%3E%3Ccircle%20cx=%22357%22%20cy=%22111%22%20r=%221.7%22/%3E%3C/g%3E%3Cg%20fill=%22%23b99458%22%3E%3Ccircle%20cx=%2251%22%20cy=%22107%22%20r=%22.8%22/%3E%3Ccircle%20cx=%22168%22%20cy=%22107%22%20r=%22.8%22/%3E%3Ccircle%20cx=%22284%22%20cy=%22105%22%20r=%22.8%22/%3E%3C/g%3E%3C/svg%3E")}
.night body.sprout[data-daypart="day"] .scroll{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20390%20124%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20fill=%22%23263a36%22%20d=%22M0%200h390v124H0z%22/%3E%3Ccircle%20cx=%22320%22%20cy=%2229%22%20r=%2235%22%20fill=%22%23b7ad70%22%20opacity=%22.17%22/%3E%3Ccircle%20cx=%22320%22%20cy=%2229%22%20r=%2229%22%20fill=%22%23b7ad70%22%20opacity=%22.28%22/%3E%3Ccircle%20cx=%22320%22%20cy=%2229%22%20r=%2224%22%20fill=%22%23b7ad70%22/%3E%3Cpath%20d=%22M14%2039q10-10%2023-5%209-13%2024-7%2011%200%2017%2012zM190%2051q8-8%2019-4%208-10%2020-5%208%200%2013%209z%22%20fill=%22%23d7d9ae%22%20opacity=%22.83%22/%3E%3Cpath%20d=%22m249%2031%207-3%205%203m9%206%207-3%205%203%22%20fill=%22none%22%20stroke=%22%2378a782%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20opacity=%22.7%22/%3E%3Cpath%20d=%22M0%2084Q48%2067%2093%2080t95-1q45-15%2089-3t113-6v54H0z%22%20fill=%22%23355b49%22/%3E%3Cg%20fill=%22%2378a782%22%20opacity=%22.78%22%3E%3Cpath%20d=%22M31%2091V77m178%2013V75m149%2015V77%22%20stroke=%22%2378a782%22%20stroke-width=%222%22/%3E%3Cpath%20d=%22M19%2079q2-13%2013-13%2011%200%2013%2013-8%207-26%200zm178-4q1-13%2013-13%2010%200%2013%2013-10%208-26%200zm149%203q2-11%2013-11%2010%200%2013%2011-10%207-26%200z%22%20fill=%22%232b503f%22/%3E%3C/g%3E%3Cpath%20d=%22M0%20100q65-25%20128-6t137-10q53-19%20125%201v39H0z%22%20fill=%22%232b503f%22/%3E%3Cpath%20d=%22M0%20112q62-19%20117-7t110-4q86-19%20163-1v24H0z%22%20fill=%22%23224738%22/%3E%3Cg%20stroke=%22%2378a782%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20fill=%22none%22%20opacity=%22.8%22%3E%3Cpath%20d=%22m11%20111-3-5m3%205%204-6m48%209-3-6m3%206%204-5m63%201-4-6m4%206%203-4m102%202-3-5m3%205%204-6m104%204-3-5m3%205%204-5%22/%3E%3C/g%3E%3Cg%20fill=%22%23d7d9ae%22%3E%3Ccircle%20cx=%2251%22%20cy=%22107%22%20r=%222%22/%3E%3Ccircle%20cx=%22168%22%20cy=%22107%22%20r=%222%22/%3E%3Ccircle%20cx=%22284%22%20cy=%22105%22%20r=%222%22/%3E%3Ccircle%20cx=%22357%22%20cy=%22111%22%20r=%221.7%22/%3E%3C/g%3E%3Cg%20fill=%22%23b7ad70%22%3E%3Ccircle%20cx=%2251%22%20cy=%22107%22%20r=%22.8%22/%3E%3Ccircle%20cx=%22168%22%20cy=%22107%22%20r=%22.8%22/%3E%3Ccircle%20cx=%22284%22%20cy=%22105%22%20r=%22.8%22/%3E%3C/g%3E%3C/svg%3E")}
.night body.sprout[data-daypart="evening"] .scroll{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20390%20124%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20fill=%22%233b352e%22%20d=%22M0%200h390v124H0z%22/%3E%3Ccircle%20cx=%22308%22%20cy=%2262%22%20r=%2242%22%20fill=%22%23b7754b%22%20opacity=%22.17%22/%3E%3Ccircle%20cx=%22308%22%20cy=%2262%22%20r=%2236%22%20fill=%22%23b7754b%22%20opacity=%22.28%22/%3E%3Ccircle%20cx=%22308%22%20cy=%2262%22%20r=%2231%22%20fill=%22%23b7754b%22/%3E%3Cpath%20d=%22M15%2037q30-9%2064%200zm145%2011q37-9%2074%200zm170-14q22-7%2045%200z%22%20fill=%22%23d9b68b%22%20opacity=%22.73%22/%3E%3Cpath%20d=%22M7%2049h82m76%2012h79m82-16h57%22%20stroke=%22%23b7754b%22%20stroke-width=%222%22%20opacity=%22.5%22/%3E%3Cpath%20d=%22M0%2084Q48%2067%2093%2080t95-1q45-15%2089-3t113-6v54H0z%22%20fill=%22%2347563d%22/%3E%3Cg%20fill=%22%2378936d%22%20opacity=%22.78%22%3E%3Cpath%20d=%22M31%2091V77m178%2013V75m149%2015V77%22%20stroke=%22%2378936d%22%20stroke-width=%222%22/%3E%3Cpath%20d=%22M19%2079q2-13%2013-13%2011%200%2013%2013-8%207-26%200zm178-4q1-13%2013-13%2010%200%2013%2013-10%208-26%200zm149%203q2-11%2013-11%2010%200%2013%2011-10%207-26%200z%22%20fill=%22%2338513a%22/%3E%3C/g%3E%3Cpath%20d=%22M0%20100q65-25%20128-6t137-10q53-19%20125%201v39H0z%22%20fill=%22%2338513a%22/%3E%3Cpath%20d=%22M0%20112q62-19%20117-7t110-4q86-19%20163-1v24H0z%22%20fill=%22%23294736%22/%3E%3Cg%20stroke=%22%2378936d%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20fill=%22none%22%20opacity=%22.8%22%3E%3Cpath%20d=%22m11%20111-3-5m3%205%204-6m48%209-3-6m3%206%204-5m63%201-4-6m4%206%203-4m102%202-3-5m3%205%204-6m104%204-3-5m3%205%204-5%22/%3E%3C/g%3E%3Cg%20fill=%22%23d9b68b%22%3E%3Ccircle%20cx=%2251%22%20cy=%22107%22%20r=%222%22/%3E%3Ccircle%20cx=%22168%22%20cy=%22107%22%20r=%222%22/%3E%3Ccircle%20cx=%22284%22%20cy=%22105%22%20r=%222%22/%3E%3Ccircle%20cx=%22357%22%20cy=%22111%22%20r=%221.7%22/%3E%3C/g%3E%3Cg%20fill=%22%23b7754b%22%3E%3Ccircle%20cx=%2251%22%20cy=%22107%22%20r=%22.8%22/%3E%3Ccircle%20cx=%22168%22%20cy=%22107%22%20r=%22.8%22/%3E%3Ccircle%20cx=%22284%22%20cy=%22105%22%20r=%22.8%22/%3E%3C/g%3E%3C/svg%3E")}
.night body.sprout[data-daypart="night"] .scroll{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20390%20124%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20fill=%22%231b2d30%22%20d=%22M0%200h390v124H0z%22/%3E%3Ccircle%20cx=%22317%22%20cy=%2232%22%20r=%2219%22%20fill=%22%23e3d59a%22/%3E%3Ccircle%20cx=%22324%22%20cy=%2225%22%20r=%2217%22%20fill=%22%231b2d30%22/%3E%3Ccircle%20cx=%22306%22%20cy=%2244%22%20r=%222%22%20fill=%22%23344b4a%22%20opacity=%22.6%22/%3E%3Cg%20fill=%22%23e2dfb3%22%3E%3Ccircle%20cx=%2227%22%20cy=%2226%22%20r=%221.3%22/%3E%3Ccircle%20cx=%2281%22%20cy=%2216%22%20r=%221%22/%3E%3Ccircle%20cx=%22156%22%20cy=%2238%22%20r=%221.5%22/%3E%3Ccircle%20cx=%22211%22%20cy=%2219%22%20r=%221%22/%3E%3Ccircle%20cx=%22254%22%20cy=%2246%22%20r=%221.2%22/%3E%3Ccircle%20cx=%22376%22%20cy=%2221%22%20r=%221.2%22/%3E%3Cpath%20d=%22m113%2026%201.5%204%204%201.5-4%201.5-1.5%204-1.5-4-4-1.5%204-1.5zm115%2015%201%203%203%201-3%201-1%203-1-3-3-1%203-1z%22/%3E%3C/g%3E%3Cpath%20d=%22M0%2084Q48%2067%2093%2080t95-1q45-15%2089-3t113-6v54H0z%22%20fill=%22%232b4945%22/%3E%3Cg%20fill=%22%237bada0%22%20opacity=%22.78%22%3E%3Cpath%20d=%22M31%2091V77m178%2013V75m149%2015V77%22%20stroke=%22%237bada0%22%20stroke-width=%222%22/%3E%3Cpath%20d=%22M19%2079q2-13%2013-13%2011%200%2013%2013-8%207-26%200zm178-4q1-13%2013-13%2010%200%2013%2013-10%208-26%200zm149%203q2-11%2013-11%2010%200%2013%2011-10%207-26%200z%22%20fill=%22%2324433e%22/%3E%3C/g%3E%3Cpath%20d=%22M0%20100q65-25%20128-6t137-10q53-19%20125%201v39H0z%22%20fill=%22%2324433e%22/%3E%3Cpath%20d=%22M0%20112q62-19%20117-7t110-4q86-19%20163-1v24H0z%22%20fill=%22%231d3937%22/%3E%3Cg%20stroke=%22%237bada0%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20fill=%22none%22%20opacity=%22.8%22%3E%3Cpath%20d=%22m11%20111-3-5m3%205%204-6m48%209-3-6m3%206%204-5m63%201-4-6m4%206%203-4m102%202-3-5m3%205%204-6m104%204-3-5m3%205%204-5%22/%3E%3C/g%3E%3Cg%20fill=%22%23e2dfb3%22%3E%3Ccircle%20cx=%2251%22%20cy=%22107%22%20r=%222%22/%3E%3Ccircle%20cx=%22168%22%20cy=%22107%22%20r=%222%22/%3E%3Ccircle%20cx=%22284%22%20cy=%22105%22%20r=%222%22/%3E%3Ccircle%20cx=%22357%22%20cy=%22111%22%20r=%221.7%22/%3E%3C/g%3E%3Cg%20fill=%22%23e3d59a%22%3E%3Ccircle%20cx=%2251%22%20cy=%22107%22%20r=%22.8%22/%3E%3Ccircle%20cx=%22168%22%20cy=%22107%22%20r=%22.8%22/%3E%3Ccircle%20cx=%22284%22%20cy=%22105%22%20r=%22.8%22/%3E%3C/g%3E%3Cg%20fill=%22%23e2dfb3%22%20opacity=%22.8%22%3E%3Ccircle%20cx=%2285%22%20cy=%2283%22%20r=%221.8%22/%3E%3Ccircle%20cx=%22243%22%20cy=%2276%22%20r=%221.5%22/%3E%3Ccircle%20cx=%22336%22%20cy=%2288%22%20r=%221.7%22/%3E%3C/g%3E%3C/svg%3E")}
body.sprout[data-daypart="night"] .scroll::before{animation:sproutStarTwinkle 7s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){body.sprout .scroll::before{animation:none}}
/* ---- 🌳 スキルツリー＝大きな木（2026-10-27 小泉）。枝先の丸＝柱（01〜07）。押すと下の一覧がひらく ---- */
body.sprout .bigtree{position:relative;width:340px;max-width:100%;margin:4px auto 6px}
body.sprout .bigtree .treesvg{position:absolute;inset:0;width:100%;height:100%;display:block}
body.sprout .tnode{position:absolute;width:52px;height:52px;border-radius:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;font-size:15px;line-height:1;color:#fff;background:#b5bdb0;box-shadow:0 4px 0 #8d978a;cursor:pointer}
body.sprout .tnode small{font-size:9px;font-weight:800;opacity:.95;margin-top:2px}
body.sprout .tnode.some{background:var(--theme2);box-shadow:0 4px 0 var(--theme)}
body.sprout .tnode.full{background:var(--theme);box-shadow:0 4px 0 var(--edge)}
body.sprout .tnode:active{transform:translate(-50%,-50%) translateY(2px)}
body.sprout .tlabel{position:absolute;transform:translateX(-50%);font-size:10.5px;font-weight:800;color:var(--ink);white-space:nowrap;background:rgba(255,255,255,.75);border-radius:8px;padding:1px 6px}
.night body.sprout .tlabel{background:rgba(0,0,0,.35)}
body.sprout .bigtree .tmb{position:absolute;left:226px;bottom:6px;width:84px;height:84px}
body.sprout .bigtree .tmb svg{width:100%;height:100%;overflow:visible}
/* ---- 🌿 進捗の道＝草原 ---- */
body.sprout .path .pathline{border-radius:24px}

/* 芽の精：アルバイトの残りのタブ。既存の操作・状態はそのまま見た目だけ揃える。 */
body.sprout .demo-states{position:relative;z-index:1;margin-top:0}
body.sprout .coachtab .coachhdr,
body.sprout .sh-cyc,body.sprout .sh-list,body.sprout .sh-empty,
body.sprout .mkcard,body.sprout .mkreq{
  background:var(--card);border:2px solid var(--sep);border-bottom-width:4px;border-radius:18px;
}
body.sprout .sh-list,body.sprout .mkcard{overflow:hidden}
body.sprout .sh-pcard,body.sprout .sh-allday{
  background:var(--card);border:2px solid var(--sep);border-bottom-width:4px;border-radius:16px;
}
body.sprout .sh-pcard.on{border-color:var(--theme);background:var(--themeSoft)}
body.sprout .sh-pcard.over{border-color:var(--danger);background:var(--dangerSoft)}
body.sprout .sh-cyc.closed{background:var(--card)}
body.sprout .sh-view,body.sprout .sh-fixmode{background:var(--sep);border-radius:16px}
body.sprout .sh-view button,body.sprout .sh-fixmode button{border-radius:12px;font-weight:800}
body.sprout .sh-view button.on,body.sprout .sh-fixmode button.on{color:var(--theme);box-shadow:0 3px 0 var(--edge)}
body.sprout .sh-bulk,body.sprout .sh-row,body.sprout .mkhead{font-weight:800}
body.sprout .sh-bulk{border-width:2px;border-bottom-width:4px;border-radius:13px}
body.sprout .sh-row:active,body.sprout .mkhead:active{background:var(--themeSoft)}
body.sprout .mkbody{border-top:2px solid var(--sep)}
body.sprout .mkreq textarea,body.sprout .mkweek select{border:2px solid var(--sep);border-radius:14px}
body.sprout .coachtab .bubble,body.sprout .chatempty,body.sprout .qacta{
  border-radius:16px;
}
body.sprout .qachip,body.sprout .qasend,body.sprout .qacta{
  border-radius:14px;font-weight:800;
}
body.sprout .qachip,body.sprout .qasend{box-shadow:0 3px 0 var(--edge)}
body.sprout .group .row .badge{border-radius:10px}

body.sprout .mbCoach{width:66px;height:66px;right:8px;top:-18px}
body.sprout .coach.coachtop .msg{padding-right:60px}
.pyoko-chat{position:relative}
.pyoko-chat .mbCoach{position:absolute;right:7px;top:-18px;width:66px;height:66px}
.pyoko-chat .mbCoach svg{width:100%;height:100%;overflow:visible}
.pyoko-chat .msg{padding-right:60px}
@media (max-width:370px){body.sprout .hello .mb{width:78px;height:78px}body.sprout .hello .say{font-size:12px;padding:8px}}


/* 修正3回目：スタッフの画面はグリーンとクリームで統一する。 */
body.sprout{
  --bg:#faf6e9;--card:#fffdf7;--sep:#dbe7d6;--ink:#20372a;--sub:#526858;
  --theme:#246b49;--theme2:#39805a;--themeSoft:#e2efdc;
  --edge:#174c36;
  font-family:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  background:var(--bg);
}
.night body.sprout{
  --bg:#18271d;--card:#26392b;--sep:#405747;--ink:#f2f5eb;--sub:#c6d4c2;
  --theme:#246b49;--theme2:#b7e0b7;--themeSoft:#344d39;--edge:#173e2d;
  background:var(--bg);
}
body.sprout[data-daypart="morning"]{--bg:#fbf5e5;--sky:#fff0d2}
body.sprout[data-daypart="day"]{--bg:#faf6e9;--sky:#e8f1dc}
body.sprout[data-daypart="evening"]{--bg:#f8f1e2;--sky:#f5e2c2}
body.sprout[data-daypart="night"]{--bg:#f1f1e5;--sky:#dcebdc}
.night body.sprout[data-daypart]{--bg:#18271d;background-image:none}
body.sprout .apphdr .hdxp,body.sprout .apphdr .hdxp small,
body.sprout .hello .say b,body.sprout .nav div.on{color:#246b49}
.night body.sprout .apphdr .hdxp,.night body.sprout .apphdr .hdxp small,
.night body.sprout .hello .say b,.night body.sprout .nav div.on{color:#b7e0b7}
body.sprout .hello{align-items:center;gap:3px;min-height:0;margin:10px 10px 4px}
body.sprout .hello .mb{width:166px;height:166px;margin:0 -6px 0 -12px;animation:pyokoFloat 5s ease-in-out infinite;transform-origin:50% 82%}
body.sprout .hello .say{height:auto;margin:0;padding:9px 10px;font-size:12.5px;line-height:1.46;overflow:hidden}
body.sprout .saywho{display:block;color:#246b49;font-weight:900;margin-bottom:4px}
.night body.sprout .saywho{color:#b7e0b7}
body.sprout .saycontent{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin}
body.sprout .saycontent:focus-visible{outline:2px solid #246b49;outline-offset:-2px;border-radius:8px}
body.sprout .saynote{margin-top:18px;padding-top:11px;border-top:1px solid #d8e6d1}
body.sprout .saycontent #coachrx:not(:empty){padding-top:16px;padding-bottom:4px}
body.sprout .saycontent .crxrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:0}
body.sprout .saycontent .crx{min-height:36px;border:1px solid var(--sep);border-radius:9px;background:var(--themeSoft);color:var(--ink);padding:6px 8px;font:inherit;font-size:11px;cursor:pointer}
body.sprout .saycontent .crx.on{background:var(--theme);color:#fff}
@keyframes pyokoFloat{0%,100%{transform:translateY(1px) rotate(-2deg)}35%{transform:translateY(-8px) rotate(2deg)}65%{transform:translateY(-2px) rotate(-1deg)}}
@media(max-width:370px){body.sprout .hello .mb{width:150px;height:150px}body.sprout .hello .say{font-size:11.5px}}
@media(prefers-reduced-motion:reduce){body.sprout .hello .mb{animation:none}}
body.sprout .usage-chip{display:inline-flex;align-items:center;gap:5px;min-height:40px;margin:7px 0 0;padding:4px 12px;border-radius:14px;background:var(--themeSoft);color:#24583e;font-size:14px;font-weight:900;line-height:1}
body.sprout .usage-chip .bico{color:#ae6a18;stroke-width:2.5}
body.sprout .usage-chip b{font-size:24px;line-height:1;font-variant-numeric:tabular-nums}
.night body.sprout .usage-chip{color:#d7eed4}
body.sprout .apphdr .toprow{gap:6px}
body.sprout .apphdr .hdleft{min-width:0;gap:7px}
body.sprout .apphdr .bigdate{white-space:nowrap}
@media(max-width:370px){body.sprout .apphdr{padding-left:12px;padding-right:12px}body.sprout .apphdr .bigdate{font-size:15px}body.sprout .apphdr .biglv{padding:4px 9px}}
.usage-intro{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;padding:24px;background:#faf6e9;color:#20372a;text-align:center;font-family:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif}
.night .usage-intro{background:#18271d;color:#f2f5eb}
.usage-intro-inner{width:min(100%,390px)}
.usage-mascot{width:168px;height:168px;margin:0 auto 5px}
.usage-kicker{font-size:17px;font-weight:800;margin-bottom:10px}
.usage-value{display:flex;flex-direction:column;align-items:center;font-size:22px;font-weight:800;margin:8px 0}
.usage-value strong{display:flex;align-items:baseline;justify-content:center;gap:6px;line-height:1}
.usage-value b{display:inline-block;font-size:clamp(96px,28vw,112px);font-weight:900;letter-spacing:-.06em;color:#246b49}
.usage-value small{font-size:32px;color:#246b49}
.usage-percent b{font-size:72px}
.usage-percent small{font-size:28px}
.usage-value b,body.sprout .usage-chip,body.sprout .apphdr .hdxp,body.sprout .pathbanner .pblv{font-variant-numeric:tabular-nums}
.night .usage-value b,.night .usage-value small{color:#b7e0b7}
.usage-intro p{font-size:13px;color:#526858}
.night .usage-intro p{color:#c6d4c2}
.usage-intro button{width:100%;margin-top:14px;padding:14px;border:0;border-bottom:4px solid #174c36;border-radius:16px;background:#246b49;color:#fff;font:inherit;font-size:18px;font-weight:900;cursor:pointer}
body.sprout .pyoko-key{color:#a86516;stroke-width:2.7;vertical-align:-4px}
body.sprout .pnode.lock .bico{stroke-width:2.7;vertical-align:0;margin-top:2px}
body.sprout .mknew{background:#246b49;color:#fff}
.night body.sprout .tnode.some{background:#39805a;color:#fff}
.usage-mascot svg{width:100%;height:100%;overflow:visible}
body.sprout .xpbar .st,body.sprout .xpbar .no{background:#246b49}

/* Hoppin: login, setup, waiting and the first frame share one calm palette. */
body.hoppin-auth{--bg:#faf6e9;--card:#fffdf7;--ink:#20372a;--sub:#526858;--sep:#dbe7d6;--theme:#246b49;--theme2:#39805a;--themeSoft:#e2efdc;--edge:#174c36;background:#faf6e9;color:var(--ink);font-family:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,sans-serif}
body.hoppin-auth .scroll{background-color:#faf6e9;background-size:100% 124px;background-position:top center;background-repeat:no-repeat;padding-top:112px}
body.hoppin-auth .hdr{margin-top:8px}
body.hoppin-auth .hdr .date{color:#526858}
body.hoppin-auth .hdr .title{color:#20372a}
.hoppin-logo{display:block;object-fit:contain;max-width:100%;height:auto}
.hoppin-auth-hero{display:flex;justify-content:center;margin:0 20px 12px}
.hoppin-auth-logo{width:min(86%,360px);max-height:118px}
.hoppin-state-logo{width:min(68%,260px);margin:0 auto 14px}
body.hoppin-auth .authform .setuprow{margin-block:12px}
body.hoppin-auth input.txt,body.hoppin-auth select.sel{border:2px solid #b8cdb5;border-radius:16px;background:#fffdf8;color:#20372a;min-height:50px}
body.hoppin-auth input.txt:focus,body.hoppin-auth select.sel:focus{outline:3px solid #a7d6a6;outline-offset:2px;border-color:#246b49}
body.hoppin-auth .btn{border-radius:16px;background:#246b49;box-shadow:0 4px 0 #174c36;font-family:inherit;font-weight:900;transition:transform .12s,box-shadow .12s}
body.hoppin-auth .btn:active{transform:translateY(3px);box-shadow:0 1px 0 #174c36}
body.hoppin-auth .btn.ghost{background:#fffdf8;color:#246b49;border:2px solid #b8cdb5;box-shadow:0 3px 0 #b8cdb5}
body.hoppin-auth .coach{background:#fffdf8;border:2px solid #dbe7d6;border-radius:20px;color:#20372a}
.hoppin-auth-coach{display:flex;align-items:center;gap:10px}
.hoppin-auth-coach>div:last-child{flex:1;min-width:0}
.hoppin-auth-coach .msg{color:#20372a}
.hoppin-auth-pyoko{display:block;width:74px;height:74px;flex:none}
.hoppin-auth-pyoko svg{width:100%;height:100%}
.hoppin-auth .accentink{color:#246b49}
body.hoppin-auth .setupwarn{background:#fff5df;border:2px solid #e6d3a3;color:#5a4a2a}
body.hoppin-auth .toast,body.sprout .toast{background:#24523a;color:#fffdf8;border:2px solid #b6d2ae;box-shadow:0 4px 0 #173e2d}
body.hoppin-auth .modal .box,body.sprout .modal .box{background:#fffdf7;color:#20372a;border:2px solid #cbdcc5;border-radius:24px}
body.hoppin-auth .bootlogo{min-height:calc(100svh - 190px);gap:12px}
body.hoppin-auth .mbBoot{animation:pyokoFloat 2.7s ease-in-out infinite}
.hoppin-loading-logo{width:150px}
body.hoppin-auth .bootlogotxt{color:#526858;font-family:inherit;font-weight:700}
body.hoppin-auth ::selection,body.sprout ::selection{background:#b9deb1;color:#173e2d}
body.hoppin-auth * ,body.sprout *{-webkit-tap-highlight-color:rgba(95,155,89,.15)}
body.hoppin-auth .scroll,body.sprout .scroll{scrollbar-width:thin;scrollbar-color:#9ebd96 transparent}
body.hoppin-auth .scroll::-webkit-scrollbar,body.sprout .scroll::-webkit-scrollbar{width:5px}
body.hoppin-auth .scroll::-webkit-scrollbar-thumb,body.sprout .scroll::-webkit-scrollbar-thumb{background:#9ebd96;border-radius:8px}
body.hoppin-auth :focus-visible,body.sprout :focus-visible{outline:3px solid #6eac72;outline-offset:2px}
body.sprout .scroll.sprout-home>.hello .say{max-width:52%;margin-right:7px}
body.sprout .scroll.sprout-home::after{top:11px;right:12px;z-index:1}
.hoppin-splash{position:fixed;inset:0;z-index:100;background:#faf6e9;display:flex;align-items:stretch;justify-content:center;cursor:pointer;transition:opacity .26s}
.hoppin-splash.leaving{opacity:0;pointer-events:none}
.hoppin-splash-scene{position:relative;width:100%;max-width:520px;background-color:#faf6e9;background-size:100% 124px;background-position:top center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center}
.hoppin-splash-content{width:min(88%,430px);display:flex;flex-direction:column;align-items:center;gap:12px;transform:translateY(-5vh)}
.hoppin-splash-logo{width:100%;animation:hoppinHop .62s cubic-bezier(.2,.9,.3,1.2) both}
.hoppin-company{color:#718779;font:400 11px "Zen Kaku Gothic New",sans-serif;letter-spacing:.28em}
@keyframes hoppinHop{0%{opacity:0;transform:translateY(25px) scale(.91)}65%{opacity:1;transform:translateY(-7px) scale(1.03)}100%{opacity:1;transform:translateY(0) scale(1)}}
.hoppin-pattern{align-items:center}
.hoppin-pattern .ctab{min-width:44px;min-height:44px}
.hoppin-preview-controls{position:fixed;z-index:110;bottom:8px;left:50%;transform:translateX(-50%);width:min(calc(100vw - 16px),520px);padding:8px;background:#fffdf7;border:2px solid #b8cdb5;border-radius:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:700 11px "Zen Kaku Gothic New",sans-serif;color:#20372a}
.hoppin-preview-controls a{color:#246b49}
.hoppin-preview-controls .demo-controls{margin:0;padding:0;border:0}
@media(prefers-reduced-motion:reduce){.hoppin-splash-logo,body.hoppin-auth .mbBoot{animation:none}.hoppin-splash{transition:none}}

.hoppin-footer-logo{width:150px;max-width:65vw;opacity:.72}
.night body.hoppin-auth{--bg:#faf6e9;--card:#fffdf7;--ink:#20372a;--sub:#526858;--sep:#dbe7d6;--theme:#246b49;--themeSoft:#e2efdc;background:#faf6e9;color:#20372a}
body.hoppin-auth .btn:disabled,body.sprout .btn:disabled,body.sprout .pri:disabled{background:#a5b9a2;color:#f8fcf4;box-shadow:0 3px 0 #7f9d7c;cursor:wait}
body.hoppin-auth input:invalid:not(:placeholder-shown),body.sprout input:invalid:not(:placeholder-shown){border-color:#b8843f;background:#fff9ed}
body.sprout .sh-empty,body.sprout .chatempty,body.sprout .survey-loading{background:#fffdf7;color:#526858;border:2px solid #dbe7d6;border-radius:18px;padding:18px}
body.sprout .reloadbtn:active,body.sprout .nightbtn:active{transform:translateY(2px);background:#e2efdc}
body.sprout .modal.open .box,body.hoppin-auth .modal.open .box{animation:boxin .22s ease-out both}
@media(max-width:370px){.hoppin-auth-pyoko{width:60px;height:60px}body.sprout .scroll.sprout-home>.hello .say{max-width:56%;margin-right:0}}
.hoppin-auth-issue{display:flex;align-items:center;gap:8px;margin:8px 14px;padding:9px 12px;border:2px solid #d8be82;border-radius:16px;background:#fff9ea;color:#554929;font-size:13px;font-weight:700;line-height:1.5}
.hoppin-auth-issue .hoppin-auth-pyoko{width:50px;height:50px}
.hoppin-wait{display:flex;flex-direction:column;align-items:center;gap:8px;margin:18px 14px;padding:20px;background:#fffdf7;border:2px solid #dbe7d6;border-radius:20px;color:#526858;font-size:13px;font-weight:800}
.hoppin-wait-pyoko{width:78px;height:78px;animation:pyokoFloat 2.7s ease-in-out infinite}
.hoppin-wait-pyoko svg{width:100%;height:100%}
.hoppin-wait-logo{width:120px}
@media(prefers-reduced-motion:reduce){.hoppin-wait-pyoko{animation:none}}
/* 会社の英語表記は画面の下部（2026-10-27 小泉） */
.hoppin-splash .hoppin-company{position:absolute;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom));text-align:center}

/* 2026-10-27 小泉確認：本日の会話を主役にし、挨拶から今日のひとことまで一続きで読む。 */
body.sprout .scroll.sprout-home>.hello{gap:3px;margin-inline:8px}
body.sprout .scroll.sprout-home>.hello .mb{width:128px;height:128px;flex:0 0 128px;margin:0 -7px 13px -9px}
body.sprout .scroll.sprout-home>.hello .say{display:flex;flex-direction:column;flex:1 1 0;min-width:0;max-width:none;height:220px;max-height:220px;margin-right:0;padding:13px 12px 12px;font-size:13.5px;line-height:1.5;border-width:2px;border-radius:22px;box-shadow:0 9px 24px rgba(27,80,48,.16);overflow:hidden}
body.sprout .hello .sayhalo{position:absolute;inset:2px;border:2px solid #4eae75;border-radius:18px;pointer-events:none;animation:sayInvite 3.6s ease-in-out infinite}
@keyframes sayInvite{0%,100%{opacity:.12}35%{opacity:.63}70%{opacity:.12}}

/* 2026-10-27: 撫でるジェスチャー、夜の画面、コンパクトなヘッダーとWallet。 */
body.sprout .hello .mb{touch-action:pan-y;cursor:grab}
body.sprout .hello .mb.pyoko-petted{animation:pyokoPetBounce .55s ease-out 2;cursor:grabbing}
@keyframes pyokoPetBounce{0%,100%{transform:translateY(0) rotate(0)}38%{transform:translateY(-15px) rotate(-7deg)}68%{transform:translateY(-9px) rotate(7deg)}}
@media(prefers-reduced-motion:reduce){body.sprout .hello .mb.pyoko-petted{animation:none}}
.hoppin-splash-loading{display:block;color:#42664d;font:800 13px "Zen Kaku Gothic New",sans-serif;letter-spacing:.13em;animation:hoppinLoadingPulse 1.25s ease-in-out infinite}
@keyframes hoppinLoadingPulse{0%,100%{opacity:.35}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.hoppin-splash-loading{animation:none;opacity:1}}
body.sprout .header-metrics{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px}
body.sprout .header-metrics .poschip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:4px 9px;border:1px dashed #88ad91;background:var(--card);color:var(--ink);font-family:inherit;font-size:11px;font-weight:800;white-space:nowrap;cursor:pointer}
body.sprout .header-metrics .usage-chip{margin:0;min-height:34px;padding:3px 9px;font-size:11px;gap:3px}
body.sprout .header-metrics .usage-chip .bico{width:17px;height:17px}
body.sprout .header-metrics .usage-chip b{font-size:18px}
html:not(.night) body.sprout[data-daypart="night"]{--bg:#1b2d39;--card:#29414a;--sep:#45616a;--ink:#f0f4ec;--sub:#cfdbd7;--themeSoft:#36535a;--theme2:#a9dfbd;background:var(--bg);color:var(--ink)}
html:not(.night) body.sprout[data-daypart="night"] .apphdr,html:not(.night) body.sprout[data-daypart="night"] .nav{background:var(--card);border-color:var(--sep)}
html:not(.night) body.sprout[data-daypart="night"] .apphdr .who,html:not(.night) body.sprout[data-daypart="night"] .nav div{color:var(--sub)}
html:not(.night) body.sprout[data-daypart="night"] .apphdr .hdxp,html:not(.night) body.sprout[data-daypart="night"] .apphdr .hdxp small,html:not(.night) body.sprout[data-daypart="night"] .nav div.on,html:not(.night) body.sprout[data-daypart="night"] .hello .say b{color:#b7e7bf}
html:not(.night) body.sprout[data-daypart="night"] .usage-chip{color:#e7f4da}
html:not(.night) body.sprout[data-daypart="night"] .header-metrics .poschip{border-color:#789d91}
html:not(.night) body.hoppin-auth[data-daypart="night"]{--bg:#1b2d39;--ink:#eef4ed;--sub:#c7d6d1;background:#1b2d39;color:var(--ink)}
html:not(.night) body.hoppin-auth[data-daypart="night"] .scroll{background-color:#1b2d39}
html:not(.night) body.hoppin-auth[data-daypart="night"] .hdr .date,html:not(.night) body.hoppin-auth[data-daypart="night"] .hdr .title{color:var(--ink)}
html:not(.night) body.hoppin-auth[data-daypart="night"] .bootlogotxt{color:#d4e2d7}
.hoppin-splash[data-daypart="night"],.hoppin-splash[data-daypart="night"] .hoppin-splash-scene{background-color:#1b2d39}
.hoppin-splash[data-daypart="night"] .hoppin-company,.hoppin-splash[data-daypart="night"] .hoppin-splash-loading{color:#d6e8d5}
.hoppin-splash[data-daypart="night"] .hoppin-splash-logo{filter:drop-shadow(0 0 14px rgba(202,234,159,.3))}
.wlbackdrop{position:fixed;inset:0;z-index:59;background:rgba(9,25,29,.54);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.wlbackdrop.open{opacity:1;visibility:visible}
.wlsheet{top:50%;left:12px;right:12px;width:calc(100% - 24px);height:min(84dvh,760px);max-width:480px;margin:0 auto;padding-top:0;border:1px solid rgba(255,255,255,.55);border-radius:27px;overflow:hidden;transform:translateY(calc(-50% + 30px)) scale(.96);opacity:0;visibility:hidden;transition:transform .3s cubic-bezier(.2,.9,.2,1),opacity .3s,visibility .3s;box-shadow:0 24px 70px rgba(8,29,23,.36)}
.wlsheet.open{transform:translateY(-50%) scale(1);opacity:1;visibility:visible}
.wlgrab{padding-bottom:12px}
.wlsheet .wlx{width:44px;height:44px;border-radius:22px}
@media(max-height:620px){.wlsheet{height:90dvh}}
@media(max-width:370px){body.sprout .scroll.sprout-home>.hello .mb{width:108px;height:108px;flex-basis:108px;margin-left:-7px}body.sprout .scroll.sprout-home>.hello .say{font-size:12.5px;padding:10px 10px 6px}}
@media(prefers-reduced-motion:reduce){body.sprout .hello .sayhalo{animation:none}}

/* ピョコと会話する画面：会話領域を画面いっぱいに使う。 */
body.sprout .scroll.sprout-chat{padding-top:0;padding-bottom:0;background-image:none;background-color:#faf7eb}
body.sprout .scroll.sprout-chat::before{display:none}
body.sprout .scroll.sprout-chat .coachtab{height:100%;min-height:360px}
body.sprout .coachtab .coachhdr{display:flex;min-height:62px;margin:0;padding:6px 16px;background:linear-gradient(150deg,#e3f1d8,#f8f4df);border:0;border-bottom:2px solid #c8dec1;border-radius:0;box-shadow:none}
body.sprout .chat-identity{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
body.sprout .chatPyoko{display:block;width:48px;height:48px;flex:none}
body.sprout .chatPyoko svg{width:100%;height:100%;overflow:visible}
body.sprout .chat-identity .title{display:block;font-size:21px;line-height:1.1;color:#204d36}
body.sprout .coachtab .qareset{margin-left:auto;flex:none;color:#3e7054;font-size:12px}
body.sprout .coachtab .qascroll{flex:1;min-height:0;overflow-y:auto;padding:4px 0 12px;background:#faf7eb}
body.sprout .coachtab .coach.coachtop{margin:8px 12px 0;padding:12px 14px;background:#fffefa;color:#26372c;border:2px solid #c5ddbf;border-radius:18px;box-shadow:0 4px 0 #d4e4c8}
body.sprout .coachtab .coach.coachtop .msg{padding:0;margin:0;font-size:14.5px;line-height:1.6}
body.sprout .coachtab .qachips{gap:7px;margin-top:10px}
body.sprout .coachtab .qachip{background:#e8f3df;color:#245b40;box-shadow:none;border:1px solid #c5ddbf;min-height:36px}
body.sprout .coachtab .qalog{margin:15px 12px 4px;gap:12px}
body.sprout .coachtab .bubble{max-width:92%;padding:11px 14px;font-size:14.5px;line-height:1.6;border:1px solid #d7e5d2}
body.sprout .coachtab .bubble.coach{background:#fffefa;color:#26372c;border-bottom-left-radius:5px}
body.sprout .coachtab .pyoko-reply .bubble.coach{max-width:calc(100% - 59px)}
body.sprout .coachtab .bubble.me{background:#28714f;color:#fff;border-color:#28714f;border-bottom-right-radius:5px}
body.sprout .coachtab .qabar{margin:0;padding:10px 12px 5px;background:#f3f2e6;border-top:1px solid #dce7d2;gap:8px}
body.sprout .coachtab .qabar textarea{min-height:44px;border:2px solid #bfdbc0;border-radius:15px;background:#fffefa}
body.sprout .coachtab .qasend{min-height:44px;height:44px;background:#246b49;box-shadow:0 3px 0 #16472f}
body.sprout .coachtab .chatfoot{margin:0;padding:7px 8px calc(5px + env(safe-area-inset-bottom));background:#f3f2e6}
body.sprout .coachtab .chatempty{margin:0;border-color:#d7e5d2}
@media(max-width:370px){body.sprout .chatPyoko{width:44px;height:44px}body.sprout .coachtab .coachhdr{min-height:58px}}

/* Walletも Hoppin の緑とクリームへ。券の重ね方とQR操作は維持。 */
.wlsheet{--wbg:#f8f6e9;--wcard:#fffdf6;--wline:#d8e6d0;--wsub:#577262;--wink:#1f4934;--wacc:#236c4a;background:var(--wbg);color:var(--wink);box-shadow:0 10px 40px rgba(30,79,48,.25)}
.wlsheetin{background:linear-gradient(#e6f2dc 0,#f8f6e9 235px)}
.wltop{padding:14px 2px 9px}
.wlbrand{gap:7px;color:#245b40;font-size:20px}
.wlbrand img{width:113px;height:38px;object-fit:contain}
.wlbrand em{color:#246b49;border-color:#93c59b}
.wlx{background:#e2efd9;color:#245b40}
.wlscene{display:flex;align-items:center;gap:10px;min-height:92px;margin:0 0 9px;padding:5px 13px;border-radius:18px;background:linear-gradient(160deg,#f9f5dc,#deedca);border:2px solid #c4dcb7;overflow:hidden}
.wlpyoko{display:block;flex:none;width:78px;height:78px}
.wlpyoko svg{width:100%;height:100%}
.wlscene>div:last-child{display:flex;flex-direction:column;gap:4px;color:#214d36}
.wlscene b{font-size:14px;line-height:1.35}
.wlscene span{font-size:11.5px;line-height:1.4}
.wlbal{background:linear-gradient(145deg,#1b6045,#348453 70%,#6ba464);box-shadow:0 10px 24px rgba(24,92,61,.22)}
.wlbal:after{border-color:rgba(246,239,189,.13)}
.wlpass{background:linear-gradient(155deg,#246b49,#69a963);box-shadow:0 -2px 0 rgba(255,255,255,.1) inset,0 -6px 16px rgba(35,86,55,.24)}
.wlpass.k-tenure{background:linear-gradient(155deg,#3a7856,#8bbc75)}
.wlpass.k-birthday{background:linear-gradient(155deg,#dc8a43,#f3b566)}
.wlpass.k-manual{background:linear-gradient(155deg,#456e65,#73a79a)}
.wlpass.pile{box-shadow:0 -4px 12px rgba(30,79,48,.3)}
.wlpassicon{background:rgba(255,255,255,.2)}
.wlpanel{box-shadow:0 3px 0 #deead5}
.wlsheet .wlbar{background:#e0eadb}
.wlsheet .wlbar i{background:linear-gradient(90deg,#69a963,#246b49)}
.wlsheet .wllad div{background:#edf4e9}
.wlsheet .wllad div.got{background:#d5ecd0;color:#245b40}
.wlsheet .wllad div em{color:#246b49}
.wlgrab{background:#f8f6e9}.wlgrab i{background:#9dbda7}
.wlchip{background:linear-gradient(135deg,#1b6045,#287a52);box-shadow:0 0 0 1px #8dc39b inset,0 4px 12px rgba(24,92,61,.25)}
.wlchip .wli{color:#e8d38a}.wlchip .wlchipchev{color:#d7ead7}
.wlbrand .wli,.wlsect .wli{color:#246b49}
.wlsheet .wlhist{color:#214d36}
.wlsheet .wlqr{border:2px solid #d8e6d0}
.omprogressnote{display:flex;align-items:center;gap:10px;margin:4px 16px 12px;padding:8px 12px;border:1.5px solid #cfe2c6;border-radius:16px;background:#f5f9ee;color:#244e36;font-size:12px;line-height:1.5}
.omprogresspyoko{flex:none;width:46px;height:46px}
.omprogresspyoko svg{width:100%;height:100%}
/* デモ操作行がある場合も、会話と入力欄をナビの上に収める。 */
body.sprout .scroll.sprout-chat{display:flex;flex-direction:column;overflow:hidden}
body.sprout .scroll.sprout-chat>.demo-controls,body.sprout .scroll.sprout-chat>.demoexample{flex:none}
body.sprout .scroll.sprout-chat .coachtab{flex:1 1 auto;height:auto;min-height:0}
.wlbal{color:#fff}
.wlbal .wlballbl,.wlbal .wlbalyen,.wlbal .wlbalsoon,.wlbal .wlbalsub,.wlbal .wlbalused{color:#fff}

/* 夜：白い吹き出しの中の強調色が淡い緑で読めない／デモの切替ボタンも読めない → 濃い緑・濃い字に（2026-10-27 Claude点検） */
html:not(.night) body.sprout[data-daypart="night"] .say .saytext b,html:not(.night) body.sprout[data-daypart="night"] .say b{color:#246b49}
html:not(.night) body.sprout[data-daypart="night"] .demo-controls .ctab:not(.on){color:#4a5b50;border-color:#c9bd8a;background:rgba(255,255,255,.55)}

/* iPhone のホーム画面アプリでは WebKit が画面下端の帯を viewport 外に残すことがある。
   その帯には操作を置けないため、背景をナビとつなげ、ナビ内の余白を詰める。 */
html.ios-standalone{background:#fffdf7}
html.night.ios-standalone{background:#26392b}
html.ios-standalone body.sprout{background:var(--card)}
html.night.ios-standalone body.sprout[data-daypart]{background:var(--card)}
html.ios-standalone body.sprout #app{background:var(--bg)}
html.ios-standalone body.sprout[data-daypart] #app{background:linear-gradient(180deg,var(--sky) 0,var(--bg) 46%) no-repeat var(--bg)}
html.night.ios-standalone body.sprout[data-daypart] #app{background:var(--bg)}
html.ios-standalone body.sprout .nav{padding-bottom:clamp(3px,calc(env(safe-area-inset-bottom,0px) - 26px),8px)}
html.ios-standalone body.sprout .nav:not(.open):not(.flat)>div{padding-bottom:4px}

/* 店長画面にもアルバイト画面の Hoppin の配色と立体感を渡す。 */
body.sprout.manager-page .coachbox,body.sprout.manager-page .mgrcard,
body.sprout.manager-page .focuscard,body.sprout.manager-page .feednote,
body.sprout.manager-page .chartcard,body.sprout.manager-page .newscard{
  background:var(--card);color:var(--ink);border:2px solid var(--sep);border-bottom-width:4px;
  border-radius:18px;box-shadow:none
}
body.sprout.manager-page .coachbox{position:relative;padding:14px 16px}
body.sprout.manager-page .mgrselfcard{padding-right:90px}
body.sprout.manager-page .mgr-pyoko{position:absolute;right:13px;top:50%;transform:translateY(-50%);width:65px;height:65px}
body.sprout.manager-page .mgr-pyoko svg{width:100%;height:100%;overflow:visible}
body.sprout.manager-page .coachph,body.sprout.manager-page .mgrstore{color:var(--theme);font-weight:900}
body.sprout.manager-page .coachcur,body.sprout.manager-page .coachsum{color:var(--ink)}
body.sprout.manager-page .mgrtab{border:2px solid var(--sep);border-bottom-width:4px;border-radius:14px;color:var(--ink)}
body.sprout.manager-page .mgrtab.on{background:var(--theme);border-color:var(--edge);color:#fff}
body.sprout.manager-page .stfrow{border-color:var(--sep)}
body.sprout.manager-page .mgrstats>*,body.sprout.manager-page .ctab{border-radius:12px}
body.sprout.manager-page .apphdr .mgrsname{color:var(--ink)}
body.sprout.manager-page .apphdr .mgrsmeta{color:var(--sub)}
body.sprout.manager-page .nav.flat>div{font-size:10px}
body.sprout.manager-page .nav.flat>div .i{min-height:25px}

/* 公開デモ：実データや保存操作を持たず、両画面の入口を同じ位置に置く。 */
body.sprout .demo-safe-bar button{min-height:36px;white-space:nowrap}
.demo-manager-readonly{color:var(--theme);font-weight:800}
.mgr-demo-hero{display:flex;align-items:center;gap:12px;margin:14px 14px 0;padding:14px;
  border:2px solid #b9d4b5;border-bottom-width:4px;border-radius:20px;
  background:linear-gradient(130deg,#e1f1d7,#faf7e5);color:#244e36}
.mgr-demo-pyoko{width:74px;height:74px;flex:none}
.mgr-demo-pyoko svg{width:100%;height:100%;overflow:visible}
.mgr-demo-hero b,.mgr-demo-hero span{display:block;line-height:1.45}
.mgr-demo-hero b{font-size:14px;font-weight:900}
.mgr-demo-hero span{font-size:11px;margin-top:5px}
.mgr-demo-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 14px}
.mgr-demo-metrics>div{padding:10px 6px;text-align:center;border:2px solid var(--sep);border-bottom-width:4px;
  border-radius:16px;background:var(--card)}
.mgr-demo-metrics strong,.mgr-demo-metrics span{display:block}
.mgr-demo-metrics strong{font-size:26px;line-height:1.1;color:var(--theme)}
.mgr-demo-metrics span{font-size:11px;color:var(--sub);font-weight:800;margin-top:4px}
.mgr-demo-person{width:100%;border-top:0;border-left:0;border-right:0;background:transparent;color:var(--ink);
  font:inherit;text-align:left;cursor:pointer}
.mgr-demo-person .tx .t,.mgr-demo-person .tx .s{display:block}
.mgr-demo-avatar{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:50%;
  color:#246b49;background:#e2efdc;font-weight:900}
.mgr-demo-person .pendbadge{flex:none}
.mgr-demo-card{margin:10px 14px;padding:16px!important;line-height:1.6}
.mgr-demo-card p{margin:6px 0 0}
.mgr-demo-back{margin:14px 14px 0}
.mgr-demo-foot{margin:24px 14px 32px;text-align:center;line-height:1.55}
.mgr-demo-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:20px 18px 8px;color:var(--ink)}
.mgr-demo-section-head b{font-size:16px;font-weight:900;line-height:1.3}
.mgr-demo-section-head span{font-size:11px;font-weight:800;color:var(--sub);white-space:nowrap}
.mgr-demo-panel{margin:0 14px;padding:14px;background:var(--card);border:2px solid var(--sep);border-bottom-width:4px;border-radius:18px;color:var(--ink)}
.mgr-demo-panel>p{font-size:13px;line-height:1.65;margin:5px 0 0}
.mgr-demo-progress{display:block;height:8px;overflow:hidden;border-radius:99px;background:#dfe9d9}
.mgr-demo-progress i{display:block;height:100%;border-radius:inherit;background:#2b8055}
.mgr-demo-priorities{padding:0 12px}
.mgr-demo-priorities button{display:flex;align-items:center;gap:9px;width:100%;padding:11px 0;border:0;border-bottom:1px solid var(--sep);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.mgr-demo-priorities button:last-child{border-bottom:0}
.mgr-demo-priorities button em{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:8px;background:var(--themeSoft);color:var(--theme);font-size:12px;font-weight:900;font-style:normal}
.mgr-demo-priorities button>span:nth-child(2){flex:1;min-width:0}
.mgr-demo-priorities b,.mgr-demo-priorities small{display:block}
.mgr-demo-priorities b{font-size:13px;line-height:1.4}
.mgr-demo-priorities small{font-size:10.5px;line-height:1.45;color:var(--sub);margin-top:2px}
.mgr-demo-team{padding:0;overflow:hidden}
.mgr-demo-team .mgr-demo-person{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;padding:12px;border:0;border-bottom:1px solid var(--sep);background:transparent;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.mgr-demo-team .mgr-demo-person:last-child{border-bottom:0}
.mgr-demo-team .mgr-demo-person .chev{display:none}
.mgr-demo-person-main{min-width:0}
.mgr-demo-person-title,.mgr-demo-person-meta,.mgr-demo-person-progress{display:block}
.mgr-demo-person-title b{font-size:13px}
.mgr-demo-person-title small{font-size:10px;color:var(--sub);margin-left:3px}
.mgr-demo-person-meta{font-size:10.5px;line-height:1.45;color:var(--sub);margin-top:3px}
.mgr-demo-person-meta span{white-space:nowrap}
.mgr-demo-person-progress{font-size:10px;font-weight:800;color:var(--theme);margin-top:5px}
.mgr-demo-person-progress .mgr-demo-progress{margin-top:4px}
.mgr-demo-status{display:inline-block;padding:4px 6px;border-radius:8px;background:var(--themeSoft);color:var(--theme);font-size:10px;font-weight:900;white-space:nowrap}
.mgr-demo-status.attention{background:#fff0cb;color:#85530e}
.mgr-demo-status.neutral{background:#e9ece7;color:#58675a}
.mgr-demo-feedrow{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid var(--sep)}
.mgr-demo-feedrow:first-child{padding-top:0}
.mgr-demo-feedrow:last-child{border-bottom:0;padding-bottom:0}
.mgr-demo-feedrow>i{width:9px;height:9px;flex:none;border-radius:50%;background:#61a874;margin-top:5px;box-shadow:0 0 0 3px var(--themeSoft)}
.mgr-demo-feedrow b,.mgr-demo-feedrow span{display:block}
.mgr-demo-feedrow b{font-size:12px;line-height:1.4}
.mgr-demo-feedrow span{font-size:11px;line-height:1.5;color:var(--sub);margin-top:2px}
.mgr-demo-person-hero{display:flex;align-items:center;gap:9px;margin:10px 14px 0;padding:12px;background:var(--card);border:2px solid var(--sep);border-radius:16px}
.mgr-demo-person-hero>div{flex:1;min-width:0}
.mgr-demo-person-hero b,.mgr-demo-person-hero div span{display:block}
.mgr-demo-person-hero b{font-size:16px}
.mgr-demo-person-hero div span{font-size:11px;color:var(--sub);margin-top:3px}
.mgr-demo-goal{margin-top:10px;color:var(--theme);font-size:11px;font-weight:800}
.mgr-demo-goal .mgr-demo-progress{margin-top:5px}
.mgr-demo-note{font-size:10.5px;color:var(--sub);line-height:1.5;margin-top:9px;padding-top:9px;border-top:1px solid var(--sep)}
.mgr-demo-shift>div,.mgr-demo-store-rows>div{display:grid;grid-template-columns:65px 1fr;gap:2px 8px;padding:8px 0;border-bottom:1px solid var(--sep)}
.mgr-demo-shift>div:first-child,.mgr-demo-store-rows>div:first-child{padding-top:0}
.mgr-demo-shift>div:last-child,.mgr-demo-store-rows>div:last-child{border-bottom:0;padding-bottom:0}
.mgr-demo-shift b,.mgr-demo-store-rows b{font-size:12px;color:var(--theme)}
.mgr-demo-shift span,.mgr-demo-store-rows span{font-size:12px;font-weight:800}
.mgr-demo-shift small{grid-column:2;font-size:10.5px;color:var(--sub);line-height:1.45}
.mgr-demo-insight{display:flex;align-items:center;gap:10px;margin:13px 14px 0;padding:11px;border:2px solid #b9d4b5;border-radius:16px;background:var(--themeSoft);color:var(--ink);font-size:12px;font-weight:800;line-height:1.55}
.mgr-demo-small-pyoko{width:43px;height:43px;flex:none}
.mgr-demo-small-pyoko svg{width:100%;height:100%;overflow:visible}
.mgr-demo-applicant{display:flex;align-items:center;gap:9px}
.mgr-demo-applicant-icon{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:11px;background:var(--themeSoft);color:var(--theme);font-weight:900}
.mgr-demo-applicant>div{flex:1;min-width:0}
.mgr-demo-applicant b,.mgr-demo-applicant div span,.mgr-demo-applicant small{display:block}
.mgr-demo-applicant b{font-size:13px}
.mgr-demo-applicant div span,.mgr-demo-applicant small{font-size:10.5px;color:var(--sub);line-height:1.5}
.mgr-demo-applicant em{flex:none;padding:4px 6px;border-radius:8px;background:#fff0cb;color:#85530e;font-size:10px;font-weight:900;font-style:normal}
.mgr-demo-applicant em.good{background:var(--themeSoft);color:var(--theme)}
.mgr-demo-flow{display:flex;justify-content:space-between;gap:5px}
.mgr-demo-flow>span{font-size:11px;color:var(--sub);font-weight:800}
.mgr-demo-flow b{display:block;font-size:21px;color:var(--theme);text-align:center}
.mgr-demo-goal-card>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mgr-demo-goal-card strong{font-size:30px;color:var(--theme)}
.mgr-demo-goal-card strong small{font-size:12px}
.mgr-demo-goal-card div span{font-size:11px;color:var(--sub);font-weight:800}
.mgr-demo-goal-card .mgr-demo-progress{margin:9px 0}
.mgr-demo-store-rows .mgr-demo-progress{grid-column:2;margin-top:3px}
.mgr-demo-karute{padding:0;overflow:hidden}
.mgr-demo-karute button{display:flex;align-items:center;gap:8px;width:100%;padding:12px;border:0;border-bottom:1px solid var(--sep);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.mgr-demo-karute button:last-child{border-bottom:0}
.mgr-demo-karute button>span:nth-child(2){flex:1;min-width:0}
.mgr-demo-karute button b,.mgr-demo-karute button span span,.mgr-demo-karute button small{display:block;line-height:1.45}
.mgr-demo-karute button b{font-size:12px}
.mgr-demo-karute button b small{display:inline;color:var(--sub)}
.mgr-demo-karute button span span{font-size:11px;color:var(--ink);margin-top:3px}
.mgr-demo-karute button small{font-size:10px;color:var(--sub);margin-top:3px}
.night .mgr-demo-hero,body.sprout[data-daypart="night"] .mgr-demo-hero{background:#29483a;color:#f2f5eb;border-color:#5a856c}
@media(max-width:360px){.mgr-demo-hero{gap:7px}.mgr-demo-pyoko{width:62px;height:62px}.mgr-demo-team .mgr-demo-person{gap:5px;padding:10px}.mgr-demo-person-title small{display:block;margin-left:0}}

/* 店長の見出しに旧い紫の配色が残っていた（「店長」の札が読めない・日付が紫）→ グリーン系に（2026-10-27 Claude点検） */
body.sprout .apphdr .biglv:not([style]){background:var(--themeSoft);color:var(--theme);font-weight:800}
body.sprout .apphdr .hdsub,body.sprout .apphdr .mgrsmeta{color:var(--sub)}

/* 公開デモの店長・管理者：架空の複数店舗を実画面に近い密度で見せる。 */
.mgr-demo-store-switch,.mgr-demo-scope{margin:12px 14px 0;color:var(--ink)}
.mgr-demo-store-switch>span,.mgr-demo-scope>b{display:block;margin:0 3px 6px;font-size:11px;color:var(--sub);font-weight:800}
.mgr-demo-store-switch>div,.mgr-demo-scope>div{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.mgr-demo-store-switch button,.mgr-demo-scope button{flex:none;padding:7px 10px;border:1px solid var(--sep);border-radius:99px;background:var(--card);color:var(--sub);font:inherit;font-size:10px;font-weight:800;white-space:nowrap}
.mgr-demo-store-switch button.on,.mgr-demo-scope button.on{background:var(--theme);border-color:var(--theme);color:#fff}
.mgr-demo-scope{padding:12px;border:2px solid var(--sep);border-radius:16px;background:var(--card)}
.mgr-demo-ranks{display:flex;gap:4px;margin-top:8px}
.mgr-demo-ranks>span{display:flex;align-items:center;gap:5px;padding:3px 7px;border-radius:7px;background:var(--themeSoft);font-size:10px;color:var(--ink)}
.mgr-demo-ranks b{color:var(--theme)}
.mgr-demo-grass{display:grid;grid-template-columns:repeat(14,1fr);gap:4px}
.mgr-demo-grass i{aspect-ratio:1;border-radius:4px;background:#73b887}
.mgr-demo-grass i.off{background:#d9e2d4}.mgr-demo-grass i.missed{background:#e9c971}
.mgr-demo-taskgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mgr-demo-taskgrid>span{padding:10px;border:1px solid var(--sep);border-radius:10px;font-size:10.5px;color:var(--sub)}
.mgr-demo-taskgrid b{display:block;margin-top:3px;font-size:13px;color:var(--ink)}
.mgr-demo-focus-list{padding:0 12px}
.mgr-demo-focus-list button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 2px;border:0;border-bottom:1px solid var(--sep);background:transparent;text-align:left;color:var(--ink);font:inherit}
.mgr-demo-focus-list button:last-child{border-bottom:0}
.mgr-demo-focus-list button>span{min-width:0}
.mgr-demo-focus-list b,.mgr-demo-focus-list small,.mgr-demo-focus-list button>span>span{display:block}
.mgr-demo-focus-list b{font-size:12px}.mgr-demo-focus-list small{font-size:10px;color:var(--sub)}
.mgr-demo-focus-list button>span>span{margin-top:3px;font-size:11px}
.mgr-demo-focus-list em{display:grid;place-items:center;flex:none;width:33px;height:33px;border-radius:10px;background:var(--themeSoft);color:var(--theme);font-style:normal;font-weight:900}
.mgr-demo-focus-list em.good{background:#cfe9ce}
.mgr-demo-applicants .mgr-demo-applicant+.mgr-demo-applicant{margin-top:10px;padding-top:10px;border-top:1px solid var(--sep)}
.mgr-demo-rankplan{font-size:11px}
.mgr-demo-rankplan>div{display:grid;grid-template-columns:1fr 1fr 1fr 1.5fr;gap:4px;align-items:center;padding:8px 0;border-bottom:1px solid var(--sep);text-align:center}
.mgr-demo-rankplan>div:last-child{border-bottom:0}
.mgr-demo-rankplan .mgr-demo-rank-head{color:var(--sub);font-weight:800}
.mgr-demo-rankplan .short{color:#ad7020;font-weight:900}.mgr-demo-rankplan .good{color:var(--theme);font-weight:900}
.mgr-demo-store-list{display:grid;gap:10px;margin:0 14px}
.mgr-demo-store-card{display:block;width:100%;padding:13px;border:2px solid var(--sep);border-bottom-width:4px;border-radius:17px;background:var(--card);color:var(--ink);font:inherit;text-align:left}
.mgr-demo-store-title{display:flex;align-items:center;justify-content:space-between;gap:7px}
.mgr-demo-store-title b{font-size:13px;line-height:1.35}.mgr-demo-store-title em{flex:none;padding:4px 6px;border-radius:7px;background:var(--themeSoft);color:var(--theme);font-size:10px;font-style:normal;font-weight:900}
.mgr-demo-store-title em.attention{background:#fff0cb;color:#85530e}
.mgr-demo-store-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:10px}
.mgr-demo-store-nums>span{font-size:9px;color:var(--sub);text-align:center}.mgr-demo-store-nums b{display:block;font-size:16px;color:var(--ink)}
.mgr-demo-store-card>small{display:block;margin-top:8px;font-size:10px;color:var(--sub)}
.mgr-demo-ranking{padding:4px 12px}
.mgr-demo-ranking>div{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--sep)}
.mgr-demo-ranking>div:last-child{border-bottom:0}
.mgr-demo-ranking>div>b{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:7px;background:var(--themeSoft);color:var(--theme);font-size:11px}
.mgr-demo-ranking>div>span{flex:1;min-width:0;font-size:11px;font-weight:800}.mgr-demo-ranking small{display:block;font-size:9px;color:var(--sub);font-weight:500}
.mgr-demo-ranking strong{font-size:12px;color:var(--theme);white-space:nowrap}
.mgr-demo-trend{display:flex;align-items:end;gap:10px;height:140px;padding-top:20px}
.mgr-demo-trend>span{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:end;height:100%;font-size:9px;color:var(--sub)}
.mgr-demo-trend i{display:block;width:100%;max-width:45px;border-radius:8px 8px 0 0;background:#65a679}
.mgr-demo-trend small{margin-top:5px;white-space:nowrap}
.mgr-demo-readonly-note{margin-top:14px;font-size:11px;line-height:1.6;color:var(--sub)}
@media(max-width:360px){.mgr-demo-store-title{align-items:flex-start;flex-direction:column}.mgr-demo-store-nums b{font-size:14px}.mgr-demo-taskgrid{gap:5px}.mgr-demo-taskgrid>span{padding:7px}}
.night .mgr-demo-metrics strong,.night .mgr-demo-store-nums b,.night .mgr-demo-ranking strong,.night .mgr-demo-rankplan .good,.night .mgr-demo-ranks b,.night .mgr-demo-goal-card strong,
body.sprout[data-daypart="night"] .mgr-demo-metrics strong,body.sprout[data-daypart="night"] .mgr-demo-store-nums b,body.sprout[data-daypart="night"] .mgr-demo-ranking strong,body.sprout[data-daypart="night"] .mgr-demo-rankplan .good,body.sprout[data-daypart="night"] .mgr-demo-ranks b,body.sprout[data-daypart="night"] .mgr-demo-goal-card strong{color:#b9e9c4}
.night body.sprout .apphdr .biglv:not([style]),body.sprout[data-daypart="night"] .apphdr .biglv:not([style]){color:#d1f1d9}
.night .mgr-demo-store-switch button.on,.night .mgr-demo-scope button.on{color:#fff}