:root { --bg: #0d0f14; --panel: #161a23; --panel-2: #1d222e; --border: #2a3040; --text: #e7ebf3; --muted: #8b93a7; --accent: #6d5efc; --accent-2: #8b7bff; --ok: #35c98a; --warn: #f0b84c; --err: #ff6b6b; --radius: 14px; } * { box-sizing: border-box; } body { margin: 0; /* Noto Emoji (моно) раньше системных: два десятка эмодзи-иконок выглядят одинаково на Mac и Windows и одним весом с текстом, а не цветной пестротой. */ font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Noto Emoji", sans-serif; background: radial-gradient(1200px 600px at 80% -10%, #1a1e2e 0%, var(--bg) 55%); color: var(--text); min-height: 100vh; } /* Topbar */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: rgba(13, 15, 20, 0.85); backdrop-filter: blur(12px); z-index: 10; } .brand { display: flex; align-items: center; gap: 14px; } .logo { font-size: 30px; } .brand h1 { margin: 0; font-size: 20px; letter-spacing: -0.02em; } .sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; } /* Порядок на всех страницах один: действия страницы · переходы · кто вошёл. Разделители отбивают группы, чтобы ряд не читался как восемь равных кнопок. */ .topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tb-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; } /* Меню пользователя. Статус ключа, настройки и выход — не то, к чему тянутся каждую минуту: в ряду они отнимали внимание у навигации. Теперь одна кнопка с именем, остальное раскрывается. */ .usermenu { position: relative; } .user-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 190px; background: var(--panel); border: 1px solid var(--border); border-radius: 11px; box-shadow: 0 12px 32px rgba(0,0,0,.45); padding: 6px; display: flex; flex-direction: column; gap: 2px; } .user-panel .key-status { padding: 7px 10px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .um-item { background: none; border: none; color: var(--text); font-family: inherit; font-size: 13.5px; text-align: left; padding: 8px 10px; border-radius: 7px; cursor: pointer; } .um-item:hover { background: var(--panel-2); } .key-status { font-size: 13px; color: var(--muted); } .key-status.ok { color: var(--ok); } .key-status.bad { color: var(--err); } /* Layout */ .layout { display: grid; grid-template-columns: 420px 1fr; gap: 22px; padding: 22px 28px 60px; max-width: 1400px; margin: 0 auto; align-items: start; } @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } } .panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; } .panel h2 { margin: 0 0 16px; font-size: 16px; } /* Form */ .field { display: block; margin-bottom: 16px; } .field > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 7px; } select, textarea, input[type="text"], input[type="number"], input[type="password"] { width: 100%; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); padding: 11px 12px; font-size: 14px; font-family: inherit; outline: none; transition: border-color .15s; } select:focus, textarea:focus, input:focus { border-color: var(--accent); } textarea { resize: vertical; line-height: 1.45; } .row { display: flex; gap: 8px; } .row select { flex: 1; } .hint { color: var(--muted); font-weight: 400; } .hint { font-size: 12px; } /* Checkbox / switch */ .field.checkbox { display: flex; flex-direction: column; } .switch { position: relative; display: inline-block; width: 46px; height: 26px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; inset: 0; background: var(--panel-2); border: 1px solid var(--border); border-radius: 26px; transition: .2s; } .slider:before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: var(--muted); border-radius: 50%; transition: .2s; } .switch input:checked + .slider { background: var(--accent); border-color: var(--accent); } .switch input:checked + .slider:before { transform: translateX(20px); background: #fff; } .switch input:disabled + .slider { opacity: .4; cursor: not-allowed; } /* Dropzone */ .dropzone { border: 1.5px dashed var(--border); border-radius: 12px; padding: 18px; text-align: center; transition: border-color .15s, background .15s; background: var(--panel-2); } .dropzone.dragover { border-color: var(--accent); background: #221f3a; } .drop-placeholder { color: var(--muted); font-size: 13px; } .link { background: none; border: none; color: var(--accent-2); cursor: pointer; font-size: 13px; padding: 0; text-decoration: underline; } /* Buttons */ button { font-family: inherit; } .primary { width: 100%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; border-radius: 11px; padding: 14px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 6px; transition: transform .08s, opacity .15s; } .primary:hover { transform: translateY(-1px); } .primary:disabled { transform: none; } .ghost { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; cursor: pointer; font-size: 14px; } .ghost.small { padding: 6px 12px; font-size: 13px; } .ghost:hover { border-color: var(--accent); } /* Ссылка-кнопка выглядит как кнопка везде, а не только в шапке: «↓ CSV» и «↓ Скачать» — действия, подчёркивание делало их похожими на текст. */ a.ghost { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } /* Деструктивное действие. Раньше «Удалить» ничем не отличалось от «Скачать», и опасность читалась только по подписи. Красным подсвечиваем при наведении: постоянный красный в ряду кнопок кричит громче, чем нужно. */ .ghost.danger:hover { border-color: var(--err); color: var(--err); background: rgba(255,107,107,.08); } /* ---------- Чип: переключаемая пилюля ---------- Один компонент на все фильтры, пресеты, отметки и форматы. До этого их было четыре почти одинаковых (.rf, .preset, .verdict button, .asp-chip) с разным кеглем, отступами и скруглением — при том, что ведут себя одинаково. Варианты: .sm — плотнее, .mono — цифры и размеры, .on — включён, .accent — подсвеченное предложение, .danger — сброс или удаление. */ .chip { font-family: inherit; font-size: 12px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px; cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s; } .chip:hover { color: var(--text); border-color: var(--accent); } .chip.on { background: rgba(123,108,255,.16); border-color: var(--accent); color: var(--accent-2); font-weight: 600; } .chip.sm { font-size: 11px; padding: 4px 9px; } .chip.mono { font-family: var(--mono, monospace); } .chip.accent { color: var(--accent-2); border-color: rgba(123,108,255,.4); background: rgba(123,108,255,.1); } /* Рамку не снимаем: в ряду с соседями чип без рамки выглядел выпавшим. */ .chip.danger { color: var(--err); } .chip.danger:hover, .iconbtn.boxed.danger:hover { border-color: var(--err); color: var(--err); background: rgba(255,107,107,.1); } /* Ряд чипов: фильтры «Готового» и ленты выкладываются одинаково. */ .chip-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .chip-row + .chip-row { margin-top: 8px; } .chip-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; } /* Пикер-пилюля: тот же список, но кнопка выглядит чипом — см. «Пикер» ниже. */ .chip-pick { display: inline-flex; } /* Выключенная кнопка гаснет одинаково. Раньше гасли только .primary и .chip, а .ghost выглядела рабочей — «Удалить» без выбранных креативов не нажималась, но об этом было никак не догадаться. */ .primary:disabled, .ghost:disabled, .chip:disabled, .iconbtn:disabled { opacity: .45; cursor: not-allowed; } .ghost:disabled:hover, .chip:disabled:hover, .iconbtn:disabled:hover { border-color: var(--border); color: inherit; background: var(--panel-2); } /* ---------- Мелочи, встречавшиеся под разными именами ---------- */ /* Подпись заглавными над числом: показатели в учёте и в строке денег студии. */ .label-cap { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } /* Строка, которая не должна ломать раскладку. */ .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Мягкая ссылка внутри карточки: подчёркнута пунктиром, не спорит с текстом. */ .card-link { color: var(--muted); text-decoration: none; border-bottom: 1px dashed var(--border); } .card-link:hover { color: var(--accent-2); border-color: var(--accent-2); } /* ---------- Иконочная кнопка ---------- Мелкое действие без подписи: удалить, скопировать, свернуть. Было пять вариантов с разными размерами и радиусами. */ .iconbtn { background: none; border: none; color: var(--faint, #5a6274); cursor: pointer; padding: 4px 7px; border-radius: 7px; font-family: inherit; font-size: 13px; transition: color .15s, background .15s; } .iconbtn:hover { color: var(--text); background: rgba(255,255,255,.06); } .iconbtn.danger:hover { color: var(--err); background: rgba(255,107,107,.1); } /* В рамке — когда кнопка стоит на карточке, а не в строке таблицы: без рамки она там теряется. */ .iconbtn.boxed { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); padding: 5px 9px; border-radius: 8px; line-height: 1; } .iconbtn.boxed:hover { color: var(--text); border-color: var(--accent); background: var(--panel-2); } .form-msg { margin-top: 12px; font-size: 13px; min-height: 18px; } .form-msg.err { color: var(--err); } .form-msg.ok { color: var(--ok); } /* Gallery */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } .card video, .card .thumb-ph { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #0a0c11; display: block; max-height: 70vh; } .thumb-ph { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; gap: 8px; } .card-body { padding: 10px 11px 11px; } /* Шапка карточки: код, когда сделано, сколько стоило. Три коротких значения занимали три ряда — код своей строкой, цена уезжала под теги, дата болталась в хвосте техстроки. Служебное к служебному, в одну строку. */ .card-head { display: flex; align-items: center; gap: 7px; } .card-head .ch-date { font-family: var(--mono, monospace); font-size: 10px; color: var(--faint, #5a6274); } .card-head .tag.cost { margin-left: auto; } .card-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } /* Бейдж — то же по виду, но не нажимается: подпись к карточке, счётчик, пометка. Было три копии (.tag, .gchip, .tstate) с разным кеглем. */ .tag { font-size: 11px; background: #262c3a; color: var(--muted); padding: 3px 8px; border-radius: 20px; } .tag.mono { font-family: var(--mono, monospace); font-size: 10.5px; } .tag.outline { background: var(--panel-2); border: 1px solid var(--border); } .tag.cost { background: rgba(53,201,138,.14); color: var(--ok); font-weight: 600; } /* Анимация генерации */ /* Индикатор-бегунок (детерминированного % у API нет) */ @keyframes indef { 0% { left: -35%; } 100% { left: 100%; } } /* Кнопки подвала — по своей ширине, а не растянутые на равные доли: с flex: 1 восемь кнопок разъезжались в два ряда высотой с треть карточки. */ .card-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; align-items: flex-start; } .card-actions > a, .card-actions > button, .card-actions .menu-btn { flex: 0 1 auto; text-align: center; text-decoration: none; white-space: nowrap; font-size: 11px; line-height: 1.2; padding: 6px 8px; border-radius: 7px; background: #262c3a; color: var(--text); border: none; cursor: pointer; } .card-actions > a:hover, .card-actions > button:hover, .card-actions .menu-btn:hover { background: #313a4d; } .card-actions .ca-del { color: var(--muted); } .card-actions .ca-del:hover { background: rgba(255,107,107,.14); color: var(--err); } /* Меню редких действий. Раскрывается поверх страницы — карточка в сетке не должна становиться выше соседей от того, что в неё заглянули. */ .menu-wrap { flex: 0 1 auto; } .menu-btn { color: var(--muted); } .menu-pop { position: fixed; z-index: 300; min-width: 168px; overflow: auto; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 5px; box-shadow: 0 12px 30px -8px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 2px; } .menu-pop button, .menu-pop a { display: block; width: 100%; text-align: left; text-decoration: none; white-space: nowrap; background: none; border: none; cursor: pointer; color: var(--text); font-family: inherit; font-size: 12px; line-height: 1.2; padding: 7px 9px; border-radius: 7px; } .menu-pop button:hover, .menu-pop a:hover { background: #313a4d; } .menu-pop .ca-del { color: var(--muted); } .menu-pop .ca-del:hover { background: rgba(255,107,107,.14); color: var(--err); } /* Главное действие карточки — докрутка. Тот же приём, что у «доработать» в карточке промпта: подсвечен один вход, остальные ровные. */ .card-actions button.accent { background: rgba(123,108,255,.16); color: var(--accent-2); } .card-actions button.accent:hover { background: rgba(123,108,255,.26); } .spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent-2); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } .empty { color: var(--muted); font-size: 14px; padding: 30px 0; text-align: center; } .hidden { display: none !important; } /* Modal */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; } .modal-box { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; max-width: 640px; width: 100%; max-height: 82vh; overflow: auto; padding: 24px; position: relative; } .modal-close { position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; } .settings-actions { display: flex; gap: 10px; margin-top: 8px; } .modal-box code { background: var(--panel-2); padding: 2px 6px; border-radius: 5px; font-size: 12px; } .modal-box pre { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 14px; overflow: auto; font-size: 12px; line-height: 1.5; } /* Тост — общая обратная связь. Живёт в базовых стилях: им пользуются и студия, и лента, и учёт (см. toast() в common.js). */ .toast { position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%); z-index: 200; background: var(--panel); border: 1px solid var(--ok); color: var(--text); border-radius: 11px; padding: 12px 18px; font-size: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.4); max-width: 90vw; } .toast.err { border-color: var(--err); } /* ---------- Просмотрщик креатива ---------- Общий для студии и ленты (openViewer в common.js). Разметку создаёт сам код, страницам не нужен свой блок в HTML. */ .viewer { position: fixed; inset: 0; z-index: 300; background: rgba(6,8,12,.94); display: flex; align-items: center; justify-content: center; padding: 60px 70px 76px; } .viewer.hidden { display: none; } .vw-stage { max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; } .vw-stage img, .vw-stage video { max-width: 100%; max-height: calc(100vh - 150px); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); display: block; } .vw-btn { position: absolute; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); color: #fff; border-radius: 10px; cursor: pointer; font-family: inherit; } .vw-btn:hover { background: rgba(255,255,255,.18); } .vw-close { top: 16px; right: 18px; width: 40px; height: 40px; font-size: 17px; } .vw-prev, .vw-next { top: 50%; transform: translateY(-50%); width: 46px; height: 72px; font-size: 30px; line-height: 1; } .vw-prev { left: 14px; } .vw-next { right: 14px; } .vw-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: rgba(12,14,19,.9); border-top: 1px solid var(--border); flex-wrap: wrap; } .vw-bar .spacer { flex: 1; } .vw-info { font-size: 13px; color: var(--muted); } .vw-info b { color: var(--text); } @media (max-width: 560px) { .viewer { padding: 50px 12px 76px; } } /* ---------- Таблица-карточка ---------- Один компонент на список игр и на список людей: раньше админка подключала .games-table — реиспользование было, но имя врало о назначении. sortable-заголовки нужны обеим, прокрутка по горизонтали — тоже. */ .table-card { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); } .table-card table { border-collapse: collapse; width: 100%; min-width: 720px; } .table-card th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 11px 13px; border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none; } .table-card th:hover { color: var(--text); } .table-card th .arr { opacity: .5; font-size: 9px; } .table-card td { padding: 10px 13px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; } .table-card tr:last-child td { border-bottom: none; } .table-card tbody tr { cursor: pointer; } .table-card tbody tr:hover { background: var(--panel-2); } .table-card .tname { display: flex; align-items: center; gap: 9px; font-weight: 600; } .table-card .tname img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border); } .table-card .tname .ph { width: 30px; height: 30px; border-radius: 6px; background: var(--panel-2); display: flex; align-items: center; justify-content: center; font-size: 14px; } .table-card .num { font-family: var(--mono, monospace); font-variant-numeric: tabular-nums; white-space: nowrap; } .table-card .money { color: var(--ok); } .table-card .muted { color: var(--muted); font-size: 12px; } .table-card .tact { white-space: nowrap; } /* ---------- Диалог ---------- Замена нативным confirm/prompt: те выпадают из интерфейса, не переводятся, не оформляются и не умеют больше одного поля. */ .dlg { position: fixed; inset: 0; z-index: 300; background: rgba(6,8,12,.62); display: flex; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(2px); } .dlg.hidden { display: none; } .dlg-box { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; width: 100%; max-width: 460px; max-height: 84vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.55); } .dlg-title { margin: 0 0 8px; font-size: 16.5px; letter-spacing: -.01em; } .dlg-text { margin: 0 0 4px; font-size: 13.5px; color: var(--muted); line-height: 1.55; } .dlg-field { display: block; margin-top: 14px; } .dlg-field > span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; } .dlg-field .hint { margin-top: 5px; display: block; } .dlg-choices { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; max-height: 46vh; overflow-y: auto; } .dlg-choice { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; } .dlg-choice:hover { border-color: var(--accent); } .dlg-choice input { width: auto; margin-top: 2px; flex-shrink: 0; } .dlg-choice b { font-weight: 600; font-size: 13.5px; } .dlg-choice i { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 2px; } /* Чипы в диалоге: один клик — ответ (chips), мультивыбор (toggles), подсказки к полю (presets). */ .dlg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .dlg-chips .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .dlg-presets { margin-top: 8px; } .dlg-html { margin-top: 14px; } .dlg-video { display: block; width: 100%; max-height: 46vh; background: #0a0c11; border-radius: 8px; cursor: pointer; } .dlg-scrub { display: block; width: 100%; margin-top: 10px; accent-color: var(--accent); } .dlg-scrub-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--muted); } .dlg-time { font-family: var(--mono, monospace); color: var(--text); } /* Кадры в диалоге. Гейт перед запуском роликов существует ради одного взгляда: «это моя игра или нарисованная заново» — значит кадр должен быть виден целиком и достаточно крупно, чтобы прочитать интерфейс. */ .ld-plan { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 10px 0 8px; } .ld-plan:empty { display: none; } .ld-plan b { color: var(--text); font-weight: 600; } .dlg-shots { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; } .dlg-shots figure { margin: 0; flex: 0 0 auto; scroll-snap-align: start; } .dlg-shots img { display: block; height: 42vh; max-height: 360px; width: auto; max-width: 100%; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); } .dlg-shots figcaption { font-size: 11.5px; color: var(--muted); margin-top: 4px; text-align: center; max-width: 190px; white-space: normal; line-height: 1.35; } /* Выбор кадра: карточки мельче гейта — их бывает полтора десятка, и главное здесь не разглядеть интерфейс, а узнать свой кадр и прочитать подпись. */ /* Сетка выбора должна быть ровной. Кадры приходят разных пропорций (9:16, 4:5, 1:1), а подписи — разной длины: от кода до целой сцены на арабском. С `width:auto` ряды выходили рваными, а строки съезжали друг относительно друга. Поэтому у всех фигур одна ширина, картинка вписывается внутрь, а подпись обрезается тремя строками. */ .dlg-shots.pickable { flex-wrap: wrap; align-items: flex-start; max-height: 56vh; overflow-y: auto; } .dlg-shots.pickable figure { cursor: pointer; width: 136px; } .dlg-shots.pickable img { width: 136px; height: 196px; object-fit: contain; cursor: pointer; transition: border-color .12s, transform .12s; } .dlg-shots.pickable figure:hover img { border-color: var(--accent); transform: translateY(-2px); } .dlg-shots.pickable figcaption { max-width: 136px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* С кадрами окно шире: в 460px вертикальный кадр 9:16 выходит размером с иконку, а по иконке ошибку в интерфейсе игры не видно. */ .dlg-box:has(.dlg-shots) { max-width: 720px; } .dlg-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; } .dlg-acts .primary, .dlg-acts .ghost { width: auto; margin: 0; padding: 9px 18px; font-size: 13.5px; } /* Опасное подтверждение красное: «удалить навсегда» не должно выглядеть так же, как «продолжить». */ .dlg-ok.dlg-danger { background: var(--err); } .dlg-ok.dlg-danger:hover { filter: brightness(1.08); } @media (max-width: 560px) { .dlg-box { padding: 18px 16px; } } /* ---------- Пикер ---------- Свой список поверх нативного