/* ============================================================
   モバイルりんく デザイントークン（設計書14章・25章）
   ブランド: 深緑 × クリーム × オレンジ ＋ マスコット
   モックアップ（pages/01〜14）から採色した実測値を正本とする
   シーシャ店のブランド「もくぽち」の上書きと共通部品 ui-* は後半（25章）
   ============================================================ */

:root {
  /* --- ブランド緑 --- */
  --green:        #07563D;   /* 主要ボタン・アクティブ */
  --green-dark:   #043A2A;   /* hover / 押下 */
  --green-deep:   #054231;   /* サイドバー地 */
  --green-soft:   #316859;   /* サイドバーのアクティブ */
  --green-tint:   #EAF6EF;   /* 淡い面（情報パネル） */
  --green-tint-2: #F1FAF5;   /* さらに淡い面 */
  --green-line:   #CFE6D9;
  --green-text:   #0A6B4A;   /* tint上の文字・数値 */

  /* --- アクセント（ガチャ・要注意） --- */
  --orange:       #F47A20;
  --orange-dark:  #DC6407;
  --orange-tint:  #FFF0E4;
  --orange-text:  #B45309;

  /* --- 警告 --- */
  --red:          #E43D34;
  --red-tint:     #FFF0EF;
  --red-line:     #F8C9C5;

  /* --- クリーム（特典・ごほうび） --- */
  --cream:        #FFF7E8;
  --cream-2:      #FFF5DF;
  --cream-line:   #F3E3C0;
  --gold-text:    #8A6200;

  /* --- 補助（卓ステータス等） --- */
  --purple-tint:  #F4F0FB;
  --purple:       #7C5BD9;
  --blue-tint:    #EEF4FC;
  --blue:         #2563EB;

  /* --- 面 --- */
  --bg:           #F6F8F5;
  --surface:      #FFFFFF;
  --surface-2:    #FBFCFA;
  --line:         #E4E9E3;
  --line-2:       #EEF0ED;
  --text:         #111512;
  --text-sub:     #6B756E;
  --text-mute:    #98A29B;

  /* 旧トークン名の互換（既存コードが参照しているもの） */
  --ink-navy:     var(--green-deep);
  --deep-purple:  var(--green);
  --yellow:       var(--orange);
  --yellow-dark:  var(--orange-dark);
  --peach:        var(--orange);
  --error:        var(--red);
  --alert:        var(--red);
  --muted:        var(--text-sub);
  --st-new:       var(--green);
  --st-cooking:   var(--orange);
  --st-ready:     var(--blue);
  --st-served:    #16A34A;
  --st-billing:   var(--purple);
  --st-reserved:  var(--purple);

  /* --- 形 --- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;
  --shadow:    0 1px 2px rgba(17,21,18,.04), 0 4px 14px rgba(17,21,18,.05);
  --shadow-md: 0 2px 6px rgba(17,21,18,.06), 0 10px 26px rgba(17,21,18,.07);
  --shadow-lg: 0 12px 40px rgba(17,21,18,.16);

  --font: "Hiragino Sans", -apple-system, BlinkMacSystemFont, "Noto Sans JP",
          "Yu Gothic", "Meiryo", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { letter-spacing: -.01em; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 16px; }
img { max-width: 100%; }

/* 金額・タイマーは桁を揃える */
.num { font-variant-numeric: tabular-nums; }

/* ============================================================
   ボタン
   ============================================================ */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 16px 18px; border: none;
  border-radius: var(--r-md); font-size: 16px; font-weight: 700;
  transition: transform .08s ease, background .15s ease, opacity .15s ease;
}
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); }
.btn-accent { background: var(--orange); color: #fff; }
.btn-accent:hover { background: var(--orange-dark); }
.btn-danger { background: var(--red); color: #fff; }
.btn-secondary { background: var(--surface); color: var(--green);
                 border: 1.5px solid var(--green); font-weight: 700; }
.btn-outline { background: var(--surface); color: var(--text); border: 1.5px solid var(--line); }
.btn-text { background: none; color: var(--text-sub); font-weight: 600; }
.btn-green { background: var(--green); color: #fff; }

/* 小さいボタン（管理画面・現場） */
.btn-sm {
  padding: 9px 15px; border-radius: var(--r-sm); border: 1.5px solid var(--line);
  background: var(--surface); font-size: 12.5px; font-weight: 700; color: var(--text);
  transition: background .15s, border-color .15s;
}
.btn-sm:hover { background: var(--green-tint-2); border-color: var(--green-line); }
.btn-sm.primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn-sm.primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
.btn-sm.dark { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.btn-sm.danger { color: var(--red); border-color: var(--red-line); }
.btn-sm.danger:hover { background: var(--red-tint); }
.btn-sm:disabled { opacity: .45; }

/* ============================================================
   チップ・ピル
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
  border-radius: var(--r-full); font-size: 11px; font-weight: 700; white-space: nowrap;
}
.chip-ninki   { background: var(--orange-tint); color: #C2410C; }
.chip-osusume { background: var(--green-tint);  color: var(--green-text); }
.chip-soldout { background: #EEF0ED; color: #8A938C; }
.chip-prize   { background: var(--cream-2); color: var(--gold-text); }
.chip-tbl     { background: var(--green-tint); color: var(--green-text);
                font-size: 13px; font-weight: 700; padding: 7px 14px; }
.chip-line    { background: var(--green); color: #fff; }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px;
        border-radius: var(--r-full); font-size: 11px; font-weight: 700; }
.p-draft     { background: #EEF0ED; color: #6B756E; }
.p-scheduled { background: var(--blue-tint);  color: var(--blue); }
.p-sending   { background: var(--orange-tint); color: var(--orange-text); }
.p-sent      { background: var(--green-tint);  color: var(--green-text); }
.p-canceled, .p-failed { background: var(--red-tint); color: #B42318; }
.p-on  { background: var(--green-tint); color: var(--green-text); }
.p-off { background: #EEF0ED; color: #6B756E; }

/* ============================================================
   面
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.panel-mint  { background: var(--green-tint);  border: 1px solid var(--green-line); border-radius: var(--r-lg); }
.panel-cream { background: var(--cream);       border: 1px solid var(--cream-line); border-radius: var(--r-lg); }
.panel-red   { background: var(--red-tint);    border: 1px solid var(--red-line);   border-radius: var(--r-lg); }

/* ============================================================
   マスコット
   ============================================================ */
.mascot { display: block; object-fit: contain; }
.mascot-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--green-tint); object-fit: cover; object-position: center 22%;
}

/* ============================================================
   トグルスイッチ
   ============================================================ */
.sw { width: 48px; height: 27px; border-radius: var(--r-full); background: #D6DBD6; border: none;
      position: relative; flex: none; transition: background .2s; padding: 0; }
.sw i { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%;
        background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.sw.on { background: var(--green); }
.sw.on i { transform: translateX(21px); }

/* ラジオ（選択マーク） */
.radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #D6DBD6; flex: none;
         display: grid; place-items: center; transition: border-color .15s; }
.radio.on { border-color: var(--green); }
.radio.on::after { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--green); }

/* ============================================================
   5ステップ進行バー（お客様画面）
   ============================================================ */
.steps5 { display: flex; align-items: flex-start; background: var(--surface);
          padding: 14px 10px 12px; border-bottom: 1px solid var(--line-2); }
.steps5 .s { flex: 1; text-align: center; position: relative; }
.steps5 .s .c { width: 30px; height: 30px; border-radius: 50%; background: #EEF0ED; color: #A9B2AB;
                display: grid; place-items: center; margin: 0 auto 6px;
                font-size: 13px; font-weight: 700; position: relative; z-index: 2; }
.steps5 .s .l { font-size: 11px; color: var(--text-mute); font-weight: 600; }
.steps5 .s.done .c { background: var(--green); color: #fff; }
.steps5 .s.now  .c { background: var(--green); color: #fff; box-shadow: 0 0 0 4px rgba(7,86,61,.12); }
.steps5 .s.now  .l { color: var(--green); font-weight: 700; }
.steps5 .s.done .l { color: var(--text-sub); }
.steps5 .s::before { content: ''; position: absolute; top: 14px; left: -50%; width: 100%;
                     height: 2px; background: #EEF0ED; z-index: 1; }
.steps5 .s.done::before, .steps5 .s.now::before { background: #7FBFA3; }
.steps5 .s:first-child::before { display: none; }

/* ============================================================
   KPIカード（アイコン円 ＋ ラベル ＋ 数値）
   ============================================================ */
.stat { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
        padding: 15px 18px; display: flex; align-items: center; gap: 14px; }
.stat .ic { width: 38px; height: 38px; border-radius: 50%; background: var(--green-tint);
            color: var(--green-text); display: grid; place-items: center;
            font-size: 14px; font-weight: 700; flex: none; }
.stat .bd { min-width: 0; }
.stat .lb { font-size: 12px; color: var(--text-sub); }
.stat .vl { font-size: 25px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .vl small { font-size: 13px; font-weight: 700; margin-left: 1px; }
.stat .df { font-size: 11.5px; color: var(--green-text); font-weight: 600; }
.stat.warn  { }
.stat.warn  .ic { background: var(--orange-tint); color: var(--orange-text); }
.stat.warn  .vl { color: var(--orange); }
.stat.alert { border-color: var(--red-line); }
.stat.alert .ic { background: var(--red-tint); color: var(--red); }
.stat.alert .vl { color: var(--red); }

/* ============================================================
   フォーカスは必ず見える状態にする
   ============================================================ */
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   意味で呼ぶトークン（v4.1・設計書25章）
   新しく書く画面はこちらを使う。色の値はブランドごとに下で上書きする。
   ============================================================ */
:root {
  --accent: var(--orange);  --accent-dark: var(--orange-dark);
  --accent-tint: var(--orange-tint);  --accent-text: var(--orange-text);
  --ok: #16A34A;   --ok-tint: var(--green-tint);  --ok-text: var(--green-text);
  --warn: var(--orange);  --warn-tint: var(--orange-tint);  --warn-text: var(--orange-text);
  --err: var(--red);  --err-tint: var(--red-tint);  --err-text: #B42318;
  --info: var(--blue);  --info-tint: var(--blue-tint);  --info-text: #1D4ED8;
  --hero-from: var(--green-deep);  --hero-to: var(--green);
  --side-from: var(--green-deep);  --side-to: var(--green-deep);
  --btn-radius: var(--r-md);
  --font-script: "Caveat", "Segoe Script", "Snell Roundhand", cursive;
}

/* ============================================================
   ブランド「もくぽち」（シーシャ店）— design-refs/mokupochi の実測値
   深緑 × 金 × クリーム。<html data-brand="mokupochi"> で切り替わる（shared/brand.js）
   ============================================================ */
:root[data-brand="mokupochi"] {
  --green:        #0E4B3B;
  --green-dark:   #083428;
  --green-deep:   #062E26;
  --green-soft:   #1C6A52;
  --green-tint:   #E6F0EA;
  --green-tint-2: #F2F7F3;
  --green-line:   #CADFD3;
  --green-text:   #0F5B45;

  --orange:       #E08A1F;
  --orange-dark:  #C0700F;
  --orange-tint:  #FDF1DC;
  --orange-text:  #9A5A0B;
  --red:          #D6453D;
  --red-tint:     #FBE8E6;
  --red-line:     #F2C4BF;
  --blue:         #2F7ED8;
  --blue-tint:    #E8F1FC;
  --purple:       #7A5BC7;
  --purple-tint:  #F1EDFA;

  --cream:        #FFF9ED;
  --cream-2:      #FBF3E3;
  --cream-line:   #EEDFC2;
  --gold-text:    #85602F;

  --bg:           #F7F5EF;
  --surface:      #FFFFFF;
  --surface-2:    #FBFAF6;
  --line:         #E6E2D8;
  --line-2:       #EFECE4;
  --text:         #14211C;
  --text-sub:     #5D6B64;
  --text-mute:    #9AA49F;

  --accent:       #B3844A;
  --accent-dark:  #946A36;
  --accent-tint:  #F6EEDF;
  --accent-text:  #85602F;
  --ok: #1E9E5A;  --ok-tint: #E4F4EA;  --ok-text: #177A45;
  --warn: #E08A1F; --warn-tint: #FDF1DC; --warn-text: #9A5A0B;
  --err: #D6453D; --err-tint: #FBE8E6; --err-text: #B3261E;
  --info: #2F7ED8; --info-tint: #E8F1FC; --info-text: #1E5FAE;
  --hero-from: #052A22;  --hero-to: #0F5241;
  --side-from: #062E26;  --side-to: #0A3D31;
  --btn-radius: var(--r-full);

  --shadow:    0 1px 2px rgba(20,33,28,.04), 0 6px 18px rgba(20,33,28,.06);
  --shadow-md: 0 2px 6px rgba(20,33,28,.06), 0 12px 28px rgba(20,33,28,.08);
  --shadow-lg: 0 14px 44px rgba(6,46,38,.20);
}
/* 既存の部品をもくぽちの形に寄せる（角丸の大きいボタン・金のアクセント） */
:root[data-brand="mokupochi"] .btn { border-radius: var(--btn-radius); }
:root[data-brand="mokupochi"] .btn-accent { background: var(--accent); }
:root[data-brand="mokupochi"] .btn-accent:hover { background: var(--accent-dark); }
:root[data-brand="mokupochi"] :focus-visible { outline-color: var(--accent); }

/* ============================================================
   共通部品 ui-*（v4.1・設計書25.3）
   店舗運営・シーシャの画面はこの部品で組む。色はすべてトークン経由なので
   どちらのブランドでもそのまま使える。見本: /_design/
   ============================================================ */

/* ---- ロゴ（マーク＋文字）: BRAND.lockup() が出す ---- */
.ui-lockup { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ui-lockup .mk { height: 42px; width: auto; flex: none; }
.ui-lockup .wd { height: 30px; width: auto; }
.ui-lockup .nm { font-size: 17px; font-weight: 900; letter-spacing: .01em; color: var(--green); }
.ui-lockup.on-dark .nm { color: #fff; }
.ui-lockup.sm .mk { height: 32px; } .ui-lockup.sm .wd { height: 22px; }
.ui-lockup.lg .mk { height: 64px; } .ui-lockup.lg .wd { height: 44px; }
/* 縦に積む（サイドバーの上・ログイン・打刻タブレット） */
.ui-lockup.stack { flex-direction: column; gap: 6px; }
.ui-lockup.stack .mk { height: 88px; } .ui-lockup.stack .wd { height: 30px; }

/* ---- 見出しの帯（深緑のグラデーション＋キャラクター） ---- */
.ui-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; min-height: 136px; padding: 20px 20px 22px;
  border-radius: var(--r-xl); color: #fff;
  background:
    radial-gradient(90% 120% at 88% 10%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(60% 80% at 70% 110%, rgba(179,132,74,.22), transparent 70%),
    linear-gradient(135deg, var(--hero-from), var(--hero-to));
}
.ui-hero::after {                       /* けむりのゆらぎ（飾り） */
  content: ''; position: absolute; inset: -30% -10% auto 40%; height: 160%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255,255,255,.10), transparent 70%);
  filter: blur(18px); transform: rotate(-18deg);
}
.ui-hero .tx { position: relative; z-index: 2; max-width: 66%; }
.ui-hero .eyebrow { display: block; font-size: 11px; font-weight: 800; letter-spacing: .16em;
                    color: #D9B77E; text-transform: uppercase; }
.ui-hero h1 { margin: 4px 0 6px; font-size: 24px; font-weight: 900; line-height: 1.3; letter-spacing: .01em; }
.ui-hero p { margin: 0; font-size: 12.5px; line-height: 1.75; color: rgba(255,255,255,.84); }
.ui-hero .art { position: absolute; right: 4px; bottom: -8px; z-index: 1; height: 118%; max-height: 176px;
                width: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)); pointer-events: none; }
.ui-hero .script { position: absolute; left: 20px; bottom: 8px; z-index: 2; font-family: var(--font-script);
                   font-size: 19px; font-weight: 600; color: rgba(217,183,126,.85); transform: rotate(-3deg); }
.ui-hero .act { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.ui-hero.light { color: var(--text);
  background: radial-gradient(80% 120% at 90% 0%, rgba(179,132,74,.14), transparent 60%),
              linear-gradient(135deg, var(--cream), var(--surface)); border: 1px solid var(--cream-line); }
.ui-hero.light p { color: var(--text-sub); }
.ui-hero.light .eyebrow { color: var(--accent-text); }
.ui-hero.compact { min-height: 104px; padding: 16px 18px; }
.ui-hero.compact h1 { font-size: 20px; }
.ui-hero.compact .art { max-height: 132px; }
/* 飾り文字（.script）を置いた帯は、下に余白を足して本文と重ならないようにする */
.ui-hero.has-script { padding-bottom: 40px; }
.ui-hero:has(> .script) { padding-bottom: 40px; }

/* ---- ページの見出し（管理画面・PC） ---- */
.ui-pagehead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.ui-pagehead .ic { width: 52px; height: 52px; border-radius: 16px; background: var(--green-tint);
                   color: var(--green); display: grid; place-items: center; flex: none; }
.ui-pagehead .ic svg { width: 26px; height: 26px; }
.ui-pagehead .tt { flex: 1; min-width: 220px; }
.ui-pagehead h1 { margin: 0; font-size: 24px; font-weight: 900; display: flex; align-items: center; gap: 10px; }
.ui-pagehead h1 code { font: 700 13px/1 var(--font); color: var(--text-mute); letter-spacing: .04em; }
.ui-pagehead p { margin: 4px 0 0; font-size: 13px; color: var(--text-sub); }
.ui-pagehead .act { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- 区切りの見出し（「最近の入荷履歴  すべて見る ›」） ---- */
.ui-sec { display: flex; align-items: center; gap: 8px; margin: 4px 2px 8px; }
.ui-sec h2 { margin: 0; font-size: 16px; font-weight: 900; flex: 1; }
.ui-sec .more { font-size: 12.5px; font-weight: 800; color: var(--green); text-decoration: none;
                background: none; border: none; padding: 4px 0; }
.ui-sec .more::after { content: ' ›'; }

/* ---- カード ---- */
.ui-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
           box-shadow: var(--shadow); padding: 16px; }
.ui-card.flat { box-shadow: none; }
.ui-card.tint { background: var(--green-tint-2); border-color: var(--green-line); }
.ui-card.cream { background: var(--cream); border-color: var(--cream-line); }
.ui-card-hd { display: flex; align-items: center; gap: 8px; margin: -2px 0 10px; }
.ui-card-hd h2, .ui-card-hd h3 { margin: 0; font-size: 15px; font-weight: 900; flex: 1; }
.ui-card-hd .more { font-size: 12.5px; font-weight: 800; color: var(--green); background: none; border: none; }

/* ---- 切り替え（入荷｜棚卸し） ---- */
.ui-seg { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line-2);
          border-radius: var(--r-full); box-shadow: var(--shadow); }
.ui-seg > button, .ui-seg > a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
          border: none; background: none; border-radius: var(--r-full); padding: 10px 8px; text-decoration: none;
          font-size: 13.5px; font-weight: 800; color: var(--text-sub); white-space: nowrap; }
.ui-seg > button svg, .ui-seg > a svg { width: 18px; height: 18px; }
.ui-seg > .on { background: var(--green); color: #fff; box-shadow: 0 4px 12px rgba(6,46,38,.22); }
.ui-seg.square { border-radius: var(--r-md); } .ui-seg.square > * { border-radius: 10px; }
/* 大きいタイルの切り替え（アイコン＋文字の2択） */
.ui-seg.tiles { background: none; border: none; box-shadow: none; padding: 0; gap: 10px; }
.ui-seg.tiles > * { flex-direction: column; gap: 6px; padding: 16px 8px; border-radius: var(--r-lg);
                    background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.ui-seg.tiles > * svg { width: 26px; height: 26px; }
.ui-seg.tiles > .on { background: var(--green); border-color: var(--green); color: #fff; }
/* 切り替えの件数（すべて 12・新規 3） */
.ui-seg .n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full); display: inline-grid;
             place-items: center; background: var(--line-2); color: var(--text-sub); font-size: 11px; font-weight: 800; }
.ui-seg > .on .n { background: rgba(255,255,255,.22); color: #fff; }

/* ---- 絞り込みチップ（すべて・シフト・タスク…）: 横にスクロール ---- */
.ui-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; }
.ui-chips::-webkit-scrollbar { display: none; }
.ui-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px;
           border-radius: var(--r-full); border: 1px solid var(--line); background: var(--surface);
           color: var(--text-sub); font-size: 13px; font-weight: 800; white-space: nowrap; }
.ui-chip .n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full); display: grid;
              place-items: center; background: var(--line-2); color: var(--text-sub); font-size: 11px; }
.ui-chip.on { background: var(--green); border-color: var(--green); color: #fff; }
.ui-chip.on .n { background: rgba(255,255,255,.22); color: #fff; }
.ui-chip svg { width: 16px; height: 16px; flex: none; }

/* ---- 状態のバッジ ---- */
.ui-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-full);
            font-size: 11.5px; font-weight: 800; white-space: nowrap; line-height: 1.5;
            background: var(--line-2); color: var(--text-sub); }
.ui-badge.ok    { background: var(--ok-tint);   color: var(--ok-text); }
.ui-badge.warn  { background: var(--warn-tint); color: var(--warn-text); }
.ui-badge.err   { background: var(--err-tint);  color: var(--err-text); }
.ui-badge.info  { background: var(--info-tint); color: var(--info-text); }
.ui-badge.gold  { background: var(--accent-tint); color: var(--accent-text); }
.ui-badge.green { background: var(--green); color: #fff; }
.ui-badge.dark  { background: var(--green-deep); color: #fff; }
/* .neutral は .line の別名（お客様画面の明細行 .line とぶつかる画面で使う） */
.ui-badge.line, .ui-badge.neutral { background: var(--surface); border: 1px solid var(--line); }
.ui-badge svg { width: 14px; height: 14px; flex: none; }
.ui-badge.dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ---- アイコンのタイル（一覧の左・KPIの左） ---- */
.ui-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none;
          background: var(--green-tint); color: var(--green); font-size: 16px; font-weight: 900; }
.ui-ico svg { width: 22px; height: 22px; }
.ui-ico.round { border-radius: 50%; }
.ui-ico.sm { width: 34px; height: 34px; border-radius: 11px; } .ui-ico.sm svg { width: 18px; height: 18px; }
.ui-ico.lg { width: 56px; height: 56px; border-radius: 18px; } .ui-ico.lg svg { width: 28px; height: 28px; }
.ui-ico.ok   { background: var(--ok-tint);   color: var(--ok); }
.ui-ico.warn { background: var(--warn-tint); color: var(--warn); }
.ui-ico.err  { background: var(--err-tint);  color: var(--err); }
.ui-ico.info { background: var(--info-tint); color: var(--info); }
.ui-ico.gold { background: var(--accent-tint); color: var(--accent); }
.ui-ico.mute { background: var(--line-2); color: var(--text-sub); }
.ui-ico.dark { background: var(--green); color: #fff; }
.ui-ico img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* ---- 一覧（アイコン＋タイトル＋サブ＋右端） ---- */
.ui-list { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line-2);
           border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.ui-list.plain { background: none; border: none; box-shadow: none; border-radius: 0; }
.ui-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; min-height: 64px;
           border: none; border-bottom: 1px solid var(--line-2); background: none; width: 100%;
           text-align: left; color: inherit; text-decoration: none; font: inherit; }
.ui-item:last-child { border-bottom: none; }
button.ui-item:hover, a.ui-item:hover { background: var(--surface-2); }
.ui-item .bd { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ui-item .bd b { font-size: 14.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-item .bd small { font-size: 12px; color: var(--text-sub); line-height: 1.55; }
.ui-item .bd .meta { font-size: 11.5px; color: var(--text-mute); }
.ui-item .tr { flex: none; display: grid; justify-items: end; gap: 4px; font-size: 13px; font-weight: 800; }
.ui-item .chev { flex: none; width: 8px; height: 8px; border-right: 2px solid var(--text-mute);
                 border-top: 2px solid var(--text-mute); transform: rotate(45deg); margin-right: 4px; }
/* お知らせ一覧のように、種類ごとに面の色を変えるとき */
.ui-item.tone-err  { background: var(--err-tint); }  .ui-item.tone-ok   { background: var(--ok-tint); }
.ui-item.tone-warn { background: var(--warn-tint); } .ui-item.tone-info { background: var(--info-tint); }
.ui-item.unread .bd b::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
                                background: var(--err); margin-right: 6px; vertical-align: 2px; }

/* ---- 数字のカード（KPI） ---- */
.ui-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ui-kpi { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface);
          border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); min-width: 0; }
.ui-kpi .bd { min-width: 0; display: grid; gap: 1px; }
.ui-kpi small { font-size: 12px; color: var(--text-sub); font-weight: 700; }
.ui-kpi b { font-size: 24px; font-weight: 900; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ui-kpi b small { font-size: 12.5px; color: inherit; margin-left: 2px; }
.ui-kpi em { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--text-mute); }
.ui-kpi em.up { color: var(--ok-text); } .ui-kpi em.down { color: var(--err-text); }
.ui-kpi.alert { border-color: var(--red-line); } .ui-kpi.alert b { color: var(--err); }
.ui-kpi.warn b { color: var(--warn-text); }
/* 深緑の面に数字を並べる（マイページの「今月の状況」） */
.ui-kpis.on-dark { background: linear-gradient(135deg, var(--hero-from), var(--hero-to)); border-radius: var(--r-xl);
                   padding: 14px; gap: 8px; color: #fff; }
.ui-kpis.on-dark .ui-kpi { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); box-shadow: none;
                           flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; }
.ui-kpis.on-dark .ui-kpi small { color: rgba(255,255,255,.75); }

/* ---- 状態のタイル（在庫あり 124 / 残りわずか 5 / 在庫切れ 2） ---- */
.ui-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.ui-tile { display: grid; justify-items: center; gap: 2px; padding: 14px 8px 12px; border-radius: var(--r-lg);
           background: var(--surface); border: 1px solid var(--line-2); text-align: center;
           font: inherit; color: inherit; }
.ui-tile svg { width: 24px; height: 24px; margin-bottom: 2px; }
.ui-tile b { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ui-tile small { font-size: 12px; font-weight: 800; }
.ui-tile.ok   { background: var(--ok-tint);   border-color: transparent; color: var(--ok-text); }
.ui-tile.warn { background: var(--warn-tint); border-color: transparent; color: var(--warn-text); }
.ui-tile.err  { background: var(--err-tint);  border-color: transparent; color: var(--err-text); }
.ui-tile.info { background: var(--info-tint); border-color: transparent; color: var(--info-text); }

/* ---- ボタン（丸みのある大きいボタン） ---- */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px;
          border: 1.5px solid var(--green); border-radius: var(--btn-radius); background: var(--green); color: #fff;
          font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap;
          transition: transform .08s ease, background .15s ease, opacity .15s ease; }
.ui-btn:hover { background: var(--green-dark); border-color: var(--green-dark); }
.ui-btn:active { transform: scale(.985); }
.ui-btn:disabled { opacity: .45; cursor: not-allowed; }
.ui-btn svg { width: 18px; height: 18px; }
.ui-btn.gold { background: var(--accent); border-color: var(--accent); }
.ui-btn.gold:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.ui-btn.cream { background: linear-gradient(180deg, #F8E7C5, #E9CD98); border-color: #E3C58C; color: var(--green-deep); }
.ui-btn.outline { background: var(--surface); color: var(--green); }
.ui-btn.outline:hover { background: var(--green-tint-2); }
.ui-btn.ghost { background: transparent; border-color: transparent; color: var(--green); }
.ui-btn.ghost:hover { background: var(--green-tint-2); }
.ui-btn.line, .ui-btn.neutral { background: var(--surface); border-color: var(--line); color: var(--text); }
.ui-btn.danger { background: var(--err); border-color: var(--err); }
.ui-btn.on-dark { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: #fff; }
.ui-btn.block { display: flex; width: 100%; white-space: normal; text-align: center; }
.ui-btn.lg { padding: 16px 24px; font-size: 16px; }
.ui-btn.sm { padding: 8px 14px; font-size: 12.5px; border-width: 1px; }
.ui-btn.icon { padding: 9px; width: 40px; height: 40px; }
/* タッチの端末では押せるところを 44px 以上にする（25.5）。PC のマウス操作では小さいボタンのまま */
@media (pointer: coarse) {
  .ui-btn.sm, .ui-chip, .ui-seg > button, .ui-seg > a { min-height: 44px; }
  .ui-btn.icon { width: 44px; height: 44px; }
}

/* ---- 入力 ---- */
.ui-field { display: grid; gap: 6px; margin-bottom: 14px; }
.ui-field > label, .ui-field > .lb { font-size: 12.5px; font-weight: 800; color: var(--text-sub); }
.ui-field .hint { font-size: 11.5px; color: var(--text-mute); }
.ui-input, .ui-field input:not([type=checkbox]):not([type=radio]), .ui-field select, .ui-field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: var(--text); font-size: 16px; font-family: inherit; }
.ui-field textarea { min-height: 88px; resize: vertical; }
.ui-input:focus, .ui-field input:focus, .ui-field select:focus, .ui-field textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(14,75,59,.14); }
.ui-search { position: relative; }
.ui-search input:not([type=checkbox]):not([type=radio]) { padding-left: 40px; }
.ui-search::before { content: ''; position: absolute; left: 15px; top: 50%; width: 13px; height: 13px;
                     border: 2px solid var(--text-mute); border-radius: 50%; transform: translateY(-60%); }
.ui-search::after { content: ''; position: absolute; left: 27px; top: 58%; width: 2px; height: 7px;
                    background: var(--text-mute); transform: rotate(-45deg); }
/* 数量の − 1 ＋ */
.ui-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-full);
              background: var(--surface); overflow: hidden; }
.ui-stepper button { width: 44px; height: 44px; border: none; background: var(--surface-2); color: var(--green);
                     font-size: 22px; font-weight: 800; }
.ui-stepper input, .ui-stepper output { width: 64px; text-align: center; border: none; font-size: 17px;
                                        font-weight: 800; background: none; font-variant-numeric: tabular-nums; }

/* ---- 表（管理画面） ---- */
.ui-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line-2);
                 border-radius: var(--r-lg); box-shadow: var(--shadow); }
