/* kds-ui-recovery:453d567 */
/* TIMER-050 — white base formal palette (bright / clean / chic kitchen) */

/* DSEG7 Classic (keshikan) — SIL OFL 1.1; time digits only */
@font-face {
  font-family: "DSEG7 Classic";
  src:
    url("/static/local_kds/fonts/dseg7/dseg7-classic-latin-700-normal.woff2")
      format("woff2"),
    url("/static/local_kds/fonts/dseg7/dseg7-classic-latin-700-normal.woff")
      format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DSEG7 Classic";
  src:
    url("/static/local_kds/fonts/dseg7/dseg7-classic-latin-400-normal.woff2")
      format("woff2"),
    url("/static/local_kds/fonts/dseg7/dseg7-classic-latin-400-normal.woff")
      format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Noto Sans JP — SIL OFL 1.1; keypad digits / aux keys only */
@font-face {
  font-family: "Noto Sans JP";
  src:
    url("/static/local_kds/fonts/noto-sans-jp/noto-sans-jp-latin-700-normal.woff2")
      format("woff2"),
    url("/static/local_kds/fonts/noto-sans-jp/noto-sans-jp-latin-700-normal.woff")
      format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src:
    url("/static/local_kds/fonts/noto-sans-jp/noto-sans-jp-latin-600-normal.woff2")
      format("woff2"),
    url("/static/local_kds/fonts/noto-sans-jp/noto-sans-jp-latin-600-normal.woff")
      format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces: white primary; dish barely cooler gray */
  --bg: #ffffff;
  --bg-card: #ffffff;
  --bg-elevated: #f5f6f8;
  --bg-status: #f7f8fa;
  --bg-dish: #fafafa;
  --bg-header: #ffffff;
  --bg-footer: #fafafa;
  --bg-btn-udon: #f2f6f4;
  --bg-btn-kamaage: #f6f4f0;
  --bg-key: #ffffff;

  /* Lines: light gray only */
  --border: #e2e5ea;
  --border-soft: #eceef2;
  --divider: #e8eaee;

  /* Type: dark for contrast on white */
  --fg: #14171c;
  --fg-muted: #5a6370;

  /* State accents (muted; never full-card fill) */
  --accent: #2f5f49;
  --accent-dim: #3d7a5c;
  --accent-soft: #e8f1ec;
  --warn: #9a7634;
  --danger: #943c3c;
  --danger-dim: #7e3232;
  --due: #943c3c;
  --due-soft: #f6ecec;
  --paused: #3a6078;
  --completed: #2f5f49;

  --shadow-card: 0 1px 2px rgba(20, 23, 28, 0.05), 0 4px 12px rgba(20, 23, 28, 0.06);
  --shadow-status: 0 1px 1px rgba(20, 23, 28, 0.03);

  --key-gap: 8px;
  --btn-gap: 14px;
  --radius: 10px;
  --radius-status: 8px;
  --font: "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --mono: "Cascadia Mono", "Consolas", "Hiragino Sans", monospace;
  /* Keypad digits — Noto Sans JP Bold with UI fallbacks */
  --keypad-font: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Segoe UI",
    sans-serif;
  /* Time digits only — DSEG 7-segment with monospace fallback */
  --lcd: "DSEG7 Classic", "Cascadia Mono", "Consolas", "Courier New", ui-monospace,
    monospace;
  --card-w: 18%;
  --card-min-w: 180px;
  /* Formal stage ratio: timer 73% / dish 27% (responsive 70–75 / 25–30) */
  --timer-fr: 73;
  --dish-fr: 27;
  /* Slimmer status: trim vertical pad only; fonts stay frozen (not cqh). */
  --status-share: 0.105;
  --status-share-min: 0.095;
  --status-share-max: 0.115;
  /* Frozen at prior ~40% of old 17% status (~34.4px @960×600). */
  --status-font-state: clamp(1.15rem, 3.585vw, 2.15rem);
  --status-font-kind: clamp(1.01rem, 3.155vw, 1.89rem);
  /* Shared height for 1kg/2kg and うどん/釜揚げ rows */
  --action-row-h: clamp(44px, 8.5vh, 60px);
  /* ~0.5mm visual bump for horizontal scrollbar @960 (scales via rem/vh) */
  --timer-scroll-bar: clamp(10px, 1.35vh, 14px);
  /* metrics row ≈15% of whole column → share of main card */
  --metrics-of-column: 0.15;
  --metrics-of-main: calc(var(--metrics-of-column) / (1 - var(--status-share)));
  --balls-w: 30%;
  --time-w: 70%;
  --slot-gap: 4px;
}

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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

body {
  display: flex;
  flex-direction: column;
}

/* Left footer replaced by ball metrics + side menu (see .footer-balls / .menu-burger). */

.sort-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--fg-muted);
  cursor: pointer;
}

