/* Desktop workspace, optional phone preview, and an unframed real-phone view. */
:root {
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --shell-background: #f5f5f8;
  --shell-surface: #ffffff;
  --shell-text: #3444aa;
  --shell-line: #e5e7ef;
  --toolbar-height: 56px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; width: 100%; height: 100%; min-width: 0; }
body { overflow: hidden; background: var(--shell-background); color: var(--shell-text); }
.view-toolbar {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end;
  height: var(--toolbar-height); padding: 6px max(18px, env(safe-area-inset-right)) 6px 18px;
  border-bottom: 1px solid var(--shell-line); background: var(--shell-background);
}
.view-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 9px 15px; border: 1px solid var(--shell-line);
  border-radius: 999px; background: var(--shell-surface); color: var(--shell-text);
  font: 600 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 1px 3px rgb(22 29 62 / 4%); cursor: pointer; touch-action: manipulation;
  transition: border-color 140ms ease, background 140ms ease;
}
.view-toggle:hover { border-color: #a6ade0; background: color-mix(in srgb, var(--shell-surface) 90%, #596ae9); }
.view-toggle:focus-visible { outline: 3px solid #596ae9; outline-offset: 3px; }
.view-icon { width: 19px; height: 19px; flex: 0 0 19px; }
.phone-stage {
  position: relative; height: calc(100vh - var(--toolbar-height));
  height: calc(100dvh - var(--toolbar-height)); min-height: 0;
}
.phone-device { width: 100%; height: 100%; }
.phone-screen { display: block; width: 100%; height: 100%; border: 0; background: var(--shell-background); }
.phone-home-indicator { display: none; }
.shell-status {
  position: absolute; z-index: 1; inset: 0; display: grid; place-items: center;
  padding: 24px; margin: 0; text-align: center; font-size: 14px; line-height: 1.7;
  background: var(--shell-background);
}
body[data-layout="phone"] {
  background: radial-gradient(ellipse at 50% 28%, #eef0ff 0, #e6e8f2 52%, #dce0ee 100%);
}
body[data-layout="phone"] .phone-stage { display: grid; place-items: center; padding: 16px; }
body[data-layout="phone"] .phone-device {
  position: relative; width: min(410px, calc(100vw - 32px));
  height: min(876px, calc(100vh - var(--toolbar-height) - 32px));
  height: min(876px, calc(100dvh - var(--toolbar-height) - 32px)); min-height: 180px;
  padding: 10px 10px 22px; border-radius: 46px; background: #10131c;
  border: 1px solid #333949;
  box-shadow: 0 36px 84px rgb(17 25 54 / 24%), 0 10px 25px rgb(17 25 54 / 14%), inset 0 0 0 2px #242938;
}
body[data-layout="phone"] .phone-device::before,
body[data-layout="phone"] .phone-device::after {
  content: ""; position: absolute; width: 3px; border-radius: 3px; background: #333949;
}
body[data-layout="phone"] .phone-device::before { height: 60px; left: -3px; top: 116px; }
body[data-layout="phone"] .phone-device::after { height: 75px; right: -3px; top: 145px; }
body[data-layout="phone"] .phone-screen { border-radius: 35px; }
body[data-layout="phone"] .phone-home-indicator {
  display: block; position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%);
  width: 100px; height: 4px; border-radius: 4px; background: #818798; pointer-events: none;
}
body[data-layout="mobile"] { --toolbar-height: 0px; }
body[data-layout="mobile"] .phone-stage {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen-reader-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:root[data-theme="dark"] {
  color-scheme: dark; --shell-background: #10121c; --shell-surface: #191d2c;
  --shell-text: #bdc6ff; --shell-line: #30374c;
}
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --shell-background: #10121c; --shell-surface: #191d2c;
    --shell-text: #bdc6ff; --shell-line: #30374c;
  }
  body[data-layout="phone"] { background: radial-gradient(ellipse at 50% 28%, #232941 0, #161b2a 52%, #10131c 100%); }
}
:root[data-theme="dark"] body[data-layout="phone"] { background: radial-gradient(ellipse at 50% 28%, #232941 0, #161b2a 52%, #10131c 100%); }
:root[data-theme="light"] body[data-layout="phone"] { background: radial-gradient(ellipse at 50% 28%, #eef0ff 0, #e6e8f2 52%, #dce0ee 100%); }
@media (max-width: 450px), (max-height: 500px) {
  body[data-layout="phone"] .phone-stage { padding: 8px; }
  body[data-layout="phone"] .phone-device {
    width: min(410px, calc(100vw - 16px));
    height: min(876px, calc(100vh - var(--toolbar-height) - 16px));
    height: min(876px, calc(100dvh - var(--toolbar-height) - 16px));
    padding: 7px 7px 18px; border-radius: 34px;
  }
  body[data-layout="phone"] .phone-screen { border-radius: 26px; }
  body[data-layout="phone"] .phone-home-indicator { bottom: 7px; }
}
@media (prefers-reduced-motion: reduce) { .view-toggle { transition: none; } }