/* Frame for the ClickBSL Mark 2 prototype screens */
html, body { margin: 0; min-height: 100%; }
body.dc-phone, body.dc-console {
  background: #D5DDE0 !important;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
body.dc-phone { align-items: center; padding: 32px 24px; }
body.dc-console { align-items: flex-start; padding: 84px 24px 40px; }
#dc-stage { position: relative; flex-shrink: 0; overflow: hidden; }
.dc-phone #dc-stage { border-radius: 50px; background: #0E1F27; box-shadow: 0 0 0 10px #0E1F27, 0 40px 80px rgba(14, 31, 39, 0.3); }
.dc-console #dc-stage { border-radius: 20px; box-shadow: 0 30px 70px rgba(14, 31, 39, 0.25); }
#dc-root { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.dc-back {
  position: fixed; top: 20px; left: 20px; z-index: 10;
  height: 44px; padding: 0 18px; border-radius: 999px;
  display: flex; align-items: center; gap: 8px;
  background: #0E1F27; color: #FFFFFF !important; text-decoration: none;
  font: 700 14px/1 'Figtree', ui-sans-serif, system-ui, sans-serif;
  box-shadow: 0 6px 18px rgba(14, 31, 39, 0.25);
}
.dc-back:hover { background: #DB0078; }
.dc-back:focus-visible { outline: 3px solid #DB0078; outline-offset: 3px; }
html.dc-edge body { padding: 0; }
html.dc-edge #dc-stage { border-radius: 0; box-shadow: none; }
@media (max-width: 700px) { .dc-back { display: none; } }