.app{
  width:min(100%,680px);margin:auto;height:100%;
  padding:0 16px 12px;
  display:flex;flex-direction:column;
  position:relative;z-index:1;
}
.topbar{
  flex:0 0 auto;position:relative;z-index:50;
  width:calc(100% + 32px);margin:0 -16px;
  padding:18px 16px 4px;
  background:transparent;
  border-radius:0;
  box-shadow:none;
}
.topbar::before{
  content:'';
  position:absolute;inset:0 0 auto 0;height:160px;z-index:-1;
  background:radial-gradient(circle at 50% 0%,rgba(100,80,220,.08),transparent 35%);
  pointer-events:none;
}
.topbar-inner{
  width:100%;max-width:680px;margin:auto;min-height:48px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
}
.topbar-inner[dir="rtl"] .header-ctrl:first-child,
html[dir="rtl"] .topbar-inner .header-ctrl:first-child{justify-self:start}
.topbar-inner[dir="rtl"] .header-ctrl:last-child,
html[dir="rtl"] .topbar-inner .header-ctrl:last-child{justify-self:end}
.topbar-inner .header-ctrl:first-child{justify-self:start}
.topbar-inner .header-ctrl:last-child{justify-self:end}
.lang-switch{justify-self:center}
.nav-side{display:none}
section{width:100%;flex:1;min-height:0;display:flex;flex-direction:column}
.page{overflow-y:auto}
.hidden{display:none!important}
.page h1{
  text-align:center;margin:0 0 8px;
  font-size:clamp(16px,5vw,24px);font-weight:700;
  color:var(--purple);white-space:nowrap;
}
.page .sub{
  text-align:center;color:var(--muted);
  font-size:clamp(7.5px,2.4vw,12px);line-height:1.9;
  margin:0 auto 16px;white-space:nowrap;
}