.sort-toggle input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
}

/* Burger + side menu + compact connection alert (not a full warning page). */
.menu-burger {
  position: fixed;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 50;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--fg);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(20, 23, 28, 0.08);
}

.menu-burger:active {
  background: var(--bg-elevated);
}

.menu-burger.has-conn-alert {
  border-color: #e0b4b4;
  color: var(--danger);
}

.conn-alert {
  flex-shrink: 0;
  text-align: center;
  padding: 0.22rem 2.8rem 0.22rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  background: #f7eeee;
  color: var(--danger);
  border-bottom: 1px solid #e4caca;
}

.conn-alert.ok {
  background: var(--bg-elevated, #f4f5f7);
  color: var(--fg-muted, #5a6370);
  border-bottom-color: var(--border-soft, #eceef2);
  font-weight: 600;
}

.conn-alert.warn {
  background: #f7f3e8;
  color: var(--warn);
  border-bottom-color: #e6d9b8;
  font-weight: 700;
}

.conn-alert[hidden] {
  display: none !important;
}

/* OFFLINE / RESYNCING: keep mutation buttons visible but not operable */
body.kds-conn-mutations-blocked .item-complete-btn,
body.kds-conn-mutations-blocked .item-complete-qty-btn,
body.kds-conn-mutations-blocked .dishup-undo-btn,
body.kds-conn-mutations-blocked .item-handoff-btn,
body.kds-conn-mutations-blocked .item-handoff-qty-btn,
body.kds-conn-mutations-blocked .item-handoff-undo-btn,
body.kds-conn-mutations-blocked .item-timer-start-btn,
body.kds-conn-mutations-blocked .item-timer-adj-btn,
body.kds-conn-mutations-blocked .item-partial-qty-btn,
body.kds-conn-mutations-blocked .dishup-active-timer-adj,
body.kds-conn-mutations-blocked .dishup-armed-timer-start,
body.kds-conn-mutations-blocked [data-timer-action="start-grace"],
body.kds-conn-mutations-blocked [data-timer-action="cancel-pending"],
body.kds-conn-mutations-blocked .adj-btn,
body.kds-conn-mutations-blocked .start-btn,
body.kds-conn-mutations-blocked .keypad-key,
body.kds-conn-mutations-blocked .timer-action-btn {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.15);
}

body[data-kds-conn="offline"] .conn-alert:not(.ok),
body[data-kds-conn="resyncing"] .conn-alert:not(.ok) {
  font-size: 0.85rem;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.side-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(20, 23, 28, 0.28);
}

.side-menu-backdrop[hidden] {
  display: none !important;
}

.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;
  width: min(18rem, 86vw);
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background: #fff;
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 24px rgba(20, 23, 28, 0.12);
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.85rem 1rem;
  overflow: hidden;
  box-sizing: border-box;
}

.side-menu[hidden] {
  display: none !important;
}

.side-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  flex-shrink: 0;
}

.side-menu-title {
  font-size: 0.95rem;
  font-weight: 700;
}

.side-menu-close {
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--fg-muted);
  cursor: pointer;
}

.side-menu-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.side-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.55rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.45rem;
  font-size: 0.9rem;
  color: var(--fg);
  background: var(--bg-elevated);
}

.side-menu-row.sort-toggle {
  cursor: pointer;
}

.side-menu-row input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accent);
}

.side-menu-link {
  text-decoration: none;
}

.side-menu-section {
  padding: 0.65rem 0.55rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.45rem;
  background: #fff;
}

.side-menu-section-label {
  font-size: 0.68rem;
  color: var(--fg-muted);
  margin-bottom: 0.35rem;
}

.side-menu-hint {
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--fg-muted);
  padding: 0.05rem 0 0.4rem;
  opacity: 0.9;
}

.side-menu-section .side-menu-screen {
  width: 100%;
  margin-top: 0.35rem;
  cursor: pointer;
  text-align: left;
  appearance: none;
  font: inherit;
}

.side-menu-section .side-menu-screen + .side-menu-screen {
  margin-top: 0.4rem;
}

.side-menu-screen-mark {
  display: none;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--fg-muted);
}

.side-menu-screen.is-current {
  border-color: #1c2430;
  background: #1c2430;
  color: #fff;
}

.side-menu-screen.is-current .side-menu-screen-mark {
  display: inline;
  color: rgba(255, 255, 255, 0.85);
}

.menu-conn-status {
  font-size: 0.82rem;
  color: var(--fg-muted);
  font-weight: 600;
  line-height: 1.35;
}

.menu-conn-status.ok {
  color: var(--fg-muted);
  font-weight: 500;
}

.menu-conn-status.warn {
  color: var(--warn);
  font-weight: 700;
}

