:root {
      --bg: #f7fbff;
      --card: #ffffff;
      --main: #7ab8d8;
      --main-dark: #407c99;
      --text: #25313b;
      --muted: #64788a;
      --border: #dcebf3;
      --danger: #c84b5f;
      --bar-active: #2a78d6;
      --bar-past: #b5d4f4;
      --shadow: 0 8px 24px rgba(64, 124, 153, 0.12);

      /* 店舗ダッシュボードのSVGチャート配色(唯一の正。JSのCHARTがここを読む) */
      --chart-accent: #8fc3f2;    /* 新規・薄い水色 */
      --chart-accent2: #5aa9e6;   /* ドーナツ2色目 */
      --chart-accent3: #c9dff5;   /* ドーナツ4色目 */
      --chart-rep: #e07a2f;       /* リピート率の橙 */
      --chart-cur-bg: #eaf3fc;    /* 当月ハイライト帯 */
      --chart-track: #eef4f9;     /* ドーナツの土台 */
      --chart-care-warn: #b7791f; /* 要注意(ペース)の琥珀 */
      --chart-forecast: #f5871f;  /* 着地見込み(点線・予測チップ)の橙 */
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      padding: 16px;
      padding-bottom: calc(16px + env(safe-area-inset-bottom));
      background: #f4f9ff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      -webkit-font-smoothing: antialiased;
      -webkit-tap-highlight-color: transparent;
    }

    /* メッシュグラデーション背景(固定レイヤー。iOSのbackground-attachment問題を回避) */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -1;
      transform: translateZ(0);   /* 自前レイヤーに合成(スクロール毎の再描画を防ぐ) */
      will-change: transform;
      background:
        radial-gradient(62% 48% at 6% -2%, rgba(255, 176, 205, .92), transparent 60%),
        radial-gradient(58% 46% at 102% 10%, rgba(186, 148, 240, .82), transparent 62%),
        radial-gradient(50% 40% at 20% 55%, rgba(255, 205, 150, .55), transparent 60%),
        radial-gradient(80% 60% at 52% 104%, rgba(120, 170, 240, .88), transparent 68%),
        radial-gradient(60% 50% at 88% 78%, rgba(150, 224, 210, .55), transparent 66%),
        linear-gradient(180deg, #eef5ff 0%, #fbf6ff 100%);
    }

    /* キーボード・スイッチ操作時のフォーカス表示(マウス/タップでは出ない) */
    :focus-visible {
      outline: 2px solid var(--main-dark);
      outline-offset: 2px;
      border-radius: 6px;
    }

    button, select, input { font-family: inherit; }

    .app { max-width: 480px; margin: 0 auto; }

    /* ---- プロフィールカード(白フチ+全幅写真) ---- */
    .profile-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 26px;
      padding: 8px 8px 2px;
      box-shadow: var(--shadow);
      margin-bottom: 10px;
    }

    .hero {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 20px;
      overflow: hidden;
      background: linear-gradient(135deg, #f8c8d8, #c9a8f0 55%, #8fb8ea);
    }

    .hero-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero-fallback {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 56px;
      font-weight: 800;
      color: rgba(255, 255, 255, .9);
    }

    .hero-name {
      position: absolute;
      top: 14px; left: 16px; right: 16px;
      color: #fff;
      /* 多層の黒グロー(強度35/100)。明るい写真でも名前が読める最小限の縁取り */
      text-shadow:
        0 0 1.7px rgba(0, 0, 0, .30),
        0 0 2.1px rgba(0, 0, 0, .21),
        0 0 4.9px rgba(0, 0, 0, .14),
        0 1px 2px rgba(0, 0, 0, .25);
    }

    .hero-name .nm {
      font-size: 28px;
      font-weight: 800;
      line-height: 1.15;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .hero-name .st { font-size: 16px; opacity: .92; margin-top: 2px; }

    /* 名前の横に小さくstaffID(cast_id) */
    .hero-name .nm .sid { font-size: 13px; font-weight: 700; opacity: .78; margin-left: 4px; letter-spacing: 0; }

    /* 生涯レベル(到達済み最高マイルストーン)ピル */
    .lv-pill {
      display: inline-block;
      font-size: 11px;
      font-weight: 800;
      background: rgba(255, 255, 255, .22);
      border: 1px solid rgba(255, 255, 255, .4);
      border-radius: 999px;
      padding: 1px 9px;
      margin-left: 7px;
      vertical-align: 2px;
      letter-spacing: .02em;
    }

    /* ログインストリーク(開くだけで伸びる・売上非依存の連続日数)ピル */
    .streak-pill { background: rgba(255, 174, 66, .32); border-color: rgba(255, 214, 140, .6); }

    .hero-tiara { font-size: 18px; }
    .tiara--silver { filter: grayscale(1) brightness(1.6); }
    .tiara--bronze { filter: sepia(1) saturate(2.4) hue-rotate(-28deg) brightness(.95); }

    /* 写真下端のトロフィー(2行まで。あふれは +N で写真下トレイへ) */
    .hero-chips {
      position: absolute;
      left: 10px; right: 10px; bottom: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
      overflow: hidden;
    }

    .hero-more {
      position: absolute;
      right: 10px; bottom: 8px;
      z-index: 3;
      font-size: 10px;
      font-weight: 700;
      color: #fff;
      background: rgba(0, 0, 0, .5);
      border: none;
      border-radius: 999px;
      padding: 3px 9px;
      cursor: pointer;
    }

    .trophy-tray { display: none; padding: 10px 6px 2px; }
    .trophy-tray.open { display: block; }
    .trophy-tray .trophies { display: flex; flex-wrap: wrap; gap: 3px; }

    .tray-close {
      display: block;
      margin: 8px 0 0 auto;
      border: none;
      background: none;
      font-size: 11px;
      font-weight: 700;
      color: var(--main-dark);
      cursor: pointer;
    }

    /* 情報エリア: flexギャップで縦リズムを一定に(display:noneの子は隙間を作らない)。
       container-typeは今日ゾーンの2カラム化(コンテナクエリ)用 */
    .info {
      padding: 14px 8px 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      container-type: inline-size;
    }

    /* スコアクラスタ(挨拶/月/金額/チップ行)は内部を密に */
    .score { display: flex; flex-direction: column; gap: 3px; }

    /* お金コンテキストのチップ1行(時給UP+昨日から。同じ丸ピルで並ぶ) */
    .chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
    .chip-row #ydRow { display: contents; }   /* 中のチップをこの行に直接並べる */

    /* きょうの儀式ペア: 通常は縦積み、340cqw以上でフォーカス+ひとことを横並び */
    /* きょうゾーンは常に縦積み(フォーカスとひとことは内部構造が違い、
       横並びだと高さ・見出し位置がガタついて壊れて見える。2026-07-16報告で2カラム廃止) */
    #todayZone { display: grid; grid-template-columns: 1fr; gap: 10px; }

    /* 直下の見出しはギャップに任せて余白を持たない(グラフとは負マージンで密着) */
    .info > .chart-title { margin: 2px 0 -6px; }
    #shiftSec .chart-title { margin: 0 0 8px; }
    .info > .bar-labels { margin-top: -10px; }

    /* ---- 「●月のデータ」カード(月別データを1枚に集約。中身は枠なしタイル+区切り線) ---- */
    .month-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 14px 14px 16px;
      box-shadow: var(--shadow);
      margin-bottom: 10px;
    }

    /* 本物のカルーセル: 全月のカードを横に並べ、隣のカードが画面端でわずかに覗く。
       左右パディングはJSが「端のカードも中央に来る量」に設定する(padding:16px は初期値) */
    .mc-carousel {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      /* CSSスナップは使わない(端カードや非対称パディングでブラウザのスナップ点と
         JSの中央計算がズレ、PCで別位置へ引き戻される)。中央吸着はJSで行う。 */
      margin: 0 -16px 10px;
      padding: 4px 16px 8px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .mc-carousel::-webkit-scrollbar { display: none; }

    .mc-carousel .month-card {
      flex: 0 0 auto;
      width: min(91vw, 450px);   /* メインを広く/左右は「かろうじて覗く」量だけ残す */
      margin-bottom: 0;
    }

    /* 中央以外のカードは沈めて「隣がある」と分かる程度に(タップで移動)。
       初期描画は不透明→JSが非中央に .mc-dim を付ける(中央カードは遷移させない) */
    .mc-carousel .month-card.mc-dim { opacity: .45; cursor: pointer; }

    /* カードヘッダー: 大きめの月タイトル + 左右の移動ボタン */
    .mc-head {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 14px;
    }

    .mc-arrow {
      width: 34px;
      height: 34px;
      flex-shrink: 0;
      border: none;
      border-radius: 50%;
      background: var(--bg);
      color: var(--main-dark);
      font-size: 20px;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
    }

    .mc-arrow:disabled { opacity: .25; cursor: default; }
    .mc-arrow:active:not(:disabled) { transform: scale(.9); }

    .mc-title {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 7px;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -.01em;
    }

    /* ページドット(左=古い月 → 右=新しい月。現在位置はピル形状) */
    .mc-dots { display: flex; justify-content: center; gap: 5px; margin: 14px 0 8px; }

    .mc-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--border);
      transition: all .25s ease;
    }

    .mc-dot.on { width: 18px; background: var(--bar-active); }

    /* カードinカードを避ける: 中の小要素は「タイル」(枠・影なし)に平坦化 */
    .month-card .mini { background: var(--bg); border: none; box-shadow: none; }
    .month-card .mini-wide { grid-column: 1 / -1; }

    .month-card .trend-card {
      background: transparent;
      border: none;
      box-shadow: none;
      border-radius: 0;
      padding: 12px 0 2px;
      margin-top: 8px;
      border-top: 1px solid var(--border);
    }

    .month-card .chart-title { margin: 20px 0 8px; font-size: 13.5px; font-weight: 700; color: var(--muted); letter-spacing: 0; }

    /* 固定ブロック(info)内の推移カードは、上の3か月バーと馴染むようフラット表示 */
    .info .trend-card {
      background: transparent;
      border: none;
      box-shadow: none;
      border-radius: 0;
      padding: 6px 0 2px;
      margin-top: 4px;
    }
    .info .trend-card .trend-title { display: none; }   /* 見出しは上位の chart-title を使う */

    .chip {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      border-radius: 9px;
      padding: 2px 7px;
      line-height: 1.3;
      position: relative;
      overflow: hidden;
    }

    .chip-icon { display: inline-block; }

    .chip-ym {
      font-size: 8px;
      opacity: .72;
      font-variant-numeric: tabular-nums;
    }

    .chip-main {
      display: flex;
      align-items: center;
      gap: 2px;
      font-size: 9px;
      font-weight: 700;
      white-space: nowrap;
    }

    /* ---- トロフィー演出 ---- */
    @keyframes shineBg { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
    @keyframes sweep { 0% { left: -60%; } 55% { left: 130%; } 100% { left: 130%; } }
    @keyframes gemShake {
      0%, 100% { transform: rotate(0); }
      15% { transform: rotate(-16deg); }
      30% { transform: rotate(13deg); }
      45% { transform: rotate(-9deg); }
      60% { transform: rotate(6deg); }
      75% { transform: rotate(-3deg); }
    }
    @keyframes textPulse {
      0%, 100% { opacity: 1; text-shadow: 0 0 6px rgba(255,255,255,.95); }
      50% { opacity: .72; text-shadow: none; }
    }
    @keyframes bob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-2px); }
    }
    @keyframes twinkle {
      0%, 100% { opacity: 0; transform: scale(.6); }
      50% { opacity: 1; transform: scale(1.2); }
    }
    @keyframes spinSlow {
      to { transform: rotate(360deg); }
    }

    /* 系列1位:流動グラデ+光沢+文字明滅+リボン */
    .chip--legend {
      background: linear-gradient(120deg, #f9d423, #ff8360, #f6d365, #f9d423);
      background-size: 250% 100%;
      animation: shineBg 3s linear infinite;
      color: #5b2d00;
      box-shadow: 0 0 10px rgba(255, 150, 80, .55);
    }
    .chip--legend::after {
      content: '';
      position: absolute;
      top: 0; left: -60%;
      width: 45%; height: 100%;
      background: linear-gradient(105deg, transparent, rgba(255,255,255,.9), transparent);
      animation: sweep 2.4s ease-in-out infinite;
    }
    .chip--legend::before {
      content: '';
      position: absolute;
      top: -4px; left: -10px;
      width: 26px; height: 8px;
      background: #e2434b;
      transform: rotate(-38deg);
      box-shadow: 0 1px 2px rgba(0,0,0,.25);
    }
    .chip--legend .chip-main { animation: textPulse 1.7s ease-in-out infinite; }
    .chip--legend .chip-icon { animation: bob 1.4s ease-in-out infinite; }

    /* 系列2〜5位:コーラルゴールド+光沢 */
    .chip--coral {
      background: linear-gradient(120deg, #ffb199, #ffd280, #ffb199);
      background-size: 220% 100%;
      animation: shineBg 4s linear infinite;
      color: #712b13;
    }
    .chip--coral::after {
      content: '';
      position: absolute;
      top: 0; left: -60%;
      width: 40%; height: 100%;
      background: linear-gradient(105deg, transparent, rgba(255,255,255,.75), transparent);
      animation: sweep 3.2s ease-in-out infinite;
    }

    /* 店舗1位:ゴールド+光沢+アイコン上下 */
    .chip--gold {
      background: linear-gradient(120deg, #f5d76e, #fce9a8, #f5d76e);
      background-size: 220% 100%;
      animation: shineBg 4.5s linear infinite;
      color: #6a4a00;
    }
    .chip--gold::after {
      content: '';
      position: absolute;
      top: 0; left: -60%;
      width: 40%; height: 100%;
      background: linear-gradient(105deg, transparent, rgba(255,255,255,.8), transparent);
      animation: sweep 3.6s ease-in-out infinite;
    }
    .chip--gold .chip-icon { animation: bob 1.6s ease-in-out infinite; }

    /* 店舗2〜3位:シルバー / 4〜5位:ブロンズ / 6〜10位:従来 */
    .chip--silver {
      background: linear-gradient(120deg, #dfe4ea, #f8fafc, #dfe4ea);
      color: #41505f;
    }
    .chip--bronze {
      background: linear-gradient(120deg, #e8c39e, #f6e2cd, #e8c39e);
      color: #6e4a23;
    }
    .chip--r10 { background: #eeedfe; color: #3c3489; }

    /* ==== マイルストーン18段階 ==== */

    /* --- 100万未満:淡い無地(静) --- */
    .ms5   { background: #e6f4e0; color: #2f6b2a; }
    .ms15  { background: #fde8f0; color: #8f2f5c; }
    .ms35  { background: #f6ead9; color: #7a5024; }
    .ms50  { background: #e3f2fd; color: #1a5b8f; }
    .ms80  { background: #fbe4ea; color: #96274b; }

    /* --- 100〜150万:流動グラデ+光沢 --- */
    .ms100 {
      background: linear-gradient(120deg, #f7e08a, #fdf3c9, #f7e08a);
      background-size: 230% 100%;
      animation: shineBg 6s linear infinite;
      color: #6a4a00;
    }
    .ms100::after { content: ''; position: absolute; top: 0; left: -60%; width: 38%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.7), transparent); animation: sweep 5s ease-in-out infinite; }

    .ms125 {
      background: linear-gradient(120deg, #9ec9f5, #d8ecff, #9ec9f5);
      background-size: 230% 100%;
      animation: shineBg 5.5s linear infinite;
      color: #143f6b;
    }
    .ms125::after { content: ''; position: absolute; top: 0; left: -60%; width: 38%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.7), transparent); animation: sweep 4.6s ease-in-out infinite; }

    .ms150 {
      background: linear-gradient(120deg, #d3b8f5, #efe2ff, #c9a8f0);
      background-size: 230% 100%;
      animation: shineBg 5.2s linear infinite;
      color: #4a2380;
    }
    .ms150::after { content: ''; position: absolute; top: 0; left: -60%; width: 38%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.7), transparent); animation: sweep 4.4s ease-in-out infinite; }

    /* --- 200〜400万:+アイコンが上下に揺れる --- */
    .ms200 {
      background: linear-gradient(120deg, #e6e9f0, #ffffff, #cfd6e6);
      background-size: 230% 100%;
      animation: shineBg 5s linear infinite;
      color: #3b4a63;
    }
    .ms200::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.85), transparent); animation: sweep 4.2s ease-in-out infinite; }
    .ms200 .chip-icon { animation: bob 1.8s ease-in-out infinite; }

    .ms250 {
      background: linear-gradient(120deg, #f3e9dd, #fffaf0, #e8d8c8);
      background-size: 230% 100%;
      animation: shineBg 4.8s linear infinite;
      color: #6e5232;
    }
    .ms250::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.85), transparent); animation: sweep 4s ease-in-out infinite; }
    .ms250 .chip-icon { animation: bob 1.8s ease-in-out infinite; }

    .ms300 {
      background: linear-gradient(120deg, #cdd6ea, #eef2fb, #aebbdd);
      background-size: 230% 100%;
      animation: shineBg 4.6s linear infinite;
      color: #2e3d63;
    }
    .ms300::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.85), transparent); animation: sweep 3.8s ease-in-out infinite; }
    .ms300 .chip-icon { animation: bob 1.7s ease-in-out infinite; }

    .ms400 {
      background: linear-gradient(120deg, #2f3d66, #5a6ea8, #2f3d66);
      background-size: 230% 100%;
      animation: shineBg 4.4s linear infinite;
      color: #fff;
      box-shadow: 0 0 8px rgba(90, 110, 168, .5);
    }
    .ms400::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.7), transparent); animation: sweep 3.6s ease-in-out infinite; }
    .ms400 .chip-icon { animation: bob 1.7s ease-in-out infinite; }

    /* --- 500〜700万:+発光 --- */
    .ms500 {
      background: linear-gradient(120deg, #f6c04c, #ffe9a8, #f2994a);
      background-size: 230% 100%;
      animation: shineBg 4s linear infinite;
      color: #6a3d00;
      box-shadow: 0 0 9px rgba(246, 192, 76, .55);
    }
    .ms500::after { content: ''; position: absolute; top: 0; left: -60%; width: 42%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.85), transparent); animation: sweep 3.2s ease-in-out infinite; }
    .ms500 .chip-icon { animation: bob 1.5s ease-in-out infinite; }

    .ms600 {
      background: linear-gradient(120deg, #3b1d5e, #7b4fd8, #1d2f6e);
      background-size: 230% 100%;
      animation: shineBg 3.8s linear infinite;
      color: #fff;
      box-shadow: 0 0 9px rgba(123, 79, 216, .55);
    }
    .ms600::after { content: ''; position: absolute; top: 0; left: -60%; width: 42%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.75), transparent); animation: sweep 3s ease-in-out infinite; }
    .ms600::before { content: 'º6'; position: absolute; top: 0; right: 3px; font-size: 8px; color: #d9c8ff; animation: twinkle 1.6s ease-in-out infinite; }
    .ms600 .chip-icon { animation: bob 1.5s ease-in-out infinite; }

    .ms700 {
      background: linear-gradient(120deg, #0f7b5f, #3fd0a4, #0f7b5f);
      background-size: 230% 100%;
      animation: shineBg 3.6s linear infinite;
      color: #fff;
      box-shadow: 0 0 9px rgba(63, 208, 164, .55);
    }
    .ms700::after { content: ''; position: absolute; top: 0; left: -60%; width: 42%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.8), transparent); animation: sweep 2.9s ease-in-out infinite; }
    .ms700 .chip-icon { animation: gemShake 1.9s ease-in-out infinite; }

    /* --- 800〜1000万:最上位(きらめき・回転・全部載せ) --- */
    .ms800 {
      background: linear-gradient(120deg, #5a2d82, #c9a227, #5a2d82);
      background-size: 240% 100%;
      animation: shineBg 3.3s linear infinite;
      color: #fff;
      box-shadow: 0 0 10px rgba(201, 162, 39, .55);
    }
    .ms800::after { content: ''; position: absolute; top: 0; left: -60%; width: 44%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.85), transparent); animation: sweep 2.7s ease-in-out infinite; }
    .ms800::before { content: 'º6'; position: absolute; top: 0; right: 3px; font-size: 8px; color: #ffe9a8; animation: twinkle 1.5s ease-in-out infinite; }
    .ms800 .chip-icon { animation: bob 1.4s ease-in-out infinite; }

    .ms900 {
      background: linear-gradient(120deg, #f7971e, #ffd200, #f7971e);
      background-size: 240% 100%;
      animation: shineBg 3s linear infinite;
      color: #6a3600;
      box-shadow: 0 0 12px rgba(255, 180, 40, .65);
    }
    .ms900::after { content: ''; position: absolute; top: 0; left: -60%; width: 44%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.9), transparent); animation: sweep 2.5s ease-in-out infinite; }
    .ms900 .chip-icon { animation: spinSlow 6s linear infinite; }

    .ms1000 {
      background: linear-gradient(120deg, #4a2c82, #b8860b, #f0c419, #4a2c82);
      background-size: 260% 100%;
      animation: shineBg 2.8s linear infinite;
      color: #fff;
      box-shadow: 0 0 12px rgba(240, 196, 25, .65);
    }
    .ms1000::after { content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.9), transparent); animation: sweep 2.3s ease-in-out infinite; }
    .ms1000::before { content: 'º6'; position: absolute; top: 0; right: 3px; font-size: 8px; color: #ffe9a8; animation: twinkle 1.4s ease-in-out infinite; }
    .ms1000 .chip-icon { animation: gemShake 1.8s ease-in-out infinite; }

    /* 動きを抑える設定のユーザーにはアニメーションを止める */
    @media (prefers-reduced-motion: reduce) {
      .sk { animation: none !important; }
      .ms-progress-fill { transition: none !important; }
      .button:active:not(:disabled) { transform: none; }
      .mc-dot { transition: none !important; }
      .mc-carousel { scroll-behavior: auto !important; }
      .chip, .chip::before, .chip::after,
      .chip .chip-main, .chip .chip-icon {
        animation: none !important;
      }
    }

    .admin-bar {
      background: #fff7ec;
      border: 1px solid #f3e2c4;
      border-radius: 16px;
      padding: 10px 12px;
      margin: 0 0 10px;
    }

    .admin-title {
      font-size: 11px;
      font-weight: 700;
      color: #854f0b;
      margin-bottom: 6px;
    }

    .admin-select {
      width: 100%;
      border: 1px solid #f3e2c4;
      border-radius: 10px;
      padding: 8px 10px;
      min-height: 44px;   /* タップ領域を44px以上に確保 */
      font-size: 14px;
      background: #fff;
      outline: none;
    }

    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 16px;
      margin: 0 0 10px;
      box-shadow: var(--shadow);
    }

    .big-label-row { display: flex; align-items: center; gap: 6px; }

    .big-label { color: var(--muted); font-size: 12px; }

    .live-tag {
      font-size: 10px;
      font-weight: 700;
      background: #e1f5ee;
      color: #085041;
      border-radius: 999px;
      padding: 2px 8px;
    }

    .big-number {
      font-size: 32px;
      font-weight: 800;
      letter-spacing: -0.03em;
      font-variant-numeric: tabular-nums;
    }

    /* 進行中の月のみ:売上の右に「次の時給UPまであと◯◯万円」チップ */
    /* 次の時給UPチップ(小さく・売上額の右に収める。ダーク配色で視認性優先) */
    .next-chip {
      padding: 3px 9px;
      border-radius: 999px;
      flex-direction: row;   /* .chipのcolumnを上書きして1行表示 */
      align-items: baseline;
      gap: 2px;
      background: linear-gradient(135deg, #2c3a49, #1f2b38);
      color: #fff;
      box-shadow: 0 1px 5px rgba(0, 0, 0, .16);
      white-space: nowrap;
    }

    .next-chip .nc-small {
      font-size: 9px;
      font-weight: 700;
      color: rgba(255, 255, 255, .78);
    }

    .next-chip .nc-strong {
      font-size: 11px;
      font-weight: 800;
      color: #ffd98e;
      font-variant-numeric: tabular-nums;
    }

    /* タイポ階層(2026-07-18): ページのセクション見出し(16.5px濃) > カード内見出し(13.5px薄) > 本文。
       ボード(.bd2)と同じ原則。月カード内のchart-titleは下のoverrideで内側見出しに落とす */
    .chart-title { font-size: 16.5px; font-weight: 800; color: var(--text); margin: 26px 0 10px; letter-spacing: .01em; }

    /* 今月のシフト(スクロール無しで全日を1画面に収める3行テーブル。日付/曜日/●=出勤) */
    .shift-wrap {
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--card);
      overflow: hidden;
    }

    .shift-table { border-collapse: collapse; width: 100%; table-layout: fixed; }

    .shift-table th,
    .shift-table td {
      text-align: center;
      border-left: 1px solid var(--border);
      padding: 0;
      overflow: hidden;
    }

    .shift-table th:first-child,
    .shift-table td:first-child { border-left: none; }

    .shift-table th { font-weight: 700; background: var(--bg); }

    .shift-table tr.shift-days th {
      font-size: 10px;
      color: var(--text);
      padding: 4px 0 1px;
      letter-spacing: -0.04em;
    }

    .shift-table tr.shift-dows th {
      font-size: 8px;
      color: var(--muted);
      padding: 0 0 3px;
      border-bottom: 1px solid var(--border);
    }

    .shift-table tr.shift-dows th.shift-sat { color: #4a90c2; }
    .shift-table tr.shift-dows th.shift-sun { color: var(--danger); }

    .shift-table td { padding: 7px 0; line-height: 0; }

    .shift-dot {
      display: inline-block;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--bar-active);
    }

    .shift-table th.shift-today,
    .shift-table td.shift-today { background: #e3f2fd; }

    /* 前半・後半の2段の区切り(カード内に薄い帯) */
    .shift-table + .shift-table { border-top: 5px solid var(--bg); }

    .shift-empty { font-size: 11px; color: var(--muted); text-align: center; padding: 14px 8px; }

    /* 目標未設定(他人のページを見ている時)の表示 */
    .goal-unset {
      font-size: 12px;
      color: var(--muted);
      background: var(--bg);
      border: 1px dashed var(--border);
      border-radius: 10px;
      padding: 10px 12px;
    }

    .bars {
      display: flex;
      align-items: flex-end;
      gap: 10px;
      height: 62px;
    }

    .bar-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
    }

    .bar-value {
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 2px;
      font-variant-numeric: tabular-nums;
    }

    .bar {
      width: 100%;
      max-width: 68px;
      border-radius: 5px 5px 0 0;
    }

    /* 進行中の月:実績(実線)の上にペース予測(点線)を重ねて着地見込みを見せる */
    .bar-wrap {
      width: 100%;
      max-width: 68px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    /* 予測の伸びしろ(橙点線。6か月折れ線の予測表現と統一) */
    .bar-forecast {
      width: 100%;
      border: 1.5px dashed var(--chart-forecast);
      border-bottom: none;
      border-radius: 5px 5px 0 0;
      background: rgba(245, 135, 31, .10);
      box-sizing: border-box;
    }

    .bar-wrap .bar.has-fc { border-radius: 0; }   /* 予測が上に載る月は実線バーの角を四角に */

    /* 予測チップ(橙塗り白抜き。6か月折れ線の「予測◯」チップと統一) */
    .bar-fc-tag {
      font-size: 9px;
      font-weight: 800;
      color: #fff;
      background: var(--chart-forecast);
      border-radius: 999px;
      padding: 1px 7px;
      margin-bottom: 2px;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .bar-labels { display: flex; gap: 10px; margin-top: 4px; }

    .bar-label { flex: 1; text-align: center; font-size: 12px; color: var(--muted); }

    .bar-label.active { color: var(--text); font-weight: 700; }

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .trend-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 12px 14px;
      margin-top: 10px;
      box-shadow: var(--shadow);
    }

    .trend-title {   /* カード内見出し: ページのchart-title(16.5px濃)より一段下げる */
      font-size: 13.5px;
      font-weight: 700;
      color: var(--muted);
      margin-bottom: 6px;
    }

    .rg-note { margin-top: 6px; font-size: 12.5px; color: #5a6b82; background: #f2f6fb;
      border-radius: 9px; padding: 7px 10px; }
    .rg-note.ok { color: #0e7a54; background: #e9f7f0; }
    .rg-note b { font-size: 14px; }
    .trend-legend {
      display: flex;
      gap: 14px;
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 4px;
    }

    .trend-legend span { display: flex; align-items: center; gap: 4px; }

    .legend-box {
      width: 10px;
      height: 10px;
      border-radius: 2px;
      display: inline-block;
    }

    .mini {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 10px 12px;
    }

    .mini-label { color: var(--muted); font-size: 11px; margin-bottom: 2px; }

    .mini-value {
      font-size: 16px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }

    .button {
      width: 100%;
      border: none;
      border-radius: 14px;
      background: var(--main);
      color: white;
      padding: 14px 16px;
      font-weight: 700;
      font-size: 15px;
      cursor: pointer;
    }

    .button:disabled { opacity: .5; }

    .button:active:not(:disabled) { transform: scale(.98); }

    .button.secondary {
      background: transparent;
      color: var(--main-dark);
      border: 1px solid var(--border);
      margin-top: 10px;
    }

    .input {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 14px;
      font-size: 16px;
      margin: 10px 0 12px;
      outline: none;
      text-transform: uppercase;
      background: var(--card);
      color: var(--text);
    }

    .input:focus { border-color: var(--main); }

    .message { color: var(--muted); font-size: 14px; line-height: 1.7; word-break: break-all; }

    .error { color: var(--danger); font-weight: 700; }

    .form-error { color: var(--danger); font-size: 13px; font-weight: 700; margin: -4px 0 10px; }

    /* ---- 新人オンボーディング(招待コード登録) ---- */
    .button-sub {
      background: transparent;
      color: var(--main-dark);
      border: 1.5px solid var(--main);
      box-shadow: none;
    }
    .nb-entry { margin-top: 14px; }
    .nb-entry-t { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
    .nb-field { margin-bottom: 10px; }
    .nb-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); margin: 0 0 4px 2px; }
    /* フォームのセクション見出し(基本情報/連絡先/緊急連絡先…) */
    .nb-sec {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 800;
      color: var(--text);
      margin: 18px 0 8px;
    }
    .nb-sec::after { content: ''; flex: 1; height: 1px; background: var(--border); }
    .nb-hint { font-size: 10px; color: #b06a1e; margin: -2px 0 4px 2px; }
    .nb-req {
      display: inline-block;
      font-size: 9px;
      font-weight: 800;
      color: #fff;
      background: var(--main-dark);
      border-radius: 6px;
      padding: 1px 6px;
      vertical-align: 1px;
    }

    .loading { padding: 40px 0; text-align: center; color: var(--muted); }

    /* スケルトン(読み込み中のプレースホルダー) */
    @keyframes skShimmer { to { background-position: -200% 0; } }

    .sk {
      border-radius: 16px;
      background: linear-gradient(90deg, #e9f1f7 25%, #f7fbfd 45%, #e9f1f7 65%);
      background-size: 200% 100%;
      animation: skShimmer 1.3s linear infinite;
    }

    .sk-hero { aspect-ratio: 1 / 1; border-radius: 24px; }
    .sk-line { height: 16px; margin-top: 12px; }
    .sk-card { height: 140px; margin-top: 12px; }

    /* 次のマイルストーンへの進捗バー(進行中の月のみ) */
    .ms-progress {
      height: 6px;
      border-radius: 999px;
      background: #e7eff6;
      overflow: hidden;
      margin: 8px 0 3px;
    }

    .ms-progress-fill {
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--main), var(--bar-active));
      transition: width .6s cubic-bezier(.22, 1, .36, 1);
    }

    .ms-progress-label {
      font-size: 10px;
      color: var(--muted);
      font-variant-numeric: tabular-nums;
    }

    /* パフォーマンス分析カードの補足行 */
    .mini-sub { color: var(--muted); font-size: 10px; margin-top: 2px; }
    .mini-sub.kpi-up { color: #1e8e5a; font-weight: 700; }

    /* ===== パフォーマンス分析(表彰ショーケース。月データとは別の独立カード) ===== */
    .perf-section { margin-top: 14px; }
    .perf-section .perf-title { font-size: 16px; margin: 2px 0 12px; }
    .perf-title { display: flex; align-items: center; gap: 6px; }
    .perf { display: flex; flex-direction: column; gap: 10px; }
    .perf-card { position: relative; overflow: hidden; border-radius: 18px; padding: 14px 16px; }

    /* 自己ベスト = ゴールドの表彰カード(シャイン+浮遊アイコン) */
    .perf-best {
      display: flex; align-items: center; gap: 14px;
      background: linear-gradient(135deg, #fff7e3 0%, #ffe8b4 46%, #ffd884 100%);
      border: 1px solid #f0d08a;
      box-shadow: 0 10px 24px -12px rgba(190,140,25,.6), inset 0 1px 0 rgba(255,255,255,.7);
    }
    .perf-best::after {
      content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
      background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
      transform: skewX(-18deg); animation: perfShine 4s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes perfShine { 0%, 55% { left: -70%; } 100% { left: 140%; } }
    .perf-best-ic { font-size: 36px; line-height: 1; flex: none; filter: drop-shadow(0 3px 5px rgba(150,100,10,.4)); animation: perfBob 2.4s ease-in-out infinite; }
    @keyframes perfBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
    .perf-best-body { position: relative; z-index: 1; flex: 1; min-width: 0; }
    .perf-best-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #a06f14; }
    .perf-best-val {
      font-size: 27px; font-weight: 900; line-height: 1.06; margin-top: 1px;
      background: linear-gradient(180deg, #8a5807, #c2871a); -webkit-background-clip: text;
      background-clip: text; -webkit-text-fill-color: transparent;
      text-shadow: 0 1px 0 rgba(255,255,255,.35);
    }
    .perf-best-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; color: #8a5e13; }
    .perf-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
    .perf-badge.hot { background: linear-gradient(135deg, #ff6a3d, #ef3d5a); color: #fff; box-shadow: 0 3px 9px -3px rgba(239,61,90,.65); animation: perfPulse 1.6s ease-in-out infinite; }
    .perf-badge.pace { background: linear-gradient(135deg, #21b07a, #159e8f); color: #fff; box-shadow: 0 3px 9px -3px rgba(21,158,120,.55); }
    @keyframes perfPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
    .perf-best.perf-empty { background: linear-gradient(135deg, #f4f6fb, #eef1f8); border-color: var(--border); box-shadow: none; }
    .perf-best.perf-empty::after { display: none; }
    .perf-best.perf-empty .perf-best-val { -webkit-text-fill-color: initial; background: none; color: var(--text); font-size: 20px; }
    .perf-best.perf-empty .perf-best-label { color: var(--muted); }

    /* トロフィー = コレクションカード */
    .perf-trophy { background: linear-gradient(135deg, #f4f1ff, #e9f0ff); border: 1px solid #ddd6f4; }
    .perf-tr-head { display: flex; align-items: center; gap: 8px; }
    .perf-tr-ic { font-size: 20px; }
    .perf-tr-ttl { font-size: 13px; font-weight: 800; color: #4a3f7a; }
    .perf-tr-count { margin-left: auto; font-size: 23px; font-weight: 900; color: #6b4fc0; line-height: 1; }
    .perf-tr-count small { font-size: 12px; font-weight: 700; margin-left: 1px; }
    .perf-tr-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
    .perf-tr-more { align-self: center; font-size: 11px; font-weight: 800; color: #6b4fc0; padding: 0 2px; }
    .perf-tr-msg { font-size: 11px; color: #6f679a; margin-top: 9px; font-weight: 600; }
    .perf-trophy.perf-empty .perf-tr-count { color: #b3accf; }

    @media (prefers-reduced-motion: reduce) {
      .perf-best::after, .perf-best-ic, .perf-badge.hot { animation: none; }
    }

    /* ---- 今月の目標+コーチ(Duolingo風の応援設計) ---- */
    .goal-sec { margin-top: 0; }

    .goal-set-btn {
      width: 100%;
      border: 1.5px dashed var(--main);
      background: transparent;
      color: var(--main-dark);
      border-radius: 12px;
      padding: 10px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }

    .goal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .goal-edit-btn {
      border: none;
      background: none;
      color: var(--muted);
      font-size: 11px;
      cursor: pointer;
      padding: 2px 4px;
    }

    .goal-progress { height: 10px; margin: 0 0 8px; }

    .goal-progress .ms-progress-fill {
      background: linear-gradient(90deg, #f7b6cf, #e59bde 55%, #9fb8f2);
    }

    .goal-input-row { display: flex; gap: 8px; margin-top: 6px; }

    .goal-input {
      flex: 1;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 12px;
      font-size: 16px;
      outline: none;
      background: var(--card);
      color: var(--text);
      min-width: 0;
    }

    .goal-input:focus { border-color: var(--main); }

    .goal-save-btn {
      border: none;
      border-radius: 12px;
      background: var(--main);
      color: #fff;
      font-weight: 700;
      font-size: 13px;
      padding: 10px 16px;
      cursor: pointer;
      white-space: nowrap;
    }

    /* 目標プリセット(安心/挑戦/本気)。自由入力の前に「選ぶだけ」の選択肢を出して設定の摩擦を下げる */
    .goal-presets { display: flex; gap: 8px; margin-top: 6px; }

    .gp-btn {
      flex: 1;
      min-height: 48px;
      border: 1.5px solid var(--border);
      border-radius: 12px;
      background: var(--card);
      color: var(--text);
      cursor: pointer;
      padding: 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
    }

    .gp-btn:active { transform: scale(.97); }
    .gp-btn.on { border-color: var(--main); background: rgba(122, 184, 216, .14); }
    .gp-name { font-size: 11px; font-weight: 700; color: var(--muted); }
    .gp-btn.on .gp-name { color: var(--main-dark); }
    .gp-val { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
    .gp-hint { font-size: 10px; color: var(--muted); margin-top: 4px; }

    /* 先月の目標レビュー(月初のふりかえり。Duolingo式の達成セレモニー) */
    /* 目標ハブのカード(レビュー/今月/コーチ/来月を1枚に統合) */
    .gcard {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 14px;
    }

    /* 先月レビューはカード上端に全幅ブリード(お祝いのヘッダー扱い) */
    .gcard .goal-review {
      margin: -14px -14px 12px;
      border-radius: 15px 15px 0 0;
      border: none;
      border-bottom: 1px solid var(--border);
    }

    /* カード内のコーチは泡にせず平坦に(タイルinタイルを避ける) */
    .gcard .coach { margin-top: 12px; }

    .goal-review {
      border-radius: 16px;
      padding: 14px;
      margin-bottom: 16px;
    }

    .goal-review.win {
      background: linear-gradient(135deg, #fff3d0 0%, #ffe0ec 60%, #eadfff 100%);
      border: 1px solid #ffd98e;
    }

    .goal-review.miss {
      background: var(--bg);
      border: 1px dashed var(--border);
    }

    .goal-review .rv-emoji { font-size: 26px; line-height: 1; }
    .goal-review .rv-title { font-size: 14px; font-weight: 800; margin: 6px 0 4px; }
    .goal-review .rv-nums { font-size: 12px; color: var(--muted); }
    .goal-review .rv-nums b { color: var(--text); font-variant-numeric: tabular-nums; }
    .goal-review .rv-msg { font-size: 12px; line-height: 1.6; margin-top: 6px; }

    .goal-review-btn {
      width: 100%;
      border: none;
      border-radius: 12px;
      background: var(--main-dark);
      color: #fff;
      font-weight: 800;
      font-size: 13px;
      padding: 11px;
      margin-top: 12px;
      cursor: pointer;
    }

    .goal-review-btn:disabled { opacity: .5; }

    /* 来月の目標プランナー(先に決めておける) */
    .next-plan {
      margin-top: 12px;
      border-top: 1px solid var(--border);
      padding-top: 11px;
    }

    .next-plan-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .next-plan-label { font-size: 12px; font-weight: 700; color: var(--muted); }
    .next-plan-label b { color: var(--text); }

    .next-plan-btn {
      border: 1px solid var(--border);
      background: var(--card);
      color: var(--main-dark);
      border-radius: 10px;
      font-size: 12px;
      font-weight: 700;
      padding: 6px 12px;
      cursor: pointer;
      white-space: nowrap;
    }

    /* ---- 月中セレブレーション(マイルストーン到達をその場で祝うオーバーレイ) ---- */
    .cele-back {
      position: fixed;
      inset: 0;
      z-index: 300;
      background: rgba(20, 16, 24, .5);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      overflow: hidden;
      animation: celeFade .25s ease;
    }

    .cele-card {
      background: var(--card);
      border-radius: 20px;
      padding: 28px 22px 22px;
      text-align: center;
      max-width: 320px;
      width: 100%;
      box-shadow: var(--shadow);
      animation: celePop .45s cubic-bezier(.2, 1.4, .4, 1);
    }

    .cele-icon { font-size: 54px; line-height: 1; animation: celeBob 1.4s ease-in-out infinite; }
    .cele-title { font-size: 21px; font-weight: 900; margin-top: 10px; }
    .cele-sub { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.7; }

    .cele-btn {
      border: none;
      border-radius: 12px;
      background: var(--main-dark);
      color: #fff;
      font-weight: 800;
      font-size: 14px;
      padding: 12px 28px;
      margin-top: 16px;
      cursor: pointer;
      min-height: 44px;
    }

    /* 紙吹雪(オーバーレイ直下に散らす小片。JSが位置・色・時間をランダム生成) */
    .cele-piece {
      position: absolute;
      top: -14px;
      width: 8px;
      height: 13px;
      border-radius: 2px;
      opacity: .95;
      animation: celeDrop 3s linear forwards;
      pointer-events: none;
    }

    @keyframes celeFade { from { opacity: 0; } }
    @keyframes celePop { from { transform: scale(.6); opacity: 0; } }
    @keyframes celeBob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-7px); }
    }
    @keyframes celeDrop {
      to { transform: translateY(108vh) rotate(540deg); opacity: .7; }
    }

    @media (prefers-reduced-motion: reduce) {
      .cele-back, .cele-card, .cele-icon { animation: none !important; }
      .cele-piece { display: none; }
    }

    /* ---- 新人ファーストラン(実績ゼロの空画面を歓迎+最初のクエスト提示に変える) ---- */
    #rookieSec { margin: 14px 0 4px; }
    /* 振込先口座: 未登録カード+変更ミニリンク */
    #bankSec { margin: 10px 0 2px; }
    .bank-card { background: linear-gradient(135deg, #fff8ec, #ffeef4); border: 1.5px solid #eec06a;
      border-radius: 14px; padding: 12px 14px; font-size: 13.5px; cursor: pointer;
      display: flex; flex-direction: column; gap: 3px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
    .bank-card .bc-sub { color: var(--muted); font-size: 11.5px; }
    .bank-card .bc-cta { color: #b3701e; font-weight: 800; font-size: 12.5px; margin-top: 2px; }
    .bank-mini { font-size: 11.5px; color: var(--muted); cursor: pointer; margin: 2px 2px 0;
      text-decoration: underline; text-underline-offset: 2px; display: inline-block; }
    .bank-form { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 10px; }
    .bank-form label { font-size: 12px; font-weight: 700; display: flex; flex-direction: column; gap: 4px; }
    .bank-form input, .bank-form select { padding: 11px 12px; border: 1px solid #e2d5db;
      border-radius: 10px; font-size: 16px; background: #fff; }
    .bank-cur { font-size: 12px; background: #f4f7f4; border-radius: 10px; padding: 9px 11px; }
    .bank-cur .bc-note { color: var(--muted); font-size: 11px; }
    .bank-note { font-size: 11px; color: var(--muted); line-height: 1.6; }
    .bank-submit { padding: 13px; border: none; border-radius: 12px; background: var(--brand, #d0648a);
      color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; }
    .bank-submit:disabled { opacity: .55; }
    .bank-err { color: var(--danger); font-size: 12px; min-height: 1em; }

    /* ==== 担当/店舗ボード(2026-07-18刷新。ops系の静かなニュートラル+例外にだけ色) ==== */
    .bd2 { --b-ink: #1d1d22; --b-ink2: #67676f; --b-ink3: #a0a0a8; --b-line: #e9e9ee;
      --b-accent: #4F46E5; --b-accent-soft: #eef0fe; --b-bad: #d5383f; --b-bad-soft: #fcebec;
      --b-warn: #9a6a00; --b-warn-soft: #faf1dc; --b-ok: #1f8a55; --b-ok-soft: #e7f5ee;
      font-size: 14px; color: var(--b-ink); }
    .bd2 .b-seg { display: flex; background: rgba(0,0,0,.06); border-radius: 11px; padding: 3px; margin-bottom: 11px; }
    .bd2 .b-seg button { flex: 1; border: none; background: none; font: inherit; font-size: 13px; font-weight: 700;
      color: var(--b-ink2); padding: 7px 0; border-radius: 8px; }
    .bd2 .b-seg button.on { color: var(--b-ink); background: #fff; box-shadow: 0 1px 4px rgba(20,20,30,.10); }
    .bd2 .b-prow { display: flex; align-items: center; justify-content: center; gap: 6px; }
    .bd2 .b-prow button { border: 1px solid var(--b-line); background: #fff; color: var(--b-ink2);
      width: 30px; height: 30px; border-radius: 10px; font-size: 15px; }
    .bd2 .b-pcur { font-size: 16px; font-weight: 800; min-width: 180px; text-align: center; }
    .bd2 .b-who { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--b-ink2); margin-top: 5px; }
    .bd2 .b-who b { color: var(--b-ink); font-size: 13.5px; }
    .bd2 .b-todo { display: flex; align-items: center; gap: 8px; margin: 10px 2px 2px; font-size: 11.5px; color: var(--b-ink2); font-weight: 600; }
    .bd2 .b-todo .bar { flex: 1; height: 4px; background: rgba(0,0,0,.08); border-radius: 2px; overflow: hidden; }
    .bd2 .b-todo .bar i { display: block; height: 100%; background: var(--b-accent); border-radius: 2px; }
    .bd2 .b-todo b { color: var(--b-accent); }
    .bd2 .b-todo.done b { color: var(--b-ok); }
    .bd2 .b-todo.done .bar i { background: var(--b-ok); }
    /* タイポ階層(2026-07-18修正): セクション見出し(17px) > カード見出し(13.5px) > 本文(12.5px)。
       セクションとカードの見出しサイズ逆転を解消(Material 3のtitle階層準拠) */
    .bd2 .b-sech { display: flex; align-items: baseline; gap: 8px; margin: 26px 2px 10px; flex-wrap: wrap; }
    .bd2 .b-sech .t { font-size: 17px; font-weight: 800; letter-spacing: .01em; }
    .bd2 .b-sech .d { font-size: 11px; color: var(--b-ink3); }
    .bd2 .b-tag { font-size: 9.5px; font-weight: 700; color: var(--b-accent); background: var(--b-accent-soft); border-radius: 5px; padding: 1px 6px; }
    .bd2 .b-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 800; color: var(--b-ink3); background: rgba(0,0,0,.05); padding: 2px 8px; border-radius: 999px; }
    .bd2 .b-card { background: rgba(255,255,255,.92); border: 1px solid var(--b-line); border-radius: 15px;
      box-shadow: 0 1px 2px rgba(20,20,30,.04); overflow: hidden; margin-bottom: 9px; }
    .bd2 .b-cardh { display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px; }
    .bd2 .b-cardh .t { font-size: 13.5px; font-weight: 700; color: var(--b-ink2); flex: 1; }
    .bd2 .b-cnt { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
    .bd2 .b-cnt.bad { color: var(--b-bad); background: var(--b-bad-soft); }
    .bd2 .b-cnt.ok { color: var(--b-ok); background: var(--b-ok-soft); }
    .bd2 .b-frow { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--b-line); cursor: pointer; }
    .bd2 .b-frow:active { background: #fafafb; }
    .bd2 .b-fmain { flex: 1; min-width: 0; }
    .bd2 .b-fname { font-size: 13.5px; font-weight: 750; display: flex; align-items: center; gap: 6px; }
    .bd2 .b-days { font-size: 10.5px; font-weight: 800; color: var(--b-bad); background: var(--b-bad-soft); padding: 1px 7px; border-radius: 6px; }
    .bd2 .b-fsub { font-size: 11.5px; color: var(--b-ink2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bd2 .b-fsub.warn { color: var(--b-warn); font-weight: 700; }
    .bd2 .b-fsub .okc { color: var(--b-ok); font-weight: 700; }
    .bd2 .b-allok { padding: 9px 14px 11px; border-top: 1px solid var(--b-line); font-size: 11.5px; color: var(--b-ink2); }
    .bd2 .b-allok b { color: var(--b-ok); }
    .bd2 .b-empty { padding: 16px 14px; border-top: 1px solid var(--b-line); text-align: center; font-size: 12.5px; color: var(--b-ink2); font-weight: 600; }
    .bd2 .b-ckblock { padding: 11px 14px 13px; border-top: 1px solid var(--b-line); }
    .bd2 .b-ckblock:first-child { border-top: none; }
    .bd2 .b-ckt { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
    .bd2 .b-ckt .t { font-size: 13px; font-weight: 700; color: var(--b-ink2); flex: 1; }
    .bd2 .b-ckt .hint { font-size: 10px; color: var(--b-ink3); }
    .bd2 .b-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .bd2 .b-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--b-ink2);
      background: rgba(0,0,0,.05); border: 1px solid transparent; padding: 5px 10px; border-radius: 999px; cursor: pointer; user-select: none; -webkit-user-select: none; }
    .bd2 .b-chip:active { transform: scale(.95); }
    .bd2 .b-chip.ng { color: var(--b-bad); background: var(--b-bad-soft); border-color: rgba(213,56,63,.25); }
    .bd2 .b-chip.ng::before { content: '✕'; font-size: 9px; font-weight: 900; }
    .bd2 .b-cav { display: inline-flex; align-items: center; justify-content: center; border-radius: 34%; color: #fff; font-weight: 800; flex: none; overflow: hidden; }
    .bd2 .b-cav img { width: 100%; height: 100%; object-fit: cover; }
    .bd2 .b-mrow { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--b-line); cursor: pointer; }
    .bd2 .b-mrow:first-child { border-top: none; }
    .bd2 .b-mname { font-size: 11px; font-weight: 800; color: var(--b-ink2); }
    .bd2 .b-mtext { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bd2 .b-mtext.none { color: var(--b-warn); font-weight: 700; font-size: 11.5px; }
    .bd2 .b-mst { font-size: 10px; color: var(--b-ink3); flex: none; }
    .bd2 .b-mst.ok { color: var(--b-ok); font-weight: 700; }
    .bd2 .b-note { text-align: center; font-size: 10.5px; color: var(--b-ink3); margin: 14px 0 4px; font-weight: 600; }
    .bd2 .b-actions { display: flex; gap: 8px; margin-bottom: 10px; }
    .bd2 .b-btn { flex: 1; border: none; font: inherit; font-size: 12.5px; font-weight: 750; padding: 11px 0; border-radius: 12px; cursor: pointer; }
    .bd2 .b-btn.pri { background: var(--b-accent); color: #fff; }
    .bd2 .b-btn.gho { background: #fff; color: var(--b-ink); border: 1px solid var(--b-line); }
    .bd2 .b-rep { background: #fff; border: 1px solid var(--b-line); border-radius: 15px; padding: 17px 15px; }
    .bd2 .b-reph { border-bottom: 2px solid var(--b-ink); padding-bottom: 9px; margin-bottom: 12px; }
    .bd2 .b-rept { font-size: 15px; font-weight: 850; }
    .bd2 .b-repm { font-size: 11px; color: var(--b-ink2); margin-top: 2px; font-weight: 600; }
    .bd2 .b-repsec { margin-bottom: 14px; }
    .bd2 .b-repsect { font-size: 12px; font-weight: 850; display: flex; gap: 6px; align-items: baseline; margin-bottom: 6px; }
    .bd2 .b-repsect .n { font-size: 10px; color: var(--b-ink3); font-weight: 700; }
    .bd2 .b-repline { font-size: 12.5px; padding: 2px 0 2px 13px; position: relative; }
    .bd2 .b-repline::before { content: ''; position: absolute; left: 2px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--b-ink3); }
    .bd2 .b-repline.bad::before { background: var(--b-bad); }
    .bd2 .b-repok { font-size: 12px; color: var(--b-ok); font-weight: 700; padding-left: 13px; }
    .bd2 .b-repq { font-size: 11px; color: var(--b-ink3); padding-left: 13px; margin-top: 2px; }
    .bd2 .b-repmemo { display: grid; grid-template-columns: 82px 1fr; gap: 2px 8px; font-size: 12px; }
    .bd2 .b-repmemo dt { font-weight: 800; color: var(--b-ink2); }
    /* スワイプ完了 */
    .bd2 .b-sw { position: relative; overflow: hidden; border-top: 1px solid var(--b-line); }
    .bd2 .b-sw .b-frow, .bd2 .b-sw .b-mrow, .bd2 .b-sw .sb-irow, .bd2 .b-sw .sb-arow { border-top: none; }
    .bd2 .b-swbg { position: absolute; inset: 0; background: var(--b-ok); color: #fff; display: flex; align-items: center;
      justify-content: flex-end; padding-right: 16px; font-size: 12px; font-weight: 800; }
    .bd2 .b-swbg.undo { background: var(--b-ink3); }
    .bd2 .b-swfg { position: relative; background: #fff; transition: transform .2s cubic-bezier(.2,.9,.3,1); touch-action: pan-y; }
    .bd2 .b-swfg.drag { transition: none; }
    /* シート入力(openSheet内) */
    .bd2q { margin-bottom: 14px; }
    .bd2q .qt { font-size: 12px; font-weight: 800; margin-bottom: 6px; }
    .bd2q .qt .opt { color: #a0a0a8; font-weight: 600; font-size: 10px; margin-left: 4px; }
    .bd2q input[type=text], .bd2q textarea { width: 100%; border: 1.5px solid #e9e9ee; border-radius: 12px;
      padding: 10px 12px; font: inherit; font-size: 15px; background: #fbfbfc; resize: none; box-sizing: border-box; }
    .bd2q .qchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
    .bd2q .qchip { font-size: 12px; font-weight: 700; color: #67676f; background: rgba(0,0,0,.05);
      padding: 6px 11px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; }
    .bd2q .qchip.on { color: #4F46E5; background: #eef0fe; border-color: rgba(79,70,229,.3); }
    .bd2q .stepr { display: flex; align-items: center; gap: 9px; }
    .bd2q .stepb { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid #e9e9ee; background: #fff;
      font-size: 18px; font-weight: 800; color: #4F46E5; }
    .bd2q .stepr input { flex: 1; text-align: center; font-size: 19px; font-weight: 850; border: 1.5px solid #e9e9ee; border-radius: 12px; padding: 9px 0; font-family: inherit; }
    .bd2sb { width: 100%; border: none; font: inherit; font-size: 13px; font-weight: 750; padding: 12px 0; border-radius: 12px; background: #4F46E5; color: #fff; cursor: pointer; }
    .bd2del { width: 100%; background: none; border: none; color: #d5383f; font: inherit; font-size: 12px; font-weight: 700; padding: 10px 0 0; cursor: pointer; }
    /* 店舗ボード固有 */
    .bd2 .sb-score { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--b-line); cursor: pointer; }
    .bd2 .sb-kpi { background: #fff; padding: 11px 12px 10px; }
    .bd2 .sb-kpi .l { font-size: 10px; font-weight: 750; color: var(--b-ink2); }
    .bd2 .sb-kpi .v { font-size: 19px; font-weight: 850; }
    .bd2 .sb-kpi .v small { font-size: 10px; font-weight: 700; color: var(--b-ink2); }
    .bd2 .sb-kpi .g { font-size: 10px; font-weight: 700; color: var(--b-ink3); border-bottom: 1.5px dashed #c6c6d2; display: inline-block; }
    .bd2 .sb-kpi .bar { height: 4px; background: rgba(0,0,0,.08); border-radius: 2px; margin-top: 6px; overflow: hidden; }
    .bd2 .sb-kpi .bar i { display: block; height: 100%; border-radius: 2px; }
    .bd2 .sb-kpi .pct { font-size: 10.5px; font-weight: 800; margin-top: 3px; }
    .bd2 .okc { color: var(--b-ok); } .bd2 .badc { color: var(--b-bad); } .bd2 .warnc { color: var(--b-warn); }
    .bd2 .sb-ins { padding: 11px 14px; border-top: 1px solid var(--b-line); font-size: 12px; line-height: 1.7; background: #fbfbfd; }
    /* トレンドバー: バー領域は固定高ボックスで下揃え、ラベルは1行固定
       (ラベルの折返しでバーが浮く崩れの再発防止。2026-07-18) */
    .bd2 .sb-trend { display: flex; gap: 5px; padding: 10px 14px 9px; border-top: 1px solid var(--b-line); }
    .bd2 .sb-trend .col { flex: 1; min-width: 0; }
    .bd2 .sb-trend .bwrap { height: 34px; display: flex; align-items: flex-end; justify-content: center; }
    .bd2 .sb-trend .bcol { width: 100%; max-width: 38px; background: #d9d9ef; border-radius: 4px 4px 0 0; }
    .bd2 .sb-trend .col.cur .bcol { background: var(--b-accent); }
    /* ラベルは.tlb(ポータル既存の凡例クラス.lb{width:8px}と衝突するため別名。2026-07-18) */
    .bd2 .sb-trend .tlb { display: block; text-align: center; font-size: 8.5px; color: var(--b-ink3); font-weight: 700;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
    .bd2 .sb-trend .col.cur .tlb { color: var(--b-accent); }
    .bd2 .sb-trleg { display: flex; justify-content: space-between; align-items: center;
      padding: 10px 14px 0; border-top: 1px solid var(--b-line); font-size: 10.5px; color: var(--b-ink3); }
    .bd2 .sb-trleg .sw { display: inline-block; width: 9px; height: 9px; border-radius: 3px;
      background: var(--b-accent); vertical-align: -1px; margin-right: 3px; }
    .bd2 .sb-trend.legged { border-top: none; padding-top: 6px; }
    .bd2 .sb-trend .bval { display: block; text-align: center; font-size: 8.5px; color: var(--b-ink3); margin-bottom: 1px; }
    .bd2 .sb-trend .col.cur .bval { color: var(--b-accent); font-weight: 800; }
    .bd2 .sb-irow { display: flex; align-items: flex-start; gap: 9px; padding: 11px 14px; border-top: 1px solid var(--b-line); }
    .bd2 .sb-irow:first-child { border-top: none; }
    .bd2 .sb-irow .ic { font-size: 14px; padding-top: 1px; }
    .bd2 .sb-imain { flex: 1; min-width: 0; cursor: pointer; }
    .bd2 .sb-it { font-size: 13px; font-weight: 750; }
    .bd2 .sb-is { font-size: 11px; color: var(--b-ink2); margin-top: 1px; }
    .bd2 .sb-st { font-size: 9.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; flex: none; margin-top: 2px; cursor: pointer; }
    .bd2 .sb-st.idea { background: var(--b-accent-soft); color: var(--b-accent); }
    .bd2 .sb-st.run { background: var(--b-ok-soft); color: var(--b-ok); }
    .bd2 .sb-st.wait { background: var(--b-warn-soft); color: var(--b-warn); }
    .bd2 .sb-st.done { background: rgba(0,0,0,.06); color: var(--b-ink2); }
    .bd2 .sb-add { padding: 10px 14px; border-top: 1px solid var(--b-line); font-size: 12px; font-weight: 750; color: var(--b-accent); cursor: pointer; }
    .bd2 .sb-add:first-child { border-top: none; }
    .bd2 .sb-arow { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
    .bd2 .sb-cb { width: 20px; height: 20px; border-radius: 7px; border: 2px solid #d5d5dc; flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
    .bd2 .sb-arow.done .sb-cb { background: var(--b-ok); border-color: var(--b-ok); }
    .bd2 .sb-at { font-size: 13px; font-weight: 750; }
    .bd2 .sb-arow.done .sb-at { color: var(--b-ink3); text-decoration: line-through; }
    .bd2 .sb-as { font-size: 10.5px; color: var(--b-ink2); }
    .bd2 .sb-carry { font-size: 9.5px; font-weight: 800; color: var(--b-warn); background: var(--b-warn-soft); padding: 2px 7px; border-radius: 999px; flex: none; }
    .bd2 .sb-sub { padding: 9px 14px 3px; font-size: 10.5px; font-weight: 800; color: var(--b-ink2); }
    .bd2 .sb-sub.div { border-top: 1px solid var(--b-line); padding-top: 11px; }
    .bd2 .sb-fun { padding: 11px 14px 13px; cursor: pointer; }
    .bd2 .sb-frow2 { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
    .bd2 .sb-fl { width: 38px; font-size: 10.5px; font-weight: 800; color: var(--b-ink2); flex: none; }
    .bd2 .sb-fb { flex: 1; height: 20px; background: rgba(0,0,0,.06); border-radius: 7px; overflow: hidden; }
    .bd2 .sb-fb i { display: block; height: 100%; background: var(--b-accent); border-radius: 7px; opacity: .85; }
    .bd2 .sb-fn { width: 58px; font-size: 11.5px; font-weight: 850; text-align: right; flex: none; }
    .bd2 .sb-fn small { font-size: 9px; color: var(--b-ink3); font-weight: 700; }
    .bd2 .sb-fhint { font-size: 10px; color: var(--b-ink3); font-weight: 600; margin-top: 2px; }
    .bd2 .sb-hero { border: 1.5px solid rgba(79,70,229,.4); }
    .bd2 .sb-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 800; color: var(--b-accent); background: var(--b-accent-soft); padding: 3px 9px; border-radius: 999px; }
    .bd2 .sb-pwrap { padding: 12px 14px 13px; }
    .bd2 .sb-pv { font-size: 27px; font-weight: 850; }
    .bd2 .sb-pv small { font-size: 12px; color: var(--b-ink2); font-weight: 700; }
    .bd2 .sb-pgoal { font-size: 11px; color: var(--b-ink2); font-weight: 700; margin-left: auto; border-bottom: 1.5px dashed #c6c6d2; cursor: pointer; }
    .bd2 .sb-pbar { position: relative; height: 9px; background: rgba(0,0,0,.08); border-radius: 5px; margin: 18px 0 5px; }
    .bd2 .sb-pbar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--b-accent); border-radius: 5px; }
    .bd2 .sb-pbar .today { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--b-ink); }
    .bd2 .sb-pbar .today::after { content: '今日'; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 8.5px; font-weight: 800; color: var(--b-ink2); }
    .bd2 .sb-pleg { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--b-ink3); font-weight: 700; }
    .bd2 .sb-pchip { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font-size: 11.5px; font-weight: 800; padding: 5px 11px; border-radius: 999px; }
    .bd2 .sb-pchip.good { background: var(--b-ok-soft); color: var(--b-ok); }
    .bd2 .sb-pchip.risk { background: var(--b-warn-soft); color: var(--b-warn); }
    .bd2 .sb-sub2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 9px; }
    .bd2 .sb-sub2 .b-card { margin-bottom: 0; }
    .bd2 .sb-subk { padding: 11px 13px 12px; cursor: pointer; }
    .bd2 .sb-subk .l { font-size: 10px; font-weight: 750; color: var(--b-ink2); }
    .bd2 .sb-subk .v { font-size: 17px; font-weight: 850; }
    .bd2 .sb-subk .v small { font-size: 10px; font-weight: 700; color: var(--b-ink2); }
    .bd2 .sb-subk .g { font-size: 9.5px; font-weight: 700; color: var(--b-ink3); }
    .bd2 .sb-subk .bar { height: 4px; background: rgba(0,0,0,.08); border-radius: 2px; margin-top: 6px; overflow: hidden; }
    .bd2 .sb-subk .bar i { display: block; height: 100%; border-radius: 2px; }
    .bd2 .sb-subk .pace { font-size: 9.5px; font-weight: 800; margin-top: 4px; }
    .bd2 .sb-rank { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-flow: column; column-gap: 2px; padding: 8px 5px 8px 2px; }
    .bd2 .sb-rmini { display: flex; align-items: center; gap: 4px; padding: 2.5px 5px 2.5px 3px; font-size: 10px; min-width: 0; border-left: 1px solid var(--b-line); }
    .bd2 .sb-rmini .no { width: 14px; text-align: right; font-size: 8.5px; font-weight: 850; color: var(--b-ink3); flex: none; }
    .bd2 .sb-rmini .no.g { color: #B8860B; } .bd2 .sb-rmini .no.s { color: #8A8A94; } .bd2 .sb-rmini .no.b { color: #A8622B; }
    .bd2 .sb-rmini .nm { flex: 1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .bd2 .sb-rmini .v { font-weight: 850; flex: none; font-variant-numeric: tabular-nums; }
    .bd2 .sb-stores { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
    .bd2 .sb-storechip { font-size: 12px; font-weight: 750; padding: 6px 13px; border-radius: 999px; background: rgba(0,0,0,.05); color: var(--b-ink2); border: 1px solid transparent; cursor: pointer; }
    .bd2 .sb-storechip.on { color: var(--b-accent); background: var(--b-accent-soft); border-color: rgba(79,70,229,.3); }
    .bd2 .b-skel { padding: 34px 0; text-align: center; color: var(--b-ink3); font-size: 12.5px; font-weight: 700; }

    .rk-card {
      border: 1.5px solid var(--border);
      border-radius: 16px;
      padding: 14px;
      background: linear-gradient(135deg, rgba(122, 184, 216, .12), rgba(247, 182, 207, .12));
    }

    .rk-title {
      font-size: 15px;
      font-weight: 900;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .rk-days {
      font-size: 10px;
      font-weight: 800;
      color: var(--main-dark);
      border: 1px solid var(--main);
      border-radius: 999px;
      padding: 2px 8px;
      white-space: nowrap;
    }

    .rk-sub { font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 6px; }

    .rk-quest-label {
      font-size: 10px;
      font-weight: 800;
      color: var(--main-dark);
      letter-spacing: .06em;
      margin: 12px 0 4px;
    }

    .rk-quest { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
    .rk-quest b { font-variant-numeric: tabular-nums; }

    /* ---- 週次クエスト(自動生成の小さな目標×3。達成はスタンプ🏅として貯まる) ---- */
    #questSec, #checkinSec {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 12px 14px;
    }

    .q-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    /* 今週の期間(月曜〜日曜)。タイトル横に小さく */
    .q-range {
      font-size: 9px;
      font-weight: 400;
      color: var(--muted);
      margin-left: 5px;
    }

    .q-stamps { font-size: 11px; font-weight: 800; color: var(--main-dark); white-space: nowrap; }

    .q-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
    }

    .q-row + .q-row { border-top: 1px solid var(--border); }
    .q-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
    .q-body { flex: 1; min-width: 0; }
    .q-label { font-size: 12px; font-weight: 700; }
    .q-row.q-done .q-label { color: var(--main-dark); }

    .q-bar {
      height: 6px;
      border-radius: 999px;
      background: var(--border);
      margin-top: 5px;
      overflow: hidden;
    }

    .q-bar-fill {
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #f7b6cf, #e59bde 55%, #9fb8f2);
      transition: width .5s ease;
    }

    .q-row.q-done .q-bar-fill { background: linear-gradient(90deg, #7ab8d8, #5aa9e6); }
    .q-prog { font-size: 10px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
    .q-check { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }

    @media (prefers-reduced-motion: reduce) { .q-bar-fill { transition: none; } }

    /* ---- M1: モーション&瞬間の祝福(2026-07-11) ---- */

    /* ① マイルストーン接近(残り10%以内 or 3万円以内)で金色に脈動 = ゴール勾配効果 */
    .next-chip.nc-near {
      background: linear-gradient(135deg, #9a6c14, #c9931a 50%, #9a6c14);
      box-shadow: 0 0 10px rgba(255, 200, 90, .5);
      animation: ncPulse 1.6s ease-in-out infinite;
    }
    .next-chip.nc-near .nc-small { color: rgba(255, 246, 220, .92); }
    .next-chip.nc-near .nc-strong { color: #fff; }

    @keyframes ncPulse {
      0%, 100% { box-shadow: 0 0 6px rgba(255, 200, 90, .35); transform: scale(1); }
      50% { box-shadow: 0 0 16px rgba(255, 205, 95, .8); transform: scale(1.045); }
    }

    /* ② 入場スタッガー(初回描画のみJSがdelayを振る)+スクロールreveal */
    .enter-in { animation: enterIn .55s cubic-bezier(.2, .8, .3, 1) both; }
    @keyframes enterIn { from { opacity: 0; transform: translateY(16px); } }

    .rv { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .3, 1); }
    .rv.rv-in { opacity: 1; transform: none; }

    /* ②' グラフ描画アニメ(revealで発火)。バー=下から伸びる/折れ線=描かれていく */
    .rv-in .bar, .rv-in .bar-forecast {
      animation: barGrow .7s cubic-bezier(.2, .9, .3, 1) both;
      transform-origin: bottom;
    }
    #groups3.rv-in svg rect {
      animation: barGrow .7s cubic-bezier(.2, .9, .3, 1) both;
      transform-box: fill-box;
      transform-origin: bottom;
    }
    .month-card.rv-in polyline {
      stroke-dasharray: 700;
      stroke-dashoffset: 700;
      animation: lineDraw 1.1s ease-out .1s forwards;
    }
    @keyframes barGrow { from { transform: scaleY(0); } }
    @keyframes lineDraw { to { stroke-dashoffset: 0; } }

    /* ③ ストリークの成長段階(7日=炎が揺れる/30日=金/100日=虹) */
    .streak-pill .streak-flame { display: inline-block; }
    .streak-pill.s7 { border-color: rgba(255, 200, 110, .75); }
    .streak-pill.s7 .streak-flame { animation: flameBob 1.2s ease-in-out infinite; }
    .streak-pill.s30 {
      background: linear-gradient(135deg, rgba(255, 200, 100, .55), rgba(255, 150, 70, .45));
      border-color: #ffd98e;
      box-shadow: 0 0 8px rgba(255, 190, 90, .5);
    }
    .streak-pill.s30 .streak-flame { animation: flameBob 1.2s ease-in-out infinite; }
    .streak-pill.s100 {
      background: linear-gradient(135deg, rgba(190, 150, 255, .5), rgba(120, 200, 255, .5));
      border-color: #e6d5ff;
      box-shadow: 0 0 10px rgba(190, 160, 255, .6);
    }
    @keyframes flameBob {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-1.5px) scale(1.14); }
    }

    /* ③' ストリーク+1トースト(1日1回・自動で消える) */
    .streak-toast {
      position: fixed;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, #2c3a49, #1f2b38);
      color: #fff;
      font-size: 13px;
      font-weight: 800;
      padding: 10px 18px;
      border-radius: 999px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
      z-index: 250;
      white-space: nowrap;
      animation: toastIn .5s cubic-bezier(.2, 1.4, .4, 1) both;
    }
    @keyframes toastIn { from { opacity: 0; transform: translate(-50%, -14px) scale(.8); } }

    /* ④ カムバック(5日以上ぶりのおかえりカード。罪悪感ゼロのトーン) */
    #comebackSec { margin: 14px 0 4px; }

    .cb-card {
      border: 1.5px solid rgba(240, 200, 130, .55);
      border-radius: 16px;
      padding: 14px;
      background: linear-gradient(135deg, rgba(255, 214, 140, .16), rgba(247, 182, 207, .16));
    }

    .cb-title { font-size: 15px; font-weight: 900; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .cb-days {
      font-size: 10px; font-weight: 800; color: #9a6c14;
      border: 1px solid rgba(200, 160, 80, .6); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
    }
    .cb-sub { font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 6px; }
    .cb-sub b { color: var(--text); font-variant-numeric: tabular-nums; }

    .cb-btn {
      border: none;
      border-radius: 12px;
      background: var(--main-dark);
      color: #fff;
      font-weight: 800;
      font-size: 13px;
      padding: 10px 22px;
      margin-top: 10px;
      cursor: pointer;
      min-height: 44px;
    }

    /* ⑥ クエスト完了の儀式(新規達成行のフラッシュ+チェックのポップ)+週間パーフェクト */
    .q-row.q-just { animation: qJust 1.2s ease both; }
    @keyframes qJust {
      0% { background: rgba(255, 216, 120, 0); }
      30% { background: rgba(255, 216, 120, .38); }
      100% { background: transparent; }
    }
    .q-row.q-just .q-check { animation: qPop .5s cubic-bezier(.2, 1.6, .4, 1) .2s both; }
    @keyframes qPop { from { transform: scale(0) rotate(-12deg); } }

    .q-perfect {
      font-size: 11px;
      font-weight: 900;
      color: #8a6118;
      background: linear-gradient(135deg, #ffe9b0, #ffd98e);
      border-radius: 999px;
      padding: 3px 10px;
      white-space: nowrap;
    }
    .q-perfect.q-pop { animation: qPop .6s cubic-bezier(.2, 1.6, .4, 1) both; }

    /* ---- M2: 進行感の可視化(2026-07-11) ---- */

    /* ① 昨日から+◯万(毎日変わる数字=毎日開く理由) */
    .yd-chip {
      display: inline-flex;
      align-items: baseline;
      gap: 3px;
      font-size: 11px;
      font-weight: 800;
      color: #1b7f4d;
      background: rgba(27, 175, 122, .12);
      border: 1px solid rgba(27, 175, 122, .35);
      border-radius: 999px;
      padding: 3px 10px;
    }

    /* 増えていない日の控えめ版(0を突きつけず「ここから」と言う) */
    .yd-chip.yd-zero {
      color: var(--muted);
      background: var(--card);
      border-color: var(--border);
      font-weight: 700;
    }
    .yd-chip b { font-size: 13px; font-variant-numeric: tabular-nums; }

    /* ④ 今日のフォーカス(1日1つの行動提案。コーチより短く・具体的に) */
    #focusSec { margin: 0; }

    .focus-card {
      display: flex;
      align-items: center;
      gap: 10px;
      border-radius: 16px;
      padding: 10px 12px;
      background: linear-gradient(135deg, rgba(122, 184, 216, .14), rgba(159, 184, 242, .14));
      border: 1px solid rgba(122, 184, 216, .35);
    }

    .focus-pin { font-size: 18px; line-height: 1; flex-shrink: 0; }
    .focus-label { font-size: 9px; font-weight: 800; color: var(--main-dark); letter-spacing: .08em; }
    .focus-text { font-size: 12px; font-weight: 700; line-height: 1.55; margin-top: 1px; }

    /* ②⑤ 全画面オーバーレイ(マイルストーンの道/スタンプ帳の共通枠) */
    .sheet-back {
      position: fixed;
      inset: 0;
      z-index: 290;
      background: rgba(20, 16, 24, .5);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      animation: celeFade .22s ease;
    }

    .sheet {
      background: var(--bg);
      border-radius: 22px 22px 0 0;
      width: 100%;
      max-width: 480px;
      max-height: 82vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
      animation: sheetUp .35s cubic-bezier(.2, .9, .3, 1);
    }
    @keyframes sheetUp { from { transform: translateY(40%); opacity: .4; } }

    .sheet-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      position: sticky;
      top: -14px;
      background: var(--bg);
      padding: 6px 0;
    }
    .sheet-title { font-size: 15px; font-weight: 900; }
    .sheet-close {
      border: none;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      padding: 8px 14px;
      min-height: 40px;
      cursor: pointer;
    }

    /* ② マイルストーンの道(下=🌱スタート、上=💎ゴールの縦パス) */
    .path-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 9px 4px;
      position: relative;
    }
    /* 縦の道(行間をつなぐ線) */
    .path-row::before {
      content: '';
      position: absolute;
      left: 21px;
      top: -12px;
      bottom: -12px;
      width: 3px;
      background: var(--border);
      z-index: 0;
    }
    .path-row:first-child::before { top: 50%; }
    .path-row:last-child::before { bottom: 50%; }
    .path-row.p-done::before { background: #8fc3a9; }

    .path-node {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      flex-shrink: 0;
      position: relative;
      z-index: 1;
      background: var(--card);
      border: 2px solid var(--border);
    }
    .p-done .path-node { border-color: #6db892; background: #eafaf1; }
    .p-next .path-node {
      border-color: var(--main-dark);
      background: #fff;
      animation: pathPulse 1.6s ease-in-out infinite;
    }
    .p-locked .path-node { filter: grayscale(1); opacity: .45; }
    @keyframes pathPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(64, 124, 153, .45); }
      50% { box-shadow: 0 0 0 7px rgba(64, 124, 153, 0); }
    }

    .path-body { flex: 1; min-width: 0; }
    .path-label { font-size: 13px; font-weight: 800; }
    .p-locked .path-label { color: var(--muted); font-weight: 700; }
    .path-sub { font-size: 10px; color: var(--muted); margin-top: 1px; }
    .p-next .path-sub { color: var(--main-dark); font-weight: 700; }
    .path-badge { font-size: 10px; font-weight: 800; color: #2e8d63; white-space: nowrap; }
    .p-next .path-badge { color: var(--main-dark); }

    .path-now {
      font-size: 10px;
      font-weight: 900;
      color: #fff;
      background: var(--main-dark);
      border-radius: 999px;
      padding: 2px 8px;
      margin-left: 6px;
      white-space: nowrap;
    }

    /* ⑤ スタンプ帳(週×3種のスタンプが押されていく) */
    .album-week {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 2px;
      border-bottom: 1px solid var(--border);
    }
    .album-week:last-child { border-bottom: none; }
    .album-wlabel { font-size: 11px; font-weight: 700; color: var(--muted); width: 86px; flex-shrink: 0; }
    .album-slots { display: flex; gap: 10px; }
    .album-stamp {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      border: 2px dashed var(--border);
      color: var(--border);
      background: var(--card);
    }
    .album-stamp.got {
      border: 2px solid #e8b04a;
      background: #fff6e2;
      transform: rotate(-8deg);
      box-shadow: 0 1px 4px rgba(180, 130, 40, .25);
    }
    .album-stamp.got:nth-child(2) { transform: rotate(5deg); }
    .album-stamp.got:nth-child(3) { transform: rotate(-4deg); }
    .album-perfect { font-size: 14px; margin-left: 2px; }
    .album-total { font-size: 12px; font-weight: 800; color: var(--main-dark); margin: 4px 0 8px; }

    /* ⑥ チェックインカレンダー(今月開いた日に🔥) */
    .ck-head { font-size: 12px; font-weight: 700; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: baseline; }
    .ck-count { font-size: 10px; font-weight: 800; color: var(--main-dark); }
    .ck-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
    /* コンパクト行(数字+🔥を横並び・低い横長セル。カレンダー感は保ちつつ縦を食わない) */
    .ck-cell {
      height: 21px;
      border-radius: 6px;
      background: var(--bg);
      border: 1px solid var(--border);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-size: 8.5px;
      color: var(--muted);
      gap: 2px;
    }
    .ck-cell.ck-empty { background: transparent; border: none; }
    .ck-cell.ck-on { background: #fff3e0; border-color: #f2c184; }
    .ck-cell .ck-fire { font-size: 9px; line-height: 1; }
    .ck-cell.ck-today { outline: 2px solid var(--main-dark); outline-offset: -1px; font-weight: 800; }

    /* ③ ヒーロー写真フレームのLv進化(f2=金/f3=グラデ二重/f4=+発光) */
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 20px;
      pointer-events: none;
      z-index: 3;
    }
    .hero--f2::after { border: 2.5px solid rgba(226, 189, 107, .95); }
    .hero--f3::after, .hero--f4::after {
      border: 3px solid transparent;
      background: linear-gradient(135deg, #f3d27a, #e59bde 45%, #9fb8f2 80%, #f3d27a) border-box;
      -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
    }
    .hero--f4 { animation: heroGlow 2.8s ease-in-out infinite; }
    @keyframes heroGlow {
      0%, 100% { box-shadow: 0 0 8px rgba(240, 190, 120, .3); }
      50% { box-shadow: 0 0 22px rgba(240, 190, 120, .65); }
    }

    /* タップで開けるピル/カウンタの触り心地 */
    .lv-pill, .q-stamps, .q-perfect { cursor: pointer; }
    .lv-pill:active, .q-stamps:active { transform: scale(.94); }

    /* ---- M3: 世界観と儀式(2026-07-11) ---- */

    /* 時間帯グリーティング(朝5時を日の境に。業態的に深夜=仕事終わり) */
    .greet { font-size: 12px; font-weight: 700; color: var(--muted); }

    /* 入店記念日リボン(当日から3日間・写真右上) */
    .hero-ribbon {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 4;
      background: linear-gradient(135deg, #ff8fb3, #ffb36b);
      color: #fff;
      font-size: 11px;
      font-weight: 900;
      padding: 5px 12px;
      border-radius: 999px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
      animation: ribbonIn .6s cubic-bezier(.2, 1.4, .4, 1) both;
    }
    @keyframes ribbonIn { from { transform: scale(0) rotate(-8deg); opacity: 0; } }

    /* 行動の勲章(売上に依存しない称賛の枠) */
    .medal-row { display: flex; gap: 8px; margin-top: 8px; }
    .medal {
      flex: 1;
      text-align: center;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 4px 8px;
      background: var(--card);
      min-width: 0;
    }
    .medal-ic { font-size: 18px; line-height: 1; }
    .medal-val { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; margin-top: 3px; }
    .medal-val small { font-size: 10px; font-weight: 700; color: var(--muted); margin-left: 1px; }
    .medal-label { font-size: 9px; color: var(--muted); font-weight: 700; margin-top: 2px; }

    /* デイリードロー(🎴今日の1枚。めくるとメッセージ・稀に金カード) */
    #drawSec { margin: 0; }
    .draw-head { font-size: 12px; font-weight: 700; margin-bottom: 8px; }

    .draw-card { perspective: 800px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .draw-inner {
      position: relative;
      transform-style: preserve-3d;
      transition: transform .65s cubic-bezier(.3, .8, .3, 1);
      min-height: 64px;
    }
    .draw-card.flipped .draw-inner { transform: rotateY(180deg); }
    .draw-card.instant .draw-inner { transition: none; }

    .draw-face {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      border-radius: 14px;
      min-height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
      padding: 12px 14px;
      text-align: center;
      line-height: 1.65;
    }
    .draw-back {
      background: linear-gradient(135deg, #3b4a63, #232c44);
      color: #fff;
      letter-spacing: .03em;
    }
    .draw-back .draw-card-ic { font-size: 20px; }
    .draw-front {
      position: absolute;
      inset: 0;
      transform: rotateY(180deg);
      background: linear-gradient(135deg, rgba(122, 184, 216, .16), rgba(247, 182, 207, .16));
      border: 1px solid var(--border);
      color: var(--text);
    }
    .draw-front.gold {
      background: linear-gradient(135deg, #ffe9b0, #ffd98e);
      border-color: #e8b04a;
      box-shadow: 0 0 14px rgba(232, 176, 74, .45);
      color: #6b4c12;
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-ribbon { animation: none !important; }
      .draw-inner { transition: none !important; }
    }

    /* ---- T1: シフトタブの儀式化(2026-07-12) ---- */

    /* タブバーの通知ドット(未提出など。共通基盤) */
    .tabbar .tb { position: relative; }
    .tb-dot {
      position: absolute;
      top: 7px;
      right: calc(50% - 17px);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #e0455c;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
    }

    /* 提出カードの期間ノート(開始まであと◯日/期間中/提出済み) */
    #shiftRoot .sf-pnote { font-size: 11px; color: #6a655f; margin: 6px 0 2px; line-height: 1.6; }
    #shiftRoot .sf-pnote b { color: #0f4c81; }
    #shiftRoot .sf-pnote.hot { color: #a83b64; font-weight: 700; }
    #shiftRoot .sf-pnote.ok { color: #2e8d63; font-weight: 700; }

    /* 出勤選択のライブカウンター */
    #shiftRoot .sf-live {
      display: flex;
      align-items: baseline;
      gap: 8px;
      flex-wrap: wrap;
      background: #f4f8fc;
      border: 1px solid #dcebf3;
      border-radius: 11px;
      padding: 9px 12px;
      margin-bottom: 10px;
      font-size: 12px;
      color: #4a5a68;
    }
    #shiftRoot .sf-live b { font-size: 17px; color: #0f4c81; font-variant-numeric: tabular-nums; }
    #shiftRoot .sf-live .sf-live-coach { font-size: 11px; color: #6a7a88; }

    /* 次の出勤チップ(確定シフトカード内) */
    #shiftRoot .sf-next {
      display: inline-flex;
      align-items: baseline;
      gap: 5px;
      background: linear-gradient(135deg, #2c3a49, #1f2b38);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      border-radius: 999px;
      padding: 5px 12px;
      margin: 4px 0 6px;
    }
    #shiftRoot .sf-next b { color: #ffd98e; font-size: 12px; }
    #shiftRoot .sf-next.today { background: linear-gradient(135deg, #e8963f, #d4537e); }
    #shiftRoot .sf-next.today b { color: #fff; }

    /* 次の出勤日のセルをそっと脈動 */
    #shiftRoot .sf-cell.nextwork { box-shadow: 0 0 0 2px #7ab8d8 inset; animation: sfNextPulse 2s ease-in-out infinite; }
    @keyframes sfNextPulse {
      0%, 100% { box-shadow: 0 0 0 2px rgba(122, 184, 216, .9) inset; }
      50% { box-shadow: 0 0 0 2px rgba(122, 184, 216, .35) inset; }
    }

    /* 当日の連絡 = 常に赤塗りつぶしカード+白抜き(.hot)。
       「出勤日だけ赤」のコンテキスト化は視認性の声(2026-07-12)で廃止、quiet配色は撤去済み */
    #shiftRoot .sf-dl-card.hot { border: none; background: linear-gradient(135deg, #ef5b62, #d23343); box-shadow: 0 10px 24px -10px rgba(210, 51, 67, .6); }
    #shiftRoot .sf-dl-card.hot .sf-h { color: #fff; }
    #shiftRoot .sf-dl-card.hot .sf-h::before { background: #fff; }
    #shiftRoot .sf-dl-card.hot .sf-sub { color: rgba(255, 255, 255, .92); }
    #shiftRoot .sf-dl-card.hot .sf-dl-abs { background: #fff; color: #d23343; border: none; box-shadow: 0 2px 9px rgba(0, 0, 0, .14); }
    #shiftRoot .sf-dl-card.hot .sf-dl-late { border: 1.5px solid rgba(255, 255, 255, .9); background: transparent; color: #fff; }

    @media (prefers-reduced-motion: reduce) {
      #shiftRoot .sf-cell.nextwork { animation: none !important; }
    }

    /* ---- T2: 見守る人に武器を(2026-07-12) ---- */

    /* 店舗ダッシュボードの「今日の一手」(数字→今日の1アクション) */
    .sd-move {
      background: linear-gradient(135deg, rgba(122, 184, 216, .14), rgba(159, 184, 242, .14)) !important;
      border: 1px solid rgba(122, 184, 216, .4) !important;
    }
    .sd-move-label { font-size: 9px; font-weight: 800; color: var(--main-dark); letter-spacing: .08em; }
    .sd-move-text { font-size: 12.5px; font-weight: 700; line-height: 1.65; margin-top: 3px; }
    .sd-move-text b { color: var(--main-dark); }

    /* 担当一覧の最終オープンチップ(🔥今日ひらいた / 📴◯日ひらいてない) */
    .bd-open {
      display: inline-block;
      font-size: 9px;
      font-weight: 800;
      border-radius: 999px;
      padding: 1px 7px;
      vertical-align: 1px;
      white-space: nowrap;
    }
    .bd-open.hot { background: rgba(255, 174, 66, .18); color: #b06a10; border: 1px solid rgba(255, 190, 100, .5); }
    .bd-open.cold { background: #fdeaee; color: var(--danger); border: 1px solid #f2c2cc; }

    /* ---- T3: 体験の統一(2026-07-12) ---- */

    /* タブ切替: 入ってくる側に軽いフェード+スライド */
    .tab-in { animation: tabIn .28s cubic-bezier(.2, .8, .3, 1); }
    @keyframes tabIn { from { opacity: 0; transform: translateY(8px); } }

    /* タブバーのピルインジケーター(選択タブの背景がスライドして追従) */
    .tabbar { position: relative; }
    .tb-pill {
      position: absolute;
      top: 6px;
      height: calc(100% - 12px - env(safe-area-inset-bottom));
      border-radius: 13px;
      background: rgba(42, 120, 214, .10);
      transition: left .3s cubic-bezier(.2, .8, .3, 1), width .3s cubic-bezier(.2, .8, .3, 1);
      z-index: 0;
      pointer-events: none;
    }
    .tabbar .tb { position: relative; z-index: 1; }

    /* ランキング1〜3位の表彰(金/銀/銅。キャストページの世界観と統一) */
    .person.rk1 { background: linear-gradient(135deg, #fff8e2, #ffefc2); border-color: #ecd28a; }
    .person.rk2 { background: linear-gradient(135deg, #f7f8fa, #ebedf2); border-color: #cdd3dd; }
    .person.rk3 { background: linear-gradient(135deg, #fdf3ea, #f8e3d2); border-color: #e2bd9a; }
    .rk-medal { width: 22px; font-size: 15px; text-align: center; flex-shrink: 0; }

    /* ---- スタートダッシュ・チェックリスト(新人の初期設定をクエスト化) ---- */
    .sd-list {
      background: rgba(255, 255, 255, .65);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 12px;
      margin: 10px 0 2px;
      text-align: left;
    }
    .sd-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 12.5px;
      font-weight: 800;
      margin-bottom: 6px;
    }
    .sd-count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
    .sd-complete { color: #b7791f; font-weight: 800; }
    .sd-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 0;
      border-top: 1px solid var(--border);
      font-size: 12px;
      font-weight: 700;
    }
    .sd-item .sd-check { font-size: 13px; flex-shrink: 0; }
    .sd-item.done .sd-label { color: var(--muted); text-decoration: line-through; font-weight: 400; }
    .sd-label { flex: 1; }
    .sd-go {
      flex-shrink: 0;
      font-size: 11px;
      font-weight: 800;
      color: var(--main-dark);
      background: #fff;
      border: 1.5px solid var(--main);
      border-radius: 999px;
      padding: 5px 10px;
      cursor: pointer;
      text-decoration: none;
    }
    .sd-go:active { transform: translateY(1px); }

    /* ---- 新人招待(店舗タブ) ---- */
    .sd-invite-btn {
      width: 100%;
      min-height: 44px;
      border: 1.5px dashed var(--main);
      background: rgba(255, 255, 255, .6);
      color: var(--main-dark);
      border-radius: 12px;
      padding: 10px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      margin: 0 0 10px;
    }
    .sd-invite-btn:active { transform: translateY(1px); }
    .inv-card { text-align: center; }
    .inv-title { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
    .inv-code {
      font-size: 30px;
      font-weight: 800;
      letter-spacing: .06em;
      font-variant-numeric: tabular-nums;
      background: #fff;
      border: 2px solid var(--main);
      border-radius: 14px;
      padding: 12px;
      user-select: all;
      -webkit-user-select: all;
    }
    .inv-exp { font-size: 10.5px; color: var(--muted); margin-top: 6px; }
    .inv-open { margin-top: 10px; text-align: left; font-size: 11.5px; }
    .inv-open summary { color: var(--muted); cursor: pointer; }
    .inv-row { padding: 6px 2px; border-bottom: 1px solid var(--border); }
    .inv-row span { color: var(--muted); font-size: 10px; }

    /* 先月ペース比チップ(店舗ダッシュボード・数値推移の文脈) */
    .sd-pace {
      display: inline-flex;
      align-items: baseline;
      gap: 5px;
      font-size: 11px;
      font-weight: 800;
      color: var(--muted);
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 4px 12px;
      margin-bottom: 8px;
    }
    .sd-pace.up { color: #1b7f4d; background: rgba(27, 175, 122, .1); border-color: rgba(27, 175, 122, .35); }
    .sd-pace span { font-size: 9px; font-weight: 400; color: var(--muted); }

    /* 今週のグッドニュース(管理者が「おめでとう」を言いに行ける起点) */
    .sd-news { border: 1px solid rgba(240, 200, 120, .55) !important; background: linear-gradient(135deg, rgba(255, 234, 170, .22), rgba(255, 214, 140, .14)) !important; }
    .sd-news-row { display: flex; align-items: baseline; gap: 7px; font-size: 12px; font-weight: 700; padding: 4px 0; }
    .sd-news-row .ic { flex-shrink: 0; }

    @media (prefers-reduced-motion: reduce) {
      .tab-in { animation: none !important; }
      .tb-pill { transition: none !important; }
    }

    @media (prefers-reduced-motion: reduce) {
      .sheet, .sheet-back, .p-next .path-node, .hero--f4 { animation: none !important; }
    }

    /* M1のアニメはreduced-motionで全停止(revealの不可視状態も解除する) */
    @media (prefers-reduced-motion: reduce) {
      .next-chip.nc-near, .enter-in, .rv-in .bar, .rv-in .bar-forecast,
      #groups3.rv-in svg rect, .month-card.rv-in polyline,
      .streak-pill .streak-flame, .streak-toast,
      .q-row.q-just, .q-row.q-just .q-check, .q-perfect.q-pop { animation: none !important; }
      .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
      .month-card.rv-in polyline { stroke-dasharray: none; stroke-dashoffset: 0; }
    }

    /* コーチの吹き出し */
    .coach {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 16px;
    }

    .coach-face { font-size: 24px; line-height: 1.2; }

    .coach-text {
      flex: 1;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 4px 14px 14px 14px;
      padding: 10px 14px;
      font-size: 12px;
      line-height: 1.7;
      color: var(--text);
    }

    /* ---- 半透明カード(グラス調) ----
     * ⚠️ スクロールする要素に backdrop-filter を付けないこと(2026-07-16)。
     * カード枚数ぶん毎フレーム再ブラーが走り、スマホ(特にLINEのWebView)で
     * スクロールがかくつく主因だった。blurは固定UI(タブバー)と一時オーバーレイのみ。
     * 質感は「透明度高め(.82)+ボーダー」で補償する。入力欄は不透明のまま。 */
    .trend-card, .mini, .shift-wrap, .sdcard, .person, .jc {
      background: rgba(255, 255, 255, .60);
      border-color: rgba(255, 255, 255, .72);
    }

    .profile-card, .card, .month-card {
      background: rgba(255, 255, 255, .82);
      border-color: rgba(255, 255, 255, .72);
    }

    /* 月データカード内のタイルは不透明寄りのbgタイル(平坦化)を維持する */
    .month-card .mini { background: var(--bg); }

    .admin-bar { background: rgba(255, 247, 236, .92); border-color: rgba(243, 226, 196, .8); }

    .coach-text { background: rgba(247, 251, 255, .7); }

    /* ---- ダークモード ---- */
    .updating {
      position: fixed;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 50;
      background: rgba(37, 49, 59, .88);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 999px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
    }

    .footer { padding: 18px 4px 28px; color: var(--muted); font-size: 11px; text-align: center; }

    /* ---- 下部タブバー(管理者のみ表示) ---- */
    .tabbar {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      width: 100%;
      max-width: 480px;
      display: none;
      border-top: 1px solid var(--border);
      background: rgba(255, 255, 255, .82);
      backdrop-filter: blur(14px) saturate(1.3);
      -webkit-backdrop-filter: blur(14px) saturate(1.3);
      z-index: 40;
      box-shadow: 0 -4px 16px rgba(64, 124, 153, .10);
      padding-bottom: env(safe-area-inset-bottom);
    }

    body.has-tabs { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
    body.has-tabs .tabbar { display: flex; }

    .tabbar .tb {
      flex: 1;
      /* <button>化に伴うネイティブ装飾のリセット(見た目は従来どおり) */
      border: none;
      background: none;
      font-family: inherit;
      text-align: center;
      padding: 9px 0 11px;
      font-size: 11px;
      color: var(--muted);
      cursor: pointer;
    }

    .tabbar .tb.on { color: var(--bar-active); font-weight: 700; }
    .tabbar .tb:active { opacity: .6; }
    .tabbar .tb .ti { font-size: 20px; display: block; margin-bottom: 2px; }
    /* ==== シフトタブ(sf-*、#shiftRoot配下にスコープ) ==== */
    #shiftRoot { position: relative; padding-bottom: 8px; }
    #shiftRoot .sf-card { background: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.6); border-radius: 14px; padding: 11px 13px; margin-bottom: 12px; }
    #shiftRoot .sf-h { font-size: 16px; font-weight: 800; margin: 0 0 3px; display: flex; align-items: center; gap: 7px; letter-spacing: .01em; }
    #shiftRoot .sf-h::before { content: ''; width: 4px; height: 16px; border-radius: 3px; background: var(--bar-active,#d4537e); flex: none; }
    #shiftRoot .sf-sub { font-size: 11px; color: #8a8580; margin: 0 0 7px; }
    #shiftRoot .sf-err { font-size: 13px; color: #b23; padding: 14px 4px; text-align: center; }
    /* タブ見出し */
    #shiftRoot .sf-title { display: flex; align-items: center; gap: 11px; padding: 2px 2px 13px; }
    #shiftRoot .sf-title-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 23px; background: linear-gradient(135deg,#f7d9e6,#e4ecfb); box-shadow: 0 5px 14px -5px rgba(212,83,126,.45); }
    #shiftRoot .sf-title-t { font-size: 21px; font-weight: 800; letter-spacing: .01em; line-height: 1.08; }
    #shiftRoot .sf-title-s { font-size: 12px; color: #8a8580; margin-top: 2px; }
    /* 共通ページタイトル(担当タブ・店舗タブ) */
    .pgttl { display: flex; align-items: center; gap: 11px; padding: 2px 2px 13px; }
    .pgttl-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 23px; flex-shrink: 0; box-shadow: 0 5px 14px -5px rgba(212,83,126,.4); }
    .pgttl-t { font-size: 21px; font-weight: 800; letter-spacing: .01em; line-height: 1.08; }
    .pgttl-s { font-size: 12px; color: #8a8580; margin-top: 2px; }
    /* 当日の連絡ボタンの構造(配色は前方のquiet/hot定義が担当。
       旧・赤カード時代の色指定は撤去済み=薄い地に白見出しが浮く事故の再発防止) */
    #shiftRoot .sf-dl-btns { display: flex; gap: 9px; margin-top: 3px; }
    #shiftRoot .sf-dl-abs { flex: 1; padding: 11px; border-radius: 11px; border: none; font-weight: 800; font-size: 14px; cursor: pointer; }
    #shiftRoot .sf-dl-late { flex: 1; padding: 11px; border-radius: 11px; border: none; font-weight: 700; font-size: 14px; cursor: pointer; }
    #shiftRoot .sf-dl-abs:active, #shiftRoot .sf-dl-late:active { transform: translateY(1px); }
    /* 出勤日タップのアフォーダンス */
    #shiftRoot .sf-cell { position: relative; }
    #shiftRoot .sf-cell.tappable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
    #shiftRoot .sf-cell.tappable::after { content: '\270E'; position: absolute; top: 2px; right: 3px; font-size: 9px; color: #7ba0cc; line-height: 1; }
    #shiftRoot .sf-cell.tappable:active { transform: scale(.95); }
    /* 変更ボトムシート */
    /* ボトムシート化(2026-07-11): 中央ポップアップ→下から出るシート(親指圏・片手操作) */
    #shiftRoot .sf-modal-back { position: fixed; inset: 0; z-index: 200; background: rgba(20,16,24,.44); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; padding: 0; animation: sfmFade .18s ease; }
    #shiftRoot .sf-modal { width: 100%; max-width: 480px; max-height: 86vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; border-radius: 22px 22px 0 0; padding: 18px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 40px rgba(0,0,0,.28); animation: sheetUp .3s cubic-bezier(.2,.9,.3,1); }
    #shiftRoot .sf-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
    #shiftRoot .sf-modal-day { font-size: 18px; font-weight: 800; }
    #shiftRoot .sf-modal-day em { font-style: normal; color: #8a8580; font-size: 13px; margin-left: 4px; }
    #shiftRoot .sf-modal-x { width: 32px; height: 32px; border-radius: 50%; border: none; background: #f1f1f5; font-size: 15px; cursor: pointer; color: #77726d; }
    #shiftRoot .sf-modal-cur { font-size: 13px; color: #6a655f; margin-bottom: 13px; } #shiftRoot .sf-modal-cur b { color: #0f4c81; font-size: 14px; }
    #shiftRoot .sf-modal-tc { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
    #shiftRoot .sf-modal-tc select { flex: 1; font-size: 15px; padding: 10px 9px; border-radius: 11px; border: 1px solid #d9d9e0; background: #fff; }
    #shiftRoot .sf-mgo { padding: 10px 15px; border-radius: 11px; border: none; background: var(--bar-active,#d4537e); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
    #shiftRoot .sf-mrest { width: 100%; padding: 12px; border-radius: 12px; border: 1.5px solid #eab6ad; background: #fff5f1; color: #c0392b; font-weight: 700; font-size: 14px; cursor: pointer; }
    #shiftRoot .sf-mrest:active { transform: translateY(1px); }
    @keyframes sfmFade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes sfmPop { from { transform: scale(.93); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    #shiftRoot .sf-cf-list { max-height: 40vh; overflow-y: auto; margin: 4px 0 11px; border: 1px solid #ececf0; border-radius: 11px; }
    #shiftRoot .sf-cf-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; font-size: 13px; border-bottom: 1px solid rgba(0,0,0,.05); }
    #shiftRoot .sf-cf-row:last-child { border-bottom: none; }
    #shiftRoot .sf-cf-row em { font-style: normal; color: #8a8580; font-size: 11px; margin-left: 2px; }
    #shiftRoot .sf-cf-row b { color: #0f4c81; }
    #shiftRoot .sf-cf-none { padding: 16px; text-align: center; color: #8a8580; font-size: 13px; }
    #shiftRoot .sf-modal-msg { font-size: 13px; font-weight: 700; margin-bottom: 12px; line-height: 1.55; }
    #shiftRoot .sf-ta { width: 100%; box-sizing: border-box; min-height: 76px; border: 1px solid #d9d9e0; border-radius: 11px; padding: 11px; font-family: inherit; font-size: 14px; resize: vertical; margin-bottom: 13px; }
    #shiftRoot .sf-modal-sel { width: 100%; box-sizing: border-box; font-size: 15px; padding: 12px; border-radius: 11px; border: 1px solid #d9d9e0; background: #fff; margin-bottom: 13px; }
    @media (prefers-reduced-motion: reduce) { #shiftRoot .sf-modal-back, #shiftRoot .sf-modal { animation: none; } }
    #shiftRoot .sf-dlg { border: 1px solid #e2e2e8; border-radius: 10px; padding: 12px; margin-top: 10px; background: #fff; }
    #shiftRoot .sf-dlg .sf-msg { font-size: 13px; margin-bottom: 9px; line-height: 1.55; }
    #shiftRoot .sf-dlg .sf-msg.warn { color: #9a3b1a; font-weight: 700; }
    #shiftRoot .sf-dlg textarea { width: 100%; min-height: 60px; border: 1px solid #d9d9e0; border-radius: 8px; padding: 8px; font-family: inherit; font-size: 13px; resize: vertical; }
    #shiftRoot .sf-dlg select { font-size: 14px; padding: 6px 8px; border-radius: 8px; border: 1px solid #d9d9e0; background: #fff; }
    #shiftRoot .sf-dlg .sf-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
    #shiftRoot .sf-dlg .sf-ok { background: var(--bar-active, #d4537e); color: #fff; border: none; padding: 7px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; }
    #shiftRoot .sf-dlg .sf-cancel { background: #fff; border: 1px solid #d9d9e0; padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; }
    #shiftRoot .sf-cwtop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
    #shiftRoot .sf-cwtitle { font-size: 12px; font-weight: 600; color: #8a8580; margin-left: 11px; }
    #shiftRoot .sf-nav { display: flex; gap: 6px; }
    #shiftRoot .sf-nav button { width: 28px; height: 26px; border-radius: 8px; border: 1px solid #d9d9e0; background: #fff; font-size: 15px; cursor: pointer; color: #55504b; }
    #shiftRoot .sf-nav button:disabled { opacity: .3; cursor: default; }
    #shiftRoot .sf-hint { font-size: 11px; color: #c06; opacity: .75; text-align: center; margin-top: 4px; }
    #shiftRoot .sf-view { overflow: hidden; position: relative; width: 100%; touch-action: pan-y; }
    #shiftRoot .sf-page { width: 100%; }
    #shiftRoot .sf-dots { display: flex; justify-content: center; gap: 6px; margin-top: 7px; }
    #shiftRoot .sf-dot { width: 7px; height: 7px; border-radius: 50%; background: #dcdce3; cursor: pointer; transition: all .2s; }
    #shiftRoot .sf-dot.on { background: var(--bar-active, #d4537e); width: 18px; border-radius: 4px; }
    #shiftRoot .sf-cal { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
    #shiftRoot .sf-wd { font-size: 11px; color: #8a8580; text-align: center; padding: 1px 0; }
    #shiftRoot .sf-wd.sun { color: #d4537e; } #shiftRoot .sf-wd.sat { color: #185fa5; }
    #shiftRoot .sf-cell { min-height: 40px; border-radius: 7px; background: rgba(244,244,248,.85); padding: 2px 1px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
    #shiftRoot .sf-cell.empty { background: transparent; }
    #shiftRoot .sf-cell.on { background: #e9f1f9; border: 1px solid #bcd6ef; justify-content: flex-start; }
    #shiftRoot .sf-cell.today { outline: 2px solid var(--bar-active, #d4537e); outline-offset: -2px; }
    #shiftRoot .sf-num { font-size: 12px; line-height: 1.05; }
    #shiftRoot .sf-cell.on .sf-num { font-weight: 700; color: #0f4c81; }
    #shiftRoot .sf-t { font-size: 11px; color: #37699b; line-height: 1.08; }
    #shiftRoot .sf-t.end { color: #89a5c3; }
    #shiftRoot .sf-off { font-size: 11px; color: #d2d5db; line-height: 1; }
    #shiftRoot .sf-phead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
    #shiftRoot .sf-plbl { font-size: 14px; font-weight: 700; }
    #shiftRoot .sf-pright { display: flex; align-items: center; gap: 6px; }
    #shiftRoot .sf-badge { font-size: 11px; padding: 2px 9px; border-radius: 7px; }
    #shiftRoot .sf-badge.done { background: #a9a7ad; color: #fff; }
    #shiftRoot .sf-badge.open { background: #f7e0e9; color: #a83b64; }
    #shiftRoot .sf-panel.done { opacity: .5; pointer-events: none; }
    #shiftRoot .sf-days { display: flex; flex-direction: column; }
    #shiftRoot .sf-day { display: flex; align-items: center; gap: 8px; padding: 3px 2px; border-bottom: 1px solid rgba(0,0,0,.05); }
    #shiftRoot .sf-day.off .sf-times { visibility: hidden; }
    #shiftRoot .sf-date { width: 60px; font-size: 13px; flex: none; }
    #shiftRoot .sf-date em { font-style: normal; color: #8a8580; font-size: 11px; margin-left: 2px; }
    #shiftRoot .sf-tog { white-space: nowrap; min-width: 46px; padding: 3px 10px; border-radius: 7px; border: 1px solid #d9d9e0; background: #fff; font-size: 12px; cursor: pointer; flex: none; }
    #shiftRoot .sf-day:not(.off) .sf-tog { background: var(--bar-active, #d4537e); color: #fff; border-color: transparent; }
    #shiftRoot .sf-times { display: flex; align-items: center; gap: 3px; }
    #shiftRoot .sf-times select { font-size: 13px; padding: 1px 3px; border-radius: 6px; border: 1px solid #d9d9e0; background: #fff; }
    #shiftRoot .sf-tilde { color: #8a8580; }
    #shiftRoot .sf-submit { margin-top: 11px; width: 100%; padding: 11px; border-radius: 10px; border: none; background: var(--bar-active, #d4537e); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
    #shiftRoot .sf-submit:disabled { opacity: .5; }
    #shiftRoot .sf-cchint { font-size: 11px; color: #8a8580; margin-bottom: 7px; }
    #shiftRoot .sf-addbtn { width: 100%; padding: 12px; border-radius: 12px; border: none; background: linear-gradient(135deg,#e86aa0,#d4537e); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; margin: 0 0 8px; box-shadow: 0 6px 16px -6px rgba(212,83,126,.65); }
    #shiftRoot .sf-addbtn:active { transform: translateY(1px); }
    #shiftRoot .sf-addform { border: 1px solid #e2e2e8; border-radius: 10px; padding: 10px; margin-bottom: 10px; background: #fff; }
    #shiftRoot .sf-addform .row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
    #shiftRoot .sf-addform label { font-size: 12px; color: #8a8580; width: 34px; }
    #shiftRoot .sf-addform select { font-size: 13px; padding: 4px 6px; border-radius: 6px; border: 1px solid #d9d9e0; background: #fff; }
    #shiftRoot .sf-addform .go { padding: 6px 14px; border-radius: 8px; border: none; background: var(--bar-active, #d4537e); color: #fff; font-size: 13px; cursor: pointer; }
    #shiftRoot .sf-chg { border-bottom: 1px solid rgba(0,0,0,.05); padding: 5px 2px; }
    #shiftRoot .sf-chead { display: flex; align-items: center; gap: 8px; }
    #shiftRoot .sf-ctime { font-size: 13px; color: #55504b; flex: 1; }
    #shiftRoot .sf-cacts { display: flex; gap: 6px; flex: none; }
    #shiftRoot .sf-cacts button { white-space: nowrap; font-size: 12px; padding: 4px 9px; border-radius: 8px; border: 1px solid #d9d9e0; background: #fff; cursor: pointer; }
    #shiftRoot .sf-cpanel { margin-top: 6px; }
    #shiftRoot .sf-tform { display: flex; align-items: center; gap: 4px; }
    #shiftRoot .sf-tform select { font-size: 13px; padding: 3px 4px; border-radius: 6px; border: 1px solid #d9d9e0; background: #fff; }
    #shiftRoot .sf-go, #shiftRoot .sf-yes, #shiftRoot .sf-no { white-space: nowrap; font-size: 12px; padding: 5px 10px; border-radius: 8px; border: 1px solid #d9d9e0; background: #fff; cursor: pointer; }
    #shiftRoot .sf-note { font-size: 12px; padding: 6px 8px; border-radius: 8px; margin-bottom: 6px; line-height: 1.5; }
    #shiftRoot .sf-note.ok { background: rgba(29,158,117,.12); color: #147a58; }
    #shiftRoot .sf-note.warn { background: rgba(210,90,48,.14); color: #9a3b1a; }
    #shiftRoot .sf-note.thanks { background: rgba(212,83,126,.12); color: #a83b64; font-weight: 700; }
    #shiftRoot .sf-note.err { background: rgba(210,60,60,.12); color: #b23; }
    #shiftRoot .sf-confirm { display: flex; gap: 9px; margin-top: 2px; }
    #shiftRoot .sf-yes { background: var(--bar-active, #d4537e); color: #fff; border-color: transparent; }
    #shiftRoot .sf-confirm .sf-yes, #shiftRoot .sf-confirm .sf-no { flex: 1; font-size: 14px; font-weight: 700; padding: 12px; border-radius: 11px; }
    #shiftRoot .sf-confirm .sf-no { background: #f2f2f5; color: #55504b; }
    #shiftRoot .sf-confirm .sf-yes:active, #shiftRoot .sf-confirm .sf-no:active { transform: translateY(1px); }
    /* インライン2段階確認(ポップアップを重ねない「本当にいいですか?」) */
    #shiftRoot .sf-recheck { background: #fdecec; border: 1px solid #f0b6bc; border-radius: 12px; padding: 12px 13px; margin: 10px 0 9px; font-size: 14px; font-weight: 800; color: #b71f2e; display: flex; flex-direction: column; gap: 4px; animation: sfmPop .2s cubic-bezier(.2,.8,.2,1); }
    #shiftRoot .sf-recheck span { font-size: 11.5px; font-weight: 700; color: #a3565e; }
    #shiftRoot .sf-confirm .sf-yes.sf-yes-danger { background: #d23343; font-size: 15px; }
    #shiftRoot .sf-confirm .sf-yes.sf-yes-danger:disabled { opacity: .45; cursor: default; }
    #shiftRoot .sf-loading { font-size: 12px; color: #8a8580; }
    #shiftRoot .sf-toast { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%); background: #22252b; color: #fff; font-size: 12px; padding: 9px 14px; border-radius: 10px; opacity: 0; transition: opacity .2s; max-width: 86%; text-align: center; pointer-events: none; z-index: 50; }
    #shiftRoot .sf-toast.on { opacity: 1; }
    #shiftRoot .sf-dev-screen { background: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.6); border-radius: 14px; padding: 44px 24px; text-align: center; margin-top: 8px; }
    #shiftRoot .sf-dev-badge { display: inline-block; background: #a83b64; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 6px; margin-bottom: 12px; letter-spacing: .06em; }
    #shiftRoot .sf-dev-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
    #shiftRoot .sf-dev-msg { font-size: 13px; color: #8a8580; line-height: 1.7; }
    .sf-busy { position: fixed; inset: 0; background: rgba(255,255,255,.35); z-index: 999; display: flex; align-items: center; justify-content: center; touch-action: none; overscroll-behavior: contain; }
    .sf-busy span { background: #22252b; color: #fff; font-size: 13px; padding: 10px 18px; border-radius: 10px; }

    /* ---- 店舗ダッシュボード ---- */
    /* 店舗セレクタ = セグメンテッドコントロール(iOS風)。淡いトラック上で選択中だけ白い浮きピル */
    .sdchips {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      padding: 5px;
      margin-bottom: 13px;
      background: rgba(120,105,125,.10);
      border-radius: 15px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .sdchips::-webkit-scrollbar { display: none; }

    .sdchip {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;   /* トラックpadding込みでタップ領域44px以上 */
      padding: 8px 20px;
      border: none;
      background: transparent;
      border-radius: 11px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .01em;
      color: var(--muted);
      cursor: pointer;
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
      transition: color .18s ease, background .2s ease, box-shadow .2s ease, transform .12s ease;
    }
    .sdchip:hover { color: var(--text); }
    .sdchip.on {
      background: linear-gradient(160deg, #ffffff, #fdf3f7);
      color: var(--bar-active);
      font-weight: 800;
      box-shadow: 0 3px 9px -3px rgba(90,45,65,.28), 0 1px 2px rgba(0,0,0,.05);
    }
    .sdchip:active { transform: scale(.95); }
    @media (prefers-reduced-motion: reduce) { .sdchip { transition: none; } .sdchip:active { transform: none; } }

    .jump { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; }

    .jc {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      min-height: 44px;   /* タップ領域を44px以上に確保 */
      gap: 5px;
      border: 1px solid var(--border);
      background: var(--card);
      border-radius: 999px;
      padding: 5px 11px 5px 6px;
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      cursor: pointer;
    }

    .jc:active { opacity: .7; }

    .jc b {
      width: 16px; height: 16px;
      border-radius: 50%;
      background: #e3eef8;
      color: var(--bar-active);
      font-size: 10px;
      display: flex; align-items: center; justify-content: center;
    }

    .sec { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; scroll-margin-top: 10px; }

    .secnum {
      width: 24px; height: 24px;
      border-radius: 8px;
      background: var(--bar-active);
      color: #fff;
      font-size: 13px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

    .sect { font-size: 15px; font-weight: 800; }
    .sec::after { content: ''; flex: 1; height: 1px; background: var(--border); }

    .sdcard {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px 14px;
      box-shadow: var(--shadow);
      margin-bottom: 10px;
      /* 画面外カードの描画を遅延してスクロールを軽くする(縦積みのみ・カルーセルには付けない) */
      content-visibility: auto;
      contain-intrinsic-size: auto 160px;
    }

    .chead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
    .cht { font-size: 12px; font-weight: 700; color: var(--muted); }
    .cnow { font-size: 11px; color: var(--muted); white-space: nowrap; }
    .cnow b { font-size: 19px; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
    .cnow .fc { font-size: 13px; color: var(--bar-active); font-weight: 800; font-variant-numeric: tabular-nums; }

    .sdleg { display: flex; flex-wrap: wrap; gap: 8px; font-size: 10px; color: var(--muted); justify-content: center; margin-top: 2px; }
    .sdleg span { display: flex; align-items: center; gap: 3px; }
    .lb { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

    .pies { display: flex; gap: 10px; }
    .pie { flex: 1; text-align: center; }

    .cathead { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; margin: 12px 0 6px; }
    .cnt { font-size: 10px; border-radius: 999px; padding: 1px 7px; color: #fff; }

    .person {
      display: flex; align-items: center; gap: 10px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 9px 12px;
      margin-bottom: 6px;
    }

    .person.tappable { cursor: pointer; }
    .person.tappable:active { opacity: .7; }

    .pav {
      width: 36px; height: 36px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700;
      flex-shrink: 0;
      background: #cfe6f3;
      color: var(--main-dark);
      object-fit: cover;
      overflow: hidden;
    }

    .pmain { flex: 1; min-width: 0; }
    .pname { font-size: 13px; font-weight: 700; }
    .pstore { font-size: 10px; font-weight: 400; color: var(--muted); }
    .preason { font-size: 11px; font-weight: 700; }
    .pstat { font-size: 10px; color: var(--muted); line-height: 1.5; }

    .pfore { text-align: right; font-size: 10px; color: var(--muted); line-height: 1.5; white-space: nowrap; }
    .pfore b { font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }

    .rsales { text-align: right; white-space: nowrap; margin-right: 2px; }
    .rsales b { font-size: 21px; font-weight: 800; color: var(--danger); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

    /* ---- 担当(Buddy)タブ ---- */
    .bd-badge {
      font-size: 10px;
      font-weight: 800;
      border-radius: 999px;
      padding: 3px 10px;
      white-space: nowrap;
    }

    .bd-badge.ok { background: #e1f5ee; color: #0f7a55; }
    .bd-badge.ng { background: #fdeaee; color: #c84b5f; }
    .bd-badge.tbd { background: #eef2f6; color: var(--muted); }

    .bd-metrics {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 6px;
      margin: 10px 0;
    }

    .bd-m { text-align: center; background: var(--bg); border-radius: 10px; padding: 7px 2px 6px; }
    .bd-m .l { font-size: 9px; color: var(--muted); }
    .bd-m .v { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
    .bd-m .s { font-size: 9px; color: var(--muted); }

    .bd-eval { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }

    .bd-e {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      background: var(--bg);
      border-radius: 10px;
      padding: 6px 9px;
    }

    .bd-e .l { font-size: 10px; font-weight: 700; color: var(--muted); }

    .abc {
      font-size: 12px;
      font-weight: 800;
      border-radius: 7px;
      padding: 2px 9px;
      color: #fff;
      min-width: 26px;
      text-align: center;
    }

    .abc-A { background: #1e8e5a; }
    .abc-B { background: #d99114; }
    .abc-C { background: #c84b5f; }
    .abc-N { background: #b9c5cf; }

    .bd-sel {
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--card);
      color: var(--text);
      font-size: 12px;
      font-weight: 700;
      padding: 3px 6px;
      outline: none;
    }

    .bd-field { margin-top: 8px; }
    .bd-field .fl { font-size: 10px; font-weight: 700; color: var(--muted); margin-bottom: 3px; }

    .bd-input, .bd-textarea {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--card);
      color: var(--text);
      font-size: 13px;
      padding: 8px 10px;
      outline: none;
      font-family: inherit;
    }

    .bd-textarea { resize: vertical; min-height: 44px; }
    .bd-input:focus, .bd-textarea:focus { border-color: var(--main); }

    .bd-prev {
      background: var(--bg);
      border-left: 3px solid var(--main);
      border-radius: 0 10px 10px 0;
      padding: 7px 10px;
      font-size: 12px;
      margin-top: 8px;
    }

    .bd-prev .pl { font-size: 9px; color: var(--muted); font-weight: 700; }

    .bd-save {
      width: 100%;
      border: none;
      border-radius: 10px;
      background: var(--main);
      color: #fff;
      font-weight: 800;
      font-size: 13px;
      padding: 10px;
      margin-top: 10px;
      cursor: pointer;
    }

    .bd-save:disabled { opacity: .5; }
    .bd-saved { font-size: 10px; color: var(--muted); text-align: center; margin-top: 5px; }

    .bd-legend { font-size: 10px; color: var(--muted); line-height: 1.8; }
    .bd-legend b { color: var(--text); }

    /* ---- 担当タブ: ダッシュボードサマリ + ゲーミフィケーション(教育担当者を後押し) ---- */
    .bd-coach {
      display: flex; gap: 10px; align-items: flex-start;
      background: rgba(247, 251, 255, .7);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 11px 13px;
      margin-bottom: 12px;
    }
    .bd-coach .cf { font-size: 22px; line-height: 1; flex-shrink: 0; }
    .bd-coach .ct { font-size: 12.5px; line-height: 1.6; font-weight: 600; }
    .bd-coach .ct b { color: var(--bar-active); }

    .bd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
    .bd-stat {
      text-align: center; background: var(--card); border: 1px solid var(--border);
      border-radius: 12px; padding: 8px 2px; box-shadow: var(--shadow);
    }
    .bd-stat .v { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
    .bd-stat .v.warn { color: var(--danger); }
    .bd-stat .v.ok { color: #0f7a55; }
    .bd-stat .l { font-size: 9px; color: var(--muted); margin-top: 1px; line-height: 1.3; }

    /* 一覧サマリの補足行(要注意理由 / 次回やること / 悩み) */
    .bd-sub { font-size: 10.5px; line-height: 1.55; margin-top: 3px; }
    .bd-sub div { display: flex; gap: 4px; }
    .bd-sub .k { flex-shrink: 0; font-weight: 700; }
    .bd-sub .warn .k, .bd-sub .warn { color: var(--danger); }
    .bd-sub .todo .k { color: var(--main-dark); }
    .bd-sub .worry .k { color: var(--muted); }
    .bd-sub .v { min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* 達成トロフィー(前回アクションを「できた」で得られる) */
    .bd-trophy {
      display: flex; align-items: center; gap: 9px;
      background: linear-gradient(120deg, #fff5d6, #ffe9a8);
      border: 1px solid #f0d98a; border-radius: 12px;
      padding: 9px 12px; margin-top: 10px;
    }
    .bd-trophy .ti { font-size: 24px; flex-shrink: 0; }
    .bd-trophy .tt { font-size: 12px; font-weight: 800; color: #7a5a10; }
    .bd-trophy .ts { font-size: 11px; color: #8a6a1a; margin-top: 1px; }

    /* これまでの悩み(折りたたみ履歴) */
    .bd-history { margin-top: 6px; }
    .bd-history summary { font-size: 10px; color: var(--muted); cursor: pointer; }
    .bd-history .hitem { font-size: 11px; color: var(--muted); padding: 4px 0 0; line-height: 1.5; }
    .bd-history .hitem em { font-style: normal; color: var(--text); }

    /* 達成バッジ(カードヘッダ脇の小さなコレクション数) */
    .bd-ach { font-size: 10px; font-weight: 800; color: #7a5a10; background: #fff3cf; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

    /* フィールドの状態チップ(記録済み / 未保存 / 未設定・未入力 / サイクル) */
    .bd-state { font-size: 9px; font-weight: 800; border-radius: 999px; padding: 1px 8px; vertical-align: 1px; white-space: nowrap; }
    .bd-state.saved { background: #e1f5ee; color: #0f7a55; }
    .bd-state.dirty { background: #fdeaee; color: #c0392b; }
    .bd-state.empty { background: #fff3cf; color: #8a6a1a; }
    .bd-state.phase { background: #e3eef8; color: #2a78d6; }
    .bd-state.locked { background: #eef2f6; color: var(--muted); }

    /* 保存ボタン: 変更がない(=保存済み)ときは沈めて「押す必要なし」を伝える */
    .bd-save.clean { background: #e4ecf2; color: #78899a; cursor: default; }