/* ============================================================
   BOTVIET SMART SYNC BOARD R47
   Scope: ONLY "Nội dung đồng bộ thông minh" in /app/connections.
   All counts, images, status and timestamps are rendered from live state.
   ============================================================ */

.connections-r42 .r47-sync-board{
  position:relative!important;
  isolation:isolate!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(520px,.92fr)!important;
  width:100%!important;
  min-height:252px!important;
  margin:18px auto 0!important;
  overflow:hidden!important;
  border-radius:24px!important;
  border:1px solid rgba(50,152,255,.78)!important;
  background:
    radial-gradient(circle at 85% 20%,rgba(37,101,232,.17),transparent 30%),
    linear-gradient(150deg,rgba(5,29,65,.99),rgba(3,17,42,.995))!important;
  box-shadow:
    inset 0 0 0 1px rgba(85,190,255,.035),
    inset 0 0 36px rgba(42,123,255,.045),
    0 18px 44px rgba(0,0,0,.20),
    0 0 24px rgba(24,121,255,.08)!important;
}

.connections-r42 .r47-sync-board::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0 46%,rgba(49,144,255,.055) 49%,transparent 52%),
    linear-gradient(180deg,rgba(52,153,255,.08),transparent 4%);
}

.connections-r42 .r47-sync-board::after{
  content:"";
  position:absolute;
  z-index:0;
  top:-80%;
  bottom:-80%;
  left:-18%;
  width:13%;
  pointer-events:none;
  transform:rotate(16deg);
  background:linear-gradient(90deg,transparent,rgba(100,223,255,.075),transparent);
  filter:blur(4px);
  animation:r47BoardSweep 8.6s ease-in-out infinite;
}

/* LEFT */
.connections-r42 .r47-sync-main{
  position:relative!important;
  z-index:2!important;
  min-width:0!important;
  padding:20px 24px 16px!important;
  border-right:1px solid rgba(54,133,220,.38)!important;
  box-sizing:border-box!important;
}

.connections-r42 .r47-sync-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin:0!important;
}

.connections-r42 .r47-sync-head h2{
  margin:0 0 6px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:#fff!important;
  font-size:23px!important;
  line-height:1.12!important;
  letter-spacing:-.025em!important;
  font-weight:900!important;
}

.connections-r42 .r47-sync-head p{
  margin:0!important;
  color:#aebed5!important;
  font-size:13px!important;
  line-height:1.4!important;
}

.connections-r42 .r47-section-icon{
  width:31px;height:31px;
  display:grid;place-items:center;
  color:#4ca9ff;
  filter:drop-shadow(0 0 8px rgba(35,145,255,.36));
}

.connections-r42 .r47-section-icon svg{
  width:30px!important;height:30px!important;
  fill:none!important;stroke:currentColor!important;stroke-width:2.6!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
}

.connections-r42 .r47-sync-all{
  flex:0 0 auto!important;
  height:44px!important;
  min-width:164px!important;
  padding:0 16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border-radius:13px!important;
  border:1px solid #2b91ff!important;
  background:linear-gradient(145deg,#092f66,#072650)!important;
  color:#48c7ff!important;
  font-size:12px!important;
  font-weight:850!important;
  box-shadow:
    inset 0 0 13px rgba(53,155,255,.06),
    0 0 18px rgba(27,128,255,.11)!important;
  transition:transform .18s ease,filter .18s ease!important;
}

.connections-r42 .r47-sync-all:hover{
  transform:translateY(-2px)!important;
  filter:brightness(1.10)!important;
}

.connections-r42 .r47-sync-all svg{
  width:20px!important;height:20px!important;
  fill:none!important;stroke:currentColor!important;stroke-width:2.8!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
}

.connections-r42 .r47-sync-all.is-loading svg{
  animation:r47Spin .85s linear infinite!important;
}

/* Metric cards */
.connections-r42 .r47-metric-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  margin-top:17px!important;
}

