/* ═══════════════════════════════════════════════════════════════════════
   Compose → CSS replica of the Mappr app UI (Material 3, light scheme).
   Values are lifted from Color.kt / MapScreen.kt / LocationInfoCard.kt /
   RouteControlCenter.kt / RouteNavigationScreen.kt / MapDialogs.kt.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── device frame ── */
.phone-fit { --s: 1; position: relative; width: calc(380px * var(--s)); height: calc(760px * var(--s)); margin-inline: auto; flex: none; }
.phone {
  position: absolute; left: 0; top: 0; width: 380px; height: 760px; padding: 10px;
  border-radius: 54px; background: #0f1113;
  transform: scale(var(--s)); transform-origin: 0 0;
  box-shadow: 0 0 0 1.5px #3a3f45 inset, 0 0 0 5px #17191c, 0 50px 90px -30px rgba(7, 55, 66, .55), 0 22px 40px -22px rgba(0, 0, 0, .45);
}
.phone::before, .phone::after { content: ""; position: absolute; width: 4px; background: #1b1e22; border-radius: 2px; }
.phone::before { right: -4px; top: 170px; height: 76px; }
.phone::after { left: -4px; top: 140px; height: 50px; box-shadow: 0 66px 0 #1b1e22; }

.screen {
  --primary: #30628C; --on-primary: #fff; --primary-container: #CEE5FF; --on-primary-container: #104A73;
  --on-surface: #181C20; --on-surface-variant: #42474E; --outline: #72777F; --outline-variant: #C2C7CF;
  --error: #BA1A1A; --error-container: #FFDAD6; --on-error-container: #93000A;
  --surface: #fff; --surface-variant: #DEE3EB; --tertiary: #30628C; --track: #EEF1F5;
  --e2: 0 1px 2px rgba(0,0,0,.28), 0 1px 4px 1px rgba(0,0,0,.12);
  --e4: 0 2px 5px 1px rgba(0,0,0,.16), 0 1px 2px rgba(0,0,0,.26);
  --e8: 0 5px 14px 2px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.24);
  position: relative; width: 360px; height: 740px; border-radius: 44px; overflow: hidden; isolation: isolate;
  background: #F3F4F1; color: var(--on-surface); font-family: Poppins, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px; line-height: 1.35; text-align: left; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
:where(.screen) *, :where(.screen) *::before, :where(.screen) *::after { box-sizing: border-box; }
:where(.screen) button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:where(.screen) svg.ic { display: block; flex: none; }
:where(.screen) svg.ic path { vector-effect: none; }
.screen .app-map { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.mv-tilt { position: absolute; will-change: transform; }
.mv-canvas { display: block; }

.app-statusbar { position: absolute; z-index: 9; top: 0; left: 0; right: 0; height: 28px; padding: 6px 26px 0 28px; display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 600; color: #101214; pointer-events: none; }
.app-statusbar .sb-r { display: flex; gap: 5px; align-items: center; }
.app-statusbar .sb-r i { display: block; width: 14px; height: 8px; border-radius: 2px; background: #101214; opacity: .85; }
.app-statusbar .sb-r i:nth-child(1) { clip-path: polygon(0 100%, 100% 100%, 100% 0); width: 12px; }
.app-statusbar .sb-r i:nth-child(2) { width: 16px; height: 8px; border-radius: 2.5px; opacity: .85; }
.screen::after { content: ""; position: absolute; z-index: 30; top: 11px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: #0b0c0d; box-shadow: 0 0 0 1.5px rgba(255,255,255,.04); pointer-events: none; }
.app-gesture { position: absolute; z-index: 9; bottom: 7px; left: 50%; width: 112px; height: 4px; margin-left: -56px; border-radius: 2px; background: rgba(16,18,20,.55); pointer-events: none; }

/* ── centre crosshair pin ── */
.app-pin { position: absolute; z-index: 2; left: 50%; top: 50%; width: 48px; height: 48px; margin: -48px 0 0 -24px; object-fit: contain; pointer-events: none; transition: transform .18s cubic-bezier(.3,.7,.3,1); -webkit-user-drag: none; }
.app-pin.lift { transform: translateY(-9px); }

/* ── top overlay ── */
.app-top { position: absolute; z-index: 4; left: 0; right: 0; top: 24px; padding-top: 16px; pointer-events: none; }
.app-top > * { pointer-events: auto; }
.app-search { display: flex; align-items: center; gap: 12px; height: 52px; margin: 0 16px; padding: 0 16px; border-radius: 28px; background: var(--surface); box-shadow: var(--e8); cursor: pointer; width: calc(100% - 32px); text-align: left; }
.app-search svg { color: var(--on-surface-variant); }
.app-search span { font-size: 14px; color: var(--on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-controls { display: flex; justify-content: space-between; align-items: flex-start; margin: 12px 16px 0; pointer-events: none; }
.app-controls > * { pointer-events: auto; }
.app-colL { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.app-colR { display: flex; flex-direction: column; gap: 12px; }
.app-card { background: var(--surface); border-radius: 12px; box-shadow: var(--e4); }
.app-latlng { padding: 8px; display: flex; flex-direction: column; gap: 2px; cursor: copy; }
.app-latlng div { display: flex; gap: 6px; align-items: center; line-height: 1.35; }
.app-latlng .k { font-size: 10px; color: var(--on-surface-variant); }
.app-latlng .v { font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.app-zoom { width: 40px; overflow: hidden; }
.app-zoom button { display: grid; place-items: center; width: 40px; height: 40px; color: var(--on-surface); }
.app-zoom button:active { background: rgba(24,28,32,.08); }
.app-zoom hr { border: 0; height: 1px; margin: 0; background: var(--outline-variant); }
.app-fab { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 0 0 .5px rgba(0,0,0,.05); color: var(--on-surface); transition: transform .12s, box-shadow .12s; }
.app-fab:active { transform: scale(.94); }
.app-fab.stop { background: var(--error-container); color: var(--error); box-shadow: var(--e8); animation: fab-in .26s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes fab-in { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

.app-sched { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); box-shadow: var(--e4); color: var(--primary); animation: fab-in .26s cubic-bezier(.2,.9,.3,1.3) both; }
.app-sched canvas { position: absolute; inset: 4px; width: 40px; height: 40px; }
.app-sched .t { position: relative; font-size: 9px; font-weight: 700; line-height: 10px; text-align: center; color: var(--on-surface); font-variant-numeric: tabular-nums; }

/* ── bottom overlay + LocationInfoCard ── */
.app-bottom { position: absolute; z-index: 4; left: 0; right: 0; bottom: 14px; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; }
.app-bottom > * { pointer-events: auto; }
.app-bottom .app-fab.stop { margin: 0 16px 8px 0; }
.app-infocard { width: calc(100% - 32px); margin: 16px; border-radius: 16px; background: var(--surface); box-shadow: var(--e8); padding: 8px 12px; }
.app-infocard .hd { display: flex; justify-content: space-between; align-items: center; }
.app-infocard .lbl { font-size: 13px; font-weight: 700; color: var(--primary); letter-spacing: .01em; }
.app-change { padding: 10px 25px; border-radius: 12px; background: var(--primary); color: var(--on-primary); font-size: 15px; font-weight: 700; box-shadow: var(--e4); transition: transform .1s, box-shadow .1s, background .2s; }
.app-change:active { transform: scale(.96); box-shadow: var(--e2); }
.app-change.on { background: #276b3a; }
.app-addr { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; }
.app-addr > svg:first-child { margin-top: 3px; }
.app-addr p { flex: 1; margin: 0; font-size: 13px; line-height: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 32px; padding-top: 2px; }
.app-heart { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--on-surface-variant); transition: transform .15s; flex: none; }
.app-heart.on { color: var(--error); }
.app-heart.pop svg { animation: heart-pop .32s cubic-bezier(.2,.9,.3,1.4); }
@keyframes heart-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
.app-infocard hr { border: 0; height: 1px; background: var(--outline-variant); margin: 4px 0; }
.app-infocard .sub { font-size: 12px; font-weight: 600; color: var(--on-surface-variant); margin-top: 4px; }

/* ── dialogs, sheets, full-screen routes ── */
.app-scrim { position: absolute; inset: 0; z-index: 22; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.34); opacity: 0; pointer-events: none; transition: opacity .2s; }
.app-scrim.on { opacity: 1; pointer-events: auto; }
.app-dialog { width: 100%; max-width: 312px; padding: 24px; border-radius: 28px; background: var(--surface); box-shadow: var(--e8); transform: scale(.92); transition: transform .22s cubic-bezier(.2,.9,.3,1.2); max-height: 100%; overflow: auto; }
.app-scrim.on .app-dialog { transform: none; }
.app-dialog .di { display: grid; place-items: center; color: var(--error); margin-bottom: 16px; }
.app-dialog h3 { margin: 0 0 16px; font-size: 22px; line-height: 1.25; font-weight: 700; text-align: center; }
.app-dialog.left h3 { text-align: left; }
.app-dialog .msg { font-size: 14px; line-height: 20px; color: var(--on-surface-variant); margin-bottom: 24px; }
.app-dialog .acts { display: flex; justify-content: flex-end; gap: 8px; }
.app-dialog .acts.col { flex-direction: column; }
.btn-f, .btn-t { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 24px; border-radius: 20px; font-size: 14px; font-weight: 500; }
.btn-f { background: var(--primary); color: var(--on-primary); }
.btn-f.err { background: var(--error); }
.btn-t { padding: 0 12px; color: var(--primary); }
.acts.col .btn-f, .acts.col .btn-t { width: 100%; }
.steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.step { display: flex; gap: 12px; align-items: flex-start; }
.step .n { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; }
.step b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.step span { display: block; font-size: 12px; line-height: 1.4; color: var(--on-surface-variant); }

.app-page { position: absolute; inset: 0; z-index: 18; background: #fff; display: flex; flex-direction: column; padding-top: 28px; transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.app-page.on { transform: none; }
.app-page header { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 6px; }
.app-page header button.back { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.app-page header h2 { margin: 0; font-size: 20px; font-weight: 600; }
.app-field { flex: 1; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 24px; background: #EEF2F6; }
.app-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--on-surface); user-select: text; -webkit-user-select: text; }
.app-field input::placeholder { color: var(--on-surface-variant); }
.app-list { flex: 1; overflow-y: auto; padding: 4px 0 24px; scrollbar-width: thin; }
.app-li { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 18px; text-align: left; }
.app-li:active, .app-li:hover { background: #F1F4F8; }
.app-li .ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--primary-container); color: var(--on-primary-container); }
.app-li .ico.red { background: var(--error-container); color: var(--error); }
.app-li .tx { flex: 1; min-width: 0; }
.app-li b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-li small { display: block; font-size: 12px; color: var(--on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-empty { padding: 40px 28px; text-align: center; color: var(--on-surface-variant); font-size: 13px; }

.maptypes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.maptypes button { position: relative; padding: 0; border: 2px solid var(--outline-variant) !important; border-radius: 16px; overflow: hidden; text-align: center; font-size: 13px; font-weight: 500; background: #fff; }
.maptypes button.sel { border-color: var(--primary) !important; }
.maptypes .pv { display: block; height: 72px; background-size: cover; background-position: center; }
.maptypes .pv.def { background: linear-gradient(115deg, transparent 44%, #fff 44% 49%, transparent 49%), linear-gradient(20deg, transparent 58%, #FFE08F 58% 63%, transparent 63%), radial-gradient(circle at 24% 70%, #CDE9C6 0 22%, transparent 23%), radial-gradient(circle at 80% 24%, #A8D4F2 0 20%, transparent 21%), #F3F4F1; }
.maptypes .pv.sat { background: linear-gradient(115deg, transparent 44%, #8C887B 44% 47%, transparent 47%), linear-gradient(20deg, transparent 58%, #B8AE8F 58% 62%, transparent 62%), radial-gradient(circle at 24% 70%, #2F5A31 0 24%, transparent 25%), radial-gradient(circle at 80% 24%, #1B3A57 0 20%, transparent 21%), #566644; }
.maptypes .lb { display: block; padding: 8px 0; }
.maptypes .ck { position: absolute; top: 6px; right: 6px; display: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: #fff; }
.maptypes .sel .ck { display: grid; }

.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip { height: 32px; padding: 0 14px; border: 1px solid var(--outline) !important; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--on-surface-variant); }
.chip.sel { background: var(--primary-container); border-color: transparent !important; color: var(--on-primary-container); }
.picker-time { font-size: 44px; font-weight: 500; text-align: center; margin: 4px 0 4px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.picker-sub { text-align: center; font-size: 12px; color: var(--on-surface-variant); margin-bottom: 18px; }

.app-toast { position: absolute; z-index: 40; left: 20px; right: 20px; bottom: 36px; padding: 12px 16px; border-radius: 6px; background: #2D3135; color: #fff; font-size: 13px; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; text-align: center; }
.app-toast.on { opacity: 1; transform: none; }

/* ═════════ Route navigation screen ═════════ */
.rn-top { position: absolute; z-index: 4; left: 16px; right: 16px; top: 24px; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; }
.rn-chip { padding: 6px 12px; border-radius: 8px; background: #F5F7F9; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.2); min-width: 72px; }
.rn-chip small { display: block; font-size: 11px; line-height: 1.3; color: rgba(24,28,32,.7); }
.rn-chip b { display: block; font-size: 14px; font-weight: 700; line-height: 1.35; font-variant-numeric: tabular-nums; }
.rn-title { padding: 8px 16px; border-radius: 10px; background: #F5F7F9; font-size: 14px; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-scrim { position: absolute; z-index: 5; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.rn-scrim.on { pointer-events: auto; }
.rn-panel { position: absolute; z-index: 6; left: 16px; right: 16px; bottom: 20px; border-radius: 16px; background: var(--surface); box-shadow: var(--e8); overflow: hidden; }
.rn-status { padding: 8px 16px; }
.rn-status .r1 { display: flex; justify-content: space-between; align-items: baseline; }
.rn-status .r1 b { font-size: 14px; font-weight: 700; }
.rn-status .r1 span { font-size: 16px; color: var(--primary); font-variant-numeric: tabular-nums; }
.rn-status .bar { height: 6px; margin: 4px 0; border-radius: 3px; background: var(--surface-variant); overflow: hidden; }
.rn-status .bar i { display: block; height: 100%; width: 0; background: var(--primary); border-radius: 3px; }
.rn-status .r2 { display: flex; justify-content: space-between; font-size: 11px; font-variant-numeric: tabular-nums; }
.rn-completed { padding: 8px 16px; text-align: center; font-size: 16px; font-weight: 700; color: var(--primary); }
.rn-reveal { overflow: hidden; height: 0; }
.rn-reveal .sc { height: 100%; overflow-y: auto; scrollbar-width: none; }
.rn-reveal .sc::-webkit-scrollbar { display: none; }
.rn-settings { padding: 8px 16px; display: flex; flex-direction: column; gap: 4px; }
.rn-settings hr { border: 0; height: 1px; background: var(--outline-variant); margin: 0; }
.rn-row { display: flex; align-items: center; min-height: 48px; }
.rn-row > svg:first-child { color: var(--primary); margin-right: 8px; }
.rn-row .tl { flex: 1; display: flex; align-items: center; min-width: 0; gap: 4px; font-size: 14px; font-weight: 500; }
.rn-row .tl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rn-row .val { font-size: 14px; font-weight: 700; color: var(--primary); margin-left: 8px; font-variant-numeric: tabular-nums; }
.rn-info { position: relative; display: grid; place-items: center; width: 48px; height: 48px; margin: 0 -8px 0 -2px; color: var(--on-surface-variant); }
.rn-range { display: flex; justify-content: space-between; padding: 0 8px; font-size: 11px; color: var(--on-surface-variant); margin-top: -2px; }
.rn-modes { display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
.rn-seg { position: relative; display: flex; height: 48px; padding: 4px; border-radius: 12px; background: var(--track); }
.rn-seg .ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 8px; background: var(--primary); transition: transform .3s cubic-bezier(.2,.9,.3,1); }
.rn-seg button { position: relative; flex: 1; display: grid; place-items: center; color: var(--on-surface-variant); transition: color .2s; }
.rn-seg button.sel { color: var(--on-primary); }
.rn-compact { padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.rn-speed .h { display: flex; justify-content: space-between; align-items: center; }
.rn-speed .h b { font-size: 12px; font-weight: 700; }
.rn-speed .h div { display: flex; align-items: center; gap: 8px; color: var(--primary); font-size: 16px; font-weight: 700; }
.rn-speed .ticks { display: flex; justify-content: space-between; padding: 0 8px; font-size: 11px; color: rgba(24,28,32,.6); }
.rn-handle { height: 48px; display: grid; place-items: center; color: var(--primary); cursor: grab; touch-action: none; }
.rn-handle svg { transition: transform .18s; }
.rn-acts { display: flex; gap: 8px; }
.rn-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; height: 48px; padding: 0 8px; border-radius: 12px; font-size: 14px; font-weight: 500; background: var(--tertiary); color: #fff; box-shadow: var(--e2); transition: transform .1s; }
.rn-btn:active { transform: scale(.97); }
.rn-btn.err { background: var(--error-container); color: var(--error); box-shadow: none; }
.rn-btn.pri b { font-weight: 700; }

/* range inputs (M3 slider) */
.app-slider { --p: 0%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 40px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.app-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--primary) var(--p), var(--surface-variant) var(--p)); }
.app-slider::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--primary) var(--p), var(--surface-variant) var(--p)); }
.app-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--primary); border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.app-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--primary); border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.app-slider:focus-visible { outline: 2px solid var(--primary); outline-offset: -6px; border-radius: 8px; }
.sl-ticks { position: relative; }

/* M3 switch */
.app-switch { position: relative; flex: none; width: 52px; height: 32px; border-radius: 16px; border: 2px solid var(--outline); background: #fff; transition: background .2s, border-color .2s; }
.app-switch::after { content: ""; position: absolute; top: 50%; left: 6px; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--outline); transition: all .2s cubic-bezier(.3,.9,.3,1.2); }
.app-switch[aria-checked="true"] { background: var(--primary); border-color: var(--primary); }
.app-switch[aria-checked="true"]::after { left: 22px; width: 24px; height: 24px; margin-top: -12px; background: #fff; }
.app-switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.app-tip { position: absolute; z-index: 30; max-width: 210px; padding: 6px 10px; border-radius: 6px; background: #2D3135; color: #fff; font-size: 12px; line-height: 1.35; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; pointer-events: none; }
.app-tip.on { opacity: 1; transform: none; }

/* ═════════ DeveloperOptionsScreen.kt (1:1 Compose Replica) ═════════ */
.app-page[data-page="devoptions"] { padding-top: 0; background: var(--surface); }
.dev-topbar { display: flex; align-items: center; gap: 4px; height: 84px; padding: 28px 16px 0 4px; background: var(--primary-container); color: var(--on-primary-container); flex: none; }
.dev-topbar button.back { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--on-primary-container); }
.dev-topbar button.back:active { background: rgba(16,74,115,.1); }
.dev-topbar h2 { margin: 0; font-size: 20px; font-weight: 500; color: var(--on-primary-container); }
.dev-scroll { flex: 1; overflow-y: auto; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
.dev-hdr-card { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 12px; background: var(--primary-container); color: var(--on-primary-container); }
.dev-hdr-card b { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; }
.dev-hdr-card small { display: block; font-size: 12px; line-height: 1.35; opacity: .92; margin-top: 2px; }
.dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dev-mcard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 10px; border-radius: 12px; background: var(--surface); border: 1px solid rgba(48,98,140,.4); text-align: center; transition: transform .12s, background .15s; }
.dev-mcard:active { transform: scale(.97); background: #F4F8FC; }
.dev-mcard.other { background: var(--surface-variant); border-color: var(--outline); }
.dev-logo-circle { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-variant); display: grid; place-items: center; flex: none; }
.dev-logo-trio { height: 56px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.dev-logo-trio span { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 0.5px solid var(--outline-variant); display: grid; place-items: center; padding: 3px; }
.dev-mcard b { font-size: 13px; font-weight: 600; color: var(--on-surface); line-height: 1.25; white-space: pre-line; }
.dev-mcard small { font-size: 11px; color: var(--on-surface-variant); line-height: 1.2; }
.dev-legend { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: rgba(24,28,32,.55); }
.dev-legend .lg-r { display: flex; align-items: center; gap: 4px; }
.dev-legend .lg-cur { width: 18px; height: 18px; border-radius: 4px; background: var(--primary); color: #fff; display: grid; place-items: center; }
.dev-step-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #F5F7FA; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.dev-badge { width: 40px; height: 40px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 18px; font-weight: 700; }
.dev-badge.pending { background: var(--surface-variant); color: var(--on-surface-variant); }
.dev-badge.current { background: var(--primary); color: var(--on-primary); }
.dev-badge.current svg { animation: dev-nudge .55s ease-in-out infinite alternate; }
@keyframes dev-nudge { from { transform: translateX(-2px); } to { transform: translateX(4px); } }
.dev-step-card .tx b { display: block; font-size: 14.5px; font-weight: 600; color: var(--on-surface); margin-bottom: 3px; }
.dev-step-card .tx p { margin: 0; font-size: 12.5px; line-height: 1.42; color: var(--on-surface-variant); white-space: pre-line; }
.dev-tips-card { padding: 14px; border-radius: 12px; background: #D5E4F7; color: #3A4857; }
.dev-tips-card .hd { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.dev-tips-card p { margin: 2px 0 0; font-size: 12px; line-height: 1.4; }
.dev-imp-card { padding: 14px 16px; border-radius: 12px; background: var(--surface-variant); color: var(--on-surface-variant); }
.dev-imp-card .hd { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--on-surface); margin-bottom: 6px; }
.dev-imp-card .hd svg { color: var(--error); }
.dev-imp-card p { margin: 0; font-size: 12px; line-height: 1.45; white-space: pre-line; }
.dev-foot { padding: 10px 16px 22px; background: var(--surface); border-top: 1px solid var(--surface-variant); flex: none; }
.dev-foot small { display: block; font-size: 11px; color: rgba(24,28,32,.55); margin: 0 0 4px 4px; }
.dev-foot button { width: 100%; height: 50px; border-radius: 14px; background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 700; box-shadow: var(--e2); transition: transform .1s, background .2s; }
.dev-foot button:active { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .screen * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}