/* Mobile viewport safety: reserve the full bottom navigation footprint so the last card/control stays reachable. */
@media (max-width: 680px) {
  html, body { min-height: 100dvh; }
  .app-shell { min-height: 100dvh; padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .main { min-height: 100dvh; padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .mobile-nav { min-height: calc(64px + env(safe-area-inset-bottom)); padding: 7px 8px max(7px, env(safe-area-inset-bottom)); align-items: stretch; }
  .mobile-nav button { min-width: 0; min-height: 48px; display: flex; flex-direction: column; justify-content: center; gap: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .mobile-nav button span { flex: 0 0 auto; margin-bottom: 0; line-height: 1; }
  .form-footer { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(78px + env(safe-area-inset-bottom)); }
}

@media (max-width: 680px) {
  .mobile-nav { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .mobile-more-trigger { position: relative; }
  .mobile-more-panel { position: fixed; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 12; display: grid; min-width: 156px; max-width: calc(100vw - 20px); padding: 7px; border: 1px solid var(--signal); background: rgba(16,17,16,.98); box-shadow: 0 12px 30px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }
  .mobile-more-panel.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .mobile-more-panel button { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; width: 100%; min-height: 44px; padding: 8px 10px; color: #d8e5e5; text-align: left; }
  .mobile-more-panel button span { width: 19px; margin: 0; color: var(--teal); text-align: center; }
  .mobile-more-panel button.active { background: rgba(255,245,0,.12); color: var(--signal); }
}

/* Lightweight M-OPS transition layer: original SVG/CSS motion, no WebGL or external assets. */
.mops-transition { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; background: #101110; color: #f5f5f0; opacity: 0; pointer-events: all; transition: opacity .24s ease; }
.mops-transition.is-visible { opacity: 1; }.mops-transition.is-exiting { opacity: 0; }
.mops-transition-field { position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(rgba(20,208,208,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(20,208,208,.12) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); animation: mops-field-drift 9s linear infinite; }
.mops-transition-field i { position: absolute; display: block; width: 12px; height: 12px; border: 1px solid var(--signal); transform: rotate(45deg); opacity: .7; animation: mops-node-pulse 1.6s ease-in-out infinite; }.mops-transition-field i:nth-child(1) { top: 17%; left: 13%; }.mops-transition-field i:nth-child(2) { top: 28%; right: 18%; animation-delay: .35s; }.mops-transition-field i:nth-child(3) { bottom: 22%; left: 23%; animation-delay: .7s; }.mops-transition-field i:nth-child(4) { bottom: 17%; right: 13%; animation-delay: 1s; }
.mops-transition-top, .mops-transition-bottom { position: absolute; left: clamp(18px, 5vw, 70px); right: clamp(18px, 5vw, 70px); display: flex; justify-content: space-between; gap: 18px; color: #849b9c; font: 10px "DM Mono", monospace; letter-spacing: .12em; }.mops-transition-top { top: 28px; }.mops-transition-bottom { bottom: 28px; align-items: end; }.mops-transition-core { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(180px, 220px) minmax(270px, 410px); align-items: center; gap: clamp(28px, 7vw, 92px); width: min(760px, calc(100% - 42px)); }.mops-transition-code { position: absolute; top: -36px; left: 0; color: var(--signal); font: 11px "DM Mono", monospace; letter-spacing: .1em; animation: mops-text-in .5s .12s both; }.mops-transition-orbit { position: relative; width: min(220px, 42vw); aspect-ratio: 1; display: grid; place-items: center; color: var(--signal); }.mops-transition-orbit svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-18deg); animation: mops-orbit-turn 8s linear infinite; }.mops-ring { fill: none; stroke: currentColor; stroke-width: 1; }.mops-ring-a { stroke-dasharray: 16 10 70 7 30 12; animation: mops-ring-dash 1.5s ease-in-out infinite; }.mops-ring-b { color: var(--teal); stroke-dasharray: 3 14; animation: mops-ring-dash 2.1s linear infinite reverse; }.mops-ring-cross { stroke: rgba(245,245,240,.34); stroke-width: .7; stroke-dasharray: 2 7; }.mops-ring-signal { fill: none; stroke: var(--signal); stroke-width: 3; stroke-linecap: square; stroke-dasharray: 60 470; animation: mops-ring-signal 1.05s ease-in-out infinite alternate; }.mops-transition-orbit b { position: absolute; font: 700 19px "DM Mono", monospace; letter-spacing: -.1em; }.mops-transition-copy { display: grid; gap: 9px; }.mops-transition-kicker { color: var(--teal); font: 11px "DM Mono", monospace; letter-spacing: .14em; }.mops-transition-copy strong { color: var(--surface); font: 800 clamp(28px, 5vw, 54px)/.9 "Arial Narrow", "DM Mono", sans-serif; letter-spacing: -.08em; }.mops-transition-copy em { max-width: 300px; color: #aebebe; font-size: 13px; line-height: 1.8; font-style: normal; }.mops-transition-log { display: grid; gap: 5px; color: #b5c5c2; font-size: 10px; }.mops-transition-log span { opacity: 0; animation: mops-text-in .45s ease forwards; }.mops-transition-log span:nth-child(1) { animation-delay: .3s; }.mops-transition-log span:nth-child(2) { animation-delay: .55s; }.mops-transition-log span:nth-child(3) { animation-delay: .8s; color: var(--signal); }.mops-transition-progress { position: absolute; left: 50%; bottom: -13px; width: min(360px, 42vw); height: 2px; transform: translateX(-50%); background: rgba(245,245,240,.16); overflow: hidden; }.mops-transition-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--teal), var(--signal)); transform: scaleX(0); transform-origin: left; animation: mops-progress 1.35s cubic-bezier(.2,.7,.2,1) forwards; }.mops-transition-build { color: #708283; white-space: nowrap; }
@keyframes mops-field-drift { from { background-position: 0 0; } to { background-position: 42px 42px; } } @keyframes mops-node-pulse { 0%,100% { opacity: .35; transform: rotate(45deg) scale(.8); } 50% { opacity: 1; transform: rotate(45deg) scale(1.15); } } @keyframes mops-orbit-turn { to { transform: rotate(342deg); } } @keyframes mops-ring-dash { to { stroke-dashoffset: -180; } } @keyframes mops-ring-signal { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -112; } } @keyframes mops-text-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes mops-progress { to { transform: scaleX(1); } }
@media (max-width: 680px) { .mops-transition-top, .mops-transition-bottom { left: 16px; right: 16px; font-size: 9px; }.mops-transition-top { top: 20px; }.mops-transition-bottom { bottom: 20px; }.mops-transition-core { grid-template-columns: 1fr; gap: 22px; justify-items: center; text-align: center; }.mops-transition-code { top: -27px; left: 50%; transform: translateX(-50%); white-space: nowrap; }.mops-transition-orbit { width: min(190px, 52vw); }.mops-transition-copy { justify-items: center; }.mops-transition-copy strong { font-size: clamp(31px, 9vw, 45px); }.mops-transition-copy em { font-size: 12px; }.mops-transition-log { display: none; }.mops-transition-progress { bottom: -11px; width: min(280px, 68vw); }.mops-transition-build { font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { .mops-transition-field, .mops-transition-field i, .mops-transition-orbit svg, .mops-ring-a, .mops-ring-b, .mops-ring-signal, .mops-transition-log span, .mops-transition-progress i { animation: none; }.mops-transition-progress i { transform: scaleX(1); }.mops-transition-copy, .mops-transition-code { animation: none; } }