.menu-conn-status.bad {
  color: var(--danger);
  font-weight: 800;
}

.menu-active-count {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--fg-muted);
}

.banner {
  background: #f7eeee;
  color: var(--danger-dim);
  text-align: center;
  padding: 0.65rem 1rem;
  font-size: clamp(0.85rem, 2vw, 1rem);
  font-weight: 600;
  border-bottom: 1px solid #e4caca;
  flex-shrink: 0;
}

/* Dish-up portrait: slightly less vertical banner so cards keep height. */
body[data-kds-screen="dishup"] .banner:not([hidden]) {
  padding: 0.4rem 0.75rem;
  font-size: clamp(0.72rem, 1.5vw, 0.88rem);
  line-height: 1.25;
}

.banner[hidden] {
  display: none !important;
}

/* Stage: one active screen (timer | dishup). Timer screen keeps left/right split. */
.app-stage {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.timer-screen,
.dishup-screen,
.udon-screen,
.fry-screen,
.side-screen,
.longcook-screen,
.unclassified-screen,
.kitchen-screen,
.overview-screen {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.timer-screen[hidden],
.dishup-screen[hidden],
.udon-screen[hidden],
.fry-screen[hidden],
.side-screen[hidden],
.longcook-screen[hidden],
.unclassified-screen[hidden],
.kitchen-screen[hidden],
.overview-screen[hidden] {
  display: none !important;
}

/* Timer screen: left timer-column | right dish-pane (formal base 73:27). */
.timer-screen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 73fr) minmax(0, 27fr);
  grid-template-rows: minmax(0, 1fr);
}

/* Compact sound unlock affordance — only when AudioContext not enabled. */
.timer-sound-enable {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 35;
  margin: 0;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--fg);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 23, 28, 0.08);
  pointer-events: auto;
}
.timer-sound-enable:active {
  background: var(--accent-soft);
}
.timer-sound-enable[hidden] {
  display: none !important;
}

/* Collapsed Japanese voice audition — does not affect due/alarm. */
.timer-voice-audition {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 34;
  max-width: min(320px, calc(100% - 16px));
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--fg);
  font-size: 0.72rem;
  line-height: 1.35;
  box-shadow: 0 1px 2px rgba(20, 23, 28, 0.08);
}
.timer-voice-audition-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.35rem 0.65rem;
  font-weight: 600;
  user-select: none;
}
.timer-voice-audition-summary::-webkit-details-marker {
  display: none;
}
.timer-voice-audition[open] .timer-voice-audition-summary {
  border-bottom: 1px solid var(--border);
}
.timer-voice-audition-body {
  padding: 0.45rem 0.65rem 0.55rem;
  max-height: min(42vh, 280px);
  overflow: auto;
}
.timer-voice-audition-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
  margin-bottom: 0.45rem;
}
.timer-voice-audition-field {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.timer-voice-audition-field span {
  opacity: 0.75;
  white-space: nowrap;
}
.timer-voice-audition-field select {
  font: inherit;
  min-width: 3.2rem;
  padding: 0.1rem 0.2rem;
}
.timer-voice-audition-stop {
  margin-left: auto;
  font: inherit;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  cursor: pointer;
}
.timer-voice-audition-status {
  margin: 0 0 0.35rem;
  opacity: 0.85;
}
.timer-voice-audition-status[hidden] {
  display: none !important;
}
.timer-voice-audition-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.timer-voice-audition-list[hidden] {
  display: none !important;
}
.timer-voice-audition-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0;
  border-top: 1px solid var(--border);
}
.timer-voice-audition-meta {
  min-width: 0;
  flex: 1;
}
.timer-voice-audition-name {
  font-weight: 600;
  word-break: break-word;
}
.timer-voice-audition-lang {
  opacity: 0.7;
  font-size: 0.68rem;
}
.timer-voice-audition-play {
  flex: 0 0 auto;
  font: inherit;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  cursor: pointer;
}

.dishup-screen {
  display: flex;
  flex-direction: column;
}

.timer-column {
  min-width: 0;
  min-height: 0;
  display: grid;
  /* Left column only: ~89% timers / ~11% footer (allow 10–12%). */
  grid-template-rows: minmax(0, 89fr) minmax(0, 11fr);
  background: var(--bg);
}

.timer-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

.dish-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-dish);
}

.timer-screen > .dish-pane {
  border-left: 1px solid var(--divider);
}

.dishup-screen > .dish-pane {
  flex: 1;
}

@media (max-width: 800px) {
  .timer-screen {
    grid-template-columns: minmax(0, 75fr) minmax(0, 25fr);
  }
  .timer-column {
    grid-template-rows: minmax(0, 90fr) minmax(0, 10fr);
  }
}