.connections-r42 .r47-metric-card{
  position:relative!important;
  min-width:0!important;
  min-height:126px!important;
  overflow:hidden!important;
  padding:13px 12px 37px!important;
  border-radius:16px!important;
  border:1px solid rgba(52,121,210,.39)!important;
  background:
    radial-gradient(circle at 18% 10%,rgba(40,114,230,.10),transparent 34%),
    linear-gradient(145deg,rgba(8,40,84,.91),rgba(6,27,62,.94))!important;
  box-shadow:inset 0 0 18px rgba(41,126,255,.035)!important;
  transition:transform .23s ease,border-color .23s ease,box-shadow .23s ease!important;
}

.connections-r42 .r47-metric-card:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(62,159,255,.68)!important;
  box-shadow:0 12px 25px rgba(0,0,0,.18),0 0 18px rgba(35,121,255,.09)!important;
}

.connections-r42 .r47-metric-icon{
  position:absolute!important;
  left:12px!important;top:12px!important;
  width:40px!important;height:40px!important;
  display:grid!important;place-items:center!important;
  border-radius:12px!important;
  color:#59aaff!important;
  background:linear-gradient(145deg,rgba(24,91,187,.62),rgba(12,56,132,.64))!important;
  border:1px solid rgba(73,158,255,.18)!important;
  box-shadow:0 0 16px rgba(24,116,255,.10)!important;
}

.connections-r42 .r47-metric-icon svg{
  width:24px!important;height:24px!important;
  fill:none!important;stroke:currentColor!important;stroke-width:2.3!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
}

.connections-r42 .r47-metric-copy{
  margin-left:49px!important;
  min-width:0!important;
}

.connections-r42 .r47-metric-copy small{
  display:block!important;
  color:#aebdd2!important;
  font-size:11px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}

.connections-r42 .r47-metric-copy strong{
  display:block!important;
  margin:3px 0 1px!important;
  color:#fff!important;
  font-size:22px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:-.025em!important;
}

.connections-r42 .r47-metric-copy em{
  display:block!important;
  margin-top:5px!important;
  font-style:normal!important;
  font-size:10px!important;
  font-weight:850!important;
}

