/* Strategy Templates UI - grid, cards, modal */
.template-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.template-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 14px;
  min-height: 120px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  position: relative;
}
.template-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.12);
}
.template-card:hover .card-tip {
  display: block;
}
.template-card .template-name { font-weight: 700; font-size: 15px; color: #fff; margin-bottom: 6px; }
.template-card .template-desc { font-size: 12.5px; color: #cbd5e1; min-height: 34px; }
.template-card .template-metrics { display: flex; gap: 12px; align-items: center; margin-top: 6px; font-size: 11.5px; color: #a6b3d1; }
.template-card .template-metric { display: flex; flex-direction: column; align-items: center; }
.template-card .template-risk { position: absolute; right: 10px; top: 10px; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.template-card .card-tip {
  display: none;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #00d2ff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  border: 1px solid rgba(0,210,255,0.3);
}
.risk-low { background: rgba(34,197,94,0.25); color: #34d399; }
.risk-medium { background: rgba(234,179,8,0.25); color: #f59e0b; }
.risk-high { background: rgba(239,68,68,0.25); color: #ef4444; }
.template-filter { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.filter-btn { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.25); color: #fff; font-size: 12px; cursor: pointer; }
.filter-btn.active { background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%); border-color: transparent; }
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); z-index: 1000; }
.modal.hidden { display: none; }
.modal-content { background: #111; border-radius: 8px; padding: 20px; width: 520px; max-width: calc(100% - 40px); color: #fff; }
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 12px; color: #a6b3d1; margin-bottom: 6px; }
.btn { padding: 8px 14px; border-radius: 6px; border: none; cursor: pointer; font-weight: 600; }
.btn-primary { background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%); color: #fff; }
.btn-secondary { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
@media (max-width: 1024px) {
  .template-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .template-grid { grid-template-columns: 1fr; }
}