@media (min-width: 1600px) {
  .timer-screen {
    grid-template-columns: minmax(0, 70fr) minmax(0, 30fr);
  }
  .timer-column {
    grid-template-rows: minmax(0, 88fr) minmax(0, 12fr);
  }
}

/* Footer: five ball metrics (order/diff pending until TIMER-080B). */
.app-footer {
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: 0;
  padding: 0.28rem 0.45rem;
  background: var(--bg-footer);
  border-top: 1px solid var(--border-soft);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.footer-balls {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr 0.9fr 0.9fr 0.85fr;
  width: 100%;
  align-items: center;
  gap: 0.2rem;
}

.footer-ball-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 0.08rem;
  padding: 0.1rem 0.12rem;
}

.footer-ball-item--diff {
  padding-left: 0.18rem;
  padding-right: 0.18rem;
  border-radius: 0.28rem;
}

.footer-ball-item--diff.is-shortage {
  background: var(--danger, #943c3c);
  color: #fff;
}

.footer-ball-item--diff.is-shortage .footer-ball-label {
  color: rgba(255, 255, 255, 0.92);
}

.footer-ball-item--diff.is-shortage .footer-ball-diff-text {
  color: #fff;
  font-weight: 800;
}

.footer-ball-item--diff.is-hold-warning {
  background: #c9a227;
  color: #1a1400;
}

.footer-ball-item--diff.is-hold-warning .footer-ball-label {
  color: rgba(26, 20, 0, 0.85);
}

.footer-ball-item--diff.is-hold-warning .footer-ball-diff-text {
  color: #1a1400;
  font-weight: 800;
}

.footer-ball-diff-sub {
  display: block;
  font-size: clamp(0.58rem, 1.2vw, 0.72rem);
  font-weight: 600;
  line-height: 1.15;
  margin-top: 0.06rem;
  opacity: 0.92;
}

.footer-ball-item--waste.has-waste .footer-ball-num,
.footer-ball-item--waste.has-waste .footer-ball-unit {
  color: #943c3c;
  font-weight: 800;
}

.footer-ball-item--waste.has-waste {
  background: rgba(148, 60, 60, 0.12);
  border-radius: 0.28rem;
}

.footer-ball-diff-text {
  display: block;
  font-size: clamp(0.72rem, 1.55vw, 0.92rem);
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  max-width: 100%;
}

.footer-ball-label {
  font-size: clamp(0.52rem, 1.15vw, 0.62rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
  line-height: 1.1;
  white-space: nowrap;
}

.footer-ball-value {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.08em;
  max-width: 100%;
  color: var(--fg);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.footer-ball-num {
  font-size: clamp(1rem, 2.35vw, 1.45rem);
  font-weight: 800;
}

.footer-ball-unit {
  font-size: clamp(0.68rem, 1.55vw, 0.92rem);
  font-weight: 700;
  color: var(--fg-muted);
}

.footer-ball-pending {
  font-weight: 700;
  color: var(--fg-muted);
}

.footer-left,
.footer-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

/* timer-pane only scrolls horizontally — dish pane stays fixed */
.slots-grid {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--slot-gap);
  padding: 6px 6px calc(6px + 2px);
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: auto;
  scrollbar-color: #b7bdc8 #eef0f3;
}

.slots-grid::-webkit-scrollbar {
  height: var(--timer-scroll-bar);
}

.slots-grid::-webkit-scrollbar-track {
  background: #eef0f3;
  border-radius: 8px;
}

.slots-grid::-webkit-scrollbar-thumb {
  background: #b7bdc8;
  border-radius: 8px;
  border: 2px solid #eef0f3;
}

.slots-grid::-webkit-scrollbar-thumb:hover {
  background: #9aa3b0;
}

.slot-column {
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  min-width: var(--card-min-w);
  max-width: var(--card-w);
  height: 100%;
  min-height: 0;
  gap: var(--slot-gap);
  /* Outer size is fixed by width/height — keypad mode must not grow this box */
}

.slot-column.busy {
  opacity: 0.75;
  pointer-events: none;
}

.status-card {
  /* Slimmer band: same frozen font, reduced vertical pad only. */
  flex: 0 0 calc(var(--status-share) * (100% - var(--slot-gap)));
  height: calc(var(--status-share) * (100% - var(--slot-gap)));
  max-height: calc(var(--status-share-max) * (100% - var(--slot-gap)));
  min-height: calc(var(--status-share-min) * (100% - var(--slot-gap)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0 7%;
  background: var(--bg-status);
  border: 1px solid var(--border);
  border-radius: var(--radius-status);
  box-shadow: var(--shadow-status);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
  line-height: 1;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.status-card.status-solo {
  /* Waiting 「待機中」: center in full status-card (H+V). */
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 7%;
}

.status-card.status-solo .status-left {
  flex-shrink: 1;
  text-align: center;
  line-height: 1;
  font-size: var(--status-font-state);
  font-weight: 800;
}

.status-card[data-state="running"],
.status-card[data-state="completed"] {
  color: var(--accent);
  border-color: #c5d9ce;
  background: #f7faf8;
}

.status-card[data-state="due"] {
  color: var(--due);
  border-color: #e0c8c8;
  background: #fbf5f4;
}

.status-card[data-state="paused"] {
  color: var(--paused);
  border-color: #c8d4dc;
  background: #f4f7f9;
}

.status-card[data-state="waiting"] {
  color: var(--fg-muted);
  background: #f7f8fa;
}

.status-left,
.status-right {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip; /* no ellipsis */
  min-width: 0;
  line-height: 1;
}

.status-left {
  /* Frozen formal size — does NOT shrink with status-card height */
  font-size: var(--status-font-state);
  font-weight: 800;
  flex-shrink: 0;
}

.status-right {
  font-size: var(--status-font-kind);
  font-weight: 700;
  text-align: right;
  flex-shrink: 1;
}

.status-divider {
  width: 1px;
  height: 0.85em;
  background: var(--border);
  flex-shrink: 0;
  opacity: 0.85;
}

.slot-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto; /* ~80% remaining */
  min-height: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.slot-column.waiting-frame .slot-card {
  border-style: dashed;
  border-color: #cfd5dc;
}

.slot-column[data-state="running"] .slot-card {
  border-color: #c5d9ce;
}

.slot-column[data-state="due"] .slot-card {
  border-color: #e0c8c8;
}

.slot-column[data-state="paused"] .slot-card {
  border-color: #c8d4dc;
}

.slot-column[data-state="completed"] .slot-card {
  border-color: #c5d9ce;
}

.slot-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.4rem;
  gap: 0.35rem;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-card);
}

.waiting-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.waiting-fixed-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--key-gap);
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.waiting-always {
  gap: 4px;
}

.waiting-metrics {
  flex: 0 0 calc(var(--metrics-of-main) * 100%);
  height: calc(var(--metrics-of-main) * 100%);
  max-height: calc(var(--metrics-of-main) * 100%);
  min-height: 0;
  display: grid;
  /* fr so gap does not push past 100% (30:70 normalized from 33:77) */
  grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
  gap: 4px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  container-type: size;
  container-name: metrics;
  align-items: stretch;
}

.waiting-metrics .metric {
  min-width: 0;
  min-height: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background: #f4f6f8;
  border: none;
  box-shadow: inset 0 0 0 1px var(--border-soft);
  border-radius: 10px;
  padding: 0 0.15rem;
  /* pane: top 20% / digit band 60% / bottom 20% */
  display: grid;
  grid-template-rows: 20% 60% 20%;
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
}

.waiting-metrics .metric > .metric-value {
  grid-row: 2;
  grid-column: 1;
  align-self: end; /* digit bottoms sit on shared 20% bottom pad line */
  justify-self: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

.waiting-metrics .metric-time-full {
  grid-column: 1 / -1;
}

.waiting-metrics .metric-label {
  font-size: clamp(0.55rem, 1.1vw, 0.68rem);
  margin-bottom: 0.1rem;
  color: var(--fg-muted);
  flex-shrink: 0;
}

.waiting-metrics .metric-balls .balls-metric {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.06em;
  overflow: hidden;
  height: auto;
  max-height: 100%;
  /* digit 100% within band; unit 0.38em of this */
  font-size: clamp(1.35rem, 52cqh, 2.45rem);
  line-height: 1;
}

.waiting-metrics .balls-num {
  font-family: var(--font);
  font-weight: 800;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0;
  display: block;
}

.waiting-metrics .balls-unit {
  font-family: var(--font);
  font-size: 0.38em;
  font-weight: 700;
  line-height: 1;
  color: var(--fg-muted);
  /* slightly above digit bottom as auxiliary unit */
  position: relative;
  bottom: 0.2em;
  margin-bottom: 0;
}

/* Time pane: DSEG fills digit band; bottom aligns with balls digits */
.waiting-metrics .metric-time .metric-value.lcd-plate,
.waiting-metrics .metric-time-full .metric-value.lcd-plate {
  display: block;
  overflow: hidden;
  font-size: clamp(1.55rem, 55cqh, 3.2rem);
  letter-spacing: 0.09em;
  line-height: 1;
  padding: 0;
  text-align: center;
}

.waiting-always > .keypad {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  gap: 4px;
  overflow: hidden;
}

.waiting-always .action-row-kg,
.waiting-always .action-row {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.waiting-always .kg-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--btn-gap);
  min-height: var(--action-row-h);
  height: var(--action-row-h);
}

.waiting-always .kg-row .btn-kg {
  min-height: var(--action-row-h);
  height: 100%;
  width: 100%;
  flex-direction: row;
  gap: 0.25em;
  font-size: clamp(0.72rem, 1.6vw, 0.9rem);
  font-weight: 700;
  padding: 0.2rem 0.35rem;
}

.waiting-always .action-row {
  min-height: var(--action-row-h);
  height: var(--action-row-h);
}

.waiting-always .action-row .btn {
  min-height: var(--action-row-h);
  height: 100%;
  width: 100%;
}

.waiting-always .start-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--btn-gap);
}

