/* factory-ui — desktop.css: 筐体化レイヤー(Electron desktop 共通)。出典: TAPE FACTORY DESKTOP desktop.css(値は TF が正)。
   1.3.2: #cartLog に折り返し・縦スクロール・書体・色を持たせた(TF の Web 版 HTML は inline style で同じ値を持つが、VF は factory-ui が生成する素の <pre> なので長い行がはみ出し、max-height を超えた分が下に流れ出ていた)。
   1.4.1: web モード(<html class="fui-web">)では「窓」の規則(html/body の透過、body の余白・overflow、.dlg-ov の inset)を効かせない。
   :where() で包んで詳細度は 1.4.0 と同じ(VF の desktop.css の同詳細度の上書きがそのまま勝つ)。値は不変。
   Web 版 CSS を上書きするため !important 付き。アプリ固有(TF: .under/#usbLink/EJECT、VF: モニタ)は各アプリの desktop.css に残す。 */
html:where(:not(.fui-web)), :where(html:not(.fui-web)) body { background: transparent !important; background-image: none !important; }
:where(html:not(.fui-web)) body { min-height: 0 !important; padding: 16px 60px 92px !important; gap: 0 !important; overflow: hidden !important; user-select: none; -webkit-user-select: none; }
.titlerow input { font-size: 12px !important; }
.deck .brand { -webkit-app-region: drag; }
.deck .brand .model { -webkit-app-region: no-drag; cursor: pointer; }
.deck .screw.tl, .deck .screw.tr { -webkit-app-region: drag; }
.pwbtn { cursor: pointer; }
.pwbtn:active { transform: translateY(1px); }
.pwbtn i { position: relative; }
.pwbtn i::after { content: ''; position: absolute; left: 50%; top: -5px; transform: translateX(-50%); width: 2px; height: 9px; border-radius: 1px; background: #6f6c65; }
:where(html:not(.fui-web)) .dlg-ov { inset: 16px 60px 92px 60px !important; border-radius: 5px; }
.deck { padding-bottom: 68px !important; }
#tfLine { position: absolute; left: 26px; right: 26px; bottom: 22px; height: 27px; border-radius: 999px; z-index: 29; display: flex; align-items: center; justify-content: center; background: radial-gradient(var(--f-line-faint) 0.6px, transparent 0.7px), linear-gradient(180deg, rgba(0,0,0,0.58), rgba(0,0,0,0.34)); background-size: 3px 3px, 100% 100%; box-shadow: inset 0 1px 3px rgba(0,0,0,0.65), inset 0 -1px 0 rgba(255,255,255,0.05), 0 1px 0 rgba(255,255,255,0.06); }
#tfClock { font-family: var(--f-font-mono); font-size: 12px; letter-spacing: 0.32em; padding-left: 0.32em; color: #97794a; text-shadow: 0 0 7px rgba(255,150,40,0.28); transition: opacity .5s; }
#tfClock .d { color: #7d6640; margin-right: 1.6em; font-size: 10.5px; letter-spacing: 0.28em; }
#tfClock .c { transition: opacity .3s; }
#tfClock .c.off { opacity: 0.2; }
.msg { position: absolute; left: 26px; right: 26px; bottom: 22px; width: auto !important; min-height: 0 !important; height: 27px; box-sizing: border-box; display: flex; align-items: center; padding: 0 26px; border-radius: 999px; z-index: 30; font-family: var(--f-font-mono); font-size: 11.5px !important; letter-spacing: 0.1em !important; line-height: 27px; color: #c9a05e !important; text-shadow: 0 0 8px rgba(255,150,40,0.3); background: none; box-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .25s; pointer-events: none; }
.msg:empty { opacity: 0; }
.msg.err { color: #ff7a55 !important; text-shadow: 0 0 8px rgba(255,80,40,0.45); }
.msg.ok { color: #7fe89a !important; text-shadow: 0 0 8px rgba(90,220,130,0.45); }
#cartLog { position: absolute !important; left: 26px !important; right: 26px !important; bottom: 58px !important; width: auto !important; max-height: 240px !important; margin: 0 !important; z-index: 40; padding: 10px 14px !important; box-sizing: border-box; overflow-y: auto !important; overflow-x: hidden; white-space: pre-wrap !important; word-break: break-all; font-family: var(--f-font-mono); font-size: 10px; line-height: 1.6; color: #8a9a8a; border-radius: 4px !important; background-color: rgba(7, 9, 8, 0.97) !important; background-image: radial-gradient(rgba(255,255,255,0.04) 0.5px, transparent 0.6px), linear-gradient(180deg, rgba(14,17,15,0.97), rgba(6,8,7,0.97)) !important; background-size: 3px 3px, 100% 100% !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: 0 14px 34px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06) !important; animation: tf-svc-in .22s ease-out; }
#tfSvcClose { position: absolute; right: 34px; bottom: 66px; z-index: 41; cursor: pointer; padding: 4px 12px; border-radius: 2px; font-family: var(--f-font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--f-text-mid); background-image: var(--f-btn-bg); box-shadow: 0 2px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.16); }
#tfSvcClose:hover { filter: brightness(1.15); }
#tfSvcClose:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.45); transform: translateY(1px); }
#cartLog[style*="display:none"] + #tfSvcClose, #cartLog[style*="display: none"] + #tfSvcClose { display: none; }
.lbody::-webkit-scrollbar, #cartLog::-webkit-scrollbar { width: 8px; }
.lbody::-webkit-scrollbar-track, #cartLog::-webkit-scrollbar-track { background: rgba(0,0,0,0.35); border-radius: 4px; }
.lbody::-webkit-scrollbar-thumb, #cartLog::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #3a3d42, #26282c); border-radius: 4px; border: 1px solid rgba(0,0,0,0.5); }
.lbody::-webkit-scrollbar-thumb:hover, #cartLog::-webkit-scrollbar-thumb:hover { background: #45484e; }
.vfd { transition: filter 0.7s ease-out, opacity 0.7s ease-out; }
.tf-boot .vfd { filter: brightness(0.06) saturate(0); opacity: 0.85; }
.tf-boot .pw i { box-shadow: none !important; opacity: 0.35; }
.pw i { transition: opacity .4s, box-shadow .4s; }
.tf-shutdown .vfd { transition: filter .16s ease-in, opacity .16s ease-in; filter: brightness(0.04) saturate(0); opacity: .8; }
.tf-shutdown .deck { transition: opacity .4s ease .18s, transform .4s ease .18s; opacity: 0; transform: translateY(8px); }
@keyframes tf-svc-in {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}