/* ============================================================================
 * Theme Designer — «Собрать дизайн по тематике» (только кастомайзер)
 * ========================================================================== */

/* ---- «С чего начнём?» ---- */
.startcard { border: 1px solid #4a52a8; border-radius: 14px; padding: 12px; margin-bottom: 14px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(154,107,255,.28), transparent 60%), linear-gradient(180deg, #20265a, #1a1f48); }
.startcard .st-title { font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 15px; margin-bottom: 9px; }
.startcard .st-btns { display: flex; flex-direction: column; gap: 7px; }
.startcard .st-main { padding: 11px 12px; font-size: 13.5px; background: linear-gradient(135deg, #5b6bff, #b06bff);
  box-shadow: 0 6px 18px rgba(130,100,255,.35); }
.startcard .st-main:hover { filter: brightness(1.08); }
.startcard .st-hint { font-size: 11.5px; color: #aab0e8; line-height: 1.45; margin-top: 8px; }
.startcard .st-compact { display: none; width: 100%; background: linear-gradient(135deg, #3e4bb8, #7a52c8); }
.startcard.compact { padding: 0; border: 0; background: none; }
.startcard.compact .st-full { display: none; }
.startcard.compact .st-compact { display: block; }

/* ---- окно помощника ---- */
.td { position: fixed; inset: 0; z-index: 60; }
.td-backdrop { position: absolute; inset: 0; background: rgba(6,8,22,.72); backdrop-filter: blur(3px); }
.td-win { position: absolute; inset: 16px; max-width: 1560px; margin: 0 auto; display: flex; flex-direction: column;
  background: #12163a; border: 1px solid #343a70; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
body.td-open { overflow: hidden; }
.td-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #262b52; background: #171c44; }
.td-head h2 { font-family: 'Comfortaa', sans-serif; font-size: 17px; }
.td-ttl { flex: 1; min-width: 0; }
.td-sub { font-size: 12px; color: #9aa0d0; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-close { width: 34px; height: 34px; padding: 0; font-size: 22px; line-height: 1; background: #2a305c; border-radius: 10px; }
.td-back { white-space: nowrap; }

/* ---- галерея тематик ---- */
.td-gallery { flex: 1; overflow-y: auto; padding: 14px 16px 24px; }
.td-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.td .chip { padding: 5px 11px; border-radius: 99px; font-size: 12px; background: #1a1f47; color: #c3c8f0; border: 1px solid #2a305c; }
.td .chip:hover { border-color: #5561c9; background: #1f2552; }
.td .chip.on { background: #5b6bff; color: #fff; border-color: #8b93ff; }
.td-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.td-theme { background: #0f1330; border: 1px solid #2a305c; border-radius: 12px; padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 5px;
  outline: none; transition: border-color .12s, transform .12s; }
.td-theme:hover, .td-theme:focus-visible { border-color: #6a74e0; transform: translateY(-1px); }
.td-theme .thumb { border-radius: 9px; overflow: hidden; height: 84px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(260px 140px at 80% 20%, rgba(122,60,255,.55), transparent 60%), linear-gradient(135deg, #1b4a6b, #3d2c78 60%, #19203f); }
.td-theme .thumb svg { display: block; max-width: 100%; }
.td-theme .nm { display: flex; align-items: center; justify-content: space-between; font: 700 14px 'Comfortaa', sans-serif; color: #eef0ff; }
.td-theme .fav { padding: 0 4px; background: none; font-size: 17px; color: #8b91c4; line-height: 1; }
.td-theme .fav.on { color: #ffcf5a; }
.td-theme .ds { font-size: 11.5px; color: #aab0e8; line-height: 1.4; }
.td .traits { display: flex; flex-wrap: wrap; gap: 4px; }
.td .traits span { font-size: 10.5px; padding: 1px 7px; border-radius: 99px; background: #1d2350; color: #c8ccf5; border: 1px solid #2f3675; }
.td-theme .modes { font-size: 10.5px; color: #7f86bd; }

/* ---- студия ---- */
.td-studio { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px 1fr; }
.td-opts { overflow-y: auto; padding: 14px; border-right: 1px solid #262b52; display: flex; flex-direction: column; gap: 12px; background: #151936; }
.td-themehead .nm { font: 700 18px 'Comfortaa', sans-serif; margin-bottom: 6px; }
.td-row { display: flex; flex-direction: column; gap: 6px; }
.td-lab { font-size: 12px; font-weight: 700; color: #aab0e8; }
.td-lab .qi { display: inline-block; width: 15px; height: 15px; margin-left: 5px; border-radius: 50%; background: #2a305c; color: #aab0e8;
  font-size: 10px; line-height: 15px; text-align: center; cursor: help; }
.td-chk { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.td-chk input { accent-color: #7d87ff; width: 15px; height: 15px; }
.td-color { width: 100%; height: 30px; border: 1px solid #303663; border-radius: 8px; background: #0f1330; padding: 2px; cursor: pointer; }
.td-color:disabled { opacity: .35; cursor: default; }
.td-fixed { font-size: 12px; color: #cfd3ff; }
.td-lockbox { display: flex; flex-wrap: wrap; gap: 5px; }
.td-lockbox .lock { padding: 5px 9px; font-size: 12px; background: #1a1f47; color: #c3c8f0; border: 1px solid #2a305c; }
.td-lockbox .lock.on { background: #3f4aa8; color: #fff; border-color: #8b93ff; }
.td-lockfrom { font-size: 11px; color: #7f86bd; margin-top: -6px; }
.td-gen { padding: 11px 12px; font-size: 13.5px; background: linear-gradient(135deg, #5b6bff, #9a6bff); }

.td-grid { overflow-y: auto; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 12px; align-content: start; }
.td-card { background: #0f1330; border: 1px solid #2a305c; border-radius: 13px; padding: 9px; display: flex; flex-direction: column; gap: 8px; }
.td-card.sel { border-color: #8b93ff; box-shadow: 0 0 0 1px #8b93ff inset, 0 0 18px rgba(120,130,255,.25); }
.td-cardtop { display: flex; align-items: baseline; gap: 8px; }
.td-cardtop b { font: 700 13px 'Comfortaa', sans-serif; }
.td-rname { font-size: 12px; color: #aab0e8; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-selb { font-size: 10.5px; padding: 1px 7px; border-radius: 99px; background: #5b6bff; color: #fff; }
.td-scene { position: relative; border-radius: 10px; overflow: hidden; height: 190px; }
.td-scene.f-square { height: 290px; }
.td-scene.f-tall { height: 360px; }
.td-scene iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; pointer-events: none; }
.td-scene.plain { background: #f2f0fb; }
.td-scene.light { background:
  radial-gradient(420px 300px at 72% 26%, #ffb347, transparent 60%),
  radial-gradient(440px 320px at 18% 78%, #2ec5ff, transparent 60%),
  linear-gradient(135deg, #0d7a4f, #1b9c8a 60%, #0a5f6e); }
.td-scene.dark { background:
  radial-gradient(420px 300px at 30% 24%, #7a3cff, transparent 60%),
  radial-gradient(420px 320px at 82% 80%, #ff3c7a, transparent 60%),
  linear-gradient(135deg, #0d1030, #241a4a 60%, #0b0817); }
.td-hit { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; border-radius: 0; padding: 0; cursor: pointer; }
.td-hit:hover { background: rgba(255,255,255,.04); }
.td-hit:focus-visible { outline: 2px solid #8b93ff; outline-offset: -2px; }
.td-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.td-chips span { font-size: 10.5px; padding: 1px 7px; border-radius: 99px; background: #1d2350; color: #c8ccf5; border: 1px solid #2f3675; }
.td-acts { display: flex; flex-wrap: wrap; gap: 5px; }
.td-acts button { padding: 6px 9px; font-size: 11.5px; background: #2a305c; }
.td-acts button:hover { background: #3a4180; }
.td-acts .td-use { background: linear-gradient(135deg, #3fb37f, #2f9b8f); }
.td-acts .td-use:hover { filter: brightness(1.08); }
.td-save { display: flex; gap: 6px; }
.td-save input { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 8px; font-size: 12px; background: #0f1330; color: #e8e9ff;
  border: 1px solid #303663; font-family: inherit; }
.td-saved { font-size: 12px; color: #a8f0cd; }

@media (max-width: 980px) {
  .td-win { inset: 0; border-radius: 0; }
  .td-studio { grid-template-columns: 1fr; overflow-y: auto; }
  .td-opts { border-right: 0; border-bottom: 1px solid #262b52; overflow: visible; }
  .td-grid { overflow: visible; grid-template-columns: 1fr; }
  .td-sub { white-space: normal; }
}
@media (max-width: 520px) {
  .td-head { flex-wrap: wrap; }
  .td-themes { grid-template-columns: 1fr; }
}