.waiting-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--key-gap);
  flex-shrink: 0;
}

.metric-balls {
  cursor: default;
}

.balls-metric {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.06em;
}

.balls-num {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  line-height: 1;
  letter-spacing: 0;
}

.balls-unit {
  font-family: var(--font);
  font-size: 0.38em; /* 38% of parent/num size */
  font-weight: 700;
  line-height: 1;
  color: var(--fg-muted);
  margin-bottom: 0.12em;
}

.kg-sub {
  display: inline;
  font-size: 0.78em;
  font-weight: 600;
  color: var(--fg-muted);
}

.metric-time-full {
  flex-shrink: 0;
}

.waiting-always .key {
  min-height: 0;
  height: 100%;
}

/* Time digits: DSEG 7-segment only (not balls / labels / buttons) */
.lcd-plate,
.metric-value.lcd-plate,
.time-large.lcd-plate {
  font-family: var(--lcd);
  font-weight: 700;
  font-style: normal;
  font-variant-numeric: normal;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
}

/* Manual timer: minute / second fields (seconds may show >59 while editing). */
.general-time-input {
  display: inline-flex;
  align-items: baseline;
  gap: 0.08em;
  border: none;
  background: transparent;
  padding: 0;
}

.general-time-part {
  margin: 0;
  padding: 0.08em 0.12em;
  border: 1px solid transparent;
  border-radius: 0.2rem;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.general-time-part.is-focused {
  border-color: rgba(40, 80, 140, 0.45);
  background: rgba(70, 120, 190, 0.12);
}

.general-time-colon {
  flex: 0 0 auto;
  opacity: 0.85;
}

.general-time-sec.is-focused {
  min-width: 2.2ch;
}

.time-large.lcd-plate {
  letter-spacing: 0.1em;
}

.time-large.overdue.lcd-plate {
  letter-spacing: 0.08em;
}

.waiting-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--key-gap);
  flex-shrink: 0;
}