.ui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.ui-table th { position: sticky; top: 0; background: var(--surface-2); color: var(--text-sub); font-size: 12px;
               font-weight: 800; text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-2);
               white-space: nowrap; }
.ui-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; white-space: nowrap; }
.ui-table td.wrap { white-space: normal; min-width: 180px; }
.ui-table tr:last-child td { border-bottom: none; }
.ui-table tbody tr:hover td { background: var(--green-tint-2); }
.ui-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-table .who { display: flex; align-items: center; gap: 10px; }
.ui-table .who small { display: block; color: var(--text-mute); font-size: 11.5px; }

/* ---- 顔写真・イニシャル ---- */
.ui-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
             background: var(--green-tint); color: var(--green); font-weight: 900; font-size: 15px; overflow: hidden; }
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-avatar.lg { width: 64px; height: 64px; font-size: 22px; }

/* ---- 進み具合（棒・輪） ---- */
.ui-progress { height: 8px; border-radius: var(--r-full); background: var(--line-2); overflow: hidden; }
.ui-progress > i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit;
                   background: linear-gradient(90deg, var(--green-soft), var(--green)); }
.ui-ring { --p: 0; --size: 96px; width: var(--size); height: var(--size); border-radius: 50%; display: grid;
           place-items: center; background: conic-gradient(var(--green) calc(var(--p) * 1%), var(--line-2) 0); }
