#modules .md-head { margin-bottom: 44px; }
#modules .md-stage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; }
#modules .md-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#modules .md-trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
#modules .md-trace path { fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--cyan)); opacity: .85; }
#modules .md-tile { position: relative; z-index: 1; display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 16px 18px; border-radius: 16px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); color: var(--text); font: inherit; opacity: 0; transform: scale(.88) translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .3s, background .3s, box-shadow .3s; }
#modules .md-tile.in { opacity: 1; transform: none; }
#modules .md-tile { background: #0b1a2e; }
#modules .md-tile.lit { animation: md-lit 1.1s ease; }
@keyframes md-lit { 0% { box-shadow: 0 0 0 0 rgba(34,211,238,0) } 30% { box-shadow: 0 0 0 2px var(--cyan), 0 0 34px rgba(34,211,238,.55) } 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0) } }
#modules .md-tile:hover, #modules .md-tile:focus-visible { border-color: rgba(34,211,238,.5); outline: none; }
#modules .md-tile.on { background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(14,165,233,.06)), #0b1a2e; border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(34,211,238,.3), 0 18px 50px -20px rgba(34,211,238,.45); }
#modules .md-tile .icon { flex: none; width: 42px; height: 42px; }
#modules .md-tile .icon svg { width: 21px; height: 21px; transition: transform .4s var(--ease); }
#modules .md-tile b { display: block; font: 600 17px/1.2 var(--head); color: var(--white); margin: 2px 0 4px; }
#modules .md-tile small { display: block; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
/* micro animations */
#modules .md-tile:hover .ic-bell svg, #modules .md-tile.on .ic-bell svg { animation: md-ring .8s ease; transform-origin: 50% 10%; }
#modules .md-tile:hover .ic-pin svg, #modules .md-tile.on .ic-pin svg { animation: md-drop .7s var(--ease); }
#modules .md-tile:hover .ic-phone svg, #modules .md-tile.on .ic-phone svg { animation: md-buzz .5s linear; }
#modules .md-tile:hover .ic-spark polyline, #modules .md-tile.on .ic-spark polyline { stroke-dasharray: 40; animation: md-draw .9s ease; }
#modules .md-tile:hover .ic-spin svg, #modules .md-tile.on .ic-spin svg { transform: rotate(-25deg) scale(1.1); }
#modules .md-tile:hover .ic-drop svg, #modules .md-tile.on .ic-drop svg { animation: md-drip .9s ease; }
#modules .md-tile:hover .ic-pop svg, #modules .md-tile.on .ic-pop svg { transform: scale(1.18); }
@keyframes md-ring { 0%,100% { transform: rotate(0) } 20% { transform: rotate(18deg) } 40% { transform: rotate(-14deg) } 60% { transform: rotate(8deg) } 80% { transform: rotate(-4deg) } }
@keyframes md-drop { 0% { transform: translateY(-10px); opacity: 0 } 60% { transform: translateY(2px); opacity: 1 } 100% { transform: none } }
@keyframes md-buzz { 0%,100% { transform: none } 20%,60% { transform: translateX(-2px) rotate(-4deg) } 40%,80% { transform: translateX(2px) rotate(4deg) } }
@keyframes md-draw { from { stroke-dashoffset: 40 } to { stroke-dashoffset: 0 } }
@keyframes md-drip { 0% { transform: translateY(-6px) scale(.8) } 60% { transform: translateY(1px) scale(1.05) } 100% { transform: none } }

/* device */
#modules .md-device { border-radius: 18px; background: linear-gradient(180deg, #0f2440, #091729); border: 1px solid rgba(120,170,220,.25); box-shadow: 0 40px 120px -40px rgba(14,165,233,.5), inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden; }
#modules .md-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(5,12,23,.5); }
#modules .md-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(214,226,238,.18); }
#modules .md-url { margin-left: 12px; font: 500 12.5px/1 var(--body); color: var(--muted); padding: 6px 12px; border-radius: 8px; background: rgba(255,255,255,.04); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modules .md-url b { color: var(--cyan); font-weight: 600; }
#modules .md-screen { position: relative; aspect-ratio: 16 / 10.5; padding: 20px; overflow: hidden; }
#modules .md-view { position: absolute; inset: 20px; display: flex; flex-direction: column; gap: 12px; animation: md-in .55s var(--ease) both; }
.hx-static #modules .md-view { animation: none; }
@keyframes md-in { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
#modules .md-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 13px; }
#modules .md-cap { color: var(--muted); }
#modules .md-foot a { text-decoration: none; font-weight: 600; white-space: nowrap; }
/* mock ui atoms */
#modules .mk-top { display: flex; justify-content: space-between; align-items: center; }
#modules .mk-t { font: 600 16px/1.2 var(--head); color: var(--white); }
#modules .mk-chip { font: 600 11px/1 var(--body); padding: 6px 10px; border-radius: 999px; background: rgba(34,211,238,.12); color: var(--cyan); border: 1px solid rgba(34,211,238,.3); }
#modules .mk-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.035); border: 1px solid rgba(120,170,220,.08); font-size: 13px; color: var(--text); }
#modules .mk-row .sp { flex: 1; }
#modules .mk-row em { font-style: normal; color: var(--muted); font-size: 12px; }
#modules .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); flex: none; box-shadow: 0 0 8px currentColor; }
#modules .dot.r { background: var(--red); } #modules .dot.g { background: var(--gold); } #modules .dot.m { background: var(--muted); box-shadow: none; }
#modules .mk-chart { flex: 1; min-height: 0; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(120,170,220,.08); padding: 10px; }
#modules .mk-chart svg { width: 100%; height: 100%; display: block; }
#modules .mk-bars rect { fill: url(#md-g); }
#modules .mk-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#modules .mk-k { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.035); font-size: 11px; color: var(--muted); }
#modules .mk-k b { display: block; font: 600 15px/1.3 var(--head); color: var(--white); }
#modules .mk-av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 10px/1 var(--body); color: #04121f; background: var(--cyan); flex: none; }
#modules .mk-prog { height: 6px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; width: 90px; }
#modules .mk-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); border-radius: 6px; }
#modules .mk-phone { margin: 0 auto; height: 100%; aspect-ratio: 9 / 17; border-radius: 22px; border: 2px solid rgba(214,226,238,.25); padding: 14px 10px; display: flex; flex-direction: column; gap: 8px; background: #071324; }
#modules .mk-phone .mk-row { padding: 7px 8px; font-size: 11px; }

@media (max-width: 1000px) { #modules .md-stage { grid-template-columns: 1fr; } #modules .md-device { order: -1; } }
@media (max-width: 600px) {
  #modules .md-head { margin-bottom: 26px; }
  #modules .md-grid { gap: 10px; }
  #modules .md-tile { flex-direction: column; gap: 8px; padding: 12px; }
  #modules .md-tile .icon { width: 36px; height: 36px; }
  #modules .md-tile b { font-size: 15px; } #modules .md-tile small { font-size: 12px; }
  #modules .md-screen { aspect-ratio: 4 / 3.4; padding: 14px; } #modules .md-view { inset: 14px; gap: 8px; }
  #modules .md-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
  #modules .mk-row { font-size: 12px; padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) { #modules .md-tile { opacity: 1; transform: none; transition: none; } #modules .md-view { animation: none; } #modules * { animation: none !important; } }