.metric {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.25rem 0.35rem;
  text-align: center;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.metric-label {
  font-size: 0.65rem;
  color: var(--fg-muted);
}

.metric-value {
  font-family: var(--mono);
  font-size: clamp(1rem, 3vw, 1.4rem);
  font-weight: 700;
  line-height: 1.1;
}

.metric-value.tappable {
  cursor: pointer;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--key-gap);
  flex-shrink: 1;
  min-height: 0;
}

.key {
  container-type: size;
  container-name: keybtn;
  min-height: 44px;
  font-family: var(--keypad-font);
  background: var(--bg-key);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

.key-label {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  letter-spacing: 0;
  /* ≈ 42% of key button height (allow 38–46; never ≥50) */
  font-size: clamp(0.85rem, 42cqh, 1.75rem);
  font-weight: 700;
  font-family: inherit;
}

.key-digit .key-label {
  font-weight: 700;
}

/* C / delete: slightly weaker (~90% of digit size) */
.key-aux .key-label {
  font-weight: 600;
  font-size: clamp(0.75rem, 37.8cqh, 1.55rem);
}

.key:active:not(:disabled) {
  background: var(--bg-elevated);
}

.key:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (min-width: 700px) {
  .key { min-height: 48px; }
}

@media (min-width: 1000px) {
  .key { min-height: 52px; }
}

.kg-row,
.start-pair,
.paused-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--btn-gap);
  flex-shrink: 0;
}

.btn {
  border: none;
  border-radius: 8px;
  font-family: var(--font);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  font-size: clamp(0.85rem, 2vw, 1rem);
  padding: 0.35rem 0.5rem;
}

@media (min-width: 700px) {
  .btn { min-height: 72px; }
}

.btn:active:not(:disabled) {
  opacity: 0.82;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-kg {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--fg);
  min-height: 52px;
}

.btn-udon {
  background: var(--bg-btn-udon);
  color: var(--accent);
  border: 1px solid #c5d9ce;
}

.btn-kamaage {
  background: var(--bg-btn-kamaage);
  color: #6b5a3a;
  border: 1px solid #ddd4c4;
}

.btn-start {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid #c5d9ce;
  flex: 1;
}