.ui-ring > span { width: calc(var(--size) - 18px); height: calc(var(--size) - 18px); border-radius: 50%;
                  background: var(--surface); display: grid; place-items: center; text-align: center;
                  font-weight: 900; font-size: 18px; line-height: 1.2; }
.ui-ring > span small { display: block; font-size: 11px; color: var(--text-sub); font-weight: 700; }

/* ---- 下のタブ（スタッフアプリ・お客様） ---- */
.ui-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface);
             border-top: 1px solid var(--line-2); box-shadow: 0 -6px 20px rgba(20,33,28,.05);
             padding-bottom: env(safe-area-inset-bottom, 0px); }
.ui-tabbar .in { max-width: 560px; margin: 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
                 padding: 6px 6px 4px; gap: 4px; }
.ui-tabbar button, .ui-tabbar a { position: relative; border: none; background: none; border-radius: 14px;
                 padding: 7px 0 6px; display: grid; justify-items: center; gap: 3px; text-decoration: none;
                 color: var(--text-mute); font-size: 10.5px; font-weight: 800; }
.ui-tabbar svg { width: 23px; height: 23px; }
.ui-tabbar .on { color: var(--green); background: var(--green-tint-2); }
.ui-tabbar .bd { position: absolute; top: 3px; left: calc(50% + 7px); min-width: 17px; height: 17px; padding: 0 4px;
                 border-radius: var(--r-full); background: var(--err); color: #fff; font-size: 10px; font-weight: 900;
                 display: grid; place-items: center; border: 2px solid var(--surface); }

