[hidden] { display: none !important; }
:root { --momo-accent: #bbeba0; color-scheme: dark; }
.page-header { max-width: 575px; margin: 0 auto; padding: 36px 24px 24px; }
.page-header h1 { color: var(--text); font-size: clamp(44px,8vw,56px); line-height: 1.15; font-weight: 300; letter-spacing: 0; margin: 0; }
.page-header h1 span { color: var(--text-muted); font-size: 16px; font-weight: 300; letter-spacing: 0; }
.page-header > p { margin: 8px 0 24px; }
.preview-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.preview-controls label { font-size: 12px; color: var(--text-muted); }
.preview-controls select { max-width: 100%; padding: 9px 30px 9px 14px; border-radius: 100px; border: 1px solid #303033; background: var(--bg); color: var(--text); font: inherit; font-size: 12px; }
.preview-controls p { flex-basis: 100%; font-size: 12px; margin: 0; }
.logic-style-page .topbar { margin-top: 0; margin-bottom: 24px; }
.logic-style-page .flow-stage { display: grid; grid-template-columns: minmax(0, 575px); justify-content: center; width: 100%; gap: 24px; padding: 0 16px 64px; }
.logic-style-page .flow-card { width: 100%; min-width: 0; }
.card-content { width: 100%; min-width: 0; display: grid; justify-items: center; gap: 24px; }
.card-content .segment-shell { margin: 0 auto; }
.body-copy { margin: 0; padding: 0 24px; width: 100%; color: var(--text-muted); }
.body-copy.strong { color: var(--text); }
.body-copy.center { text-align: center; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 0 16px; width: 100%; }
.chat-pill.primary { background: var(--momo-accent); color: #172013; }
.chat-pill.secondary { background: var(--panel-inner); }
.chat-pill { min-height: 47px; height: auto; line-height: 20px; }
button:disabled { opacity: .35; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--momo-accent); outline-offset: 4px; }
.device-identity { width: 100%; text-align: center; padding: 0 24px; }
.device-name { display: block; font-size: 34px; line-height: 44px; letter-spacing: 1px; color: var(--text); font-weight: 300; }
.device-identity p { margin: 5px 0 0; }
.status { color: var(--momo-accent); }
.device-facts { width: calc(100% - 48px); display: grid; gap: 14px; margin: 0; }
.device-facts div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 20px; }
.device-facts dt { color: var(--text-muted); }
.device-facts dd { color: var(--text); margin: 0; overflow-wrap: anywhere; }
.form { display: grid; gap: 20px; width: 100%; padding: 0 24px; }
.form label { display: grid; gap: 9px; color: var(--text); }
.form input { width: 100%; min-width: 0; font: inherit; padding: 16px 20px; border: 1px solid #343436; border-radius: 100px; background: var(--panel-inner); color: var(--text); }
.form input::placeholder { color: var(--text-muted); }
.form .chat-pill { justify-self: center; }
#activation-name { text-transform: uppercase; }
.form small { font-size: 12px; color: var(--text-muted); }
.request-number { font-size: 20px; color: var(--text); letter-spacing: 2px; }
.progress-block { width: 100%; padding: 0 24px; }
.progress-label { display: flex; justify-content: space-between; gap: 16px; color: var(--text); margin-bottom: 16px; }
progress { appearance: none; border: 0; width: 100%; height: 7px; border-radius: 100px; background: #303032; overflow: hidden; }
progress::-webkit-progress-bar { background: #303032; }
progress::-webkit-progress-value { background: var(--momo-accent); border-radius: 100px; }
progress::-moz-progress-bar { background: var(--momo-accent); border-radius: 100px; }
.progress-block p { margin-bottom: 0; }
.notice { color: #efc29e; }
.release-version { color: var(--text); font-size: 26px; line-height: 35px; font-weight: 300; margin: 0; }
.release-meta { text-align: center; }
.release-meta p { margin: 8px 0 0; }
.card-content .flow-list { max-width: 100%; }
.view-stack { display: grid; gap: 24px; min-width: 0; }
.help-slot { width: 100%; min-width: 0; }
.release-card { display: grid; justify-items: center; gap: 24px; width: 100%; }
.release-card h3 { font: inherit; margin: -16px 0 0; }
.actions:has(>button[hidden]:only-child) { display: none; }
#connection:empty { display: none; }
@media (max-width: 420px) {
  .page-header { padding: 28px 24px 24px; }
  .form, .body-copy, .device-identity, .progress-block { padding-left: 12px; padding-right: 12px; }
  .device-facts { width: calc(100% - 24px); }
  .actions { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

#bootstrap-model { width:100%; box-sizing:border-box; min-height:56px; border-radius:28px; border:1px solid #383838; padding:12px 52px 12px 24px; background-color:#1a1a1a; color:#ddd; font:inherit; }

/* Indeterminate verification must remain visibly active in Chromium too. */
.progress-track { position:relative; height:7px; overflow:hidden; border-radius:100px; background:#303032; }
.progress-track progress { display:block; margin:0; }
.progress-track progress:not([value]) { opacity:0; }
.progress-track:has(progress[data-busy="true"]:not([value]))::after {
  content:""; position:absolute; inset:0 auto 0 0; width:30%; border-radius:100px;
  background:var(--momo-accent); animation:momo-progress-sweep 1s linear infinite;
}
@keyframes momo-progress-sweep { from { transform:translateX(-100%); } to { transform:translateX(334%); } }
@keyframes momo-progress-pulse { from { opacity:.35; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
 .progress-track:has(progress[data-busy="true"]:not([value]))::after {
   width:100%; transform:none; animation:momo-progress-pulse 1.6s ease-in-out infinite alternate !important;
 }
}

.version-comparison { width:100%; display:grid; gap:16px; margin:8px 0 20px; text-align:left; }
.version-comparison p { margin:0; display:grid; gap:5px; overflow-wrap:anywhere; }
.version-comparison span { font-size:12px; color:var(--text-muted); }
.version-comparison strong { font-size:16px; font-weight:400; color:var(--text); }
.update-result { padding:16px 20px; border-radius:20px; border:1px solid #414143; color:var(--text); }
.update-result[data-kind="available"] { color:#bbeba0; background:rgba(187,235,160,.07); border-color:rgba(187,235,160,.35); font-size:18px; font-weight:500; }
.update-result[data-kind="current"] { color:#bbeba0; }
.update-result[data-kind="newer"] { color:#efc29e; }

.device-owner { overflow-wrap: anywhere; }

.release-stack{display:grid;gap:24px;width:100%;}.release-stack .release-card{margin:0 auto;}

/* The connected-device update card replaces the version status and duplicate CTA. */
#ready-update { margin-block:64px 48px; }
#ready-update .muc-body { padding-inline:clamp(20px,5vw,38px); }

/* Approved clean connection layout. Keep operational notices separate from the routine status. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:clip; clip-path:inset(50%); white-space:nowrap; border:0; }
#connection-card[data-connected=true] { box-sizing:border-box; padding:36px 24px 22px; border-radius:48px; background:#1b1c1b; }
#connection-card[data-connected=true] > .logic-expand-all-control { display:none; }
#connection-card[data-connected=true] #connection-body,#connection-card[data-connected=true] #ready-device { gap:0; }
#connection-card[data-connected=true] .device-identity { padding:0 12px; }
#connection-card[data-connected=true] .device-name { margin:0; font-size:38px; line-height:1.2; font-weight:400; letter-spacing:-.025em; color:#d7dcd8; }
#connection-card .connected-meta { display:flex; align-items:center; justify-content:center; gap:8px; margin:12px 0 0; font-size:13px; line-height:1.5; color:#95a097; }
.connected-dot { width:5px; height:5px; flex:none; border-radius:50%; background:#bce69c; }
#connection-card[data-connected=true] #ready-update { width:100%; margin-block:54px 38px; }
#connection-card[data-connected=true] #ready-update .muc-body { padding-inline:32px; }
#connection-card[data-connected=true] #ready-versions { width:calc(100% - 48px); margin-block:32px 20px; }
#connection-card[data-connected=true] #ready-primary-actions { margin-block:24px 16px; }
#ready-primary-actions:has(>button[hidden]:only-child),#connection-actions:not(:has(>:not([hidden]))) { display:none; }
#connection-card[data-connected=true] #connection:is([data-kind=ready],[data-kind=idle]) { display:none; }
#connection-card[data-connected=true] #connection { margin:0 0 20px; }
#connection-card[data-connected=true] #connection-actions { gap:8px; padding:0; }
#connection-card[data-connected=true] #connection-actions .chat-pill { display:inline-flex; align-items:center; min-height:44px; padding:12px 20px; margin:0; border:0; border-radius:999px; background:transparent; color:#aeb9b1; font:13px/1.5 var(--font); text-decoration:none; }
#connection-card[data-connected=true] #connection-actions .chat-pill:hover { background:#ffffff07; color:#e0e8e2; }
#connection-card[data-connected=true] #disconnect { color:#88938b; }
@media(max-width:600px) {
  #connection-card[data-connected=true] { padding:30px 16px 18px; border-radius:36px; }
  #connection-card[data-connected=true] .device-name { font-size:34px; }
  #connection-card[data-connected=true] #ready-update { margin-block:48px 30px; }
  #connection-card[data-connected=true] #ready-update .muc-body { padding:32px 20px 28px; }
}