.connections-r42 .r47-metric-copy em .up,
.connections-r42 .r47-metric-copy em .is-live{color:#27eeb4!important}
.connections-r42 .r47-metric-copy em .down{color:#ff7087!important}
.connections-r42 .r47-metric-copy em .flat{color:#a5bbd4!important}

.connections-r42 .r47-metric-spark{
  position:absolute!important;
  left:10px!important;right:10px!important;bottom:5px!important;
  height:31px!important;
  color:#22a8ff!important;
}

.connections-r42 .r47-metric-card.tone-2 .r47-metric-spark{color:#a75cff!important}
.connections-r42 .r47-metric-card.tone-3 .r47-metric-spark{color:#1ddda0!important}
.connections-r42 .r47-metric-card.tone-4 .r47-metric-spark{color:#ffbd2e!important}

.connections-r42 .r47-metric-spark svg{
  display:block!important;
  width:100%!important;height:100%!important;
  overflow:visible!important;
}

.connections-r42 .r47-spark-area{
  fill:currentColor!important;
  opacity:.11!important;
}

.connections-r42 .r47-spark-line{
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.15!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  filter:drop-shadow(0 0 4px currentColor)!important;
  stroke-dasharray:190!important;
  stroke-dashoffset:190!important;
  animation:r47Draw 2.6s ease forwards!important;
}

.connections-r42 .r47-spark-dot{
  fill:currentColor!important;
  filter:drop-shadow(0 0 4px currentColor)!important;
  animation:r47DotPulse 1.8s ease-in-out infinite!important;
}

.connections-r42 .r47-live-foot{
  margin-top:11px!important;
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:14px!important;
  color:#849dbd!important;
  font-size:10px!important;
}

.connections-r42 .r47-live-foot span:first-child{
  display:flex!important;align-items:center!important;gap:7px!important;
}

.connections-r42 .r47-live-foot i{
  width:7px!important;height:7px!important;
  border-radius:50%!important;
  background:#1fe7ad!important;
  box-shadow:0 0 10px #1fd5a5!important;
  animation:r47DotPulse 1.7s ease-in-out infinite!important;
}

/* RIGHT */
.connections-r42 .r47-live-preview{
  position:relative!important;
  z-index:2!important;
  min-width:0!important;
  min-height:252px!important;
  padding:15px 16px!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:116px minmax(180px,.86fr) minmax(205px,1.14fr)!important;
  gap:12px!important;
  align-items:center!important;
  box-sizing:border-box!important;
  background:
    radial-gradient(circle at 52% 52%,rgba(35,116,255,.15),transparent 37%),
    linear-gradient(145deg,rgba(5,26,61,.22),rgba(2,17,42,.04))!important;
}

.connections-r42 .r47-live-preview::before{
  content:"";
  position:absolute;
  z-index:0;
  width:350px;height:220px;
  left:34%;top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(31,122,255,.18),rgba(25,80,200,.04) 48%,transparent 70%);
  filter:blur(10px);
  animation:r47Aura 5.8s ease-in-out infinite;
}

.connections-r42 .r47-energy-line{
  position:absolute;
  z-index:1;
  left:78px;
  width:235px;
  height:2px;
  transform-origin:left center;
  background:linear-gradient(90deg,transparent,#2e86ff,#54e3ff,transparent);
  filter:drop-shadow(0 0 5px #258bff);
  opacity:.42;
  pointer-events:none;
}

.connections-r42 .r47-line-a{top:41%;transform:rotate(-8deg);animation:r47LinePulse 2.8s ease-in-out infinite}
.connections-r42 .r47-line-b{top:61%;transform:rotate(7deg);animation:r47LinePulse 2.8s .8s ease-in-out infinite}

/* Channel stack */
.connections-r42 .r47-channel-stack{
  position:relative!important;
  z-index:4!important;
  display:flex!important;
  flex-direction:column!important;
  gap:9px!important;
  min-width:0!important;
}

.connections-r42 .r47-channel-stack>span{
  position:relative!important;
  min-height:38px!important;
  display:grid!important;
  grid-template-columns:26px minmax(0,1fr) 7px!important;
  gap:7px!important;
  align-items:center!important;
  padding:5px 7px!important;
  border-radius:11px!important;
  border:1px solid rgba(54,132,232,.38)!important;
  background:linear-gradient(145deg,rgba(7,35,78,.94),rgba(5,26,61,.95))!important;
  color:#dbe9fa!important;
  box-shadow:0 7px 16px rgba(0,0,0,.12)!important;
  transition:.2s ease!important;
}

.connections-r42 .r47-channel-stack>span.is-live{
  border-color:rgba(55,152,255,.62)!important;
  box-shadow:0 0 16px rgba(32,121,255,.08)!important;
}

.connections-r42 .r47-channel-stack>span:hover{
  transform:translateX(3px)!important;
  border-color:#399fff!important;
}

.connections-r42 .r47-channel-stack .connection-platform-icon{
  width:24px!important;height:24px!important;border-radius:7px!important;
}

.connections-r42 .r47-channel-stack .connection-platform-icon svg{
  width:16px!important;height:16px!important;
}

.connections-r42 .r47-channel-stack b{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:8px!important;
}

.connections-r42 .r47-channel-stack>span>i{
  width:6px;height:6px;
  border-radius:50%;
  background:#617895;
}

.connections-r42 .r47-channel-stack>span.is-live>i{
  background:#22e8b0;
  box-shadow:0 0 8px #1ad2a0;
  animation:r47DotPulse 1.7s ease-in-out infinite;
}

/* Device/product visual */
.connections-r42 .r47-device-zone{
  position:relative!important;
  z-index:4!important;
  min-width:0!important;
  height:215px!important;
  perspective:700px!important;
  transform-style:preserve-3d!important;
}

.connections-r42 .r47-device-back{
  position:absolute;
  z-index:1;
  left:50%;top:50%;
  width:126px;height:190px;
  transform:translate(-40%,-48%) rotateY(-12deg) rotateZ(1deg);
  border-radius:24px;
  border:4px solid rgba(57,103,197,.78);
  background:linear-gradient(155deg,#16386d,#091d40);
  box-shadow:0 18px 30px rgba(0,0,0,.30),0 0 22px rgba(30,103,255,.16);
  opacity:.72;
}

.connections-r42 .r47-device-card{
  position:absolute!important;
  z-index:3!important;
  left:50%!important;top:50%!important;
  width:132px!important;height:202px!important;
  transform:translate(-58%,-50%) rotateY(-8deg) rotateX(2deg)!important;
  border-radius:25px!important;
  border:4px solid #254c99!important;
  background:linear-gradient(155deg,#193d77,#081d42)!important;
  box-shadow:
    inset 0 0 0 1px rgba(108,164,255,.38),
    0 19px 32px rgba(0,0,0,.34),
    0 0 25px rgba(30,111,255,.20)!important;
  animation:r47DeviceFloat 5.2s ease-in-out infinite!important;
}

.connections-r42 .r47-device-top{
  height:18px!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:3px!important;
  padding:0 8px!important;
}

.connections-r42 .r47-device-top i{
  width:3px;height:3px;border-radius:50%;background:#98b2d6;
}

.connections-r42 .r47-product-stage{
  position:absolute!important;
  left:7px!important;right:7px!important;top:19px!important;bottom:8px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border-radius:17px!important;
  background:
    radial-gradient(circle at 50% 30%,rgba(31,115,255,.20),transparent 48%),
    linear-gradient(145deg,#123472,#071936)!important;
}

.connections-r42 .r47-product-stage img{
  width:100%!important;height:100%!important;
  object-fit:cover!important;
  display:block!important;
  animation:r47ProductKenBurns 8s ease-in-out infinite alternate!important;
}

.connections-r42 .r47-product-placeholder{
  width:100%!important;height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  color:#56b9ff!important;
}

.connections-r42 .r47-product-placeholder svg{
  width:48px!important;height:48px!important;
  fill:none!important;stroke:currentColor!important;stroke-width:2!important;
  opacity:.9!important;
  filter:drop-shadow(0 0 9px #208cff)!important;
}

.connections-r42 .r47-product-placeholder span{
  max-width:90px!important;
  text-align:center!important;
  color:#9db7d9!important;
  font-size:8px!important;
}

.connections-r42 .r47-secondary-device{
  position:absolute!important;
  z-index:2!important;
  right:0!important;top:34px!important;
  width:74px!important;height:147px!important;
  overflow:hidden!important;
  border-radius:18px!important;
  border:3px solid #2c579f!important;
  background:#0a2550!important;
  box-shadow:0 13px 24px rgba(0,0,0,.28)!important;
  transform:rotateY(13deg) rotateZ(2deg)!important;
  animation:r47SecondaryFloat 5.8s .7s ease-in-out infinite!important;
}

.connections-r42 .r47-secondary-device img{
  width:100%!important;height:100%!important;object-fit:cover!important;
}

.connections-r42 .r47-device-shadow{
  position:absolute;
  z-index:0;
  left:50%;bottom:1px;
  width:155px;height:30px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(25,106,255,.24);
  filter:blur(13px);
  animation:r47ShadowPulse 5.2s ease-in-out infinite;
}

/* Real product list */
.connections-r42 .r47-content-live{
  position:relative!important;
  z-index:4!important;
  min-width:0!important;
  min-height:205px!important;
  padding:10px!important;
  border-radius:16px!important;
  border:1px solid rgba(53,132,229,.42)!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(42,97,206,.10),transparent 35%),
    linear-gradient(155deg,rgba(7,32,72,.96),rgba(4,24,57,.97))!important;
  box-shadow:0 14px 28px rgba(0,0,0,.18)!important;
}

.connections-r42 .r47-content-live>header{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  margin-bottom:9px!important;
}

.connections-r42 .r47-content-live>header>b{
  color:#e3edf9!important;
  font-size:10px!important;
}

.connections-r42 .r47-content-live>header>span{
  min-height:22px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  padding:4px 8px!important;
  border-radius:999px!important;
  background:rgba(0,176,124,.18)!important;
  color:#51e8ba!important;
  font-size:7px!important;
  font-weight:850!important;
}

.connections-r42 .r47-content-live>header>span i{
  width:5px!important;height:5px!important;border-radius:50%!important;
  background:#25e9ad!important;
  box-shadow:0 0 7px #1cdaa4!important;
  animation:r47DotPulse 1.5s ease-in-out infinite!important;
}

.connections-r42 .r47-content-live-list{
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
}

.connections-r42 .r47-content-row{
  min-height:47px!important;
  display:grid!important;
  grid-template-columns:45px minmax(0,1fr) 24px!important;
  gap:8px!important;
  align-items:center!important;
  padding:5px 6px!important;
  border-radius:10px!important;
  background:linear-gradient(90deg,rgba(10,47,94,.74),rgba(9,39,80,.57))!important;
  border:1px solid rgba(61,123,202,.08)!important;
  opacity:0!important;
  animation:r47RowIn .5s var(--r47-row-delay) ease forwards!important;
  transition:transform .18s ease,background .18s ease!important;
}

.connections-r42 .r47-content-row:hover{
  transform:translateX(-2px)!important;
  background:linear-gradient(90deg,rgba(12,56,111,.88),rgba(9,42,86,.72))!important;
}

.connections-r42 .r47-content-thumb{
  width:45px!important;height:37px!important;
  display:grid!important;place-items:center!important;
  overflow:hidden!important;
  border-radius:8px!important;
  background:#0b3169!important;
  color:#5bc0ff!important;
}

.connections-r42 .r47-content-thumb img{
  width:100%!important;height:100%!important;object-fit:cover!important;
}

.connections-r42 .r47-content-thumb svg{
  width:23px!important;height:23px!important;
  fill:none!important;stroke:currentColor!important;stroke-width:2.1!important;
}

.connections-r42 .r47-content-copy{
  min-width:0!important;
}

.connections-r42 .r47-content-copy b{
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#fff!important;
  font-size:8.5px!important;
  line-height:1.2!important;
}

.connections-r42 .r47-content-copy small{
  display:block!important;
  min-width:0!important;
  margin-top:3px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#7e9cbc!important;
  font-size:6.5px!important;
}

.connections-r42 .r47-content-copy small strong{
  color:#3fe5b5!important;
  font-weight:800!important;
}

.connections-r42 .r47-mini-provider{
  width:23px!important;height:23px!important;
  display:grid!important;place-items:center!important;
  opacity:.85!important;
}

.connections-r42 .r47-mini-provider .connection-platform-icon{
  width:22px!important;height:22px!important;border-radius:7px!important;
}

.connections-r42 .r47-mini-provider .connection-platform-icon svg{
  width:14px!important;height:14px!important;
}

.connections-r42 .r47-content-empty{
  min-height:155px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:15px!important;
  text-align:center!important;
  color:#819cbc!important;
}

.connections-r42 .r47-content-empty svg{
  width:34px!important;height:34px!important;
  fill:none!important;stroke:#55baff!important;stroke-width:2!important;
  opacity:.8!important;
}

.connections-r42 .r47-content-empty b{color:#dbe8f8!important;font-size:10px!important}
.connections-r42 .r47-content-empty span{max-width:180px!important;font-size:8px!important;line-height:1.45!important}

/* Animations */
@keyframes r47BoardSweep{
  0%,27%{left:-18%;opacity:0}
  39%{opacity:.9}
  63%{left:116%;opacity:.65}
  72%,100%{left:116%;opacity:0}
}
@keyframes r47Spin{to{transform:rotate(360deg)}}
@keyframes r47Draw{to{stroke-dashoffset:0}}
@keyframes r47DotPulse{
  0%,100%{opacity:.55;transform:scale(.82)}
  50%{opacity:1;transform:scale(1.24)}
}
@keyframes r47Aura{
  0%,100%{opacity:.58;transform:translate(-50%,-50%) scale(.93)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
}
@keyframes r47LinePulse{
  0%,100%{opacity:.18;filter:drop-shadow(0 0 3px #258bff)}
  50%{opacity:.58;filter:drop-shadow(0 0 7px #48cfff)}
}
@keyframes r47DeviceFloat{
  0%,100%{transform:translate(-58%,-50%) rotateY(-8deg) rotateX(2deg) translateY(0)}
  50%{transform:translate(-58%,-50%) rotateY(-3deg) rotateX(0deg) translateY(-7px)}
}
@keyframes r47SecondaryFloat{
  0%,100%{transform:rotateY(13deg) rotateZ(2deg) translateY(0)}
  50%{transform:rotateY(8deg) rotateZ(0deg) translateY(-5px)}
}
@keyframes r47ShadowPulse{
  0%,100%{opacity:.42;transform:translateX(-50%) scale(.9)}
  50%{opacity:.7;transform:translateX(-50%) scale(1.08)}
}
@keyframes r47ProductKenBurns{
  0%{transform:scale(1.01)}
  100%{transform:scale(1.075)}
}
@keyframes r47RowIn{
  from{opacity:0;transform:translateX(10px)}
  to{opacity:1;transform:none}
}

/* Tablet */
@media(max-width:1280px){
  .connections-r42 .r47-sync-board{
    grid-template-columns:1fr!important;
  }
  .connections-r42 .r47-sync-main{
    border-right:0!important;
    border-bottom:1px solid rgba(54,133,220,.38)!important;
  }
  .connections-r42 .r47-live-preview{
    grid-template-columns:120px minmax(190px,.8fr) minmax(260px,1.2fr)!important;
    min-height:250px!important;
  }
}

/* Mobile */
@media(max-width:720px){
  .connections-r42 .r47-sync-main{
    padding:17px 14px 14px!important;
  }

  .connections-r42 .r47-sync-head{
    flex-direction:column!important;
    gap:12px!important;
  }

  .connections-r42 .r47-sync-all{
    width:100%!important;
  }

  .connections-r42 .r47-metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }

  .connections-r42 .r47-metric-card{
    min-height:119px!important;
  }

  .connections-r42 .r47-live-foot{
    align-items:flex-start!important;
    flex-direction:column!important;
  }

  .connections-r42 .r47-live-preview{
    grid-template-columns:86px minmax(0,1fr)!important;
    gap:10px!important;
    padding:14px!important;
  }

  .connections-r42 .r47-channel-stack{
    gap:7px!important;
  }

  .connections-r42 .r47-channel-stack>span{
    min-height:34px!important;
    grid-template-columns:24px 1fr!important;
  }
  .connections-r42 .r47-channel-stack>span>i{display:none!important}

  .connections-r42 .r47-device-zone{
    height:205px!important;
  }

  .connections-r42 .r47-content-live{
    grid-column:1/-1!important;
    width:100%!important;
  }

  .connections-r42 .r47-energy-line{
    display:none!important;
  }
}

@media(max-width:430px){
  .connections-r42 .r47-sync-head h2{
    font-size:19px!important;
  }

  .connections-r42 .r47-metric-copy strong{
    font-size:19px!important;
  }

  .connections-r42 .r47-metric-card{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  .connections-r42 .r47-metric-icon{
    width:35px!important;height:35px!important;
  }

  .connections-r42 .r47-metric-copy{
    margin-left:42px!important;
  }

  .connections-r42 .r47-live-preview{
    grid-template-columns:1fr!important;
  }

  .connections-r42 .r47-channel-stack{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .connections-r42 .r47-device-zone{
    min-height:205px!important;
  }

  .connections-r42 .r47-content-live{
    grid-column:auto!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .connections-r42 .r47-sync-board::after,
  .connections-r42 .r47-spark-line,
  .connections-r42 .r47-spark-dot,
  .connections-r42 .r47-live-preview::before,
  .connections-r42 .r47-energy-line,
  .connections-r42 .r47-device-card,
  .connections-r42 .r47-secondary-device,
  .connections-r42 .r47-device-shadow,
  .connections-r42 .r47-product-stage img,
  .connections-r42 .r47-content-row{
    animation:none!important;
  }
  .connections-r42 .r47-content-row{opacity:1!important}
}