/* ---- 深緑のサイドバー（管理画面・受注タブレット） ---- */
.ui-side { display: flex; flex-direction: column; gap: 6px; min-height: 100%; padding: 18px 12px;
           color: #fff; background: linear-gradient(180deg, var(--side-from), var(--side-to)); }
.ui-side .brand { padding: 4px 6px 16px; display: grid; justify-items: center; gap: 4px; text-align: center; }
.ui-side .brand .ui-lockup { flex-direction: column; gap: 6px; }
.ui-side .brand .ui-lockup .mk { height: 84px; } .ui-side .brand .ui-lockup .wd { height: 28px; }
.ui-side .grp { margin: 12px 10px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
                color: rgba(255,255,255,.5); }
.ui-side nav { display: grid; gap: 2px; }
.ui-side nav a, .ui-side nav button { position: relative; display: flex; align-items: center; gap: 12px;
                padding: 11px 12px; border-radius: 12px; border: none; background: none; width: 100%; text-align: left;
                color: rgba(255,255,255,.82); font-size: 14px; font-weight: 700; text-decoration: none; }
.ui-side nav svg { width: 20px; height: 20px; flex: none; }
.ui-side nav a:hover, .ui-side nav button:hover { background: rgba(255,255,255,.07); color: #fff; }
.ui-side nav .on { background: rgba(255,255,255,.14); color: #fff; font-weight: 800; }
.ui-side nav .on::before { content: ''; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 4px;
                           border-radius: 0 4px 4px 0; background: var(--accent); }
.ui-side nav .bd { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full);
                   background: var(--err); color: #fff; font-size: 11px; font-weight: 900; display: grid; place-items: center; }
.ui-side .promo { margin-top: auto; padding: 14px; border-radius: var(--r-lg); background: rgba(255,255,255,.08);
                  border: 1px solid rgba(255,255,255,.12); font-size: 12px; line-height: 1.7; color: rgba(255,255,255,.85); }
.ui-side .me { display: flex; align-items: center; gap: 10px; padding: 10px 8px 0; font-size: 12.5px; }
.ui-side .me small { display: block; color: rgba(255,255,255,.6); font-size: 11px; }

/* ---- 空の状態・お祝い ---- */
.ui-empty { display: grid; justify-items: center; gap: 8px; padding: 26px 16px; text-align: center;
            color: var(--text-sub); font-size: 13px; line-height: 1.7; }
.ui-empty img { width: 104px; height: auto; }
.ui-empty b { color: var(--text); font-size: 15px; }

/* ---- 下から出る画面（シート） ---- */
.ui-sheet-bg { position: fixed; inset: 0; z-index: 60; background: rgba(6,20,16,.45); animation: ui-fade .15s ease; }
.ui-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-width: 560px; margin: 0 auto;
            max-height: 88vh; overflow: auto; background: var(--surface); border-radius: 24px 24px 0 0;
            padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--shadow-lg);
            animation: ui-up .2s ease; }
.ui-sheet::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 3px;
                    background: var(--line); margin: 0 auto 12px; }
@keyframes ui-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- 飾り文字（Good Shisha, Good Time.） ---- */
.ui-script { font-family: var(--font-script); font-weight: 600; letter-spacing: .01em; }