/* Shared base for the fake work screens. Each screen adds its own styles from its JS file. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 14px/1.4 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background: #1f1f1f; color: #e6e6e6; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
#app { height: 100%; }
/* These screens are desktop apps; on small screens let the page scroll instead of squashing. */
@media (max-width: 960px), (max-height: 560px) {
  body { overflow: auto; }
  #app { min-width: 1000px; min-height: 620px; }
}

.fw-bar {
  position: fixed; right: 16px; bottom: 16px; z-index: 9999;
  display: flex; gap: 6px; padding: 6px;
  background: rgba(20, 20, 24, .88); border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; backdrop-filter: blur(8px);
  font: 600 13px system-ui, sans-serif; transition: opacity .4s;
}
.fw-bar a, .fw-bar button {
  background: rgba(255,255,255,.1); border: 0; color: #fff; border-radius: 999px;
  padding: 7px 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.fw-bar a:hover, .fw-bar button:hover { background: rgba(255,255,255,.22); }
.fw-bar .fw-hint { padding: 7px 10px 7px 12px; color: rgba(255,255,255,.7); font-weight: 500; }
.fw-bar.hide { opacity: 0; pointer-events: none; }