:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #080b0d; color: #f6f2df; }
iframe { display: block; width: 100%; border: 0; background: #080b0d; }
.screen-stage { position: relative; width: 100%; height: 100%; overflow: hidden; background: #080b0d; }
.screen-frame {
  position: absolute;
  z-index: 0;
  inset: 0;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateY(22px) scale(.992);
  filter: brightness(.82) saturate(.9);
  transition:
    opacity 360ms cubic-bezier(.22, 1, .36, 1),
    transform 520ms cubic-bezier(.22, 1, .36, 1),
    filter 420ms ease;
  will-change: opacity, transform, filter;
}
.screen-frame.is-active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  filter: none;
}
.screen-frame.is-leaving {
  z-index: 1;
  opacity: 0;
  transform: translateY(-14px) scale(1.006);
  filter: brightness(.72) saturate(.85);
}
.shell-status { position: fixed; right: 20px; bottom: 20px; padding: 10px 14px; border: 2px solid #ef476f; background: #080b0d; font-weight: 900; letter-spacing: .12em; }
.shell-status.online { display: none; }
.shell-version {
  position: fixed;
  z-index: 20;
  padding: 4px 7px;
  border-radius: 4px;
  background: rgba(15, 17, 18, .28);
  color: rgba(255, 255, 255, .5);
  font: 650 10px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  letter-spacing: .06em;
  pointer-events: none;
}
.screen-version { left: 50%; bottom: 10px; transform: translateX(-50%); }
.controller-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  transition: background-color 160ms ease;
}
.controller-shell nav {
  display: flex;
  justify-content: center;
  gap: 6px;
  overflow-x: auto;
  min-height: 106px;
  padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  border-top: 2px solid #343a3d;
  background: #0d1012;
  scrollbar-width: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.controller-shell nav::-webkit-scrollbar { display: none; }
.controller-shell nav button {
  position: relative;
  display: grid;
  flex: 0 0 88px;
  grid-template-rows: 66px auto;
  place-items: center;
  gap: 3px;
  min-height: 90px;
  padding: 4px 5px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #aeb5b8;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}
.controller-shell nav button.active { background: #252a2e; color: #f1f3f4; }
.controller-shell nav img {
  width: 64px;
  height: 64px;
  border: 2px solid #4b5256;
  border-radius: 16px;
  background: #202529;
  object-fit: cover;
  pointer-events: none;
}
.controller-shell nav button.active img { border-color: #858d92; }
.controller-shell nav span { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.controller-shell iframe { height: 100%; }

.controller-shell[data-appearance="light"] { background: #f3f4f2; color-scheme: light; }
.controller-shell[data-appearance="light"] iframe { background: #f3f4f2; }
.controller-shell[data-appearance="light"] nav {
  border-color: #d5d8d6;
  background: #e9ebe9;
}
.controller-shell[data-appearance="light"] nav button { color: #62686b; }
.controller-shell[data-appearance="light"] nav button.active { background: #d9dcda; color: #171a1c; }
.controller-shell[data-appearance="light"] nav img { border-color: #b9bfbc; background: #fff; }
.controller-shell[data-appearance="light"] nav button.active img { border-color: #7c8581; }

@media (prefers-reduced-motion: reduce) {
  .screen-frame { transition: opacity 120ms linear; transform: none; filter: none; }
  .screen-frame.is-active, .screen-frame.is-leaving { transform: none; filter: none; }
}