* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root, body[data-theme="dark"] { --bg:#0f1115; --card:#1a1e26; --card2:#232833; --line:#2f3542; --txt:#eef1f6; --sub:#9aa4b2; --accent:#e8b923; --accent2:#3a7afe; --ok:#2fbf71; --danger:#e2504a; --onacc:#241c00;  --pay-cash:#38e0f5; --pay-card:#4ade80; --pay-cred:#ff7ab8; }
body[data-theme="light"] { --bg:#f3f4fa; --card:#ffffff; --card2:#eef0f8; --line:#e1e3ef; --txt:#2b2e38; --sub:#8b91a3; --accent:#f4a8c8; --accent2:#8fb6f0; --ok:#3fb389; --danger:#e2687f; --onacc:#4a1029;  --pay-cash:#0d7f95; --pay-card:#1f8f57; --pay-cred:#c2185b; }
body[data-theme="pink"] { --bg:#2a0a1e; --card:#3d1130; --card2:#4c1a3d; --line:#5e2a4d; --txt:#ffe9f4; --sub:#e6aecb; --accent:#ff4fa0; --accent2:#ff89c2; --ok:#59d3a2; --danger:#ff6f8e; --onacc:#3d0022;  --pay-cash:#38e0f5; --pay-card:#4ade80; --pay-cred:#ff7ab8; }
/* ↓2026-08-09 追加。明るい系は文字を濃くして、暗い店内でも読めるコントラストを確保している。 */
body[data-theme="sakura"] { --bg:#fdf2f6; --card:#ffffff; --card2:#fce8ef; --line:#f4d5e0; --txt:#4a2b38; --sub:#a0788a; --accent:#e8879f; --accent2:#f2b8c6; --ok:#4bb894; --danger:#d9536b; --onacc:#ffffff;  --pay-cash:#0d7f95; --pay-card:#1f8f57; --pay-cred:#c2185b; }
body[data-theme="aqua"]   { --bg:#eef7fb; --card:#ffffff; --card2:#e2f1f8; --line:#cfe4ee; --txt:#233c47; --sub:#6f909e; --accent:#4aa8c9; --accent2:#8fd0e6; --ok:#3fae8e; --danger:#dd6070; --onacc:#ffffff;  --pay-cash:#0d7f95; --pay-card:#1f8f57; --pay-cred:#c2185b; }
/* ↓2026-08-09 追加。多色系は「背景・カードは無彩色、差し色だけ多色」にして文字を読みやすく保つ。 */
/* 白×銀 */
body[data-theme="silver"]   { --bg:#f2f4f6; --card:#ffffff; --card2:#e9ecef; --line:#d6dbe1; --txt:#22262c; --sub:#79818c; --accent:#6b7683; --accent2:#a8b2bd; --ok:#3fae8e; --danger:#d9536b; --onacc:#ffffff;  --pay-cash:#0d7f95; --pay-card:#1f8f57; --pay-cred:#c2185b; }
/* 黒×銀 */
body[data-theme="onyx"]     { --bg:#0c0d10; --card:#16181d; --card2:#1e2128; --line:#2d3138; --txt:#eceef2; --sub:#98a0ac; --accent:#c6ccd4; --accent2:#7f8896; --ok:#2fbf71; --danger:#e2504a; --onacc:#14161a; }
/* 赤×青×白（トリコロール）＝白地に赤と青の差し色 */
body[data-theme="tricolor"] { --bg:#f4f6fa; --card:#ffffff; --card2:#e9eef7; --line:#d5dded; --txt:#1b2130; --sub:#737f97; --accent:#c8102e; --accent2:#12409a; --ok:#2f9e6e; --danger:#c8102e; --onacc:#ffffff; }
body[data-theme="tricolor"] .bill-head { border-left:4px solid var(--accent2); padding-left:8px; }
/* 緑×黄×赤＝黒地に3色の差し色 */
body[data-theme="rasta"]    { --bg:#0e130f; --card:#182019; --card2:#202b21; --line:#2f3d31; --txt:#f0f4ee; --sub:#9fb3a2; --accent:#f5c518; --accent2:#1f9d55; --ok:#1f9d55; --danger:#d64430; --onacc:#241f00; }

/* ===== やさしい白（初心者向け）2026-08-28 =====
   ★ねらい＝「はじめて触る人が、どこを押せばいいか迷わない」。他の白テーマとの違いは3つ。
     ①枠線を濃くした（#c9d1da）。既存の白テーマは線が薄く、カードと入力欄の境目が見えない。
     ②説明文の色を濃くした（--sub #55606c）。他の白は #8b91a3 前後で、明るい店内だとほぼ読めない。
     ③強調色を1色（青）に統一。金・ピンク・水色を混ぜず、【青＝押す】【赤＝消す】【緑＝終わった】だけにする。
   ⚠ 色は下の1行だけ。見やすさの調整は body[data-theme="plain"] の追加ルールでやる（他テーマに影響しない）。 */
body[data-theme="plain"]    { --bg:#f4f6f8; --card:#ffffff; --card2:#eef1f5; --line:#c9d1da; --txt:#14181d; --sub:#55606c; --accent:#0b63d6; --accent2:#0b63d6; --ok:#1a7f4b; --danger:#c62828; --onacc:#ffffff;  --pay-cash:#0d7f95; --pay-card:#1f8f57; --pay-cred:#c2185b; }

/* --- ここから下は「やさしい白」を選んだときだけ効く（他の店の見た目は変わらない）--- */
/* カードを白く浮かせる。背景がうっすら灰色なので、白い面＝中身の入れ物だと分かる */
body[data-theme="plain"] .card { box-shadow:0 1px 2px rgba(16,24,40,.06); }
/* ★入力欄は「白い穴」にする。既定は card2（灰）で、白いカードの上だと押せる場所に見えない */
body[data-theme="plain"] input,
body[data-theme="plain"] select { background:#ffffff; }
/* ★今どこを触っているかを、枠だけでなく光でも示す（初心者はカーソルを見失う） */
body[data-theme="plain"] input:focus,
body[data-theme="plain"] select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(11,99,214,.18); }
/* ★押せるボタンは白地＋濃い枠にして、文字（押せない説明文）とはっきり分ける */
body[data-theme="plain"] .mini,
body[data-theme="plain"] .ghost { background:#ffffff; }
/* ★一番やってほしい操作＝青い面。下に濃い青の影を付けて「押せる立体」に見せる */
body[data-theme="plain"] .primary { box-shadow:0 2px 0 #0a4fa8; }
body[data-theme="plain"] .primary:disabled { box-shadow:none; }
/* ★消す系は赤い枠。押す前に色で気づけるようにする */
body[data-theme="plain"] .del-chg { border-color:var(--danger); color:var(--danger); background:#ffffff; }
/* ★下メニューの「今いる場所」を、色だけでなく面で示す */
body[data-theme="plain"] #botnav button.active { background:#e7f0fd; }
/* ⚠ 管理者用のボタンを薄くしすぎない。初心者には「壊れている・押せない」に見えるため */
body[data-theme="plain"] #botnav button.nav-admin { opacity:.8; }
/* ★伝票一覧の「進行中／会計済」の札（2026-08-28 ユーザー指摘で修正）。
   ⚠ 元の指定は背景が暗い色の【直書き】（進行中 #173d2a・会計済 #3a2020）で、暗いテーマ専用だった。
     白地に置くと黒い札が浮いて、文字も読めない。
   ★色の意味：進行中＝まだ席にいる＝目を引く緑／会計済＝終わった＝静かな灰色。
     ⚠ 元は会計済が【赤】だったが、このテーマでは赤を「消す」に使うと決めたので灰色にした。
        終わった伝票は危険でも間違いでもないので、赤で驚かせない。 */
body[data-theme="plain"] .badge.open   { background:#e6f4ec; color:#14663c; border:1px solid #b7e0c8; }
body[data-theme="plain"] .badge.closed { background:#eef1f5; color:#4a5560; border:1px solid #c9d1da; }
/* ⚠ 金額の文字サイズは変えない（2026-08-25 の実測どおり。大きくすると桁が多い月に切れる） */
body[data-theme="rasta"] .bill-head { border-left:4px solid var(--accent2); padding-left:8px; }
body[data-theme="rasta"] #topbar { border-bottom:2px solid var(--accent); }
html,body { margin:0; padding:0; background:var(--bg); color:var(--txt); font-family:Meiryo,"メイリオ","Hiragino Kaku Gothic ProN",sans-serif; font-size:15px;
  /* ★iOSで画面の端を超えて引っぱる（ラバーバンド）と、position:fixed の下ナビも一緒に持ち上がって
     伝票の「合計」が隠れる。ここで跳ね返りを止める（2026-08-18・実機で発覚）。 */
  overscroll-behavior-y: none; }
/* ★html の背景は消す（2026-10-13）。テーマの色（--bg）は body[data-theme] にだけ付くので、html に var(--bg) を指定すると
   いつも標準の暗い色になり、白系テーマでも body より外（画面の下端・端・引っぱったとき）が黒く残っていた。
   html を透明にすると、body の背景が画面全体に広がる＝テーマの色がそのまま全面に出る。 */
html { background:none; }
/* ★白系テーマでは、営業中／終了バッジの暗い固定色（#173d2a / #3a2020）を明るい色にする（黒が残らないように）。
   「白ベース・見やすい」(plain) は下で個別に指定済み。 */
body[data-theme="light"] .badge.open, body[data-theme="sakura"] .badge.open, body[data-theme="aqua"] .badge.open,
body[data-theme="silver"] .badge.open, body[data-theme="tricolor"] .badge.open { background:#e6f4ec; color:#14663c; border:1px solid #b7e0c8; }
body[data-theme="light"] .badge.closed, body[data-theme="sakura"] .badge.closed, body[data-theme="aqua"] .badge.closed,
body[data-theme="silver"] .badge.closed, body[data-theme="tricolor"] .badge.closed { background:#eef1f5; color:#4a5560; border:1px solid #c9d1da; }
/* ⚠ 下余白は下メニューの高さ＋ホームバー。足りないと最後のカードが隠れて押せない。 */
#app { max-width:720px; margin:0 auto; padding-bottom:calc(168px + env(safe-area-inset-bottom)); }

#topbar { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:var(--card); border-bottom:1px solid var(--line); }
#storeName { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top-left { display:flex; align-items:baseline; gap:8px; min-width:0; }
.bizday { font-size:15px; font-weight:700; white-space:nowrap; color:var(--accent); }
#saveState { font-size:11px; color:var(--sub); white-space:nowrap; }
.save-idle { color:var(--sub); } .save-saving { color:var(--accent); } .save-done { color:var(--ok); }

.page { padding:10px; }
.hidden { display:none !important; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:10px; }

.row2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.fld { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--sub); margin-bottom:8px; }
input,select { width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--card2); color:var(--txt); font-size:16px; }
input:focus,select:focus { outline:none; border-color:var(--accent2); }

.cust-wrap { position:relative; }
.suggest { position:absolute; top:100%; left:0; right:0; z-index:9; background:var(--card2); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.suggest div { padding:10px; border-bottom:1px solid var(--line); font-size:14px; color:var(--txt); }
.suggest div:last-child { border-bottom:0; }
.suggest .st { color:var(--sub); font-size:12px; margin-left:6px; }

.sets { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:4px; }
.setbox { background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:8px; text-align:center; }
.setbox .nm { font-size:12px; color:var(--sub); }
.setbox .pr { font-size:11px; color:var(--sub); margin:2px 0 6px; }
.stepper { display:flex; align-items:center; justify-content:space-between; }
.stepper button { width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--txt); font-size:20px; }
.stepper .qty { font-size:18px; font-weight:600; min-width:22px; }

.charges { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:8px; }
.chg { display:flex; align-items:center; gap:6px; background:var(--card2); border:1px solid var(--line); border-radius:20px; padding:6px 12px; font-size:13px; }
.chg.on { border-color:var(--accent); color:var(--accent); }

.cat-tabs { display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; }
.cat-tabs button { flex:0 0 auto; padding:8px 12px; border-radius:20px; border:1px solid var(--line); background:var(--card2); color:var(--sub); font-size:13px; }
.cat-tabs button.active { background:var(--accent2); border-color:var(--accent2); color:#fff; }
.menu-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:8px; }
.mbtn { background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:10px 8px; text-align:left; color:var(--txt); font-size:13px; line-height:1.3; }
.mbtn .p { color:var(--sub); font-size:12px; margin-top:3px; }
.mbtn-amt { border-color:var(--accent2); }
.mbtn-amt .p { color:var(--accent2); }

.bill-head { display:flex; justify-content:space-between; align-items:center; font-weight:600; margin-bottom:8px; }
.bill-lines { min-height:40px; }
.bline { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--line); font-size:14px; }
.bline .ctrl { display:flex; align-items:center; gap:8px; }
.bline .ctrl button { width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:var(--card2); color:var(--txt); font-size:16px; }
.bline .amt { min-width:74px; text-align:right; }
.empty { color:var(--sub); font-size:13px; padding:8px 0; }
.bill-totals { border-top:1px solid var(--line); margin-top:8px; padding-top:8px; }
.trow { display:flex; justify-content:space-between; padding:3px 0; color:var(--sub); font-size:14px; }
.trow.total { color:var(--txt); font-size:20px; font-weight:700; padding-top:8px; }

button { cursor:pointer; }
.primary { width:100%; padding:12px; border:0; border-radius:10px; background:var(--accent); color:var(--onacc); font-weight:700; font-size:16px; }
.primary:disabled { background:var(--line); color:var(--sub); }
.primary.big { padding:14px; font-size:17px; margin-top:10px; }
.ghost { width:100%; padding:12px; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--txt); font-size:15px; }
.mini { padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card2); color:var(--txt); font-size:13px; }

/* 3段（1段目=2つ／2・3段目=3つずつ）＝6分割グリッドで割り付ける */
#botnav { position:fixed; bottom:0; left:0; right:0; z-index:6; display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:4px solid var(--accent); max-width:720px; margin:0 auto; }
#botnav button { grid-column: span 2; }
#botnav button.nav-half { grid-column: span 3; }
/* 長い項目名も入るように折り返し可＋2行分の高さを確保 */
#botnav button { padding:10px 2px; border:0; background:var(--card); color:var(--txt); font-size:12px; line-height:1.25;
  white-space:normal; word-break:keep-all; min-height:48px; opacity:1; font-weight:600; }
#botnav button.nav-admin { opacity:.55; color:var(--sub); font-weight:400; }   /* 管理パスワードが要るボタンは淡く */
#botnav button.active { color:var(--accent); font-weight:700; opacity:1; }
.stepper-inline { justify-content:flex-start; gap:14px; padding:2px 0; }
.cust { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:8px; }
.cust-top { display:flex; justify-content:space-between; align-items:baseline; }
.cust-name { font-size:17px; font-weight:700; }
.cust-meta { color:var(--sub); font-size:12px; margin:4px 0 8px; display:flex; gap:12px; flex-wrap:wrap; }
.cust textarea { width:100%; min-height:48px; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--card2); color:var(--txt); font-size:14px; font-family:inherit; resize:vertical; }
.cust-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.cust-actions { display:flex; gap:8px; margin-top:8px; }
.cust-actions button { flex:1; }
/* ===== メンバーリスト：既定は閉じた状態（2026-08-24 ユーザー指定）=====
   ⚠ 入力欄は「編集」を押すまで出さない。開きっぱなしだと、担当やメモを直して保存しただけで
      顧客名まで一緒に書き換わってしまう（伝票との食い違いの元だった）。 */
.cust { padding:9px 12px; }
.cust-meta { margin:3px 0 6px; gap:10px; }
.cust-memo { color:var(--sub); font-size:12px; margin:0 0 6px;
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cust-actions { margin-top:0; }
.cust-actions .mini.on { border-color:var(--accent); color:var(--accent); }
.cust-edit { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.cust-edit .cust-actions { margin-top:8px; }
/* 同業のお客様の店舗名＝名前の右に小さく出す（2026-08-24） */
/* 同業のお客様の店舗名。⚠ 灰色だと暗くて読めなかったので金色に（2026-08-25 ユーザー指定） */
.cust-shop { margin-left:6px; font-size:11px; font-weight:600; color:var(--accent);
             border:1px solid var(--accent); border-radius:6px; padding:1px 5px; white-space:nowrap; }

/* ===== 清算済伝票のかんたん検索（2026-08-24 ユーザー指定）=====
   タッチで絞り込み／もう一度タッチで解除。押されているものだけ枠と文字が色づく。 */
.lf-card { padding:8px 10px; margin-bottom:8px; }
.lf-card:empty { display:none; }
.lf-head { display:flex; justify-content:space-between; align-items:baseline;
           font-size:13px; font-weight:700; margin-bottom:6px; }
/* かんたん検索＝1行3カラムのプルダウン（2026-08-25 ユーザー指定・旧チップ方式は廃止）
   ⚠ 素の 1fr だと【列の最小幅＝中身の最小幅】になり、長い名前で横にはみ出す。必ず minmax(0,1fr)。 */
.lf-cols { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.lf-cols .fld { margin-bottom:0; min-width:0; font-size:11px; }
.lf-cols select { min-width:0; padding:8px 4px; font-size:14px; }
.lf-cols select.on { border-color:var(--accent); color:var(--accent); font-weight:700; }
.lf-cols select:disabled { opacity:.45; }
.day-head.lf-hit { color:var(--accent); }

/* 二重計上の確認（経費フォーム・2026-08-24）。止めずに知らせるだけ。 */
.dup-box { margin-top:8px; padding:8px 10px; border:1px solid var(--danger); border-radius:10px; background:var(--card2); }
.dup-t { color:var(--danger); font-weight:700; font-size:13px; }
.dup-b { color:var(--sub); font-size:12px; margin-top:3px; }
.dup-a { display:flex; gap:8px; margin-top:8px; }
.dup-a .mini { flex:1; }
.dup-a #e-dup-yes { border-color:var(--danger); color:var(--danger); }

/* 月初の目標設定の案内（テーブル一覧の上・管理者だけ）2026-08-24 */
.goal-notice { border:1px solid var(--accent); border-radius:12px; padding:10px 12px; margin-bottom:10px; background:var(--card2); }
.goal-notice.hidden { display:none; }
.gn-t { color:var(--accent); font-weight:700; font-size:14px; }
.gn-b { color:var(--sub); font-size:12px; margin:3px 0 8px; }
.goal-notice .mini { width:100%; }
/* 日別支払い一覧：振込の行は薄く出す（小計には入れない） */
.erow-bank { opacity:.72; }
.bank-tag { font-size:10px; color:var(--sub); border:1px solid var(--line);
            border-radius:5px; padding:0 4px; margin-left:4px; white-space:nowrap; }
/* 必須の印（経費の使用者など）2026-08-24 */
.req { color:var(--danger); font-size:10px; border:1px solid var(--danger); border-radius:4px; padding:0 3px; }
/* 経費の支払い方法（現金／会社振込／売掛）2026-08-25 */
.pay3 { display:flex; gap:6px; flex-wrap:wrap; }
.pay3-o { flex:1 1 auto; display:flex; align-items:center; gap:5px; padding:8px 6px; font-size:13px;
          border:1px solid var(--line); border-radius:8px; background:var(--card2); white-space:nowrap; }
.pay3-o input { width:auto; padding:0; margin:0; }
.pay3-o:has(input:checked) { border-color:var(--accent); color:var(--accent); font-weight:700; }

/* ===== 削除済み伝票の一覧（2026-08-24 ユーザー指定：4カラムでコンパクトに）=====
   日付・名前・金額・作成者→削除者 ＋ 復元。理由があるときだけ2行目に出す。 */
.dl-card { padding:8px 10px; }
.dl-row { display:grid; grid-template-columns:52px 1fr 70px 68px 40px; gap:5px;
          align-items:center; padding:6px 0; border-bottom:1px solid var(--line); font-size:12px; }
.dl-row:last-child { border-bottom:0; }
.dl-head { color:var(--sub); font-size:10.5px; padding-top:0; }
.dl-n { font-weight:700; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-a { text-align:right; font-variant-numeric:tabular-nums; }
.dl-p { color:var(--sub); font-size:10.5px; min-width:0;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-row .mini { padding:4px 6px; font-size:11px; }
.dl-r { grid-column:1 / -1; color:var(--sub); font-size:10.5px;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.day-head { display:flex; justify-content:space-between; align-items:baseline; margin:14px 4px 6px; color:var(--accent); font-weight:600; font-size:14px; }
.rcpt-btn { margin-top:8px; padding:8px; width:100%; border:1px solid var(--accent); border-radius:8px; background:transparent; color:var(--accent); font-size:14px; }

.tk { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:8px; }
/* ===== 清算済伝票を2カラムに（2026-08-25 ユーザー指定）=====
   ⚠ 日付の見出し・削除済み一覧・「ありません」は横いっぱいに広げる。
   ⚠ 高さは伝票ごとに違う（ボタンの数が違う）ので align-items:start で上を揃える。 */
/* ⚠ minmax(0,1fr) にしないと、列の最小幅が「中身の最小幅」になって横にはみ出す
   （tk-cust が nowrap なので、長い名前がそのまま列幅の下限になる）。実測で確認済み。 */
#list-wrap { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; align-items:start; }
#list-wrap > .day-head, #list-wrap > .day-pay, #list-wrap > .card, #list-wrap > .dl-card { grid-column:1 / -1; }
#list-wrap > .tk { margin-bottom:0; padding:9px 10px; }
/* 2カラムは幅が狭いので、卓と金額を1行目・顧客名を2行目に落として全幅で見せる。
   ⚠ 1行に詰めると名前が「…」で切れる（実測で確認）。 */
#list-wrap .tk-top { flex-wrap:wrap; gap:2px 8px; }
#list-wrap .tk-table { font-size:15px; }
#list-wrap .tk-total { font-size:16px; margin-left:auto; }
#list-wrap .tk-cust { order:3; flex:1 0 100%; font-size:14px; }
#list-wrap .tk-sub { font-size:11.5px; gap:6px; margin-top:3px; }
#list-wrap .tk-no { font-size:11px; margin-top:3px; }
/* ボタンは2列（会計伝票／領収書／バック印刷／サイン写真）2026-08-25 ユーザー指定 */
.tk-btns { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:5px; margin-top:7px; }
.tk-btns .rcpt-btn { margin-top:0; width:100%; }
.rcpt-btn.wide { width:100%; }
/* 再印刷はひと目で分かるように色を変える（押し間違いを減らす） */
.rcpt-btn.is-again { border-color:var(--sub); color:var(--sub); }
/* 精算伝票のボタンは枠を濃いめの紫に（2026-10-04 ユーザー指定）。一覧と伝票画面の両方 */
.settle-btn { border-color:#7e22ce !important; color:#fff !important; }
/* ⚠ 明るいテーマで白文字は消えるので、そこだけ普段の文字色に戻す */
body[data-theme="light"] .settle-btn, body[data-theme="sakura"] .settle-btn, body[data-theme="aqua"] .settle-btn,
body[data-theme="silver"] .settle-btn, body[data-theme="tricolor"] .settle-btn, body[data-theme="plain"] .settle-btn { color:var(--txt) !important; }
#list-wrap .rcpt-btn { margin-top:6px; padding:6px 4px; font-size:12px; }
#list-wrap .tk-btns .rcpt-btn { margin-top:0; padding:6px 2px; font-size:11.5px; }
/* 集計→紹介料の一覧（2026-08-28 ユーザー指定）。
   ★1行に 日付・顧客名・紹介者・金額・📒・📸 を並べる。
   ⚠ ボタンは行の文字（12px）と同じ大きさ。別の行に大きく出さない。 */
#dash-ref-list .ref-mini { padding:0; border:1px solid var(--line); border-radius:6px;
  background:transparent; color:var(--txt); font-size:12px; line-height:1; height:22px; min-height:0; }
#dash-ref-list .ref-mini:active { opacity:.6; }
/* 支払い方法のチップ（カード＝青／現金＝緑／売掛＝黄）。経費の3カラムと同じ色にそろえる。 */
/* 1日の内訳は縦1列（2026-08-25 ユーザー指定）。この下に伝票のカードが2列で並ぶ。 */
/* 1日の内訳は【3カラム・1行】（2026-08-25 ユーザー指定）。この下に伝票のカードが2列で並ぶ。
   ⚠ minmax(0,1fr) にしないと列の最小幅が中身に引っぱられてはみ出す。 */
.day-pay { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4px; margin:0 4px 8px; }
.dp-row { display:flex; justify-content:space-between; align-items:baseline; gap:3px;
          font-size:12px; font-weight:700; padding:3px 6px; border-radius:7px;
          border:1px solid currentColor; font-variant-numeric:tabular-nums;
          letter-spacing:-0.3px; white-space:nowrap; overflow:hidden; }
.dp-row span:first-child { font-size:10.5px; font-weight:600; flex:0 0 auto; }
.dp-row span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.tk-pay { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.pay-chip { font-size:10.5px; padding:1px 6px; border-radius:999px; white-space:nowrap;
            border:1px solid var(--line); color:var(--sub); font-variant-numeric:tabular-nums; }
/* ★現金＝黄／カード＝緑／売掛＝ピンク（2026-08-25 ユーザー指定）。
   ⚠ 黒地に青は見づらいという実測。緑と蛍光ブルーは色相が近くて見分けにくいのでピンクにした。 */
.pc-cash { border-color:var(--pay-cash); color:var(--pay-cash); }
.pc-card { border-color:var(--pay-card); color:var(--pay-card); }
.pc-cred { border-color:var(--pay-cred); color:var(--pay-cred); }
.pc-done { border-color:var(--pay-card); color:var(--pay-card); }
/* 金額の前に出す支払い方法。★丸で囲む（2026-08-25 ユーザー指定） */
.pm { display:inline-block; font-size:10px; font-weight:700; margin-right:5px; vertical-align:2px;
      padding:2px 8px; border-radius:999px; border:1.5px solid currentColor; line-height:1.2; }
.pm.pc-cash { color:var(--pay-cash); }
.pm.pc-card { color:var(--pay-card); }
.pm.pc-cred { color:var(--pay-cred); }
#list-wrap .del-mini { margin-top:6px; padding:5px; font-size:11.5px; }
/* 幅が狭い端末では1カラムに戻す（2列だと文字が潰れるため） */
@media (max-width:359px) { #list-wrap { grid-template-columns:1fr; } }
.tk.closed { opacity:.6; }
.tk-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; min-width:0; }
.tk-table { font-size:18px; font-weight:700; white-space:nowrap; }
.tk-cust { font-size:18px; font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-total { font-size:18px; font-weight:700; color:var(--accent); white-space:nowrap; }
.tk-sub { color:var(--sub); font-size:13px; margin-top:4px; display:flex; gap:10px; flex-wrap:wrap; }
.badge { font-size:11px; padding:2px 8px; border-radius:10px; }
.badge.open { background:#173d2a; color:var(--ok); } .badge.closed { background:#3a2020; color:var(--danger); }

/* 卓ボード（未会計） */
.board-head { display:flex; justify-content:space-between; align-items:baseline; margin:2px 4px 4px; }
.board-title { font-size:16px; font-weight:700; }
.board-sum { font-size:18px; font-weight:800; color:var(--accent); }
.board-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:12px; }
.tcard { display:flex; flex-direction:column; gap:8px; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px; color:var(--txt); }
.tcard:active { border-color:var(--accent); }
.tcard-main { min-width:0; display:flex; flex-direction:column; gap:6px; text-align:left; }
.tcard-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 8px; min-width:0; }
/* 卓ボードの文字は全部おなじ大きさ */
/* 2カラムに収める都合で16px（1カラムなら20pxにできる） */
.tcard-table, .tcard-guests, .tcard-time, .tcard-name, .tcard-amt { font-size:var(--tcard-fs, 16px); }
.tcard-table { font-weight:800; white-space:nowrap; }
.tcard-guests, .tcard-time { color:var(--sub); white-space:nowrap; }
.tcard-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tcard-amt { font-weight:800; color:var(--accent); white-space:nowrap; margin-left:auto; }
.tcard-print { width:100%; border:1px solid var(--accent); border-radius:10px; background:transparent; color:var(--accent); font-size:14px; font-weight:700; padding:9px 4px; white-space:nowrap; }

/* セット料金（6枠・税込・延長） */
.setbox .incl { display:inline-block; font-size:9px; color:var(--onacc); background:var(--accent); border-radius:6px; padding:1px 5px; margin-left:4px; vertical-align:middle; }
.setbox .stepper.ext { margin-top:6px; }
.setbox .stepper.ext .exl { font-size:11px; color:var(--sub); }
.setbox .stepper.ext button { width:28px; height:28px; font-size:16px; }
.setedit { background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:8px; margin-bottom:8px; }
.setedit .nm { margin-bottom:6px; }
.setedit-row { display:flex; align-items:center; gap:8px; }
/* 退勤まわり＝押す物だとひと目で分かるように、はっきりしたボタンにする（2026-08-09） */
.btn-out { flex:1; padding:11px 12px; border:0; border-radius:10px; background:var(--accent); color:var(--onacc); font-weight:700; font-size:15px; }
.btn-out2 { flex:1; padding:11px 12px; border:2px solid var(--accent); border-radius:10px; background:transparent; color:var(--accent); font-weight:700; font-size:15px; }
.time-in { flex:0 0 92px; text-align:center; font-size:17px; font-weight:700; letter-spacing:1px; }
.setedit-row .pr, .setedit-row .ex { flex:1; min-width:0; }
.setedit-row .incl-chk { display:flex; align-items:center; gap:4px; font-size:13px; color:var(--sub); white-space:nowrap; }
.setedit-row .incl-chk input { width:auto; }
/* 経費の編集行＝支払い方法の3択（2026-08-25）。
   ⚠ input,select は既定で width:100% なので、指定しないと行が縦に潰れる。 */
.setedit-row .incl-chk select { width:auto; padding:3px 4px; font-size:12px; }
.setedit-row .del-chg { flex:0 0 auto; width:40px; height:40px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--danger); }

/* 削除ボタン類 */
.ghost.danger-btn { border-color:var(--danger); color:var(--danger); }
.primary.danger-btn { background:var(--danger); color:#fff; }
.del-mini { margin-top:8px; padding:7px; width:100%; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--danger); font-size:13px; }

.medit { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.medit .cat { width:84px; color:var(--sub); font-size:12px; }
.medit input.nm { flex:1; } .medit input.pr { width:82px; }
.medit button { width:38px; height:40px; border-radius:8px; border:1px solid var(--line); background:var(--card2); color:var(--danger); }
.mcat-h { color:var(--accent); font-size:13px; margin:12px 0 6px; }

.hint { color:var(--sub); font-size:12px; margin:4px 0; }
.mono-url { font-family:ui-monospace,Menlo,monospace; font-size:13px; background:var(--card2); border:1px solid var(--line); border-radius:8px; padding:10px; word-break:break-all; }

.modal { position:fixed; inset:0; z-index:20; background:rgba(0,0,0,.55); display:flex; align-items:flex-end; }
.sheet { width:100%; max-width:720px; margin:0 auto; background:var(--card); border-radius:16px 16px 0 0; padding:16px; max-height:92vh; overflow:auto; }
.charged-line { text-align:right; font-size:22px; font-weight:700; margin:8px 0; }
.chk-row { display:flex; align-items:center; gap:8px; font-size:15px; margin:10px 0; color:var(--txt); }
.chk-row input { width:auto; transform:scale(1.2); }
.ref-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.ref-row .ref-inp { flex:1; }
.ref-row .ref-del { flex:0 0 auto; width:40px; height:40px; border-radius:8px; border:1px solid var(--line); background:var(--card2); color:var(--danger); font-size:18px; }
.ref-row .amt-lbl { flex:0 0 62px; color:var(--sub); font-size:13px; }
.ref-row .amt-val { flex:1; text-align:right; font-weight:600; }
.ref-row .amt-inp, .ref-row .payee-inp { flex:1; min-width:0; }
.diff-line { text-align:center; font-size:14px; margin:8px 0; }
.diff-ok { color:var(--ok); } .diff-ng { color:var(--danger); }

.toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); z-index:40; background:#000; color:#fff; padding:10px 16px; border-radius:20px; font-size:14px; }

.sub { color:var(--sub); font-size:13px; font-weight:400; }
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.mcard { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; }
.mcard.big { grid-column:1 / -1; }
/* 売上月報のまとめ＝3つ並び（2026-08-24）。狭い画面でも3つ入るよう文字を少し小さく */
.dash-grid.g3 { grid-template-columns:1fr 1fr 1fr; }
.dash-grid.g3 .mcard { padding:10px 8px; }
.dash-grid.g3 .mcard .lbl { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-grid.g3 .mcard .val { font-size:clamp(13px, 4.1vw, 17px); }
/* ★桁が増えても崩れないように（2026-08-24）。数字は等幅・折り返さない・はみ出さない */
.mcard .val { font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:clip; letter-spacing:-0.2px; text-align:right; }
.mcard .val.long { font-size:clamp(11px, 3.4vw, 15px); letter-spacing:-0.5px; }
.mcard .val.xlong { font-size:clamp(10px, 3.0vw, 13px); letter-spacing:-0.6px; }
/* カードの高さ違い（2026-08-24）。h70＝控えめ／h140＝主役の数字 */
.mcard.h70 { padding:7px 8px; }
.mcard.h70 .lbl { font-size:10.5px; }
.mcard.h70 .val { font-size:clamp(12px, 3.5vw, 15px); margin-top:2px; }
.mcard.h140 { padding:18px 8px; }
.mcard.h140 .val { font-size:clamp(17px, 5.6vw, 26px); margin-top:6px; }
.mcard.h140 .val.long { font-size:clamp(14px, 4.6vw, 21px); }
.mcard.h140 .val.xlong { font-size:clamp(12px, 3.8vw, 18px); }
.dash-grid.g3 .mcard.w2 { grid-column:span 2; }
/* ===== 年間収支の表（2026-08-25 ユーザー指定）=====
   月／売上／経費／給与／利益 の5カラム。行の背景の帯＝その月の売上の大きさ。
   ⚠ 素の 1fr だと【列の最小幅＝金額の幅】になり、8桁で横にはみ出す。必ず minmax(0,1fr)。 */
.yr-head, .yr-row { display:grid; grid-template-columns:2.4em repeat(4, minmax(0,1fr)); gap:2px;
                    align-items:center; font-variant-numeric:tabular-nums; }
.yr-head { font-size:10px; color:var(--sub); padding:2px 4px 4px; }
.yr-head span + span, .yr-row span + span { text-align:right; }
.yr-row { position:relative; font-size:11.5px; padding:8px 4px; border-bottom:1px solid var(--line); letter-spacing:-0.3px; }
.yr-row::before { content:''; position:absolute; left:0; top:2px; bottom:2px; width:var(--w,0%);
                  background:var(--accent2); opacity:.16; border-radius:4px; pointer-events:none; }
.yr-row > span { position:relative; overflow:hidden; text-overflow:clip; white-space:nowrap; }
.yr-row .m { color:var(--sub); text-align:left; }
.yr-row .p.ok { color:var(--ok); } .yr-row .p.ng { color:var(--danger); }
.yr-row.yr-none { opacity:.42; }
.yr-row.yr-ng { color:var(--danger); }
.yr-row.yr-ng::before, .yr-row.yr-total::before { display:none; }
.yr-row.yr-total { border-top:2px solid var(--line); border-bottom:0; margin-top:4px;
                   font-weight:700; }
/* ⚠ 合計行を大きくしない（2026-08-25 実測）。太字12.5pxだと年間売上が1億を超えたとき
   375px で「123,456,78」と切れた。区別は太字＋上の罫線だけで足りる。 */
/* 経費：左2カラム＝現金／右2カラム＝振込（合計4カラム）2026-08-24 */
/* ===== 誕生日（2026-08-28 ユーザー指定）=====
   ★今月が誕生月の人は、メンバーリストのカードの背景を変える。
   ⚠ テーマが8種類あるので固定色にしない。そのテーマのアクセント色を薄く敷く。 */
/* ⚠ 土台は必ず効く指定にする（--card2 とアクセント色の枠）。
   color-mix は古いiPhoneで効かないので、効く端末だけ更に色が乗る「おまけ」にしてある。 */
.cust.cust-bd { background:var(--card2); border-color:var(--accent); border-width:2px; }
.cust.cust-bd { background:color-mix(in srgb, var(--accent) 14%, var(--card)); }
.cust-bday { color:var(--sub); }
.cust-bday.on { color:var(--accent); font-weight:700; }

/* プリンタの見張り番の赤帯（2026-08-27）。応答が無いときだけ出す。
   ★営業中に見落とさないよう、画面の一番上に固定色で出す。 */
#prn-warn { background:var(--danger); color:#fff; font-size:13px; font-weight:700;
            padding:8px 10px; text-align:center; line-height:1.4; }

/* 経費をひとまとまりに囲む（2026-08-25 ユーザー指定）。
   ★見出し・3枚のカード・支払い方法べつの内訳を1つの枠に入れて、
     「売掛」が“経費の売掛”だと分かるようにする。
   ⚠ 背景は --card2。中の .mcard が --card なので、同じ色にすると枠の中でカードが消える。 */
.exp-box { background:var(--card2); border:1px solid var(--line); border-radius:12px;
           padding:0 10px 10px; margin-bottom:10px; }
.exp-box > .dash-grid { margin-bottom:8px; }
.exp-box > .dash-grid:last-child { margin-bottom:0; }
.exp-cap { color:var(--sub); font-size:10.5px; margin:0 2px 4px; }
.exp-split { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
/* 現金・振込・売掛の3カラム（2026-08-25）。狭い画面では2列に折る。 */
/* ⚠ minmax(0,1fr) にしないと列の最小幅が「中身の最小幅」になってはみ出す（実測で確認）。
   ⚠ 2カラムに折り返す指定は入れない＝3カラムのまま（ユーザー指定）。 */
.exp-split.c3 { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0; }
/* ===== 経費の内訳を3カラムの一覧にする（2026-08-25 ユーザー指定）=====
   カード型をやめて「項目名 … 金額」の行に。縦線と色で3つを読み分ける。 */
.exp-split.c3 .exp-col { padding:0 7px; border-left:1px solid var(--line); }
.exp-split.c3 .exp-col:first-child { padding-left:2px; border-left:0; }
.exp-split.c3 .exp-col > .lbl { font-size:11px; font-weight:700; margin:0 0 2px;
                                border-bottom:2px solid var(--line); padding-bottom:3px; }
.ex3-sum { font-size:13px; font-weight:700; text-align:right; margin:0 0 5px;
           font-variant-numeric:tabular-nums; letter-spacing:-0.3px; }
.ex3-row { display:flex; justify-content:space-between; align-items:baseline; gap:3px;
           font-size:10.5px; padding:2px 0; border-bottom:1px dashed var(--line); }
.ex3-row:last-child { border-bottom:0; }
.ex3-row .n { color:var(--sub); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ex3-row .v { font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600; letter-spacing:-0.3px; }
.ex3-none { color:var(--sub); font-size:10.5px; padding:2px 0; }
/* 3つを色で見分ける（現金＝緑／振込＝青／売掛＝黄） */
/* ⚠ .exp-split.c3 .exp-col > .lbl の方が詳細度が高いので、同じ強さで書かないと色が効かない（実測で確認） */
/* 経費も同じ色の考え方にそろえる：現金＝黄／振込＝緑／売掛＝ピンク（黒地に青は見づらいため） */
.exp-split.c3 .exp-col.ex-cash > .lbl { color:var(--pay-cash); border-bottom-color:var(--pay-cash); }
.exp-split.c3 .exp-col.ex-bank > .lbl { color:var(--pay-card); border-bottom-color:var(--pay-card); }
.exp-split.c3 .exp-col.ex-pay  > .lbl { color:var(--pay-cred); border-bottom-color:var(--pay-cred); }
.ex-cash .ex3-sum { color:var(--pay-cash); }
.ex-bank .ex3-sum { color:var(--pay-card); }
.ex-pay  .ex3-sum { color:var(--pay-cred); }
.exp-split .exp-col > .lbl { color:var(--sub); font-size:12px; font-weight:700; margin:0 2px 6px; display:flex; justify-content:space-between; }
.exp-split .dash-grid { margin-bottom:0; gap:6px; }
.exp-split .mcard { padding:6px; }
.exp-split .mcard .lbl { font-size:10px; }
.exp-split .mcard .val { font-size:clamp(11px, 3.2vw, 14px); margin-top:2px; }
.exp-split .empty { font-size:12px; padding:8px; }
.mcard .lbl { color:var(--sub); font-size:12px; }
.mcard .val { font-size:22px; font-weight:700; margin-top:4px; }
.mcard .val.accent { color:var(--accent); }
.mcard .val.ok { color:var(--ok); } .mcard .val.ng { color:var(--danger); }

/* ===== 集計ページのカードを詰める（2026-08-24 ユーザー指定：高さを約70%に）=====
   ★文字の大きさは変えない（ユーザー指定）。上下の余白・行の高さ・項目名と金額のあいだだけを詰める。
   ⚠ 効かせるのは集計ページの4つの入れ物だけ。経費精算ページ（#exp-*）のカードには一切かからない。
   ⚠ 見出し（mkHead）は style= で余白を直に書いているので、ここでは変わらない＝見出しの間隔は今のまま。 */
#dash-cards .mcard, #dash-staff-cards .mcard, #dash-exp-top .mcard, #dash-profit .mcard { padding:6px 8px; }
#dash-cards .mcard .lbl, #dash-staff-cards .mcard .lbl,
#dash-exp-top .mcard .lbl, #dash-profit .mcard .lbl { line-height:1.15; }
#dash-cards .mcard .val, #dash-staff-cards .mcard .val,
#dash-exp-top .mcard .val, #dash-profit .mcard .val { line-height:1.15; margin-top:2px; }
#dash-cards .mcard.h70, #dash-profit .mcard.h70 { padding:5px 8px; }
#dash-cards .mcard.h140 { padding:6px 8px; }
#dash-cards .mcard.h140 .val { margin-top:3px; }
#dash-exp-top .mcard { padding:7px 8px; }
/* ===== 売上月報の見出し行（〇月度目標＋対象月＋目標設定）2026-08-24 ユーザー指定 =====
   ⚠ input,select は既定で width:100% なので、ここでは幅を持たせない指定に上書きしている。 */
.dash-head { display:flex; align-items:center; gap:6px; padding:10px 2px 0; margin-bottom:2px; }
.dash-head > span { flex:1 1 auto; min-width:0; font-size:14px; font-weight:700; color:var(--txt);
                    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-head select { flex:0 0 auto; width:auto; padding:5px 6px; font-size:13px; border-radius:8px; }
.dash-head .mini { flex:0 0 auto; }
.dash-head .mini.on { border-color:var(--accent); color:var(--accent); }
/* 月間売上合計だけ数字を中央に置く（2026-08-24 ユーザー指定）。ほかの金額は右寄せのまま。 */
#dash-cards .mcard.h140.w2 .val { text-align:center; }
/* 経費のまとめの上の塊（経費合計・現金・振込・売掛）も数字を中央に（2026-08-28 ユーザー指定）。
   ⚠ 摘要ごとの3カラム（2つ目の .dash-grid）は右寄せのまま＝金額を縦に見比べられるように。 */
#exp-summary .dash-grid:first-child .mcard .val { text-align:center; }

/* ===== 〇月度目標（帯グラフ付き）2026-08-24 ユーザー指定 =====
   目標／達成率の帯／今の売上／残り を1枚にまとめたカード。
   ★％は右端の同じ位置に揃える（.gp を固定幅にする）＝数字が縦に並んで読みやすい。 */
.goal-card .gline { display:flex; align-items:baseline; gap:8px; }
.goal-card .gline + .gline { margin-top:4px; }
.goal-card .gl { color:var(--sub); font-size:11px; flex:0 0 auto; white-space:nowrap; }
.goal-card .gv { flex:1 1 auto; min-width:0; text-align:right; font-weight:700; font-size:15px;
                 font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; letter-spacing:-0.2px; }
.goal-card .gv-big { font-size:clamp(16px, 5.2vw, 22px); }
.goal-card .gv.accent { color:var(--accent); }
.goal-card .gp { flex:0 0 52px; text-align:right; color:var(--sub); font-size:11px; font-variant-numeric:tabular-nums; }
.goal-card .gp-on { color:var(--accent); font-weight:700; }
.goal-card .gbar { flex:1 1 auto; height:8px; border-radius:999px; background:var(--card2);
                   overflow:hidden; align-self:center; border:1px solid var(--line); }
.goal-card .gbar i { display:block; height:100%; background:var(--accent); border-radius:999px; }
/* 値の下の小さな％（営業日数・残り日数などのカード） */
.gpct { color:var(--sub); font-size:11px; text-align:right; line-height:1.15;
        font-variant-numeric:tabular-nums; margin-top:1px; }
.erow { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }
.erow .ec { color:var(--sub); font-size:12px; }
.erow .ea { font-weight:600; }
.erow button { width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:var(--card2); color:var(--danger); }
.drow { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); font-size:14px; }
/* タイムカードの人ごとの内訳＝最後の「支給額」（2026-08-25 ユーザー指定）。
   ★給与総額も太字なので、支給額は色を変えて最終行だと分かるようにする。 */
.drow.tm-net { border-bottom:0; padding-top:8px; font-size:16px; font-weight:700; color:var(--accent); }
.logo-prev { display:flex; align-items:center; gap:12px; margin-top:8px; }
.logo-prev img { max-width:120px; max-height:64px; background:#fff; border-radius:6px; padding:4px; }

/* ===== 打ち込み中のオーダー（カート）＝伝票入力を押すまで伝票に入らない ===== */
.card.cart { border:1px solid var(--accent); }
/* 伝票の「オーダー」アコーディオンの中の「打ち込み中のオーダー」（以前は別のカード・2026-10-22） */
.cart-in { border:1px solid var(--accent); border-radius:12px; padding:10px; margin-top:12px; }
body[data-theme="pastel"] .cart-in { border:0; background:#fff8fb; box-shadow:inset 0 0 0 1px #f7b8d0; }
/* 伝票画面のアコーディオンの見出し：見出しの右の小さな要約（人数・指名料・品数）を右寄せにして、矢印を端に */
#page-register .acc > .acc-head { display:flex; align-items:center; }
#page-register .acc > .acc-head > .hint { margin-left:auto; }
.cart-total { text-align:right; font-size:16px; font-weight:bold; padding:8px 0; }
.big-btn { width:100%; padding:16px; font-size:18px; }
.big-btn:disabled { opacity:.45; }
/* ===== オーダー修正 ===== */
#of-list .of-order { margin-top:10px; }
#of-list .of-order.is-cancelled { opacity:.55; }
#of-list .of-order.is-cancelled .bline span { text-decoration:line-through; }
.of-cancelled { color:var(--sub); font-size:13px; }
/* 伝票一覧カードの伝票番号 */
.tk-no { color:var(--sub); font-size:12px; margin-top:4px; }

/* ===== パスワード入力 ===== */
#pingate .sheet { max-width:340px; }
.pin-input { width:100%; padding:16px; font-size:32px; letter-spacing:14px; text-align:center; border:1px solid var(--line); border-radius:10px; background:var(--card2); color:var(--txt); font-family:inherit; }

/* ===== 押した感（ボタンのモーション） ===== */
button { transition: transform .08s ease, opacity .08s ease; }
button:active { transform: scale(.95); }
#botnav button:active { transform: scale(.92); }
/* ===== 下メニューの位置ズレ対策（2026-08-28 ユーザー報告「たまにバグる」）=====
   ★iOS Safari は position:fixed の要素が、ネイティブの確認ダイアログの後や
     アドレスバーの開閉で【ときどき本来と違う位置に取り残される】癖がある。
   ★専用のレイヤーに載せる（translateZ）と、この症状が出にくくなる。定番の対処。
   ⚠ transform を付けてよいのは【固定する要素そのもの】。先祖に付けると逆に fixed が壊れる。
   ⚠ 再現できていないので「たぶんこれ」の対処。直らなければ、下メニューを fixed をやめて
     画面全体を flex（縦）にして一番下に置く作りへ変える（そちらは確実だが影響が大きい）。 */
#botnav { transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform;
          padding-bottom: env(safe-area-inset-bottom); }
.mbtn:active, .tcard:active, .tcard-print:active { transform: scale(.95); }
button:disabled { transform:none; }

/* ===== 処理中の表示 ===== */
.busy { position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; }
.busy-box { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px 28px; text-align:center; color:var(--txt); font-size:16px; font-weight:700; min-width:200px; }
.busy-spin { width:34px; height:34px; margin:0 auto 12px; border:4px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation: busyspin .8s linear infinite; }
@keyframes busyspin { to { transform: rotate(360deg); } }

/* ===== メンバーリストから選ぶ ===== */
#memberpick .sheet { max-height:82vh; display:flex; flex-direction:column; }
#mp-search { width:100%; padding:12px; font-size:16px; border:1px solid var(--line); border-radius:8px; background:var(--card2); color:var(--txt); font-family:inherit; }
.mp-list { flex:1; overflow-y:auto; margin-top:10px; min-height:180px; max-height:52vh; }
.mp-row { display:flex; align-items:center; gap:10px; padding:11px 4px; border-bottom:1px solid var(--line); font-size:16px; }
.mp-row input { width:20px; height:20px; flex:0 0 auto; }
.mp-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mp-sub { color:var(--sub); font-size:12px; white-space:nowrap; }

/* ===== お客様用メニューページの構成エディタ ===== */
.mpb-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); }
.mpb-row .mini { flex:0 0 auto; width:40px; }

/* ===== お客様用メニューのQR ===== */
#storeName { cursor:pointer; }
.qr-wrap { display:flex; justify-content:center; padding:12px 0; }
.qr-wrap canvas { background:#fff; border-radius:8px; max-width:100%; height:auto; }
.qr-url { word-break:break-all; text-align:center; color:var(--sub); font-size:13px; padding:6px 0 12px; }
/* 2列のときは文字を少し小さくして、スマホの半分幅に収める */
.qr-btns.one { grid-template-columns:1fr; }
.qr-btns.three .big-btn:first-child { grid-column:1 / -1; }   /* 切替ボタンが2つのときは、コピーを1段目に広く置く */
.qr-btns:not(.one) .big-btn { font-size:15px; padding:14px 6px; white-space:nowrap; }
.menu-chk { display:flex; align-items:center; gap:6px; margin-top:8px; font-size:13px; color:var(--sub); white-space:nowrap; }
/* 全体の input は width:100% なので、チェックボックスだけ元に戻す（これが無いと文字が縦積みになる） */
.menu-chk input[type=checkbox] { width:18px; height:18px; flex:0 0 auto; padding:0; margin:0; }
.setedit-row .mi, .setedit-row .exm { flex:0 0 96px; }

/* ===== 紹介料（バック）の計算ルール ===== */
.bk-row { margin-bottom:8px; }
.bk-row .bmin { flex:1 1 90px; min-width:0; }
.bk-row .brate { flex:0 0 62px; min-width:0; }
.bk-row .bbase { flex:0 0 96px; min-width:0; }
.bk-u { flex:0 0 auto; color:var(--sub); font-size:12px; white-space:nowrap; }
.bk-preview { background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-top:6px; }
.bkp-row { display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:14px; border-bottom:1px dashed var(--line); }
.bkp-row:last-child { border-bottom:0; }
.bkp-row span:last-child { white-space:nowrap; }
.bkp-row.b { font-weight:700; font-size:16px; color:var(--accent); padding-top:8px; }
.bkp-row.ng { color:var(--danger); }

/* ===== スタッフ（個人別パスワード） ===== */
.whoami { font-size:13px; font-weight:700; color:var(--accent2); white-space:nowrap; padding:0 8px; }
.stf-row .snm { flex:1 1 90px; min-width:0; }
.stf-row .spin { flex:0 0 76px; min-width:0; text-align:center; letter-spacing:.18em; }
.stf-chk { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--sub); white-space:nowrap; }
.stf-chk input[type=checkbox] { width:18px; height:18px; flex:0 0 auto; padding:0; margin:0; }
.stf-off { opacity:.5; }

/* ===== 画像（ロゴ・マスコット・店内写真） ===== */
.sub-head { margin-top:14px; }
.img-slot { display:flex; align-items:center; justify-content:center; min-height:96px; padding:8px;
  background:var(--card2); border:1px solid var(--line); border-radius:10px; margin-bottom:6px; overflow:hidden; }
.img-slot img { max-width:100%; max-height:150px; height:auto; object-fit:contain; }
.img-slot.sm { min-height:56px; width:84px; flex:0 0 84px; margin:0; padding:4px; }
.img-slot.sm img { max-height:52px; }
.img-none { color:var(--sub); font-size:13px; }
.photo-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.photo-row .mini { flex:0 0 auto; width:40px; }
.photo-row .del-chg { flex:0 0 auto; width:40px; height:40px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--danger); }

/* ===== メニューの多言語欄 ===== */
.ml-row { background:var(--card2); opacity:.92; }
.ml-row .cat { flex:0 0 28px; font-size:11px; color:var(--sub); }
.ml-row input { flex:1; min-width:0; font-size:14px; }

/* ===== 店サイトのボタンの並び ===== */
.sl-row .sl-name { flex:1; min-width:0; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sl-row .lt { flex:1; min-width:0; font-size:14px; }
.sl-row .mini { flex:0 0 auto; width:38px; }
.sl-row .del-chg { flex:0 0 auto; width:38px; height:40px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--danger); }
.sl-row .stf-chk { flex:0 0 auto; }

/* ===== 会計済み伝票のロック ===== */
.closed-lock { border-color:var(--accent); background:var(--card2); }
.cl-head { font-size:15px; font-weight:700; color:var(--accent); margin-bottom:6px; }
#page-register input:disabled, #page-register select:disabled,
#page-register textarea:disabled, #page-register button:disabled { opacity:.45; }

/* ===== 月次の〆（A4・印刷してPDF保存）2026-08-09 =====
   画面ではふつうの全画面オーバーレイ。印刷のときだけ #pdf-paper の中身だけを紙に出す。
   ★紙は白・文字は黒で固定する（テーマが黒地でもインクを食わない・コピーしても読める）。 */
#pdfsheet { position:fixed; inset:0; z-index:60; background:var(--bg); overflow:auto; }
.pdf-bar { position:sticky; top:0; z-index:2; display:flex; gap:8px; padding:10px;
           background:var(--card); border-bottom:1px solid var(--line); }
.pdf-bar button { flex:1; }
.pdf-paper { max-width:820px; margin:12px auto; padding:22px 26px; background:#ffffff; color:#1a1a1a;
             border-radius:4px; box-shadow:0 2px 14px rgba(0,0,0,.25); font-size:13px; line-height:1.5; }
.pdf-paper * { color:inherit; }
.pdf-h1 { font-size:22px; font-weight:700; letter-spacing:.06em; margin:0; }
.pdf-sub { font-size:12px; color:#6b7280; margin:2px 0 0; }
.pdf-head { display:flex; justify-content:space-between; align-items:flex-end;
            border-bottom:2px solid #1a1a1a; padding-bottom:8px; margin-bottom:16px; }
.pdf-kpi { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px; }
/* ★grid の子は既定で「中身より小さくならない」ので、金額が長いと紙ごと横にはみ出す。
   min-width:0 を入れて、狭い画面では縮んで折り返すようにする。 */
.pdf-kpi > div, .pdf-2col > div { min-width:0; }
.pdf-kpi div { border:1px solid #d8dce2; border-radius:6px; padding:8px 10px; }
.pdf-kpi b { display:block; font-size:18px; font-weight:700; }
.pdf-kpi span { font-size:10px; color:#6b7280; letter-spacing:.04em; }
.pdf-kpi .big { font-size:20px; }
.pdf-net { border:2px solid #1a1a1a !important; }
.pdf-sec { font-size:12px; font-weight:700; letter-spacing:.08em; color:#374151;
           border-bottom:1px solid #d8dce2; padding-bottom:4px; margin:16px 0 8px; }
.pdf-2col { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
table.pdf-t { width:100%; border-collapse:collapse; font-size:12px; }
table.pdf-t th, table.pdf-t td { padding:4px 6px; border-bottom:1px solid #e6e9ee; text-align:right; }
table.pdf-t th { font-size:10px; color:#6b7280; font-weight:600; border-bottom:1px solid #b8bec7; }
table.pdf-t th:first-child, table.pdf-t td:first-child { text-align:left; }
table.pdf-t tr.sum td { font-weight:700; border-top:1.5px solid #1a1a1a; border-bottom:0; }
.pdf-foot { margin-top:18px; padding-top:8px; border-top:1px solid #d8dce2; font-size:10px; color:#6b7280; }
.pdf-empty { font-size:12px; color:#6b7280; padding:6px 0; }

@media print {
  @page { size:A4 portrait; margin:12mm; }
  body { background:#fff !important; }
  body > *, #app { display:none !important; }
  #pdfsheet { display:block !important; position:static; overflow:visible; background:#fff; }
  .pdf-bar { display:none !important; }
  .pdf-paper { max-width:none; margin:0; padding:0; box-shadow:none; border-radius:0; }
  .pdf-sec, .pdf-kpi, table.pdf-t { break-inside:avoid; }
  tr { break-inside:avoid; }
}

/* ===== 見るのは誰でも／変えるのは管理者（2026-08-09）=====
   通常パスワードを廃止したので、変更する操作は画面からも隠す。
   ★これは押し間違いを防ぐための見た目で、実際の判定はサーバー側（worker.js）でしている。 */
body:not(.is-admin) [data-adminonly] { display:none !important; }
/* ★導入モード＝CSVの「読み込み」を出す隠しモード。URLに ?setup=1 を付けたときだけ出る。
   ホーム画面のアイコンは素のURLで開くので、普段の営業では絶対に出ない（2026-08-21）。 */
body:not(.is-setup) [data-setuponly] { display:none !important; }
#setup-bar { background:var(--danger); color:#fff; text-align:center; font-size:12px; padding:4px; font-weight:600; }
body.is-admin #menu-viewonly, body.is-admin #closed-adminonly { display:none; }
/* メニュー設定は「見えるが触れない」にする（何が登録されているかは見せたいため） */
body:not(.is-admin) #page-menu input,
body:not(.is-admin) #page-menu select,
body:not(.is-admin) #page-menu button { pointer-events:none; opacity:.45; }
/* 月次の〆：経費の大分類（太字の見出し行）とその下の摘要 */
table.pdf-t tr.gsum td { border-top:1px solid #b8bec7; }
table.pdf-t tr.gsub td { color:#5b636e; border-bottom:1px dotted #e6e9ee; }

/* ===== 月次の〆：スマホで見るとき（画面だけ・印刷には効かない）=====
   紙の幅(820px)のままだと、スマホでは右端の「収支」が切れて横スクロールになる。 */
@media screen and (max-width: 760px) {
  .pdf-paper { padding:16px 14px; margin:8px; font-size:12px; }
  .pdf-kpi { grid-template-columns:1fr 1fr; gap:6px; margin-bottom:12px; }
  .pdf-kpi b { font-size:16px; }
  .pdf-kpi .big { font-size:17px; }
  .pdf-kpi span { font-size:9px; }
  .pdf-2col { grid-template-columns:1fr; gap:0; }
  .pdf-h1 { font-size:18px; }
  table.pdf-t { font-size:11px; }
  table.pdf-t th, table.pdf-t td { padding:3px 4px; }
}
/* 金額は途中で折り返さない（¥17/5,000 のような無様な折れ方を防ぐ）。名前や摘要だけ折り返す。 */
table.pdf-t td + td, table.pdf-t th + th { white-space:nowrap; }
table.pdf-t td:first-child { word-break:break-word; }
#pdfsheet { overflow-x:hidden; }   /* 紙ごと横に動かさない */

/* サイン写真の「見る」ボタン：管理として入っていないときは押せない見た目にする */
.sign-view:disabled { opacity:.4; cursor:not-allowed; }

/* サイン写真の拡大表示（画面に重ねる） */
#sign-viewer { position:fixed; inset:0; z-index:9999; background:#000; padding:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
#sign-viewer.hidden { display:none; }
#sign-viewer-body { flex:1; width:100%; min-height:0; display:flex; align-items:center;
  justify-content:center; overflow:auto; color:#eee; text-align:center; line-height:1.7; }
#sign-viewer-body img { max-width:100%; max-height:100%; object-fit:contain; }
#sign-viewer-close { margin-top:12px; width:100%; max-width:420px; padding:14px; font-size:17px; }

/* アコーディオン：見出しを押すと中身を開閉する（項目が多い画面用・2026-08-18） */
.acc > .acc-head { cursor:pointer; user-select:none; }
.acc > .acc-head::after { content:'▾'; margin-left:8px; opacity:.55; font-size:13px; }
.acc.collapsed > .acc-head::after { content:'▸'; }
.acc.collapsed > *:not(.acc-head) { display:none !important; }

/* 閉じているアコーディオンを2列のタイルに並べる（2026-08-18）
   ・閉じたタイルだけ2列。開いたものは横いっぱいに広がって中身を出す
   ・題名は2行まで折り返し、タイルの高さを揃える */
.page-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:start; }
.page-grid > * { grid-column:1 / -1; }
.page-grid > .card { margin-bottom:0; }
.page-grid > .acc.collapsed { grid-column:auto; }
.page-grid > .acc.collapsed:not(.card) { border:1px solid var(--line); border-radius:10px; padding:10px; }
.page-grid > .acc.collapsed > .acc-head {
  flex-wrap:wrap; align-items:flex-start; font-size:13px; line-height:1.35;
  min-height:2.7em; margin:0; word-break:break-word;
}
.page-grid > .acc.collapsed > .acc-head > span { white-space:normal; }
.page-grid > .acc.collapsed > .acc-head::after { margin-left:auto; }

/* カテゴリ設定の1行（名前／🔒／編集／削除／↑／↓）2026-08-18 */
.mc-row { display:flex; align-items:center; gap:5px; margin-bottom:6px; }
.mc-row .nm { flex:1; font-size:14px; word-break:break-word; }
.mc-row .lk { display:flex; align-items:center; gap:2px; font-size:14px; }
.mc-row .lk input { width:18px; height:18px; }
.mc-row button { padding:8px 9px; font-size:12px; border-radius:8px; border:1px solid var(--line); background:var(--card2); color:var(--txt); }
.mc-row button.del { color:var(--danger); }
/* カテゴリ削除の確認（画面の中に出す。ブラウザのダイアログに頼らない） */
.mc-row.mc-ask { background:var(--card2); border:1px solid var(--danger); border-radius:8px; padding:6px 8px; }
.mc-row.mc-ask .nm { font-size:13px; }
.medit button.mv { width:32px; color:var(--txt); }
/* カテゴリー追加／編集：選択中のボタンに色を付ける */
#mc-add.on, #mc-edit.on { background:var(--accent2); border-color:var(--accent2); color:#fff; font-weight:600; }
/* 自分のタイムカード／売上の一覧（2026-08-18） */
.tcv-head, .tcv { display:grid; grid-template-columns:1.3fr 1fr 1fr .8fr 1.2fr; gap:4px; font-size:12px; padding:5px 0; border-bottom:1px solid var(--line); }
.tcv-head { color:var(--sub); font-size:11px; }
.tcv span:not(:first-child), .tcv-head span:not(:first-child) { text-align:right; }
.tcv.v3, .tcv-head.v3 { grid-template-columns:1.4fr 1fr 1.4fr; }
/* 紹介料のまとめ計上の一覧（2026-08-28）。日付・顧客名・紹介者・金額の4列。
   ⚠ `.v4` は #me-sales の中だけの指定なのでここでは使えない（使うと5列の既定に落ちる）。 */
#ref-todo .tcv, #ref-todo .tcv-head { grid-template-columns:0.9fr 1.2fr 1.2fr 0.9fr; }
/* 集計→紹介料の「この月の紹介の伝票」も同じ4列（日付・顧客名・紹介者・紹介料）2026-08-28 */
/* 6列：日付／顧客名／紹介者／金額／📒／📸（2026-08-28）。ボタン2つは固定幅で細く */
#dash-ref-list .tcv, #dash-ref-list .tcv-head { grid-template-columns:0.85fr 1.1fr 1.1fr 0.9fr 26px 30px; align-items:center; }
/* 自分の今月の「売上」＝日付・顧客名・人数・売上の4カラム（2026-08-25 ユーザー指定）
   ⚠ 素の 1fr だと列の最小幅が中身の幅になり、長い顧客名で横にはみ出す。必ず minmax(0,1fr)。 */
#me-sales .tcv-head.v4, #me-sales .tcv.v4 {
  grid-template-columns:minmax(0,1.2fr) minmax(0,1.7fr) minmax(0,.8fr) minmax(0,1.3fr);
}
/* ⚠ 見出しと値の両方に .cn を付けて寄せを揃える（2026-08-25 実測でズレていた）。
   .tcv-head span:not(:first-child) が右寄せなので、見出しだけ右・名前だけ左になっていた。 */
#me-sales .tcv .cn, #me-sales .tcv-head .cn { text-align:left; }
#me-sales .tcv .cn { color:var(--txt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 売上月報のスタッフ＝支給予定額。桁が多いときは自動で縮める（2026-08-25）
   ⚠ 以前は HTML に style="font-size:18px" を直書きしていたので、この自動縮小が効かなかった。 */
.mcard .val.staff-net { font-size:18px; flex:0 0 auto; }
/* ⚠ flex:0 0 auto が肝（2026-08-25 実測）。これが無いと金額側が縮められて
   6桁でも 要90px／枠85px で切れた。金額は縮ませず、左のラベルを折り返させる。 */
.mcard .val.staff-net.long { font-size:clamp(11px, 3.6vw, 15px); letter-spacing:-0.5px; }
.mcard .val.staff-net.xlong { font-size:clamp(10px, 3.2vw, 13px); letter-spacing:-0.6px; }
/* タイムカードの入口ボタン：選択中に色を付ける */
#tm-nav-roster.on, #tm-nav-help.on, #tm-nav-edit.on, #tm-nav-pay.on,
#pay-nav-base.on, #pay-nav-cast.on, #pay-nav-bonus.on { background:var(--accent2); border-color:var(--accent2); color:#fff; font-weight:600; }
#sg-store.on,#sg-site.on,#sg-ref.on,#sg-detail.on,#eg-now.on,#eg-past.on,#eg-cat.on { background:var(--accent2); border-color:var(--accent2); color:#fff; font-weight:600; }
/* 経費：種別ごとの見出し */
.exp-cat-h { display:flex; justify-content:space-between; align-items:center; color:var(--accent); font-size:13px; font-weight:600; margin:10px 0 4px; padding-bottom:3px; border-bottom:1px solid var(--line); }
.te-edit { background:var(--card2); border:1px solid var(--line); border-radius:8px; padding:8px; margin:-2px 0 8px; }
#te-today.on, #te-day.on { background:var(--accent2); border-color:var(--accent2); color:#fff; font-weight:600; }
#dg-rep.on,#dg-pay.on,#dg-ref.on,#dg-sum.on,#dg-year.on,#dg-report.on,#dg-cash.on { background:var(--accent2); border-color:var(--accent2); color:#fff; font-weight:600; }
/* メンバーリストの並び替えボタン（2026-08-25）。押している1つだけ色が付く。 */
/* 契約していない機能は下ナビから消す（2026-08-28）。
   ⚠ .hidden を使うと paintNav の出し分けと喧嘩するので専用クラスにした。 */
#botnav button.feat-off { display:none !important; }

/* 担当で絞り込む（2026-08-28）。選んでいる間だけ色が付く。 */
#c-staff-filter.on { border-color:var(--accent); color:var(--accent); font-weight:700; }

/* メンバーリストの並び替えは4つ（2026-08-28 誕生日を追加）。
   ⚠ 素の 1fr だと列の最小幅が文字幅になり、375px で横にはみ出す。必ず minmax(0,1fr)。 */
.cust-sort { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; }
.cust-sort .mini { padding:6px 2px; font-size:11px; white-space:nowrap;
                   overflow:hidden; text-overflow:ellipsis; }
#cs-last.on,#cs-visits.on,#cs-spend.on,#cs-bday.on { background:var(--accent2); border-color:var(--accent2); color:#fff; font-weight:600; }
/* ログイン／ログアウトは細く */
button.slim { padding:7px 10px; font-size:13px; min-height:0; line-height:1.2; }
#tm-nav-dpay.on { background:var(--accent2); border-color:var(--accent2); color:#fff; font-weight:600; }

/* ===== 勤怠編集のカレンダー（2026-08-28 ユーザー指定）=====
   ★日を押すだけでその日の出勤が下に開く。管理者だけの画面。
   ⚠ 7列。狭い画面でも1マスが押せる大きさ（44px前後）を確保する。 */
.te-cal-head { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:6px; }
.te-cal-head #te-cal-title { font-weight:700; font-size:15px; }
#te-cal { display:grid; grid-template-columns:repeat(7, 1fr); gap:3px; }
.te-cal-w { text-align:center; font-size:11px; color:var(--sub); padding:2px 0; }
.te-cal-c { min-height:42px; border:1px solid var(--line); border-radius:8px; background:var(--card2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; cursor:pointer; }
.te-cal-c .d { font-size:13px; }
.te-cal-c .n { font-size:10px; color:var(--sub); white-space:nowrap; }
.te-cal-c.has { background:var(--card); border-color:var(--accent2); }
.te-cal-c.has .n { color:var(--txt); }
.te-cal-c.today { font-weight:700; }
.te-cal-c.on { border-color:var(--accent); border-width:2px; }
.te-cal-c.te-cal-empty { border:0; background:transparent; cursor:default; min-height:0; }
/* よく使う時刻のボタン。⚠ 押しても入れるだけ（確定するまで保存しない） */
.te-qrow { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:6px; }
.te-q { padding:3px 8px; border:1px solid var(--line); border-radius:6px; background:var(--card);
  color:var(--txt); font-size:12px; min-height:0; }

/* ===== パステルカラフル（iPhone風の清潔な白）2026-10-22 =====
   ★ねらい＝「白ベース・パステルの水色／ピンク／緑／オレンジ」を、iPhoneの設定アプリのような清潔感で。
     見た目の元＝RDStaffAPP（rd-staff.sakurai.info）：薄いグレーの地に白い角丸カード・長くやわらかい影・SF系フォント・セグメント型の切替。
   ★このテーマを選んだ店だけに効く（下の指定は全部 body[data-theme="pastel"] 付き＝他のテーマ・他の店は1ピクセルも変わらない）。
   ★パステルは「面」（ボタン・札・帯）に使い、文字に使う色は濃いめ（--accent など）にして、明るい店内でも読めるようにしてある。 */
body[data-theme="pastel"] { --bg:#f4f6fa; --card:#ffffff; --card2:#f2f4f9; --line:#e4e8f0; --txt:#1f2430; --sub:#6b7486;
  --accent:#cf5a8c; --accent2:#3f8fbf; --ok:#2f9e72; --danger:#e0607a; --onacc:#5a1838;
  --pay-cash:#c8691b; --pay-card:#1f8f57; --pay-cred:#c2457a;
  --pk:#f7b8d0; --bl:#a9daf0; --gr:#a8e0bd; --og:#fbcf9f;
  /* ★つや（光沢）＝上半分にうすい白の照り＋上から下へ明るい→濃いの3段。ピンク・水色・緑の3色。
     ⚠ 照りは background の1層（疑似要素にしない＝ボタンの文字の上に重ならない）。斜めの光は使わない（縦のグラデだけ）。 */
  --gloss-pink:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.06)) top/100% 52% no-repeat,linear-gradient(180deg,#fde4ee,#f7b8d0 56%,#f0a0c0);
  --gloss-blue:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.06)) top/100% 52% no-repeat,linear-gradient(180deg,#e2f4fc,#a9daf0 56%,#8ac6e4);
  --gloss-green:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.06)) top/100% 52% no-repeat,linear-gradient(180deg,#e4f7ec,#a8e0bd 56%,#86cfa4); }
body[data-theme="pastel"] { font-family:-apple-system,"SF Pro Text","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif; -webkit-font-smoothing:antialiased; }
body[data-theme="pastel"] input, body[data-theme="pastel"] select, body[data-theme="pastel"] button, body[data-theme="pastel"] textarea { font-family:inherit; }
/* 上の帯＝すりガラス風の白＋ごく細い4色のライン */
body[data-theme="pastel"] #topbar { background:rgba(255,255,255,.86); -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid rgba(60,70,100,.08); }
body[data-theme="pastel"] #topbar::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg,var(--pk),var(--bl),var(--gr)); }
body[data-theme="pastel"] #storeName { font-weight:700; letter-spacing:.01em; }
/* 上の帯は【画面に固定】（2026-10-22）。本文はこの高さぶん下げる。
   ⚠ 固定にしたのは #topbar 自身だけ（先祖に transform を付けない＝iOSで fixed が壊れるため）。 */
body[data-theme="pastel"] #topbar { position:fixed; top:0; left:0; right:0; max-width:720px; margin:0 auto; height:50px; box-sizing:border-box; z-index:8;
  padding-top:env(safe-area-inset-top); height:calc(50px + env(safe-area-inset-top)); transform:translateZ(0); -webkit-transform:translateZ(0); }
body[data-theme="pastel"] #app { padding-top:calc(50px + env(safe-area-inset-top)); padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
body[data-theme="pastel"] #saveState { display:none; }
body[data-theme="pastel"] .whoami { color:#8a2f57; background:#fde4ee; border-radius:999px; padding:3px 10px; font-size:12px; }
/* 上の帯のプリンタのアイコン＝緑（生きている）／灰（まだ分からない・繋いでいない）／赤（応答なし） */
#hd-prn { display:none; }
body[data-theme="pastel"] #hd-prn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:11px; background:#f2f4f9; color:#a3abba; margin:0 6px; }
body[data-theme="pastel"].prn-ok #hd-prn { background:#e2f5e9; color:#1f8f57; }
body[data-theme="pastel"].prn-bad #hd-prn { background:#fde8ec; color:#e0607a; }
/* カード＝白い角丸＋長くやわらかい影（枠線は消す） */
body[data-theme="pastel"] .card, body[data-theme="pastel"] .cust { border:0; border-radius:18px; box-shadow:0 10px 26px -18px rgba(40,40,80,.45); }
body[data-theme="pastel"] .card { padding:14px; margin-bottom:12px; }
body[data-theme="pastel"] .bill-head { font-weight:700; letter-spacing:.01em; }
body[data-theme="pastel"] .bill-head::before { content:""; display:inline-block; width:4px; height:15px; border-radius:2px; background:var(--pk); margin-right:8px; vertical-align:-2px; }
body[data-theme="pastel"] .bill-head > span { flex:1; }
/* 入力欄＝薄いグレーの角丸。触ると水色の光 */
body[data-theme="pastel"] input, body[data-theme="pastel"] select, body[data-theme="pastel"] .cust textarea { background:var(--card2); border:1px solid transparent; border-radius:12px; padding:11px 12px; }
body[data-theme="pastel"] input:focus, body[data-theme="pastel"] select:focus { background:#fff; border-color:var(--bl); box-shadow:0 0 0 4px rgba(169,218,240,.45); }
/* ボタン＝一番やってほしい操作はピンクの面。ほかは白＋細い線 */
body[data-theme="pastel"] .primary { border-radius:16px; background:var(--gloss-pink); color:var(--onacc); letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 8px -4px rgba(190,70,120,.35), 0 12px 20px -12px rgba(226,110,160,.85); }
body[data-theme="pastel"] .primary:disabled { background:#eceff5; color:#a3abba; box-shadow:none; }
body[data-theme="pastel"] .primary.danger-btn { background:var(--danger); color:#fff; box-shadow:none; }
body[data-theme="pastel"] .ghost, body[data-theme="pastel"] .mini { background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 1px 2px rgba(40,50,80,.05); }
body[data-theme="pastel"] .stepper button, body[data-theme="pastel"] .bline .ctrl button { background:#fff; border-color:var(--line); box-shadow:0 1px 2px rgba(40,50,80,.08); }
/* カテゴリのタブ＝4色のパステルの丸ボタン。選んでいるものは濃い字＋同色の輪 */
body[data-theme="pastel"] .cat-tabs { gap:8px; padding:2px 2px 8px; scrollbar-width:none; }
body[data-theme="pastel"] .cat-tabs::-webkit-scrollbar { display:none; }
body[data-theme="pastel"] .cat-tabs button { border-radius:999px; padding:8px 14px; font-weight:600; border:1px solid transparent; }
body[data-theme="pastel"] .cat-tabs button:nth-child(3n+1) { background:#fde4ee; color:#8a2f57; }
body[data-theme="pastel"] .cat-tabs button:nth-child(3n+2) { background:#e1f2fb; color:#1d5877; }
body[data-theme="pastel"] .cat-tabs button:nth-child(3n+3) { background:#e2f5e9; color:#1f6a43; }
body[data-theme="pastel"] .cat-tabs button.active { font-weight:800; box-shadow:0 0 0 2px currentColor inset, 0 6px 12px -8px currentColor; }
/* 品目ボタン・セット枠・チャージ＝白いタイル */
body[data-theme="pastel"] .mbtn, body[data-theme="pastel"] .setbox { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 6px 14px -12px rgba(40,40,80,.5); }
body[data-theme="pastel"] .mbtn:active { transform:scale(.98); background:#fff6fa; }
body[data-theme="pastel"] .chg { background:#fff; border-radius:999px; }
body[data-theme="pastel"] .chg.on { background:#fde4ee; border-color:var(--pk); color:#8a2f57; font-weight:700; }
/* 切替ボタン（.on）＝セグメント風：選んでいる側がパステルの水色の面 */
body[data-theme="pastel"] #mc-add.on, body[data-theme="pastel"] #mc-edit.on,
body[data-theme="pastel"] #pay-nav-base.on, body[data-theme="pastel"] #pay-nav-cast.on, body[data-theme="pastel"] #pay-nav-bonus.on,
body[data-theme="pastel"] #sg-store.on, body[data-theme="pastel"] #sg-site.on, body[data-theme="pastel"] #sg-ref.on, body[data-theme="pastel"] #sg-detail.on,
body[data-theme="pastel"] #eg-now.on, body[data-theme="pastel"] #eg-past.on, body[data-theme="pastel"] #eg-cat.on,
body[data-theme="pastel"] #te-today.on, body[data-theme="pastel"] #te-day.on,
body[data-theme="pastel"] #dg-rep.on, body[data-theme="pastel"] #dg-pay.on, body[data-theme="pastel"] #dg-ref.on, body[data-theme="pastel"] #dg-sum.on, body[data-theme="pastel"] #dg-year.on, body[data-theme="pastel"] #dg-report.on, body[data-theme="pastel"] #dg-cash.on,
body[data-theme="pastel"] #cs-last.on, body[data-theme="pastel"] #cs-visits.on, body[data-theme="pastel"] #cs-spend.on, body[data-theme="pastel"] #cs-bday.on,
body[data-theme="pastel"] #tm-nav-dpay.on { background:var(--gloss-blue); border-color:#8ac6e4; color:#14425e; font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 14px -10px rgba(60,140,190,.85); }
/* 札（営業中／会計済）＝緑とオレンジのパステル */
body[data-theme="pastel"] .badge { border-radius:999px; padding:2px 10px; font-weight:700; }
body[data-theme="pastel"] .badge.open { background:#dff3e7; color:#14663c; border:1px solid #b7e0c8; }
body[data-theme="pastel"] .badge.closed { background:#fef0df; color:#8a4e12; border:1px solid #f7d5a8; }
/* ===== 下のメニュー＝iPhoneのタブバー（アイコン＋小さな文字・2026-10-22）=====
   ★元の文字ボタン（#botnav・8個3段）は隠す（中身は消さない＝ページ切替の仕組みと「いまどのページか」の印はそのまま使う）。
   ★アイコンの棒（#ptabs）と「管理」の板（#pmore）は app.js が作る。パステル以外のテーマでは両方とも出ない。 */
body[data-theme="pastel"] #botnav { display:none; }
#ptabs, #pmore { display:none; }
body[data-theme="pastel"] #ptabs { position:fixed; left:0; right:0; bottom:0; z-index:7; display:grid; max-width:720px; margin:0 auto;
  padding:6px 8px calc(8px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.92); -webkit-backdrop-filter:saturate(1.6) blur(16px); backdrop-filter:saturate(1.6) blur(16px);
  border-top:1px solid rgba(60,70,100,.1); box-shadow:0 -10px 26px -22px rgba(40,40,80,.6); transform:translateZ(0); -webkit-transform:translateZ(0); }
body[data-theme="pastel"] #ptabs::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg,var(--pk),var(--bl),var(--gr)); }
body[data-theme="pastel"] #ptabs .pt { border:0; background:transparent; color:#7a8497; display:flex; flex-direction:column; align-items:center; gap:2px; padding:2px 0 0; min-width:0; }
body[data-theme="pastel"] #ptabs .pt-i { width:54px; height:32px; border-radius:16px; display:flex; align-items:center; justify-content:center; }
body[data-theme="pastel"] #ptabs .pt-t { font-size:11px; font-weight:600; line-height:1.2; white-space:nowrap; }
body[data-theme="pastel"] #ptabs .pt.on { color:#a93d6c; }
body[data-theme="pastel"] #ptabs .pt.on .pt-i { background:var(--gloss-pink); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 6px -3px rgba(190,70,120,.35), 0 8px 14px -9px rgba(226,110,160,.9); }
body[data-theme="pastel"] #ptabs .pt:active { transform:scale(.94); }
/* 「管理」を押したときに下から出る板＝つやのあるアイコンタイル（ピンク・水色・緑） */
body[data-theme="pastel"] #pmore:not(.hidden) { display:block; position:fixed; inset:0; z-index:9; }
body[data-theme="pastel"] #pmore .pm-bg { position:absolute; inset:0; background:rgba(31,36,48,.3); }
body[data-theme="pastel"] #pmore .pm-sheet { position:absolute; left:0; right:0; bottom:calc(66px + env(safe-area-inset-bottom)); max-width:720px; margin:0 auto; background:#ffffff; border-radius:24px 24px 0 0; padding:12px 16px 18px; box-shadow:0 -16px 40px -20px rgba(40,40,80,.55); }
body[data-theme="pastel"] #pmore .pm-grab { width:38px; height:4px; border-radius:2px; background:#d6dbe6; margin:0 auto 12px; }
body[data-theme="pastel"] #pmore .pm-h { font-size:15px; font-weight:700; margin:0 2px 10px; color:#1f2430; }
body[data-theme="pastel"] #pmore .pm-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
body[data-theme="pastel"] #pmore .pm-tile { border:0; border-radius:20px; padding:16px 14px 14px; text-align:left; display:flex; flex-direction:column; gap:10px; min-height:96px; justify-content:space-between; }
body[data-theme="pastel"] #pmore .pm-tile .pm-ic { width:40px; height:40px; border-radius:14px; background:rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 6px 10px -6px rgba(40,50,90,.35); }
body[data-theme="pastel"] #pmore .pm-tile .pm-tx { font-size:14px; font-weight:700; }
body[data-theme="pastel"] #pmore .pm-tile:active { transform:scale(.97); }
body[data-theme="pastel"] #pmore .pm-pink  { background:var(--gloss-pink);  color:#8a2f57; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 12px 20px -14px rgba(226,110,160,.9); }
body[data-theme="pastel"] #pmore .pm-blue  { background:var(--gloss-blue);  color:#14425e; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 12px 20px -14px rgba(60,140,190,.9); }
body[data-theme="pastel"] #pmore .pm-green { background:var(--gloss-green); color:#17573a; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 12px 20px -14px rgba(50,150,100,.9); }
/* ===== 起動中の画面（スプラッシュ）と、ふだんの小さな動き（2026-10-22）=====
   ★再読み込みで一瞬黒い画面が出る件の対処。サーバーが最初から白い画面で返し（worker.js の serveAsset）、
     起動を終えるまでの間、やわらかい動き（パステルの光がゆっくり漂う・店名に艶が流れる・3つの点が順に光る）を出す。
   ★動くのは transform / opacity が中心（軽い）。「動きを減らす」設定の端末では全部止める（下の media）。
   ★パステル以外のテーマでは #splash 自体が出ない（display:none）。 */
#splash { display:none; }
body[data-theme="pastel"] #splash { display:flex; position:fixed; inset:0; z-index:90; background:#f4f6fa; align-items:center; justify-content:center; flex-direction:column; gap:22px; overflow:hidden;
  transition:opacity .5s ease, visibility 0s linear .5s; }
body[data-theme="pastel"].ready #splash { opacity:0; visibility:hidden; pointer-events:none; }
body[data-theme="pastel"] #splash .sp-orbs i { position:absolute; width:62vmax; height:62vmax; border-radius:50%; opacity:.55; will-change:transform; }
body[data-theme="pastel"] #splash .sp-orbs i:nth-child(1) { left:-22vmax; top:-18vmax; background:radial-gradient(circle at 50% 50%,#f7b8d0 0%,rgba(247,184,208,0) 62%); animation:spDrift1 11s ease-in-out infinite alternate; }
body[data-theme="pastel"] #splash .sp-orbs i:nth-child(2) { right:-26vmax; top:6vmax; background:radial-gradient(circle at 50% 50%,#a9daf0 0%,rgba(169,218,240,0) 62%); animation:spDrift2 13s ease-in-out infinite alternate; }
body[data-theme="pastel"] #splash .sp-orbs i:nth-child(3) { left:-8vmax; bottom:-30vmax; background:radial-gradient(circle at 50% 50%,#a8e0bd 0%,rgba(168,224,189,0) 62%); animation:spDrift3 12s ease-in-out infinite alternate; }
body[data-theme="pastel"] #splash .sp-mark { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; animation:spIn .9s cubic-bezier(.2,.8,.2,1) both; }
body[data-theme="pastel"] #splash .sp-name { font-size:30px; font-weight:800; letter-spacing:.08em; color:#cf5a8c;
  background:linear-gradient(100deg,#d96b9a 0%,#d96b9a 38%,#ffffff 50%,#d96b9a 62%,#d96b9a 100%) 0 0/250% 100% no-repeat; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:spShine 2.6s ease-in-out infinite; }
body[data-theme="pastel"] #splash .sp-sub { font-size:12px; font-weight:700; letter-spacing:.42em; color:#8aa0b8; padding-left:.42em; }
body[data-theme="pastel"] #splash .sp-dots { position:relative; display:flex; gap:10px; }
body[data-theme="pastel"] #splash .sp-dots i { width:10px; height:10px; border-radius:50%; animation:spDot 1.2s ease-in-out infinite; }
body[data-theme="pastel"] #splash .sp-dots i:nth-child(1) { background:#f7b8d0; }
body[data-theme="pastel"] #splash .sp-dots i:nth-child(2) { background:#a9daf0; animation-delay:.18s; }
body[data-theme="pastel"] #splash .sp-dots i:nth-child(3) { background:#a8e0bd; animation-delay:.36s; }
@keyframes spDrift1 { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(9vmax,7vmax,0) scale(1.12); } }
@keyframes spDrift2 { from { transform:translate3d(0,0,0) scale(1.05); } to { transform:translate3d(-8vmax,9vmax,0) scale(.95); } }
@keyframes spDrift3 { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(8vmax,-8vmax,0) scale(1.1); } }
@keyframes spIn { from { opacity:0; transform:translate3d(0,10px,0); } to { opacity:1; transform:none; } }
@keyframes spShine { 0% { background-position:100% 0; } 60%,100% { background-position:0 0; } }
@keyframes spDot { 0%,100% { transform:scale(.6); opacity:.45; } 50% { transform:scale(1.15); opacity:1; } }
/* 上の帯のロゴと小さな文字（STAFF APP のような）＝白ベースのときだけ。ロゴが無ければ店名だけ（今までどおり）。
   ⚠ 他のテーマでは .hd-ttl を display:contents にして、店名の並びを今までと同じにしている。 */
.hd-logo, .hd-cap { display:none; }
.hd-ttl { display:contents; }
body[data-theme="pastel"] .hd-ttl { display:flex; flex-direction:column; justify-content:center; min-width:0; line-height:1.15; }
body[data-theme="pastel"] .top-left { align-items:center; gap:10px; }
body[data-theme="pastel"] .hd-logo[src] { display:block; flex:none; width:34px; height:34px; border-radius:11px; background:#fff; padding:3px; object-fit:contain;
  box-shadow:0 6px 12px -8px rgba(40,40,90,.55), inset 0 0 0 1px rgba(60,70,100,.08); }
body[data-theme="pastel"] .hd-logo.inv { filter:invert(1); }
body[data-theme="pastel"] .hd-cap:not(:empty) { display:inline-block; align-self:flex-start; margin-top:3px; font-size:9.5px; font-weight:700; letter-spacing:.2em; color:#8a2f57; background:#fde4ee; border-radius:999px; padding:1px 8px 1px 9px; }
/* 起動画面のロゴ（登録があれば店名の上に・ゆっくり浮く） */
body[data-theme="pastel"] #splash .sp-logo { display:block; width:92px; height:92px; border-radius:26px; background:#fff; padding:8px; object-fit:contain; margin-bottom:10px;
  box-shadow:0 16px 30px -16px rgba(40,40,90,.5), inset 0 0 0 1px rgba(60,70,100,.06); animation:spLogo 3.2s ease-in-out infinite alternate; }
body[data-theme="pastel"] #splash .sp-logo[hidden] { display:none; }
body[data-theme="pastel"] #splash .sp-logo.inv { filter:invert(1); }
@keyframes spLogo { from { transform:translate3d(0,0,0); } to { transform:translate3d(0,-5px,0); } }
/* ふだんの画面の小さな動き＝上の帯の線がゆっくり流れる／新規伝票とリピート来店のボタンに、ときどき光が走る */
body[data-theme="pastel"] #topbar::after { background:linear-gradient(90deg,var(--pk),var(--bl),var(--gr),var(--pk)) 0 0/200% 100%; animation:hdFlow 18s linear infinite; }   /* ★終わりの色＝始まりの色（ピンク）にして、流れて繰り返すときの継ぎ目（緑→ピンクのパッと変わる所）を無くした（2026-10-22） */
@keyframes hdFlow { from { background-position:0 0; } to { background-position:-200% 0; } }
body[data-theme="pastel"] #board-actions .primary.big { position:relative; overflow:hidden; }
body[data-theme="pastel"] #board-actions .primary.big::after { content:""; position:absolute; top:0; bottom:0; left:-40%; width:30%; pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.42),rgba(255,255,255,0)); transform:translateX(0) skewX(-20deg); opacity:0; animation:btnSheen 7s ease-in-out infinite; }
body[data-theme="pastel"] #btn-board-repeat::after { animation-delay:1.4s; }
@keyframes btnSheen { 0% { transform:translateX(0) skewX(-20deg); opacity:0; } 6% { opacity:1; } 22% { transform:translateX(560%) skewX(-20deg); opacity:1; } 24%,100% { transform:translateX(560%) skewX(-20deg); opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  body[data-theme="pastel"] #splash *, body[data-theme="pastel"] #topbar::after, body[data-theme="pastel"] #board-actions .primary.big::after { animation:none !important; }
}
/* ===== 伝票の「セット・指名」＝枠ごとの画面（2026-10-22 ユーザー指定）=====
   1枠目＝来店時間からのセット／2枠目以降＝延長。枠ごとに「セットの人数」と「指名（横にスライドして選ぶ）」。
   触れるのは一番後ろの枠だけ（前の枠は薄く・ボタンは押せない）。 */
.slot { border:1px solid var(--line); border-radius:14px; padding:10px 12px 12px; margin-bottom:10px; background:var(--card2); }
.slot.lockd { opacity:.62; }
.slot.now { border-color:var(--accent); }
.sl-h { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.sl-t { font-weight:800; font-size:14px; }
.sl-t small { font-weight:600; font-size:11px; color:var(--sub); margin-left:6px; }
.sl-tm { font-size:12px; color:var(--sub); font-weight:600; }
.sl-now { font-size:10.5px; font-weight:800; color:#fff; background:var(--accent); border-radius:999px; padding:0 8px; }
.sl-lock { margin-left:auto; font-size:13px; }
.sl-del { margin-left:auto; }
.sl-set { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-top:1px dashed var(--line); }
.sl-set:first-of-type { border-top:0; }
.sl-nm { font-size:14px; font-weight:700; display:flex; flex-direction:column; min-width:0; }
.sl-nm em { font-style:normal; font-size:11.5px; font-weight:600; color:var(--sub); }
.sl-nm i.incl { font-style:normal; font-size:10px; margin-left:6px; color:var(--sub); border:1px solid var(--line); border-radius:6px; padding:0 4px; }
.sl-st { display:inline-flex; align-items:center; gap:10px; flex:none; }
.sl-st b { min-width:40px; text-align:center; font-size:16px; }
.sl-st button { width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--txt); font-size:20px; }
.sl-st button:disabled { opacity:.35; }
.sl-nomi { margin-top:8px; border-top:1px dashed var(--line); padding-top:8px; }
.sl-nl { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; color:var(--sub); margin-bottom:6px; }
.sl-copy { margin-left:auto; font-size:11px; }
.sl-chips { display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding:2px 2px 6px; scrollbar-width:none; }
.sl-chips::-webkit-scrollbar { display:none; }
.sl-chips .nm-chip { flex:none; scroll-snap-align:start; }
.sl-add { width:100%; padding:11px; border:1px dashed var(--accent); border-radius:14px; background:transparent; color:var(--accent); font-weight:800; font-size:14px; }
body[data-theme="pastel"] .slot { border:0; background:#f7f9fc; box-shadow:inset 0 0 0 1px rgba(60,70,100,.07); }
body[data-theme="pastel"] .slot.now { box-shadow:inset 0 0 0 2px #f7b8d0; }
body[data-theme="pastel"] .sl-st button { background:#fff; box-shadow:0 2px 6px -3px rgba(40,50,80,.4); }
body[data-theme="pastel"] .sl-now { background:#f0a0c0; color:#5a1838; }
body[data-theme="pastel"] .sl-add { border:0; background:var(--gloss-blue); color:#14425e; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 14px -10px rgba(60,140,190,.85); }
/* ===== 指名のキャストのボタン（枠の中・横スライド） ===== */
.nm-row { margin:6px 0 12px; }
.nm-lbl { font-size:12px; font-weight:700; color:var(--sub); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.nm-lbl b { font-size:10.5px; font-weight:800; color:#fff; background:var(--accent); border-radius:999px; padding:0 7px; }
.nm-chips { display:flex; flex-wrap:wrap; gap:6px; }
.nm-chip:disabled { opacity:.5; }
.nm-chip { border:1px solid var(--line); background:var(--card2); color:var(--txt); border-radius:999px; padding:7px 13px; font-size:13px; font-weight:700; display:inline-flex; flex-direction:column; align-items:center; line-height:1.15; }
.nm-chip i { font-style:normal; font-size:10.5px; font-weight:600; color:var(--sub); }
.nm-chip.on { background:var(--accent); border-color:var(--accent); color:var(--onacc); }
.nm-chip.on i { color:inherit; opacity:.85; }
body[data-theme="pastel"] .nm-chip { background:#fff; }
body[data-theme="pastel"] .nm-chip.on { background:var(--gloss-pink); color:#5a1838; border-color:#f0a0c0; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 12px -9px rgba(226,110,160,.9); }
body[data-theme="pastel"] .nm-row.now .nm-lbl { color:#8a2f57; }
body[data-theme="pastel"] .nm-lbl b { background:#f0a0c0; color:#5a1838; }
/* ===== 卓ボードのカード：残り時間・新規/リピートの札・会計伝票印刷の3分割（2026-10-22）=====
   ★残り時間は設定（remain_on）がオンの店だけ（オフなら中身が空＝見えない）。札と3つのボタンはパステルの店だけ。 */
.tcard-tag, .tcard-acts { display:none; }
.tcard-rem { display:flex; flex-wrap:wrap; gap:4px; margin:4px 0 2px; }
.tcard-rem:empty { display:none; }
.rem { font-size:12px; font-weight:700; border-radius:999px; padding:2px 9px; background:rgba(226,80,74,.18); color:var(--danger); white-space:nowrap; }
.rem i { font-style:normal; font-weight:600; margin-right:5px; opacity:.85; }
.rem.over { background:var(--danger); color:#fff; }
/* 残り時間は枠なし・パステルの赤い文字だけ（2026-10-22 ユーザー指定）。超過もこの形（下で大きさだけ変える） */
body[data-theme="pastel"] .rem { background:none; border:0; padding:0; color:#c23a52; }
/* 清算済み一覧（2026-10-22 ユーザー指定）：サイン写真・精算伝票・旧「消去」は出さない。「伝票消去」は赤み、説明文のサイン写真の件も隠す */
body[data-theme="pastel"] #list-sign-hint { display:none; }
body[data-theme="pastel"] #list-wrap .rcpt-btn.rcpt-danger { border-color:#f1b9c3; color:#c23a52; }
/* 超過は枠なし・赤い文字だけ。大きさは金額と同じ（2026-10-22 ユーザー指定） */
body[data-theme="pastel"] .rem.over { background:none; border:0; padding:0; color:#d6455d; font-size:16px; font-weight:800; }
body[data-theme="pastel"] .tcard-name { display:flex; align-items:center; min-width:0; }
body[data-theme="pastel"] .tcard-nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
body[data-theme="pastel"] .tcard-sama { flex:none; margin-left:3px; font-size:11px; font-weight:600; color:var(--sub); align-self:flex-end; padding-bottom:2px; }
body[data-theme="pastel"] .tcard-tag { display:inline-block; font-size:11px; font-weight:800; border-radius:999px; padding:1px 8px; margin-right:6px; }
body[data-theme="pastel"] .tcard-tag.nw { background:#fde4ee; color:#a93d6c; }
body[data-theme="pastel"] .tcard-tag.rp { background:#e1f2fb; color:#1d5877; }
/* カードの並び：1段目＝卓・来店時間・人数／2段目＝札＋顧客名／3段目＝指名／4段目＝残り時間（左）と金額（右） */
body[data-theme="pastel"] .tcard-row.tc1 { display:flex; align-items:baseline; gap:8px; }
body[data-theme="pastel"] .tc1 .tcard-table { font-size:16px; font-weight:800; }
body[data-theme="pastel"] .tc1 .tcard-time { font-size:13px; font-weight:600; color:var(--sub); }
body[data-theme="pastel"] .tc1 .tcard-guests { margin-left:auto; font-size:16px; font-weight:800; color:var(--txt); }   /* 人数も卓番と同じ大きさ（2026-10-22 ユーザー指定） */
body[data-theme="pastel"] .tcard-nomi { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin:4px 0 2px; }
body[data-theme="pastel"] .tcard-nomi i { font-style:normal; font-size:11px; font-weight:800; color:#8a2f57; background:#fde4ee; border-radius:6px; padding:1px 7px; }
body[data-theme="pastel"] .tcard-nomi .nm { font-size:13px; font-weight:700; }
body[data-theme="pastel"] .tcard-nomi .none { font-size:12px; color:var(--sub); }
body[data-theme="pastel"] .tcard-row.tc4 { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:2px 8px; margin-top:4px; }   /* 幅が足りないとき（超過の分が3桁など）は金額が次の行へ＝文字が重ならない */
body[data-theme="pastel"] .tc4 .tcard-rem { flex:1; min-width:0; margin:0; }
body[data-theme="pastel"] .tc4 .tcard-rem:empty { display:block; }
body[data-theme="pastel"] .tc4 .tcard-amt { flex:none; font-size:16px; margin-left:auto; }
body[data-theme="pastel"] .tcard-print { display:none; }
body[data-theme="pastel"] .tcard-acts { display:grid; grid-template-columns:.9fr .9fr 1.3fr; gap:5px; margin-top:8px; }
body[data-theme="pastel"] .tcard-acts button { border:0; border-radius:12px; padding:9px 0; font-size:12px; font-weight:800; white-space:nowrap; min-width:0; }
body[data-theme="pastel"] .tcard-acts .ta-ext { background:var(--gloss-green); color:#17573a; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 12px -9px rgba(50,150,100,.9); }
body[data-theme="pastel"] .tcard-acts .ta-est { background:var(--gloss-blue);  color:#14425e; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 12px -9px rgba(60,140,190,.9); }
body[data-theme="pastel"] .tcard-acts .ta-chk { background:var(--gloss-pink);  color:#8a2f57; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 12px -9px rgba(226,110,160,.9); }
/* ===== 卓ボードの「新規伝票」と「リピート来店」（2026-10-22）=====
   ★リピート来店のボタンはパステルの店だけに出す（他のテーマでは今までどおり「新規伝票」1つ）。 */
#btn-board-repeat { display:none; }
body[data-theme="pastel"] #board-actions { display:grid; grid-template-columns:1.1fr 1fr; gap:10px; margin-top:10px; align-items:stretch; }
body[data-theme="pastel"] #board-actions .primary.big { margin-top:0; padding:0 8px; height:52px; font-size:15px; display:flex; align-items:center; justify-content:center; gap:7px; }
body[data-theme="pastel"] #btn-board-repeat { display:flex; background:var(--gloss-blue); color:#14425e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 8px -4px rgba(40,130,180,.35), 0 12px 20px -12px rgba(60,140,190,.85); }
body[data-theme="pastel"] #btn-board-repeat .rp-i { display:inline-flex; }
/* 立ち上げ画面の「リピート来店：お客様」の札 */
.nt-repeat { margin:0 0 10px; }
body[data-theme="pastel"] .nt-repeat { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; background:var(--gloss-blue); border-radius:16px; padding:10px 14px; color:#14425e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 14px -10px rgba(60,140,190,.7); }
body[data-theme="pastel"] .nt-repeat.hidden { display:none; }
body[data-theme="pastel"] .nt-rp-name { font-size:16px; font-weight:800; }
body[data-theme="pastel"] .nt-rp-sub { font-size:12px; font-weight:600; background:rgba(255,255,255,.65); border-radius:999px; padding:2px 10px; }
/* お客様の選択の窓（メンバーリスト）の行 */
body[data-theme="pastel"] .mp-row { border-radius:14px; background:#fff; margin-bottom:6px; box-shadow:0 4px 10px -8px rgba(40,40,80,.45); }
/* ===== 「伝票作成」＝下のメニューの左上に浮かぶボタン →「新規／リピート」（2026-10-22 ユーザー指定）=====
   ★卓ボードにいる間だけ（body の data-pg が board）。ボード上にあった「新規伝票を立てる」「リピート来店」の2つのボタンはこれに置き換える。 */
#fab-new, #fab-menu { display:none; }
body[data-theme="pastel"] #board-actions { display:none; }
body[data-theme="pastel"][data-pg="board"] #app { padding-bottom:calc(168px + env(safe-area-inset-bottom)); }
body[data-theme="pastel"][data-pg="board"] #fab-new { display:flex; position:fixed; left:14px; bottom:calc(80px + env(safe-area-inset-bottom)); z-index:8; align-items:center; gap:7px;
  border:0; height:50px; padding:0 20px 0 15px; border-radius:25px; background:var(--gloss-pink); color:#5a1838; font-size:15px; font-weight:800; letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 8px -4px rgba(190,70,120,.35), 0 14px 22px -12px rgba(226,110,160,.95); transform:translateZ(0); -webkit-transform:translateZ(0); }
body[data-theme="pastel"] #fab-new .fab-i { display:inline-flex; transition:transform .2s ease; }
body[data-theme="pastel"] #fab-new.open .fab-i { transform:rotate(45deg); }
body[data-theme="pastel"][data-pg="board"] #fab-menu:not(.hidden) { display:block; position:fixed; inset:0; z-index:9; }
body[data-theme="pastel"] #fab-menu .fm-bg { position:absolute; inset:0; background:rgba(31,36,48,.2); }
body[data-theme="pastel"] #fab-menu .fm-pop { position:absolute; left:14px; bottom:calc(80px + 50px + 12px + env(safe-area-inset-bottom)); width:min(270px, calc(100% - 28px)); display:flex; flex-direction:column; gap:10px; animation:fmIn .18s ease-out both; }
@keyframes fmIn { from { opacity:0; transform:translate3d(0,8px,0); } to { opacity:1; transform:none; } }
body[data-theme="pastel"] #fab-menu .fm-btn { display:flex; align-items:center; gap:12px; border:0; border-radius:22px; padding:12px 16px; text-align:left; }
body[data-theme="pastel"] #fab-menu .fm-new { background:var(--gloss-pink); color:#5a1838; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 14px 22px -14px rgba(226,110,160,.95); }
body[data-theme="pastel"] #fab-menu .fm-rp  { background:var(--gloss-blue); color:#14425e; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 14px 22px -14px rgba(60,140,190,.95); }
body[data-theme="pastel"] #fab-menu .fm-ic { flex:none; width:42px; height:42px; border-radius:15px; background:rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 6px 10px -6px rgba(40,50,90,.35); }
body[data-theme="pastel"] #fab-menu .fm-tx { display:flex; flex-direction:column; gap:1px; }
body[data-theme="pastel"] #fab-menu .fm-tx b { font-size:17px; font-weight:800; }
body[data-theme="pastel"] #fab-menu .fm-tx i { font-style:normal; font-size:11.5px; font-weight:600; opacity:.78; }
body[data-theme="pastel"] #fab-menu .fm-btn:active { transform:scale(.97); }
/* ===== 設定ページの「保存」を画面に追従＋変更があるあいだ、ゆっくり点滅（2026-10-22 ユーザー指定）=====
   ★保存ボタンのあるページ（店舗設定・給料設定・経費の設定・原価表）で、右下に浮かぶ。変更が無い間は白く「保存済み」、変更があるとピンクのつやで「変更を保存」＋ゆっくり点滅。
   ★本物の保存ボタン（ページの下のもの）も、変更があるあいだ同じようにゆっくり点滅する（.save-dirty）。点滅は opacity だけ（軽い）・「動きを減らす」端末では止める。 */
#fsave { display:none; }
body[data-theme="pastel"] #fsave:not(.hidden) { display:flex; position:fixed; right:14px; bottom:calc(80px + env(safe-area-inset-bottom)); z-index:8; align-items:center; gap:7px;
  height:50px; padding:0 18px 0 14px; border-radius:25px; border:0; font-size:15px; font-weight:800; letter-spacing:.02em; background:#fff; color:#5b6678;
  box-shadow:0 12px 22px -14px rgba(40,40,80,.55), inset 0 0 0 1px rgba(60,70,100,.1); transform:translateZ(0); -webkit-transform:translateZ(0); }
body[data-theme="pastel"] #fsave .fs-i { display:inline-flex; color:#2f9e72; }
body[data-theme="pastel"] #fsave.dirty { background:var(--gloss-pink); color:#5a1838; animation:fsBlink 2.6s ease-in-out infinite;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 8px -4px rgba(190,70,120,.35), 0 14px 22px -12px rgba(226,110,160,.95); }
body[data-theme="pastel"] #fsave.dirty .fs-i { color:#a93d6c; }
body[data-theme="pastel"] .save-dirty { animation:fsBlink 2.6s ease-in-out infinite; }
@keyframes fsBlink { 0%,100% { opacity:1; } 50% { opacity:.5; } }
body[data-theme="pastel"][data-fs="1"] #app { padding-bottom:calc(168px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { body[data-theme="pastel"] #fsave.dirty, body[data-theme="pastel"] .save-dirty { animation:none !important; } }
/* 通知・警告 */
body[data-theme="pastel"] .toast { background:rgba(31,36,48,.92); border-radius:14px; box-shadow:0 12px 26px -12px rgba(0,0,0,.5); }
body[data-theme="pastel"] .settle-btn { color:var(--txt) !important; }
/* 文字に使うピンク・青は、淡いと読めないので濃いめのまま（上の変数）。金額は特に濃く */
body[data-theme="pastel"] .tk-total, body[data-theme="pastel"] .tcard-amt, body[data-theme="pastel"] .board-sum { color:#b8457a; }

/* ===== パステルの店だけの出し分け・メンバー／清算済みの整理（2026-10-22 ユーザー指定）===== */
/* pst-only＝パステルの店だけに出る部品／pst-adminonly＝パステルの店では管理者だけに出る部品（他のテーマの店は何も変わらない） */
body:not([data-theme="pastel"]) .pst-only { display:none !important; }
body[data-theme="pastel"]:not(.is-admin) .pst-adminonly { display:none !important; }
/* 清算済み一覧の最上段（対象月〜読み込み）＝閉じて出す見出し */
body[data-theme="pastel"] #list-top-card > .bill-head { margin-bottom:0; }
body[data-theme="pastel"] #list-top-card:not(.collapsed) > .bill-head { margin-bottom:10px; }
/* メンバー：枠の右上の「編集」。押して管理パスワードが通ると「片づける」「メンバーCSV」が開く */
body[data-theme="pastel"] #c-card { position:relative; }
body[data-theme="pastel"] #c-edit { position:absolute; top:7px; right:10px; z-index:2; width:auto; min-height:0; margin:0; padding:3px 13px; font-size:11.5px; border-radius:999px; }
body[data-theme="pastel"] #c-card:not(.editing) .c-editable { display:none !important; }
body[data-theme="pastel"] #c-card.editing #c-edit { background:var(--gloss-pink); color:#5a1838; border-color:transparent; }
/* 担当で絞り込む＝2カラム（左＝選ぶ／右＝選んだ担当・×で外すと絞り込みも消える） */
body[data-theme="pastel"] .c-staffrow { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
body[data-theme="pastel"] .c-staffchip-col { display:flex; flex-direction:column; min-width:0; margin-bottom:8px; }
body[data-theme="pastel"] .c-staffchip-col > span { font-size:12px; color:var(--sub); }
body[data-theme="pastel"] #c-staff-chip { flex:1; display:flex; align-items:center; min-height:44px; min-width:0; }
body[data-theme="pastel"] .c-chip { display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:8px 12px; border:1px solid #f1b9c3; border-radius:999px; background:#fff0f3; color:#8f2a45; font-size:14px; font-weight:700; }
body[data-theme="pastel"] .c-chip b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
body[data-theme="pastel"] .c-chip i { font-style:normal; font-size:15px; line-height:1; opacity:.7; }
body[data-theme="pastel"] .c-chip-none { font-size:12px; color:var(--sub); }

/* ===== 伝票画面（パステルの店だけ・2026-10-22 ユーザー指定）===== */
/* 割引：入力の右に OK（パステルのときだけ出る） */
.disc-row { display:flex; gap:8px; align-items:center; }
.disc-row input { flex:1; min-width:0; }
body[data-theme="pastel"] #bill-discount-ok { flex:0 0 auto; min-width:68px; min-height:44px; font-size:15px; font-weight:800; color:#5a1838; background:var(--gloss-pink); border-color:transparent; }
/* 伝票カードの下＝「会計伝票印刷」と「清算」の2つだけ（割引後の伝票印刷・精算伝票印刷・伝票消去は出さない） */
body[data-theme="pastel"] .bill-btns { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
body[data-theme="pastel"] .bill-btns > .row2 { display:contents; }
body[data-theme="pastel"] .bill-btns > div { margin:0 !important; }
body[data-theme="pastel"] .bill-btns #btn-printbill-disc,
body[data-theme="pastel"] .bill-btns #btn-printsettle,
body[data-theme="pastel"] .bill-btns #btn-delete-ticket { display:none !important; }
body[data-theme="pastel"] .bill-btns #btn-printbill { width:100%; min-height:48px; margin:0; font-size:15px; font-weight:700; }
body[data-theme="pastel"] .bill-btns #btn-settle { width:100%; min-height:48px; margin:0; }
/* 上のカードを圧縮：日付・卓・来店＝1行／顧客名＋担当者＝1行／来店経緯・媒体＝そのまま／紹介者＝1行（DOMの順番は変えず grid の order で並べる） */
body[data-theme="pastel"] .pst-hide { display:none; }
body[data-theme="pastel"] #reg-top-card { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:6px 8px; padding:10px 12px; }
body[data-theme="pastel"] #reg-top-card > .row2 { display:contents; }
body[data-theme="pastel"] #reg-top-card .fld { margin:0; gap:2px; min-width:0; font-size:10.5px; }
body[data-theme="pastel"] #reg-top-card input, body[data-theme="pastel"] #reg-top-card select { min-height:38px; padding:6px 8px; font-size:14px; border-radius:10px; }
body[data-theme="pastel"] #reg-top-card .rt-date { grid-column:span 5; order:1; }
body[data-theme="pastel"] #reg-top-card .rt-table { grid-column:span 3; order:2; }
body[data-theme="pastel"] #reg-top-card .rt-time { grid-column:span 4; order:3; }
body[data-theme="pastel"] #reg-top-card .cust-wrap { grid-column:span 7; order:4; }
body[data-theme="pastel"] #reg-top-card #f-staff-wrap { grid-column:span 5; order:5; }
body[data-theme="pastel"] #reg-top-card:has(#f-staff-wrap.hidden) .cust-wrap { grid-column:span 12; }
body[data-theme="pastel"] #reg-top-card .rt-reason { grid-column:span 6; order:6; }
body[data-theme="pastel"] #reg-top-card .rt-media { grid-column:span 6; order:7; }
body[data-theme="pastel"] #reg-top-card .refbox { grid-column:span 12; order:8; }
/* 顧客名：見出しの行に「選択」「新規」を並べ、その下に名前の欄 */
body[data-theme="pastel"] #reg-top-card .cust-wrap { display:grid; grid-template-columns:auto auto minmax(0, 1fr); column-gap:8px; row-gap:2px; align-items:center; }
body[data-theme="pastel"] #reg-top-card .cust-wrap > .row2 { display:contents; }
body[data-theme="pastel"] #reg-top-card .cust-wrap #btn-pick-cust { padding:2px 12px; min-height:0; font-size:12px; border-radius:999px; }
body[data-theme="pastel"] #reg-top-card .cust-wrap .chk-row { margin:0 !important; justify-self:end; gap:4px; font-size:12px; }
body[data-theme="pastel"] #reg-top-card .cust-wrap .chk-row input { min-height:0; transform:none; width:16px; height:16px; }
body[data-theme="pastel"] #reg-top-card .cust-wrap #f-customer { grid-column:1 / -1; }
/* 紹介者：1行（見出し・選択・選んだ人のチップ・新規）。新規にチェックしたときだけ入力欄が下に出る */
body[data-theme="pastel"] #reg-top-card .refbox { flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; }
body[data-theme="pastel"] #reg-top-card .refbox > span:first-child { font-size:12px; font-weight:700; color:var(--txt); }
body[data-theme="pastel"] #reg-top-card .refbox #btn-pick-ref { margin:0 !important; padding:2px 12px; min-height:0; font-size:12px; border-radius:999px; }
body[data-theme="pastel"] #reg-top-card #referrers-wrap { display:contents; }
body[data-theme="pastel"] #reg-top-card .refbox > .ref-row { display:contents; }
body[data-theme="pastel"] #reg-top-card .refbox .chk-row { margin:0 !important; gap:4px; font-size:12px; white-space:nowrap; }
body[data-theme="pastel"] #reg-top-card .refbox .chk-row input { min-height:0; transform:none; width:16px; height:16px; }
body[data-theme="pastel"] #reg-top-card #ref-new-input:disabled { display:none; }
body[data-theme="pastel"] #reg-top-card #ref-new-input:not(:disabled) { flex:1 1 100%; }
body[data-theme="pastel"] #reg-top-card #btn-add-referrer { margin:0 !important; width:auto !important; padding:2px 12px; min-height:0; font-size:12px; border-radius:999px; }
body[data-theme="pastel"] .ref-chip { display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:3px 4px 3px 10px; border:1px solid #f1b9c3; border-radius:999px; background:#fff0f3; color:#8f2a45; font-size:13px; font-weight:700; }
body[data-theme="pastel"] .ref-chip .ref-del { width:22px; height:22px; padding:0; border:0; border-radius:50%; background:rgba(143,42,69,.12); color:#8f2a45; font-size:14px; line-height:1; }
body[data-theme="pastel"] #reg-top-card #f-staff-wrap { align-self:end; }

/* ===== 営業日をタップ→真ん中の窓（勤怠用QR＋ログイン／ログアウト）2026-10-22 ===== */
.modal.center { align-items:center; justify-content:center; padding:16px; }
.modal.center .sheet { width:100%; max-width:340px; margin:0; border-radius:20px; max-height:86vh; }
body[data-theme="pastel"] #bizDay { cursor:pointer; -webkit-tap-highlight-color:transparent; }
body[data-theme="pastel"] #bizDay::after { content:'▾'; margin-left:4px; font-size:11px; opacity:.6; }

/* ===== 勤怠の板・シフト（パステルの店だけ・2026-10-22 ユーザー指定）===== */
/* 勤怠の板：キャスト＝3つ（横に3列）／スタッフ・管理者＝5つ（2列・最後の1つは横いっぱい） */
body[data-theme="pastel"] #pmore .pm-grid.pm-n3 { grid-template-columns:1fr 1fr 1fr; gap:10px; }
body[data-theme="pastel"] #pmore .pm-grid.pm-n3 .pm-tile { padding:14px 10px 12px; min-height:92px; }
body[data-theme="pastel"] #pmore .pm-grid.pm-n3 .pm-tile .pm-tx { font-size:12.5px; }
body[data-theme="pastel"] #pmore .pm-grid.pm-n5 .pm-tile:last-child { grid-column:1 / -1; min-height:72px; flex-direction:row; align-items:center; gap:12px; }
/* 勤怠ページ（page-time）を板から開いたときの見せ方：出勤＝出勤のカードだけ／タイムカード＝自分の勤務のカードだけ。上のログイン／QRのカードは出さない（営業日の窓に移した） */
body[data-theme="pastel"][data-tv="punch"] #page-time > .card:not(#time-punch-card),
body[data-theme="pastel"][data-tv="me"] #page-time > .card:not(#time-me-card) { display:none !important; }
body[data-theme="pastel"][data-tv] #time-top-card { display:none !important; }
/* シフト */
.sf-day { display:grid; grid-template-columns:74px minmax(0, 1fr) 14px; align-items:center; gap:8px; padding:11px 4px; border-bottom:1px solid var(--line); cursor:pointer; }
.sf-day:last-child { border-bottom:0; }
.sf-date { font-weight:700; font-size:14px; white-space:nowrap; }
.sf-mid { display:flex; flex-direction:column; gap:2px; min-width:0; font-size:13px; }
.sf-sum b { font-weight:700; }
.sf-names { font-size:11.5px; color:var(--sub); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sf-go { color:var(--sub); opacity:.6; text-align:right; }
.sf-day.past { opacity:.5; }
body[data-theme="pastel"] .sf-day.today { background:linear-gradient(90deg, rgba(255,223,228,.55), rgba(255,223,228,0)); border-radius:12px; }
.sf-chip { align-self:flex-start; padding:3px 12px; border-radius:999px; font-size:12.5px; font-weight:700; border:1px solid var(--line); }
body[data-theme="pastel"] .sf-chip.work { background:#e6f6ea; border-color:#bfe3c9; color:#2f7a45; }
body[data-theme="pastel"] .sf-chip.off { background:#eef0f5; border-color:#dfe3ec; color:#6b7385; }
body[data-theme="pastel"] .sf-chip.none { background:#fff; border-color:#f1b9c3; color:#b8457a; border-style:dashed; }
/* 日ごとの窓 */
.sfe-row { margin-bottom:12px; }
.sfe-nm { font-weight:700; font-size:14px; margin-bottom:4px; }
.sfe-seg { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.sfe-seg button { padding:10px 4px; border:1px solid var(--line); border-radius:12px; background:var(--card2); color:var(--txt); font-size:14px; font-weight:700; }
body[data-theme="pastel"] .sfe-seg button.on.sg-work { background:#e6f6ea; border-color:#9fd3ae; color:#2f7a45; }
body[data-theme="pastel"] .sfe-seg button.on.sg-off { background:#eef0f5; border-color:#c6ccd9; color:#4f586b; }
body[data-theme="pastel"] .sfe-seg button.on.sg-none { background:#fff0f3; border-color:#f1b9c3; color:#b8457a; }
.sfe-times { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.sfe-times label { display:flex; flex-direction:column; gap:2px; font-size:11px; color:var(--sub); }
.sfe-times input { min-height:40px; }
body[data-theme="pastel"] .whoami { flex:0 1 auto; max-width:72px; overflow:hidden; text-overflow:ellipsis; padding:2px 8px; font-size:11px; }
body[data-theme="pastel"] #pmore .pm-grid.pm-n5 .pm-tile:last-child { justify-content:flex-start; }
body[data-theme="pastel"] #bizDay { font-size:13px; }
body[data-theme="pastel"] #whoami { max-width:64px; }
/* 上の5つのボタン（スタッフ名簿／ヘルプ出勤／勤怠編集／給料設定／日払い印刷）は、勤怠・管理の板に引っ越したので、パステルでは出さない（2026-10-22 ユーザー指定・ヘルプ出勤は使わない） */
body[data-theme="pastel"] #tm-nav-card { display:none !important; }
/* キャスト名簿の「給料設定」2つ（閉じた見出し）は横いっぱいの帯に（2列のタイルだと見出しが折れて読みにくい） */
body[data-theme="pastel"] #page-time > #pay-base-card.acc, body[data-theme="pastel"] #page-time > #pay-bonus-card.acc { grid-column:1 / -1; }

/* ===== 卓ボードの金額を隠す（パステルの店だけ・2026-10-22 ユーザー指定）===== */
body[data-theme="pastel"] .board-sum.tap { cursor:pointer; padding:4px 0 4px 10px; -webkit-tap-highlight-color:transparent; }
body[data-theme="pastel"] .tcard-amtbox { display:inline-flex; align-items:center; gap:6px; }
body[data-theme="pastel"] .tcard-eye { border:0; background:transparent; padding:2px 4px; font-size:16px; line-height:1; opacity:.75; -webkit-tap-highlight-color:transparent; }
body[data-theme="pastel"] .tcard.hide-amt .tcard-nomi { visibility:hidden; }
body[data-theme="pastel"] .tcard.hide-amt .tcard-amt { letter-spacing:.1em; }

/* ===== 卓ボードの「並び替え」＝右下に浮かぶボタン（伝票作成と同じ作り・パステルの卓ボードだけ・2026-10-22 ユーザー指定）===== */
#fab-sort, #sort-menu { display:none; }
body[data-theme="pastel"][data-pg="board"] #fab-sort { display:flex; position:fixed; right:14px; bottom:calc(80px + env(safe-area-inset-bottom)); z-index:8; align-items:center; gap:7px;
  border:0; height:50px; padding:0 18px 0 14px; border-radius:25px; background:var(--gloss-blue); color:#14425e; font-size:15px; font-weight:800; letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 8px -4px rgba(60,140,190,.35), 0 14px 22px -12px rgba(60,140,190,.95); transform:translateZ(0); -webkit-transform:translateZ(0); }
body[data-theme="pastel"] #fab-sort .fab-i { display:inline-flex; }
body[data-theme="pastel"][data-pg="board"] #sort-menu:not(.hidden) { display:block; position:fixed; inset:0; z-index:9; }
body[data-theme="pastel"] #sort-menu .fm-bg { position:absolute; inset:0; background:rgba(31,36,48,.2); }
body[data-theme="pastel"] #sort-menu .fm-pop { position:absolute; right:14px; bottom:calc(80px + 50px + 12px + env(safe-area-inset-bottom)); width:min(270px, calc(100% - 28px)); display:flex; flex-direction:column; gap:10px; animation:fmIn .18s ease-out both; }
body[data-theme="pastel"] #sort-menu .fm-btn { display:flex; align-items:center; gap:12px; border:0; border-radius:22px; padding:12px 16px; text-align:left; background:#fff; color:var(--txt); box-shadow:0 12px 20px -14px rgba(40,50,90,.55); }
body[data-theme="pastel"] #sort-menu .fm-btn.on { background:var(--gloss-blue); color:#14425e; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 14px 22px -14px rgba(60,140,190,.95); }
body[data-theme="pastel"] #sort-menu .fm-ic { flex:none; width:42px; height:42px; border-radius:15px; background:rgba(120,150,190,.14); display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:inset 0 1px 0 rgba(255,255,255,.95); }
body[data-theme="pastel"] #sort-menu .fm-btn.on .fm-ic { background:rgba(255,255,255,.7); }
body[data-theme="pastel"] #sort-menu .fm-tx { display:flex; flex-direction:column; gap:1px; flex:1; }
body[data-theme="pastel"] #sort-menu .fm-tx b { font-size:16px; font-weight:800; }
body[data-theme="pastel"] #sort-menu .fm-tx i { font-style:normal; font-size:11.5px; font-weight:600; opacity:.7; }
body[data-theme="pastel"] #sort-menu .sm-ck { font-style:normal; font-size:18px; font-weight:800; color:#14425e; }
body[data-theme="pastel"] #sort-menu .fm-btn:active { transform:scale(.97); }

/* ===== 卓ボードの「清算済み」（パステルの店だけ・2026-10-22 ユーザー指定）=====
   未会計の卓の一番上の、うすい灰色のボタン。普段は一覧は消えている。押すと当日の清算済みの伝票が出る。 */
#settled-bar, #settled-list { display:none; }
body[data-theme="pastel"] #settled-bar { display:flex; margin:0 0 10px; }
body[data-theme="pastel"] #settled-toggle { border:1px solid #e9ecf2; background:#f6f7fa; color:#b4bac7; border-radius:999px; padding:5px 15px; font-size:12.5px; font-weight:600; letter-spacing:.02em; -webkit-tap-highlight-color:transparent; }
body[data-theme="pastel"] #settled-toggle.on { color:#8d95a6; background:#eef0f5; border-color:#dfe3ec; }
body[data-theme="pastel"] #settled-list:not(.hidden) { display:block; margin:0 0 14px; background:#fff; border-radius:16px; padding:4px 12px; box-shadow:0 10px 26px -20px rgba(40,40,80,.4); }
body[data-theme="pastel"] .sc-row { display:grid; grid-template-columns:34px minmax(0, 1fr) auto auto auto; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid #eef0f5; color:#8d95a6; font-size:13px; cursor:pointer; }
body[data-theme="pastel"] .sc-row:last-child { border-bottom:0; }
body[data-theme="pastel"] .sc-table { font-weight:700; color:#7a8296; }
body[data-theme="pastel"] .sc-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#6f7789; }
body[data-theme="pastel"] .sc-time { font-size:11.5px; white-space:nowrap; }
body[data-theme="pastel"] .sc-pay { font-size:11px; padding:1px 8px; border-radius:999px; background:#f1f3f8; white-space:nowrap; }
body[data-theme="pastel"] .sc-amt { font-weight:700; color:#6f7789; white-space:nowrap; text-align:right; min-width:64px; }
body[data-theme="pastel"] .sc-empty { padding:12px 0; color:#a3abba; font-size:13px; text-align:center; }

/* ===== キャストシフト（スタッフ・管理者）＝RDAPP（RedDragonStaffAPP）の「出勤スケジュール」と同じ作り・週ごと（2026-10-22 ユーザー指定）===== */
.sw-title { display:flex; align-items:center; gap:10px; margin:2px 2px 0; font-size:22px; font-weight:800; letter-spacing:-.01em; }
.sw-tag { font-size:11px; font-weight:800; padding:3px 10px; border-radius:999px; background:#eceef4; color:#80808c; letter-spacing:.02em; }
.sw-tag.on { background:#e6f6ea; color:#2f7a45; }
.sw-nav { display:flex; align-items:center; gap:8px; margin:12px 0 0; background:#dfe2ea; border-radius:14px; padding:4px; }
body[data-theme="pastel"] .sw-nav { background:#e7eaf1; }
.sw-arrow { flex:none; width:48px; height:40px; border:0; border-radius:11px; background:#fff; color:#1d1d22; font-size:24px; font-weight:700; line-height:1; box-shadow:0 2px 7px rgba(0,0,0,.1); }
.sw-arrow:active { transform:scale(.95); }
.sw-rng { flex:1; text-align:center; line-height:1.25; min-width:0; }
.sw-rng b { display:block; font-size:15px; font-weight:800; }
.sw-rng small { font-size:11px; font-weight:700; color:#80808c; }
.sw-today { display:block; margin:8px auto 0; border:0; background:transparent; color:#b8457a; font-size:12.5px; font-weight:800; padding:4px 10px; }
.sw-cap { margin:16px 4px 0; font-size:11px; color:#80808c; line-height:1.6; }
.sw-cap b { color:#b8457a; font-weight:800; }
.sw-hs { display:flex; gap:10px; overflow-x:auto; padding:10px 2px 8px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.sw-hs::-webkit-scrollbar { display:none; }
.sw-hc { flex:none; width:80px; background:#fff; border-radius:18px; padding:12px 10px; box-shadow:0 8px 20px -14px rgba(40,40,80,.5); }
.sw-hc .w { font-size:12px; font-weight:800; color:#80808c; }
.sw-hc .n { margin-top:6px; font-size:30px; font-weight:800; line-height:1; letter-spacing:-.02em; }
.sw-hc .n small { font-size:11px; font-weight:700; color:#80808c; margin-left:2px; }
.sw-hc .bar2 { margin-top:10px; height:5px; border-radius:3px; background:#eceef4; overflow:hidden; }
.sw-hc .bar2 i { display:block; height:100%; border-radius:3px; background:linear-gradient(90deg, #79cfa0, #7bbbe6); }
.sw-hc.td { background:linear-gradient(160deg, #ffdfe6, #ffeef2); }
.sw-hc.td .w { color:#b8457a; }
.sw-lg { margin:12px 4px 0; font-size:10.5px; color:#80808c; display:flex; gap:12px; flex-wrap:wrap; }
.sw-lg span { display:inline-flex; align-items:center; gap:5px; }
.sw-lg i { display:inline-block; width:10px; height:10px; border-radius:3px; background:#e6f6ea; }
.sw-lg i.o { background:#e6e7ee; } .sw-lg i.z { background:#f3f4f8; border:1px dashed #d0d0d8; }
.sw-grp { margin-top:12px; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 10px 26px -18px rgba(40,40,80,.45); }
.sw-row { display:flex; align-items:center; gap:9px; padding:12px 10px 12px 12px; border-bottom:1px solid #eceef3; }
.sw-row:last-child { border-bottom:0; }
.sw-av { flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff; }
.sw-pn { flex:none; width:64px; font-size:12.5px; font-weight:700; line-height:1.3; word-break:break-all; }
.sw-wk { flex:1; display:grid; grid-template-columns:repeat(7, 1fr); gap:3px; min-width:0; }
.sw-cell { border:0; border-radius:8px; text-align:center; padding:4px 0 5px; background:#f3f4f8; min-width:0; font-family:inherit; color:inherit; }
.sw-cell i { display:block; font-style:normal; font-size:8.5px; font-weight:700; color:#a1a1ad; }
.sw-cell b { display:block; margin-top:1px; font-size:10px; font-weight:800; font-variant-numeric:tabular-nums; color:#1d1d22; white-space:nowrap; }
.sw-cell.w { background:#e6f6ea; } .sw-cell.w b { color:#2f7a45; }
.sw-cell.o { background:#eceef4; } .sw-cell.o b { color:#a3abba; font-weight:700; }
.sw-cell.z b { color:#d0d0d8; font-weight:500; }
.sw-cell.td { box-shadow:inset 0 0 0 1.5px #f1b9c3; }
button.sw-cell:active { transform:scale(.94); }

/* ===== 伝票ページ：上のカード（来店情報）と「伝票」のカードの開閉（パステルの店だけ・2026-10-22 ユーザー指定）===== */
body[data-theme="pastel"] #reg-top-card > .bill-head { grid-column:1 / -1; order:0; margin:0 0 2px; }
body[data-theme="pastel"] #reg-top-card.acc.collapsed { display:block; }
body[data-theme="pastel"] #reg-top-card.acc.collapsed > .bill-head { margin:0; }
body[data-theme="pastel"] #acc-top-sum, body[data-theme="pastel"] #acc-bill-sum { font-size:12px; font-weight:700; color:#8d95a6; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body[data-theme="pastel"] #page-register #acc-bill.acc > .acc-head { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
body[data-theme="pastel"] #page-register #acc-bill.acc > .acc-head > #acc-bill-sum { margin-left:auto; }
/* 「伝票」を閉じても、会計伝票印刷・清算のボタンは出したまま（明細・合計・割引だけ畳む） */
body[data-theme="pastel"] #page-register #acc-bill.acc.collapsed > .bill-btns { display:grid !important; margin-top:8px; }
body[data-theme="pastel"] #page-register #acc-bill.acc.collapsed > .acc-head { margin-bottom:0; }
body[data-theme="pastel"] #page-register #acc-bill > .acc-head > span:last-of-type { white-space:nowrap; }
body[data-theme="pastel"] #page-register #acc-bill .mini { white-space:nowrap; padding:5px 10px; font-size:12px; }

/* ===== 新規伝票の立ち上げ（パステルの店だけ・2026-10-22 ユーザー指定）＝画面の真ん中のポップアップ／セットは3列のコンパクトなタイル／今日出勤のキャストを横スライドで指名 ===== */
body[data-theme="pastel"] #newticket { align-items:center; justify-content:center; padding:14px; }
body[data-theme="pastel"] #newticket .sheet { width:100%; max-width:380px; margin:0; border-radius:22px; max-height:90vh; padding:14px 14px 16px; }
body[data-theme="pastel"] #newticket .row2 { gap:8px; }
body[data-theme="pastel"] #newticket .row2 .fld { margin-bottom:6px; }
body[data-theme="pastel"] #newticket input, body[data-theme="pastel"] #newticket select { min-height:40px; padding:6px 10px; font-size:15px; }
body[data-theme="pastel"] #newticket .sub-head { margin-top:8px !important; }
body[data-theme="pastel"] #nt-sets { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:6px; }
body[data-theme="pastel"] .nt-set { background:#f6f7fa; border:1px solid transparent; border-radius:14px; padding:9px 6px 8px; text-align:center; min-width:0; }
body[data-theme="pastel"] .nt-set.on { background:#fff0f3; border-color:#f1b9c3; }
body[data-theme="pastel"] .nt-sn { font-size:13px; font-weight:800; line-height:1.25; word-break:break-all; }
body[data-theme="pastel"] .nt-sp { margin-top:1px; font-size:11px; font-weight:600; color:var(--sub); }
body[data-theme="pastel"] .nt-ss { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:7px; }
body[data-theme="pastel"] .nt-ss button { width:28px; height:28px; padding:0; border:1px solid var(--line); border-radius:50%; background:#fff; font-size:16px; line-height:1; font-weight:700; }
body[data-theme="pastel"] .nt-ss b { min-width:16px; font-size:16px; font-weight:800; }
body[data-theme="pastel"] #nt-nomi { margin-top:4px; }
/* リピート来店：お客様を選ぶ窓も画面の真ん中（長い一覧は窓の中でスクロール）。立ち上げる窓（上）と同じ形 */
body[data-theme="pastel"] #memberpick.mp-center { align-items:center; justify-content:center; padding:14px; }
body[data-theme="pastel"] #memberpick.mp-center .sheet { width:100%; max-width:380px; margin:0; border-radius:22px; max-height:84vh; }

/* 営業日の下の「出勤◯名」（パステルのスタッフ・管理者の端末・2026-10-22 ユーザー指定）*/
.biz-wrap { display:contents; }
body[data-theme="pastel"] .biz-wrap { display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; cursor:pointer; }
body[data-theme="pastel"] .biz-att { font-size:11px; font-weight:700; color:#8d95a6; white-space:nowrap; }
body[data-theme="pastel"] .biz-att:empty { display:none; }
body[data-theme="pastel"] .tc4 .tcard-rem { flex:0 1 auto; }

/* ===== ヘッダーのアイコンボタン（勤怠QR・ログイン）＝営業日と出勤の塊の左（パステルのみ・2026-10-22 ユーザー指定）===== */
#hd-qr { display:none; }
body[data-theme="pastel"] #hd-qr { display:inline-flex; align-items:center; justify-content:center; flex:none; width:30px; height:30px; border:0; border-radius:11px; background:#f2f4f9; color:#7a8296; margin:0 8px 0 0; padding:0; -webkit-tap-highlight-color:transparent; }
body[data-theme="pastel"] #hd-qr:active { transform:scale(.94); }
/* 上の帯が狭いので、名前の札（whoami）はこのボタンの窓の中（ログイン中：◯◯）に出す。店名が切れないように */
body[data-theme="pastel"] #whoami { display:none !important; }

/* ===== メンバー：顧客を2列のコンパクトなカードに（パステルのみ・2026-10-22 ユーザー指定）。カードを押すと広がってボタンが出る ===== */
body[data-theme="pastel"] #cust-wrap { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
body[data-theme="pastel"] #cust-wrap > .card.empty { grid-column:1 / -1; }
body[data-theme="pastel"] #cust-wrap .cust { margin:0; padding:10px 11px 9px; min-width:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
body[data-theme="pastel"] #cust-wrap .cust-top { flex-direction:column; align-items:flex-start; gap:1px; }
body[data-theme="pastel"] #cust-wrap .cust-name { font-size:15px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body[data-theme="pastel"] #cust-wrap .cust-name::after { content:'▾'; margin-left:5px; font-size:10px; color:#b4bac7; }
body[data-theme="pastel"] #cust-wrap .cust.open .cust-name::after { content:'▴'; }
body[data-theme="pastel"] #cust-wrap .cust-top .sub { font-size:11px; line-height:1.4; }
body[data-theme="pastel"] #cust-wrap .cust-meta { margin:3px 0 0; gap:2px 10px; font-size:11px; }
body[data-theme="pastel"] #cust-wrap .cust-meta > span:nth-child(2), body[data-theme="pastel"] #cust-wrap .cust-meta > span:nth-child(3) { display:none; }
body[data-theme="pastel"] #cust-wrap .cust-memo { display:none; }
body[data-theme="pastel"] #cust-wrap .cust > .cust-actions { display:none; margin-top:9px; }
body[data-theme="pastel"] #cust-wrap .cust.open > .cust-actions, body[data-theme="pastel"] #cust-wrap .cust:has(.cust-edit:not(.hidden)) > .cust-actions { display:flex; }
body[data-theme="pastel"] #cust-wrap .cust.open, body[data-theme="pastel"] #cust-wrap .cust:has(.cust-edit:not(.hidden)) { grid-column:1 / -1; cursor:default; }
body[data-theme="pastel"] #cust-wrap .cust.open .cust-meta > span:nth-child(2), body[data-theme="pastel"] #cust-wrap .cust.open .cust-meta > span:nth-child(3) { display:inline; }
body[data-theme="pastel"] #cust-wrap .cust.open .cust-memo { display:block; }

/* ===== キャスト名簿のコンパクトな行（パステルのみ・2026-10-22 ユーザー指定）===== */
body[data-theme="pastel"] .cr-cfg { margin:0 0 10px; padding:9px 10px; background:#f6f7fa; border-radius:14px; }
body[data-theme="pastel"] .cr-cfg-row { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:6px; margin-top:6px; }
body[data-theme="pastel"] .cr-cfg-row input { min-height:36px; padding:5px 8px; font-size:13px; min-width:0; }
body[data-theme="pastel"] .stf-row.cr { padding:11px; }
body[data-theme="pastel"] .cr .cr-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px 8px; margin-top:8px; }
body[data-theme="pastel"] .cr .cr-f { display:flex; flex-direction:column; gap:2px; min-width:0; font-size:10.5px; font-weight:700; color:var(--sub); }
body[data-theme="pastel"] .cr .cr-wide { grid-column:1 / -1; }
body[data-theme="pastel"] .cr .cr-grid input, body[data-theme="pastel"] .cr .cr-grid select { min-height:36px; padding:5px 9px; font-size:14px; border-radius:10px; min-width:0; }
body[data-theme="pastel"] .cr .cr-wrow { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); gap:8px; }
body[data-theme="pastel"] .cr .cr-more { display:block; width:100%; margin-top:8px; padding:7px 10px; font-size:12px; color:#8d95a6; background:#f6f7fa; border:0; border-radius:10px; text-align:center; }
body[data-theme="pastel"] .cr .cr-adv { margin-top:4px; }
/* キャスト名簿は長い説明文を畳む（コンパクトに・パステルのみ） */
body[data-theme="pastel"][data-rk="cast"] #time-roster-card > p.hint:not([id]), body[data-theme="pastel"][data-rk="staff"] #time-roster-card > p.hint:not([id]) { display:none; }

/* ===== 延長の種類 A/B/C（2026-10-22） ===== */
.sl-addrow { display:flex; gap:8px; }
.sl-addrow .sl-add { flex:1 1 0; min-width:0; width:auto; padding:11px 6px; }
.ea-types { display:flex; gap:8px; margin:4px 0 8px; }
.ea-types.hidden { display:none; }
.ea-ty { flex:1 1 0; min-width:0; padding:10px 6px; border:1px solid var(--line); border-radius:12px; background:var(--card2); color:var(--txt); font-weight:800; font-size:14px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.ea-ty i { font-style:normal; font-weight:600; font-size:11px; color:var(--sub); }
.ea-ty.on { border-color:var(--accent); background:var(--accent); color:#fff; }
.ea-ty.on i { color:rgba(255,255,255,.85); }
body[data-theme="pastel"] .ea-ty { border:0; background:#f1f3f8; color:#3a4152; }
body[data-theme="pastel"] .ea-ty.on { background:var(--gloss-blue); color:#14425e; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 14px -10px rgba(60,140,190,.85); }
body[data-theme="pastel"] .ea-ty.on i { color:#14425e; }
.ext-type-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.ext-type-tag { flex:0 0 28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; background:var(--card2); border:1px solid var(--line); color:var(--sub); }
.ext-type-row .et-nm { flex:1 1 0; min-width:0; }
.ext-type-row .et-mn { flex:0 0 96px; }
.setedit-row.ext-bc input { flex:1 1 0; min-width:0; }

/* ===== キャスト名簿の「新規登録」＋体験入店（2026-10-22） ===== */
/* 浮かぶボタン：キャスト名簿（勤怠ページ・管理者）にいる間だけ。伝票作成と同じ位置・同じ形（パステルのみ） */
#fab-cast { display:none; }
body[data-theme="pastel"][data-pg="time"][data-rk="cast"][data-tv="admin"] #fab-cast { display:flex; position:fixed; left:14px; bottom:calc(80px + env(safe-area-inset-bottom)); z-index:8; align-items:center; gap:7px;
  border:0; height:50px; padding:0 20px 0 15px; border-radius:25px; background:var(--gloss-pink); color:#5a1838; font-size:15px; font-weight:800; letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 8px -4px rgba(190,70,120,.35), 0 14px 22px -12px rgba(226,110,160,.95); transform:translateZ(0); -webkit-transform:translateZ(0); }
body[data-theme="pastel"] #fab-cast .fab-i { display:inline-flex; }
body[data-theme="pastel"][data-pg="time"][data-rk="cast"][data-tv="admin"] #app { padding-bottom:calc(168px + env(safe-area-inset-bottom)); }
/* パステルのキャスト名簿は、新規登録のボタンから登録する＝名簿の下の「＋ キャストを追加」は出さない（他のテーマ・スタッフ名簿は今までどおり） */
body[data-theme="pastel"][data-rk="cast"] #staff-add { display:none; }
/* 新規登録の窓 */
#castnew .sheet { max-width:360px; }
#castnew .cn-grid { margin-top:10px; }
#castnew .cn-extras { display:contents; }
.cn-trial { width:100%; display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:16px; padding:11px 14px; background:var(--card2); color:var(--txt); text-align:left; }
.cn-trial .cn-chk { flex:none; width:26px; height:26px; border-radius:50%; border:2px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:900; color:transparent; }
.cn-trial .cn-tx { display:flex; flex-direction:column; gap:1px; }
.cn-trial .cn-tx b { font-size:16px; font-weight:800; }
.cn-trial .cn-tx i { font-style:normal; font-size:11.5px; font-weight:600; opacity:.7; }
.cn-trial.on .cn-chk { background:var(--accent); border-color:var(--accent); color:#fff; }
.cn-trial.on .cn-chk::before { content:'✓'; }
body[data-theme="pastel"] .cn-trial { border:0; background:#f1f3f8; box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
body[data-theme="pastel"] .cn-trial.on { background:var(--gloss-pink); color:#5a1838; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 18px -12px rgba(226,110,160,.95); }
body[data-theme="pastel"] .cn-trial.on .cn-chk { background:#fff; border-color:#fff; color:#d24a86; }
/* 名簿の行の「体入」の印 */
.cr-badge { flex:none; font-size:11px; font-weight:800; color:#5a1838; background:var(--gloss-pink, #f7c6dc); border-radius:999px; padding:3px 9px; white-space:nowrap; }
/* 新規登録の窓の項目（名簿の行と同じ2列・パステルのみ。他のテーマは窓が出ない＝ボタンが無い） */
#castnew .cr-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
#castnew .cr-f { display:flex; flex-direction:column; gap:2px; min-width:0; font-size:10.5px; font-weight:700; color:var(--sub); }
#castnew .cr-wide { grid-column:1 / -1; }
#castnew .cr-grid input { min-height:38px; padding:5px 9px; font-size:14px; border-radius:10px; min-width:0; width:100%; box-sizing:border-box; }

/* ===== メンバーの「あ行・か行…」絞り込み（パステルのみ・2026-10-22 ユーザー指定） ===== */
body[data-theme="pastel"] .c-kana { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:6px; margin:0 0 10px; }
body[data-theme="pastel"] .c-kana .ck { min-height:36px; padding:0 4px; border:0; border-radius:12px; background:#f1f3f8; color:#3a4152; font-size:15px; font-weight:800; box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
body[data-theme="pastel"] .c-kana .ck:first-child { font-size:13px; }
body[data-theme="pastel"] .c-kana .ck.none { opacity:.38; }
body[data-theme="pastel"] .c-kana .ck.on { background:var(--gloss-blue); color:#14425e; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 14px -10px rgba(60,140,190,.85); opacity:1; }

/* ===== 清算済み伝票：日付ごとに枠で囲む（パステルのみ・2026-10-22 ユーザー指定） ===== */
body[data-theme="pastel"] #list-wrap > .day-box { grid-column:1 / -1; background:#fff; border:1px solid #e6e9f2; border-radius:20px; padding:10px 10px 12px; box-shadow:0 12px 24px -18px rgba(40,50,90,.45); }
body[data-theme="pastel"] #list-wrap .day-box > .day-head { margin:0 0 8px; padding:8px 12px; border-radius:14px; background:linear-gradient(90deg,#fde7f0,#e3f2fb 60%,#e4f6ea); color:#3a4152; font-weight:800; font-size:14px; }
body[data-theme="pastel"] #list-wrap .day-box > .day-pay { margin:0 0 8px; }
body[data-theme="pastel"] #list-wrap .day-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; align-items:start; }
body[data-theme="pastel"] #list-wrap .day-grid > .tk { margin-bottom:0; padding:9px 10px; }
@media (max-width:359px) { body[data-theme="pastel"] #list-wrap .day-grid { grid-template-columns:1fr; } }

/* ===== ヘッダーのボタン2つ（プリンタ・QR）：2つ並べて、営業日の左へ寄せる（パステルのみ・2026-10-22 ユーザー指定） =====
   ★ヘッダーは space-between で、名前・ボタン2つ・営業日が均等に離れて並んでいた。左の auto で余白を全部「名前とボタンの間」に回し、
     ボタン2つはくっつけて（8px）営業日の左に置く。営業日との間は1つぶんだけ空ける（14px）。 */
body[data-theme="pastel"] #hd-prn { margin:0 8px 0 auto; flex:none; }
body[data-theme="pastel"] #hd-qr { margin:0 14px 0 0; }

/* ===== 新規伝票の人数タイル：上半分＝＋1人／下半分（赤）＝−1人（パステルのみ・2026-10-23 ユーザー指定） ===== */
body[data-theme="pastel"] .nt-set { padding:0; overflow:hidden; display:flex; flex-direction:column; text-align:center; }
body[data-theme="pastel"] .nt-set button { display:block; width:100%; margin:0; border:0; border-radius:0; background:transparent; font-family:inherit; color:inherit; -webkit-tap-highlight-color:transparent; }
body[data-theme="pastel"] .nt-set .nt-up { position:relative; padding:9px 4px 8px; min-height:78px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
body[data-theme="pastel"] .nt-set .nt-up:active { background:rgba(255,255,255,.7); }
body[data-theme="pastel"] .nt-set .nt-sn { font-size:13px; font-weight:800; line-height:1.25; word-break:break-all; }
body[data-theme="pastel"] .nt-set .nt-sp { font-size:11px; font-weight:600; color:var(--sub); }
body[data-theme="pastel"] .nt-set .nt-cnt { margin-top:3px; display:inline-flex; align-items:baseline; gap:2px; }
body[data-theme="pastel"] .nt-set .nt-cnt b { font-size:24px; font-weight:800; line-height:1; }
body[data-theme="pastel"] .nt-set .nt-cnt small { font-size:11px; font-weight:700; color:var(--sub); }
body[data-theme="pastel"] .nt-set .nt-dn { min-height:38px; padding:0; font-size:14px; font-weight:800; letter-spacing:.03em; color:#c23a52; background:#fde8ec; border-top:1px solid #f6cdd6; }
body[data-theme="pastel"] .nt-set .nt-dn:active { background:#f9c9d3; }
body[data-theme="pastel"] .nt-set .nt-dn:disabled { color:#d9a9b3; background:#fbeff2; }
body[data-theme="pastel"] .nt-set.on .nt-up { background:#fff0f3; }
body[data-theme="pastel"] .nt-set.on .nt-cnt b { color:#d24a86; }
/* 横スライドの列（指名のキャスト）：指・マウス・ペンのどれでも動かす。窓の中では、ほかの動きに取られないようにする */
.sl-chips { overscroll-behavior-x:contain; touch-action:pan-x pan-y; }
@media (hover:hover) and (pointer:fine) { .sl-chips { cursor:grab; } .sl-chips.dragging { cursor:grabbing; scroll-snap-type:none; user-select:none; } .sl-chips.dragging .nm-chip { pointer-events:none; } }
body[data-theme="pastel"] #nt-nomi { scroll-snap-type:none; }

body[data-theme="pastel"] #nt-nomi-note { font-size:11px; white-space:nowrap; }

/* ===== キャスト名簿をもっとコンパクトに（パステルのみ・2026-10-23 ユーザー指定）＝普段は1人1行／右上の「設定」ボタン／その他の項目の窓 ===== */
body[data-theme="pastel"] .stf-row.cr { padding:2px 12px; margin-bottom:6px; }
body[data-theme="pastel"] .cr .cr-head { width:100%; display:flex; align-items:center; gap:7px; min-height:46px; padding:0; border:0; background:transparent; text-align:left; color:var(--txt); font-family:inherit; -webkit-tap-highlight-color:transparent; }
body[data-theme="pastel"] .cr .cr-nm { min-width:0; flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; font-weight:800; }
body[data-theme="pastel"] .cr .cr-sum { margin-left:auto; flex:none; font-size:12px; font-weight:600; color:var(--sub); white-space:nowrap; }
body[data-theme="pastel"] .cr .cr-tag { flex:none; font-size:10.5px; font-weight:800; color:#5b6477; background:#e8ecf4; border-radius:999px; padding:2px 8px; white-space:nowrap; }
body[data-theme="pastel"] .cr .cr-tag.off { color:#8a8f9c; background:#eceef2; }
body[data-theme="pastel"] .cr .cr-chev { flex:none; width:8px; height:8px; border-right:2px solid #a3abba; border-bottom:2px solid #a3abba; transform:rotate(45deg); margin:0 4px 3px 2px; transition:transform .2s ease; }
body[data-theme="pastel"] .cr.open .cr-chev { transform:rotate(-135deg); margin-bottom:-3px; }
body[data-theme="pastel"] .cr .cr-body { margin-top:2px; padding:8px 0 8px; border-top:1px dashed #e6e9f2; }
body[data-theme="pastel"] .cr .cr-body.hidden { display:none; }
/* 右上の「設定」ボタン */
.cr-gear { display:none; }
body[data-theme="pastel"][data-rk="cast"] #time-roster-card .cr-gear { display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 12px; border:0; border-radius:15px; background:#f1f3f8; color:#5b6477; font-size:12.5px; font-weight:800; box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
body[data-theme="pastel"][data-rk="cast"] #time-roster-card .cr-gear:active { transform:scale(.95); }
/* 「その他」の項目の窓 */
#rostercfg .sheet { max-width:340px; }
#rostercfg .rc-count { display:flex; align-items:center; justify-content:space-between; margin:6px 0 10px; font-size:14px; font-weight:800; }
#rostercfg .rc-step { display:inline-flex; align-items:center; gap:10px; }
#rostercfg .rc-step button { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:#fff; font-size:22px; font-weight:700; line-height:1; padding:0; }
#rostercfg .rc-step button:disabled { opacity:.35; }
#rostercfg .rc-step b { min-width:26px; text-align:center; font-size:22px; font-weight:800; }
#rostercfg .rc-names { display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
#rostercfg .cr-f { display:flex; flex-direction:column; gap:2px; font-size:10.5px; font-weight:700; color:var(--sub); }
#rostercfg .cr-f input { min-height:40px; padding:6px 10px; font-size:15px; border-radius:10px; width:100%; box-sizing:border-box; }
/* 開いたときの下の段（区分・体入・管理・有効・保存）：狭いときは折り返す。保存ボタンの文字が縦に割れないように */
body[data-theme="pastel"] .cr .cr-body .setedit-row { flex-wrap:wrap; row-gap:6px; }
body[data-theme="pastel"] .cr .skind { flex:0 0 auto; width:auto; min-width:96px; }
body[data-theme="pastel"] .cr .cr-body .mini { white-space:nowrap; flex:none; }

/* ===== メニュー編集：右端の「設定」ボタン／カテゴリの編集の窓／ドラッグ並べ替え（パステルのみ・2026-10-23 ユーザー指定） ===== */
.pst-gear { display:none; }
body[data-theme="pastel"] .pst-gear { display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 12px; margin-left:auto; border:0; border-radius:15px; background:#f1f3f8; color:#5b6477; font-size:12.5px; font-weight:800; box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
body[data-theme="pastel"] .pst-gear:active { transform:scale(.95); }
/* パステルは、窓から編集する＝下の古い「カテゴリ設定」のカードは出さない */
body[data-theme="pastel"] #mc-card { display:none !important; }
/* ドラッグの取っ手（右端）：取っ手の上では、ブラウザの縦スクロールに取られない */
.dnd-h { flex:none; width:38px; height:40px; display:inline-flex; align-items:center; justify-content:center; color:#a3abba; touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
.dnd-h:active { cursor:grabbing; color:#7a8296; }
body[data-theme="pastel"] .medit, body[data-theme="pastel"] .mc-row { position:relative; }
.dnd-drag { z-index:30; background:#fff; box-shadow:0 16px 30px -12px rgba(40,50,90,.55); border-radius:12px; opacity:.97; pointer-events:none; }
.dnd-before::before, .dnd-after::after { content:""; position:absolute; left:0; right:0; height:3px; border-radius:2px; background:#f08ca8; z-index:29; pointer-events:none; }
.dnd-before::before { top:-3px; }
.dnd-after::after { bottom:-3px; }
.dnd-on { user-select:none; -webkit-user-select:none; }
/* カテゴリの編集の窓 */
#catpop .sheet { max-width:380px; }
#catpop .cp-add { display:flex; gap:8px; margin:8px 0; }
#catpop .cp-add input { flex:1; min-width:0; min-height:42px; }
#catpop .cp-add .primary { flex:none; padding:0 18px; }
#catpop .cp-list { display:flex; flex-direction:column; gap:8px; }
#catpop .mc-row { display:flex; align-items:center; gap:6px; padding:6px 4px 6px 10px; border:1px solid var(--line); border-radius:12px; background:var(--card2); }
#catpop .mc-row .nm { flex:1; min-width:0; font-weight:800; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#catpop .mc-row .lk { display:inline-flex; align-items:center; gap:2px; font-size:12px; }
#catpop .mc-row button { white-space:nowrap; padding:6px 9px; font-size:12px; }
#catpop .mc-row.mc-ask { padding:10px; flex-wrap:wrap; }
/* 「いま出勤中」のカードも出さない（パステル・2026-10-23 ユーザー指定） */
body[data-theme="pastel"] #time-open-card { display:none !important; }
#catpop .cp-add input { flex:1 1 0; width:auto; min-width:0; }
#catpop .cp-add .primary { width:auto; flex:none; min-height:42px; padding:0 20px; border-radius:14px; font-size:14px; }

/* ===== 月間の勤怠と担当売上：出勤したキャストの一覧（並べ替え）（パステル・2026-10-23 ユーザー指定） ===== */
.tm-table { display:none; }
body[data-theme="pastel"] .tm-table { display:block; margin:6px 0 12px; }
body[data-theme="pastel"] .tmt-title { font-size:13px; font-weight:800; margin:0 2px 8px; }
body[data-theme="pastel"] .tmt-title b { color:#b8457a; }
body[data-theme="pastel"] .tmt-grid { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, .85fr) minmax(0, .85fr) minmax(0, .9fr) minmax(0, 1.25fr); gap:4px; align-items:center; }
body[data-theme="pastel"] .tmt-head { margin-bottom:4px; }
body[data-theme="pastel"] .tmt-h { min-height:34px; padding:0 2px; border:0; border-radius:10px; background:#f1f3f8; color:#5b6477; font-size:10.5px; font-weight:800; line-height:1.2; white-space:nowrap; }
body[data-theme="pastel"] .tmt-h.on { background:var(--gloss-blue); color:#14425e; }
body[data-theme="pastel"] .tmt-row { padding:7px 4px; border-bottom:1px solid #eceef3; font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
body[data-theme="pastel"] .tmt-row > span { text-align:right; min-width:0; }
body[data-theme="pastel"] .tmt-row .tmt-nm { text-align:left; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body[data-theme="pastel"] .tmt-row small { font-size:9.5px; font-weight:600; color:var(--sub); margin-left:2px; }
body[data-theme="pastel"] .tmt-row .tmt-sales { font-weight:800; }
body[data-theme="pastel"] .tmt-tot { border-bottom:0; background:#f6f7fa; border-radius:10px; margin-top:4px; }
/* ===== 勤怠編集のカレンダー：出勤人数・当日の売上・キャスト給・店休日（赤）（パステル・2026-10-23 ユーザー指定） ===== */
body[data-theme="pastel"] .te-cal-c { min-height:66px; padding:3px 1px; align-items:center; justify-content:flex-start; gap:0; line-height:1.25; border-radius:10px; }
body[data-theme="pastel"] .te-cal-c .n { font-size:9.5px; font-weight:700; }
body[data-theme="pastel"] .te-cal-c .sl { display:block; font-size:9.5px; font-weight:800; color:#1d1d22; font-variant-numeric:tabular-nums; }
body[data-theme="pastel"] .te-cal-c .py { display:block; font-size:9px; font-weight:700; color:#b8457a; font-variant-numeric:tabular-nums; }
body[data-theme="pastel"] .te-cal-c.closed { background:#fde4e8; border-color:#f4b9c2; }
body[data-theme="pastel"] .te-cal-c.closed .d { color:#c23a52; font-weight:800; }
body[data-theme="pastel"] .te-cal-c.closed.on { border-color:#d24a86; }
/* 日を押したときの、その日の出勤キャストの内訳の表 */
body[data-theme="pastel"] .td-sum { margin:10px 2px 6px; font-size:12.5px; font-weight:700; }
body[data-theme="pastel"] .td-sum b { color:#b8457a; font-weight:800; }
body[data-theme="pastel"] .td-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -2px; padding-bottom:4px; }
body[data-theme="pastel"] .td-tb { width:100%; min-width:430px; border-collapse:collapse; font-variant-numeric:tabular-nums; }
body[data-theme="pastel"] .td-tb th { padding:6px 4px; background:#f1f3f8; color:#5b6477; font-size:10.5px; font-weight:800; white-space:nowrap; text-align:right; }
body[data-theme="pastel"] .td-tb th:first-child, body[data-theme="pastel"] .td-tb td.nm { text-align:left; }
body[data-theme="pastel"] .td-tb th:first-child { border-radius:10px 0 0 10px; } body[data-theme="pastel"] .td-tb th:last-child { border-radius:0 10px 10px 0; }
body[data-theme="pastel"] .td-tb td { padding:7px 4px; border-bottom:1px solid #eceef3; font-size:12px; font-weight:700; text-align:right; white-space:nowrap; vertical-align:top; }
body[data-theme="pastel"] .td-tb td.nm { font-weight:800; }
body[data-theme="pastel"] .td-tb td small { display:block; font-size:9.5px; font-weight:600; color:var(--sub); }
body[data-theme="pastel"] .td-tb td.rm { font-weight:800; color:#2f7a45; }
body[data-theme="pastel"] .td-tb td.rm.neg { color:#c23a52; }
body[data-theme="pastel"] .td-tb tr.tot td { border-bottom:0; background:#f6f7fa; font-weight:800; }

/* シフト（この月の出勤）の「ヘルプ勤務一覧」は出さない（パステル・2026-10-23 ユーザー指定：ヘルプ出勤は使わない） */
body[data-theme="pastel"] #shh-head, body[data-theme="pastel"] #shh-list { display:none !important; }
/* 日ごとの内訳の表：スマホの幅に全部の列が入るように、文字を小さく・列の幅を決める（横にスクロールしなくてよい・2026-10-23） */
body[data-theme="pastel"] .td-tb { min-width:0; table-layout:fixed; }
body[data-theme="pastel"] .td-tb th { padding:6px 2px; font-size:9.5px; }
body[data-theme="pastel"] .td-tb td { padding:6px 2px; font-size:10.5px; letter-spacing:-.02em; }
body[data-theme="pastel"] .td-tb th:nth-child(1), body[data-theme="pastel"] .td-tb td:nth-child(1) { width:15%; overflow:hidden; text-overflow:ellipsis; }
body[data-theme="pastel"] .td-tb th:nth-child(2), body[data-theme="pastel"] .td-tb td:nth-child(2) { width:13%; }
body[data-theme="pastel"] .td-tb th:nth-child(3), body[data-theme="pastel"] .td-tb td:nth-child(3) { width:17%; }
body[data-theme="pastel"] .td-tb th:nth-child(4), body[data-theme="pastel"] .td-tb td:nth-child(4) { width:15%; }
body[data-theme="pastel"] .td-tb th:nth-child(5), body[data-theme="pastel"] .td-tb td:nth-child(5) { width:11%; }
body[data-theme="pastel"] .td-tb th:nth-child(6), body[data-theme="pastel"] .td-tb td:nth-child(6) { width:13%; }
body[data-theme="pastel"] .td-tb th:nth-child(7), body[data-theme="pastel"] .td-tb td:nth-child(7) { width:16%; }
body[data-theme="pastel"] .td-tb td small { font-size:8.5px; letter-spacing:-.04em; }
body[data-theme="pastel"] .td-tb th:nth-child(1), body[data-theme="pastel"] .td-tb td:nth-child(1) { width:18%; }
body[data-theme="pastel"] .td-tb th:nth-child(3), body[data-theme="pastel"] .td-tb td:nth-child(3) { width:16%; }
body[data-theme="pastel"] .td-tb th:nth-child(4), body[data-theme="pastel"] .td-tb td:nth-child(4) { width:14%; }
body[data-theme="pastel"] .td-tb th:nth-child(6), body[data-theme="pastel"] .td-tb td:nth-child(6) { width:12%; }

/* ===== 日払い（キャストシフト型の一覧）・金額を確認する窓・営業報告（パステル・2026-10-23 ユーザー指定） ===== */
.dpg { display:none; }
body[data-theme="pastel"] .dpg { display:block; }
body[data-theme="pastel"] #dp-old { display:none; }
body[data-theme="pastel"] #time-dpay-card { background:transparent; box-shadow:none; padding:0; border:0; }
/* 日払いの一覧のマス */
.sw-cell.dpok { background:#e3f1fb; } .sw-cell.dpok b { color:#14639e; }
.sw-cell.dpng { background:#fde4e8; } .sw-cell.dpng b { color:#c23a52; }
.sw-lg i.dpok { background:#e3f1fb; } .sw-lg i.dpng { background:#fde4e8; }
.sw-hc .dp-tot { margin-top:4px; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; color:#1d1d22; }
.sw-hc .dp-miss { margin-top:4px; font-size:9.5px; font-weight:800; color:#c23a52; }
.sw-hc .dp-done { margin-top:4px; font-size:9.5px; font-weight:800; color:#2f7a45; }
.dp-month { margin:12px 4px 0; font-size:12px; }
/* 金額を確認する窓 */
#dpayp .sheet { max-width:360px; }
#dpayp .dpp-info { margin:6px 0 10px; }
#dpayp .dpp-info .drow { font-size:13.5px; }
#dpayp .dpp-info .ok { color:#2f7a45; }
#dpayp #dpp-amt { font-size:22px; font-weight:800; min-height:52px; text-align:right; letter-spacing:.02em; }
#dpayp .dpp-more { margin-top:10px; }
#dpayp .dpp-btns { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
#dpayp .dpp-btns .mini { flex:1 1 auto; white-space:nowrap; }
#dpayp .dpp-cancel { width:100%; color:#c23a52; }
/* 営業報告 */
#page-report .rp-status { margin:8px 0; }
.rp-chip { display:inline-block; padding:5px 14px; border-radius:999px; background:#fdecc8; color:#7a5200; font-size:12.5px; font-weight:800; }
.rp-chip.ok { background:#dff3e5; color:#2f7a45; }
.rp-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0; }
.rp-k { background:#f6f7fa; border-radius:14px; padding:9px 12px; display:flex; flex-direction:column; gap:2px; }
.rp-k span { font-size:10.5px; font-weight:700; color:var(--sub); }
.rp-k b { font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; }
.rp-sg { background:#f6f7fa; border-radius:14px; padding:10px 12px; margin-bottom:8px; border:1px solid transparent; }
.rp-sg.ok { background:#eaf6ee; }
.rp-sg-top { display:flex; justify-content:space-between; align-items:baseline; font-weight:800; }
.rp-sg-nm { font-size:15px; } .rp-sg-amt { font-size:15px; font-variant-numeric:tabular-nums; }
.rp-sg-btns { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.rp-sg-btns .mini { flex:1 1 0; white-space:nowrap; }
.rp-sg-btns .mini.need { background:var(--gloss-pink, #f7c6dc); color:#5a1838; border:0; font-weight:800; }
.rp-sg-ng { margin-top:6px; font-size:11.5px; font-weight:800; color:#c23a52; }
#page-report #rp-close:disabled { opacity:1; background:#eceff5; color:#8d95a6; box-shadow:none; font-size:14px; line-height:1.4; }
/* 管理の板：タイルが7つのとき、最後の1つは横いっぱい（5つのときと同じ） */
body[data-theme="pastel"] #pmore .pm-grid.pm-n7 .pm-tile:last-child { grid-column:1 / -1; min-height:72px; flex-direction:row; align-items:center; gap:12px; justify-content:flex-start; }
/* 営業報告の下ナビのボタンは、パステル以外では出さない（ページの印を付けるためだけの隠しボタン） */
body:not([data-theme="pastel"]) #botnav [data-page="report"] { display:none; }

/* ===== キャスト名簿：退店キャスト／開いたところをもっとコンパクトに（パステル・2026-10-23 ユーザー指定） ===== */
.cr-btns { display:inline-flex; align-items:center; gap:8px; margin-left:auto; }
.cr-gear-left { display:none; }
body[data-theme="pastel"][data-rk="cast"] #time-roster-card .cr-gear-left { display:inline-flex; background:#fff; border:1px solid #e3e6ee; }
body[data-theme="pastel"][data-rv="left"] #fab-cast { display:none !important; }
body[data-theme="pastel"][data-rv="left"] #staff-add { display:none !important; }
/* 折りたたんだ行の右側＝入店日（時給は載せない） */
body[data-theme="pastel"] .cr .cr-sum { font-size:11.5px; }
/* 開いたところ：全体を低く */
body[data-theme="pastel"] .cr .cr-body { padding:4px 0 2px; }
body[data-theme="pastel"] .cr .cr-body .setedit-row { gap:6px; }
body[data-theme="pastel"] .cr .cr-body > .setedit-row:first-child input { min-height:32px; padding:3px 9px; font-size:14px; }
body[data-theme="pastel"] .cr .cr-body > .setedit-row:first-child .spin { flex:0 0 62px; width:62px; }
body[data-theme="pastel"] .cr .cr-body .del-chg { width:32px; height:32px; }
body[data-theme="pastel"] .cr .cr-grid { gap:5px 6px; margin-top:6px; }
body[data-theme="pastel"] .cr .cr-grid input, body[data-theme="pastel"] .cr .cr-grid select { min-height:32px; padding:3px 8px; font-size:13px; border-radius:9px; }
body[data-theme="pastel"] .cr .cr-f { gap:1px; font-size:9.5px; }
/* 文字の欄は、ラベルを出さず入力欄の中の文字（placeholder）で示す。日付の欄だけラベルを残す */
body[data-theme="pastel"] .cr .cr-f:not(.cr-d) > span { display:none; }
body[data-theme="pastel"] .cr .cr-more { margin-top:6px; padding:5px 10px; font-size:11.5px; }
body[data-theme="pastel"] .cr .cr-foot { margin-top:6px; }
body[data-theme="pastel"] .cr .cr-foot .mini { padding:6px 16px; }
/* 一番下の「退店」「在籍キャストに戻す」 */
body[data-theme="pastel"] .cr .cr-leave { display:block; width:100%; margin-top:8px; padding:9px; border:1px solid #f1b9c3; border-radius:12px; background:#fff; color:#c23a52; font-size:13px; font-weight:800; }
body[data-theme="pastel"] .cr .cr-leave:active { background:#fff0f3; }
body[data-theme="pastel"] .cr .cr-rejoin { display:block; width:100%; margin-top:8px; padding:9px; border:0; border-radius:12px; background:var(--gloss-blue); color:#14425e; font-size:13px; font-weight:800; }
/* 退店の確認の窓 */
#leavep .sheet { max-width:340px; }
#leavep .lv-name { margin:6px 0 2px; font-size:20px; font-weight:800; text-align:center; }
#leavep .lv-q { margin:4px 0 10px; text-align:center; font-size:15px; font-weight:700; line-height:1.6; }
#leavep .lv-q b { color:#c23a52; font-size:17px; }
#leavep .lv-btns { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
#leavep .lv-btns button { width:100%; min-height:48px; font-size:16px; font-weight:800; border-radius:14px; }
#leavep .lv-btns .ghost { border:1px solid var(--line); background:#fff; color:var(--txt); }

/* ===== キャストは暗証番号なし＝QRログインのみ：名簿の「招待QR」ボタンと招待QRの窓（パステル・2026-10-23 ユーザー指定） ===== */
body[data-theme="pastel"] .cr .cr-body > .setedit-row:first-child .cr-qr { flex:none; padding:5px 12px; white-space:nowrap; font-size:12px; font-weight:800; background:var(--gloss-blue); color:#14425e; border:0; }
#invp .sheet { max-width:340px; text-align:center; }
#invp .invp-name { margin:6px 0 8px; font-size:20px; font-weight:800; }
#invp .invp-qr { display:flex; justify-content:center; padding:10px; background:#fff; border-radius:16px; box-shadow:inset 0 0 0 1px #e6e9f2; }
#invp #invp-qr { width:240px; height:240px; max-width:100%; }
#invp .hint { text-align:left; }
/* 名簿の右上の2つのボタン：文字が折れないように／タイトルが長いときは省略 */
.cr-btns .cr-gear { white-space:nowrap; flex:none; }
body[data-theme="pastel"][data-rk="cast"] #time-roster-card .cr-gear { padding:0 10px; }
body[data-theme="pastel"][data-rk="cast"] #time-roster-card .bill-head > span:first-child, body[data-theme="pastel"][data-rk="staff"] #time-roster-card .bill-head > span:first-child { min-width:0; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* ★スタッフ名簿（パステル・2026-10-23）：右上は「退社スタッフ」ボタンだけ（設定の歯車は出さない）。行の形はキャスト名簿と同じ（.cr）。役職の札・管理✔の横の役職欄 */
body[data-theme="pastel"][data-rk="staff"] #time-roster-card .cr-gear-left { display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 10px; border:1px solid #e3e6ee; border-radius:15px; background:#fff; color:#5b6477; font-size:12.5px; font-weight:800; white-space:nowrap; flex:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
body[data-theme="pastel"][data-rk="staff"] #time-roster-card .cr-gear-left:active { transform:scale(.95); }
body[data-theme="pastel"] .cr .cr-tag.cr-role { color:#14425e; background:var(--gloss-blue, #cfe6f7); }
body[data-theme="pastel"] .cr .cr-foot .srole { flex:1 1 96px; min-width:0; min-height:32px; padding:3px 9px; font-size:13px; border-radius:9px; }
body[data-theme="pastel"] .cr .cr-grid select.sgn { width:100%; }
/* ★誰が頼んだか（2026-10-23）：メニューを押したときの窓と、カート・オーダーの行に付く札。聞かない店には出ない（部品が作られない） */
#whosheet .sheet { max-width:360px; }
#whosheet .lv-name { margin:6px 0 2px; font-size:18px; font-weight:800; text-align:center; }
#whosheet .who-note { margin:0 0 10px; text-align:center; }
#whosheet .who-guest { width:100%; min-height:48px; font-size:16px; font-weight:800; border-radius:14px; }
#whosheet .who-lab { margin:14px 0 6px; font-size:12px; font-weight:800; color:var(--sub); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
#whosheet .who-lab .mini { margin-left:auto; }
/* ★清算の支払い方法のボタン（パステルの店だけ・2026-10-23）：現金／カード／売掛／その他を押すと、その行が開いて【金額欄＋小さな全額ボタン】が横に並ぶ。
   開くまで、4つの欄と「◯◯で全額」の行は隠す（中身の欄 co-cash などは同じ＝会計の送信は今までどおり）。パステル以外は今までの見た目のまま。 */
body[data-theme="pastel"] #checkout .co-fillrow { display:none; }
body[data-theme="pastel"] #checkout .co-pairs { display:contents; }
body[data-theme="pastel"] #checkout .co-methods { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin:12px 0 10px; }
body[data-theme="pastel"] #checkout .co-m { min-height:46px; padding:0 4px; border:1px solid #e3e6ee; border-radius:14px; background:#fff; color:#5b6477; font-size:15px; font-weight:800; font-family:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,.9); -webkit-tap-highlight-color:transparent; }
body[data-theme="pastel"] #checkout .co-m:active { transform:scale(.96); }
body[data-theme="pastel"] #checkout .co-m.on { background:var(--gloss-pink); color:#5a1838; border-color:#f0a0c0; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 12px -9px rgba(226,110,160,.9); }
body[data-theme="pastel"] #checkout .co-f { display:none; }
body[data-theme="pastel"] #checkout .co-f.open { display:flex; flex-direction:row; align-items:center; gap:8px; margin:0 0 8px; font-size:14px; font-weight:800; color:var(--txt); white-space:nowrap; }
body[data-theme="pastel"] #checkout .co-f.open > input { flex:1 1 auto; min-width:0; min-height:44px; font-size:18px; font-weight:800; text-align:right; }
/* ★キャストランキング（2026-10-25）：月・並びのボタン・順位つきの行。1〜3位は色つき */
#page-rank .rk-month { display:flex; align-items:center; gap:8px; margin:8px 0; }
#page-rank .rk-month input { flex:1; min-width:0; }
#page-rank .rk-sort { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; margin:6px 0 8px; }
#page-rank .rk-sort button { min-height:38px; padding:0 2px; border:1px solid var(--line); border-radius:12px; background:var(--card2); color:var(--sub); font-size:13px; font-weight:800; font-family:inherit; }
#page-rank .rk-sort button.on { background:var(--gloss-pink, #fbd3e4); color:#5a1838; border-color:#f0a0c0; }
#page-rank .rk-total { display:flex; flex-wrap:wrap; gap:4px 12px; padding:8px 10px; margin-bottom:8px; border-radius:12px; background:var(--card2); font-size:12px; color:var(--sub); }
#page-rank .rk-total span:first-child { font-weight:800; color:var(--txt); }
#page-rank .rk-row { display:flex; gap:10px; align-items:flex-start; padding:10px; margin-bottom:8px; border:1px solid var(--line); border-radius:14px; background:var(--card); }
#page-rank .rk-no { flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; background:var(--card2); color:var(--sub); }
#page-rank .rk-1 .rk-no { background:#fbe9a8; color:#7a5a00; } #page-rank .rk-2 .rk-no { background:#e3e7ee; color:#4a5568; } #page-rank .rk-3 .rk-no { background:#f4d3b5; color:#7a4318; }
#page-rank .rk-main { flex:1; min-width:0; }
#page-rank .rk-top { display:flex; justify-content:space-between; align-items:baseline; gap:6px; }
#page-rank .rk-name { font-size:16px; } #page-rank .rk-name i { margin-left:6px; font-style:normal; font-size:11px; color:var(--sub); }
#page-rank .rk-days { font-size:11px; color:var(--sub); white-space:nowrap; }
#page-rank .rk-stats { display:flex; flex-wrap:wrap; gap:2px 14px; margin-top:4px; font-size:12px; color:var(--sub); }
#page-rank .rk-stats b { font-size:15px; color:var(--txt); }
#page-rank .rk-sub { margin-top:3px; font-size:11px; color:var(--sub); }
body[data-theme="pastel"] #checkout .co-f .co-all { flex:none; padding:0 12px; height:34px; min-height:34px; font-size:12.5px; font-weight:800; white-space:nowrap; border-radius:12px; }
#whosheet .who-chips { display:flex; flex-wrap:wrap; gap:6px; max-height:34vh; overflow-y:auto; }
#whosheet .who-chips .nm-chip { min-height:44px; justify-content:center; }
.by-tag { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:800; white-space:nowrap; vertical-align:1px; }
.by-tag.by-cast { color:#5a1838; background:#fbd3e4; }
.by-tag.by-staff { color:#14425e; background:#d3e8f7; }
/* メニュー編集：品目の「バック円」・カテゴリの「バック％」「聞く」（ドリンクバックを使う店だけ出る） */
.medit.has-cb { flex-wrap:wrap; }
.medit .cb-l { order:9; flex:1 1 100%; display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--sub); margin-top:-2px; }
.medit .cb { flex:0 0 84px; width:84px; min-width:0; min-height:32px; padding:3px 8px; font-size:13px; }
.mc-row.has-back { flex-wrap:wrap; }
.mc-row .mc-back { flex:1 1 100%; display:flex; align-items:center; gap:12px; padding-top:2px; font-size:12px; color:var(--sub); }
.mc-row .mcpctl { display:inline-flex; align-items:center; gap:4px; font-weight:700; }
.mc-row .mcpct { flex:0 0 62px; width:62px; min-width:0; min-height:32px; padding:3px 8px; font-size:13px; }
.mc-row .mcask { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700; white-space:nowrap; }
body[data-theme="pastel"] .cr .cr-leave { margin-top:6px; padding:8px; }

/* ===== 日払い伝票の一覧（営業報告・日払いのページ）：名前・金額・赤い✔・📷・確認（パステル・2026-10-23 ユーザー指定） ===== */
.dps-row { display:flex; align-items:center; gap:8px; padding:9px 10px; margin-bottom:6px; border-radius:14px; background:#f6f7fa; }
.dps-row.ok { background:#fff5f6; }
.dps-nm { flex:1 1 0; min-width:0; font-size:14.5px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dps-amt { flex:none; font-size:14.5px; font-weight:800; font-variant-numeric:tabular-nums; }
.dps-ck { flex:none; width:18px; text-align:center; font-size:19px; font-weight:900; color:#e0314f; line-height:1; }
.dps-cam { flex:none; width:40px; height:36px; border:0; border-radius:12px; background:var(--gloss-pink, #f7c6dc); font-size:18px; line-height:1; padding:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
.dps-cam:active { transform:scale(.94); }
.dps-view { flex:none; height:36px; padding:0 12px; border:0; border-radius:12px; background:var(--gloss-blue, #cfe9f8); color:#14425e; font-size:12.5px; font-weight:800; white-space:nowrap; }
.dps-view:disabled { background:#eceff5; color:#a3abba; }
.dps-ckmark { color:#e0314f; }
.dps-box { margin:0 0 16px; padding:14px; border-radius:20px; background:#fff; box-shadow:0 10px 26px -18px rgba(40,40,80,.45); }
.dps-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.dps-title { font-size:20px; font-weight:800; }
.dps-head input[type="date"] { width:auto; min-height:36px; padding:2px 8px; font-size:13px; }
.dps-sum { margin:6px 2px 10px; font-size:13px; font-weight:700; }
.dps-sum b { font-size:17px; color:#b8457a; }
.dps-box .primary:disabled { opacity:1; background:#eceff5; color:#8d95a6; box-shadow:none; font-size:14px; line-height:1.4; }

/* ===== 管理の板：サイト設定を店舗設定の中から移した（パステル・2026-10-23 ユーザー指定） ===== */
/* 店舗設定のページの入口ボタンから「サイト設定」を外す（管理の板のタイルから開く）。残る3つは、店舗設定を横いっぱいに */
body[data-theme="pastel"] #sg-site { display:none; }
body[data-theme="pastel"] #sg-store { grid-column:1 / -1; }
/* サイト設定の専用の見せ方：入口のボタンのカードは出さない */
body[data-theme="pastel"][data-sgv="site"] #page-store > .card[data-noacc]:first-child { display:none; }
/* 名簿の「招待QR」ボタン（スタッフ名簿＝パステルのキャスト名簿以外の行でも同じ形） */
.stf-row .cr-qr { flex:none; white-space:nowrap; }

/* 外立ち・指名のクイックボタン（2026-10-25） */
#rq-wrap .rq-btns { display: flex; gap: 8px; margin: 6px 0; }
#rq-wrap .rq-b { flex: 1; padding: 11px 0; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-weight: 700; font-size: 15px; }
#rq-wrap .rq-b.on { background: #ffe3ee; border-color: #f2a6c4; color: #b23a6b; }
#rq-wrap .rq-b.open { box-shadow: 0 0 0 2px rgba(178,58,107,.25); }
#rq-wrap .rq-chips { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0; -webkit-overflow-scrolling: touch; }
#rq-wrap .rq-chips .nm-chip { flex: 0 0 auto; }

/* 起動中の画面：横長のロゴを大きく中央に（設定 splash_big・2026-10-25）。白い背景の画像でも溶け込むよう multiply */
body[data-theme="pastel"] #splash .sp-logo.big { width:min(78vw,340px); height:auto; padding:0; border-radius:0; background:transparent; box-shadow:none; margin-bottom:0; mix-blend-mode:multiply; }
body[data-theme="pastel"] #splash .sp-logo.big ~ .sp-name, body[data-theme="pastel"] #splash .sp-logo.big ~ .sp-sub { display:none; }

/* ★現金経費を売上集計から取り込む店（2026-10-26）：POSから現金経費を作る入口を隠す／その店だけの案内を出す */
body.cash-exp-off .cash-only { display: none !important; }
body:not(.cash-exp-off) .cash-off-only { display: none !important; }
/* 現金経費／固定経費の切り替え：選んでいる側（上の「当月／過去経費／設定」より一段控えめ） */
#ek-cash.on, #ek-fixed.on { border-color:var(--accent); color:var(--accent); font-weight:700; }

/* ===== シフト提出のお知らせ・キャストモード（シフトのみ）・店側の打刻（2026-11-06 ユーザー指定）=====
   ★光るのは「ゆっくり」だけ（強い点滅はしない）。動きを減らす設定の端末は光らせず、太い枠で知らせる。
   ★色はテーマに頼らず固定（どのテーマの店でも同じ見え方）。 */
.sf-nag { display:flex; align-items:center; gap:12px; width:calc(100% - 20px); margin:10px 10px 0; padding:12px 14px; border:2px solid #f0508c; border-radius:16px; background:linear-gradient(180deg,#fff0f6,#ffd3e5); color:#8a1f4e; text-align:left; font:inherit; cursor:pointer; animation:sfNagGlow 1.6s ease-in-out infinite; }
.sf-nag .sn-dot { flex:none; width:12px; height:12px; border-radius:50%; background:#f0508c; animation:sfNagDot 1.6s ease-in-out infinite; }
.sf-nag .sn-tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sf-nag .sn-tx b { font-size:16px; font-weight:800; }
.sf-nag .sn-tx i { font-style:normal; font-size:12px; opacity:.9; }
.sf-nag .sn-go { flex:none; font-size:22px; line-height:1; }
.sf-nag.late { border-color:#d92b4b; background:linear-gradient(180deg,#ffe9ec,#ffc2cc); color:#8f1230; }
@keyframes sfNagGlow { 0%,100% { box-shadow:0 0 0 0 rgba(240,80,140,0), 0 6px 14px -8px rgba(240,80,140,.45); } 50% { box-shadow:0 0 0 6px rgba(240,80,140,.28), 0 8px 20px -6px rgba(240,80,140,.8); } }
@keyframes sfNagDot { 0%,100% { transform:scale(.8); } 50% { transform:scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .sf-nag, .sf-nag .sn-dot, .ch-tile.need { animation:none; } .sf-nag { border-width:3px; } }
body[data-pg="shift"] #sf-nag, body[data-pg="casthome"] #sf-nag { display:none; }      /* 出す画面・ホームでは重ねない（ホームは「シフト提出」のタイルが光る） */

/* キャストモード：3つだけ。ほかの入口は全部消す（サーバーも同じ範囲しか通さない） */
body.cast-mode #botnav, body.cast-mode #ptabs, body.cast-mode #pmore, body.cast-mode [id^="fab-"] { display:none !important; }
body.cast-mode #app { padding-bottom:calc(32px + env(safe-area-inset-bottom)); }
.ch-back { display:inline-block; margin:10px 10px 0; padding:8px 16px; border:1px solid #d6dbe6; border-radius:999px; background:#fff; color:#1f2430; font:inherit; font-weight:700; cursor:pointer; }
.ch-hello { text-align:center; padding:18px 12px; }
.ch-hello .ch-nm { font-size:20px; font-weight:800; }
.ch-grid { display:grid; grid-template-columns:1fr; gap:12px; margin-top:12px; }
.ch-tile { display:flex; align-items:center; gap:14px; width:100%; min-height:88px; padding:16px 18px; border:0; border-radius:22px; font:inherit; text-align:left; cursor:pointer; color:#1f2430; }
.ch-tile:active { transform:scale(.98); }
.ch-ic { flex:none; width:48px; height:48px; border-radius:16px; background:rgba(255,255,255,.75); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 6px 10px -6px rgba(40,50,90,.35); }
.ch-tx { flex:1; font-size:18px; font-weight:800; }
.ch-note { flex:none; text-align:right; font-size:12px; font-weight:800; color:#b0204f; white-space:nowrap; }
.ch-pink  { background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.06)) top/100% 52% no-repeat,linear-gradient(180deg,#fde4ee,#f7b8d0 56%,#f0a0c0); color:#8a2f57; }
.ch-blue  { background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.06)) top/100% 52% no-repeat,linear-gradient(180deg,#e2f4fc,#a9daf0 56%,#8ac6e4); color:#14425e; }
.ch-green { background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.06)) top/100% 52% no-repeat,linear-gradient(180deg,#e4f7ec,#a8e0bd 56%,#86cfa4); color:#17573a; }
.ch-tile.need { outline:3px solid #f0508c; outline-offset:-3px; animation:sfNagGlow 1.6s ease-in-out infinite; }

/* 店側の出勤・退勤の打刻 */
.st-row { display:flex; align-items:center; gap:10px; padding:10px 2px; border-top:1px solid rgba(128,136,160,.25); }
.st-row:first-child { border-top:0; }
.st-row.dim { opacity:.55; }
.st-row.on .st-state { font-weight:800; }
.st-nm { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.st-nm b { font-size:16px; }
.st-nm i { font-style:normal; font-size:12px; opacity:.7; }
.st-state { flex:none; font-size:12px; opacity:.9; text-align:right; max-width:9.5em; }
.st-btn { flex:none; min-width:92px; min-height:44px; padding:0 14px; border:0; border-radius:14px; font:inherit; font-size:15px; font-weight:800; cursor:pointer; color:#17573a; background:linear-gradient(180deg,#e4f7ec,#a8e0bd 56%,#86cfa4); }
.st-btn.out { color:#8a2f57; background:linear-gradient(180deg,#fde4ee,#f7b8d0 56%,#f0a0c0); }
.st-btn.arm { color:#fff; background:#e0457b; animation:sfNagGlow 1s ease-in-out infinite; }