.vk-entry { min-height: 100dvh; padding: max(24px, env(safe-area-inset-top)) 28px max(20px, env(safe-area-inset-bottom)); background: #f7f4f0; }
.vk-entry-shell { width: min(100%, 1000px); margin: auto; }
.vk-entry-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0 30px; }
.vk-entry-header img { width: 130px; height: 40px; object-fit: contain; }
.vk-entry-badge { display: inline-flex; align-items: center; gap: 7px; color: #52708b; font-size: 12px; font-weight: 750; }
.vk-entry-badge i { font-size: 20px; }
.vk-entry-main { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: clamp(24px, 5vw, 70px); min-height: 440px; padding: 22px 0 38px; }
.vk-entry-eyebrow { display: block; margin-bottom: 18px; color: #b23c30; font-size: 11px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.vk-entry h1 { max-width: 550px; margin: 0 0 20px; font-size: clamp(30px, 4.2vw, 45px); font-weight: 850; letter-spacing: -.045em; line-height: 1.13; text-wrap: balance; }
.vk-entry-description { margin: 0 0 14px; color: #68625d; font-size: 15px; line-height: 1.7; }
.vk-entry-hint { margin: 0; color: #25221f; font-size: 14px; font-weight: 650; line-height: 1.65; }
.vk-entry-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.vk-entry-primary, .vk-entry-secondary { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 20px; border: 1px solid transparent; border-radius: 12px; cursor: pointer; font-size: 12px; font-weight: 800; line-height: 1.4; }
.vk-entry-primary { background: #ff4b38; color: #fff; }
.vk-entry-primary:hover { background: #e83f2d; }
.vk-entry-primary i { font-size: 18px; }
.vk-entry-secondary { border-color: #ded6ce; background: transparent; color: #302c28; }
.vk-entry-secondary:hover { background: #eee8e1; }
.vk-entry-primary:disabled { opacity: .6; cursor: wait; }
.vk-entry-preview { width: 100%; display: grid; padding: 20px; border: 1px solid #e8dfd5; border-radius: 24px; background: #fffdfa; color: #25221f; cursor: pointer; text-align: left; transform: rotate(2deg); transition: transform .2s; }
.vk-entry-preview:hover { transform: rotate(0deg); }
.vk-preview-header, .vk-preview-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; }
.vk-preview-label { padding: 6px 9px; border-radius: 7px; background: #f0ebe5; color: #81776d; font-size: 9px; }
.vk-preview-pizza { width: 100%; height: 220px; object-fit: contain; margin: 12px auto 8px; }
.vk-preview-dish { display: grid; gap: 5px; }
.vk-preview-dish strong { font-size: 24px; letter-spacing: -.04em; }
.vk-preview-dish > span { color: #82776d; font-size: 11px; }
.vk-preview-bottom { margin-top: 18px; padding-top: 15px; border-top: 1px solid #eee7df; color: #82776d; font-size: 10px; }
.vk-preview-bottom > span { display: flex; align-items: center; gap: 6px; }
.vk-preview-bottom > i { color: #ff4b38; font-size: 22px; }
.vk-entry-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; border-top: 1px solid #e4dcd3; padding: 26px 0; }
.vk-entry-steps > div { display: flex; gap: 12px; align-items: flex-start; }
.vk-entry-steps > div > span { color: #b6a799; font-size: 12px; font-weight: 800; line-height: 1.8; }
.vk-entry-steps p { display: grid; gap: 5px; margin: 0; }
.vk-entry-steps strong { font-size: 12px; font-weight: 800; }
.vk-entry-steps small { color: #83796f; font-size: 10px; line-height: 1.5; }
.vk-entry-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 18px 0 0; border-top: 1px solid #e4dcd3; color: #9b8f84; font-size: 9px; line-height: 1.6; }
.vk-install-button, .vk-entry-back, .vk-connection-info { display: none; }
.vk-connection-info { margin-top: 24px; padding: 20px; border: 1px solid #e4dcd3; border-radius: 14px; background: #fffdfa; }
.vk-connection-info h2 { margin: 0 0 14px; font-size: 16px; }
.vk-connection-info ol { display: grid; gap: 12px; margin: 0; padding-left: 19px; font-size: 12px; line-height: 1.6; }
.vk-connection-info > p { margin: 16px 0 0; color: #82776d; font-size: 11px; line-height: 1.6; }
.vk-install-status { margin: 18px 0 0; color: #68625d; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.vk-install-status:empty { display: none; }
.vk-install-status.is-error { color: #b23c30; }
.vk-install-fallback { display: inline-block; margin-top: 12px; color: #b23c30; font-size: 12px; font-weight: 800; text-decoration: underline; }
.vk-entry[data-mode="connect"] .vk-connection-info { display: block; }
.vk-entry[data-mode="connect"] .vk-entry-back, .vk-entry[data-mode="install"] .vk-install-button { display: inline-flex; }
.vk-entry:is([data-mode="connect"], [data-mode="install"], [data-mode="unconnected"], [data-mode="invalid-launch"]) [data-vk-demo],
.vk-entry:is([data-mode="connect"], [data-mode="install"], [data-mode="unconnected"], [data-mode="invalid-launch"]) .vk-entry-steps,
.vk-entry[data-mode="connect"] [data-vk-connect], .vk-entry[data-mode="install"] [data-vk-connect],
.vk-entry[data-mode="invalid-launch"] [data-vk-connect] { display: none; }
.vk-entry:is([data-mode="connect"], [data-mode="install"], [data-mode="unconnected"], [data-mode="invalid-launch"]) .vk-entry-main { grid-template-columns: 1fr; min-height: 440px; max-width: 660px; }
.vk-entry:is([data-mode="unconnected"], [data-mode="invalid-launch"]) .vk-entry-eyebrow { display: none; }
.demo-home-button { margin-left: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; }
@media (max-width: 640px) {
  .vk-entry { padding: max(16px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); }
  .vk-entry-header { padding: 5px 0 28px; }
  .vk-entry-header img { width: 112px; height: 34px; }
  .vk-entry-badge { gap: 5px; font-size: 10px; }
  .vk-entry-main { grid-template-columns: 1fr; gap: 32px; min-height: 0; padding-top: 8px; }
  .vk-entry-eyebrow { margin-bottom: 16px; font-size: 9px; }
  .vk-entry h1 { max-width: 430px; font-size: 32px; }
  .vk-entry-description { font-size: 13px; }
  .vk-entry-hint { font-size: 12px; }
  .vk-entry-actions { display: grid; margin-top: 24px; }
  .vk-entry-primary, .vk-entry-secondary { min-height: 48px; font-size: 12px; }
  .vk-entry-preview { max-width: 400px; margin: 0 auto; transform: none; }
  .vk-preview-pizza { height: 180px; }
  .vk-entry-steps { grid-template-columns: 1fr; gap: 18px; }
  .vk-entry-steps strong { font-size: 12px; }
  .vk-entry-steps small { font-size: 11px; }
  .demo-home-button { margin-left: 0; flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) { .vk-entry-preview { transition: none; transform: none; } }