/* ============================================================
   ЯZME · КОМПОЗЕР «ПЕРО» 2026 — feed/css/pero.css
   Полный перенос композера из прототипа «Эфир».
   Подключается ПОСЛЕ feed.css. Всё на токенах --yz-*.
   Откат: убрать <link> pero.css и <script> pero.js.

   1. Плавающая кнопка «Перо» + строка «Что нового?»
   2. Шторка композера (.pw-*)  ← новый дизайн целиком
   3. Шаг 2 «Публикация»
   4. Опрос в ленте
   5. «Пульс»
   6. Палитра старой шторки (осталась только для «Студии»/видео)
   ============================================================ */

/* ============================================================
   1. КНОПКА И СТРОКА
   ============================================================ */
.pero-fab{
  position:fixed; right:16px; z-index:999990;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 96px);
  width:56px; height:56px; border:0; border-radius:19px; cursor:pointer;
  background:var(--yz-grad, linear-gradient(135deg,#e2885f,#d97757 45%,#b3552e));
  color:#fff; display:grid; place-items:center;
  box-shadow:var(--yz-glow, 0 8px 26px rgba(217,119,87,.35)), var(--yz-sh-md, 0 10px 30px -12px rgba(0,0,0,.5));
  transition:transform .3s var(--yz-spring, ease), opacity .25s var(--yz-ease, ease);
  -webkit-tap-highlight-color:transparent;
}
.pero-fab svg{ width:23px; height:23px; }
.pero-fab:active{ transform:scale(.88) rotate(-8deg); }
.pero-fab.hide{ opacity:0; pointer-events:none; transform:translateY(90px) scale(.8); }
/* правило для body.efir-kino-on убрано: режима «Кино» больше нет */
@media (min-width:900px){ .pero-fab{ bottom:calc(env(safe-area-inset-bottom, 0px) + 104px); } }

.pero-row{
  display:flex; align-items:center; gap:10px;
  margin:10px 16px 6px; padding:10px 12px;
  background:var(--yz-surface, #22211F);
  border:1px solid var(--yz-border, rgba(250,249,245,.08));
  border-radius:var(--yz-r-lg, 22px);
  cursor:text; transition:border-color .25s var(--yz-ease, ease), transform .18s var(--yz-spring, ease);
  -webkit-tap-highlight-color:transparent;
}
@media (hover:hover){ .pero-row:hover{ border-color:var(--yz-accent-line, rgba(217,119,87,.42)); } }
.pero-row:active{ transform:scale(.99); }
.pero-row img, .pero-row .pero-ava{
  width:34px; height:34px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  display:grid; place-items:center; font:800 14px var(--yz-font-ui, sans-serif);
}
.pero-ava{
  background:linear-gradient(135deg, var(--yz-accent-hi, #e88a68), var(--yz-accent-deep, #b05730));
  color:#fff;
}
.pero-row .ph{
  flex:1; min-width:0; font:500 14px var(--yz-font-ui, sans-serif);
  color:var(--yz-muted, #8d8878); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pero-row .qi{
  width:30px; height:30px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center;
  color:var(--yz-accent, #d97757); background:var(--yz-accent-soft, rgba(217,119,87,.14));
}
.pero-row .qi svg{ width:15px; height:15px; }
.pero-queue-chip{
  display:flex; align-items:center; gap:7px; margin:0 16px 6px;
  font:700 12px var(--yz-font-ui, sans-serif); color:var(--yz-dim, #b9b4a7);
  background:var(--yz-accent-soft, rgba(217,119,87,.14));
  border:1px solid var(--yz-accent-line, rgba(217,119,87,.42));
  border-radius:var(--yz-r-pill, 999px); padding:7px 13px; width:fit-content; cursor:pointer;
}

/* ============================================================
   2. ШТОРКА КОМПОЗЕРА
   ============================================================ */
.pw-root{
  position:fixed; inset:0; z-index:1000010; display:flex; align-items:flex-end; justify-content:center;
  background:var(--yz-overlay, rgba(10,9,8,.72));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--yz-ease, ease);
}
.pw-root.on{ opacity:1; pointer-events:auto; }
.pw-sheet{
  position:relative; width:100%; max-width:620px; height:min(94vh, 960px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--yz-bg, #0F0E0D); color:var(--yz-text, #faf9f5);
  font-family:var(--yz-font-ui, 'Inter', sans-serif);
  border:1px solid var(--yz-border-strong, rgba(250,249,245,.17)); border-bottom:0;
  border-radius:26px 26px 0 0;
  box-shadow:0 -30px 90px -20px rgba(0,0,0,.65);
  transform:translateY(102%); transition:transform .42s var(--yz-ease, cubic-bezier(.22,1,.36,1));
}
.pw-root.on .pw-sheet{ transform:none; }
@media (min-width:900px){
  .pw-root{ align-items:center; }
  .pw-sheet{ height:min(86vh, 900px); border-radius:var(--yz-r-xl, 28px); border-bottom:1px solid var(--yz-border-strong, rgba(250,249,245,.17)); }
}
.pw-grip{
  flex:0 0 auto; display:grid; place-items:center; padding:9px 0 4px; cursor:grab; touch-action:none;
}
.pw-grip i{ width:40px; height:4.5px; border-radius:3px; background:var(--yz-border-strong, rgba(250,249,245,.17)); }

/* — шапка — */
.pw-head{
  flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:2px 14px 12px;
  border-bottom:1px solid var(--yz-border, rgba(250,249,245,.08));
}
.pw-head .pw-x{
  width:36px; height:36px; border-radius:12px; flex:0 0 auto; cursor:pointer;
  background:var(--yz-surface, #22211F); color:var(--yz-dim, #b9b4a7);
  border:1px solid var(--yz-border, rgba(250,249,245,.08));
  display:grid; place-items:center;
  transition:transform .2s var(--yz-spring, ease), background .2s;
}
.pw-head .pw-x:active{ transform:scale(.9); }
.pw-head .pw-x svg{ width:15px; height:15px; }
.pw-title{ flex:1; text-align:center; font:800 15px var(--yz-font-ui, sans-serif); }
.pw-steps{ display:flex; gap:4px; width:56px; flex:0 0 auto; justify-content:flex-end; }
.pw-steps i{ width:22px; height:3.5px; border-radius:2px; background:var(--yz-border-strong, rgba(250,249,245,.17)); transition:background .3s; }
.pw-steps i.on{ background:var(--yz-grad, linear-gradient(135deg,#e2885f,#d97757,#b3552e)); }

/* — тело — */
.pw-body{ flex:1; min-height:0; overflow-y:auto; padding:14px 16px 18px; -webkit-overflow-scrolling:touch; }
.pw-body::-webkit-scrollbar{ width:0; }

.pw-id{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.pw-id img, .pw-id .pero-ava{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:0 0 auto; font-size:15px; }
.pw-id.sq img, .pw-id.sq .pero-ava{ border-radius:36%; }
.pw-id b{ display:block; font:800 14.5px var(--yz-font-ui, sans-serif); }
.pw-id span{ font:600 11.5px var(--yz-font-ui, sans-serif); color:var(--yz-muted, #8d8878); }
.pw-id .pw-switch{
  margin-left:auto; height:32px; padding:0 13px; border-radius:var(--yz-r-pill, 999px); cursor:pointer;
  background:var(--yz-accent-soft, rgba(217,119,87,.14));
  border:1px solid var(--yz-accent-line, rgba(217,119,87,.42));
  color:var(--yz-accent, #d97757); font:700 12px var(--yz-font-ui, sans-serif);
}

.pw-editor{
  min-height:104px; outline:none; caret-color:var(--yz-accent, #d97757);
  font:500 17.5px/1.58 var(--yz-font-ui, sans-serif); color:var(--yz-text, #faf9f5);
  white-space:pre-wrap; word-break:break-word;
}
.pw-editor:empty::before{ content:attr(data-ph); color:var(--yz-muted, #8d8878); pointer-events:none; }
.pw-editor:focus, .pw-editor:focus-visible{ outline:none !important; box-shadow:none !important; }

/* — превью фото — */
.pw-strip{ display:flex; gap:9px; overflow-x:auto; padding:12px 0 4px; scrollbar-width:none; }
.pw-strip::-webkit-scrollbar{ display:none; }
.pw-strip:empty{ display:none; }
.pw-thumb{
  position:relative; flex:0 0 auto; width:104px; aspect-ratio:1;
  border-radius:var(--yz-r-md, 16px); overflow:hidden;
  background:var(--yz-surface-2, #2E2C29);
  border:1px solid var(--yz-border, rgba(250,249,245,.08));
}
.pw-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pw-thumb .rm{
  position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff; font-size:12px; display:grid; place-items:center;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.pw-thumb .alt{
  position:absolute; left:6px; bottom:6px; height:22px; padding:0 8px; border:0; border-radius:var(--yz-r-pill, 999px);
  background:rgba(0,0,0,.55); color:#fff; font:800 9.5px var(--yz-font-ui, sans-serif); letter-spacing:.06em; cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.pw-thumb .alt.on{ background:var(--yz-accent, #d97757); }
.pw-thumb video{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.pw-thumb.circle{ border-radius:50%; }
.pw-thumb .dur{
  position:absolute; right:6px; bottom:6px; padding:3px 7px; border-radius:var(--yz-r-pill, 999px);
  background:rgba(0,0,0,.55); color:#fff; font:800 10px var(--yz-font-ui, sans-serif);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.pw-thumb .crop{
  position:absolute; top:6px; left:6px; width:24px; height:24px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff; display:grid; place-items:center;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.pw-thumb .crop svg{ width:13px; height:13px; }
.pw-thumb .ord{
  position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between;
  padding:0 4px 4px; pointer-events:none;
}
.pw-thumb .ord button{
  pointer-events:auto; width:22px; height:22px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.5); color:#fff; font:800 13px/1 var(--yz-font-ui, sans-serif);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.pw-thumb.circle .ord, .pw-thumb.circle .alt{ display:none; }
.pw-thumb.busy::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.45)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 44 44' stroke='%23fff'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='3'%3E%3Ccircle cx='22' cy='22' r='18' stroke-opacity='.3'/%3E%3Cpath d='M40 22c0-9.94-8.06-18-18-18'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 22 22' to='360 22 22' dur='.9s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E") center/28px no-repeat;
}

/* — чип видео / голоса / трека — */
.pw-attach{
  display:flex; align-items:center; gap:11px; margin-top:12px; padding:11px 12px;
  border:1px solid var(--yz-border, rgba(250,249,245,.08));
  border-radius:var(--yz-r-md, 16px); background:var(--yz-surface, #22211F);
}
.pw-attach .ic{
  width:40px; height:40px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center; color:#fff;
  background:var(--yz-grad, linear-gradient(135deg,#e2885f,#d97757,#b3552e));
}
.pw-attach .ic svg{ width:18px; height:18px; }
.pw-attach .tx{ flex:1; min-width:0; }
.pw-attach b{ display:block; font:800 13.5px var(--yz-font-ui, sans-serif); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pw-attach span{ font:600 12px var(--yz-font-ui, sans-serif); color:var(--yz-muted, #8d8878); }
.pw-attach .rm{
  width:30px; height:30px; border-radius:50%; border:0; cursor:pointer; flex:0 0 auto;
  background:var(--yz-surface-2, #2E2C29); color:var(--yz-dim, #b9b4a7); font-size:13px;
}
.pw-attach video{ width:56px; height:70px; border-radius:12px; object-fit:cover; background:#000; flex:0 0 auto; }

/* — запись голоса — */
.pw-rec{
  display:flex; align-items:center; gap:12px; margin-top:12px; padding:12px;
  border:1px solid var(--yz-accent-line, rgba(217,119,87,.42));
  border-radius:var(--yz-r-md, 16px);
  background:linear-gradient(140deg, var(--yz-accent-soft, rgba(217,119,87,.14)), transparent 70%);
}
.pw-rec .dot{
  width:12px; height:12px; border-radius:50%; background:var(--yz-danger, #e5484d); flex:0 0 auto;
  animation:pwBlink 1.1s infinite;
}
@keyframes pwBlink{ 50%{ opacity:.25; } }
.pw-rec .t{ font:800 14px var(--yz-font-ui, sans-serif); font-variant-numeric:tabular-nums; }
.pw-rec .wave{ flex:1; display:flex; align-items:center; gap:2.5px; height:26px; }
.pw-rec .wave i{ flex:1; border-radius:2px; background:var(--yz-accent-line, rgba(217,119,87,.42)); transition:height .12s; }
.pw-rec button{
  height:34px; padding:0 14px; border-radius:var(--yz-r-pill, 999px); border:0; cursor:pointer;
  font:800 12.5px var(--yz-font-ui, sans-serif);
}
.pw-rec .stop{ background:var(--yz-grad, linear-gradient(135deg,#e2885f,#d97757,#b3552e)); color:#fff; }
.pw-rec .cancel{ background:var(--yz-surface, #22211F); color:var(--yz-dim, #b9b4a7); }

/* — редактор опроса — */
.pw-poll{
  margin-top:12px; padding:13px; border-radius:var(--yz-r-md, 16px);
  border:1px solid var(--yz-border-strong, rgba(250,249,245,.17));
  background:var(--yz-surface, #22211F);
}
.pw-poll .ph{
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
  font:800 12px var(--yz-font-ui, sans-serif); color:var(--yz-accent, #d97757);
}
.pw-poll .ph svg{ width:15px; height:15px; flex:0 0 auto; }
.pw-poll .ph button{ margin-left:auto; border:0; background:none; color:var(--yz-muted, #8d8878); cursor:pointer; font-size:14px; }
.pw-poll input{
  width:100%; height:42px; margin-bottom:8px; padding:0 13px;
  border-radius:13px; border:1px solid var(--yz-border, rgba(250,249,245,.08));
  background:var(--yz-bg, #0F0E0D); color:var(--yz-text, #faf9f5);
  font:600 14px var(--yz-font-ui, sans-serif); outline:none;
}
.pw-poll input:focus{ border-color:var(--yz-accent-line, rgba(217,119,87,.42)); }
.pw-poll input.q{ font-weight:800; }
.pw-poll .addopt{
  height:34px; padding:0 13px; border-radius:var(--yz-r-pill, 999px); cursor:pointer;
  border:1px dashed var(--yz-border-strong, rgba(250,249,245,.17));
  background:none; color:var(--yz-dim, #b9b4a7); font:700 12px var(--yz-font-ui, sans-serif);
}

/* — чипы медиа — */
.pw-chips{ display:flex; gap:8px; margin-top:16px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.pw-chips::-webkit-scrollbar{ display:none; }
.pw-chip{
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  height:40px; padding:0 14px 0 11px; border-radius:14px; cursor:pointer;
  background:var(--yz-surface, #22211F);
  border:1px solid var(--yz-border, rgba(250,249,245,.08));
  color:var(--yz-text, #faf9f5); font:700 13px var(--yz-font-ui, sans-serif);
  transition:background .2s var(--yz-ease, ease), border-color .2s, transform .18s var(--yz-spring, ease);
  -webkit-tap-highlight-color:transparent;
}
.pw-chip:active{ transform:scale(.94); }
.pw-chip svg{ width:17px; height:17px; color:var(--yz-accent, #d97757); }
.pw-chip.on{ background:var(--yz-accent-soft, rgba(217,119,87,.14)); border-color:var(--yz-accent-line, rgba(217,119,87,.42)); }
.pw-chip[disabled]{ opacity:.4; cursor:default; }
@media (hover:hover){
  .pw-chip:hover:not([disabled]){ background:var(--yz-accent-soft, rgba(217,119,87,.14)); border-color:var(--yz-accent-line, rgba(217,119,87,.42)); }
}

/* — ИИ-панель — */
.pw-ai{
  margin-top:14px; padding:12px; border-radius:var(--yz-r-md, 16px);
  border:1px solid var(--yz-accent-line, rgba(217,119,87,.42));
  background:linear-gradient(140deg, var(--yz-accent-soft, rgba(217,119,87,.14)), transparent 72%);
}
.pw-ai .t{ display:flex; align-items:center; gap:7px; margin-bottom:10px; font:800 12px var(--yz-font-ui, sans-serif); color:var(--yz-accent, #d97757); }
.pw-ai .t svg{ width:14px; height:14px; }
.pw-ai .t small{ margin-left:auto; font:600 10.5px var(--yz-font-ui, sans-serif); color:var(--yz-muted, #8d8878); }
.pw-ai .row{ display:flex; gap:7px; flex-wrap:wrap; }
.pw-aibtn{
  height:33px; padding:0 13px; border-radius:var(--yz-r-pill, 999px); cursor:pointer;
  border:1px solid var(--yz-accent-line, rgba(217,119,87,.42));
  background:var(--yz-surface, #22211F); color:var(--yz-text, #faf9f5);
  font:700 12px var(--yz-font-ui, sans-serif);
  transition:background .2s var(--yz-ease, ease), transform .18s var(--yz-spring, ease);
}
.pw-aibtn:active{ transform:scale(.94); }
.pw-aibtn[disabled]{ opacity:.5; cursor:default; }
.pw-aibtn.undo{ margin-left:auto; border-style:dashed; color:var(--yz-dim, #b9b4a7); }

/* — подвал — */
.pw-foot{
  flex:0 0 auto; display:flex; gap:9px; padding:11px 16px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--yz-border, rgba(250,249,245,.08));
  background:var(--yz-bg, #0F0E0D);
}
.pw-btn{
  height:46px; border-radius:15px; border:0; cursor:pointer;
  font:800 14px var(--yz-font-ui, sans-serif);
  transition:transform .18s var(--yz-spring, ease), opacity .2s, filter .2s;
}
.pw-btn:active{ transform:scale(.96); }
.pw-btn.pri{
  flex:1; color:#fff;
  background:var(--yz-grad, linear-gradient(135deg,#e2885f,#d97757 45%,#b3552e));
  box-shadow:var(--yz-glow, 0 8px 26px rgba(217,119,87,.35));
}
.pw-btn.pri[disabled]{ opacity:.42; box-shadow:none; filter:grayscale(.3); }
.pw-btn.sec{
  padding:0 18px; background:var(--yz-surface, #22211F); color:var(--yz-text, #faf9f5);
  border:1px solid var(--yz-border-strong, rgba(250,249,245,.17));
}

/* — alt-диалог — */
.pw-modal{
  position:absolute; inset:0; z-index:5; display:grid; place-items:center; padding:20px;
  background:var(--yz-overlay, rgba(10,9,8,.72));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.pw-modal-card{
  width:100%; max-width:400px; padding:18px; border-radius:var(--yz-r-lg, 22px);
  background:var(--yz-surface, #22211F); border:1px solid var(--yz-border-strong, rgba(250,249,245,.17));
  box-shadow:var(--yz-sh-lg, 0 24px 60px -18px rgba(0,0,0,.65));
}
.pw-modal-card h4{ margin:0 0 6px; font:800 15px var(--yz-font-ui, sans-serif); }
.pw-modal-card p{ margin:0 0 12px; font:500 12.5px/1.5 var(--yz-font-ui, sans-serif); color:var(--yz-muted, #8d8878); }
.pw-modal-card textarea{
  width:100%; min-height:84px; padding:11px 13px; border-radius:14px; resize:none;
  border:1px solid var(--yz-border-strong, rgba(250,249,245,.17));
  background:var(--yz-bg, #0F0E0D); color:var(--yz-text, #faf9f5);
  font:500 14px/1.5 var(--yz-font-ui, sans-serif); outline:none;
}
.pw-modal-acts{ display:flex; gap:9px; margin-top:12px; }
.pw-modal-acts .pw-btn{ height:42px; flex:1; }

/* — кроп-редактор — */
.pw-crop{
  position:absolute; inset:0; z-index:6; display:flex; flex-direction:column;
  background:var(--yz-bg-deep, #0A0908);
}
.pw-crop-top{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
}
.pw-crop-top span{ flex:1; text-align:center; font:800 14.5px var(--yz-font-ui, sans-serif); }
.pw-crop-top .ic{
  width:36px; height:36px; border-radius:12px; border:1px solid var(--yz-border, rgba(250,249,245,.08));
  background:var(--yz-surface, #22211F); color:var(--yz-dim, #b9b4a7);
  display:grid; place-items:center; cursor:pointer;
}
.pw-crop-top .ic svg{ width:15px; height:15px; }
.pw-crop-top .ic.ok{
  background:var(--yz-grad, linear-gradient(135deg,#e2885f,#d97757,#b3552e)); color:#fff; border-color:transparent;
  box-shadow:var(--yz-glow, 0 8px 26px rgba(217,119,87,.35));
}
.pw-crop-stage{ flex:1; min-height:0; display:grid; place-items:center; overflow:hidden; padding:12px; }
.pw-crop-frame{
  position:relative; overflow:hidden; border-radius:8px; touch-action:none; cursor:grab;
  box-shadow:0 0 0 1px var(--yz-border-strong, rgba(250,249,245,.17)), 0 0 0 2000px rgba(0,0,0,.55);
}
.pw-crop-frame img{
  position:absolute; left:50%; top:50%; transform-origin:center;
  -webkit-user-drag:none; user-select:none; pointer-events:none; max-width:none;
}
.pw-crop-frame .grid{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, transparent 33.2%, rgba(255,255,255,.28) 33.3%, rgba(255,255,255,.28) 33.5%, transparent 33.6%,
      transparent 66.4%, rgba(255,255,255,.28) 66.5%, rgba(255,255,255,.28) 66.7%, transparent 66.8%),
    linear-gradient(180deg, transparent 33.2%, rgba(255,255,255,.28) 33.3%, rgba(255,255,255,.28) 33.5%, transparent 33.6%,
      transparent 66.4%, rgba(255,255,255,.28) 66.5%, rgba(255,255,255,.28) 66.7%, transparent 66.8%);
}
.pw-crop-bar{
  flex:0 0 auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--yz-border, rgba(250,249,245,.08));
}
.pw-crop-bar .asp{ display:flex; gap:6px; flex:1; overflow-x:auto; scrollbar-width:none; }
.pw-crop-bar .asp::-webkit-scrollbar{ display:none; }
.pw-crop-bar .asp button{
  flex:0 0 auto; height:34px; padding:0 13px; border-radius:var(--yz-r-pill, 999px); cursor:pointer;
  border:1px solid var(--yz-border, rgba(250,249,245,.08)); background:var(--yz-surface, #22211F);
  color:var(--yz-dim, #b9b4a7); font:700 12px var(--yz-font-ui, sans-serif);
}
.pw-crop-bar .asp button.on{
  background:var(--yz-accent-soft, rgba(217,119,87,.14));
  border-color:var(--yz-accent-line, rgba(217,119,87,.42)); color:var(--yz-text, #faf9f5);
}
.pw-crop-bar .tools{ display:flex; gap:6px; }
.pw-crop-bar .tools button{
  height:34px; min-width:34px; padding:0 11px; border-radius:12px; cursor:pointer;
  border:1px solid var(--yz-border, rgba(250,249,245,.08)); background:var(--yz-surface, #22211F);
  color:var(--yz-text, #faf9f5); font:700 12px var(--yz-font-ui, sans-serif);
  display:grid; place-items:center;
}
.pw-crop-bar .tools svg{ width:16px; height:16px; }

/* — запись кружка — */
.pw-circ{
  position:absolute; inset:0; z-index:6; display:flex; flex-direction:column;
  background:var(--yz-bg-deep, #0A0908);
}
.pw-circ-top{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:calc(12px + env(safe-area-inset-top, 0px)) 14px 10px;
}
.pw-circ-top span{ flex:1; text-align:center; font:800 14.5px var(--yz-font-ui, sans-serif); }
.pw-circ-top .ic{
  width:36px; height:36px; border-radius:12px; cursor:pointer;
  border:1px solid var(--yz-border, rgba(250,249,245,.08));
  background:var(--yz-surface, #22211F); color:var(--yz-dim, #b9b4a7); display:grid; place-items:center;
}
.pw-circ-top .ic svg{ width:15px; height:15px; }
.pw-circ-top i{ width:36px; }
.pw-circ-stage{ flex:1; min-height:0; display:grid; place-items:center; gap:16px; align-content:center; }
.pw-circ-stage .ring{ position:relative; width:min(74vw, 300px); aspect-ratio:1; }
.pw-circ-stage svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); z-index:2; }
.pw-circ-stage svg circle{ fill:none; stroke-width:5; }
.pw-circ-stage svg .bg{ stroke:rgba(255,255,255,.16); }
.pw-circ-stage svg .pg{ stroke:var(--yz-accent, #d97757); stroke-linecap:round; transition:stroke-dashoffset .12s linear; }
.pw-circ-video{
  position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px);
  border-radius:50%; object-fit:cover; background:#000; transform:scaleX(-1);
}
.pw-circ-stage .t{ font:800 16px var(--yz-font-ui, sans-serif); font-variant-numeric:tabular-nums; }
.pw-circ-bar{
  flex:0 0 auto; display:grid; justify-items:center; gap:10px;
  padding:14px 14px calc(20px + env(safe-area-inset-bottom, 0px));
}
.pw-circ-btn{
  width:72px; height:72px; border-radius:50%; cursor:pointer;
  border:4px solid var(--yz-border-strong, rgba(250,249,245,.17));
  background:transparent; display:grid; place-items:center;
  transition:transform .2s var(--yz-spring, ease);
}
.pw-circ-btn i{
  width:52px; height:52px; border-radius:50%; display:block;
  background:var(--yz-danger, #e5484d); transition:all .25s var(--yz-spring, ease);
}
.pw-circ-btn.rec i{ width:26px; height:26px; border-radius:7px; }
.pw-circ-btn:active{ transform:scale(.92); }
.pw-circ-bar .hint{ font:600 12.5px var(--yz-font-ui, sans-serif); color:var(--yz-muted, #8d8878); text-align:center; }

/* — предпросмотр записи на шаге 2 — */
.pw-preview{
  border:1px solid var(--yz-border, rgba(250,249,245,.08));
  border-radius:var(--yz-r-lg, 22px); overflow:hidden;
  background:var(--yz-surface, #22211F);
}
.pw-preview .yf-post.pw-pv{
  padding:14px 14px 12px; border:0; background:transparent; margin:0;
}
.pw-preview .yf-ava{ width:40px; height:40px; border-radius:50%; overflow:hidden; display:block; flex:0 0 auto; }
.pw-preview .yf-ava.sq{ border-radius:36%; }
.pw-preview .yf-ava img, .pw-preview .yf-ava .pero-ava{
  width:100%; height:100%; border-radius:inherit; font-size:15px;
  display:grid; place-items:center; object-fit:cover;
}
.pw-preview .yf-media{ margin:10px -14px 0; }
.pw-pv-media{ position:relative; }
.pw-pv-media img, .pw-pv-media video{ width:100%; display:block; max-height:340px; object-fit:cover; background:#000; }
.pw-pv-media .more{ display:none; }
.pw-pv-media.circle{ display:grid; place-items:center; padding:8px 0; }
.pw-pv-media.circle video{ width:min(62vw, 240px); height:min(62vw, 240px); border-radius:50%; transform:scaleX(-1); }
.pw-pv-media .cnt{
  position:absolute; top:10px; right:12px; padding:5px 10px; border-radius:var(--yz-r-pill, 999px);
  background:rgba(0,0,0,.5); color:#fff; font:800 11px var(--yz-font-ui, sans-serif);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.pw-pv-rx{ display:flex; gap:6px; margin-top:12px; }
.pw-pv-rx span{
  display:grid; place-items:center; height:30px; min-width:44px; border-radius:var(--yz-r-pill, 999px);
  border:1px dashed var(--yz-border-strong, rgba(250,249,245,.17)); opacity:.5; font-size:14px;
}

/* — тост — */
.pw-toast{
  position:fixed; left:50%; bottom:110px; transform:translate(-50%, 16px); z-index:1000030;
  background:var(--yz-glass-strong, rgba(10,9,8,.92));
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid var(--yz-border-strong, rgba(250,249,245,.17));
  color:var(--yz-text, #faf9f5); font:700 13px var(--yz-font-ui, sans-serif);
  padding:11px 18px; border-radius:var(--yz-r-pill, 999px);
  box-shadow:var(--yz-sh-lg, 0 24px 60px -18px rgba(0,0,0,.65));
  opacity:0; transition:all .3s var(--yz-spring, ease); pointer-events:none; max-width:88vw; text-align:center;
}
.pw-toast.on{ opacity:1; transform:translate(-50%, 0); }

/* ============================================================
   3. ШАГ 2 «ПУБЛИКАЦИЯ»
   ============================================================ */
.pw-s2{ display:none; flex:1; min-height:0; overflow-y:auto; padding:8px 16px 20px; }
.pw-s2.on{ display:block; }
.pw-lb{
  font:800 11px/1 var(--yz-font-ui, sans-serif); letter-spacing:.14em; text-transform:uppercase;
  color:var(--yz-muted, #8d8878); margin:20px 0 12px;
}
.pw-s2 > .pw-lb:first-child{ margin-top:6px; }
.pw-who{ display:flex; gap:14px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:none; }
.pw-who::-webkit-scrollbar{ display:none; }
.pw-who-i{
  display:grid; justify-items:center; gap:8px; cursor:pointer; flex:0 0 auto; width:70px;
  opacity:.45; transition:opacity .22s var(--yz-ease, ease), transform .2s var(--yz-spring, ease);
  -webkit-tap-highlight-color:transparent;
}
.pw-who-i:active{ transform:scale(.94); }
.pw-who-i.on{ opacity:1; }
.pw-who-i img, .pw-who-i .pero-ava{
  width:54px; height:54px; border-radius:50%; object-fit:cover;
  display:grid; place-items:center; font:800 20px var(--yz-font-ui, sans-serif);
  transition:box-shadow .22s var(--yz-ease, ease);
}
.pw-who-i img{ background:var(--yz-surface-2, #2E2C29); }
.pw-who-i[data-kind="public"] img, .pw-who-i[data-kind="public"] .pero-ava{ border-radius:36%; }
.pw-who-i.on img, .pw-who-i.on .pero-ava{
  box-shadow:0 0 0 3px var(--yz-bg, #0F0E0D), 0 0 0 5.5px var(--yz-accent, #d97757);
}
.pw-who-i span{
  font:700 11px/1.3 var(--yz-font-ui, sans-serif); color:var(--yz-dim, #b9b4a7); text-align:center; max-width:70px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pw-note{
  margin-top:12px; padding:11px 13px; border-radius:var(--yz-r-md, 16px);
  background:var(--yz-accent-soft, rgba(217,119,87,.14));
  border:1px solid var(--yz-accent-line, rgba(217,119,87,.42));
  font:700 12.5px/1.45 var(--yz-font-ui, sans-serif); color:var(--yz-text, #faf9f5);
}
.pw-when{ display:flex; gap:8px; flex-wrap:wrap; }
.pw-tchip{
  height:38px; padding:0 16px; border-radius:var(--yz-r-pill, 999px); cursor:pointer;
  border:1px solid var(--yz-border, rgba(250,249,245,.08));
  background:var(--yz-surface, #22211F); color:var(--yz-dim, #b9b4a7);
  font:700 12.5px var(--yz-font-ui, sans-serif);
  transition:all .2s var(--yz-ease, ease), transform .18s var(--yz-spring, ease);
}
.pw-tchip:active{ transform:scale(.95); }
.pw-tchip.on{
  background:var(--yz-accent-soft, rgba(217,119,87,.14));
  border-color:var(--yz-accent-line, rgba(217,119,87,.42)); color:var(--yz-text, #faf9f5);
}
.pw-dt{
  margin-top:11px; width:100%; height:46px; padding:0 14px;
  border-radius:var(--yz-r-md, 16px); border:1px solid var(--yz-border-strong, rgba(250,249,245,.17));
  background:var(--yz-surface, #22211F); color:var(--yz-text, #faf9f5);
  font:600 14px var(--yz-font-ui, sans-serif); outline:0;
}
.pw-dt[hidden]{ display:none; }
.pw-hint{ margin-top:10px; font:500 12px/1.5 var(--yz-font-ui, sans-serif); color:var(--yz-muted, #8d8878); }
.pw-tog-row{
  display:flex; align-items:center; gap:10px; padding:13px 0;
  font:600 14px var(--yz-font-ui, sans-serif);
  border-bottom:1px solid var(--yz-border, rgba(250,249,245,.08));
}
.pw-tog-row:last-child{ border-bottom:0; }
.pw-tog{
  margin-left:auto; width:46px; height:27px; border-radius:14px; position:relative; cursor:pointer; flex:0 0 auto;
  background:var(--yz-border-strong, rgba(250,249,245,.17)); transition:background .25s var(--yz-ease, ease);
}
.pw-tog::after{
  content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%;
  background:#fff; transition:left .25s var(--yz-spring, cubic-bezier(.34,1.45,.5,1));
}
.pw-tog.on{ background:var(--yz-accent, #d97757); }
.pw-tog.on::after{ left:22px; }
.pw-qlist{ display:grid; gap:8px; }
.pw-qi{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--yz-border, rgba(250,249,245,.08));
  border-radius:var(--yz-r-md, 16px); background:var(--yz-surface, #22211F);
  font:500 13px var(--yz-font-ui, sans-serif); color:var(--yz-dim, #b9b4a7);
}
.pw-qi img{ width:34px; height:34px; border-radius:10px; object-fit:cover; flex:0 0 auto; }
.pw-qi .qt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pw-qi b{ color:var(--yz-accent, #d97757); font:800 12px var(--yz-font-ui, sans-serif); flex:0 0 auto; }
.pw-qi .qx{ border:0; background:none; color:var(--yz-muted, #8d8878); cursor:pointer; font-size:15px; padding:2px 4px; flex:0 0 auto; }

/* ============================================================
   4. ОПРОС В ЛЕНТЕ
   ============================================================ */
.yz-poll{
  margin:12px 0 2px; padding:14px; border-radius:var(--yz-r-md, 16px);
  border:1px solid var(--yz-border, rgba(250,249,245,.08));
  background:var(--yz-surface, #22211F);
}
.yz-poll h5{ margin:0 0 11px; font:800 15px/1.35 var(--yz-font-ui, sans-serif); color:var(--yz-text, #faf9f5); }
.yz-poll-opt{
  position:relative; display:flex; align-items:center; gap:9px; margin-bottom:8px; padding:11px 13px;
  border-radius:13px; cursor:pointer; overflow:hidden;
  border:1px solid var(--yz-border, rgba(250,249,245,.08));
  background:var(--yz-bg, #0F0E0D);
  font:600 13.5px var(--yz-font-ui, sans-serif); color:var(--yz-text, #faf9f5);
  transition:border-color .2s var(--yz-ease, ease), transform .18s var(--yz-spring, ease);
}
.yz-poll-opt:last-of-type{ margin-bottom:0; }
.yz-poll-opt:active{ transform:scale(.99); }
@media (hover:hover){ .yz-poll-opt:hover{ border-color:var(--yz-accent-line, rgba(217,119,87,.42)); } }
.yz-poll-opt .bar{
  position:absolute; left:0; top:0; bottom:0; width:0; z-index:0;
  background:var(--yz-accent-soft, rgba(217,119,87,.14));
  transition:width .55s var(--yz-ease, cubic-bezier(.22,1,.36,1));
}
.yz-poll-opt .lb{ position:relative; z-index:1; flex:1; min-width:0; }
.yz-poll-opt .pc{
  position:relative; z-index:1; font:800 12.5px var(--yz-font-ui, sans-serif);
  color:var(--yz-accent, #d97757); font-variant-numeric:tabular-nums; opacity:0; transition:opacity .3s;
}
.yz-poll.voted .yz-poll-opt{ cursor:default; }
.yz-poll.voted .pc{ opacity:1; }
.yz-poll-opt.mine{ border-color:var(--yz-accent-line, rgba(217,119,87,.42)); }
.yz-poll-opt.mine .lb::after{ content:" ✓"; color:var(--yz-accent, #d97757); font-weight:800; }
.yz-poll-foot{ margin-top:10px; font:600 11.5px var(--yz-font-ui, sans-serif); color:var(--yz-muted, #8d8878); }

/* ============================================================
   5. ПУЛЬС
   ============================================================ */
.pulse{
  margin:12px 16px; border-radius:var(--yz-r-lg, 22px); overflow:hidden;
  border:1px solid var(--yz-accent-line, rgba(217,119,87,.42));
  background:linear-gradient(160deg, var(--yz-accent-soft, rgba(217,119,87,.14)), transparent 68%);
}
.pulse-h{ display:flex; align-items:center; gap:8px; padding:12px 14px; cursor:pointer; }
.pulse-h .dotp{
  width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:var(--yz-accent, #d97757); box-shadow:0 0 0 4px var(--yz-accent-soft, rgba(217,119,87,.14));
  animation:peroPulse 2.4s infinite;
}
@keyframes peroPulse{ 50%{ box-shadow:0 0 0 8px transparent; } }
.pulse-h b{ font:800 13.5px var(--yz-font-ui, sans-serif); color:var(--yz-text, #faf9f5); }
.pulse-h .cnt{ font:600 11.5px var(--yz-font-ui, sans-serif); color:var(--yz-muted, #8d8878); }
.pulse-h .tgl{ margin-left:auto; color:var(--yz-muted, #8d8878); font-size:11px; transition:transform .3s var(--yz-spring, ease); }
.pulse.closed .tgl{ transform:rotate(-180deg); }
.pulse-b{ padding:0 14px 12px; display:grid; gap:9px; }
.pulse.closed .pulse-b{ display:none; }
.pulse-i{ display:flex; align-items:center; gap:10px; cursor:pointer; min-width:0; font:500 13px/1.4 var(--yz-font-ui, sans-serif); color:var(--yz-dim, #b9b4a7); }
.pulse-i .th{
  width:34px; height:34px; border-radius:10px; flex:0 0 auto; object-fit:cover;
  background:var(--yz-surface-2, #2E2C29); display:grid; place-items:center;
  color:var(--yz-text, #faf9f5); font:800 13px var(--yz-font-ui, sans-serif);
}
.pulse-i span.th{
  background:linear-gradient(135deg, var(--yz-accent-hi, #e88a68), var(--yz-accent-deep, #b05730)); color:#fff;
}
.pulse-i .tx{ min-width:0; overflow:hidden; flex:1; }
.pulse-i b{ color:var(--yz-text, #faf9f5); font-weight:700; }
.pulse-i .sn{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; }

/* — «Советуем»: бейдж типа, иконка-заглушка, кнопка обновления — */
.yz-recs .pulse-b{ transition:opacity .18s var(--yz-ease, ease); }
.yz-recs .pulse-i{ padding:2px 0; }
.yz-recs .pulse-i:active{ transform:scale(.99); }
.rec-badge{
  display:inline-block; margin-left:7px; padding:2px 7px; border-radius:var(--yz-r-pill, 999px);
  font:800 9.5px/1.5 var(--yz-font-ui, sans-serif); letter-spacing:.04em; vertical-align:1px;
  color:var(--yz-accent, #d97757); background:var(--yz-accent-soft, rgba(217,119,87,.14));
  border:1px solid var(--yz-accent-line, rgba(217,119,87,.42));
}
.pulse-i .th.kind-book, .pulse-i .th.kind-app{
  background:linear-gradient(135deg, var(--yz-accent-hi, #e88a68), var(--yz-accent-deep, #b05730));
  color:#fff; font-size:15px;
}
.pulse-i .th.app-astro{ background:linear-gradient(135deg,#a78bfa,#5b3fbf); }
.pulse-i .th.app-nativ{ background:linear-gradient(135deg,#5eead4,#0f766e); font-weight:800; }
.pulse-h .ref{
  width:28px; height:28px; border-radius:9px; cursor:pointer; flex:0 0 auto;
  border:1px solid var(--yz-border, rgba(250,249,245,.08));
  background:var(--yz-surface, #22211F); color:var(--yz-dim, #b9b4a7);
  display:grid; place-items:center; margin-left:auto;
  transition:transform .35s var(--yz-spring, ease), color .2s;
}
.pulse-h .ref svg{ width:14px; height:14px; }
.pulse-h .ref:active{ transform:rotate(-180deg); color:var(--yz-accent, #d97757); }
.yz-recs .pulse-h .tgl{ margin-left:8px; }
.yz-recs .pulse-h .cnt{ margin-left:2px; }
@media (max-width:400px){ .yz-recs .pulse-h .cnt{ display:none; } }

/* ============================================================
   6. СТАРАЯ ШТОРКА — только «Студия» (видеоредактор).
   Палитра привязана к теме портала, чтобы не выбивалась.
   ============================================================ */
.yc-root{
  --yc-bg:   var(--yz-bg, #0F0E0D);
  --yc-s1:   var(--yz-surface, #22211F);
  --yc-s2:   var(--yz-surface-2, #2E2C29);
  --yc-s3:   var(--yz-accent-soft, rgba(217,119,87,.14));
  --yc-acc:  var(--yz-accent, #d97757);
  --yc-acc2: var(--yz-accent-hi, #e88a68);
  --yc-txt:  var(--yz-text, #faf9f5);
  --yc-dim:  var(--yz-dim, #b9b4a7);
  --yc-bd:   var(--yz-border, rgba(250,249,245,.08));
  --yc-bd2:  var(--yz-border-strong, rgba(250,249,245,.17));
  background:var(--yz-overlay, rgba(10,9,8,.72));
}
.yc-root .yc-sheet{
  max-width:620px; margin:0 auto; background:var(--yz-bg, #0F0E0D);
  border-radius:26px 26px 0 0; border:1px solid var(--yz-border-strong, rgba(250,249,245,.17)); border-bottom:0;
}
.yc-root .yc-editor:focus, .yc-root [contenteditable]:focus{ outline:none !important; }
/* в «Студии» текстовая вкладка не нужна — её заменил «Перо» */
.yc-root.pw-studio .yc-modes,
.yc-root.pw-studio .yc-pane-post,
.yc-root.pw-studio .yc-toolbar{ display:none !important; }

@media (prefers-reduced-motion:reduce){
  .pulse-h .dotp, .pw-rec .dot{ animation:none; }
  .pero-fab, .pw-chip, .pw-btn, .pw-tchip{ transition:none; }
}