/* ============================================================
   create-entry.css — «Создать фото»: карточки входа + скетч-модуль
   ============================================================ */

/* ── таб-полоса сверху ── */
.ce-tabs { display: flex; gap: 9px; flex-wrap: wrap; padding: 4px 0 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line, rgba(255,255,255,.07)); }
.ce-tab {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.04); color: var(--text-2, #c7c7cf);
  border: 1px solid var(--line, rgba(255,255,255,.08)); border-radius: 12px;
  padding: 10px 16px; font-family: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.ce-tab svg { width: 17px; height: 17px; }
.ce-tab:hover { background: rgba(255,255,255,.07); color: var(--text, #fff); }
.ce-tab.on { background: #ffffff; color: var(--accent-ink, #1a1f05); border-color: transparent; }

/* ── скетч-модуль ── */
.ce-sketch { width: 100%; max-width: 940px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; }
.ce-sk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ce-sk-back { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.05); color: var(--text-2, #c7c7cf); border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 10px; padding: 8px 13px; font-family: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
.ce-sk-back:hover { background: rgba(255,255,255,.09); color: var(--text, #fff); }
.ce-sk-back svg { width: 15px; height: 15px; }
.ce-sk-tools { display: inline-flex; align-items: center; gap: 12px; }
.ce-sk-color { position: relative; width: 32px; height: 32px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line, rgba(255,255,255,.15)); cursor: pointer; }
.ce-sk-color input { position: absolute; inset: -4px; width: 140%; height: 140%; border: 0; padding: 0; cursor: pointer; }
/* Полная заливка нативного color-input (убираем внутренние отступы/рамку — «белые проблески») */
.ce-sk-color input::-webkit-color-swatch-wrapper { padding: 0; border: 0; }
.ce-sk-color input::-webkit-color-swatch { border: 0; border-radius: 0; }
.ce-sk-color input::-moz-color-swatch { border: 0; }
.ce-sk-size { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2, #c7c7cf); font-size: 12.5px; font-weight: 600; }
.ce-sk-size input { accent-color: var(--accent, #E4F482); }
.ce-sk-ic { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); color: var(--text-2, #c7c7cf); border: 1px solid var(--line, rgba(255,255,255,.1)); cursor: pointer; }
.ce-sk-ic:hover { background: rgba(255,255,255,.1); color: var(--text, #fff); }
.ce-sk-ic svg { width: 16px; height: 16px; }

.ce-sk-stage-wrap { position: relative; display: flex; justify-content: center; }
.ce-sk-canvas { display: block; max-width: 100%; background: #fff; border-radius: 14px; border: 1px solid var(--line, rgba(255,255,255,.1)); cursor: crosshair; touch-action: none; }

.ce-sk-prompt { display: flex; gap: 10px; align-items: flex-end; }
.ce-sk-prompt textarea {
  flex: 1; resize: none; background: rgba(255,255,255,.04); color: var(--text, #fff);
  border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 13px; padding: 13px 15px;
  font-family: inherit; font-size: 14px; line-height: 1.4; min-height: 58px;
}
.ce-sk-prompt textarea:focus { outline: none; border-color: var(--accent, #E4F482); }
.ce-sk-go, .ce-rbtn.primary {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: #ffffff; color: var(--accent-ink, #1a1f05);
  border: 0; border-radius: 13px; padding: 13px 20px; font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}
.ce-sk-go:hover { filter: brightness(1.05); }
.ce-sk-go:disabled { opacity: .6; cursor: default; }
.ce-sk-go svg, .ce-rbtn svg { width: 17px; height: 17px; }

/* результат скетча */
.ce-sk-result { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ce-sk-result img { max-width: 100%; max-height: 64vh; border-radius: 14px; }
.ce-sk-ractions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ce-rbtn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: rgba(255,255,255,.05); color: var(--text, #fff);
  border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 12px;
  padding: 11px 17px; font-family: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer;
}
.ce-rbtn:hover { background: rgba(255,255,255,.09); }
.ce-rbtn.primary { border: 0; }
.ce-rbtn.primary:hover { background: #ffffff; filter: none; }

/* оверлей / спиннер / ошибка */
.ce-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(10,10,14,.66); backdrop-filter: blur(2px); border-radius: 14px; color: var(--text, #fff); font-size: 14px; }
.ce-spin { width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.2); border-top-color: var(--accent, #E4F482); border-radius: 50%; animation: ce-spin 0.8s linear infinite; }
@keyframes ce-spin { to { transform: rotate(360deg); } }
.ce-err { color: #ff8da3; font-size: 13.5px; text-align: center; }

@media (max-width: 720px) {
  .ce-cards { grid-template-columns: 1fr; }
  .ce-sk-tools { gap: 8px; }
}

/* ── стоимость в кнопке (скетч) ── */
.ce-cost { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px; border-radius: 8px; background: rgba(26,31,5,.16); font-size: 12.5px; font-weight: 700; }
.ce-coin { width: 11px; height: 11px; border-radius: 50%; background: currentColor; opacity: .5; display: inline-block; }

/* ── «Новый чат»: на лайме был белый текст (плохо видно) → плоский лайм + тёмный текст ── */
body[data-mode="image"] .studio-topbar .new-btn.lit,
body[data-mode="image"] .studio-topbar .new-btn.lit:hover { background: #ffffff; color: var(--accent-ink, #1a1f05); border-color: transparent; }
body[data-mode="image"] .studio-topbar .new-btn.lit svg { color: var(--accent-ink, #1a1f05); }

/* ── бейдж NEW/TOP на табе ── */
.ce-tab-badge { font-size: 8.5px; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--pink, #FF5097); border-radius: 5px; padding: 1px 5px; line-height: 1.5; }
.ce-tab.on .ce-tab-badge { background: var(--accent-ink, #1a1f05); color: var(--accent, #E4F482); }