.btn-cancel {
  background: var(--bg-elevated);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  min-height: 56px;
}

.start-row {
  display: flex;
  gap: var(--btn-gap);
  flex-shrink: 0;
}

/* General timer: START primary ≈60%, 取消 secondary ≈40% (grid beats width:100% conflicts). */
.waiting-shell.general-mode .start-row.action-row {
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: stretch;
  gap: var(--btn-gap);
}

.waiting-shell.general-mode .start-row .btn-start {
  width: 100%;
  min-width: 0;
  flex: none;
  font-weight: 800;
  font-size: clamp(0.98rem, 2.4vw, 1.22rem);
  letter-spacing: 0.08em;
  background: var(--bg-btn-udon);
  color: var(--accent);
  border: 1px solid #c5d9ce;
  box-shadow: none;
}

.waiting-shell.general-mode .start-row .btn-start:disabled {
  /* Keep primary cell + green identity; mute without looking smaller than 取消. */
  opacity: 1;
  cursor: not-allowed;
  background: #eef3f0;
  color: #6f8f7d;
  border-color: #d0ddd6;
  box-shadow: none;
}

.waiting-shell.general-mode .start-row .btn-cancel {
  width: 100%;
  min-width: 0;
  flex: none;
  font-weight: 600;
  font-size: clamp(0.75rem, 1.7vw, 0.92rem);
  letter-spacing: 0.02em;
  background: #ffffff;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  box-shadow: none;
  opacity: 1;
}

.active-display,
.completed-display {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
}

/* Same metrics frame as waiting: balls 30% | time 70%, ~15% of column. */
.active-display.active-metrics-shell {
  align-items: stretch;
  gap: 4px;
}

.active-display.active-metrics-shell .waiting-metrics {
  flex: 0 0 calc(var(--metrics-of-main) * 100%);
  height: calc(var(--metrics-of-main) * 100%);
  max-height: calc(var(--metrics-of-main) * 100%);
}

.active-display.active-metrics-shell .waiting-metrics .metric-time .lcd-plate.overdue {
  color: var(--due);
}

/* Running/paused: time hero + ± rows (no top balls pane). */
.active-display.active-adjust-shell {
  /* Shared tracks so 4 rows share + / label / − column centers. */
  --adjust-btn-size: clamp(44px, 7.2vh, 54px);
  --adjust-label-col: clamp(3.5rem, 9vw, 4.75rem);
  --adjust-row-h: clamp(46px, 7.5vh, 54px);
  /* Spacer flex-grow ≈ row-center targets in ops band: 15 / 35 / 55 / 78%. */
  --adjust-space-top: 15;
  --adjust-space-mid: 20;
  --adjust-space-balls: 23;
  --adjust-space-bottom: 22;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 0.1rem 0.25rem 0.28rem;
  box-sizing: border-box;
}

.active-display.active-adjust-shell .active-time-hero {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(2.6rem, 8vh, 4.2rem);
  margin-top: 0.1rem;
  margin-bottom: 0.15rem;
}

.active-display.active-adjust-shell .time-large {
  margin-top: 0;
  font-size: clamp(2.4rem, 8vw, 4rem);
}

.active-display.active-adjust-shell .time-large.overdue {
  font-size: clamp(1.6rem, 5vw, 2.6rem);
}

