/* ClipWa: кабинет /app в дизайне «Анимационного ролика» (static/canvas-clip.html).
   Только внешний вид поверх app.css: разметка и логика Alpine не меняются.
   Подключается в index.html после app.css. */

/* ── Форма шаблона (.vr): секции = карточки шагов с номером ── */
.vr-form{ counter-reset:cwstep; gap:14px; }
.vr-block{ padding:22px; border-radius:var(--r); background:var(--srf); border:1px solid var(--bd);
           transition:border-color .15s, box-shadow .15s; }
.vr-block:focus-within, .vr-block:hover{ border-color:rgba(125,92,245,.35); }
.vr-block:focus-within{ box-shadow:var(--glow); }
/* номер шага: считаются только видимые секции (x-show прячет display:none — счётчик их пропускает) */
.vr-form > .vr-block, .vr-form > template + .vr-block, .vr-form .vr-block{ counter-increment:cwstep; }
.vr-block .vr-block{ counter-increment:none; }
/* заголовок секции: прямая подпись, подпись в первом div (поля с вариантами) или legend у fieldset.
   Без !important на display: x-show прячет лишние подписи инлайн-стилем display:none. */
.vr-block:not(.vr-two) > .vr-label:not(legend):not(.vr-label-sm),
.vr-block:not(.vr-two) > div > .vr-label:first-child:not(.vr-label-sm),
.vr-block.vr-two > :first-child > .vr-label:first-child{
  display:flex; align-items:center; gap:10px; font-size:15.5px; font-weight:700; color:#fff; margin-bottom:14px; }
.vr-block > legend.vr-label{ font-size:15.5px; font-weight:700; color:#fff; margin-bottom:14px; line-height:28px; }
.vr-block:not(.vr-two) > .vr-label:not(legend):not(.vr-label-sm)::before,
.vr-block:not(.vr-two) > div > .vr-label:first-child:not(.vr-label-sm)::before,
.vr-block.vr-two > :first-child > .vr-label:first-child::before,
.vr-block > legend.vr-label::before{
  content:counter(cwstep); flex:none; width:28px; height:28px; border-radius:9px; display:inline-grid; place-items:center;
  font-size:13px; font-weight:750; background:rgba(125,92,245,.16); color:#cdbcff; vertical-align:middle; }
.vr-block > legend.vr-label::before{ margin-right:10px; }
.vr-block.vr-two > :not(:first-child) > .vr-label:first-child{ font-size:15.5px; font-weight:700; color:#fff; margin-bottom:14px; min-height:28px; display:flex; align-items:center; }
.vr-label-sm{ font-size:12.5px !important; font-weight:600 !important; color:var(--mut) !important; }
.vr-label-sm::before{ content:none !important; }
.vr-title{ font-size:28px; letter-spacing:-.02em; }
.vr-lead{ max-width:62ch; line-height:1.6; }
.vr-note{ color:var(--faint); font-size:12.5px; line-height:1.55; }

/* варианты — как «Режим» в анимационном ролике: рамка + кружок-радио */
.vr-choice{ position:relative; padding:14px 14px 14px 40px; border-width:1.5px; background:var(--bg2); }
.vr-choice::before{ content:""; position:absolute; left:14px; top:16px; width:14px; height:14px; border-radius:50%; border:2px solid var(--bd2); }
.vr-choice.active{ border-color:var(--vio); background:rgba(125,92,245,.08); }
.vr-choice.active::before{ border-color:var(--vio); background:radial-gradient(var(--vio2) 0 3.5px, transparent 4.5px); }
.vr-choice-name{ color:#fff; }

/* поля */
.vr .input, .vr input[type=text], .vr input[type=number], .vr textarea, .vr select{
  background:var(--bg2); border:1px solid var(--bd2); border-radius:var(--r2); padding:12px 14px; line-height:1.55;
  transition:border-color .15s, box-shadow .15s; }
.vr .input:focus, .vr input[type=text]:focus, .vr textarea:focus, .vr select:focus{ border-color:var(--vio); box-shadow:0 0 0 3px rgba(125,92,245,.18); outline:none; }
.vr input[type=file].input{ padding:9px 10px; }
.vr-drop{ border:1.5px dashed var(--bd2); background:var(--bg2); padding:18px; border-radius:var(--r); transition:.15s; }
.vr-drop:hover:not(:disabled){ border-color:var(--vio); background:rgba(125,92,245,.07); color:#fff; }
.vr-drop svg{ color:var(--vio2); }
.vr-sub{ border-top-color:var(--bd); }

/* пилюли выбора — как чипы в анимационном ролике */
.vr .dur-pill{ padding:7px 14px; font-size:13px; }
.vr .dur-pill.active{ background:rgba(125,92,245,.16); border-color:var(--vio); color:#fff; box-shadow:0 0 0 3px rgba(125,92,245,.14); }

/* кнопка «Создать ролик» */
.vr-foot{ padding:14px 0 6px; }
.vr-cta{ border-radius:var(--r2); box-shadow:0 10px 26px rgba(125,92,245,.32); }

/* ── Витрина шаблонов ── */
.tpl-card{ transition:border-color .15s, background .15s, transform .15s; }
.tpl-card:hover:not(:disabled){ transform:translateY(-2px); }

/* ── Мастер «Новый клип»: карточки как шаги анимационного ролика ── */
.card{ background:var(--srf); border:1px solid var(--bd); border-radius:var(--r); transition:border-color .15s, box-shadow .15s; }
.card:focus-within{ border-color:rgba(125,92,245,.35); box-shadow:var(--glow); }
.card-title{ font-size:16.5px; font-weight:700; }
.dropzone{ border:1.5px dashed var(--bd2); border-radius:var(--r); background:var(--bg2); transition:.15s; }
.dropzone:hover, .dropzone.drag{ border-color:var(--vio); background:rgba(125,92,245,.07); }
.dropzone svg{ color:var(--vio2) !important; }
.dropzone p{ color:var(--mut); }
.dropzone .file-name{ color:#fff; }
input[type=text]:focus, input[type=email]:focus, input[type=number]:focus, textarea:focus, select:focus{
  border-color:var(--vio); box-shadow:0 0 0 3px rgba(125,92,245,.18); }
input[type=text], input[type=email], input[type=number], textarea, select{ border-radius:var(--r2); }
.btn-secondary{ border-radius:var(--r2); }
.btn-primary{ border-radius:var(--r2); }

@media (max-width:640px){
  .vr-block{ padding:16px; }
  .card{ padding:16px; }
}

/* legend у fieldset держится на float; сброс нужен всем соседям, а не только первому:
   в «Клипе на вашу песню» первый сосед (выбор звука) скрыт, и блок трека вставал сбоку легенды */
.vr-block > legend.vr-label ~ *{ clear:both; }
.vr-block > legend.vr-label + [style*="display: none"] + .vr-sub{ margin-top:0; padding-top:0; border-top:0; }

/* системная кнопка выбора файла → как кнопки ClipWa */
input[type=file]{ color:var(--mut); font-size:13px; }
input[type=file]::file-selector-button{ margin-right:10px; padding:7px 13px; border-radius:8px; border:1px solid var(--bd2);
  background:rgba(125,92,245,.14); color:#fff; font:inherit; font-weight:600; cursor:pointer; transition:.15s; }
input[type=file]::file-selector-button:hover{ border-color:var(--vio); background:rgba(125,92,245,.24); }

/* ── Карточка шага в кабинете (как в «Анимационном ролике») ── */
.cw-step{ padding:22px; }
.cw-head{ display:flex; gap:12px; align-items:flex-start; margin-bottom:18px; }
.cw-num{ flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-weight:750; font-size:13px;
         background:rgba(125,92,245,.16); color:#cdbcff; }
.cw-head h2{ font-size:16.5px; font-weight:700; color:#fff; margin:1px 0 0; }
.cw-head p{ color:var(--mut); font-size:13px; margin-top:3px; line-height:1.5; }
.cw-picked{ display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 12px; border-radius:var(--r2);
            background:var(--bg2); border:1px solid var(--bd2); }
.cw-or{ display:block; text-align:center; color:var(--faint); font-size:12px; margin:18px 0 12px; }
.cw-opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cw-opt{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:14px; text-align:left; cursor:pointer;
         border-radius:var(--r2); border:1.5px solid var(--bd); background:var(--bg2); color:var(--tx); font:inherit; transition:.15s; }
.cw-opt:hover:not(:disabled){ border-color:var(--vio); background:rgba(125,92,245,.07); transform:translateY(-1px); }
.cw-opt:disabled{ opacity:.5; cursor:default; }
.cw-opt b{ font-size:14px; color:#fff; font-weight:650; }
.cw-opt b em{ font-style:normal; margin-left:6px; }
.cw-opt span{ font-size:12.5px; color:var(--mut); line-height:1.45; }
.cw-opt-main{ border-color:rgba(125,92,245,.55); background:linear-gradient(135deg, rgba(125,92,245,.16), rgba(162,116,255,.06)); }
@media (max-width:640px){ .cw-opts{ grid-template-columns:1fr; } .cw-step{ padding:16px; } }

/* ── Слайдер «Лучшие клипы сообщества» на /app ── */
.cw-top{ margin-bottom:14px; padding:18px 18px 16px; }
.cw-top-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.cw-top-head h2{ font-size:16px; font-weight:700; color:#fff; margin:0; }
.cw-top-head p{ color:var(--mut); font-size:12.5px; margin:3px 0 0; }
.cw-top-nav{ display:flex; gap:6px; flex:none; }
.cw-top-nav button{ width:32px; height:32px; border-radius:9px; border:1px solid var(--bd2); background:var(--bg2);
  color:#fff; cursor:pointer; font-size:15px; transition:.15s; }
.cw-top-nav button:hover{ border-color:var(--vio); background:rgba(125,92,245,.14); }
.cw-top-row{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding-bottom:2px; -webkit-overflow-scrolling:touch; }
.cw-top-row::-webkit-scrollbar{ display:none; }
.cw-top-card{ flex:none; width:168px; scroll-snap-align:start; display:flex; flex-direction:column; gap:8px; }
.cw-top-thumb{ position:relative; aspect-ratio:9/16; border-radius:12px; overflow:hidden; cursor:pointer;
  background:var(--bg2); border:1px solid var(--bd); }
.cw-top-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; }
.cw-top-thumb:hover img{ transform:scale(1.04); }
.cw-top-thumb::after{ content:"▶"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:26px;
  background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.65)); opacity:.9; }
.cw-top-meta{ position:absolute; left:8px; right:8px; bottom:7px; z-index:1; color:#fff; font-size:11.5px; line-height:1.3; }
.cw-top-meta b{ display:block; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cw-top-meta span{ color:rgba(255,255,255,.75); }
.cw-top-cta{ display:flex; flex-direction:column; gap:2px; min-height:66px; box-sizing:border-box; padding:8px 10px; border-radius:10px; text-decoration:none;
  border:1.5px solid rgba(125,92,245,.55); background:linear-gradient(135deg, rgba(125,92,245,.2), rgba(162,116,255,.07));
  color:#fff; transition:.15s; }
.cw-top-cta:hover{ border-color:var(--vio); background:rgba(125,92,245,.28); transform:translateY(-1px); }
.cw-top-cta b{ font-size:12.5px; font-weight:650; }
.cw-top-cta span{ font-size:11px; color:var(--mut); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:640px){ .cw-top{ padding:14px; } .cw-top-card{ width:150px; } .cw-top-cta b{ font-size:12px; } .cw-top-nav{ display:none; } }