/* Студия и кабинет в виде главной v3 (19.10.2026). Образец владельца -- приложение runey.app:
   узкая колонка значков слева, шапка-таблетка, белые листы с большим скруглением на светлом
   фоне, плитки настроек справа. Цвета и шрифт -- из v3.css (Onest, #eef2f8, #2563eb).
   Только вид: разметку и логику studio.js не меняет. Всё под html.v3, ?v3=0 -- старый вид. */
html.v3:not([data-theme="dark"]) {
  --bg: #eef2f8; --surface: #fff; --surface-2: #f6f8fc; --surface-3: #eef2f8; --border: #dde4ef;
  --text: #0f1a2e; --text-soft: #4a5873; --accent: #2563eb; --accent-hover: #1d4ed8; --accent-soft: #e5edff;
}
html.v3 { --v3-shadow: 0 1px 2px rgba(15, 26, 46, .05), 0 10px 30px -14px rgba(15, 26, 46, .22);
  --v3-r: 28px; --v3-r-lg: 40px; --v3-rail: 0px; --header-h: 80px; }
html.v3 body.studio { background: var(--bg); font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* ── шапка-таблетка ── */
html.v3 .sh { top: 10px; margin: 10px 0 0; padding: 0 16px; background: none; border: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
html.v3 .sh-in { max-width: 1240px; min-height: 58px; padding: 0 8px 0 18px; gap: 12px;
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--v3-shadow); }
html.v3[data-theme="dark"] .sh-in { background: color-mix(in srgb, var(--surface) 94%, transparent); }
html.v3 .sh-brand { font-weight: 700; letter-spacing: -.02em; }
html.v3 .sh-nav a, html.v3 .sh-dd-btn { border-radius: 999px; font-size: 14px; transition: background-color .2s, color .2s; }
html.v3 .sh-nav a:hover, html.v3 .sh-dd-btn:hover { background: var(--bg); }
html.v3 .sh-icon, html.v3 .sh-tg { border-radius: 999px; transition: color .2s, border-color .2s; }
html.v3 .sh-icon:hover, html.v3 .sh-tg:hover { border-color: var(--accent); }
html.v3 .sh-acc-btn { border-radius: 999px; }
html.v3 .sh-dd-panel, html.v3 .sh-acc-panel { border-radius: 24px; box-shadow: var(--v3-shadow); }
@media (max-width: 560px) {
  html.v3 .sh { padding: 0 10px; }
  html.v3 .sh-in { padding: 0 6px 0 14px; min-height: 54px; }
}

/* узкий телефон: шапка без надписи у логотипа, иначе бургер уезжает за край */
@media (max-width: 400px) {
  html.v3 .sh-in, html.v3 .sh-actions { gap: 4px; }
  html.v3 .sh-in { padding-left: 10px; }
}
@media (max-width: 360px) { html.v3 .sh-brand span { display: none; } }

/* ── кнопки-таблетки ── */
html.v3 .sc-btn, html.v3 .btn { border-radius: 999px; transition: background-color .2s, border-color .2s, color .2s, transform .2s; }
html.v3 .sc-btn:not(.sc-btn-ghost):not(:disabled) { background: var(--accent); color: #fff; }
html.v3 .sc-btn:not(.sc-btn-ghost):not(:disabled):hover { background: var(--accent-hover); }
html.v3 .sc-btn-ghost { background: var(--surface); border: 1px solid var(--border); }
html.v3 .sc-btn-ghost:hover { border-color: var(--accent); color: var(--accent-hover); }
html.v3 .sc-chip, html.v3 .ws-fxm-b { border-radius: 999px; }

/* Неактивная кнопка -- светло-серая с серым текстом, без прозрачности: полупрозрачная синяя
   с белым текстом читалась как «серый текст на синем» (замечание владельца 20.10.2026). */
html.v3 .sc-btn:disabled, html.v3 .st .sc-btn:disabled, html.v3 .sc-btn[aria-disabled="true"] {
  background: #e3e9f3 !important; border-color: transparent !important; color: #7a879c !important; opacity: 1 !important; cursor: default; }

/* ── колонка значков (как у runey), только на широком экране ── */
.v3-rail { display: none; }
@media (min-width: 1180px) {
  html.v3 { --v3-rail: 88px; }
  html.v3 .v3-rail { display: flex; flex-direction: column; align-items: center; gap: 4px;
    position: fixed; z-index: 40; left: 16px; top: 92px; bottom: 16px; width: 60px; padding: 10px 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--v3-shadow);
    animation: v3-in .5s cubic-bezier(.2, .7, .2, 1) both; }
  html.v3 .v3-rail hr { width: 24px; border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
  html.v3 .v3-rail .v3-sp { flex: 1; }
  html.v3 .v3-rail a { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
    color: var(--text-soft); text-decoration: none; transition: background-color .2s, color .2s; }
  html.v3 .v3-rail a:hover { background: var(--bg); color: var(--text); }
  html.v3 .v3-rail a.on { background: var(--accent); color: #fff; }
  html.v3 .v3-rail a span { position: absolute; left: 54px; top: 50%; translate: 0 -50%; white-space: nowrap; pointer-events: none;
    padding: 6px 12px; border-radius: 999px; background: var(--text); color: var(--surface); font-size: 13px; font-weight: 600;
    opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
  html.v3 .v3-rail a:hover span, html.v3 .v3-rail a:focus-visible span { opacity: 1; transform: none; }
  html.v3 body.studio > .sh, html.v3 .st.ws, html.v3 .cab, html.v3 .studio .sf { margin-left: var(--v3-rail); }
}
/* с колонкой значков центру тесно: боковые листы уже, пока окно не шире 1440 */
@media (min-width: 1180px) and (max-width: 1439px) {
  html.v3 .st.ws { grid-template-columns: 220px minmax(0, 1fr); }
  html.v3 .ws-form { grid-template-columns: minmax(0, 1fr) 300px; }
  html.v3 .st-tabs > button, html.v3 .st-tabs > .st-tab-link { font-size: 13px; padding-left: 4px; padding-right: 4px; }
}

/* ── студия: белые листы на светлом фоне ── */
html.v3 .st.ws { padding: 16px 16px 0; gap: 16px; }
html.v3 .ws-left, html.v3 .ws-canvas, html.v3 .ws-card, html.v3 .ws-composer, html.v3 .st-block {
  border-color: var(--border); border-radius: var(--v3-r); box-shadow: var(--v3-shadow); }
html.v3 .ws-left { padding: 16px; }
html.v3 .ws-canvas { border-radius: var(--v3-r-lg); }
html.v3 .ws-composer { border-radius: var(--v3-r); box-shadow: 0 18px 40px -22px rgba(15, 26, 46, .45); }
html.v3 .ws-card { padding: 18px; }
html.v3 .st-tabs { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px; box-shadow: var(--v3-shadow); }
html.v3 .st-tabs > button, html.v3 .st-tabs > .st-tab-link { border-radius: 999px; transition: background-color .2s, color .2s; }
@media (max-width: 560px) {
  html.v3 .st-tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
  html.v3 .st-tabs::-webkit-scrollbar { display: none; }
  html.v3 .st-tabs > button, html.v3 .st-tabs > .st-tab-link, html.v3 .cr-tabs > a { flex: 0 0 auto; padding: 10px 12px; }
}
html.v3 .st-tabs > button.on { background: var(--accent); color: #fff; box-shadow: none; }
html.v3 .st-tabs > button:not(.on):hover { background: var(--bg); }
/* плитки внутри листов -- скругление поменьше, подъём при наведении */
html.v3 .ws-ex-tile, html.v3 .st-work, html.v3 .sc-card, html.v3 .st-picked, html.v3 .st-drop { border-radius: 20px; }
html.v3 .sc-card, html.v3 .ws-ex-tile { transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
@media (hover: hover) {
  html.v3 .sc-card:hover, html.v3 .ws-ex-tile:hover { transform: translateY(-3px); box-shadow: var(--v3-shadow); }
}
html.v3 .st input[type="text"], html.v3 .st input[type="search"], html.v3 .st select, html.v3 .st textarea { border-radius: 16px; }
@media (max-width: 560px) {
  html.v3 .st.ws { padding: 12px 10px 0; gap: 12px; }
  html.v3 { --v3-r: 24px; --v3-r-lg: 28px; }
}

/* ── фотоэффект в три шага для новичка (20.10.2026): 1 -- фото, 2 -- образ, 3 -- кнопка. Цифры в кружках,
   без новых слов; справа сначала фото и образ, модель -- вниз (она одна и выбирать там почти нечего). ── */
html.v3 .ws[data-mode="effect"] #st-photo-label::before,
html.v3 .ws[data-mode="effect"] .st-picked-tx > .st-label::before,
html.v3 .ws[data-mode="effect"] #st-go::before {
  display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin-right: 8px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; vertical-align: 1px;
}
html.v3 .ws[data-mode="effect"] #st-photo-label::before { content: "1"; }
html.v3 .ws[data-mode="effect"] .st-picked-tx > .st-label::before { content: "2"; width: 18px; height: 18px; font-size: 11px; margin-right: 6px; }
html.v3 .ws[data-mode="effect"] #st-go::before { content: "3"; background: rgba(255, 255, 255, .22); }
html.v3 .ws[data-mode="effect"] #st-go:disabled::before { background: #b8c3d6; color: #fff; }
html.v3 .ws[data-mode="effect"] #st-photo-label { display: flex; align-items: center; font-size: 15px; font-weight: 700; color: var(--text); }
@media (min-width: 901px) {
  html.v3 .ws[data-mode="effect"] .ws-right > .ws-photo { order: -2; }
  html.v3 .ws[data-mode="effect"] .ws-right > [data-for="effect"]:not(.ws-fxm) { order: -1; }
  html.v3 .ws[data-mode="effect"] .ws-right > .ws-fxm { order: 1; }
}
@media (max-width: 900px) {
  html.v3 .ws[data-mode="effect"] .ws-right > .ws-photo { order: 1; }
  html.v3 .ws[data-mode="effect"] .ws-right > .ws-fxm { order: 5; }
}

/* ── кабинет ── */
html.v3 .cab { max-width: 1160px; padding-top: 24px; }
html.v3 .cab-head, html.v3 .cab-card, html.v3 .cab-stat, html.v3 .cab-empty {
  border-color: var(--border); box-shadow: var(--v3-shadow); }
html.v3 .cab-head { border-radius: var(--v3-r-lg); padding: 22px 24px; }
html.v3 .cab-ava { border-radius: 999px; background: linear-gradient(135deg, #2563eb, #7fa6ff); }
html.v3 .cab-stat { border-radius: var(--v3-r); padding: 18px 20px; }
html.v3 .cab-stat b { letter-spacing: -.02em; }
html.v3 .cab-meter span { background: linear-gradient(90deg, #2563eb, #7fa6ff); }
html.v3 .cab-card { border-radius: var(--v3-r); padding: 22px 24px; }
html.v3 .cab-wide.cab-card { border-radius: var(--v3-r-lg); padding: 28px; }
html.v3 .cab-empty { border-radius: var(--v3-r-lg); padding: 32px 28px; }
html.v3 .cab .cab-plan, html.v3 .cab .cab-pack, html.v3 .cab-model { border-radius: 20px; background: var(--surface);
  transition: border-color .2s, transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
html.v3 .cab .cab-plan:hover, html.v3 .cab .cab-pack:hover { transform: translateY(-3px); box-shadow: var(--v3-shadow); }
html.v3 .cab .cab-plan.on, html.v3 .cab-model.on { background: var(--accent-soft); }
html.v3 .cab-promo input, html.v3 .cab-ref input { border-radius: 999px; padding-left: 18px; padding-right: 18px; }
html.v3 .cab-msg { border-radius: 16px; }
/* листы кабинета проявляются по очереди: только прозрачность и сдвиг, места не меняют */
html.v3 .cab:not([hidden]) > *, html.v3 .cab-stats > *, html.v3 .cab-grid > * { animation: v3-in .55s cubic-bezier(.2, .7, .2, 1) both; }
html.v3 .cab-stats > :nth-child(2), html.v3 .cab-grid > :nth-child(2) { animation-delay: .05s; }
html.v3 .cab-stats > :nth-child(3), html.v3 .cab-grid > :nth-child(3) { animation-delay: .1s; }
html.v3 .cab-stats > :nth-child(4), html.v3 .cab-grid > :nth-child(4) { animation-delay: .15s; }
html.v3 .cab-grid > :nth-child(n+5) { animation-delay: .2s; }
@media (max-width: 560px) {
  html.v3 .cab { padding: 16px 10px 0; }
  html.v3 .cab-head { padding: 18px; }
  html.v3 .cab-card, html.v3 .cab-wide.cab-card { padding: 18px; }
}

/* модель чата и работы -- колонкой справа, вровень с профилем; уже 1180 -- под основным, как раньше */
html.v3 .v3-cab-main, html.v3 .v3-cab-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
html.v3 .v3-cab-side { margin-top: 16px; }
html.v3 .v3-cab-main > *, html.v3 .v3-cab-side > * { margin-top: 0 !important; margin-bottom: 0 !important; }
html.v3 .v3-cab-side .cab-card { border-radius: var(--v3-r); padding: 22px 24px; }
@media (min-width: 1180px) {
  html.v3 .cab:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 34%); gap: 16px; align-items: start;
    max-width: none; margin-right: 0; padding-left: 16px; padding-right: 16px; }
  /* на широком экране шапка вровень с листами (от колонки значков до края), как верхняя панель runey */
  html.v3 .sh-in { max-width: none; }
  html.v3 .v3-cab-side { margin-top: 0; }
  html.v3 .v3-cab-side .cab-models { grid-template-columns: minmax(0, 1fr); }
  html.v3 .v3-cab-side .cab-works { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  html.v3 .v3-cab-main .cab-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ── карусели (/app/carousel/): те же листы, свои плитки помягче ── */
html.v3 .cr-cards button, html.v3 .cr-style, html.v3 .cr-cost, html.v3 .cr-field, html.v3 .cr-preview,
html.v3 .cr-type, html.v3 .cr-slideopts, html.v3 .cr-caption, html.v3 .cr-fp-box, html.v3 .cr-more-menu { border-radius: 20px; }
html.v3 .cr-slide, html.v3 .cr-photo, html.v3 .cr-add-photo, html.v3 .cr-history-list a, html.v3 .cr-mock-s { border-radius: 16px; }
html.v3 .cr-seg, html.v3 .cr-tabs { border-radius: 999px; }
html.v3 .cr-tabs a.on { background: var(--accent); color: #fff; box-shadow: none; }
html.v3 .cr-seg button, html.v3 .cr-tabs a, html.v3 .cr-italic, html.v3 .cr-fontbtn { border-radius: 999px; }
html.v3 .cr-cards button, html.v3 .cr-style { transition: border-color .2s, transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
@media (hover: hover) {
  html.v3 .cr-cards button:hover, html.v3 .cr-style:hover { transform: translateY(-2px); box-shadow: var(--v3-shadow); }
}
html.v3 .cr-work, html.v3 .cr-editor > section { border-radius: var(--v3-r); }

/* ── подвал белым листом, как на главной ── */
html.v3 .studio .sf { margin: 24px 16px 16px; border: 1px solid var(--border); border-radius: var(--v3-r); background: var(--surface); }
@media (min-width: 1180px) { html.v3 .studio .sf { margin-left: calc(16px + var(--v3-rail)); } }
html.v3 .cookie-bar { border-radius: var(--v3-r); }

@keyframes v3-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.v3 *, html.v3 *::before, html.v3 *::after { animation: none !important; transition: none !important; }
}