:root {
  --bg:       #0d0d0d;
  --surface:  #1a1a1a;
  --surface2: #222;
  --border:   #2d2d2d;
  --green:    #22c55e;
  --green-dk: #16a34a;
  --text:     #f0f0f0;
  --muted:    #888;
  --red:      #ef4444;
  --radius:   12px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', sans-serif;
  line-height: 1.5;
  padding-bottom: 100px;
}

/* ── Header ── */
.site-header {
  position: sticky;
  top: 0;
  background: #111;
  border-bottom: 1px solid var(--border);
  z-index: 100;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -.5px;
}
.logo span { color: var(--green); }

/* ── Cards ── */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  margin: 12px 16px 0;
}
.card-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 12px;
}

/* ── Date Button ── */
.date-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  width: 100%;
  -webkit-user-select: none;
  user-select: none;
}
.date-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1rem;
  outline: none;
  cursor: pointer;
  min-width: 0;
  pointer-events: none;
}
.date-display {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
}
.date-chevron {
  font-size: 1.4rem;
  color: var(--muted);
  line-height: 1;
}
.date-input::-webkit-calendar-picker-indicator { display: none; }

/* ── Service Pills ── */
.service-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pill {
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--muted);
  transition: .15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.pill.active {
  border-color: var(--green);
  color: var(--green);
  background: #0d2d1a;
}

/* ── Number Inputs ── */
.input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.input-row:last-child { border-bottom: none; }
.input-row label {
  font-size: 1rem;
  font-weight: 600;
  flex-shrink: 0;
}
.input-with-unit {
  display: flex;
  align-items: center;
  gap: 6px;
}
.input-with-unit input {
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 700;
  padding: 8px 10px;
  text-align: right;
  width: 110px;
  outline: none;
  -webkit-appearance: none;
}
.input-with-unit input:focus { border-color: var(--green); }
.input-with-unit span { font-size: .9rem; color: var(--muted); }
.time-inputs { display: flex; align-items: center; gap: 6px; }
.time-inputs input { width: 64px; }
select {
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  padding: 8px 10px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
select:focus { border-color: var(--green); }

/* ── Text Input ── */
.text-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.text-input-row:last-child { border-bottom: none; }
.text-input-row label { font-size: 1rem; font-weight: 600; flex-shrink: 0; width: 80px; }
.text-input-row input {
  flex: 1;
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  padding: 8px 10px;
  outline: none;
  -webkit-appearance: none;
}
.text-input-row input:focus { border-color: var(--green); }

/* ── Toggle ── */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row .label-group { display: flex; flex-direction: column; }
.toggle-row .label-group span:first-child { font-size: 1rem; font-weight: 600; }
.toggle-row .label-group span:last-child { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.toggle {
  position: relative;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 28px;
  cursor: pointer;
  transition: .2s;
}
.toggle input:checked + .toggle-track { background: var(--green); }
.toggle-track::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: .2s;
}
.toggle input:checked + .toggle-track::after { transform: translateX(20px); }

/* ── Computed Stats ── */
.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.stat-box {
  background: var(--surface2);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}
.stat-box .stat-val {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--green);
}
.stat-box .stat-lbl {
  font-size: .72rem;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Preview ── */
.preview-box {
  background: var(--surface2);
  border-radius: 10px;
  padding: 14px;
  font-size: .92rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text);
  min-height: 80px;
}
.char-count {
  text-align: right;
  font-size: .75rem;
  color: var(--muted);
  margin-top: 6px;
}
.char-count.over { color: var(--red); }

/* ── Buttons ── */
.action-area {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.btn-post {
  display: block;
  width: 100%;
  background: var(--green);
  color: #000;
  border: none;
  border-radius: var(--radius);
  font-size: 1.1rem;
  font-weight: 900;
  padding: 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-post:active { opacity: .85; }
.btn-save {
  display: block;
  width: 100%;
  background: transparent;
  color: var(--muted);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  padding: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-save:active { opacity: .75; }
.btn-secondary {
  display: inline-block;
  background: var(--surface2);
  color: var(--text);
  border: none;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 700;
  padding: 10px 20px;
  cursor: pointer;
  text-decoration: none;
}

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--green);
  color: #000;
}
.toast.toast-error { background: var(--red); color: #fff; }
.toast {
  font-weight: 700;
  font-size: .95rem;
  padding: 12px 24px;
  border-radius: 20px;
  opacity: 0;
  transition: .3s;
  pointer-events: none;
  /* v86: 長文（位置情報の案内等）が画面からはみ出て読めなかった（えーくん実機7/21）
     →折り返し可に。v87: max-widthでなくwidthを明示指定（word-break併用時にmax-widthだけだと
     ブラウザが内容幅を極端に狭く見積もる既知のCSSの罠があり「7文字で折り返し」を引いた実機バグの
     原因だった。widthを明示すればその計算に頼らず確実な幅になる） */
  white-space: normal;
  word-break: break-word;
  width: calc(100% - 48px);
  box-sizing: border-box;
  text-align: center;
  line-height: 1.5;
  z-index: 999;
}
/* v87: 重要な案内（特に位置情報）はユーザーを迷子にしかねないため自動で消さない。
   支配者はユーザー・消すのはユーザー（タイマー復帰UIと同じ原則をトースト全体に適用・えーくんGO 7/21）*/
.toast.show {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  transform: translateX(-50%) translateY(0);
}

/* ── History ── */
.history-list { padding: 0 16px; }
.history-item {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.history-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.history-date { font-size: .8rem; color: var(--muted); }
.history-services { font-size: .75rem; color: var(--green); font-weight: 700; }
.history-earnings { font-size: 1.3rem; font-weight: 900; }
.history-sub { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.history-delete {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
}

/* ── Graph ── */
.graph-section { padding: 0 16px; margin-bottom: 16px; }
.graph-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 10px;
}
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 160px;
}
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bar {
  width: 100%;
  background: var(--green);
  border-radius: 4px 4px 0 0;
  min-height: 3px;
  opacity: .8;
}
.bar.today { opacity: 1; }
.bar-lbl { font-size: .65rem; color: var(--muted); }

/* ── Empty state ── */
.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.empty p:first-child { font-size: 1.1rem; margin-bottom: 8px; }
.empty p:last-child { font-size: .85rem; }

/* ── Footer ── */
.disclaimer {
  text-align: center;
  font-size: .7rem;
  color: #444;
  padding: 24px 16px 8px;
}

/* ── PWA Install Overlay ── */
#pwa-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #0d0d0d;
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.pwa-sheet {
  text-align: center;
  max-width: 360px;
  width: 100%;
  margin: auto 0;
  padding: 16px 0;
}
.pwa-emoji  { font-size: 4rem; margin-bottom: 12px; }
.pwa-brand  { font-size: 2.2rem; font-weight: 900; color: var(--green); margin-bottom: 4px; }
.pwa-sub    { font-size: .85rem; color: var(--muted); margin-bottom: 28px; }
.pwa-msg    { font-size: 1.1rem; font-weight: 700; line-height: 1.7; margin-bottom: 28px; }
.pwa-guide  {
  background: var(--surface);
  border-radius: 12px;
  padding: 18px 16px;
  margin-bottom: 20px;
  font-size: .92rem;
  line-height: 1.8;
  text-align: left;
}
.pwa-step   { padding: 4px 0; }
.pwa-skip {
  display: block;
  width: 100%;
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: .95rem;
  cursor: pointer;
  padding: 12px;
  margin-top: 16px;
  text-align: center;
}

/* ── PWA hint banner ── */
#pwa-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  font-size: .85rem;
  color: var(--muted);
  gap: 8px;
}
.pwa-hint-btn {
  background: none;
  border: none;
  color: var(--text);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-align: left;
  flex: 1;
}
.pwa-hint-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}

