.rm { max-width: 520px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.rbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pill { font-size: .85rem; padding: 3px 10px; border-radius: 999px; background: var(--soft); color: var(--accent); }
.pill.off { background: #5a2a2a; color: #ffd9d9; }
.link { margin-left: auto; font: inherit; background: none; border: 0; color: var(--accent); text-decoration: underline; padding: 10px 4px; cursor: pointer; }
#keyinput { width: 100%; font: inherit; font-size: 1.1rem; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); margin: 8px 0; }
.chk { display: flex; gap: 10px; align-items: center; margin: 10px 0; }
.chk input { transform: scale(1.3); }
.big { font: inherit; font-size: 1.2rem; font-weight: 600; min-height: 68px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; width: 100%; touch-action: manipulation; }
.big:disabled { opacity: .45; cursor: not-allowed; }
.big.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.big.danger { border-color: #b04a4a; color: #b04a4a; }
.big:active:not(:disabled) { transform: scale(.98); }
.pair { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; margin: 14px 0; }
.pair .big { min-height: 96px; font-size: 1.4rem; }
.stage { text-align: center; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.stage small { color: var(--muted, inherit); opacity: .8; }
.sname { font: 700 2rem/1.2 Georgia, serif; margin: 4px 0; }
.tbox { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--card); margin: 14px 0; }
.tclock { font-size: 2.6rem; font-variant-numeric: tabular-nums; text-align: center; font-weight: 700; margin-bottom: 10px; }
.trow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.trow.four { grid-template-columns: repeat(4, 1fr); }
.jump { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.jump .big { min-height: 52px; font-size: 1rem; }
.jump .big.on { background: var(--accent); color: var(--accent-text); }
summary { padding: 12px 0; cursor: pointer; }
.err { color: #c0392b; font-weight: 600; }
.rbox { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--card); margin: 14px 0; }
.rbox h3 { margin: 0 0 8px; }
.trow.three { grid-template-columns: repeat(3, 1fr); }
.rbox label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.rbox select { font: inherit; font-size: 1.05rem; padding: 12px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.hb { font: inherit; font-weight: 600; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; touch-action: manipulation; }
.hb.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.hb.danger { border-color: #b04a4a; color: #b04a4a; }