.game-card-info .project-template-clone {
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(135, 116, 255, .42);
  border-radius: 10px;
  color: #ddd8ff;
  background: linear-gradient(135deg, rgba(108, 99, 255, .16), rgba(78, 205, 196, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .2px;
  cursor: pointer;
  transition: border-color .2s, color .2s, transform .2s, background .2s;
}
.game-card-info .project-template-clone:hover {
  color: #fff;
  border-color: rgba(154, 139, 255, .9);
  background: linear-gradient(135deg, rgba(108, 99, 255, .32), rgba(78, 205, 196, .14));
  transform: translateY(-1px);
}
.game-card-info .project-template-clone:focus-visible,
.template-btn:focus-visible,
.template-name-input:focus-visible,
.template-modal-close:focus-visible {
  outline: 2px solid rgba(132, 119, 255, .95);
  outline-offset: 2px;
}
.template-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2200;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 5, 18, .76);
  backdrop-filter: blur(12px);
}
.template-modal-overlay.show { display: flex; }
.template-modal-panel {
  position: relative;
  width: min(460px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid rgba(145, 128, 255, .32);
  border-radius: 20px;
  color: var(--text, #f4f2ff);
  background: linear-gradient(150deg, rgba(29, 26, 53, .98), rgba(13, 15, 31, .98));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55), 0 0 46px rgba(108, 99, 255, .13);
  animation: template-modal-in .22s ease-out;
}
.template-modal-glow {
  position: absolute;
  width: 250px;
  height: 250px;
  right: -105px;
  top: -145px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(108, 99, 255, .42), transparent 68%);
}
.template-modal-header,
.template-modal-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
}
.template-modal-header { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.template-modal-header h3 { margin: 3px 0 0; font-size: 20px; }
.template-modal-eyebrow { color: #9589ff; font-size: 10px; font-weight: 800; letter-spacing: 2px; }
.template-modal-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 10px;
  color: #a9a5bb;
  background: rgba(255, 255, 255, .04);
  font-size: 22px;
  cursor: pointer;
}
.template-modal-close:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.template-modal-body { position: relative; padding: 22px; }
.template-source {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 10px 12px;
  border-radius: 11px;
  color: #aaa5bd;
  background: rgba(255, 255, 255, .035);
  font-size: 12px;
}
.template-source strong { color: #e8e4ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.template-field-label { display: block; margin-bottom: 8px; color: #d9d5e8; font-size: 13px; font-weight: 650; }
.template-name-input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 11px;
  color: #fff;
  background: rgba(3, 4, 14, .42);
  font: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.template-name-input:focus { border-color: #7f72f2; box-shadow: 0 0 0 3px rgba(108, 99, 255, .14); }
.template-name-input:disabled { opacity: .65; }
.template-field-hint { margin-top: 8px; color: #777287; font-size: 11px; }
.template-workflow { margin: 18px 0 0; padding: 0; border: 0; }
.template-workflow-label { margin-bottom: 8px; color: #d9d5e8; font-size: 13px; font-weight: 700; }
.template-workflow-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.template-workflow-card { min-width: 0; padding: 13px; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; color: #b8b4c8; background: rgba(3,4,14,.28); text-align: left; cursor: pointer; }
.template-workflow-card strong,.template-workflow-card small,.template-workflow-card p { display: block; }
.template-workflow-card strong { margin: 5px 0 2px; color: #f4f2ff; font-size: 14px; }
.template-workflow-card small { color: #47B4B0; font-size: 10px; font-weight: 750; }
.template-workflow-card p { margin: 8px 0 0; font-size: 11px; line-height: 1.45; }
.template-workflow-card.selected { border-color: #7C6CF3; background: rgba(124,108,243,.16); box-shadow: 0 0 0 2px rgba(124,108,243,.12); }
.template-workflow-icon { color: #47B4B0; }
html[data-theme="light"] .template-workflow-label { color: #1B1A34; }
html[data-theme="light"] .template-workflow-card { color: #59666f; border-color: rgba(27,26,52,.16); background: #f7fbfb; }
html[data-theme="light"] .template-workflow-card strong { color: #1B1A34; }
html[data-theme="light"] .template-workflow-card.selected { background: rgba(124,108,243,.1); }
.template-message { min-height: 20px; margin-top: 14px; font-size: 12px; }
.template-message.pending { color: #bcb4ff; }
.template-message.success { color: var(--success, #4ecdc4); }
.template-message.error { color: #ff7f91; }
.template-modal-footer { justify-content: flex-end; padding-top: 0; }
.template-btn {
  min-width: 96px;
  padding: 10px 16px;
  border: 0;
  border-radius: 11px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.template-btn:disabled { cursor: not-allowed; opacity: .5; }
.template-btn-secondary { color: #c5c0d2; background: rgba(255, 255, 255, .065); }
.template-btn-primary { color: #fff; background: linear-gradient(135deg, #7568f2, #5a51d6); box-shadow: 0 8px 24px rgba(108, 99, 255, .27); }
.template-btn:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.08); }
@keyframes template-modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .template-workflow-cards { grid-template-columns: 1fr; } }