/* ── Nav tab ── */
.tab-nav {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin: 0 16px 4px;
}
.tab-nav a {
  flex: 1;
  text-align: center;
  padding: 12px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.tab-nav a.active {
  color: var(--green);
  border-bottom-color: var(--green);
}

/* ── Custom Calendar ── */
#cal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 400;
  display: none;
  align-items: flex-end;
}
#cal-sheet {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 20px 16px 40px;
  width: 100%;
  transform: translateY(100%);
  transition: transform .25s ease;
}
#cal-sheet.cal-open { transform: translateY(0); }
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cal-header span {
  font-size: 1.05rem;
  font-weight: 700;
}
.cal-nav {
  background: var(--surface2);
  border: none;
  border-radius: 8px;
  color: var(--text);
  font-size: 1.5rem;
  width: 42px;
  height: 42px;
  cursor: pointer;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}
.dow {
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  padding: 4px 0;
}
.dow.sun { color: #f87171; }
.dow.sat { color: #60a5fa; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-day {
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text);
  font-size: .95rem;
  font-weight: 600;
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
}
.cal-day.other-month { color: #3a3a3a; }
.cal-day.today {
  border: 2px solid var(--green);
  color: var(--green);
}
.cal-day.selected {
  background: var(--green);
  color: #000;
  border: none;
}
.cal-day:active { opacity: .7; }

/* ── Timer ── */
.btn-timer-start {
  display: block;
  width: 100%;
  background: var(--green);
  color: #000;
  border: none;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 900;
  padding: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-timer-start:active { opacity: .85; }
.timer-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 14px;
}
.timer-icon { font-size: 1.4rem; line-height: 1; }
.timer-count {
  font-size: 2.4rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}
.timer-count-pause { color: var(--muted); }
.timer-work-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.timer-icon-sm { font-size: 1rem; }
.timer-count-sm {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.timer-work-label {
  font-size: .78rem;
  color: var(--muted);
  margin-left: 2px;
}
.alarm-row { margin-bottom: 14px; }
.alarm-set, .alarm-active {
  display: flex;
  align-items: center;
  gap: 8px;
}
.alarm-label {
  font-size: .82rem;
  color: var(--muted);
  font-weight: 700;
  flex-shrink: 0;
}
.btn-alarm {
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: .9rem;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-alarm:active { opacity: .75; }
.alarm-countdown {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.btn-alarm-cancel {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 2px 8px;
  line-height: 1;
}
.timer-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.btn-timer-sub {
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  padding: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-timer-sub:active { opacity: .75; }
.btn-timer-end {
  background: transparent;
  border: 2px solid var(--red);
  border-radius: 10px;
  color: var(--red);
  font-size: 1rem;
  font-weight: 700;
  padding: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-timer-end:active { opacity: .75; }

/* ══════════════════════════════════════
   v13: 状態駆動ホーム + 全画面入力モード
   ══════════════════════════════════════ */

/* ── 朝（idle） ── */
.home-date {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 14px;
}
.btn-shift-start {
  display: block;
  width: 100%;
  background: var(--green);
  color: #000;
  border: none;
  border-radius: 14px;
  font-size: 1.5rem;
  font-weight: 900;
  padding: 26px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-shift-start:active { opacity: .85; }
.yesterday-line {
  text-align: center;
  font-size: .82rem;
  color: var(--muted);
  margin-top: 12px;
  min-height: 1em;
}

/* ── 稼働中/休憩中 ヘッダー ── */
.tz-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0 14px;
}
.tz-icon { font-size: 1.3rem; line-height: 1; align-self: center; }
.tz-count {
  font-size: 2.2rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}
.tz-count-pause { color: var(--muted); }
.tz-lbl { font-size: .8rem; color: var(--muted); }

/* ── 終了後（ended） ── */
.ended-title {
  font-size: 1.05rem;
  font-weight: 900;
  margin-bottom: 6px;
}
.ended-sub {
  font-size: .9rem;
  color: var(--muted);
  margin-bottom: 14px;
}
.btn-resume {
  display: block;
  width: 100%;
  background: transparent;
  border: 2px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: .95rem;
  font-weight: 700;
  padding: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-resume:active { opacity: .75; }

/* ── 合計デカ数字 ── */
#zone-total {
  text-align: center;
  padding: 18px 16px 6px;
}
/* v71: 売上の左右で前日/翌日へ（えーくん要望7/19） */
.total-row { display: flex; align-items: center; justify-content: space-between; }
.day-nav {
  flex-shrink: 0;
  width: 44px;
  height: 60px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.05rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.day-nav:active { opacity: .6; }
.total-big {
  font-size: 3.2rem;
  font-weight: 900;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.total-sub {
  font-size: .85rem;
  color: var(--muted);
  margin-top: 4px;
  min-height: 1.2em;
}

/* ── サービスボタン ── */
#zone-services { padding: 12px 16px 0; }
.svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.svc-big {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 88px;
}
.svc-big:active { opacity: .8; }
.svc-big-name { font-size: .88rem; font-weight: 700; color: var(--text); }
.svc-big-amt  { font-size: 1.3rem; font-weight: 900; color: var(--green); font-variant-numeric: tabular-nums; }
.svc-big-cnt  { font-size: .75rem; color: var(--muted); }
.svc-chips {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.svc-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 700;
  padding: 12px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex: 1;
  white-space: nowrap;
}
.svc-chip:active { opacity: .75; }

/* ── 折りたたみ ── */
.fold {
  margin: 10px 16px 0;
  background: var(--surface);
  border-radius: var(--radius);
}
.fold summary {
  padding: 14px 16px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: ' ▸'; }
.fold[open] summary::after { content: ' ▾'; }
.fold > *:not(summary) { margin: 0 16px; }
.fold > *:last-child { margin-bottom: 16px; }

/* ── 入力モード（全画面・曇りガラス） ── */
#io-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 13, .6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 500;
  display: none;
  flex-direction: column;
}
.io-sheet {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}
.io-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.io-svc { font-size: 1.15rem; font-weight: 900; }
.io-done {
  background: var(--green);
  color: #000;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 900;
  padding: 12px 22px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.io-done:active { opacity: .85; }

/* タブ: 金額グループ + 区切り + 件数 */
.io-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 14px;
}
.io-tabs-money {
  display: flex;
  gap: 4px;
  flex: 4;
  min-width: 0;  /* v63: これが無いと6桁の累計の最小幅より縮めず、行が広がり件数タブが画面外へ（実機7/18） */
  background: rgba(255, 255, 255, .04);
  border-radius: 12px;
  padding: 4px;
}
.io-tabs-sep {
  width: 1px;
  background: var(--border);
  margin: 6px 8px;
  flex-shrink: 0;
}
.io-tab {
  flex: 1;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 8px 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.io-tab.active {
  background: var(--surface);
  border-color: var(--green);
}
/* v57: タブのラベル.72rem/累計.78remは老眼原則違反（11.5/12.5px）だった→14px級に引き上げ（実機7/17） */
.io-tab-l { font-size: .82rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.io-tab-v {
  font-size: .95rem;
  font-weight: 900;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.io-tab-v-count { color: var(--text); }
.io-tab-v-sm { font-size: .78rem; }  /* v63: 累計7文字以上（10万〜）は一段縮めて「100,0…」を防ぐ */
.io-tab-count { flex: 0 0 64px; background: rgba(255, 255, 255, .04); border-radius: 12px; }
.io-tab-count.active { background: var(--surface); border-color: #60a5fa; }

/* 入力表示 */
.io-display {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;   /* v61: ✔＋の2ボタン化で液晶が狭い→gapとpaddingで数字の場所を稼ぐ */
  background: var(--surface);
  border-radius: 14px;
  padding: 14px 12px;
  margin-bottom: 14px;
}
.io-unit { font-size: 1.2rem; font-weight: 700; color: var(--muted); }
#io-value {
  font-size: 2.4rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  min-width: 0;
  overflow: hidden;
  transition: font-size .15s ease;  /* v61: 桁数で自動縮小（実機の電卓と同じ動き）を滑らかに */
}
#io-value.editing { color: var(--green); }
.io-add {
  flex-shrink: 0;
  width: 60px;   /* v60: ✔と2つ並ぶため64→60（タップ60px基準は維持） */
  height: 60px;
  border-radius: 50%;
  background: var(--green);
  color: #000;
  border: none;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.io-add:active { opacity: .85; }
/* v60: ✔=上書き確定（罫線の丸=塗りの＋と主従を分ける）・C=打ち直し（えーくん発案の電卓文法7/18） */
.io-ok {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--green);
  color: var(--green);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.io-ok:active { opacity: .8; }
.io-pad .io-clear { color: var(--red); }

/* テンキー */
.io-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.io-pad button {
  background: var(--surface);
  border: none;
  border-radius: 14px;
  color: var(--text);
  font-size: 1.7rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 60px;
}
.io-pad button:active { background: var(--surface2); }
.io-pad .io-back { color: var(--muted); }

/* ── v14: 日付チップ + 過去日モード + カレンダー売上表示 ── */
.date-chip {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text);
  font-size: .9rem;
  font-weight: 700;
  padding: 10px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.date-chip:active { opacity: .75; }

#past-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 16px 0;
  background: #341c08;
  border: 1px solid #f97316;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: .9rem;
  font-weight: 700;
  color: #fdba74;
}
#past-banner button {
  background: #f97316;
  color: #000;
  border: none;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 900;
  padding: 8px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.cal-month-total {
  text-align: center;
  font-size: .92rem;
  font-weight: 900;
  color: var(--green);
  margin: -6px 0 12px;
  font-variant-numeric: tabular-nums;
}

.cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  padding: 5px 0 4px;
  min-height: 46px;
}
.cal-num { font-size: .95rem; font-weight: 600; line-height: 1.2; }
.cal-amt {
  font-size: .56rem;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.cal-day.selected .cal-amt { color: #000; }

/* ── v15: クラウドバックアップ ── */
.header-btns { display: flex; align-items: center; gap: 8px; }
.cloud-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 8px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: grayscale(1);
  opacity: .55;
  line-height: 1;
}
.cloud-btn img {
  width: 20px;
  height: 20px;
  display: block;
}
.cloud-btn.cloud-on {
  filter: none;
  opacity: 1;
}
.cloud-btn.cloud-sync { animation: cloudPulse 1s infinite; }
@keyframes cloudPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}

#cloud-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 400;
  display: none;
  align-items: flex-end;
}
#cloud-sheet {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 24px 20px calc(36px + env(safe-area-inset-bottom, 0px));
  width: 100%;
  transform: translateY(100%);
  transition: transform .25s ease;
}
#cloud-sheet.cal-open { transform: translateY(0); }
.cloud-title {
  font-size: 1.1rem;
  font-weight: 900;
  margin-bottom: 16px;
}
.cloud-msg { font-size: .95rem; line-height: 1.7; margin-bottom: 12px; }
.cloud-points {
  list-style: none;
  margin-bottom: 20px;
  font-size: .88rem;
  color: var(--muted);
}
.cloud-points li { padding: 4px 0; }
.cloud-points li::before { content: '✓ '; color: var(--green); font-weight: 900; }
.cloud-status { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.cloud-mail   { font-size: .85rem; color: var(--muted); margin-bottom: 2px; }
.cloud-last   { font-size: .85rem; color: var(--muted); margin-bottom: 18px; }
.cloud-logout {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--muted);
  font-size: .85rem;
  padding: 14px;
  margin-top: 6px;
  cursor: pointer;
  text-decoration: underline;
}

/* ── v22: ライブ時給・休憩合計の小表示 ── */
.tz-pause-line {
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  margin: -4px 0 10px;
}

/* ── v20: アラーム4プリセット＋ビューアーのアラーム表示 ── */
/* 4ボタンは横幅を均等に分け合って必ず1行に収める（60分だけ改行するのを防ぐ） */
.alarm-set .btn-alarm {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 0;
  text-align: center;
}
.tz-viewer-alarm {
  text-align: center;
  color: var(--green);
  font-size: .9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: -6px 0 14px;
}

/* ── v19: 他端末で稼働中（ビューアーモード） ── */
.tz-viewer-note {
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
  margin: 10px 0 14px;
}
.btn-takeover {
  display: block;
  width: 100%;
  min-height: 60px;
  background: none;
  border: 2px solid var(--green);
  color: var(--green);
  border-radius: 14px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}

/* ── v18: アカウント切替告知 ── */
.cloud-notice {
  background: rgba(255, 170, 0, .12);
  border: 1px solid rgba(255, 170, 0, .5);
  border-radius: 12px;
  padding: 14px;
  font-size: .9rem;
  line-height: 1.7;
  margin-bottom: 16px;
  word-break: break-all;
}
.cloud-prev {
  font-size: .85rem;
  color: var(--muted);
  margin-top: 12px;
  text-align: center;
  word-break: break-all;
}

/* ===== v23: 宣言モデル（押し忘れ救済カードの注記） ===== */
.tz-note {
  margin-top: 8px;
  font-size: .85rem;
  color: var(--muted);
  text-align: center;
}

/* ===== v24: 投稿文テンプレート編集（自由文＋チップ差し込み） ===== */
.tpl-edit-btn {
  width: 100%;
  margin-top: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: .9rem;
  font-weight: 700;
  padding: 13px;
  cursor: pointer;
}
.tpl-edit-btn:active { opacity: .8; }

.btn-midpost {
  width: 100%;
  margin-top: 10px;
  background: transparent;
  border: 2px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: .95rem;
  font-weight: 700;
  padding: 13px;
  cursor: pointer;
}
.btn-midpost:active { opacity: .8; }

#tpl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 13, .72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 500;
  display: none;
  flex-direction: column;
}
.tpl-sheet {
  height: 100%;
  overflow-y: auto;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}
.tpl-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.tpl-title { font-size: 1.05rem; font-weight: 900; }
.tpl-cancel {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
  padding: 12px 4px;
  cursor: pointer;
}
.tpl-cancel:active { opacity: .7; }
.tpl-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.tpl-tab {
  flex: 1;
  padding: 13px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
}
.tpl-tab.active {
  border-color: var(--green);
  color: var(--text);
  background: var(--surface2);
}
.tpl-note {
  font-size: .88rem;
  color: var(--muted);
  margin: 4px 0 10px;
  line-height: 1.6;
}
.tpl-note b { color: var(--text); }
.tpl-start {
  width: 100%;
  margin-top: 14px;
  background: var(--green);
  color: #000;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 900;
  padding: 16px;
  cursor: pointer;
}
.tpl-start:active { opacity: .85; }
#tpl-text {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 16px;   /* 16px未満だとiOSが勝手にズームする */
  line-height: 1.8;
  padding: 12px;
  /* v37: 高さ固定（min/maxの「伸びる箱」廃止）。改行で箱が伸びるとパレットが下へ逃げる
     （えーくん実機7/11）＋従来の初期値150pxから1行分（line-height 1.8×16px≒29px）小さく */
  height: 121px;
  font-family: inherit;
  white-space: pre-wrap;   /* contenteditable: 連続スペース・改行を素直に保つ */
  word-break: break-word;
}
#tpl-text:focus { outline: none; border-color: var(--green); }
#tpl-text:empty::before { content: attr(data-placeholder); color: var(--muted); }
/* チップ＝1オブジェクト（v33/app v36）: カーソル不可侵の部品。パレットのチップと同族の見た目 */
.tpl-token {
  display: inline-block;
  background: rgba(34, 197, 94, .13);
  border: 1px solid var(--green-dk);
  border-radius: 999px;
  color: var(--green);
  font-size: .85em;
  font-weight: 700;
  line-height: 1.3;
  padding: 1px 9px;
  margin: 0 2px;
  white-space: nowrap;
  vertical-align: baseline;
}
/* k表記チップの添え字（「売上k」と読めてしまう問題の修正・v34） */
.tpl-token-k {
  font-size: .7em;
  opacity: .85;
  margin-left: 1px;
}

/* ===== v35: iPhoneテンプレ編集のスクロール問題（えーくん実機2026-07-11） ===== */
/* 編集箱が画面を占領すると、スクロールの指が「文字選択」に化けてシートが動かせない
   → 箱は画面の1/3まで・中身は箱内スクロール。箱の外はシートのスクロールが確実に効く */
#tpl-text {
  /* v37: 高さは上の固定121pxが正（28vh上限は廃止）。中身が超えたら箱内スクロール */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.tpl-sheet { overscroll-behavior: contain; }
/* v36: パレット常駐化 — 2段×横スクロールの1本ストリップ（見出し廃止・頻度順）。
   編集箱のすぐ下に常に見える＝「編集しながらサクサク挿入」・下へのスクロールの旅を廃止 */
.tpl-strip {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  justify-content: start;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 8px;
}
.tpl-strip .tpl-chip { white-space: nowrap; }
/* v37: カテゴリタブ（基本/詳細/社別・A案）。頻度順フラットは「探すのに横スクロールの旅」で不評
   （えーくん実機7/11）→ カテゴリで場所を覚えられる形に。
   v38: 緑ピルはチップと同族に見えて紛らわしい（えーくん実機7/11）→ 上部の「本日終了用/途中経過用」
   タブ（.tpl-tab）と同族の見た目に。役割で形を統一: 角丸四角＝タブ・緑ピル＝チップ */
.tpl-cats {
  display: flex;
  gap: 6px;
  margin: 0 0 6px;
}
.tpl-cat {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.tpl-cat.active {
  border-color: var(--green);
  color: var(--text);
  background: var(--surface2);
}
.tpl-pal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 8px;
  font-size: .75rem;
  color: var(--muted);
}
.tpl-kmode {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: .75rem;
  font-weight: 700;
  padding: 7px 10px;
  cursor: pointer;
}
.tpl-kmode.kon { border-color: var(--green); color: var(--green); }
.tpl-group {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.tpl-group-l {
  flex-shrink: 0;
  width: 2.6em;
  font-size: .7rem;
  color: var(--muted);
  padding-top: 10px;
}
.tpl-group-c { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-chip {
  background: var(--surface2);
  border: 1px solid var(--green-dk);
  border-radius: 999px;
  color: var(--green);
  font-size: .85rem;
  font-weight: 700;
  padding: 9px 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tpl-chip:active { background: var(--green-dk); color: #000; }
.tpl-prev-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0 6px;
  font-size: .75rem;
  color: var(--muted);
}
.tpl-prev-head .char-count { margin-top: 0; }
.tpl-reset {
  width: 100%;
  margin-top: 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: .85rem;
  padding: 12px;
  cursor: pointer;
}

/* ===== v26: 縦スライドで次のタップが食われる対策（2026-07-08） ===== */
/* スクロールする物がないオーバーレイは縦パンを発生させない。
   滑り→スクロール扱い→次のタップがスクロール停止に消費される、を根絶する。
   tpl-overlayは本文スクロールが必要なので対象外 */
#io-overlay, #cal-overlay { touch-action: none; }

/* ===== v27: 「投稿文を確認」を開くと横スクロールが出る修正（2026-07-08） ===== */
/* fold内の子要素は左右16pxマージンが付くため、width:100%指定だと 100%+32px で画面からはみ出す */
.tpl-edit-btn { width: auto; display: block; }
/* 保険: 今後どこかの要素が数pxはみ出しても、画面が横に動く形では出さない */
html, body { overflow-x: hidden; }

/* ===== v28: Android横スライド後の2タップ問題（2026-07-08） ===== */
/* 横スライドがAndroidではテキスト選択に化け、次のタップが選択解除に食われる。
   テンキー・カレンダーは文字選択が不要なので選択自体を無効化（tpl-overlayは文章選択が要るので対象外） */
#io-overlay, #cal-overlay {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ===== v30: v29(overscroll-behavior:none)は撤回（2026-07-08） ===== */
/* Androidで縦スクロール自体が死ぬ副作用が実機で出た。本命修正（即時タップ）に不要な蛇足だった */

/* ===== v31: クラウドシート簡素化（今すぐ同期ボタン削除・ログアウト2段階確認）2026-07-10 ===== */
.cloud-last {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 8px 0;   /* タップしやすく（隠しレバー: 行タップで手動同期） */
}
.cloud-logout-arm {
  border: 2px solid var(--red) !important;
  border-radius: 10px;
  color: var(--red) !important;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;  /* 赤文字だけで十分（えーくん・下線は通常状態のリンク風だけに） */
}
.cloud-logout-note {
  font-size: .75rem;
  font-weight: 400;
  color: var(--muted);
}

/* ===== v39: おつり電卓（現金会計「玄関先の2秒」・えーくん発案7/13） ===== */
#cash-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 13, .6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 500;
  display: none;
  flex-direction: column;
  touch-action: none;   /* スクロール不要のオーバーレイはこれもセット（css v26の教訓） */
}
.cash-fields { display: flex; gap: 8px; margin-bottom: 10px; }
.cash-field {
  flex: 1;
  background: var(--surface);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 10px 12px;
  text-align: right;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  color: var(--text);
  font-family: inherit;
}
.cash-field.active { border-color: var(--green); }
.cash-field-label { display: block; font-size: .78rem; color: var(--muted); text-align: left; }
.cash-field-val { font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.cash-change {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  background: var(--surface);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 10px;
}
.cash-change-label { font-size: .95rem; font-weight: 700; color: var(--muted); }
.cash-change-val {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.cash-change.short .cash-change-val,
.cash-change.short .cash-change-label { color: #f97316; }  /* 不足はオレンジで警告 */
/* v72: 札はドット絵画像（えーくん作・3枚計4KB）。お預かり選択中だけ登場（商品代金を打つ時に
   押し間違う対象ごと消す）。visibilityで場所は確保=テンキーの位置がガタつかない（雑タッチの錨） */
.cash-bills {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px;
  visibility: hidden; opacity: 0; transition: opacity .18s;
}
.cash-bills.on { visibility: visible; opacity: 1; }
.cash-bill {
  border: none;
  border-radius: 8px;
  min-height: 60px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cash-bill img { height: 48px; image-rendering: pixelated; }  /* ドット絵はぼかさない */
.cash-bill:active { transform: scale(.94); }
/* v73: 会計履歴ナビ（電卓本体がビューア兼エディタ・専用の一覧画面は作らない） */
.cash-head-btns { display: flex; gap: 8px; }
#cash-hist-nav { margin-bottom: 10px; }
.cash-hist-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#cash-hist-time { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cash-hist-sum { text-align: center; font-size: .82rem; color: var(--muted); margin-top: 4px; }

/* ===== v42: 下部タブ＋その他シート（D2・和帳簿IA） =====
   既定テーマでは非表示。表示のON/OFFは末尾のテーマブロックが担当 */
#tabbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 300;                       /* オーバーレイ(400/500)の下 */
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
}
.tabbar-btn {
  flex: 1;
  min-height: 56px;
  background: none;
  border: none;
  color: var(--text);    /* v71: mutedだと太陽下でタブが消える（実機7/19） */
  font-family: inherit;
  font-size: .72rem;     /* v71: アイコン+文字の2段構成（文字は位置記憶の補助） */
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 2px 2px 0;
  white-space: nowrap;
}
.tabbar-ico { display: block; font-size: 1.15rem; line-height: 1.3; }
.tabbar-btn:active { color: var(--text); }

/* タブの☁️（v43: 「その他」→クラウド直行。状態=ヘッダーの.cloud-btnと同じ3態） */
.tabbar-cloud { filter: grayscale(1); opacity: .55; }
.tabbar-cloud.cloud-on { filter: none; opacity: 1; }
.tabbar-cloud.cloud-sync { animation: cloudPulse 1s infinite; }
.tabbar-cloud img { width: 22px; height: 22px; display: block; margin: 0 auto; }

/* ===== v43: 投稿確認シート（旧「投稿文を確認」foldを吸収・えーくん7/16） ===== */
#post-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 400;
  display: none;
  align-items: flex-end;
}
#post-sheet {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 20px 16px calc(28px + env(safe-area-inset-bottom, 0px));
  width: 100%;
  transform: translateY(100%);
  transition: transform .25s ease;
}
#post-sheet.cal-open { transform: translateY(0); }
#post-sheet .preview-box { max-height: 40vh; overflow-y: auto; }
#post-sheet .btn-post { width: 100%; margin: 14px 0 4px; }
#post-sheet .tpl-edit-btn { margin: 10px auto 0; }

/* v43: おつり電卓もカレンダー式に下から登場 */
#cash-overlay .io-sheet {
  transform: translateY(100%);
  transition: transform .25s ease;
}
#cash-overlay .io-sheet.cal-open { transform: translateY(0); }

/* ===== v57: 加算アニメ「数字が飛ぶ」（説明トースト廃止・えーくんGO 7/17） ===== */
.io-fly {
  position: fixed;
  z-index: 600;
  /* font-sizeはJSが液晶の現在サイズを注入（v62・「あの数字がそのまま飛び出す」連続感） */
  font-weight: 900;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transform: translate(0, 0);
  transform-origin: right bottom;  /* v62: 縮小は右下角=1の位の下辺基準（右端＋ベースラインが揺れない） */
  /* v59: 透明化は行程の後半だけ（.26s遅延=54%地点から消え始め着地で消え切る・えーくん実機7/18
     「真ん中過ぎてから透明化のほうがカッコいい」） */
  transition: transform .48s cubic-bezier(.4, 0, .9, 1), opacity .22s ease-in .26s;
  opacity: 1;
}
.io-bump { animation: ioBump .4s ease; }
@keyframes ioBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
/* v64: ＋のカウント転送中、タブ累計が高速で脈打つ（バンプが肝・えーくん構想7/18）。到達で止まる */
.io-pulse { animation: ioPulse .12s ease-in-out infinite; }
@keyframes ioPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
/* v65: 転送完了→空の間150ms→新しい累計が液晶へズームインでスッと戻る（バンプなし・右端錨） */
#io-value { transform-origin: right center; }
.io-value-in { animation: ioValueIn .25s ease-out; }
@keyframes ioValueIn {
  from { opacity: 0; transform: scale(1.25); }
  to   { opacity: 1; transform: scale(1); }
}

/* ===== v66: 天気（帳簿の最上段・えーくんGO 7/18）。既定テーマでは非表示=テーマ側が出す ===== */
#wx {
  display: none;
  width: calc(100% - 32px);
  margin: 10px 16px 0;
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  padding: 4px 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wx-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: .95rem;
  flex-wrap: nowrap;               /* v79: mini幅でも縦崩れさせない（雨予告は独立行に降ろした） */
}
.wx-line > span { white-space: nowrap; }
/* v69: 1行目=日付（常時）＋場所。参照画像「7月14日(月) くもり」の同居構成 */
.wx-date {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 2px;
}
#wx-date-d { font-size: 1.05rem; font-weight: 600; letter-spacing: .06em; }
#wx-place { color: var(--muted); font-size: .88rem; }  /* v67: どこの予報かを常に明示（自動追従とセット） */
#wx-ico { font-size: 1.1rem; }
#wx-temp { font-variant-numeric: tabular-nums; }
/* v78: 最高/最低気温（装備決め用・えーくんGO 7/25）。新色は足さず既存の2色を借りる=彩色最小限の原則 */
#wx-hilo { font-size: .88rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
#wx-hi { color: var(--red); }      /* 最高=弁柄（過去日バナーと同族） */
#wx-lo { color: #93a9c8; }         /* 最低=藍鼠（雨グラフと同色） */
/* v79: 雨予告=独立行（右寄せ=直下の降水量グラフと文脈が繋がる）。雨の無い日は行ごと消える */
#wx-rain { display: block; text-align: right; color: var(--muted); font-size: .9rem; margin-top: 2px; }
#wx-rain:empty { display: none; }
.wx-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 40px;
  margin-top: 6px;
  border-bottom: 1px solid var(--border);
  position: relative;  /* v80: 「いま」の朱線の基準 */
}
/* v80: 「いま」を中央にした±12時間窓のマーカー。
   v81: 朱線は実機で目立ちすぎ→時間罫線と同じ色に（えーくん7/28「線でわかるから軸の『いま』も不要」） */
.wx-chart.wx-now::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -1px;
  width: 1px;
  background: var(--border);
}
.wx-chart i {
  flex: 1;
  background: #93a9c8;   /* 藍鼠=雨の色（washi/sumi両テーマで読める中間色） */
  border-radius: 1px 1px 0 0;
  min-height: 1px;
}
.wx-axis {
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  color: var(--muted);
  margin-top: 3px;
}
/* v70: 過去日の「その日の天気」（記録から・静かな一行） */
/* v74: 雨雲レーダーリンク（天気枠の直下・右寄せの控えめテキスト。既定テーマ非表示） */
#wx-radar {
  display: none;
  width: auto;
  margin: 0 16px 4px auto;
  background: none;
  border: none;
  color: var(--muted);
  font-size: .82rem;
  font-family: inherit;
  padding: 4px 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#wx-past {
  text-align: center;
  color: var(--muted);
  font-size: .88rem;
  margin: 8px 16px 0;
}
/* v70: カレンダーの日ごと天気アイコン */
.cal-wx { display: block; font-size: .6rem; line-height: 1.1; }

/* ===== v52: タイマー=帳簿のライブ行＋操作シート（えーくん「稼働中もおとなしく」7/17） ===== */
#tz-line {
  display: none;
  align-items: baseline;
  gap: 8px;
  width: calc(100% - 32px);
  margin: 12px 16px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  padding: 13px 14px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tz-line-count {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#tz-line-lbl { color: var(--muted); flex: 1; }
#tz-line-sub { color: var(--muted); font-variant-numeric: tabular-nums; }
#tz-line.tz-line-pause #tz-line-lbl { animation: pauseBreathe 4s ease-in-out infinite; }
#tz-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 400;
  display: none;
  align-items: flex-end;
}
#tz-sheet {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 10px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  width: 100%;
  transform: translateY(100%);
  transition: transform .25s ease;
}
#tz-sheet.cal-open { transform: translateY(0); }
#tz-sheet .card { margin: 0; padding: 14px 4px 4px; background: none; border: none !important; box-shadow: none; }

/* ===== v51: めもシート（日ごと＋📌ピン・えーくんGO 7/17） ===== */
#memo-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 400;
  display: none;
  align-items: flex-end;
}
#memo-sheet {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .25s ease;
}
#memo-sheet.cal-open { transform: translateY(0); }
.memo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-shrink: 0;   /* v71: リストが増えても頭とメモ欄は縮まない（縮むのはリストのスクロールだけ） */
}
.memo-close { padding: 9px 14px; font-size: .9rem; }
.memo-label { font-size: .8rem; color: var(--muted); margin-bottom: 3px; flex-shrink: 0; }
.memo-day {
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.memo-box {
  flex-shrink: 0;   /* v71: ログが増えるとメモ欄が縮んでいくバグの修正（実機7/19） */
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  padding: 10px 12px;
  margin-bottom: 10px;
  resize: none;
}
#memo-pin { border-style: dashed; }  /* ピン=点線枠（貼ってあるメモの記号） */
#memo-list {
  overflow-y: auto;
  min-height: 0;
  border-top: 1px solid var(--border);
  padding-top: 4px;
}
.memo-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
  padding: 11px 4px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.memo-item-date { flex: 0 0 6em; color: var(--muted); font-variant-numeric: tabular-nums; }
