/* _PLACEAI_SHELL_RAIL_V1_ 30.10 Руслан: «все перенеси» — каркас студии по макетам Claude Design (HANDOFF.md, Components, HomeUser, Chat):
   на компьютере слева рейл 72 px (значок и подпись 11 px, текущий раздел — лаймовая плашка, группы через черту), история чатов —
   своя колонка 280 px только в чате, в шапке название раздела, баланс, «Купить кредиты» и кружок кабинета. На телефоне
   нижняя панель «Главная, Создать, Пространства, Работы, Кабинет», «Создать» открывает шторку со всеми разделами.
   Подключается последним в index.html и только переопределяет: разметку и обработчики студии не трогаем.
   Промо-страница гостя (body.home-mode, осталась на placeai.net) не меняется. */

:root { --rail: 72px; --chats: 280px; --tabbar: 64px; }

@media (min-width: 681px) {
  /* ── рейл ── */
  body:not(.home-mode) .sidebar { width: var(--rail); padding: 12px 8px 14px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
  body:not(.home-mode) .sidebar::-webkit-scrollbar { display: none; }
  body:not(.home-mode) .main { width: calc(100% - var(--rail)); margin-left: var(--rail); }
  body:not(.home-mode) .sidebar .logo { justify-content: center; align-self: center; width: 44px; height: 44px; margin: 0 0 12px; padding: 0; font-size: 0; }
  body:not(.home-mode) .sidebar .logo-mark { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }
  html.hw-theme body:not(.home-mode) .sidebar .logo-mark { font-size: 0; }   /* тема Хэллоуина: вместо ✦ тыква (promo/halloween-theme.css) */
  html.hw-theme body:not(.home-mode) .sidebar .logo-mark::before { font-size: 28px; }
  body:not(.home-mode) .sidebar .side-new-chat,
  body:not(.home-mode) .sidebar .side-chats { display: none; }
  body:not(.home-mode) .sidebar .nav { display: flex; flex-direction: column; gap: 2px; margin: 0; }
  body:not(.home-mode) .sidebar .nav-button { position: relative; flex-direction: column; justify-content: center; gap: 4px; min-height: 52px; padding: 7px 2px 6px;
    border-radius: 12px; color: #b9bab3; font-size: 0; line-height: 0; text-align: center; transition: background-color .15s ease, color .15s ease; }
  body:not(.home-mode) .sidebar .nav-button::after { content: attr(data-short); display: block; font-size: 11px; line-height: 13px; font-weight: 600; white-space: nowrap; }
  body:not(.home-mode) .sidebar .nav [data-nav="agents"]::after { content: "Агенты"; }   /* у ссылок без data-short: тесты сверяют их побуквенно */
  body:not(.home-mode) .sidebar .nav [data-nav="spaces"]::after { content: "Простр."; }
  body:not(.home-mode) .sidebar .nav [data-view="music"]::after { content: "Музыка"; }
  body:not(.home-mode) .sidebar .nav [data-view="library"]::after { content: "Работы"; }
  body:not(.home-mode) .sidebar .nav-button .nav-icon { width: 20px; height: 20px; color: inherit; font-size: 17px; }
  body:not(.home-mode) .sidebar .nav-button:hover { color: var(--paper); background: #1f201d; }
  body:not(.home-mode) .sidebar .nav-button.active { color: var(--ink); background: var(--acid); }
  body:not(.home-mode) .sidebar .nav-button.active .nav-icon { color: var(--ink); transform: none; }
  /* _PLACEAI_AUDIT31_RAIL_TITLES_V1_ 31.10 аудит A159: «Картинки» и «Карточка» (51 px) упирались в края плашки 55 px. Плашка на всю
     ширину рейла без 6 px по краям (59 px); полное название пункта — подсказка при наведении (app.js, railTitles) */
  body:not(.home-mode) .sidebar { padding-inline: 6px; }
  body:not(.home-mode) .sidebar .nav-button.more-toggle { display: none; }
  /* порядок и группы как в макете: Главная | Чат, Картинки, Видео, Музыка | Карточка, Оживить, Слайды, Агенты | Пространства, Работы, Чарт */
  body:not(.home-mode) .sidebar .nav [data-view="home"] { order: 0; }
  body:not(.home-mode) .sidebar .nav [data-view="chat"] { order: 1; }
  body:not(.home-mode) .sidebar .nav [data-view="image"] { order: 2; }
  body:not(.home-mode) .sidebar .nav [data-view="video"] { order: 3; }
  body:not(.home-mode) .sidebar .nav [data-view="music"] { order: 4; }
  body:not(.home-mode) .sidebar .nav [data-image-start="card"] { order: 5; }
  body:not(.home-mode) .sidebar .nav [data-video-start="photo"] { order: 6; }
  body:not(.home-mode) .sidebar .nav [data-view="presentation"] { order: 7; }
  body:not(.home-mode) .sidebar .nav [data-nav="agents"] { order: 8; }
  body:not(.home-mode) .sidebar .nav [data-nav="spaces"] { order: 9; }
  body:not(.home-mode) .sidebar .nav [data-view="library"] { order: 10; }
  body:not(.home-mode) .sidebar .nav [data-view="scene"] { order: 11; }
  body:not(.home-mode) .sidebar .nav [data-view="code"] { order: 12; }
  body:not(.home-mode) .sidebar .nav [data-view="chat"],
  body:not(.home-mode) .sidebar .nav [data-image-start="card"],
  body:not(.home-mode) .sidebar .nav [data-nav="spaces"] { margin-top: 13px; }
  body:not(.home-mode) .sidebar .nav [data-view="chat"]::before,
  body:not(.home-mode) .sidebar .nav [data-image-start="card"]::before,
  body:not(.home-mode) .sidebar .nav [data-nav="spaces"]::before { content: ""; position: absolute; top: -8px; left: 12px; right: 12px; height: 1px; background: var(--line); }
  /* кабинет внизу рейла: только кружок */
  body:not(.home-mode) .sidebar .sidebar-bottom { display: flex; justify-content: center; padding-top: 10px; }
  body:not(.home-mode) .sidebar button.profile { justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; }
  body:not(.home-mode) .sidebar .profile-text,
  body:not(.home-mode) .sidebar .profile-gear { display: none; }
  body:not(.home-mode) .sidebar .profile-avatar { width: 36px; height: 36px; font-size: 14px; }

  /* ── история чатов: своя колонка, только в чате ── */
  body:not(.home-mode):has(#chat.view.active) .main { width: calc(100% - var(--rail) - var(--chats)); margin-left: calc(var(--rail) + var(--chats)); }
  body:not(.home-mode):has(#chat.view.active) .sidebar::before { content: ""; position: fixed; z-index: -1; top: 0; bottom: 0; left: var(--rail); width: var(--chats);
    border-right: 1px solid var(--line); background: #141514; }
  body:not(.home-mode):has(#chat.view.active) .sidebar .side-new-chat { position: fixed; top: 14px; left: calc(var(--rail) + 12px); display: flex; justify-content: center;
    width: calc(var(--chats) - 24px); min-height: 44px; margin: 0; border-color: var(--line-strong, #474a44); border-radius: 10px; background: #191a19; font-size: 14px; font-weight: 700; }
  body:not(.home-mode):has(#chat.view.active) .sidebar .side-chats { position: fixed; top: 70px; bottom: 0; left: var(--rail); display: flex; width: var(--chats);
    margin: 0; padding: 10px 12px 16px; overflow-y: auto; }
  body:not(.home-mode):has(#chat.view.active) .sidebar .side-chats-title { padding: 0 10px; color: #8a8c85; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; }
  body:not(.home-mode):has(#chat.view.active) .sidebar .side-chat-list { overflow: visible; }
  body:not(.home-mode):has(#chat.view.active) .sidebar .side-chat-list button { padding: 10px; border-radius: 8px; font-size: 14px; font-weight: 600; }
  body:not(.home-mode):has(#chat.view.active) .sidebar .side-chat-list li.is-active button { background: #222321; }
  /* _PLACEAI_AUDIT31_SIDE_SEARCH_V1_ 31.10 аудит A107: поиск по чатам был только в меню телефона, на компьютере 40 похожих чатов листали глазами.
     Теперь строка поиска стоит в колонке чатов под «Новым чатом», когда есть что искать (кнопку телефона app.js прячет без чатов) */
  body:not(.home-mode):has(#chat.view.active) .sidebar:has(#side-search-open:not(.hidden)) .side-search { position: fixed; top: 68px; left: calc(var(--rail) + 12px);
    display: flex; align-items: center; gap: 8px; width: calc(var(--chats) - 24px); height: 38px; padding: 0 4px 0 10px; border: 1px solid var(--line); border-radius: 10px; background: #191a19; }
  body:not(.home-mode):has(#chat.view.active) .sidebar:has(#side-search-open:not(.hidden)) .side-chats { top: 114px; }
  body:not(.home-mode) .sidebar .side-search:focus-within { border-color: #5a5d56; }
  body:not(.home-mode) .sidebar .side-search .nav-icon { display: grid; place-items: center; flex: 0 0 16px; width: 16px; height: 16px; color: #8a8c85; }
  body:not(.home-mode) .sidebar .side-search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  body:not(.home-mode) .sidebar .side-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; color: var(--paper); background: transparent; font: inherit; font-size: 13.5px; }
  body:not(.home-mode) .sidebar .side-search input::-webkit-search-cancel-button { display: none; }
  body:not(.home-mode) .sidebar .side-search button { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; padding: 6px; border: 0; border-radius: 7px; color: #8a8c85; background: transparent; cursor: pointer; }
  body:not(.home-mode) .sidebar .side-search button:hover { color: var(--paper); background: #232520; }
  body:not(.home-mode) .sidebar .side-search:has(input:placeholder-shown) button { visibility: hidden; }

  /* ── шапка: раздел слева, справа баланс, «Купить кредиты», кружок кабинета ── */
  body:not(.home-mode) .topbar { min-height: 64px; border-bottom: 1px solid var(--line); }
  body:not(.home-mode):has(#chat.view.active) .topbar { border-bottom-color: var(--line); }
  body:not(.home-mode) .topbar .crumb { display: block; color: transparent; font-size: 0; }
  body:not(.home-mode) .topbar .crumb b { color: var(--paper); font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
  body:not(.home-mode) .top-actions { gap: 8px; margin-left: auto; }
  body:not(.home-mode) .top-actions .token-pill { order: 2; min-height: 40px; padding: 0 14px; border-color: var(--line); border-radius: 10px; background: transparent; font-size: 14px; font-weight: 800; }
  body:not(.home-mode) .top-actions .token-pill .token-value::after { content: " кр"; }
  body:not(.home-mode) .top-actions #topbar-topup { order: 3; min-height: 40px; padding: 0 16px; border-color: var(--acid); border-radius: 10px; color: var(--ink); background: var(--acid); font-size: 14px; font-weight: 800; }
  body:not(.home-mode) .top-actions #topbar-topup:hover { background: var(--acid-bright); }
  body:not(.home-mode) .top-actions .account-button { order: 4; }
  body:not(.home-mode) .top-actions .account-button:not(.is-guest) { justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border-color: transparent; background: #2b2c29; font-size: 0; }
  body:not(.home-mode) .top-actions .account-button:not(.is-guest)::before { width: auto; height: auto; color: var(--paper); background: none; font-size: 15px; }
}

/* ── телефон: нижняя панель и шторка «Создать» ── */
.tabbar, .create-sheet, .create-sheet-bg { display: none; }
@media (max-width: 680px) {
  body:not(.home-mode) .tabbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(16,17,16,.97); }
  .tabbar > * { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 56px; padding: 0; border: 0; color: #8a8c85; background: transparent;
    font: inherit; font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar [aria-current="page"] { color: var(--acid); }
  .tabbar .tab-plus { display: grid; place-items: center; width: 40px; height: 28px; border-radius: 9px; color: var(--ink); background: var(--acid); }
  .tabbar .tab-plus svg { width: 18px; height: 18px; stroke-width: 2.4; }
  .tabbar .tab-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--paper); background: #2b2c29; font-size: 12px; font-weight: 800; }
  /* место под панель: страница, строка ввода студии и чат поднимаются над ней */
  body:not(.home-mode) .main { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); }
  body:not(.home-mode) .view.studio-view .composer { bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); }
  body:not(.home-mode) #chat.view.active { height: calc(100dvh - 76px - var(--tabbar) - env(safe-area-inset-bottom)); }
  body:not(.home-mode).cookie-banner-open #chat.view.active { height: calc(100dvh - 180px - var(--tabbar) - env(safe-area-inset-bottom)); }
  /* _PLACEAI_AUDIT31_COOKIE_ROOM_V1_ 31.10 аудит A118: плашка cookie стоит на 10px выше нижней панели, как и строка ввода студии:
     строка встаёт над плашкой, а не под ней (плашка закрывала ряд параметров). Клавиатура открыта — панели нет, строка у самого низа */
  body:not(.home-mode).cookie-banner-open .view.studio-view .composer { padding-bottom: calc(var(--cookie-banner-h, 92px) + 18px); }
  body:not(.home-mode).cookie-banner-open.kb-open .view.studio-view .composer { padding-bottom: calc(var(--cookie-banner-h, 92px) + var(--tabbar) + env(safe-area-inset-bottom) + 18px); }
  body:not(.home-mode) .cookie-banner { bottom: calc(var(--tabbar) + 10px + env(safe-area-inset-bottom)); }
  /* _PLACEAI_AUDIT31_MODAL_COOKIE_ROOM_V1_ окна на телефоне кончаются над плашкой, а она стоит над нижней панелью (правило для компьютера в конце файла) */
  body:not(.home-mode).cookie-banner-open .modal, body:not(.home-mode).cookie-banner-open #billing-modal { padding-bottom: calc(var(--cookie-banner-h, 92px) + var(--tabbar) + 20px + env(safe-area-inset-bottom)); }
  body:not(.home-mode).cookie-banner-open .modal-box { max-height: calc(100dvh - 32px - var(--cookie-banner-h, 92px) - var(--tabbar) - 20px - env(safe-area-inset-bottom)); }
  body:not(.home-mode) .toast-stack, body:not(.home-mode) .toast { margin-bottom: var(--tabbar); }
  /* открыта клавиатура: панель прячем, чтобы поле ввода было сразу над клавиатурой.
     _PLACEAI_AUDIT31_KB_CLASS_V1_ 31.10: по метке body.kb-open (app.js, wireKeyboardClass), а не по :has(textarea:focus): фокус уходит
     уже на mousedown, строка прыгала раньше click, и первое касание кнопки отправки терялось */
  body:not(.home-mode).kb-open .tabbar { display: none; }
  body:not(.home-mode).kb-open .main { padding-bottom: 0; }
  body:not(.home-mode).kb-open .view.studio-view .composer { bottom: 0; }
  body:not(.home-mode).kb-open #chat.view.active { height: calc(100dvh - 76px); }
  body.drawer-open .tabbar { display: none; }

  .create-sheet-bg { position: fixed; z-index: 70; inset: 0; display: block; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .create-sheet { position: fixed; z-index: 71; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; max-height: 86dvh; overflow-y: auto; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); border-radius: 20px 20px 0 0; background: #141514; box-shadow: 0 24px 64px rgba(0,0,0,.6);
    transform: translateY(100%); visibility: hidden; transition: transform .3s cubic-bezier(.32,.72,0,1), visibility 0s linear .3s; }
  body.create-open .create-sheet { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.32,.72,0,1), visibility 0s; }
  body.create-open .create-sheet-bg { opacity: 1; pointer-events: auto; }
  .create-sheet h2 { margin: 0 0 4px; font-size: 18px; }
  .create-sheet button, .create-sheet a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px;
    color: var(--paper); background: #191a19; font: inherit; font-size: 15px; font-weight: 700; text-align: left; text-decoration: none; }
  .create-sheet small { color: #8a8c85; font-size: 13px; font-weight: 600; }
  .create-sheet .hidden { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .create-sheet, .create-sheet-bg, body.create-open .create-sheet { transition: none; }
}

/* ── _PLACEAI_START_V1_ «Главная» вошедшего (макеты HomeUser, M-HomeUser) ── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#start.view.active { display: grid; gap: 28px; max-width: 1120px; margin: 0 auto; padding: 32px 0 48px; }
.st-ask { display: grid; gap: 10px; padding: 8px 8px 8px 8px; border: 1px solid var(--line); border-radius: 20px; background: #191a19; }
.st-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.st-tab { min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; color: #8a8c85; background: transparent; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.st-tab[aria-pressed="true"] { color: var(--paper); background: #2b2c29; }
.st-tab:hover { color: var(--paper); }
.st-row { display: flex; align-items: center; gap: 10px; }
.st-row textarea { flex: 1; min-width: 0; min-height: 48px; max-height: 180px; padding: 12px 12px; border: 0; outline: 0; resize: none; color: var(--paper); background: transparent; font: inherit; font-size: 16px; line-height: 24px; }
.st-row textarea::placeholder { color: #8a8c85; }
.st-go { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 12px; color: var(--ink); background: var(--acid); font: inherit; font-size: 15px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.st-go:hover { background: var(--acid-bright); }
.st-go:active { transform: scale(.97); }
.st-go svg { width: 14px; height: 14px; fill: currentColor; }
.st-go small { padding: 3px 8px; border-radius: 8px; background: rgba(16,17,16,.12); font-size: 13px; font-weight: 800; }
.st-grid { display: grid; grid-template-columns: minmax(0, 1fr) 376px; gap: 28px; align-items: start; }
.st-main, .st-side { display: grid; gap: 14px; min-width: 0; }
.st-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; }
.st-head h2, .st-quick-title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 800; letter-spacing: -.01em; }
.st-head a, .st-link { padding: 0; border: 0; color: var(--acid); background: none; font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.st-space { display: flex; align-items: center; gap: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #191a19; color: var(--paper); text-decoration: none; transition: border-color .15s ease; }
.st-space:hover { border-color: #5d6058; }
.st-space-map { display: flex; align-items: center; flex: 0 0 auto; gap: 14px; width: 250px; height: 112px; padding: 0 16px; border-radius: 10px;
  background: #101110 radial-gradient(circle, #30322f 1px, transparent 1.4px) 0 0 / 14px 14px; }
.st-space-map i { position: relative; width: 40px; height: 30px; border: 1.5px solid #5cb8ff; border-radius: 7px; background: #222321; }
.st-space-map i + i::before { content: ""; position: absolute; top: 50%; right: 100%; width: 14px; height: 1.5px; background: currentColor; }
.st-space-map i:nth-child(1) { color: #5cb8ff; }
.st-space-map i:nth-child(2) { height: 40px; border-color: #5cb8ff; color: #5cb8ff; }
.st-space-map i:nth-child(3) { height: 40px; border-color: #ff9a3c; color: #ff9a3c; }
.st-space-map i:nth-child(4) { border-color: var(--acid); color: var(--acid); }
.st-space-text { display: grid; gap: 6px; min-width: 0; }
.st-space-text b { font-size: 17px; }
.st-space-text small { color: #8a8c85; font-size: 13px; line-height: 18px; }
.st-works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.st-work { display: grid; grid-template-rows: auto auto; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 14px; color: var(--paper); background: #191a19; font: inherit; text-align: left; cursor: pointer; }
.st-work:hover { border-color: #5d6058; }
.st-work .st-thumb { position: relative; display: block; aspect-ratio: 1; background: #141514; }
.st-work img, .st-work video { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-work .st-kind { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; background: rgba(16,17,16,.85); font-size: 12px; font-weight: 700; }
.st-work .st-kind::before { content: ""; width: 7px; height: 7px; }
.st-work[data-kind="image"] .st-kind::before { background: #5cb8ff; border-radius: 2px; }
.st-work[data-kind="video"] .st-kind::before { width: 0; height: 0; border-left: 7px solid #ff9a3c; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.st-work[data-kind="audio"] .st-kind::before { background: #ff6fae; transform: rotate(45deg) scale(.85); }
.st-work[data-kind="audio"] .st-thumb { display: grid; place-items: center; color: #ff6fae; font-size: 34px; background: linear-gradient(135deg, #2a1d25, #141514); }
.st-work .st-meta { display: block; padding: 9px 10px; overflow: hidden; color: #8a8c85; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.st-empty { grid-column: 1 / -1; margin: 0; padding: 22px 16px; border: 1px dashed var(--line); border-radius: 14px; color: #8a8c85; font-size: 14px; }
.st-card { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #191a19; }
.st-cap { color: #8a8c85; font-size: 13px; font-weight: 700; }
.st-credits { font-size: 34px; line-height: 40px; font-weight: 800; letter-spacing: -.02em; }
.st-card p { margin: 0 0 6px; color: #b9bab3; font-size: 14px; line-height: 20px; }
.st-ghost { min-height: 44px; border: 1px solid var(--line-strong, #474a44); border-radius: 10px; color: var(--paper); background: transparent; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.st-ghost:hover { border-color: #5d6058; }
.st-quick-title { margin-top: 6px; }
.st-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-quick button { min-height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--paper); background: transparent; font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.st-quick button:hover { border-color: #5d6058; background: #191a19; }
@media (max-width: 980px) { .st-grid { grid-template-columns: minmax(0, 1fr); } }
body:has(#credits-banner:not(.hidden)) #start.view.active { padding-top: 76px; }
@media (max-width: 680px) {
  #start.view.active { gap: 18px; padding: 12px 0 24px; }
  .st-ask { border-radius: 16px; }
  .st-row textarea { padding: 12px 8px; font-size: 16px; }
  .st-row textarea::placeholder { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body:has(#credits-banner:not(.hidden)) #start.view.active { padding-top: 64px; }
  /* кабинет на телефоне в нижней панели, в шапке остаётся баланс */
  body:not(.home-mode) .top-actions .account-button:not(.is-guest) { display: none; }
  .st-row { gap: 8px; }
  .st-go { padding: 0 14px; }
  .st-go #st-go-label { display: none; }
  .st-space { gap: 12px; padding: 12px; }
  .st-space-map { width: 110px; height: 64px; gap: 6px; padding: 0 8px; }
  .st-space-map i { width: 18px; height: 14px; border-radius: 4px; }
  .st-space-map i:nth-child(2), .st-space-map i:nth-child(3) { height: 18px; }
  .st-space-map i + i::before { width: 6px; }
  .st-works { gap: 8px; }
  .st-work .st-meta { display: none; }
  .st-credits { font-size: 28px; line-height: 34px; }
}

/* ── _PLACEAI_BILLING_DARK_V1_ окно пополнения по макету BuyCredits: тёмное, пакеты тёмными карточками, выгодный - лаймовой
   рамкой, кнопка покупки лаймовая. Порядок покупки и все варианты оплаты прежние (Российские / Зарубежные карты, свой объём) ── */
#billing-modal .billing-dialog { border-color: #30322f; border-radius: 20px; color: var(--paper); background: #191a19; box-shadow: 0 24px 64px rgba(0,0,0,.6); }
#billing-modal .billing-dialog h2 { color: var(--paper); }
#billing-modal .billing-dialog .eyebrow { color: #8a8c85; }
#billing-modal .billing-dialog .modal-close { border-color: #30322f; color: var(--paper); background: #222321; }
#billing-modal .billing-dialog .modal-close:hover { background: #2b2c29; }
#billing-modal .billing-intro { border-color: #30322f; background: #141514; }
#billing-modal .billing-intro b { color: var(--paper); }
#billing-modal .billing-intro span { color: #8a8c85; }
#billing-modal .billing-intro .billing-intro-mark { color: var(--ink); }
#billing-modal .billing-cur { border-color: #30322f; background: #141514; }
#billing-modal .billing-cur-tab { color: #b9bab3; }
#billing-modal .billing-cur-tab b { color: var(--paper); background: #2b2c29; }
#billing-modal .billing-cur-tab:not([aria-selected="true"]):hover { color: var(--paper); background: #222321; }
#billing-modal .billing-cur-tab[aria-selected="true"] { color: var(--paper); background: #2b2c29; }
#billing-modal .billing-cur-tab[aria-selected="true"] b { color: var(--ink); background: var(--acid); }
#billing-modal .billing-cur-tab:focus-visible { outline-color: var(--acid); }
#billing-modal .billing-seller { color: #8a8c85; }
#billing-modal .quick-topup { border-color: var(--line-strong, #474a44); background: #141514; }
#billing-modal .quick-topup:hover { border-color: var(--acid); }
#billing-modal .billing-packages .package { border-color: #30322f; color: var(--paper); background: #141514; box-shadow: none; }
#billing-modal .billing-packages .package:hover { border-color: #5d6058; box-shadow: none; }
#billing-modal .billing-packages .package.featured { border: 2px solid var(--acid); background: rgba(217,255,72,.05); box-shadow: none; }
#billing-modal .billing-packages .package small { color: #8a8c85; }
#billing-modal .billing-packages .package.featured small { color: var(--acid); }
#billing-modal .package-tokens strong { color: var(--paper); }
#billing-modal .package-tokens span, #billing-modal .package-use, #billing-modal .package-capacity-label { color: #8a8c85; }
#billing-modal .billing-packages .package-capacity { border-color: #30322f; background: #191a19; }
#billing-modal .billing-packages .package-capacity li + li { border-color: #262725; }
#billing-modal .billing-packages .package-capacity li > span { color: #b9bab3; }
#billing-modal .billing-packages .package-capacity i { color: #b9bab3; background: #2b2c29; }
#billing-modal .billing-packages .package-capacity b { color: var(--paper); background: #2b2c29; }
#billing-modal .billing-packages .package.featured .package-capacity { border-color: rgba(217,255,72,.25); background: rgba(217,255,72,.04); }
#billing-modal .billing-packages .package button { border-color: #474a44; color: var(--paper); background: #2b2c29; }
#billing-modal .billing-packages .package button:hover { border-color: #5d6058; background: #34362f; }
#billing-modal .billing-packages .package.featured button { border-color: var(--acid); color: var(--ink); background: var(--acid); }
#billing-modal .billing-packages .package.featured button:hover { background: var(--acid-bright); }
#billing-modal .custom-topup { border-color: #30322f; color: var(--paper); background: #141514; box-shadow: none; }
#billing-modal .custom-topup-head h3, #billing-modal .custom-topup-field label, #billing-modal .custom-topup-use, #billing-modal .custom-topup-rate { color: #8a8c85; }
#billing-modal .custom-topup .custom-topup-credits { border-color: #30322f; color: var(--paper); background: #222321; }
#billing-modal .custom-topup .custom-topup-credits:focus { border-color: var(--acid); }
#billing-modal .custom-topup-range::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--acid) var(--fill), #30322f var(--fill)); }
#billing-modal .custom-topup-range::-webkit-slider-thumb { border-color: #191a19; }
#billing-modal .custom-topup-range::-moz-range-track { background: #30322f; }
#billing-modal .custom-topup-range::-moz-range-progress { background: var(--acid); }
#billing-modal .custom-topup-range::-moz-range-thumb { border-color: #191a19; }
#billing-modal .custom-topup-summary { border-color: #30322f; background: #191a19; }
#billing-modal .custom-topup-total { color: var(--paper); }
#billing-modal .custom-topup-total.is-error { color: #ff6b5b; }
#billing-modal .custom-topup-summary .custom-topup-upgrade { color: var(--acid); background: rgba(217,255,72,.1); }
#billing-modal .custom-topup-buy { border-color: var(--acid); color: var(--ink); background: var(--acid); }
#billing-modal .custom-topup-buy:hover:not(:disabled) { border-color: var(--acid-bright); background: var(--acid-bright); }
#billing-modal .custom-topup input:focus-visible, #billing-modal .custom-topup-buy:focus-visible { outline-color: var(--acid); }
#billing-modal .billing-dialog .billing-disclaimer { color: #8a8c85; }
#billing-modal .billing-dialog .billing-disclaimer a, #billing-modal .billing-dialog a { color: var(--acid); }
/* _PLACEAI_AUDIT31_PAYMENT_NOTE_V1_ 31.10 аудит A124: у плашки внизу окна два класса, billing-disclaimer и payment-note. Серый
   текст 11 px от billing-disclaimer ложился на светло-зелёный фон payment-note, контраст 2,79:1 (на .net в ней единственное
   объяснение, что ссылку на оплату пришлют на почту). В тёмном окне плашка тёмная с лаймовым оттенком, текст светлый, 12 px */
#billing-modal .billing-dialog .payment-note { border: 1px solid rgba(217,255,72,.2); color: #d8d9d1; background: rgba(217,255,72,.07); font-size: 12px; }
#billing-modal .billing-dialog .payment-note::before { background: var(--acid); }

/* ── _PLACEAI_AUDIT31_DARK_MODALS_V1_ 31.10 аудит A160: окна поддержки, результата оплаты и публикации оставались бежевыми
   (светлая тема .modal-box) поверх тёмной студии. Теперь в тех же цветах, что окно пополнения ── */
:is(#support-modal, #payment-modal, #publish-modal) .modal-box { border: 1px solid #30322f; border-radius: 20px; color: var(--paper); background: #191a19; box-shadow: 0 24px 64px rgba(0,0,0,.6); }
:is(#support-modal, #payment-modal, #publish-modal) .modal-box h2 { color: var(--paper); }
:is(#support-modal, #payment-modal, #publish-modal) .modal-box .eyebrow { color: #8a8c85; }
:is(#support-modal, #payment-modal, #publish-modal) .modal-box > p:not(.eyebrow) { color: #b9bab3; }
:is(#support-modal, #payment-modal, #publish-modal) .modal-close { border-color: #30322f; color: var(--paper); background: #222321; }
:is(#support-modal, #payment-modal, #publish-modal) .modal-close:hover { background: #2b2c29; }
#support-modal .support-mail { border-color: #30322f; background: #141514; }
#support-modal .support-mail span { color: var(--paper); }
#support-modal .support-actions a { border-color: var(--acid); color: var(--ink); background: var(--acid); }
#support-modal .support-actions a:hover { border-color: var(--acid-bright); background: var(--acid-bright); }
#support-modal .support-actions button { border-color: #474a44; color: var(--paper); background: #2b2c29; }
#support-modal .support-actions button:hover { border-color: #5d6058; background: #34362f; }
#support-modal .support-links a, #payment-modal .modal-box a { color: #b9bab3; }
#support-modal .support-links a:hover { color: var(--acid); }
#publish-modal .publish-dialog label { color: #b9bab3; }
#publish-modal .publish-dialog label span { color: #8a8c85; }
#publish-modal .publish-dialog input, #publish-modal .publish-dialog textarea { border-color: #30322f; color: var(--paper); background: #222321; }
#publish-modal .publish-dialog input::placeholder, #publish-modal .publish-dialog textarea::placeholder { color: #6f716b; }
#publish-modal .publish-dialog input:focus, #publish-modal .publish-dialog textarea:focus { border-color: var(--acid); }
#publish-modal .publish-dialog-actions .outline-button { border-color: #474a44; color: var(--paper); background: transparent; }
#publish-modal .publish-dialog-actions .outline-button:hover { border-color: #5d6058; background: #222321; }
#publish-modal .publish-dialog-actions .generate-button { color: var(--ink); background: var(--acid); }
#publish-modal .publish-dialog-actions .generate-button:hover:not(:disabled) { background: var(--acid-bright); }
:is(#support-modal, #payment-modal, #publish-modal) :is(a, button, input, textarea):focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }

/* _PLACEAI_AUDIT31_WORK_TILE_V1_ 31.10 аудит A157: работа, открытая плиткой «Главной», подсвечена в «Моих работах» */
#library .library-card { scroll-margin: 90px 0; transition: border-color .3s ease, box-shadow .3s ease; }
body:not(.home-mode) #library .library-grid .library-card.is-focused { border-color: var(--acid); box-shadow: 0 0 0 3px rgba(var(--acid-rgb, 217,255,72), .35); outline: none; }

/* ── _PLACEAI_SECTION_FEED_V1_ разделы по макетам Images, Video: число моделей в шапке, последние работы вместо заголовка,
   кнопка запуска - лаймовая плашка с подписью и ценой (на телефоне кружок), при нехватке кредитов жёлтая ── */
body:not(.home-mode) .topbar .crumb b[data-count]:not([data-count=""])::after { content: " · " attr(data-count); color: #8a8c85; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.view.studio-view .studio-empty.has-feed { margin: 0 !important; padding: 8px 0 16px !important; text-align: left; }
.view.studio-view .studio-empty.has-feed > h1, .view.studio-view .studio-empty.has-feed > .lead, .view.studio-view .studio-empty.has-feed > .examples-block { display: none; }
.st-feed { display: grid; gap: 12px; width: 100%; }
.st-feed .st-works { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 681px) {
  .view.studio-view .studio-bar .generate-button { display: inline-flex; flex: none; align-items: center; gap: 6px; width: auto; height: 40px; padding: 0 14px; border-radius: 12px; }
  .view.studio-view .studio-bar .generate-button > span:first-child,
  .view.studio-view .studio-bar .generate-button .button-price { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 14px; font-weight: 800; white-space: nowrap; }
  .view.studio-view .studio-bar .generate-button .studio-send-icon { display: none; }
}
body.was-signed .view.studio-view .studio-bar .generate-button.needs-credits { background: #ffb547; }
@media (max-width: 680px) { .st-feed .st-works { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── _PLACEAI_WORKS_V1_ «Мои работы» по макету MyWorks: без большого заголовка, фильтры первой строкой, плотная сетка
   тёмных карточек (превью 4:5, тип плашкой, промпт и модель под ним). Все кнопки и фильтры прежние ── */
body:not(.home-mode) #library > .eyebrow, body:not(.home-mode) #library > h1, body:not(.home-mode) #library > .lead { display: none; }
body:not(.home-mode) #library.view.active { padding-top: 20px; }
body:not(.home-mode):has(#credits-banner:not(.hidden)) #library.view.active { padding-top: 76px; }
body:not(.home-mode) #library .library-toolbar { display: flex; flex-direction: column-reverse; flex-wrap: nowrap; align-items: stretch; gap: 10px; margin: 0 0 18px; }
/* _PLACEAI_AUDIT31_MYWORKS_WIDTH_V1_ 31.10 аудит A42/A45: колонка наследовала flex-wrap: wrap из index.html, а многострочный колоночный flex
   растягивал ряд фильтров до его полной ширины (640 px): /myworks на телефоне было шире экрана, нижнее меню уезжало. Колонка в одну
   линию берёт ширину контейнера, и ряд фильтров прокручивается внутри себя */
body:not(.home-mode) #library .library-filters { min-width: 0; max-width: 100%; }
/* _PLACEAI_AUDIT31_AUDIO_WIDTH_V1_ 31.10 аудит A46: у плеера звука нет своей ширины (300 px), блок карточки срезал громкость и «⋮» */
body:not(.home-mode) #library .library-card-media audio { width: calc(100% - 16px); max-width: 100%; }
body:not(.home-mode) #library .library-toolbar > p { margin: 0; color: #8a8c85; font-size: 12px; }
body:not(.home-mode) #library .library-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
body:not(.home-mode) #library .library-filters .filter-button { order: 1; min-height: 40px; padding: 0 16px; border: 1px solid #30322f; border-radius: 999px; color: var(--paper); background: transparent; font-size: 14px; font-weight: 700; }
body:not(.home-mode) #library .library-filters .filter-button.selected { border-color: var(--paper); color: var(--ink); background: var(--paper); }
body:not(.home-mode) #library .library-filters .library-action { order: 2; min-height: 40px; border-color: #30322f; border-radius: 10px; color: #b9bab3; background: transparent; }
body:not(.home-mode) #library .library-filters #import-audio { margin-left: auto; }
body:not(.home-mode) #library .library-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
body:not(.home-mode) #library .library-card { overflow: hidden; border: 1px solid #30322f; border-radius: 14px; background: #191a19; }
body:not(.home-mode) #library .library-card:hover { border-color: #5d6058; }
body:not(.home-mode) #library .library-card-media { aspect-ratio: 4 / 5; background: #141514; }
body:not(.home-mode) #library .library-card-media img { width: 100%; height: 100%; object-fit: cover; }
body:not(.home-mode) #library .library-card-body { gap: 6px; padding: 10px 12px 12px; }
body:not(.home-mode) #library .library-card-body h3 { overflow: hidden; margin: 0; font-size: 14px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
body:not(.home-mode) #library .library-card-body p { display: none; }
body:not(.home-mode) #library .card-meta { color: #8a8c85; font-size: 12px; }
body:not(.home-mode) #library .type-badge { padding: 2px 8px; border-radius: 6px; color: var(--paper); background: #2b2c29; font-size: 11px; letter-spacing: 0; text-transform: none; }
body:not(.home-mode) #library .library-card-actions .library-action { min-height: 34px; border-color: #30322f; border-radius: 9px; color: var(--paper); background: transparent; }
@media (max-width: 680px) {
  body:not(.home-mode) #library .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body:not(.home-mode) #library .library-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body:not(.home-mode) #library .filter-button { flex: none; }
  body:not(.home-mode) #library .library-filters #import-audio { margin-left: 0; }
  body:not(.home-mode) #library .library-filters .library-action { flex: none; }   /* _PLACEAI_AUDIT31_MYWORKS_WIDTH_V1_ кнопки ряда не сжимаются в две строки */
  body:not(.home-mode) #library .library-card-media audio { width: 100%; }   /* _PLACEAI_AUDIT31_AUDIO_WIDTH_V1_ у плеера уже ~170 px Chrome прячет полосу перемотки: на телефоне плеер во всю ширину карточки */
}
/* _PLACEAI_AUDIT31_MODAL_COOKIE_ROOM_V1_ 31.10 доработка A132/A118: плашка cookie лежит поверх окон (z-index 60 против 50), и низ окна
   под ней не прокручивался: на телефоне кнопку покупки «Командного» (последняя карточка) закрывала плашка, хотя окно к ней прокрутилось.
   Пока плашка видна, у окон снизу место на её высоту: содержимое заканчивается над плашкой */
body.cookie-banner-open .modal, body.cookie-banner-open #billing-modal { padding-bottom: calc(var(--cookie-banner-h, 66px) + 30px); }   /* телефон: в блоке нижней панели выше */
/* _PLACEAI_AUDIT31_RESUME_PRICE_V1_ 31.10 доработка A76: пустая плашка цены (цены ещё нет) не висит серым кружком рядом с кнопкой */
.view.studio-view .studio-bar .cost:empty { display: none; }