/* Оболочка прототипа: панель навигации + «телефон» 390×844. Стили экранов — внутри screens/*.dc.html */
:root { --sh-bg: #0A0912; --sh-tx: #F3F2F8; --sh-mu: #A9A6BA; --sh-line: #2A2640; --sh-ac: #DAFA68; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--sh-bg); color: var(--sh-tx); font-family: 'Manrope', system-ui, sans-serif; }
.shell { min-height: 100%; display: flex; gap: 32px; align-items: flex-start; justify-content: center; padding: 32px 16px; }
.panel { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 32px; }
.panel-head { display: flex; flex-direction: column; gap: 4px; }
.brand { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 26px; letter-spacing: -0.03em; }
.tag { font-size: 12px; color: var(--sh-mu); }
.group { display: flex; flex-direction: column; gap: 4px; }
.label { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sh-mu); padding-bottom: 6px; }
.group a { color: var(--sh-tx); text-decoration: none; font-size: 14px; padding: 8px 10px; border-radius: 10px; min-height: 36px; display: flex; align-items: center; }
.group a:hover { background: #15131F; }
.group a.on { background: #201D2E; box-shadow: inset 3px 0 0 var(--sh-ac); }
.seg2 { display: flex; padding: 4px; border-radius: 22px; background: #201D2E; }
.seg2 button { flex: 1; min-height: 36px; border: 0; border-radius: 18px; background: none; color: var(--sh-mu); font: 600 14px 'Manrope', sans-serif; cursor: pointer; }
.seg2 button[aria-pressed="true"] { background: var(--sh-tx); color: var(--sh-bg); }
.note { font-size: 12px; line-height: 18px; color: var(--sh-mu); margin: 0; }
.stage-wrap { flex-shrink: 0; }
.phone { position: relative; width: 390px; height: 844px; border-radius: 40px; overflow: hidden; box-shadow: 0 0 0 10px #1B1828, 0 30px 80px rgba(0,0,0,0.6); background: #0A0912; }
.screen-host { width: 390px; height: 844px; }
@media (max-width: 760px) {
  .shell { padding: 0; display: block; }
  .panel { display: none; }
  .phone { width: 100vw; height: 100dvh; border-radius: 0; box-shadow: none; }
  .screen-host { transform-origin: 0 0; }
}

@media(max-width:760px){
 .stage-wrap,.screen-host{width:100%;height:100dvh}
 .screen-host > [data-theme]{width:100%!important;height:100dvh!important}
 .screen-host .seg{font-size:12px;min-height:44px}
 .screen-host .h1{overflow-wrap:anywhere}
}