/* ============================================================
   Лука CMS — студия разработчика (финальный)
   ============================================================ */

/* --- Навигация студии --- */
.studio-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--vk-border);
    padding-bottom: 8px;
}
.studio-nav__item {
    padding: 8px 16px;
    background: #fff;
    border-radius: 6px;
    color: #2c2d2e;
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
    border: 1px solid transparent;
    transition: all 0.15s;
}
.studio-nav__item:hover {
    background: #f0f2f5;
    text-decoration: none;
    border-color: var(--vk-border);
}
.studio-nav__item.active {
    background: var(--vk-blue);
    color: #fff;
    border-color: var(--vk-blue);
}

/* --- Редактор кода --- */
.studio-file-tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.studio-file-tab {
    padding: 6px 12px; background: #f0f2f5; border-radius: 4px;
    color: #2c2d2e; font-size: 13px; font-family: monospace;
    text-decoration: none;
}
.studio-file-tab.active { background: var(--vk-blue); color: #fff; }
.studio-file-tab__dot { color: #43a047; font-size: 8px; margin-left: 4px; }
.studio-file-tab:hover { text-decoration: none; }

.studio-editor {
    display: flex; background: #1e1e1e; border-radius: 8px; overflow: hidden;
    min-height: 480px; font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px; line-height: 1.55; position: relative;
}
.studio-editor__gutter {
    background: #252526; color: #6a6a6a; padding: 12px 8px; text-align: right;
    user-select: none; min-width: 46px; overflow: hidden; white-space: pre;
    font-family: inherit; font-size: inherit; line-height: inherit;
}
.studio-editor__wrap { flex: 1; position: relative; overflow: hidden; }
.studio-editor__highlight,
.studio-editor__textarea {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    margin: 0; padding: 12px; font-family: inherit; font-size: inherit; line-height: inherit;
    border: 0; outline: 0; white-space: pre; overflow: auto;
    tab-size: 4; letter-spacing: 0; word-wrap: normal;
}
.studio-editor__highlight { color: #d4d4d4; background: #1e1e1e; pointer-events: none; }
.studio-editor__textarea {
    color: transparent; caret-color: #fff; background: transparent;
    resize: none; -webkit-text-fill-color: transparent;
}
.studio-editor__textarea::selection { background: rgba(90,150,200,.4); }
.studio-editor__actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
#editor-status { font-size: 12px; }

/* Подсветка синтаксиса */
.studio-editor .tok-comment { color: #6a9955; font-style: italic; }
.studio-editor .tok-string  { color: #ce9178; }
.studio-editor .tok-tag     { color: #569cd6; }
.studio-editor .tok-attr    { color: #9cdcfe; }
.studio-editor .tok-kw      { color: #c586c0; }
.studio-editor .tok-num     { color: #b5cea8; }
.studio-editor .tok-prop    { color: #4ec9b0; }

/* --- Ассеты --- */
.asset-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}
.asset-card {
    background: #fff; border-radius: 6px; padding: 8px;
    border: 1px solid var(--vk-border);
    display: flex; flex-direction: column; gap: 6px;
}
.asset-card img { width: 100%; height: 120px; object-fit: cover; border-radius: 4px; }
.asset-card audio { width: 100%; }
.asset-card__meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.asset-card__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }

/* --- Блоки кода API --- */
.api-code-block {
    background: #f0f2f5;
    color: #2c2d2e;
    padding: 12px;
    border-radius: 6px;
    font-family: 'Consolas', monospace;
    font-size: 13px;
    overflow-x: auto;
    margin-bottom: 12px;
    border: 1px solid var(--vk-border);
}

/* ============================================================
   ТЁМНАЯ ТЕМА (студия)
   ============================================================ */
body.dark-theme .studio-nav__item {
    background: #2c2c30;
    color: #e1e3e6;
    border-color: #333338;
}
body.dark-theme .studio-nav__item:hover {
    background: #3a3a40;
}
body.dark-theme .studio-nav__item.active {
    background: #2a5885;
    color: #fff;
    border-color: #2a5885;
}

body.dark-theme .studio-file-tab {
    background: #2c2c30;
    color: #8a8d91;
}
body.dark-theme .studio-file-tab:hover {
    background: #3a3a40;
    color: #e1e3e6;
}
body.dark-theme .studio-file-tab.active {
    background: #2a5885;
    color: #fff;
}

body.dark-theme .asset-card {
    background: #232326;
    border-color: #333338;
}
body.dark-theme .asset-card__name {
    color: #e1e3e6;
}

body.dark-theme .api-code-block {
    background: #1a1a1d;
    color: #8a8d91;
    border-color: #333338;
}

/* Инпуты в тёмной теме (кроме редактора) */
body.dark-theme .vk-form__label input,
body.dark-theme .vk-form__label select,
body.dark-theme .vk-form__label textarea {
    background: #2c2c30 !important;
    border-color: #444 !important;
    color: #fff !important;
}
body.dark-theme .vk-form__label span {
    color: #8a8d91;
}