.vh-mobile-header,
.vh-mobile-nav,
.vh-mobile-info,
.vh-mobile-top-actions,
.vh-mobile-reliability-card,
.vh-mobile-combined-chart {
  display: none;
}

.vh-cloud-panel {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(31, 37, 45, 0.96), rgba(17, 20, 25, 0.98));
  box-shadow: var(--inset);
}

.vh-cloud-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.vh-cloud-head h2,
.vh-mobile-info h2 {
  margin: 2px 0 0;
  font-size: 1.18rem;
}

.vh-cloud-state {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  background: #15191f;
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vh-cloud-state.is-signed-in {
  border-color: rgba(66, 211, 107, 0.48);
  color: #aef7c0;
  background: rgba(66, 211, 107, 0.08);
}

.vh-cloud-copy,
.vh-cloud-summary,
.vh-cloud-privacy,
.vh-mobile-info p,
.vh-mobile-info li {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.vh-cloud-copy {
  margin: 8px 0 0;
}

.vh-cloud-signed-out,
.vh-cloud-signed-in {
  margin-top: 13px;
}

.vh-cloud-sign-in,
.vh-cloud-actions button,
.vh-mobile-info button {
  min-height: 39px;
  padding: 0 13px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  color: #edf2f6;
  background: #171b21;
  font-size: 0.69rem;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.vh-cloud-sign-in {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  border-color: rgba(66, 211, 107, 0.55);
  color: #b9ffc8;
  background: rgba(66, 211, 107, 0.08);
}

.vh-cloud-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.vh-cloud-actions .is-primary {
  border-color: rgba(66, 211, 107, 0.55);
  color: #b9ffc8;
  background: rgba(66, 211, 107, 0.08);
}

.vh-cloud-actions .is-danger {
  border-color: rgba(255, 92, 105, 0.42);
  color: #ffb7bf;
}

.vh-cloud-actions button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.vh-cloud-summary {
  margin: 9px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(9, 12, 16, 0.54);
}

.vh-cloud-privacy {
  margin: 10px 0 0;
  color: #b9c5ce;
}

.vh-cloud-message {
  min-height: 20px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.vh-cloud-message.is-success {
  color: #aef7c0;
}

.vh-cloud-message.is-error {
  color: #ffb7bf;
}

.vh-cloud-message.is-working {
  color: #f8d48d;
}

@media (max-width: 760px) {
  html:has(body.vh-mobile-app),
  body.vh-mobile-app {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.vh-mobile-app {
    background: #0b0e12;
  }

  body.vh-mobile-app .virtual-shell {
    display: grid;
    grid-template-rows: 46px 38px minmax(0, 1fr) auto;
    gap: 6px;
    width: 100%;
    max-width: none;
    height: var(--sol-mobile-viewport-height, 100svh);
    margin: 0;
    padding: max(6px, env(safe-area-inset-top)) 6px 0;
    overflow: hidden;
  }

  body.vh-mobile-app .virtual-intro,
  body.vh-mobile-app .explanation-panel,
  body.vh-mobile-app .related-tools,
  body.vh-mobile-app .tool-feedback,
  body.vh-mobile-app .translation-seed-bank,
  body.vh-mobile-app .site-footer {
    display: none !important;
  }

  body.vh-mobile-app .site-nav {
    grid-row: 1;
    position: relative !important;
    inset: auto !important;
    z-index: 240;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 46px;
    margin: 0 !important;
    padding: 7px 9px !important;
    border-radius: 13px !important;
    gap: 7px !important;
    background: #1b222d !important;
  }

  body.vh-mobile-app .site-nav .site-brand {
    flex: 0 0 auto !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  body.vh-mobile-app .site-nav .site-links {
    display: none !important;
  }

  .vh-mobile-top-actions {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .vh-mobile-top-info,
  .vh-mobile-account {
    display: inline-grid;
    place-items: center;
    height: 32px;
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    color: #c5d0d8;
    background: #171b21;
    font-size: 9px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
  }

  .vh-mobile-top-info {
    min-width: 44px;
  }

  .vh-mobile-account {
    min-width: 62px;
  }

  .vh-mobile-top-info.is-active {
    border-color: rgba(255, 48, 64, 0.48);
    color: #ffd7da;
  }

  .vh-mobile-account {
    grid-auto-flow: column;
    gap: 5px;
  }

  .vh-mobile-account > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #82909c;
    box-shadow: 0 0 0 3px rgba(130, 144, 156, 0.13);
  }

  .vh-mobile-account.is-signed-in {
    border-color: rgba(66, 211, 107, 0.48);
    color: #aef7c0;
  }

  .vh-mobile-account.is-signed-in > span {
    background: #42d36b;
  }

  .vh-mobile-header {
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    min-height: 0;
    height: 38px;
    margin: 0;
    padding: 5px 9px;
    border: 1px solid var(--line-soft);
    border-radius: 11px;
    background: linear-gradient(180deg, #1b2129, #12171d);
    box-shadow: var(--inset);
  }

  .vh-mobile-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
  }

  .vh-mobile-brand img {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }

  .vh-mobile-brand-copy {
    display: grid;
    min-width: 0;
  }

  .vh-mobile-brand-copy strong,
  .vh-mobile-brand-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vh-mobile-brand-copy strong {
    color: #f4f7fa;
    font-size: 11px;
  }

  .vh-mobile-brand-copy span {
    margin-top: 1px;
    color: var(--muted);
    font-size: 8px;
  }

  body.vh-mobile-app #setupPanel,
  body.vh-mobile-app #comparisonShell,
  body.vh-mobile-app #vhCloudPanel,
  body.vh-mobile-app #vhMobileInfo {
    grid-row: 3;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  body.vh-mobile-app #setupPanel::-webkit-scrollbar,
  body.vh-mobile-app #comparisonShell::-webkit-scrollbar,
  body.vh-mobile-app #vhCloudPanel::-webkit-scrollbar,
  body.vh-mobile-app #vhMobileInfo::-webkit-scrollbar,
  body.vh-mobile-app .information-area::-webkit-scrollbar {
    display: none;
  }

  body.vh-mobile-app #setupPanel,
  body.vh-mobile-app #comparisonShell:not([hidden]),
  body.vh-mobile-app #vhCloudPanel,
  body.vh-mobile-app #vhMobileInfo {
    display: none;
  }

  body.vh-mobile-app[data-vh-mobile-view="setup"] #setupPanel {
    display: block;
  }

  body.vh-mobile-app[data-vh-mobile-view="listen"] #comparisonShell:not([hidden]) {
    display: block;
  }

  body.vh-mobile-app[data-vh-mobile-view="saved"] #vhCloudPanel {
    display: block;
  }

  body.vh-mobile-app[data-vh-mobile-view="info"]:not(.vh-has-comparison) #vhMobileInfo {
    display: block;
  }

  body.vh-mobile-app[data-vh-mobile-view="info"].vh-has-comparison #comparisonShell:not([hidden]) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  body.vh-mobile-app #setupPanel {
    margin-right: 0;
    margin-left: 0;
    padding: 10px;
    border-radius: 13px;
  }

  body.vh-mobile-app #setupPanel .section-heading {
    align-items: flex-start;
  }

  body.vh-mobile-app #setupPanel .section-heading h2 {
    font-size: 1rem;
  }

  body.vh-mobile-app #setupPanel .setup-summary {
    display: none;
  }

  body.vh-mobile-app #setupPanel .setup-card {
    padding: 9px 10px;
  }

  body.vh-mobile-app #setupPanel .card-help {
    display: none;
  }

  body.vh-mobile-app #setupPanel .target-confidence {
    margin-top: 5px;
  }

  body.vh-mobile-app .brand-grid,
  body.vh-mobile-app .model-results {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  body.vh-mobile-app .brand-grid::-webkit-scrollbar,
  body.vh-mobile-app .model-results::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .vh-mobile-combined-chart {
    display: block;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 11px;
    background: #0c1015;
  }

  .vh-mobile-reliability-card {
    display: block;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 11px;
    background: #0c1015;
  }

  .vh-mobile-reliability-card .reliability-summary {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .vh-mobile-reliability-card .reliability-score {
    padding: 12px;
  }

  .vh-mobile-reliability-card .reliability-score strong {
    font-size: 1.35rem;
  }

  .vh-mobile-reliability-card .reliability-score.is-limited strong {
    font-size: 1.05rem;
  }

  .vh-mobile-chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  .vh-mobile-chart-head .step-label {
    margin-bottom: 3px;
  }

  .vh-mobile-chart-head h3 {
    margin: 0;
    color: #eef2f5;
    font-size: 0.83rem;
  }

  .vh-mobile-chart-unit {
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 900;
  }

  .vh-mobile-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    margin-top: 7px;
    color: #aeb8c0;
    font-size: 0.54rem;
    font-weight: 850;
  }

  .vh-mobile-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .vh-mobile-chart-legend i {
    width: 13px;
    height: 3px;
    border-radius: 999px;
  }

  .vh-mobile-chart-legend .is-source {
    background: #ff3040;
  }

  .vh-mobile-chart-legend .is-target {
    background: #ff9e45;
  }

  .vh-mobile-chart-legend .is-change {
    background: #42d36b;
  }

  .vh-mobile-chart-canvas {
    height: clamp(190px, 27vh, 245px);
    margin-top: 7px;
    overflow: hidden;
    border: 1px solid rgba(130, 142, 157, 0.18);
    border-radius: 8px;
  }

  .vh-mobile-chart-canvas canvas {
    display: block;
    width: 100%;
    height: 100%;
  }

  body.vh-mobile-app #comparisonShell:not([hidden]) {
    position: relative;
    inset: auto;
    isolation: isolate;
    contain: paint;
    width: auto;
    height: auto;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #101319;
  }

  body.vh-mobile-app #comparisonShell::before {
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
  }

  body.vh-mobile-app #comparisonShell .comparison-topbar {
    position: static;
    z-index: auto;
    margin: 0;
    background: #101319;
    backdrop-filter: none;
  }

  body.vh-mobile-app #responseChangeTab,
  body.vh-mobile-app #responseChangePanel,
  body.vh-mobile-app #dataReliabilityTab,
  body.vh-mobile-app #dataReliabilityPanel {
    display: none !important;
  }

  body.vh-mobile-app[data-vh-mobile-view="listen"] #comparisonShell .information-tabs,
  body.vh-mobile-app[data-vh-mobile-view="listen"] #comparisonShell .information-area {
    display: none;
  }

  body.vh-mobile-app[data-vh-mobile-view="info"] #comparisonShell .comparison-topbar,
  body.vh-mobile-app[data-vh-mobile-view="info"] #comparisonShell .quick-compare-bar,
  body.vh-mobile-app[data-vh-mobile-view="info"] #comparisonShell .mode-switch,
  body.vh-mobile-app[data-vh-mobile-view="info"] #comparisonShell .now-listening,
  body.vh-mobile-app[data-vh-mobile-view="info"] #comparisonShell .transport-panel,
  body.vh-mobile-app[data-vh-mobile-view="info"] #comparisonShell .listening-message,
  body.vh-mobile-app[data-vh-mobile-view="info"] #comparisonShell .vh-mobile-reliability-card,
  body.vh-mobile-app[data-vh-mobile-view="info"] #comparisonShell .vh-mobile-combined-chart {
    display: none;
  }

  body.vh-mobile-app[data-vh-mobile-view="info"] #comparisonShell .information-tabs {
    display: flex;
    margin: 0;
  }

  body.vh-mobile-app[data-vh-mobile-view="info"] #comparisonShell .information-area {
    min-height: 0;
    margin-top: 7px;
    overflow-y: auto;
  }

  .vh-cloud-panel {
    margin-top: 0;
    padding: 12px;
    border-radius: 13px;
  }

  .vh-cloud-head h2 {
    font-size: 1rem;
  }

  .vh-cloud-copy {
    font-size: 0.75rem;
  }

  .vh-cloud-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .vh-cloud-actions button {
    min-height: 42px;
    padding: 0 8px;
    font-size: 0.62rem;
  }

  .vh-mobile-info {
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: linear-gradient(180deg, #1e242c, #111419);
  }

  .vh-mobile-info section + section {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--line-soft);
  }

  .vh-mobile-info h3 {
    margin: 0;
    color: #eef2f5;
    font-size: 0.9rem;
  }

  .vh-mobile-info p {
    margin: 6px 0 0;
  }

  .vh-mobile-info ul {
    margin: 7px 0 0;
    padding-left: 18px;
  }

  .vh-mobile-info button {
    margin-top: 10px;
  }

  .vh-mobile-nav {
    grid-row: 4;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    min-height: 58px;
    padding: 6px 7px max(6px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line-soft);
    background: #0e1116;
  }

  .vh-mobile-nav button {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 42px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #85919b;
    background: transparent;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.035em;
    cursor: pointer;
  }

  .vh-mobile-nav button.is-active {
    border-color: rgba(66, 211, 107, 0.44);
    color: #b9ffc8;
    background: rgba(66, 211, 107, 0.08);
  }

  .vh-mobile-nav button:disabled {
    opacity: 0.34;
    cursor: not-allowed;
  }

  body.vh-mobile-app .model-picker,
  body.vh-mobile-app .compact-dialog,
  body.vh-mobile-app .technical-document {
    z-index: 5000;
  }

  body.vh-mobile-app .model-picker:not([hidden]),
  body.vh-mobile-app .compact-dialog:not([hidden]),
  body.vh-mobile-app .technical-document:not([hidden]) {
    display: grid;
  }
}

@media (max-width: 390px), (max-height: 740px) and (max-width: 760px) {
  body.vh-mobile-app #setupPanel,
  body.vh-mobile-app #comparisonShell,
  body.vh-mobile-app #vhCloudPanel,
  body.vh-mobile-app #vhMobileInfo {
    margin: 0;
  }

  .vh-mobile-nav {
    min-height: 52px;
    padding-top: 4px;
  }

  .vh-mobile-nav button {
    min-height: 38px;
    font-size: 0.56rem;
  }
}