@import url("../css/design-tokens.css");
:root {
  color-scheme: light;
  font-family: "Rubik", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #F3F5F8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  background: #F3F5F8;
}

/*
 * Persistent app shell.
 * Business pages and route changes belong inside #appFrame; on phones the app
 * fills the real viewport, while desktop keeps a mobile-width preview column.
 */
.preview-stage {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.device-shell {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100%;
  min-height: 0;
  background: #F3F5F8;
}

.app-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #F3F5F8;
}

.app-viewport iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #F3F5F8;
}