.ib-share-slider { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center; }
.ib-share-list { margin:0; padding:0; list-style:none; display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 48px) / 3); gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -ms-overflow-style:none; scrollbar-width:none; }
.ib-share-list { min-height:190px; align-content:start; }
.ib-share-list::-webkit-scrollbar { display:none; }
.ib-share-item { scroll-snap-align:start; }
.ib-share-nav { display:flex; align-items:center; gap:10px; }
.ib-share-arrow { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; border:1px solid #bfd1ea; background:#eef4ff; color:#3a5274; font-size:17px; transition:all .2s ease; }
.ib-share-arrow:hover { border-color:#7ea3d8; background:#dfeaff; color:#1f3f6e; box-shadow:0 8px 16px rgba(114,135,170,0.2); }
.ib-share-arrow:disabled { opacity:.6; cursor:default; box-shadow:none; color:#8ea1bb; background:#f1f5fb; border-color:#d4deeb; }
.ib-share-thumb { position:relative; height:108px; border-radius:8px; overflow:hidden; border:1px solid #dfe7f2; background:#eaf1fb; box-shadow:0 10px 20px rgba(108,126,165,0.10); display:block; }
.ib-share-thumb:before, .ib-share-thumb:after { content:""; position:absolute; inset:auto; }
.ib-share-label { position:absolute; z-index:2; top:12px; left:12px; min-width:48px; height:30px; padding:0 10px; border-radius:6px; display:flex; align-items:center; justify-content:center; background:#dce8ff; color:#3062ff; font-size:13px; font-weight:900; }
.ib-share-thumb--dark { background:linear-gradient(135deg,#092045 0%,#102e62 58%,#0b1630 100%); }
.ib-share-thumb--dark:before { left:24px; right:24px; bottom:18px; height:46px; background:repeating-linear-gradient(90deg,#e84d68 0 4px,transparent 4px 18px), linear-gradient(90deg,#35b6ff,#1546ff); opacity:.78; clip-path:polygon(0 65%,10% 42%,20% 58%,30% 24%,40% 52%,50% 18%,60% 38%,70% 20%,80% 45%,90% 26%,100% 50%,100% 100%,0 100%); }
.ib-share-thumb--dark:after { right:18px; top:18px; width:74px; height:54px; border-radius:8px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.02)); }
.ib-share-thumb--device { background:linear-gradient(135deg,#d7dce4 0%,#7d8795 55%,#2b3441 100%); }
.ib-share-thumb--device:before { left:38px; right:30px; top:26px; height:48px; border-radius:8px; background:linear-gradient(135deg,#1f2631,#3e4c5f); box-shadow:24px 14px 0 rgba(14,24,40,.25), -28px 20px 0 rgba(255,255,255,.22); transform:rotate(-7deg); }
.ib-share-thumb--device:after { right:16px; top:10px; width:66px; height:90px; background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.1)); transform:skewX(-14deg); }
.ib-share-thumb--mqtt { background:linear-gradient(135deg,#48a5ff 0%,#1263e6 100%); }
.ib-share-thumb--mqtt:before { left:34px; top:34px; width:54px; height:44px; border-radius:10px; background:linear-gradient(135deg,#364b72,#14284f); box-shadow:0 8px 0 rgba(7,30,72,.18); }
.ib-share-thumb--mqtt:after { right:28px; top:42px; width:104px; height:28px; background:rgba(255,255,255,.9); clip-path:polygon(0 42%,62% 42%,62% 20%,100% 50%,62% 80%,62% 58%,0 58%); opacity:.92; }
.ib-share-title { display:block; margin:13px 0 8px; color:#26344e; font-size:16px; line-height:1.35; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
a.ib-share-title:hover { color:#2f57ff; text-decoration:none; }
.ib-share-meta { color:#8793a6; font-size:13px; font-weight:700; }
.ib-share-stats { display:flex; align-items:center; gap:18px; margin-top:13px; color:#7f8ca1; font-size:13px; font-weight:700; }
.ib-share-stats span { display:inline-flex; align-items:center; gap:7px; }
.ib-fake-item { opacity:.92; }
@media (max-width:1100px) { .ib-share-list { grid-auto-columns:calc((100% - 24px) / 2); } }
@media (max-width:760px) { .ib-share-slider { grid-template-columns:1fr; } .ib-share-list { grid-auto-columns:100%; } .ib-share-nav { display:none; } }