/* factory-ui — controls.css: 下段操作子(POWER・トランスポート・OUTPUT・REC・PHONES)
   出典: TAPE FACTORY web CSS(v8.15)。値は TF が正。直すときは全機種同時。gen-factory-ui.js で生成
   1.5.0: .deck button { font-family: inherit }(button は font-family を継承しないので、RADIO のボタンの字が Arial で出ていた。TF のテンプレートと VF の deck.css は自前で inherit 済み) */
.controls { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px 0; gap: 24px; }
.cgroup { display: flex; align-items: flex-end; gap: 20px; }
.cstack { display: flex; flex-direction: column; gap: 6px; }
.cstack.center { align-items: center; }
.clab { font-size: 8px; font-weight: 600; letter-spacing: 0.22em; color: var(--f-text-lab); }
.clab.sm { font-size: 7.5px; letter-spacing: 0.2em; }
.pwbtn { width: 46px; height: 46px; border-radius: 50%; background-image: linear-gradient(180deg, #34363a, #1d1f21); box-shadow: 0 3px 5px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -2px 3px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; }
.pwbtn i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #6f6c65; border-top-color: transparent; }
.tbtns { display: flex; gap: 7px; }
.deck button { font-family: inherit; }
.tbtn { cursor: pointer; border: none; width: 66px; height: 46px; border-radius: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background-image: var(--f-btn-bg); box-shadow: var(--f-btn-shadow); }
.tbtn:hover { filter: brightness(1.05); }
.tbtn:active, .tbtn.on { box-shadow: inset 0 2px 5px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.6); transform: translateY(2px); }
.tbtn .g { font-size: 12px; line-height: 1; color: #ece8e0; }
.tbtn .n { font-size: 7.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--f-text-mid); }
.outbtns { display: flex; align-items: flex-start; gap: 8px; }
.obtn { cursor: pointer; border: none; width: 96px; height: 52px; border-radius: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background-image: var(--f-btn-bg); box-shadow: var(--f-btn-shadow); opacity: 0.5; }
.obtn:hover { filter: brightness(1.1); }
.obtn.on { opacity: 1; }
.obtn i { width: 6px; height: 6px; border-radius: 50%; background: var(--f-green); opacity: 0.12; box-shadow: 0 0 8px var(--f-green-glow); }
.obtn.on i { opacity: 1; }
.obtn span { font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; color: #ece8e0; }
.obtn.cart { background-image: linear-gradient(180deg, #2c2e31, #1b1d1f); }
.obtn.cart i { background: #3f4a45; box-shadow: inset 0 0 2px rgba(0,0,0,0.7); opacity: 1; }
.obtn.cart span { color: #8f8a82; }
.obtn.cart.on { background-image: var(--f-btn-bg); }
.obtn.cart.on i { background: var(--f-green); box-shadow: 0 0 8px var(--f-green-glow); }
.obtn.cart.on span { color: #ece8e0; }
.obtn.cart.busy i { background: #ffab3a; box-shadow: 0 0 8px rgba(255,171,58,0.9); animation: recblink 0.7s steps(1, end) infinite; }
.recbtn { cursor: pointer; border: none; width: 138px; height: 52px; border-radius: 2px; display: flex; align-items: center; justify-content: center; gap: 10px; background-image: linear-gradient(180deg, #3a3c40, #222426); box-shadow: 0 3px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.16); }
.recbtn:hover { filter: brightness(1.05); }
.recbtn.busy { box-shadow: inset 0 2px 6px rgba(0,0,0,0.5); transform: translateY(2px); }
.recbtn:disabled { cursor: default; filter: grayscale(0.4) brightness(0.8); }
.reclamp { width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #ff8a6a, #d81a10 62%, #7c0a06); box-shadow: 0 0 12px rgba(255,47,34,0.75), inset 0 1px 1px rgba(255,255,255,0.6); opacity: 0.55; animation: recblink 0.7s steps(1, end) infinite; animation-play-state: paused; }
.recbtn.busy .reclamp { opacity: 1; animation-play-state: running; }
.rectxt { display: flex; flex-direction: column; align-items: flex-start; }
.rectxt .a { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: #f2eee6; }
.rectxt .b { font-size: 7.5px; font-weight: 600; letter-spacing: 0.16em; color: #a29d95; }
.phones { display: flex; align-items: center; gap: 14px; padding-bottom: 2px; }
.jack { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #23252a 0 42%, #7e7a72 43% 68%, #45474b 69% 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,0.8); }
.knob { cursor: ns-resize; position: relative; width: 52px; height: 52px; border-radius: 50%; background-image: repeating-conic-gradient(from 0deg, rgba(0,0,0,0.35) 0deg 2deg, transparent 2deg 5deg), linear-gradient(180deg, #43464a, #1c1e20); box-shadow: 0 3px 6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.22); touch-action: none; }
.knob .inner { position: absolute; inset: 9px; border-radius: 50%; background: linear-gradient(180deg, #3a3d41, #232528); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16); }
.knob .inner i { position: absolute; top: 3px; left: 50%; width: 2px; height: 9px; margin-left: -1px; background: #e6e2da; display: block; }