/* Тултип */
.tt{ position:absolute; left:0; top:49px; z-index:9998; min-width:350px; max-width:min(90vw,380px); color:#e5e7eb; background: rgba(17, 24, 39, .96); border:1px solid rgba(255,255,255,.06); border-radius:14px; box-shadow: 0 14px 60px rgba(0,0,0,.55); padding:21px; transform-origin: top center; animation:ttIn .14s ease both }
.tt[hidden]{ display:none !important }
.tt.is-closing{ animation: ttIn .14s ease reverse both }
.tt__title{ font-size:14px; font-weight:600; margin-bottom:8px }
.tt__content{ display:grid; gap:10px }
.tt__img{ display:block; width:100%; height:160px; object-fit:cover; border-radius:10px; box-shadow: 0 6px 20px rgba(0,0,0,.35) }
.tt__caption{ font-size:12px; color:var(--c-muted) }
@keyframes ttIn{ from{ opacity:0; transform: translateY(6px) scale(.98) } to{ opacity:1; transform: translateY(0) scale(1) } }
/* Стрелочка */
.tt::after{ content:""; position:absolute; width:10px; height:10px; background: inherit; border: inherit; border-left:none; border-top:none; transform: rotate(45deg); box-shadow: -2px 2px 12px rgba(0,0,0,.25); }
.tt.pos-top::after{ bottom:-6px; left:calc(50% - 6px) }
.tt.pos-bottom::after{ top:-6px; left:calc(50% - 6px); transform: rotate(225deg) }

/* Лайтбокс (такой же как в предыдущем демо) */
body.lb-open{ overflow:hidden }
.lb{ position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center }
.lb[hidden]{ display:none !important }
.lb__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.8); backdrop-filter: blur(1px) }
.lb__figure{ position: relative; margin: 0; max-width: 92vw; max-height: 92vh; display: grid; grid-template-areas:
      "prev img close next"
      "caption caption caption caption"; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px }
.lb__img{ grid-area: img; max-width: 92vw; max-height: 82vh; border-radius: 12px; box-shadow: 0 14px 60px rgba(0,0,0,.55); background:#0b0d10 }
.lb__caption{ grid-area: caption; text-align: center; font-size: 14px; color:#cbd5e1; margin-top: 6px; min-height:1.2em }
.lb__btn{ position: relative; z-index: 1; border: 0; background: rgba(20,24,30,.55); color:#fff; padding: 10px 14px; cursor: pointer; border-radius: 12px; font-size: 26px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(0,0,0,.35) }
.lb__btn:hover{ background: rgba(36,42,52,.75) }
.lb__prev{ grid-area: prev }
.lb__next{ grid-area: next }
.lb__close{ grid-area: close; font-size: 28px; padding: 10px 14px }
.lb.is-loading .lb__figure::after{ content: "Загрузка…"; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.65); color:#fff; font-size: 12px }
.lb.is-closing{ animation: lbFade .15s ease reverse both }
.lb.is-open{ animation: lbFade .15s ease both }
@keyframes lbFade{ from{ opacity:0 } to{ opacity:1 } }