:root{
  --bg:#eef1f7;--panel:#ffffff;--panel2:#f6f8fc;--text:#1b2233;--muted:#6d7790;--line:#e1e6f0;
  --accent:#6c5ce7;--accent2:#00b4d8;--err:#d63c3c;--code:#fbfcff;--shadow:0 30px 80px -20px rgba(40,50,100,.28),0 8px 24px -8px rgba(40,50,100,.15);
  --hover:#eef1fa;--ok:#18a05e;
}
:root[data-theme="dark"]{
  --bg:#0c0f1a;--panel:#151a29;--panel2:#10141f;--text:#e8ecf7;--muted:#8a95b2;--line:#252c42;
  --accent:#8b7bff;--accent2:#22d3ee;--err:#ff7b72;--code:#111624;--shadow:0 30px 90px -20px rgba(0,0,0,.7),0 8px 24px -8px rgba(0,0,0,.5);
  --hover:#1d2438;--ok:#2fd27f;
}
*,*:before,*:after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  color:var(--text);font:14.5px/1.5 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:
    radial-gradient(900px 500px at 12% 8%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),
    radial-gradient(800px 500px at 90% 92%,color-mix(in srgb,var(--accent2) 20%,transparent),transparent 60%),
    var(--bg);
  display:flex;align-items:center;justify-content:center;padding:16px;
  transition:background .3s;
}
/* ---------- карточка приложения: ~74% ширины экрана ---------- */
.app{
  position:relative;
  width:min(100%,max(74vw,1000px));
  height:min(88vh,940px);min-height:520px;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;
}
@media (max-width:900px){body{padding:0}.app{width:100%;height:100vh;border-radius:0;border:0}}