.memo-item-prev { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memo-empty { color: var(--muted); font-size: .9rem; text-align: center; padding: 14px 0; }

/* ===== v44: 休憩画面の改修（えーくん7/16） ===== */
/* アイコン拡大＋「休憩中」を大きく・2秒で消え2秒で点く明滅 */
#tz-paused .tz-icon { font-size: 1.8rem; }
#tz-paused .timer-icon-sm { font-size: 1.35rem; }
#tz-paused .tz-lbl {
  font-size: 1.05rem;
  animation: pauseBreathe 4s ease-in-out infinite;
}
@keyframes pauseBreathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
/* 今日の休憩合計は実働と横並び（右端寄せ） */
.tz-pause-inline {
  margin-left: auto;
  color: var(--muted);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}

/* アラーム=テンキーで分入力（プリセット廃止） */
.btn-alarm-open {
  width: 100%;
  min-height: 48px;
  font-size: 1rem;
}
#alarm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 400;
  display: none;
  align-items: flex-end;
  touch-action: none;   /* スクロール不要のオーバーレイの作法（css v26） */
}
#alarm-sheet {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  transform: translateY(100%);
  transition: transform .25s ease;
}
#alarm-sheet.cal-open { transform: translateY(0); }
.alarm-display {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  background: var(--surface2);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
#alarm-value {
  font-size: 2.4rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.alarm-unit { font-size: 1.2rem; font-weight: 700; color: var(--muted); }
.alarm-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.alarm-pad button {
  background: var(--surface2);
  border: none;
  border-radius: 14px;
  color: var(--text);
  font-size: 1.7rem;
  font-weight: 700;
  min-height: 60px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.alarm-pad button:active { opacity: .75; }
.alarm-pad .alarm-key-sub { color: var(--muted); }
.alarm-go {
  width: 100%;
  min-height: 60px;
  background: var(--green);
  color: #000;
  border: none;
  border-radius: 14px;
  font-size: 1.15rem;
  font-weight: 900;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.alarm-go:disabled { opacity: .35; }
.alarm-go:active { opacity: .85; }


/* ═══════════════════════════════════════════════════════════════
   v40: 和帳簿テーマ（並行搭載・D1=テーマ換装）
   ?design=washi(昼・和紙) / ?design=sumi(夜・墨) / ?design=classic(解除)
   決定文書= CLAUDE.md「デザイン方針」。既定表示は従来のまま＝
   このブロックは html.d-washi / html.d-sumi が付いた時だけ生きる
   ═══════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Libre Caslon Text';
  src:url(data:font/woff2;base64,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) format('woff2');
}
html.d-washi{
  --bg:#f5f1e8; --surface:#efe9dc; --surface2:#e7dfcd; --border:#d9d2c2;
  --green:#6f7a4d; --green-dk:#5c6640; --text:#2e2b25; --muted:#5d5645; --red:#b4543e;  /* muted濃く=太陽下対策v71 */
}
html.d-sumi{
  --bg:#201e1a; --surface:#282520; --surface2:#312c24; --border:#3c382e;
  --green:#7a8552; --green-dk:#6a7446; --text:#e9e3d3; --muted:#9a927e; --red:#c96a52;
}
/* v75: 明朝は「和の顔」だけ（ロゴ・日付・地名）。本文と操作部はシステムゴシック=可読性優先
   （実稼働数日で「明朝は読みづらい」えーくん7/21・チャッピー事前警告どおりの役割分担。
   Noto Sans/ヒラギノ角ゴは端末標準=Webフォント追加なし・0KB・速度影響ゼロ。
   数字の世界観はLibre Caslon（下のブロック）が引き続き担う） */
html.d-washi .logo,html.d-sumi .logo,
html.d-washi .wx-date,html.d-sumi .wx-date,
html.d-washi .home-date,html.d-sumi .home-date,
html.d-washi #past-banner span,html.d-sumi #past-banner span{
  font-family:'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP','BIZ UDMincho',serif;
}
html.d-washi .site-header,html.d-sumi .site-header{background:var(--bg);}
/* 数字=Libre Caslon Text（合計・タイマー・入力・おつり・サービス金額） */
html.d-washi .total-big,html.d-sumi .total-big,
html.d-washi .tz-count,html.d-sumi .tz-count,
html.d-washi .timer-count-sm,html.d-sumi .timer-count-sm,
html.d-washi #io-value,html.d-sumi #io-value,
html.d-washi .cash-field-val,html.d-sumi .cash-field-val,
html.d-washi .cash-change-val,html.d-sumi .cash-change-val,
html.d-washi .svc-big-amt,html.d-sumi .svc-big-amt{
  font-family:'Libre Caslon Text','Hiragino Mincho ProN',serif;
  font-weight:400;
}
/* 金額=墨（帳簿のインク。旧「金額=緑」はこのテーマでは墨が引き継ぐ・決定7/14） */
html.d-washi .total-big,html.d-sumi .total-big,
html.d-washi .svc-big-amt,html.d-sumi .svc-big-amt{
  color:var(--text);
  letter-spacing:0;
}
/* カード=紙（影を消して罫線の世界へ） */
html.d-washi .card,html.d-sumi .card{box-shadow:none;border:1px solid var(--border);}
/* サービス=帳簿の行（会社色の太枠→罫線・地は透明） */
html.d-washi .svc-big,html.d-sumi .svc-big{
  background:transparent;
  border:none!important;
  border-bottom:1px solid var(--border)!important;
  border-radius:0;
}
html.d-washi .svc-chip,html.d-sumi .svc-chip{background:transparent;border:1px solid var(--border);}
/* 稼働操作=抹茶（背景はvar(--green)がそのまま抹茶になる）・文字は生成り */
html.d-washi .btn-shift-start,html.d-sumi .btn-shift-start,
html.d-washi .btn-resume,html.d-sumi .btn-resume,
html.d-washi .io-add,html.d-sumi .io-add{color:#f5f2e6;}
html.d-washi .btn-shift-start,html.d-sumi .btn-shift-start{letter-spacing:.18em;font-weight:600;}
/* X投稿=罫線だけの控えめボタン（決定7/14） */
html.d-washi .btn-post,html.d-sumi .btn-post{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  font-weight:500;
  letter-spacing:.08em;
}
/* v41: 全画面オーバーレイの地紙。暗地rgba(13,13,13)ハードコードのままだと
   washiでは墨文字（[入力終了]・非アクティブタブ・「おつり電卓」）が沈んで読めない（実機7/16）。
   ボトムシート系（cal/tpl/cloud/pwa）はシート自体が明るく浮くので暗スクリムのまま */
html.d-washi #io-overlay,
html.d-washi #cash-overlay{background:rgba(245,241,232,.82);}
html.d-sumi #io-overlay,
html.d-sumi #cash-overlay{background:rgba(32,30,26,.72);}
/* v54: テンプレ編集も全画面シート族＝同じ地紙が必要だった（v41で「ボトムシート系」と
   誤分類した直し忘れ・実機7/17。編集画面なので透けは弱め=不透明度高めで読みやすさ優先） */
html.d-washi #tpl-overlay{background:rgba(245,241,232,.92);}
html.d-sumi #tpl-overlay{background:rgba(32,30,26,.88);}
/* v68: 過去日バナー=最後の発光オレンジ残党（#341c08/#f97316ハードコード・実機7/18）→
   テーマの弁柄色（--red）で組み直し。新色は足さない=彩色最小限の原則 */
html.d-washi #past-banner,html.d-sumi #past-banner{
  background:transparent;
  border:1px solid var(--red);
  color:var(--red);
}
html.d-washi #past-banner button,html.d-sumi #past-banner button{
  background:var(--red);
  color:#f5f2e6;
}
/* v55: テンプレ編集の残り色バグ（実機7/17）: 旧テーマの発光緑・黒文字のハードコード掃除 */
html.d-washi .tpl-token,html.d-sumi .tpl-token{background:rgba(111,122,77,.14);}  /* 蛍光緑→抹茶の薄地 */
html.d-washi .tpl-start,html.d-sumi .tpl-start,
html.d-washi .tpl-chip:active,html.d-sumi .tpl-chip:active{color:#f5f2e6;}  /* 抹茶地の黒文字→生成り */
/* タブ群の枠地: 白4%は和紙の上では見えない→墨の薄掛け */
html.d-washi .io-tabs-money,
html.d-washi .io-tab-count{background:rgba(46,43,37,.06);}
/* 完了ボタンも抹茶ボタンの作法（文字=生成り。黒文字は抹茶地に沈む） */
html.d-washi .io-done,html.d-sumi .io-done,
html.d-washi .alarm-go,html.d-sumi .alarm-go{color:#f5f2e6;}
/* v71: カレンダーの選択日=抹茶地に黒文字で沈んでいた（実機7/19）→生成りに */
html.d-washi .cal-day.selected,html.d-sumi .cal-day.selected{color:#f5f2e6;}
html.d-washi .cal-day.selected .cal-amt,html.d-sumi .cal-day.selected .cal-amt{color:#f5f2e6;}
/* v42: D2=IA変更。下部タブを出し、ヘッダーのボタン群はタブへ引っ越し（ヘッダー=ロゴだけに整理） */
html.d-washi #tabbar,html.d-sumi #tabbar{display:flex;}
/* v66: 天気は和帳簿の最上段（配達員は一日中天気を気にしてる=リザルトの上に常時が最強・決定7/14） */
html.d-washi #wx,html.d-sumi #wx{display:block;}
html.d-washi #wx-radar,html.d-sumi #wx-radar{display:block;}
html.d-washi .header-btns,html.d-sumi .header-btns{display:none;}
html.d-washi body,html.d-sumi body{padding-bottom:76px;}
/* v45: ボタン三族ルール（えーくんGO 7/16・決定）
   1族=塗り抹茶・文字生成り「動かす」／2族=罫線・墨文字「静かな」／3族=赤枠「終える」（btn-timer-end現状のまま）
   ※btn-timer-subは共用class: 休憩中の「稼働再開」=動かす・稼働中の「一旦オフ」=静か、を画面で分岐 */
html.d-washi .btn-resume,html.d-sumi .btn-resume,
html.d-washi #tz-paused .btn-timer-sub,html.d-sumi #tz-paused .btn-timer-sub,
html.d-washi .btn-takeover,html.d-sumi .btn-takeover{
  background:var(--green);
  border:2px solid var(--green);
  color:#f5f2e6;
}
html.d-washi #tz-working .btn-timer-sub,html.d-sumi #tz-working .btn-timer-sub,
html.d-washi .btn-midpost,html.d-sumi .btn-midpost,
html.d-washi .btn-alarm-open,html.d-sumi .btn-alarm-open,
html.d-washi .tpl-edit-btn,html.d-sumi .tpl-edit-btn{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
}
/* v46: サービス行=帳簿の表組み（B案＋会社色の糸＋›・えーくんGO 7/17）
   未入力社はチップのまま待機→数字が入った社だけ行に昇格＝リザルトが入るほど表に育つ（えーくん発案）。
   列は固定幅（件数3.5em・売上6.5em右揃え）＝行が増えると縦にビシッと揃う */
html.d-washi .svc-grid,html.d-sumi .svc-grid{
  grid-template-columns:1fr;
  gap:0;
}
html.d-washi .svc-big,html.d-sumi .svc-big{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  gap:8px;
  padding:11px 6px 11px 10px;
  min-height:0;  /* v47: 「1行がすごく広い」の犯人=classicの大ボタン用min-height:88pxの上書き漏れ（実機7/17） */
  text-align:left;
  border-left:3px solid var(--svc-color,var(--border))!important;  /* 会社色の糸（ロゴなしでも一瞬で識別） */
}
html.d-washi .svc-big-ico,html.d-sumi .svc-big-ico{display:none;}  /* 色丸絵文字は糸に役割を譲る */
html.d-washi .svc-big-name,html.d-sumi .svc-big-name{
  order:1;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.95rem;
}
html.d-washi .svc-big-cnt,html.d-sumi .svc-big-cnt{
  order:2;
  flex:0 0 3.5em;
  text-align:right;
  font-variant-numeric:tabular-nums;
  font-size:.95rem;  /* v47: classicの補助表示(.75rem)を引きずっていた。行では本文情報＝老眼原則の14px以上を確保 */
}
html.d-washi .svc-big-amt,html.d-sumi .svc-big-amt{
  order:3;
  flex:0 0 6.5em;
  text-align:right;
  font-size:1.15rem;
}
html.d-washi .svc-big::after,html.d-sumi .svc-big::after{
  content:'›';
  order:4;
  color:var(--muted);
  font-size:1.05rem;
}
/* v48: 文字の呼吸（えーくん実機7/17「詰め込もう感・隣と近すぎて読みづらい」＋小さい字の底上げ）
   参照画像の読みやすさの正体=字間。明朝の日本語に一律の字間を与え、数字（Caslon）は詰めたまま */
html.d-washi body,html.d-sumi body{letter-spacing:.05em;}
html.d-washi .total-big,html.d-sumi .total-big,
html.d-washi .tz-count,html.d-sumi .tz-count,
html.d-washi .timer-count-sm,html.d-sumi .timer-count-sm,
html.d-washi #io-value,html.d-sumi #io-value,
html.d-washi .cash-field-val,html.d-sumi .cash-field-val,
html.d-washi .cash-change-val,html.d-sumi .cash-change-val,
html.d-washi .svc-big-amt,html.d-sumi .svc-big-amt{letter-spacing:0;}  /* 帳簿の数字は詰めて組む */
/* 「稼働開始」は特大すぎた→一段静かに（明朝+字間で存在感は保てる） */
html.d-washi .btn-shift-start,html.d-sumi .btn-shift-start{
  font-size:1.25rem;
  padding:20px;
}
/* 小さい字の底上げ（老眼原則: 本文14px以上・50cm距離） */
html.d-washi .tz-note,html.d-sumi .tz-note,
html.d-washi .total-sub,html.d-sumi .total-sub,
html.d-washi .tz-pause-line,html.d-sumi .tz-pause-line{font-size:.95rem;}
html.d-washi .tz-lbl,html.d-sumi .tz-lbl{font-size:1rem;}
html.d-washi .tz-pause-inline,html.d-sumi .tz-pause-inline{font-size:.9rem;}
/* 非公式注記: 読めないレベル(.7rem/#444固定)は明記の意味がない→読めるサイズ・テーマの薄墨に */
html.d-washi .disclaimer,html.d-sumi .disclaimer{
  font-size:.82rem;
  color:var(--muted);
}
/* v49: 字間の精密調整（えーくん実機7/17「出前館がほぼくっついてる・10件/¥1000がきつい」
   →参照画像の組み方に合わせる: 社名=広い字間・数字と単位/記号の間にすき間） */
html.d-washi .svc-big-name,html.d-sumi .svc-big-name{letter-spacing:.15em;}
html.d-washi .yen-mark,html.d-sumi .yen-mark{margin-right:.09em;}
html.d-washi .unit-mark,html.d-sumi .unit-mark{margin-left:.18em;}
html.d-washi .pwa-hint-btn,html.d-sumi .pwa-hint-btn{
  letter-spacing:.09em;
  font-size:.95rem;  /* .85rem=13.6pxは老眼原則の下限割れだった */
}
/* v50: 脱・太字（えーくん7/17「太字が清涼感を消す」。参照画像は明朝regularの世界=
   視認性は太さでなく字間とサイズで確保する。数字はCaslon 400で統一済み） */
html.d-washi button,html.d-sumi button,
html.d-washi .fold summary,html.d-sumi .fold summary{font-weight:500;}
html.d-washi .svc-big-name,html.d-sumi .svc-big-name,
html.d-washi .io-tab-l,html.d-sumi .io-tab-l,
html.d-washi .home-date,html.d-sumi .home-date,
html.d-washi .total-sub,html.d-sumi .total-sub,
html.d-washi .tz-note,html.d-sumi .tz-note,
html.d-washi .pwa-hint-btn,html.d-sumi .pwa-hint-btn{font-weight:400;}
html.d-washi .ended-title,html.d-sumi .ended-title,
html.d-washi .cloud-title,html.d-sumi .cloud-title,
html.d-washi .io-svc,html.d-sumi .io-svc{font-weight:600;}
/* 長文の開始ボタンは字間を絞る（.18emは「稼働開始」4文字用・日付入り長文だと間延び=実機7/17） */
html.d-washi #tz-newday-btn,html.d-sumi #tz-newday-btn,
html.d-washi .btn-shift-long,html.d-sumi .btn-shift-long{letter-spacing:.05em;}
/* v53: トーストは下部タブの上に出す（bottom:24pxのままだとタブと重なる）
   v56: 文字=生成り（抹茶地に黒は沈む・「おまかせに戻しました」実機7/17。赤系エラーも生成りで統一） */
html.d-washi .toast,html.d-sumi .toast{bottom:88px;color:#f5f2e6;}
/* v52: タイマーのライブ行=帳簿の行（罫線・Caslonの数字・地は透明） */
html.d-washi #tz-line,html.d-sumi #tz-line{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border);
  border-radius:0;
}
html.d-washi .tz-line-count,html.d-sumi .tz-line-count{
  font-family:'Libre Caslon Text','Hiragino Mincho ProN',serif;
  font-weight:400;
  letter-spacing:0;
}