/* Телефон-макет с превью ленты — общий компонент.
   Используется на главной (#app-preview) и на всех SEO-страницах рядом с CTA.
   Правка здесь меняет вид телефона сразу везде, где подключён этот файл. */

@keyframes float{ 0%,100%{transform:translateY(0) rotate(var(--r,0deg));} 50%{transform:translateY(-16px) rotate(var(--r,0deg));} }

.phone{
  background:#5b5b5e; border-radius:48px; max-width:280px; margin:0 auto;
  box-shadow:var(--shadow-lg), 0 0 0 2px rgba(255,255,255,.08) inset;
  padding:10px; position:relative; z-index:1;
  animation:float 7s ease-in-out infinite;
}
.phone-notch{
  position:absolute; top:24px; left:50%; transform:translateX(-50%);
  width:80px; height:22px; background:#0a0a0a; border-radius:100px; z-index:3;
}
.phone-btn{position:absolute; background:#454547;}
.phone-btn-power{right:-3px; top:118px; width:3px; height:52px; border-radius:0 3px 3px 0;}
.phone-btn-vol1{left:-3px; top:92px; width:3px; height:30px; border-radius:3px 0 0 3px;}
.phone-btn-vol2{left:-3px; top:130px; width:3px; height:30px; border-radius:3px 0 0 3px;}
.phone-screen{background:var(--surface-2); border-radius:38px; padding:34px 14px 14px; display:flex; flex-direction:column; gap:12px; overflow:hidden;}
.phone-tabbar{
  display:flex; justify-content:space-around; align-items:center; margin-top:4px;
  background:var(--surface); border:1px solid var(--border); border-radius:100px;
  padding:8px 4px; box-shadow:var(--shadow);
}
.phone-tab{color:var(--text-dim); display:flex;}
.phone-tab.active{color:var(--accent);}
.phone-tab svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8;}
.mini-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:13px; transition:transform .2s ease;}
.mini-card:hover{transform:translateY(-3px);}
.mini-tag{display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:100px; background:var(--accent-soft); color:var(--accent); margin-bottom:8px;}
.mini-title{font-size:14px; font-weight:700; margin-bottom:4px;}
.mini-sub{font-size:12px; color:var(--text-dim);}
.mini-row{display:flex; align-items:center; gap:8px; margin-top:10px;}
.avatar-stack{display:flex;}
.avatar-stack span{width:22px; height:22px; border-radius:50%; border:2px solid var(--surface); margin-left:-8px; background:linear-gradient(135deg, var(--accent), var(--accent2));}
.avatar-stack span:first-child{margin-left:0;}

.phone-widget-mount{position:relative; max-width:340px; margin:0 auto;}