/* Fills timer → STOP; distributes 10分/1分/10秒/玉数 vertically. */
.adjust-ops {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.adjust-ops-space {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  pointer-events: none;
}

.adjust-ops-space--top {
  flex-grow: var(--adjust-space-top);
}

.adjust-ops-space--mid {
  flex-grow: var(--adjust-space-mid);
}

.adjust-ops-space--balls {
  /* Wider than mid: separate balls group from time rows. */
  flex-grow: var(--adjust-space-balls);
}

.adjust-ops-space--bottom {
  flex-grow: var(--adjust-space-bottom);
}

.adjust-row {
  display: grid;
  /* Fixed center track: 10分 / 1分 / 10秒 / 7玉 share the same mid column. */
  grid-template-columns: minmax(0, 1fr) var(--adjust-label-col) minmax(0, 1fr);
  align-items: center;
  width: 100%;
  height: var(--adjust-row-h);
  min-height: var(--adjust-row-h);
  max-height: var(--adjust-row-h);
  flex: 0 0 var(--adjust-row-h);
  column-gap: 0.4rem;
  box-sizing: border-box;
}

.adjust-row .adj-btn.adj-key {
  width: var(--adjust-btn-size);
  height: var(--adjust-btn-size);
  min-width: var(--adjust-btn-size);
  min-height: var(--adjust-btn-size);
  align-self: center;
}

.adjust-row .adj-btn[data-action="time-inc"],
.adjust-row .adj-btn[data-action="balls-inc"] {
  justify-self: end;
}

.adjust-row .adj-btn[data-action="time-dec"],
.adjust-row .adj-btn[data-action="balls-dec"] {
  justify-self: start;
}

.adjust-row .adjust-label {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: var(--font);
  font-size: clamp(0.95rem, 2.4vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg);
  white-space: nowrap;
  line-height: 1;
  box-sizing: border-box;
}

.adjust-row.balls-adjust-inline {
  flex: 0 0 var(--adjust-row-h);
  margin-top: 0;
}

.adjust-row.balls-adjust-inline .adjust-label.balls-metric {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.04em;
  font-size: clamp(1.35rem, 3.6vw, 1.9rem);
}

.adjust-row.balls-adjust-inline .balls-num {
  font-weight: 800;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.adjust-row.balls-adjust-inline .balls-unit {
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  padding: 0;
  /* Tiny optical lift so 「玉」 sits flush with digit baseline. */
  position: relative;
  top: -1px;
}

.active-display.active-adjust-shell .btn-stop,
.active-display.active-adjust-shell .paused-actions {
  /* Stay at card bottom; ops band (flex:1) absorbs former dead space. */
  margin-top: 0;
  padding-top: 0;
  flex: 0 0 auto;
}

.active-display .time-large {
  flex: 0 0 auto;
  margin-top: 0.35rem;
}

.time-large {
  font-family: var(--lcd);
  font-size: clamp(2.1rem, 7vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--fg);
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  white-space: nowrap;
}

.time-large.overdue {
  color: var(--due);
  background: var(--due-soft);
  border-color: #e0c8c8;
  letter-spacing: 0.04em;
  font-size: clamp(1.4rem, 4.4vw, 2.35rem);
}

/* Under metrics: − / same noodle_balls / ＋ (vertically centered, symmetric). */
.balls-adjust-row {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-height: clamp(56px, 14vh, 96px);
  margin: 0;
  box-sizing: border-box;
}

.balls-adjust-row .adj-btn {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.balls-adjust-row .adj-btn[data-action="balls-dec"] {
  left: 27%;
}

.balls-adjust-row .adj-btn[data-action="balls-inc"] {
  left: 73%;
}

.balls-adjust-row .balls-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.06em;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1;
  font-size: clamp(1.7rem, 4.8vw, 2.6rem);
}

.balls-adjust-row .balls-center .balls-num {
  font-family: var(--font);
  font-size: 1em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: var(--fg);
}

.balls-adjust-row .balls-center .balls-unit {
  font-family: var(--font);
  font-size: 0.38em;
  font-weight: 700;
  line-height: 1;
  color: var(--fg);
  margin-bottom: 0.12em;
}

.type-label {
  font-size: clamp(0.75rem, 1.8vw, 0.95rem);
  font-weight: 700;
  color: var(--fg-muted);
  letter-spacing: 0.06em;
}

/* ± buttons: same outer size as waiting keypad digit keys */
.adj-btn.adj-key {
  container-type: size;
  container-name: adjkey;
  width: clamp(44px, 7.5vh, 56px);
  height: clamp(44px, 7.5vh, 56px);
  min-width: clamp(44px, 7.5vh, 56px);
  min-height: clamp(44px, 7.5vh, 56px);
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-key);
  color: var(--fg);
  font-family: var(--keypad-font);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.adj-btn.adj-key .key-label {
  font-size: clamp(0.85rem, 42cqh, 1.75rem);
  font-weight: 700;
  line-height: 1;
  font-family: inherit;
}

.adj-btn.adj-key:active:not(:disabled) {
  background: var(--bg-elevated);
}

.btn-stop {
  background: #f6ecec;
  color: var(--due);
  border: 1px solid #e0c8c8;
  width: 100%;
  margin-top: auto;
  flex-shrink: 0;
}

.btn-resume {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid #c5d9ce;
}

.btn-reset {
  background: var(--bg-elevated);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.btn-reset .reset-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: rgba(212, 93, 93, 0.35);
  pointer-events: none;
}

.paused-actions {
  margin-top: auto;
  width: 100%;
}

.completed-text {
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 800;
  color: var(--completed);
  text-align: center;
}

.slot-card.busy {
  opacity: 0.75;
  pointer-events: none;
}

.slot-card[data-mode="general"] .noodle-only {
  display: none !important;
}

.slot-card[data-mode="general"] .general-only {
  display: flex !important;
}

.general-only {
  display: none !important;
}

.slot-card[data-mode="general"] .general-only.start-row {
  display: flex !important;
}

.slot-card[data-mode="general"] .general-only.waiting-top {
  display: grid !important;
}

.slot-card[data-mode="general"] .general-only.keypad {
  display: grid !important;
}