.phone-app {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 9 / 19.3;
  overflow: hidden;
  border-radius: 10.5% / 4.9%;
  background: #f4f7fd;
  color: #10263d;
  font-family: Arial, sans-serif;
  text-align: left;
  isolation: isolate;
}
.phone-app button {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.phone-app button:focus-visible { outline: 2px solid #f2aa45; outline-offset: -3px; }
.phone-app button:active { transform: scale(.96); }
.phone-app svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.phone-app-head { padding: 9cqw 5cqw 6cqw; border-radius: 0 0 9cqw 9cqw; color: #eef8ff; background: linear-gradient(180deg, #005cae, #0085e9); }
.phone-status { display: none; align-items: center; justify-content: space-between; font-size: 3.4cqw; line-height: 1; padding-inline: 2cqw; }
.phone-status-icons { display: flex; gap: 1.5cqw; }
.phone-status-icons svg { width: 3cqw; height: 3cqw; }
.phone-toolbar { display: flex; align-items: center; justify-content: space-between; margin-top: 0; }
.phone-toolbar button { width: 12.5cqw; height: 12.5cqw; padding: 3.5cqw; background: #78bcff20; border-radius: 4cqw; color: white; }
.phone-toolbar button:hover, .phone-toolbar button[aria-pressed="true"] { background: #78bcff50; }
.phone-app .phone-logo { display: block; width: 26cqw; height: 26cqw; margin: 2.7cqw auto 0; border-radius: 0; transform: scale(1.42); }
.phone-greeting { margin-top: 2.5cqw; font-size: 5.6cqw; font-weight: 650; text-align: center; }
.phone-app .phone-search { display: flex; align-items: center; gap: 3cqw; width: 100%; height: 18cqw; margin-top: 4.7cqw; padding: 2cqw 4cqw 2cqw 2.5cqw; border: 1px solid #d1eaff35; border-radius: 7cqw; background: #5ba5e61c; font-size: 3.9cqw; white-space: nowrap; }
.phone-search-icon { display: grid; place-items: center; width: 13cqw; height: 13cqw; padding: 3.5cqw; background: #1388ed; border-radius: 4.2cqw; }
.phone-search .phone-mic { width: 4.7cqw; height: 4.7cqw; margin-left: auto; flex: none; }
.phone-app .phone-search:hover, .phone-app .phone-search[aria-pressed="true"] { background: #72baff40; box-shadow: inset 0 0 0 1px #a5d7ff65; }
.phone-recent { display: flex; gap: 2.5cqw; margin-top: 4cqw; overflow: hidden; }
.phone-app .phone-recent button { flex: none; padding: 3cqw 3.3cqw; border: 1px solid #d1eaff20; border-radius: 8cqw; background: #79c9ff27; font-size: 3.05cqw; white-space: nowrap; }
.phone-app .phone-recent button:hover, .phone-app .phone-recent button[aria-pressed="true"] { background: #a3d7ff55; }
.phone-app-body { padding: 7cqw 4.2cqw 0; }
.phone-access-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5cqw; }
.phone-access-heading strong { font-size: 4.9cqw; font-weight: 760; }
.phone-app .phone-customize { padding: 1cqw; border-radius: 2cqw; font-size: 3.2cqw; font-weight: 600; color: #147dd1; background: transparent; }
.phone-app .phone-customize:hover, .phone-app .phone-customize[aria-pressed="true"] { background: #dceeff; }
.phone-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.6cqw 3cqw; }
.phone-app .phone-card { display: flex; align-items: center; gap: 2.8cqw; min-width: 0; height: 26.5cqw; padding: 3.4cqw 2.8cqw; text-align: left; border-radius: 5.8cqw; background: white; box-shadow: 0 2.5cqw 3.6cqw #172a3a25, inset 0 0 0 1px #ffffff; }
.phone-app .phone-card:hover { transform: translateY(-1.2cqw); background: #f6fbff; box-shadow: 0 3.4cqw 5cqw #172a3a30, inset 0 0 0 1px #b1dbff; }
.phone-app .phone-card[aria-pressed="true"] { background: #e9f5ff; box-shadow: 0 1.5cqw 3cqw #172a3a20, inset 0 0 0 1.5px #2d91df; }
.phone-app .phone-card:active { transform: translateY(.4cqw) scale(.96); }
.phone-card-icon { display: grid; place-items: center; flex: none; width: 11.3cqw; height: 11.7cqw; padding: 3cqw; border-radius: 3.5cqw; color: #1880d7; background: #e5f1fb; }
.phone-card-icon--green { color: #16a36b; background: #e5f6ed; }
.phone-card-icon--purple { color: #7c55d8; background: #efebfb; }
.phone-card-icon--orange { color: #e99214; background: #fff3e1; }
.phone-card-copy { min-width: 0; }
.phone-card-copy b { display: block; font-size: 3.45cqw; font-weight: 700; white-space: nowrap; }
.phone-card-copy small { display: -webkit-box; overflow: hidden; margin-top: 1.8cqw; font-size: 2.6cqw; line-height: 1.5; color: #728094; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.phone-homebar { position: absolute; left: 37%; bottom: 2.1cqw; width: 26%; height: .85cqw; border-radius: 2cqw; background: #535d64; }
.phone-demo-feedback { position: absolute; z-index: 5; left: 50%; bottom: 6cqw; max-width: 90%; transform: translate(-50%, 2cqw); padding: 2.5cqw 4cqw; border: 1px solid #dff0ff30; border-radius: 8cqw; background: #113b60f0; color: white; box-shadow: 0 1.5cqw 5cqw #001c3d30; font-size: 3.3cqw; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.phone-demo-feedback.is-visible { opacity: 1; transform: translate(-50%, 0); }
.phone-ripple { position: absolute; pointer-events: none; width: 150%; aspect-ratio: 1; border-radius: 50%; background: #71bdff40; transform: translate(-50%, -50%) scale(0); animation: phone-ripple .5s ease-out forwards; }
@keyframes phone-ripple { to { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .phone-app button, .phone-demo-feedback { transition: none; } .phone-ripple { display: none; } }

/* The existing home screen stays intact; every demo route is contained by the phone. */
.phone-app [hidden] { display: none !important; }
.phone-app .phone-demo-screen {
  position: absolute; z-index: 6; inset: 0; display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0;
  color: #15314b; background: #f4f7fd; text-align: left;
}
.phone-demo-header { padding: 9cqw 4cqw 4cqw; color: #fff; background: linear-gradient(155deg, #005cae, #0085e9); }
.phone-demo-page-toolbar { display: flex; align-items: center; gap: 2cqw; }
.phone-app .phone-demo-icon-button { display: grid; place-items: center; flex: none; width: 12cqw; height: 12cqw; padding: 3cqw; color: inherit; background: #ffffff1a; border-radius: 4cqw; }
.phone-app .phone-demo-icon-button:hover { background: #ffffff30; }
.phone-app .phone-demo-page-toolbar h2 { flex: 1; min-width: 0; margin: 0; font: 700 5.4cqw/1.2 Arial, sans-serif; letter-spacing: -.02em; color: inherit; outline: none; }
.phone-demo-badge { display: inline-block; margin: 3cqw 0 0 14cqw; font-size: 3cqw; line-height: 1.3; color: #d1ecff; letter-spacing: .025em; }
.phone-demo-content { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b7cde0 transparent; padding: 6cqw 4.5cqw 7cqw; min-height: 0; min-width: 0; }
.phone-demo-content > * + * { margin-top: 5cqw; }
.phone-demo-content p { font: 400 4.1cqw/1.5 Arial, sans-serif; margin: 2.5cqw 0 0; }
.phone-demo-content h3 { margin: 5cqw 0 3cqw; font: 700 4.9cqw/1.3 Arial, sans-serif; letter-spacing: -.015em; color: #15314b; }
.phone-demo-content h3:first-child { margin-top: 0; }
.phone-app .phone-demo-large-title { font-size: 7cqw; margin-top: 4cqw; }
.phone-demo-content .phone-demo-muted { color: #6a7c90; font-size: 3.7cqw; }
.phone-demo-page-intro p { color: #667b90; }
.phone-demo-list { display: grid; gap: 3cqw; }
.phone-app .phone-demo-row { display: flex; align-items: center; gap: 3.5cqw; width: 100%; min-height: 23cqw; padding: 4cqw 3.5cqw; background: #fff; border: 1px solid #e4ecf4; border-radius: 5cqw; text-align: left; box-shadow: 0 1cqw 2cqw #193c6010; }
.phone-app .phone-demo-row:hover { background: #eaf5ff; border-color: #a8d5f7; }
.phone-demo-row > span:nth-child(2) { flex: 1; min-width: 0; }
.phone-demo-row b { display: block; font-size: 4.2cqw; line-height: 1.3; overflow-wrap: anywhere; }
.phone-demo-row small { display: block; margin-top: 1.6cqw; font-size: 3.25cqw; line-height: 1.4; color: #708398; }
.phone-demo-row-icon { display: grid; place-items: center; flex: none; width: 11cqw; height: 11cqw; padding: 2.5cqw; color: #1781d8; background: #e5f2fd; border-radius: 3.2cqw; }
.phone-demo-chevron { flex: none; width: 3.5cqw; height: 3.5cqw; color: #95a5b6; }
.phone-demo-summary { padding: 5cqw; border: 1px solid #cbe6fa; border-radius: 6cqw; background: linear-gradient(130deg, #edf7ff, #dfedfc); color: #145485; }
.phone-demo-summary > span { font-size: 3.8cqw; }
.phone-demo-summary > strong { display: block; margin-top: 1.5cqw; font-size: 11cqw; line-height: 1.15; font-weight: 750; }
.phone-demo-summary strong small { font-size: 4.8cqw; font-weight: 600; }
.phone-demo-summary p { margin-top: 2cqw; font-size: 3.6cqw; color: #66829b; }
.phone-demo-chip { display: inline-block; padding: 2cqw 3cqw; border-radius: 3cqw; background: #e0f2eb; color: #16805b; font-size: 3.2cqw; line-height: 1.3; font-weight: 600; }
.phone-demo-details { padding: 3cqw 4cqw; border: 1px solid #e1eaf4; border-radius: 4cqw; background: #fff; }
.phone-demo-details > div { display: flex; justify-content: space-between; gap: 3cqw; padding: 2cqw 0; font-size: 3.7cqw; }
.phone-demo-details dt { color: #738397; }
.phone-demo-details dd { margin: 0; font-weight: 600; }
.phone-demo-placeholder { display: flex; align-items: center; gap: 4cqw; min-height: 22cqw; padding: 4cqw; background: #e7edf4; border: 1px dashed #a4b9cc; border-radius: 4cqw; color: #6c8399; font-size: 4cqw; }
.phone-demo-placeholder svg { flex: none; width: 10cqw; height: 10cqw; }
.phone-demo-placeholder small { display: block; margin-top: 1.5cqw; font-size: 3.2cqw; }
.phone-demo-message { display: flex; gap: 3cqw; padding: 4cqw; border: 1px solid #deebf5; border-radius: 5cqw; background: white; }
.phone-demo-message-dot { width: 2.2cqw; height: 2.2cqw; flex: none; margin-top: 1.5cqw; border-radius: 50%; background: #0085e9; }
.phone-demo-message.is-read .phone-demo-message-dot { background: #c6d5e1; }
.phone-demo-message b { display: block; font-size: 4.5cqw; line-height: 1.25; }
.phone-demo-message p { margin: 2cqw 0; font-size: 3.8cqw; color: #647b91; }
.phone-demo-message small { font-size: 3.2cqw; color: #8a9aab; }
.phone-app .phone-demo-text-button { display: block; margin-top: 3cqw; padding: 1.5cqw 0; color: #087acb; background: transparent; font-size: 3.7cqw; font-weight: 600; }
.phone-app .phone-demo-primary { display: block; width: 100%; min-height: 13cqw; margin-top: 5cqw; padding: 3.5cqw; background: #087fd5; color: white; border-radius: 4cqw; font-size: 4cqw; font-weight: 650; line-height: 1.3; }
.phone-app .phone-demo-primary:hover { background: #006ebc; }
.phone-app .phone-demo-primary:disabled { background: #dae8f3; color: #678299; cursor: default; }
.phone-demo-aircraft { display: grid; justify-items: center; padding: 5cqw; border-radius: 6cqw; background: linear-gradient(145deg, #e3f3ff, #c7e4fb); color: #14669f; }
.phone-demo-aircraft svg { width: 24cqw; height: 24cqw; stroke-width: 1.1; margin: 1cqw 0 4cqw; transform: rotate(-22deg); }
.phone-demo-aircraft span { font-size: 3.5cqw; }
.phone-demo-aircraft strong { margin-top: 2cqw; font-size: 7cqw; }
.phone-demo-document { display: grid; justify-items: center; text-align: center; padding: 8cqw 5cqw; border: 1px solid #dce6ef; border-radius: 5cqw; background: white; }
.phone-demo-document svg { width: 19cqw; height: 19cqw; margin-bottom: 5cqw; color: #7aa9ce; stroke-width: 1.2; }
.phone-demo-document b { font-size: 4.4cqw; }
.phone-demo-content .phone-demo-note { font-size: 3.5cqw; line-height: 1.5; color: #6b8194; }
.phone-demo-search-form label { display: block; font-size: 4.3cqw; line-height: 1.3; font-weight: 650; margin-bottom: 3cqw; }
.phone-demo-search-form > div { display: flex; border: 1px solid #b9d8ee; border-radius: 4cqw; background: white; overflow: hidden; }
.phone-demo-search-form input { width: 0; min-width: 0; flex: 1; padding: 3.5cqw; border: 0; border-radius: 0; outline: none; color: #15314b; background: transparent; font: 400 4.3cqw/1.3 Arial, sans-serif; }
.phone-demo-search-form > div:focus-within { outline: 2px solid #f2aa45; outline-offset: 1px; }
.phone-app .phone-demo-search-form button { display: grid; place-items: center; flex: none; width: 14cqw; padding: 3.5cqw; color: white; background: #087fd5; }
.phone-demo-segment { display: flex; padding: 1.3cqw; gap: 1cqw; border-radius: 4cqw; background: #e2ebf5; }
.phone-app .phone-demo-segment button { flex: 1; padding: 3cqw; border-radius: 3cqw; color: #59758d; background: transparent; font-size: 4cqw; }
.phone-app .phone-demo-segment button[aria-pressed="true"] { background: white; color: #087bcf; box-shadow: 0 1cqw 2cqw #1c456e10; }
.phone-demo-tanks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3cqw; }
.phone-demo-tanks > div { padding: 5cqw 3cqw; border: 1px solid #dfebf5; background: white; border-radius: 5cqw; text-align: center; }
.phone-demo-tanks span { display: block; font-size: 3.4cqw; color: #748a9d; }
.phone-demo-tanks strong { display: block; margin-top: 3cqw; font-size: 7cqw; color: #17659a; }
.phone-demo-choice { display: flex; align-items: center; justify-content: space-between; gap: 4cqw; padding: 5cqw; border: 1px solid #e0eaf3; border-radius: 4cqw; background: white; font-size: 4.4cqw; font-weight: 600; cursor: pointer; }
.phone-demo-choice input { width: 6cqw; height: 6cqw; margin: 0; accent-color: #0784d9; cursor: pointer; }
.phone-demo-bottom { display: flex; justify-content: center; padding: 2cqw 4cqw 5.5cqw; border-top: 1px solid #dde7f1; background: #fff; }
.phone-app .phone-demo-bottom button { display: flex; align-items: center; gap: 2.2cqw; padding: 1.5cqw 5cqw; color: #2777af; background: transparent; border-radius: 3cqw; font-size: 3.4cqw; }
.phone-demo-bottom svg { width: 5cqw; height: 5cqw; }
.phone-demo-drawer { position: absolute; z-index: 15; inset: 0; }
.phone-app .phone-demo-scrim { position: absolute; inset: 0; width: 100%; height: 100%; background: #07213f80; border-radius: 0; cursor: default; }
.phone-app .phone-demo-scrim:active { transform: none; }
.phone-demo-drawer-panel { position: absolute; inset: 0 auto 0 0; display: flex; flex-direction: column; width: 89%; background: #f6f9fd; box-shadow: 3cqw 0 10cqw #071d3940; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.phone-demo-drawer-head { display: flex; align-items: center; gap: 2cqw; padding: 12cqw 4cqw 7cqw; color: white; background: linear-gradient(135deg, #005cae, #0085e9); }
.phone-demo-drawer-head > div { flex: 1; min-width: 0; }
.phone-demo-drawer-head strong { display: block; font-size: 7cqw; line-height: 1.1; }
.phone-demo-drawer-head small { display: block; margin-top: 2.8cqw; font-size: 3cqw; line-height: 1.35; color: #c7e8ff; }
.phone-demo-drawer-panel nav { display: grid; gap: 2cqw; padding: 5cqw 3cqw; }
.phone-app .phone-demo-drawer-panel .phone-demo-row { min-height: 21cqw; padding: 3cqw 2cqw; border-color: transparent; box-shadow: none; background: transparent; gap: 2.5cqw; }
.phone-app .phone-demo-drawer-panel .phone-demo-row:hover { background: #e2effc; }
.phone-demo-drawer-panel .phone-demo-row b { font-size: 4.1cqw; }
.phone-demo-drawer-panel .phone-demo-row small { font-size: 3cqw; }
.phone-demo-drawer-caption { margin: auto 0 0; padding: 5cqw 6cqw 8cqw; color: #8599aa; font-size: 3.1cqw; }
.phone-app .phone-homebar { z-index: 20; pointer-events: none; }
.phone-app .phone-demo-feedback { z-index: 25; max-width: 92%; font-size: 3.3cqw; white-space: normal; text-align: center; }

/* Android PerronDesign / HomeScreen / SettingsScreen visual vocabulary. */
.phone-app {
  --pd-bg:#f4f7fc; --pd-surface:#fff; --pd-ink:#12233f;
  --pd-muted:#687895; --pd-line:#e0e8f2; --pd-soft:#e6f2ff; --pd-accent:#0758a9;
  --pd-primary-rgb:7 88 169; --pd-outline:#8da7be;
  --pd-sheet:#f4f7fc; --pd-dialog:#fff;
  color-scheme:light;
  display:flex; flex-direction:column; background:var(--pd-bg); color:var(--pd-ink);
}
.phone-app[data-theme="dark"] {
  /* Theme.kt and Material3 1.4.0 defaults used by the Android build. */
  --pd-bg:#07182c; --pd-surface:#10243b; --pd-ink:#e0e0e0;
  --pd-muted:#cac4d0; --pd-line:#49454f; --pd-soft:#193550; --pd-accent:#78b8ff;
  --pd-primary-rgb:120 184 255; --pd-outline:#938f99;
  --pd-sheet:#1d1b20; --pd-dialog:#2b2930;
  color-scheme:dark;
}
.phone-app-head {flex:none;}
.phone-demo-home {flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:none;}
.phone-app-body {flex:none; padding-bottom:8cqw;}
.phone-cards > .phone-demo-outline {grid-column:1/-1;}
.phone-app .phone-card {background:var(--pd-surface); color:var(--pd-ink);}
.phone-app .phone-card:hover {background:var(--pd-soft);}
.phone-card-copy small {color:var(--pd-muted);}
.phone-app .phone-demo-screen {background:var(--pd-bg); color:var(--pd-ink);}
.phone-demo-header {display:flex; align-items:center; min-height:31.5cqw; padding:8cqw 3cqw 4cqw; border-radius:0 0 7.5cqw 7.5cqw; background:linear-gradient(90deg,#052b5d,#0758a9,#1289f5);}
.phone-demo-header.has-subtitle {min-height:37cqw;}
.phone-demo-page-toolbar {width:100%; gap:1cqw;}
.phone-demo-page-toolbar > div {flex:1; min-width:0;}
.phone-app .phone-demo-page-toolbar h2 {font-size:6.5cqw; line-height:1.15; font-weight:800;}
.phone-demo-page-toolbar p {margin:1.8cqw 0 0; color:#ffffffd1; font:400 3.5cqw/1.35 Arial,sans-serif;}
.phone-app .phone-demo-icon-button {width:10cqw; height:10cqw; padding:2.5cqw; background:transparent; border-radius:50%;}
.phone-demo-content {padding:4cqw 4.5cqw 18cqw; color:var(--pd-ink); scrollbar-color:var(--pd-line) transparent;}
.phone-demo-content h3 {color:var(--pd-ink);}
.phone-demo-content .phone-demo-muted,.phone-demo-content .phone-demo-note {color:var(--pd-muted);}
.phone-app .phone-demo-row {background:var(--pd-surface); border-color:var(--pd-line); color:var(--pd-ink); border-radius:6cqw; padding:4cqw; min-height:22cqw;}
.phone-app .phone-demo-row:hover {background:var(--pd-soft); border-color:var(--pd-line);}
.phone-demo-row-icon {color:var(--pd-accent); background:var(--pd-soft); width:12cqw; height:12cqw; border-radius:4cqw; padding:3cqw;}
.phone-demo-row b {font-size:4.3cqw; line-height:1.35;}
.phone-demo-row small {font-size:3.3cqw; color:var(--pd-muted);}
.phone-demo-group {border-radius:6cqw; background:var(--pd-surface); border:1px solid var(--pd-line); overflow:hidden;}
.phone-app .phone-demo-group > .phone-demo-row {border:0; border-radius:0; box-shadow:none; min-height:22cqw;}
.phone-demo-group > * + * {border-top:1px solid var(--pd-line)!important;}
.phone-demo-content .phone-demo-card-text {padding:4cqw; margin:0; font-size:4cqw;}
.phone-app .phone-demo-primary {background:#191c20; border-radius:4.5cqw; min-height:13.5cqw;}
.phone-app .phone-demo-primary:hover {background:#303943;}
.phone-app[data-theme="dark"] .phone-demo-primary {background:#191c20; color:#fff;}
.phone-app .phone-demo-outline {width:100%; display:block; padding:3.5cqw 2.5cqw; min-height:13.5cqw; border:1px solid #8eafcf; color:var(--pd-accent); background:transparent; border-radius:4.5cqw; font-size:3.8cqw; line-height:1.35;}
.phone-app .phone-demo-outline:hover {background:var(--pd-soft);}
.phone-demo-filter-row {display:flex; gap:2.5cqw; margin:0 0 4cqw;}
.phone-demo-filter-row .phone-demo-outline {flex:1; width:0; text-transform:capitalize;}
.phone-demo-count {display:flex; align-items:center; justify-content:space-between; gap:2cqw; font-size:3.6cqw; color:var(--pd-muted); margin-bottom:3cqw;}
.phone-demo-count .phone-demo-icon-button {color:var(--pd-ink);}
.phone-app .phone-demo-day {gap:2.5cqw; min-height:21cqw;}
.phone-demo-day > b {flex:1;}
.phone-demo-count-chip {white-space:nowrap; padding:1.4cqw 2cqw; background:var(--pd-soft); border-radius:3cqw; font-size:3cqw; color:var(--pd-accent);}
.phone-app .phone-demo-fab {position:absolute; right:5cqw; bottom:17cqw; z-index:3; width:14cqw; height:14cqw; padding:4cqw; border-radius:4.5cqw; background:#191c20; color:white; box-shadow:0 1.5cqw 4cqw #0003;}
.phone-app .phone-demo-info-tiles {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2cqw;}
.phone-demo-info-tiles > div {padding:4cqw 2cqw; border-radius:4cqw; background:var(--pd-soft); text-align:center;}
.phone-demo-info-tiles small {display:block; color:var(--pd-muted); font-size:3.1cqw;}
.phone-demo-info-tiles b {display:block; margin-top:2cqw; color:var(--pd-ink); font-size:3.4cqw; overflow-wrap:anywhere;}
.phone-demo-field {display:block; margin:4cqw 0; text-align:left;}
.phone-demo-field > span {display:block; margin-bottom:2cqw; font:500 3.8cqw/1.35 Arial,sans-serif; color:var(--pd-muted);}
.phone-demo-field input,.phone-demo-field textarea,.phone-demo-field select {display:block; width:100%; min-width:0; min-height:13cqw; padding:3.5cqw; border:1px solid #8da7be; border-radius:4cqw; color:var(--pd-ink); background:var(--pd-surface); font:400 4cqw/1.4 Arial,sans-serif; box-sizing:border-box;}
.phone-demo-field textarea {min-height:28cqw; resize:vertical;}
.phone-demo-field input:focus-visible,.phone-demo-field textarea:focus-visible,.phone-demo-field select:focus-visible {outline:2px solid #f2aa45; outline-offset:1px;}
.phone-demo-info-fields {display:grid; grid-template-columns:1.5fr 1fr .7fr; gap:2cqw;}
.phone-demo-info-fields .phone-demo-field input {padding:3cqw 1.5cqw; font-size:3.5cqw;}
.phone-demo-form-card {padding:1cqw 4cqw 4cqw; border:1px solid var(--pd-line); border-radius:6cqw; background:var(--pd-surface);}
.phone-demo-summary,.phone-demo-details {background:var(--pd-soft); border-color:var(--pd-line); color:var(--pd-ink);}
.phone-demo-summary p,.phone-demo-details dt {color:var(--pd-muted);}
.phone-demo-summary > strong {font-size:9cqw;}
.phone-demo-details {margin:4cqw 0;}
.phone-demo-details > div {font-size:3.6cqw; align-items:baseline;}
.phone-demo-details dd {text-align:right;}
.phone-demo-search-form > div {background:var(--pd-surface); border-color:var(--pd-line);}
.phone-demo-search-form input {color:var(--pd-ink);}
.phone-demo-segment {background:var(--pd-soft); margin:4cqw 0;}
.phone-app .phone-demo-segment button {color:var(--pd-muted);}
.phone-app .phone-demo-segment button[aria-pressed="true"] {background:var(--pd-surface); color:var(--pd-accent);}
.phone-demo-document {background:var(--pd-surface); border-color:var(--pd-line);}
.phone-demo-pin {text-align:center; padding:8cqw 4cqw;}
.phone-demo-pin svg {display:block; width:24cqw; height:24cqw; margin:auto; color:var(--pd-accent);}
.phone-demo-pin strong {display:block; margin-top:8cqw; letter-spacing:3cqw; font-size:6cqw;}
.phone-demo-tabs {display:flex; border-bottom:1px solid var(--pd-line); margin:-4cqw -4.5cqw 5cqw;}
.phone-app .phone-demo-tabs button {flex:1; padding:4cqw 1cqw; background:transparent; color:var(--pd-muted); font-size:4cqw; border-bottom:2px solid transparent;}
.phone-app .phone-demo-tabs button[aria-pressed="true"] {border-bottom-color:var(--pd-accent); color:var(--pd-accent);}
.phone-demo-chat-bubble {padding:4cqw; border-radius:5cqw 5cqw 5cqw 0; background:var(--pd-surface); font-size:4cqw; line-height:1.5; margin-right:8cqw;}
.phone-demo-chat-bubble.is-user {margin-right:0; margin-left:8cqw; border-radius:5cqw 5cqw 0 5cqw; background:var(--pd-soft);}
.phone-demo-bottom {gap:3cqw; padding:2cqw 4cqw 5cqw; align-items:center; color:var(--pd-muted); background:var(--pd-surface); border-color:var(--pd-line);}
.phone-demo-bottom > span {font-size:2.7cqw;}
.phone-app .phone-demo-bottom button {padding:1.5cqw 3cqw; color:var(--pd-accent);}
.phone-demo-home-history {margin-top:7cqw;}
.phone-demo-home-history .phone-demo-row {min-height:16cqw; border-radius:4cqw; box-shadow:none;}
.phone-demo-home-history .phone-demo-row-icon {width:8cqw; height:8cqw; padding:2cqw;}
.phone-demo-home-history .phone-demo-row b {font-size:3.5cqw;}
.phone-demo-home-history .phone-demo-note {font-size:3.4cqw; color:var(--pd-muted); line-height:1.5;}
.phone-toolbar .has-unread::after {content:"3"; position:absolute; right:1cqw; top:1cqw; display:grid; place-items:center; width:4cqw; height:4cqw; border-radius:50%; background:#ff982d; color:#112d4e; font-size:2.6cqw; font-weight:700;}

.phone-demo-drawer-panel {width:78%; background:#052b5d; color:#fff; scrollbar-width:none;}
.phone-demo-drawer-panel nav {display:block; padding:1cqw 2.5cqw;}
.phone-app .phone-demo-profile {display:flex; width:100%; flex-direction:column; align-items:center; gap:2cqw; padding:10cqw 4cqw 7cqw; background:transparent; color:white;}
.phone-demo-avatar {display:grid; place-items:center; width:28cqw; height:28cqw; padding:6cqw; border-radius:50%; background:#ffffff18; border:1px solid #ffffff40;}
.phone-demo-profile strong {font-size:4.5cqw;}
.phone-demo-profile small {font-size:3.2cqw; color:#ffffffb3;}
.phone-app .phone-demo-menu-item {display:flex; align-items:center; gap:3cqw; width:100%; min-height:13cqw; padding:3cqw 4cqw; background:transparent; color:white; border-radius:3cqw; text-align:left; font-size:3.75cqw;}
.phone-demo-menu-item svg {width:5.5cqw; height:5.5cqw; flex:none;}
.phone-app .phone-demo-menu-item:hover,.phone-app .phone-demo-menu-item.is-current {background:#1289f561;}
.phone-app .phone-demo-exit {margin-top:auto; padding-inline:6.5cqw;}
.phone-demo-exit svg {color:#ff6b6b;}
.phone-demo-drawer-caption {padding:3cqw 6cqw 6cqw; margin:0; color:#ffffff88; font-size:2.8cqw;}
.phone-demo-notifications {inset:0 0 0 auto; width:86%; padding-top:8cqw;}
.phone-demo-notification-list {padding:4cqw; display:grid; gap:3cqw;}
.phone-app .phone-demo-event {display:flex; gap:3cqw; width:100%; padding:4cqw; border-radius:4cqw; background:#ffffff0d; color:white; text-align:left;}
.phone-demo-event-icon {width:6cqw; height:6cqw; flex:none; color:#69d3a3;}
.phone-demo-event.processing .phone-demo-event-icon {color:#72bfff;}
.phone-demo-event b {display:block; font-size:4cqw; line-height:1.4;}
.phone-demo-event small {display:block; margin-top:2cqw; color:#ffffffb3; font-size:3.3cqw; line-height:1.4;}
.phone-demo-progress {display:block; height:1cqw; background:#ffffff2a; border-radius:1cqw; margin-top:3cqw; overflow:hidden;}
.phone-demo-progress i {display:block; width:8%; height:100%; background:#72bfff;}
.phone-demo-modal {position:absolute; z-index:18; inset:0; color:var(--pd-ink);}
.phone-demo-sheet {position:absolute; inset:auto 0 0; display:flex; flex-direction:column; max-height:84%; border-radius:7cqw 7cqw 0 0; background:var(--pd-bg); box-shadow:0 -4cqw 12cqw #00162e55;}
.phone-demo-sheet.is-tall {height:84%;}
.phone-demo-sheet-head {display:flex; align-items:center; gap:2cqw; padding:5cqw 4.5cqw 2cqw;}
.phone-demo-sheet-head h3 {flex:1; margin:0; color:inherit; font:700 5cqw/1.3 Arial,sans-serif;}
.phone-demo-sheet-content {padding:0 4.5cqw 8cqw; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin;}
.phone-demo-sheet-content p {font:400 3.8cqw/1.5 Arial,sans-serif;}
.phone-demo-sheet-content h3 {font:700 4.6cqw/1.4 Arial,sans-serif; color:var(--pd-ink); margin:4cqw 0;}
.phone-demo-sheet-content .phone-demo-note {font-size:3.5cqw; color:var(--pd-muted);}
.phone-demo-month-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:2cqw;}
.phone-demo-choice {background:var(--pd-surface); border-color:var(--pd-line); color:var(--pd-ink); padding:4cqw; font-size:4cqw;}
.phone-demo-choice > span {display:flex; align-items:center; gap:3cqw; flex-wrap:wrap;}
.phone-demo-choice small {display:block; width:100%; font-size:3.2cqw; font-weight:400; color:var(--pd-muted);}
.phone-demo-choice svg {width:5cqw; height:5cqw; color:var(--pd-accent);}
.phone-demo-choice input {flex:none;}
.phone-app .phone-demo-theme-option {display:flex; align-items:center; gap:4cqw; width:100%; padding:5cqw 3cqw; background:transparent; color:var(--pd-ink); font-size:4.5cqw;}
.phone-demo-radio {display:block; width:5cqw; height:5cqw; border:1.5px solid var(--pd-muted); border-radius:50%;}
.phone-demo-theme-option[aria-checked="true"] .phone-demo-radio {border:1.4cqw solid var(--pd-accent);}
.phone-demo-summary-text {white-space:pre-line;}
.phone-app .phone-demo-feedback {z-index:30;}
.phone-app .sr-only {position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}

/* Fixed HomeScreen accents remain the same in both Android themes. */
.phone-app-head {background:linear-gradient(180deg,#052b5d,#0758a9,#0877d5);}
.phone-greeting {color:rgb(255 255 255 / .92);}
.phone-toolbar button {background:rgb(255 255 255 / .08);}
.phone-app .phone-search {background:#0b67b7; border-color:rgb(255 255 255 / .22); color:rgb(255 255 255 / .78);}
.phone-search .phone-mic {color:#fff;}
.phone-search-icon {background:#1289f5; color:#fff;}
.phone-app .phone-recent button {background:rgb(255 255 255 / .09); border-color:rgb(255 255 255 / .12); color:rgb(255 255 255 / .9);}
.phone-app .phone-customize {color:#1289f5;}
.phone-app .phone-card {box-shadow:0 2.5cqw 3.6cqw #00000012;}
.phone-app .phone-card:hover {box-shadow:0 3.4cqw 5cqw #00000020;}
.phone-app .phone-card-icon {color:rgb(var(--shortcut-accent,22 125 240)); background:rgb(var(--shortcut-accent,22 125 240) / .11);}
:is([data-demo-label="Опыт"],.phone-demo-choice:has([data-card-toggle="Опыт"])) {--shortcut-accent:22 125 240;}
:is([data-demo-label="Dash-8 Q400"],.phone-demo-choice:has([data-card-toggle="Dash-8 Q400"])) {--shortcut-accent:20 116 212;}
:is([data-demo-label="AIPC"],.phone-demo-choice:has([data-card-toggle="AIPC"])) {--shortcut-accent:21 160 90;}
:is([data-demo-label="AMM"],.phone-demo-choice:has([data-card-toggle="AMM"])) {--shortcut-accent:243 145 26;}
:is([data-demo-label="FIM"],.phone-demo-choice:has([data-card-toggle="FIM"])) {--shortcut-accent:213 77 98;}
:is([data-demo-label="Воздушные суда"],.phone-demo-choice:has([data-card-toggle="Воздушные суда"])) {--shortcut-accent:22 134 181;}
:is([data-demo-label="Заметки"],.phone-demo-choice:has([data-card-toggle="Заметки"])) {--shortcut-accent:114 91 196;}
:is([data-demo-label="Инструменты"],.phone-demo-choice:has([data-card-toggle="Инструменты"])) {--shortcut-accent:83 106 134;}
:is([data-demo-label="Топливо"],.phone-demo-choice:has([data-card-toggle="Топливо"])) {--shortcut-accent:118 87 221;}
:is([data-demo-label="Момент затяжки"],.phone-demo-choice:has([data-card-toggle="Момент затяжки"])) {--shortcut-accent:45 140 136;}
:is([data-demo-label="Caution panel"],.phone-demo-choice:has([data-card-toggle="Caution panel"])) {--shortcut-accent:224 140 32;}
:is([data-demo-label="Системы Q400"],.phone-demo-choice:has([data-card-toggle="Системы Q400"])) {--shortcut-accent:27 122 158;}
:is([data-demo-label="Q400 Show"],.phone-demo-choice:has([data-card-toggle="Q400 Show"])) {--shortcut-accent:75 111 216;}
.phone-demo-choice:has([data-card-toggle]) svg {color:rgb(var(--shortcut-accent));}
.phone-demo-home-history .phone-demo-row-icon {color:#1289f5; background:rgb(18 137 245 / .1);}
.phone-demo-home-history .phone-demo-row {border:0;}
.phone-toolbar .has-unread::after {background:#ffb020; color:#fff;}
.phone-app .phone-demo-scrim {background:rgb(0 0 0 / .34);}
.phone-demo-avatar {background:rgb(18 137 245 / .22); border:0;}
.phone-demo-profile small,.phone-demo-event small {color:rgb(255 255 255 / .62);}
.phone-app .phone-demo-event {background:transparent;}
.phone-demo-event-icon {color:#5be493;}
.phone-demo-event.processing .phone-demo-event-icon {color:#4cb5ff;}
.phone-demo-progress {background:rgb(255 255 255 / .14);}
.phone-demo-progress i {background:#4cb5ff;}
.phone-demo-notifications .phone-demo-sheet-head {border-bottom:1px solid rgb(255 255 255 / .1); padding-bottom:4cqw;}
.phone-demo-row-icon {background:rgb(var(--pd-primary-rgb) / .12);}
.phone-demo-group .phone-demo-row-icon {background:rgb(var(--pd-primary-rgb) / .11);}
.phone-demo-count-chip {background:rgb(var(--pd-primary-rgb) / .1);}
.phone-demo-day .phone-demo-row-icon {background:transparent;}
.phone-demo-chevron {color:var(--pd-muted);}
.phone-demo-choice input {accent-color:var(--pd-accent);}
.phone-demo-choice [data-card-toggle] {accent-color:#1289f5;}
.phone-demo-modal:has(.is-tall) .phone-demo-scrim {background:rgb(0 0 0 / .42);}
.phone-demo-sheet {background:var(--pd-sheet);}
.phone-demo-sheet.is-tall {background:var(--pd-surface);}
.phone-demo-sheet.is-tall .phone-demo-primary {background:#1289f5; color:#fff;}
.phone-demo-sheet.is-dialog {inset:50% 5% auto; transform:translateY(-50%); border-radius:7cqw; background:var(--pd-dialog); max-height:84%;}
.phone-demo-sheet.is-dialog .phone-demo-sheet-content {padding-bottom:4cqw;}
.phone-app[data-demo-page="settings"] .phone-demo-content > h3 {color:var(--pd-accent); font-size:3.8cqw;}
.phone-app[data-theme="dark"] :is(.phone-demo-group,.phone-demo-row,.phone-demo-form-card) {border-color:transparent;}
.phone-app[data-theme="dark"] .phone-demo-group > * + * {border-top:0!important;}
.phone-app[data-theme="dark"] .phone-demo-outline {border-color:var(--pd-line); color:var(--pd-muted);}
.phone-app[data-theme="dark"] :is(.phone-demo-field input,.phone-demo-field textarea,.phone-demo-field select) {border-color:var(--pd-outline);}
.phone-app[data-theme="dark"] .phone-demo-field :is(input,textarea,select):focus-visible {outline-color:var(--pd-accent);}
.phone-app[data-theme="dark"] .phone-demo-bottom {background:var(--pd-bg);}
.phone-app[data-theme="dark"] .phone-demo-info-tiles > div {background:rgb(var(--pd-primary-rgb) / .08);}
.phone-app[data-theme="dark"] .phone-demo-chip {background:var(--pd-surface); color:var(--pd-ink);}
.phone-app[data-theme="dark"] .phone-demo-text-button {color:var(--pd-accent);}
.phone-app[data-theme="dark"][data-demo-page="fuel"] .phone-demo-summary {background:transparent; border:0; padding:3cqw 0;}
.phone-app[data-theme="dark"][data-demo-page="backup"] .phone-demo-primary {background:var(--pd-accent); color:#fff;}
.phone-app[data-theme="dark"] [data-form="period"] .phone-demo-primary {background:var(--pd-accent); color:#fff;}
.phone-app[data-theme="dark"] [data-form="work"] :is(input,textarea) {background:var(--pd-soft); border-color:transparent;}
.phone-app[data-theme="dark"] [data-form="work"] .phone-demo-info-fields input {background:#4f378b; color:#eaddff;}